*{box-sizing:border-box} :root{--teal:#075666;--ink:#203b42;--muted:#52686d;--burgundy:#a52d36;--paper:#f5f7f8;--line:#d7e2e5;--soft:#e6f0f2;--gold:#bf8000} [hidden]{display:none!important} body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,-apple-system,'Segoe UI',sans-serif}button,input,select{font:inherit}button,summary,select{cursor:pointer}a{color:var(--teal);text-underline-offset:4px}button{color:var(--teal);border:0;background:none}button,select,summary{min-height:44px}button:disabled{opacity:.5;cursor:default}button,a,summary,input,select{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.skip{position:fixed;top:-100px;left:16px;background:white;z-index:20;padding:12px}.skip:focus{top:10px}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;line-height:1.18;font-weight:500}h1{font-size:clamp(2.6rem,5vw,4rem);letter-spacing:-.04em;margin:0}h1 em{color:var(--burgundy);font-weight:400}h2{font-size:1.8rem;margin:8px 0 12px}h3{font-size:1.4rem}p{margin:0 0 12px}.small{font-size:.875rem}.muted{color:var(--muted)}.eyebrow{font-size:.75rem;font-weight:750;letter-spacing:.13em;color:var(--burgundy);margin:0 0 10px}.masthead{border-top:5px solid var(--burgundy);border-bottom:1px solid var(--line);background:white;display:flex;align-items:center;gap:26px;padding:8px max(24px,calc((100vw - 1240px)/2))}.masthead img{width:122px;height:61px;object-fit:contain;display:block}.club{font-size:1.2rem;font-weight:700;border-left:1px solid var(--line);padding-left:25px}.club span{display:block;font-size:.75rem;font-weight:400;color:var(--muted)}nav{margin-left:auto;display:flex;gap:26px;font-size:.875rem}nav a{text-decoration:none}main{max-width:1240px;margin:auto;padding:0 24px}.intro{display:flex;justify-content:space-between;align-items:center;padding:34px 0 25px}.intro>div>p:last-child{color:var(--muted);margin:9px 0 0}.intro-note{text-align:right;border-left:1px solid var(--line);padding-left:40px}.intro-note>span{font-family:'Microsoft YaHei',sans-serif;font-size:1.4rem;color:var(--teal);letter-spacing:.12em}.intro-note p{font-size:.875rem}.toolbar{display:flex;align-items:end;gap:18px;padding:17px 20px;background:white;border:1px solid var(--line);border-radius:12px 12px 0 0}.toolbar label,.picker label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--muted);margin-bottom:5px}select{max-width:100%;border:1px solid #b7cbd0;color:var(--ink);border-radius:7px;padding:9px 32px 9px 10px;background:white;min-width:0}.toolbar>div:first-child{min-width:225px}.toolbar>div:first-child select{width:100%}.outline{border:1px solid #aec4ca;border-radius:7px;padding:9px 15px;background:white}.outline:hover,.choice:hover{background:#eff6f7}.toolbar>.outline{margin-left:auto;white-space:nowrap}.toolbar>.outline span{font-size:1.25rem;margin-left:10px}.help-menu{position:relative}.help-menu>summary{display:flex;align-items:center;gap:8px;padding:8px;color:var(--teal);font-size:.875rem;white-space:nowrap}.help-menu>summary:after{content:'+';font-size:1.2rem}.help-panel{position:absolute;right:0;top:calc(100% + 14px);z-index:6;width:300px;background:white;border:1px solid var(--line);border-radius:10px;padding:22px;box-shadow:0 14px 40px #163d4925}.help-panel select{width:100%}fieldset{border:0;border-top:1px solid var(--line);margin:18px 0 0;padding:10px 0 0}legend{font-size:.875rem;font-weight:700;padding:0 8px 0 0}.toolbar fieldset label{font-size:.875rem;font-weight:400;display:flex;align-items:center;gap:9px;min-height:36px}input[type=checkbox]{accent-color:var(--teal);width:18px;height:18px}.help-panel .small{color:var(--muted);margin:12px 0 0}.workspace{display:grid;grid-template-columns:1.08fr 1fr;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;overflow:hidden;background:white}.scene-panel{padding:30px;background:linear-gradient(155deg,#e8f1f3,#f1f6f7);border-right:1px solid var(--line);min-width:0}.scene-heading{display:flex;justify-content:space-between;gap:12px}.scene-heading .small{font-size:.75rem;color:var(--muted)}.scene-panel>h2{font-size:2rem}.scene-panel>.muted{font-size:.875rem}.speaker-banner{display:flex;align-items:center;gap:10px;background:#fff9;padding:10px 14px;border:1px solid #d0e0e4;border-radius:7px;margin:24px 0 18px;font-weight:650;font-size:.875rem}.portrait{display:block;width:100%;aspect-ratio:1;position:relative;overflow:hidden;background:#dcebf0;border-radius:7px}.portrait img{display:block;position:absolute;max-width:none;object-fit:fill;z-index:1}.portrait-fallback{display:grid;place-items:center;position:absolute;inset:0;font:2rem Georgia;color:var(--teal)}.portrait.mini{width:36px;flex:0 0 36px;border-radius:50%}.cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}.person-card{padding:0 0 8px;text-align:left;min-width:0;border-radius:8px;background:transparent;border:2px solid transparent;overflow:hidden}.person-card.selected{border-color:var(--teal);background:white;box-shadow:0 4px 10px #153d4810}.person-card .portrait{border-radius:4px}.person-name{display:block;font-size:1rem;margin:10px 9px 0;overflow-wrap:anywhere}.person-age{display:block;color:var(--muted);font-size:.75rem;margin:0 9px}.person-role{display:block;font-size:.625rem;font-weight:750;letter-spacing:.06em;color:var(--teal);margin:8px 9px 0}.fact{margin:22px 0;background:white;border-left:3px solid var(--teal);padding:14px 17px;border-radius:0 7px 7px 0}.fact-label{font-size:.65rem;letter-spacing:.12em;color:var(--teal);font-weight:750}.fact p{font-size:.95rem;margin:6px 0 0}.scene-tools{display:flex;justify-content:space-between;align-items:start;gap:12px;font-size:.875rem}.scene-tools details{flex:1;max-width:220px}.scene-tools summary{text-align:right;padding:10px 0;color:var(--teal)}.picker{display:grid;gap:6px;margin:8px 0 16px}.picker select{width:100%}#connections{margin-top:18px;border-top:1px solid #c7dade;padding-top:6px}summary{padding:12px 0;font-size:.875rem;font-weight:600;color:var(--teal)}#facts-list{font-size:.875rem;color:var(--muted)}#facts-list ul{padding-left:20px}#facts-list li{margin:8px 0}.family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}.family-grid .person-role{display:none}.conversation-panel{padding:30px;min-width:0}.turn-top{display:flex;justify-content:space-between;align-items:start}.turn-top>.small{color:var(--muted);font-size:.75rem}.turn-progress{display:flex;gap:5px;margin:5px 0 25px}.turn-progress span{height:3px;background:#e5edef;flex:1;border-radius:3px}.turn-progress .filled{background:var(--teal)}.turn-title{font-size:1.65rem;margin-bottom:22px}.prompt{border-left:2px solid #cbdce0;padding:2px 0 2px 18px;margin-bottom:24px}.speaker-label{font-size:.7rem;color:var(--muted);font-weight:750;letter-spacing:.07em;margin-bottom:10px}.language p{margin:4px 0;overflow-wrap:anywhere}.language .zh{font:1.5rem/1.55 'Microsoft YaHei','Noto Sans SC',sans-serif;color:var(--ink)}.language .pinyin{font-size:1rem;color:var(--teal)}.language .clue{font-size:.875rem;color:var(--muted);font-style:italic}.language .en{font-size:.875rem;color:var(--muted)}.listen-actions{display:flex;align-items:center;gap:12px;margin-top:12px}.listen{background:var(--soft);border-radius:6px;padding:6px 12px;font-weight:650;font-size:.875rem;min-height:40px}.text-button{padding:6px 2px;text-decoration:underline;text-underline-offset:4px;font-size:.875rem}.your-turn{border-top:1px solid var(--line);padding-top:22px}.choices{display:grid;gap:10px}.choice{text-align:left;background:white;border:1px solid #c4d6db;border-radius:8px;padding:12px 16px;position:relative}.choice .zh{font-size:1.25rem}.choice .pinyin{font-size:.875rem}.choice .clue{display:none}.choice .en{font-size:.875rem}.try-first{font:1.5rem/1.35 Georgia;color:var(--teal);max-width:320px;margin:18px 0}.primary{background:var(--teal);color:white;padding:12px 20px;border-radius:7px;font-weight:650}.primary:hover{background:#08434e}.turn-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.turn-actions .text-button{flex-basis:100%;text-align:left}.hint{background:#fbf2d8;border-left:3px solid #bf8000;border-radius:0 5px 5px 0;padding:12px;margin-top:16px}.role-notice{background:#f9edf0;color:#822332;padding:10px;border-radius:5px}#feedback:not(:empty){margin-top:20px;padding:12px;background:#edf4ed;border:1px solid #ccdfd1;border-radius:7px;font-size:.875rem}#feedback input{max-width:100%;width:100%}#audio-status:not(:empty){font-size:.875rem;color:var(--teal);margin-top:12px}#mode-help{margin:18px 0 0}.completion-mark{font-size:2rem;color:var(--teal);background:var(--soft);border-radius:50%;width:60px;height:60px;display:grid;place-items:center;margin:25px 0}.completion-copy{font-size:1.1rem}.transcript-section{background:white;margin-top:16px;border:1px solid var(--line);border-radius:8px;padding:8px 24px}.transcript-line{padding:18px 0;border-top:1px solid var(--line)}.below{display:grid;grid-template-columns:1.4fr 1fr;gap:65px;padding:45px 0 30px}.below p{color:var(--muted);max-width:630px}.below h2{font-size:1.6rem}.below a{font-size:.875rem}.practice-note{border-left:1px solid var(--line);padding-left:32px}.practice-note h3{margin:0 0 12px}.practice-note>p{font-size:.875rem}.practice-note .small{font-size:.75rem;margin-top:10px}.edition{border-top:1px solid var(--line);padding:6px 0 12px}.edition p{font-size:.875rem;color:var(--muted);max-width:900px}footer{display:flex;gap:26px;flex-wrap:wrap;padding:24px 0 35px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}footer a{margin-left:auto}.notice{padding:30px;background:white;border:1px solid var(--line);border-radius:10px;margin:20px 0}.admin{max-width:960px}.admin .notice{overflow-wrap:anywhere}.admin table{border-collapse:collapse;width:100%;font-size:.875rem}.admin td,.admin th{text-align:left;padding:10px;border-bottom:1px solid var(--line);vertical-align:top}.admin button{margin:10px 0}.admin pre{white-space:pre-wrap;overflow-wrap:anywhere}
@media(min-width:1100px){.scene-panel{padding:34px}.conversation-panel{padding:34px 38px}.cast{gap:16px}.person-role{font-size:.7rem}}
@media(max-width:920px){.toolbar{gap:12px;flex-wrap:wrap}.toolbar>div:first-child{min-width:180px}.toolbar>.outline{margin-left:0}.help-menu{margin-left:auto}.workspace{grid-template-columns:1fr 1fr}.scene-panel,.conversation-panel{padding:22px}.scene-tools{flex-wrap:wrap}.cast{gap:5px}.person-name{font-size:.875rem;margin-left:5px}.person-age,.person-role{margin-left:5px}.club{display:none}.below{gap:25px}.intro-note{padding-left:20px}.scene-panel>h2{font-size:1.75rem}}
@media(max-width:700px){main{padding:0 16px}.masthead{padding:7px 16px;gap:12px}.masthead img{width:100px;height:50px}nav{gap:15px;font-size:.75rem}.intro{padding:24px 0 20px}.intro-note{display:none}h1{font-size:2.8rem}.intro .eyebrow{font-size:.65rem}.intro>div>p:last-child{font-size:.875rem}.toolbar{padding:14px 14px 12px;gap:10px;align-items:end}.toolbar>div:first-child{flex:1 1 100%;min-width:0}.toolbar>div:nth-child(2){flex:1;min-width:0}.toolbar select{width:100%;font-size:.875rem}.toolbar>.outline{font-size:.875rem;padding:8px 10px}.toolbar>.outline span{display:none}.help-menu{flex-basis:100%;margin:0}.help-menu>summary{min-height:36px;padding:5px 0}.help-panel{left:0;right:auto;top:100%;width:min(300px,calc(100vw - 62px))}.workspace{grid-template-columns:1fr}.scene-panel{border-right:0;border-bottom:1px solid var(--line);padding:22px 18px}.scene-heading{align-items:start}.scene-panel>h2{font-size:1.75rem}.scene-panel>.muted{margin-bottom:16px}.speaker-banner{margin:14px 0}.cast{gap:12px}.person-name{margin-left:7px;font-size:.95rem}.person-age,.person-role{margin-left:7px}.portrait{aspect-ratio:1}.fact{margin:16px 0}.scene-tools{flex-wrap:nowrap}#connections{margin-top:12px}.conversation-panel{padding:25px 20px}.turn-title{font-size:1.6rem}.language .zh{font-size:1.5rem}.choice .zh{font-size:1.25rem}.turn-actions{gap:10px}.turn-actions>.primary{width:100%}.below{grid-template-columns:1fr;padding:32px 0;gap:25px}.practice-note{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}.below h2{font-size:1.5rem}.edition p{font-size:.875rem}footer{gap:10px;display:block}footer>span,footer>a{display:block;margin:6px 0}.family-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.bonus{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;margin:28px 0 0;padding:30px 34px;border:1px solid #d9c9ce;border-left:4px solid var(--burgundy);border-radius:9px;background:#fffafa}.bonus h2{font-size:1.9rem}.bonus p:not(.eyebrow){font-size:.95rem;color:var(--muted);max-width:580px}.bonus .primary{margin-top:8px;background:var(--burgundy)}.bonus-words{display:flex;justify-content:space-between;gap:14px;align-items:center}.bonus-words>span{font:1.7rem 'Microsoft YaHei',sans-serif;color:var(--burgundy);text-align:center}.bonus-words small{display:block;font: .75rem/1.5 system-ui;color:var(--muted);max-width:100px;margin:10px auto 0}.relationship-path{font-size:.875rem!important;color:var(--muted)}.fact .language{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}.fact .language .zh{font-size:1.6rem}.family-grid{max-height:510px;overflow:auto;padding:3px}.family-grid .person-card{min-height:0}.family-grid .person-name{font-size:.875rem}.family-grid .person-age{font-size:.75rem}@media(max-width:700px){.bonus{grid-template-columns:1fr;gap:20px;padding:24px}.bonus-words{justify-content:start;gap:25px}.bonus h2{font-size:1.65rem}.scene-panel .scene-caption{display:none}.toolbar .help-menu>summary{font-size:.875rem}}