.app-shell{display:grid;gap:clamp(1.5rem,3vw,2.5rem);max-width:min(1200px,100%);margin:0 auto;padding-bottom:clamp(1rem,3vw,2.5rem)}.header{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.75rem)}.title-block{display:grid;gap:.5rem}.tag{margin:0;display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:999px;font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);background:var(--primary-soft);width:fit-content}.app-title{margin:0;font-size:clamp(1.8rem,3vw,3rem);font-family:"Instrument Serif",serif;letter-spacing:-.01em}.subtitle{margin:0;font-size:clamp(1rem,1.5vw,1.25rem);max-width:46ch;color:var(--muted-text)}.story-selector{display:flex;flex-wrap:wrap;gap:.5rem}.story-pill{border:1px solid var(--primary-soft-border);background:var(--surface-strong);border-radius:999px;padding:.55rem 1.1rem;font-weight:600;color:var(--primary);cursor:pointer;transition:all .2s ease}.story-pill:hover{transform:translateY(-1px);box-shadow:0 12px 24px var(--primary-soft-shadow)}.story-pill.is-active{background:var(--primary);color:var(--primary-contrast);box-shadow:0 16px 30px var(--primary-soft-shadow)}.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:clamp(28px,5vw,40px);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:grid;grid-template-rows:1fr auto}.card-body{padding:clamp(1.5rem,4vw,3rem);display:grid;gap:clamp(1.25rem,2vw,2rem)}.card-meta-row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}.story-overview{display:grid;gap:.75rem}.story-overview-headline{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem}.story-overview-title{margin:0;font-size:clamp(1.4rem,2.5vw,2rem);font-family:"Instrument Serif",serif;letter-spacing:-.01em}.story-overview-badges{display:flex;flex-wrap:wrap;gap:.4rem}.story-badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.35rem .9rem;background:var(--surface-soft);color:var(--primary);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.story-overview-description{margin:0;color:var(--muted-text);font-size:.95rem;line-height:1.5}.story-tag-list{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}.story-tag-item{background:var(--primary-soft);color:var(--primary);border-radius:12px;padding:.25rem .7rem;font-size:.75rem;font-weight:600}.progress{display:flex;align-items:baseline;gap:.5rem;font-size:.95rem;color:var(--muted-text)}.progress-value{font-weight:700;font-size:1.05rem;color:var(--text)}.track-name{margin:0;font-size:clamp(1.6rem,3vw,2.5rem);font-family:"Instrument Serif",serif;letter-spacing:-.01em}.mode-settings{display:grid;gap:.25rem}.mode-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--primary-muted)}.mode-toggle{position:relative;display:grid;grid-template-columns:repeat(2,minmax(90px,1fr));border-radius:999px;background:var(--primary-soft);padding:.4rem;overflow:hidden}.mode-thumb{position:absolute;top:.3rem;right:.3rem;bottom:.3rem;left:.3rem;width:calc(50% - .2rem);border-radius:999px;background:#ffffffe6;box-shadow:0 10px 25px var(--primary-soft-shadow);transform:translate(0);transition:transform .25s ease}.mode-thumb.is-right{transform:translate(100%)}.mode-option{position:relative;z-index:1;border:none;background:transparent;padding:.45rem .75rem;font-weight:600;border-radius:999px;color:var(--primary);cursor:pointer;transition:color .2s ease}.mode-option.is-active{color:var(--text)}.settings-button,.theme-toggle{border:none;border-radius:999px;padding:.5rem 1.2rem;font-weight:600;background:var(--surface-soft);color:var(--text);cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.settings-button:hover,.theme-toggle:hover{transform:translateY(-1px);background:var(--surface);box-shadow:0 12px 24px #120d2e38}.settings-button{display:inline-flex;align-items:center;gap:.4rem}.player-stack{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:start}.play-button{width:clamp(66px,12vw,96px);aspect-ratio:1;border-radius:24px;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--primary-contrast);font-size:clamp(1.6rem,4vw,2.2rem);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 30px var(--primary-soft-shadow);transition:transform .2s ease}.play-button:hover{transform:scale(1.03)}.player-meta{display:grid;gap:.75rem}.prompt-context{display:grid;gap:.5rem}.prompt-chip{width:fit-content;background:var(--surface-strong);padding:.35rem .8rem;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-muted)}.player-instruction{margin:0;font-size:clamp(.95rem,1.3vw,1.1rem);color:var(--muted-text)}.prompt-preview{border-radius:18px;border:1px solid var(--primary-soft-border);background:var(--surface);padding:.75rem 1rem;box-shadow:inset 0 1px #ffffff0d}.prompt-preview .reveal-text{color:var(--text)}.reveal-controls{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.reveal-button{background:var(--primary);color:var(--primary-contrast);border:none;border-radius:999px;padding:.65rem 1.6rem;font-weight:600;font-size:.95rem;cursor:pointer;box-shadow:0 14px 30px var(--primary-soft-shadow);transition:transform .2s ease,box-shadow .3s ease}.reveal-button:hover{transform:translateY(-1px);box-shadow:0 18px 40px var(--primary-soft-shadow)}.field-toggle-group{display:flex;flex-wrap:wrap;gap:.5rem}.field-toggle{display:flex;align-items:center;gap:.6rem;background:var(--primary-soft);border-radius:16px;padding:.45rem .75rem;cursor:pointer;color:var(--primary);font-weight:600;border:1px solid transparent;transition:all .2s ease}.field-toggle input{display:none}.field-toggle small{display:block;font-weight:500;color:var(--primary-muted);font-size:.7rem}.field-toggle.is-active{background:var(--primary-soft-strong);border-color:var(--primary-soft-border)}.reveal-panel{border-radius:22px;border:1px dashed var(--primary-soft-border);background:var(--surface);padding:clamp(1rem,2vw,1.75rem);display:grid;gap:.75rem;opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease}.reveal-panel.is-visible{opacity:1;transform:translateY(0)}.reveal-placeholder,.reveal-empty{font-size:.95rem;color:var(--muted-text)}.reveal-line{display:grid;gap:.25rem}.reveal-label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-muted);font-weight:700}.reveal-text{margin:0;font-size:clamp(1.2rem,2vw,1.6rem);font-weight:600;color:var(--text)}.reveal-line.reveal-chinese .reveal-text{font-size:clamp(1.6rem,3vw,2.2rem);font-family:"Instrument Serif",serif}.reveal-text-chinese{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.hanzi-button{border:none;border-radius:12px;padding:.35rem .6rem;font-size:inherit;font-family:inherit;background:var(--primary-soft);color:var(--text);cursor:pointer;transition:transform .2s ease,background .2s ease}.hanzi-button:hover,.hanzi-button:focus-visible{background:var(--primary-soft-strong);transform:translateY(-1px);outline:none}.hanzi-button:focus-visible{box-shadow:0 0 0 2px var(--primary-soft-outline)}.hanzi-punctuation{padding:.35rem .1rem}.hanzi-space{width:.75rem}.card-footer{padding:clamp(1rem,2.5vw,1.75rem) clamp(1.5rem,4vw,3rem);border-top:1px solid var(--divider);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.nav-group{display:flex;gap:.75rem;flex-wrap:wrap}.nav-button{background:var(--surface-soft);color:var(--text);border:none;border-radius:999px;padding:.55rem 1.2rem;font-weight:600;cursor:pointer;transition:background .2s ease}.nav-button .nav-icon{margin-left:.35rem}.nav-button:hover{background:var(--surface)}.card-footer-meta{flex:1;min-width:min(260px,100%);display:flex;justify-content:center}.card-footer audio{border-radius:999px;background:#ffffffb3}.audio-missing{color:var(--primary-muted);font-size:.9rem}.stroke-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:20}.stroke-dialog{background:#ffffffeb;border-radius:32px;box-shadow:0 28px 60px #1c145259;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);max-width:420px;width:min(100%,420px);display:grid;gap:1rem}.stroke-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem 0}.stroke-title{margin:0;font-family:"Instrument Serif",serif;font-size:1.8rem;color:var(--text)}.stroke-close{border:none;background:var(--surface-soft);color:var(--primary);border-radius:999px;font-size:1.5rem;width:2.8rem;height:2.8rem;cursor:pointer;transition:background .2s ease}.stroke-close:hover{background:var(--surface)}.stroke-body{padding:0 1.5rem 1.5rem;display:grid;gap:1rem}.stroke-character{font-size:3rem;font-family:"Instrument Serif",serif;text-align:center}.stroke-canvas{width:100%;aspect-ratio:1;border-radius:24px;overflow:hidden;background:var(--surface-soft);display:flex;align-items:center;justify-content:center}.stroke-hint{margin:0;text-align:center;font-size:.9rem;color:var(--muted-text)}.stroke-replay{border:none;border-radius:999px;padding:.65rem 1.4rem;background:linear-gradient(135deg,var(--primary-soft),var(--primary-soft-strong));color:var(--text);font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.stroke-replay:hover{transform:translateY(-1px);box-shadow:0 16px 32px var(--primary-soft-shadow)}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#04061499;display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:30}.settings-dialog{width:min(520px,100%);background:#ffffffeb;border-radius:32px;box-shadow:0 30px 70px #1012284d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow:hidden;display:grid;grid-template-rows:auto 1fr}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.75rem}.settings-header h2{margin:0;font-size:1.6rem;font-family:"Instrument Serif",serif}.settings-close{border:none;background:var(--surface-soft);border-radius:999px;width:2.75rem;height:2.75rem;font-size:1.5rem;cursor:pointer;color:var(--primary);transition:background .2s ease}.settings-close:hover{background:var(--surface)}.settings-body{padding:0 1.75rem 1.75rem;display:grid;gap:1.5rem}.settings-section{display:grid;gap:.75rem}.settings-section h3{margin:0;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-muted)}.settings-description{margin:0;font-size:.95rem;color:var(--muted-text)}.settings-options{display:grid;gap:.75rem}.settings-option{position:relative;border:1px solid var(--primary-soft-border);border-radius:20px;padding:.85rem 1rem;display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease}.settings-option.is-active{border-color:var(--primary);box-shadow:0 12px 28px #1b134c1f}.settings-option input{margin-top:.3rem}.settings-option-content{display:grid;gap:.25rem}.settings-option-label{font-weight:700;color:var(--text)}.settings-option-description{font-size:.9rem;color:var(--muted-text)}@media (max-width: 768px){body{padding:1rem}.card{border-radius:24px}.card-meta-row{flex-direction:column;align-items:stretch}.player-stack{grid-template-columns:1fr}.play-button{width:76px;justify-self:center}.card-footer{flex-direction:column}.nav-button{width:100%}}@media (min-width: 1440px){.app-shell{max-width:1280px}.player-stack{grid-template-columns:minmax(80px,1fr) 3fr}}@media (min-width: 2000px){body{padding:3rem 4.5rem}.app-shell{max-width:1600px}.card{border-radius:48px}}:root{color-scheme:dark;font-family:Karla,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;--background-gradient: radial-gradient(circle at 15% 15%, #1c1c1e, #111113 55%, #0a0a0c 100%);--card-bg: rgba(28, 28, 30, .9);--card-border: rgba(255, 255, 255, .08);--primary: #0a84ff;--primary-dark: #0060df;--primary-contrast: #ffffff;--primary-soft: rgba(10, 132, 255, .16);--primary-soft-strong: rgba(10, 132, 255, .26);--primary-soft-border: rgba(10, 132, 255, .28);--primary-soft-outline: rgba(10, 132, 255, .35);--primary-soft-shadow: rgba(10, 132, 255, .22);--primary-muted: rgba(10, 132, 255, .65);--text: #f5f5f7;--muted-text: #a2a2a8;--surface: rgba(44, 44, 46, .75);--surface-soft: rgba(58, 58, 60, .55);--surface-strong: rgba(72, 72, 74, .85);--divider: rgba(255, 255, 255, .08);--shadow: 0 20px 45px rgba(0, 0, 0, .55);background:var(--background-gradient);color:var(--text)}html[data-theme=light]{color-scheme:light;--background-gradient: radial-gradient(circle at 20% 25%, #f5f5f9, #f0f4ff 60%, #ecf1ff 100%);--card-bg: rgba(255, 255, 255, .9);--card-border: rgba(15, 23, 42, .08);--primary: #0a84ff;--primary-dark: #0060df;--primary-contrast: #ffffff;--primary-soft: rgba(10, 132, 255, .12);--primary-soft-strong: rgba(10, 132, 255, .2);--primary-soft-border: rgba(10, 132, 255, .24);--primary-soft-outline: rgba(10, 132, 255, .28);--primary-soft-shadow: rgba(10, 132, 255, .22);--primary-muted: rgba(10, 132, 255, .65);--text: #16151d;--muted-text: #5d5f6d;--surface: rgba(255, 255, 255, .68);--surface-soft: rgba(255, 255, 255, .48);--surface-strong: rgba(242, 244, 250, .92);--divider: rgba(15, 23, 42, .08);--shadow: 0 20px 45px rgba(15, 23, 42, .12)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--background-gradient);display:flex;justify-content:center;align-items:stretch;padding:clamp(1rem,2vw,2.5rem)}#root{width:100%}button{font-family:inherit}audio{width:100%}