:root{--bg:#faf8f2;--surface:#fffefb;--ink:#3a4038;--muted:#898b80;--sage:#6d8b76;--sage-deep:#496d5b;--accent:#dd9e79;--line:#ebe8dd;--gold:#ddb778;--shadow:0 15px 42px rgba(74,75,51,.065);--radius:22px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b2a2ce;outline-offset:3px}img{display:block;max-width:100%}.app-shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:10;background:#fcfaf5ed;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);height:86px;display:flex;align-items:center;gap:34px;border-bottom:1px solid #ece8dc;padding:0 max(34px,calc((100vw - 1230px)/2))}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}.brand-icon{font-size:27px;display:grid;place-items:center;color:#8c9873;background:#eaf0e4;width:48px;height:48px;border-radius:17px}.brand-copy{display:flex;flex-direction:column;gap:3px}.brand-copy b{font-size:17px;letter-spacing:.07em}.brand-copy small{font-family:Georgia,serif;color:#a3a192;font-size:10px;letter-spacing:.09em}.topnav{display:flex;gap:7px;align-self:stretch;align-items:center;margin:auto}.topnav a{padding:11px 15px;border-radius:14px;color:#777b70;font-size:14px;white-space:nowrap}.topnav a:hover,.topnav a.active{background:#e9efe4;color:#4f715f}.top-status{color:#999d90;font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:8px}.status-dot{height:7px;width:7px;background:#8db296;border-radius:50%}.page{max-width:1230px;margin:0 auto;padding:47px 34px 76px;min-height:calc(100vh - 150px)}.eyebrow{font-size:11px;letter-spacing:.19em;font-weight:700;color:#8b9c80;text-transform:uppercase}.hero-intro h1,.page-intro h1{font-weight:600;letter-spacing:-.035em;font-size:clamp(32px,4vw,58px);line-height:1.28;margin:22px 0}.hero-intro h1 em{font-style:normal;font-family:Georgia,"Songti SC",serif;color:#6e907b}.hero-intro p,.page-intro p{font-size:15px;line-height:2;color:#888b7f;max-width:520px;margin:0}.home-page{display:grid;grid-template-columns:1.05fr .95fr;gap:40px 53px;padding-top:75px}.hero-intro{align-self:center;padding-bottom:30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:31px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:none;padding:14px 22px;border-radius:14px;font-size:13px;font-weight:700;transition:transform .18s,background .18s;white-space:nowrap}.button:hover{transform:translateY(-2px)}.button.primary{background:#6b8c76;color:white}.button.primary:hover{background:#55755f}.button.secondary{background:#f0eee6;color:#758276}.button.outline{background:#fff;border:1px solid #cbd8c9;color:#597c65}.button.outline.done{background:#e8f0e5;color:#52765b}.button.small{padding:9px 12px;font-size:12px}.home-feature{border-radius:30px;overflow:hidden;background:#e5e8d4;box-shadow:0 23px 60px rgba(74,75,51,.13);position:relative;min-height:374px}.home-feature-art{height:100%;position:absolute;inset:0}.home-feature-art img{width:100%;height:100%;object-fit:cover}.home-feature-caption{position:absolute;bottom:0;left:0;right:0;padding:27px 25px 24px;background:linear-gradient(0deg,rgba(40,56,47,.79),transparent);color:#fff;display:flex;flex-direction:column;gap:6px}.home-feature-caption span{font-size:11px;letter-spacing:.15em;opacity:.84}.home-feature-caption b{font-family:Georgia,serif;font-weight:normal;font-size:23px}.home-feature-caption small{opacity:.86}.mini-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:23px;padding:22px 14px;box-shadow:var(--shadow)}.mini-metrics>div{text-align:center;display:flex;flex-direction:column;gap:5px}.mini-metrics>div+div{border-left:1px solid var(--line)}.mini-metrics strong{font:normal 31px Georgia,serif;color:#62816d}.mini-metrics span{font-size:12px;color:var(--muted)}.section-heading{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;padding-top:14px}.section-heading h2{font-size:27px;font-weight:600;margin:11px 0 9px}.section-heading p{font-size:14px;margin:0;color:var(--muted)}.quiet-link{color:var(--sage-deep);font-size:13px;padding-bottom:4px}.stories-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.story-card{background:white;border:1px solid #eae8df;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.story-card:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(74,75,51,.11)}.card-art{height:168px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.tone-forest{--tone-light:#d6e7d3;--tone-mid:#aac7aa;--tone-dark:#7b9c7d}.tone-honey{--tone-light:#f8ebc7;--tone-mid:#efcf91;--tone-dark:#bda36b}.tone-ocean{--tone-light:#dceef0;--tone-mid:#a3d0d5;--tone-dark:#77a9b3}.tone-rose{--tone-light:#f6e4df;--tone-mid:#e7c3bd;--tone-dark:#c0928b}.tone-lavender{--tone-light:#ece4f3;--tone-mid:#c7b8d9;--tone-dark:#9f91bc}.card-art{background:radial-gradient(circle at 57% 40%,#fff9 0%,transparent 45%),linear-gradient(135deg,var(--tone-light),var(--tone-mid))}.mini-issue{position:absolute;top:18px;left:20px;color:#686e61;font-size:10px;letter-spacing:.16em;font-weight:700}.card-emoji{font-size:72px;filter:drop-shadow(0 10px 7px #7b7d5f33);transform:rotate(-6deg)}.card-copy{padding:21px 22px 19px;display:flex;flex-direction:column;flex:1;gap:0}.card-topline{display:flex;justify-content:space-between;gap:10px;color:#91a08b;font-size:11px}.audio-label{color:#8b7c53;background:#f6f0df;border-radius:10px;padding:2px 7px}.card-copy h3{font:normal 20px/1.35 Georgia,serif;margin:15px 0 4px;letter-spacing:-.02em}.card-zh{font-size:13px;color:#6c8572;margin:0}.card-description{color:#97978b;font-size:12px;line-height:1.8;flex:1;min-height:42px}.card-footer{display:flex;justify-content:space-between;border-top:1px solid #eeeae2;padding-top:14px;color:#8c9184;font-size:11px}.card-footer span:last-child{color:#688a75;font-weight:600}.workflow-strip{grid-column:1/-1;background:#f1f3e9;border:1px dashed #d8decf;padding:19px 22px;border-radius:18px;display:flex;gap:16px;align-items:center}.workflow-icon{font-size:28px;color:#7c977d}.workflow-strip b{font-size:13px}.workflow-strip p{color:#818a7e;font-size:12px;line-height:1.8;margin:6px 0 0}.site-footer{max-width:1230px;margin:0 auto;padding:28px 34px 45px;border-top:1px solid #eee9e0;color:#a09f96;font-size:11px;display:flex;justify-content:space-between}.mobile-nav{display:none}.page-intro{margin-bottom:28px}.page-intro h1{margin:15px 0}.collection-banner{display:flex;gap:18px;align-items:center;border-radius:19px;padding:18px 23px;background:#edf1e7;margin-bottom:28px}.collection-banner>span{font-size:33px}.collection-banner b{font-size:14px}.collection-banner p{font-size:12px;line-height:1.8;margin:5px 0 0;color:#798979}.all-stories{gap:22px}.story-breadcrumb{display:flex;justify-content:space-between;align-items:center;color:#8f978b;font-size:12px;margin-bottom:25px}.story-breadcrumb a{color:#6a8873}.story-breadcrumb span{letter-spacing:.15em;font-size:10px}.story-title{text-align:center;margin:0 auto 36px}.story-title h1{font:normal clamp(31px,4vw,49px)/1.18 Georgia,serif;letter-spacing:-.025em;margin:14px 0}.story-title p{margin:0;color:#77917d;font-size:14px}.story-title p span{color:#a4a79b}.reading-grid{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:26px;align-items:start}.main-reading{min-width:0}.story-illustration{border-radius:23px;min-height:365px;background:linear-gradient(140deg,var(--tone-light),var(--tone-mid));position:relative;overflow:hidden}.story-illustration>img{width:100%;height:365px;object-fit:cover}.art-note{position:absolute;bottom:13px;right:16px;color:#415d49cc;background:#ffffffc4;padding:6px 10px;border-radius:10px;font-size:10px}.scene-placeholder{min-height:365px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.scene-emoji{font-size:100px;filter:drop-shadow(0 10px 10px #596a5633)}.scene-placeholder span{color:#677264;font-size:12px}.player-panel{border:1px solid #e9e7dc;border-radius:19px;background:white;padding:20px 23px;margin-top:20px;box-shadow:var(--shadow)}.player-copy{display:flex;align-items:center;gap:13px;margin-bottom:13px}.icon-disc{height:40px;width:40px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:#ebf0e7;color:#607a61;font-size:22px}.player-copy b,.pending-player b{font-size:13px}.player-copy small{display:block;color:#989b90;margin-top:5px;font-size:11px}.player-panel audio{width:100%;height:46px;display:block}.player-under{display:flex;align-items:center;gap:15px;flex-wrap:wrap;font-size:11px;color:#919588;margin-top:11px}.rate-buttons{display:flex;gap:5px}.rate-buttons button{font-size:11px;background:#f7f6f1;border:1px solid transparent;border-radius:8px;padding:6px 9px;color:#8e8e84}.rate-buttons button.selected{background:#e5efe5;border-color:#ccdccc;color:#56755d}.text-button{margin-left:auto;background:none;border:none;color:#6d9177;font-size:11px}.pending-player{display:flex;align-items:center;gap:13px}.pending-player p{font-size:11px;color:#9b9b91;line-height:1.8;margin:4px 0 0}.reader-card{background:#fff;border:1px solid #ece9e0;border-radius:24px;padding:24px 32px 36px;margin-top:20px;box-shadow:var(--shadow)}.reader-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:19px;border-bottom:1px solid var(--line)}.reader-toolbar>div:first-child{display:flex;flex-direction:column;gap:5px}.reader-toolbar strong{font-size:15px}.mode-switch{display:flex;gap:4px;background:#f5f4ef;border-radius:11px;padding:4px}.mode-switch button{font-size:11px;background:transparent;border:0;border-radius:8px;color:#909589;padding:8px 12px}.mode-switch button.selected{background:#fff;color:#568267;box-shadow:0 2px 7px #58604e1a}.reader-lead{font-size:12px;color:#a1a394;margin:23px 0 8px}.scene-text{padding:24px 0 12px}.scene-eyebrow{color:#91a58d;font-size:10px;letter-spacing:.13em}.scene-eyebrow span{letter-spacing:0;color:#a5a99d}.scene-text h3{font:normal 23px Georgia,serif;margin:11px 0 18px;color:#4d5c4d}.english-text{font:normal 19px/2.03 Georgia,'Times New Roman',serif;color:#4d5149}.english-text p{margin:0 0 16px}.target-word{padding:1px 3px;border:0;background:linear-gradient(0deg,#f5edb9 35%,transparent 37%);font:inherit;color:#426d53;border-radius:2px;display:inline;transition:background .15s}.target-word:hover{background:#e5eddc}.scene-separator{text-align:center;color:#dddcc9;font-size:11px;margin:7px 0}.reader-complete{display:flex;justify-content:flex-end;align-items:center;gap:15px;margin:17px 0 30px;color:#a1a297;font-size:12px}.reading-sidebar{position:sticky;top:112px}.vocabulary-box{background:white;border:1px solid var(--line);border-radius:20px;padding:22px 19px;box-shadow:var(--shadow)}.side-header h3{font-size:18px;font-weight:600;margin:8px 0 16px}.side-header h3 small{font-size:11px;color:#9fa79b;font-weight:400}.vocab-chips{display:grid;gap:7px}.vocab-chip{text-align:left;display:flex;gap:10px;align-items:center;width:100%;background:#f8f8f2;border:1px solid transparent;border-radius:11px;padding:9px 10px}.vocab-chip:hover{background:#ecf2e9;border-color:#d5e1d3}.chip-index{font:11px Georgia,serif;color:#b0b6a6;min-width:17px}.vocab-chip>span:nth-child(2){font:15px Georgia,serif;flex:1;color:#506653}.vocab-chip small{font-size:11px;color:#989e93}.vocab-tip{font-size:11px;color:#a5a99e;line-height:1.8;margin:16px 2px 0}.sidebar-next{padding:21px 20px;margin-top:15px;border-radius:17px;background:#eaf0e7;display:flex;flex-direction:column;gap:9px}.sidebar-next b{font:normal 17px Georgia,serif}.sidebar-next a{font-size:12px;color:#6d9176}.scene-pagination{display:flex;gap:8px;justify-content:center;margin-top:26px}.page-dot{height:7px;width:31px;border:0;border-radius:10px;background:#e9e9df}.page-dot.active{background:#92b29a}.scene-controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f1eee8;padding-top:18px;margin-top:15px}.scene-controls button{background:#eff3eb;border:0;border-radius:10px;padding:10px 14px;font-size:12px;color:#65836b}.scene-controls button:disabled{opacity:.3;cursor:default}.scene-controls span{color:#aaa;font:13px Georgia,serif}.no-sync-note{font-size:10px;color:#b1b1a5;text-align:center;margin:19px 0 0}.word-popover{position:fixed;z-index:30;right:24px;bottom:25px;width:min(320px,calc(100vw - 34px));background:#fffefa;box-shadow:0 15px 70px #303b2c31;border:1px solid #dee5d7;border-radius:21px;padding:23px}.word-popover[hidden]{display:none}.word-popover h3{font:normal 30px Georgia,serif;color:#476a53;margin:14px 0 7px}.word-popover p{margin:0 0 18px;color:#757d71}.popover-close{position:absolute;right:12px;top:11px;border:0;background:none;font-size:25px;color:#8d938a}.popover-actions{display:flex;gap:7px}.speak-warning{font-size:10px;color:#b1b3a7;line-height:1.6;display:block;margin-top:12px}.word-tools{display:flex;align-items:center;gap:13px;background:white;border:1px solid var(--line);padding:15px 18px;border-radius:17px;margin:24px 0}.word-tools label{font-size:13px;color:#737e71;white-space:nowrap}.word-tools input,.word-tools select{background:#f8f8f5;border:1px solid #e8eadf;border-radius:9px;padding:12px;font-size:13px;color:#536654}.word-tools input{flex:1;min-width:0}.word-tools select{max-width:240px}.result-count{display:none}.filter-feedback{font-size:12px;color:#a0a49b;margin:0 0 16px}.filter-feedback strong{color:#72937b}.word-group{margin:17px 0 27px;border:1px solid #e9e9df;background:#fff;border-radius:19px;overflow:hidden}.word-group-header{display:flex;align-items:center;gap:14px;border-bottom:1px solid #eceae2;padding:16px 21px}.group-emoji{font-size:24px}.word-group-header small{font-size:10px;color:#a3afa0;letter-spacing:.13em}.word-group-header h3{margin:4px 0 0;font-size:16px}.word-group-header a{margin-left:auto;font-size:11px;color:#779582}.word-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:#eeede5;padding:1px}.word-tile{border:0;background:white;display:flex;flex-direction:column;gap:6px;text-align:left;padding:15px 15px;position:relative;min-width:0}.word-tile:hover{background:#f4f8f1}.word-tile b{font:normal 17px Georgia,serif;word-wrap:break-word}.word-tile span{font-size:12px;color:#a2a39b}.word-tile i{font-size:11px;color:#a6baaa;position:absolute;right:12px;top:13px;font-style:normal}.source-details{margin:35px 0;background:#fff;border:1px solid #eae8df;border-radius:15px;padding:16px 20px}.source-details summary{cursor:pointer;color:#758675;font-size:13px}.source-details img{margin:18px auto 0;width:min(100%,950px);max-height:900px;object-fit:contain}.picture-words{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.picture-word{padding:21px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;display:flex;gap:14px;flex-direction:column;position:relative}.picture-word>span:first-child{font-size:10px;color:#adbaac}.picture-word b{font:normal 19px Georgia,serif;color:#536d5b}.picture-icon{position:absolute;right:15px;top:13px;color:#d1d9ce}.empty-state{color:#9aa094;padding:30px}.guess-banner{background:#f4eee3}
@media(max-width:1100px){.topbar{padding:0 25px;gap:15px}.topnav a{padding:10px}.top-status{display:none}.reading-grid{grid-template-columns:minmax(0,1fr) 255px}.stories-grid{gap:14px}.word-grid,.picture-words{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:750px){.topbar{height:73px;padding:0 19px}.brand-icon{height:42px;width:42px}.brand-copy b{font-size:15px}.topnav,.top-status{display:none}.page{padding:31px 17px 95px;min-height:auto}.home-page{display:flex;flex-direction:column;gap:23px;padding-top:37px}.hero-intro{padding:0}.hero-intro h1{font-size:clamp(32px,8vw,43px);margin:15px 0}.hero-intro p{font-size:13px;line-height:1.9}.home-feature{min-height:290px}.home-feature-art img{object-fit:cover}.home-feature-caption b{font-size:20px}.hero-actions{margin-top:20px}.button{padding:12px 15px}.mini-metrics{margin-top:0;grid-template-columns:repeat(4,1fr);padding:17px 5px}.mini-metrics strong{font-size:25px}.mini-metrics span{font-size:10px}.section-heading{padding-top:13px}.section-heading h2{font-size:23px}.quiet-link{font-size:11px}.stories-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card-art{height:125px}.card-emoji{font-size:52px}.card-copy{padding:14px 13px}.card-copy h3{font-size:16px;margin:11px 0 4px}.card-description{display:none}.card-footer{margin-top:15px}.card-footer span{font-size:10px}.card-topline{font-size:10px}.page-intro h1{font-size:33px}.reading-grid{display:flex;flex-direction:column;gap:0}.main-reading,.reading-sidebar{width:100%}.reading-sidebar{position:static;margin-top:6px}.story-title{margin-bottom:25px}.story-title h1{font-size:33px}.story-illustration,.scene-placeholder{min-height:230px}.story-illustration>img{height:250px}.player-panel{padding:16px;margin-top:13px}.reader-card{margin-top:14px;padding:20px 18px 28px}.reader-toolbar strong{font-size:13px}.reader-toolbar .eyebrow{font-size:10px}.mode-switch button{font-size:10px;padding:8px 10px}.english-text{font-size:18px;line-height:1.95}.scene-text h3{font-size:21px}.scene-text{padding-top:18px}.vocab-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.vocab-chip{gap:5px;flex-wrap:wrap}.vocab-chip small{flex-basis:100%;margin-left:21px}.sidebar-next{display:none}.site-footer{display:none}.mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:15;height:calc(68px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fffef9f5;box-shadow:0 -5px 20px #52644d12;border-top:1px solid #e9eadd;backdrop-filter:blur(10px)}.mobile-nav a{display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:center;font-size:10px;color:#9a9f94}.mobile-nav a span{font-size:23px;line-height:1.2}.mobile-nav a.active{color:#5e856a}.word-tools{flex-wrap:wrap;padding:13px;gap:8px}.word-tools label{width:100%}.word-tools input{min-width:100%;width:100%}.word-tools select{max-width:none;width:100%}.word-grid,.picture-words{grid-template-columns:repeat(2,minmax(0,1fr))}.word-group-header a{font-size:10px}.word-popover{bottom:calc(83px + env(safe-area-inset-bottom));right:15px}.picture-word{padding:18px 14px}}
@media(max-width:365px){.stories-grid{grid-template-columns:1fr}.card-art{height:135px}.card-description{display:block}.reader-toolbar{flex-wrap:wrap}.word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v0.2 · audio-driven story reading theater */
.sync-page{max-width:1250px;padding-top:28px}
.sync-page .story-breadcrumb{margin-bottom:18px}
.compact-story-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:23px}
.compact-story-head h1{font:normal clamp(28px,3.2vw,42px)/1.15 Georgia,"Times New Roman",serif;letter-spacing:-.027em;margin:9px 0 9px;color:#33463b}
.compact-story-head p{font-size:13px;color:#84917f;margin:0}
.head-meta{flex-shrink:0;align-self:flex-end;display:flex;align-items:flex-end;flex-direction:column;gap:8px;padding:7px 12px;border:1px solid #e2e9db;background:#f0f4e9;border-radius:13px;color:#5d7c65;font-size:12px;font-weight:650}
.head-meta span{color:#a0a99a;font-size:11px;font-weight:400}
.listen-shell{border:1px solid #e6e7da;border-radius:24px;overflow:hidden;background:#fffefa;box-shadow:0 17px 55px #535b4720}
.listen-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0;min-height:386px}
.visual-pane{min-width:0;padding:15px 15px 12px;background:#f4f3e8;display:flex;flex-direction:column}
.visual-image{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:15px;background:linear-gradient(120deg,var(--tone-light),var(--tone-mid))}
.visual-image>img{width:100%;height:100%;object-fit:cover}
.visual-image .scene-placeholder{height:100%;min-height:200px}
.visual-label{position:absolute;left:14px;top:13px;background:#fffcf1ed;backdrop-filter:blur(4px);color:#657968;border:1px solid #fff8;padding:7px 11px;border-radius:10px;font-size:11px;font-weight:600}
.visual-foot{display:flex;align-items:center;gap:13px;margin-top:18px;padding:0 8px}
.visual-foot .eyebrow{color:#91a68c;font-size:10px}
.visual-foot span:last-child{font-size:12px;color:#728576}
.visual-heading{font:normal 22px/1.3 Georgia,serif;color:#495c4c;margin:7px 8px 2px}
.caption-pane{padding:25px 29px 20px;display:flex;flex-direction:column;justify-content:space-between;min-height:340px}
.caption-top,.caption-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.reading-live{display:flex;align-items:center;gap:8px;color:#698572;font-size:12px;font-weight:650}
.live-dot{width:7px;height:7px;border-radius:50%;background:#bfc9b7;display:inline-block}
.live-dot.playing{background:#79a287;box-shadow:0 0 0 5px #a7cdb14d;animation:live-pulse 1.8s ease-in-out infinite}
@keyframes live-pulse{50%{box-shadow:0 0 0 8px #a7cdb126}}
.caption-count{font-size:11px;color:#adb0a5;white-space:nowrap}
.caption-content{flex:1;display:flex;justify-content:center;flex-direction:column;padding:22px 0 25px}
.active-english{font:normal clamp(24px,2.55vw,32px)/1.58 Georgia,'Times New Roman',serif;letter-spacing:-.017em;color:#3b4d40;overflow-wrap:break-word}
.active-english .target-word{font-weight:normal;color:#48755a;background:linear-gradient(0deg,#f0e6b9 42%,transparent 43%);border-radius:3px}
.active-translation{margin-top:18px;font-size:14px;color:#7a8b75;line-height:1.8}
.active-translation[hidden]{display:none}
.caption-bottom{padding-top:10px;border-top:1px solid #eeeee6}
.caption-bottom span{font-size:11px;color:#a5aaa0}
.translation-toggle{border:1px solid #d8e3d6;background:#f2f7ed;color:#608066;border-radius:10px;padding:8px 12px;font-size:12px;white-space:nowrap}
.audio-console{border-top:1px solid #e7e9df;padding:16px 25px 17px;background:#fff}
.audio-main{display:flex;align-items:center;gap:17px}
.play-main{width:56px;height:56px;flex:none;border:0;border-radius:50%;background:#60866c;color:white;box-shadow:0 6px 14px #60866c43;font-size:22px;display:grid;place-items:center;padding:0 0 0 2px}
.play-main:hover{background:#4d775c}
.seek-wrap{flex:1;min-width:0}
.seek-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#8c978b}
.seek-meta b{font-size:13px;color:#526b57;font-weight:650}
#audio-seek{appearance:none;-webkit-appearance:none;width:100%;margin:17px 0 9px;height:6px;background:linear-gradient(90deg,#6d9678 var(--played,0%),#e5eae0 var(--played,0%));border-radius:10px;cursor:pointer}
#audio-seek::-webkit-slider-thumb{appearance:none;width:17px;height:17px;background:white;border:4px solid #6d9678;border-radius:50%;box-shadow:0 1px 4px #7778}
#audio-seek::-moz-range-thumb{width:11px;height:11px;background:white;border:4px solid #6d9678;border-radius:50%;box-shadow:0 1px 4px #7778}
.audio-secondary{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:7px;padding-left:73px}
.mini-controls,.audio-options{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.audio-secondary button{border:1px solid #e1e8de;background:#f6f7f1;color:#617c66;border-radius:9px;padding:8px 11px;font-size:11px;white-space:nowrap}
.audio-options span{font-size:11px;color:#a4ada0;margin-left:7px}
.audio-secondary button.selected{border-color:#bed3c1;background:#e5efe5;color:#416b4c;font-weight:700}
.audio-wait{font-size:12px;color:#819184;padding:7px 0;line-height:1.8}
.scene-strip{margin:22px 0 27px}
.strip-heading{display:flex;gap:13px;align-items:center;margin-bottom:12px}
.strip-heading b{font-size:16px;font-weight:650;color:#455b48}
.strip-heading span{font-size:12px;color:#999e91}
.scene-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
.scene-tab{text-align:left;display:flex;flex-direction:column;gap:8px;border:1px solid #e3e8dc;border-radius:16px;background:#fffefa;padding:13px 15px 12px;min-width:0;box-shadow:0 3px 12px #4d5e4310}
.scene-tab.selected{border-color:#9ebca4;background:#e8f1e6;box-shadow:0 6px 14px #45664a13}
.scene-tab-num{font:normal 19px Georgia,serif;color:#9bbaa0}
.scene-tab.selected .scene-tab-num{color:#5e8767}
.scene-tab-title{font-size:13px;font-weight:650;color:#45564a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-tab small{font:normal 12px Georgia,serif;color:#a4a89a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-materials{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.8fr);gap:22px;align-items:start}
.script-card,.reader-vocab>.vocabulary-box{background:#fffefa;border:1px solid #e8e7df;border-radius:20px;box-shadow:0 5px 23px #6a705511}
.script-card{padding:21px 24px}
.material-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.material-head h3{margin:7px 0;font-size:18px;color:#425b4c}
.material-head p{font-size:12px;color:#929c90;margin:0;line-height:1.6}
.transcript-trigger{flex:none;background:#f1f6ed;border:1px solid #e0e8da;border-radius:11px;color:#5e8067;padding:10px 13px;font-size:12px;font-weight:600}
.script-panel[hidden]{display:none}
.script-panel{margin-top:19px;border-top:1px solid #eaece4;padding-top:14px}
.script-list{overflow-y:auto;max-height:430px;overscroll-behavior:contain;scroll-behavior:smooth;position:relative}
.script-line{display:flex;align-items:start;gap:12px;width:100%;padding:13px 10px;text-align:left;background:transparent;border:1px solid transparent;border-bottom-color:#efefe7;border-radius:10px}
.script-line:hover{background:#f4f7f0}
.script-line.active{background:#e8f1e7;border-color:#d4e5d4}
.line-position{width:40px;flex:none;font:12px Georgia,serif;color:#9aac9b;padding-top:4px}
.line-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.line-english{font:normal 17px/1.55 Georgia,serif;color:#455149}
.script-line.active .line-english{color:#2e603d;font-weight:600}
.line-copy small{color:#a8aa9b;font-size:11px}
.line-play{color:#a6bba8;font-size:11px;padding-top:4px}
.reader-vocab .vocabulary-box{padding:20px}
.reader-vocab .vocab-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.reader-vocab .vocab-chip{padding:9px;gap:6px;flex-wrap:wrap}
.reader-vocab .vocab-chip span:nth-child(2){font-size:15px;flex:1}
.reader-vocab .vocab-chip small{width:100%;padding-left:21px}
.reader-vocab .sidebar-next{padding:15px 18px}
.sync-page .reader-complete{margin:22px 0 8px}
.sample-note{margin:0;color:#a6aa9f;font-size:11px;line-height:1.7}
@media(max-width:1000px){.listen-grid{grid-template-columns:1.05fr 1fr}.active-english{font-size:25px}.caption-pane{padding:20px 22px}.visual-pane{padding:12px}.audio-secondary{padding-left:0}.scene-tab{padding:12px 11px}.scene-tab-title{font-size:12px}.story-materials{grid-template-columns:minmax(0,1fr) 260px}}
@media(max-width:750px){
.sync-page{padding-top:19px}.sync-page .story-breadcrumb{margin-bottom:13px}.compact-story-head{align-items:flex-start;margin-bottom:18px;gap:8px}.compact-story-head h1{font-size:28px;line-height:1.2;margin:6px 0}.compact-story-head p{font-size:11px}.head-meta{display:none}
.listen-shell{border-radius:20px}.listen-grid{display:flex;flex-direction:column}.visual-pane{padding:10px 10px 7px}.visual-image{aspect-ratio:16/8.7;border-radius:13px}.visual-foot{margin-top:9px;gap:10px}.visual-heading{font-size:17px;margin:5px 8px 4px}
.caption-pane{min-height:0;padding:16px 19px 15px;gap:13px}.caption-content{min-height:117px;padding:2px 0;justify-content:center}.active-english{font-size:clamp(24px,5.8vw,29px);line-height:1.44}.caption-bottom{padding-top:10px}.caption-bottom span{font-size:10px}
.audio-console{padding:13px 16px}.audio-main{gap:13px}.play-main{width:47px;height:47px;font-size:21px}.seek-meta b{font-size:11px}.seek-meta{font-size:10px}#audio-seek{margin:11px 0 5px}.audio-secondary{padding:0;margin-top:10px;gap:8px}.mini-controls{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.mini-controls button{padding:7px 5px}.audio-options{width:100%;justify-content:flex-end}.audio-secondary button{padding:7px 8px;font-size:10px}
.scene-strip{margin:17px 0 22px}.strip-heading b{font-size:15px}.strip-heading span{font-size:11px}.scene-tabs{display:flex;overflow-x:auto;gap:9px;padding-bottom:6px;scroll-snap-type:x mandatory}.scene-tab{flex:0 0 144px;scroll-snap-align:start;padding:11px 12px;gap:5px}
.story-materials{display:flex;flex-direction:column;gap:14px}.script-card,.reader-vocab{width:100%}.script-card{padding:17px 16px}.material-head h3{font-size:16px}.material-head p{font-size:11px;max-width:250px}.transcript-trigger{padding:10px 9px;font-size:10px}.reader-vocab .vocab-chips{grid-template-columns:repeat(2,1fr)}.sync-page .reader-complete{display:flex;align-items:center;justify-content:space-between}.sample-note{margin-bottom:10px}
}
@media(max-width:380px){.compact-story-head h1{font-size:24px}.active-english{font-size:23px}.visual-image{aspect-ratio:16/9}.caption-pane{padding:14px 14px}.caption-bottom span{max-width:175px}.material-head{align-items:flex-start}.material-head p{max-width:180px}}
@media(prefers-reduced-motion:reduce){.live-dot.playing{animation:none}.script-list{scroll-behavior:auto}}
/* Keep the picture, active line and play button together in the first mobile viewport. */
@media(max-width:750px){
 .sync-page .story-breadcrumb{margin-bottom:8px}
 .compact-story-head{margin-bottom:12px}
 .compact-story-head h1{font-size:26px;line-height:1.15;margin:5px 0}
 .visual-image{aspect-ratio:16/7.7}
 .visual-foot{margin-top:6px}
 .visual-heading{font-size:16px;margin:4px 8px 3px}
 .caption-pane{padding:12px 15px;gap:8px}
 .caption-content{min-height:80px;padding:0}
 .active-english{font-size:24px;line-height:1.4}
 .caption-bottom{padding-top:7px}
 .audio-console{padding:9px 14px 12px}
}
@media(max-width:750px){body.story-immersive .mobile-nav{display:none}}


/* v0.3 · One-screen reading workspace: picture + a single interchangeable text pane + vocabulary rail */
body.story-immersive{background:#f7f7f1}
body.story-immersive .topbar{height:60px;padding-inline:max(24px,calc((100vw - 1420px)/2));gap:24px}
body.story-immersive .brand-icon{width:36px;height:36px;font-size:21px;border-radius:12px}
body.story-immersive .brand-copy b{font-size:14px}
body.story-immersive .topnav a{padding:7px 13px;font-size:12px}
body.story-immersive .site-footer{display:none}
.sync-page{max-width:1460px;padding:12px 24px 30px;min-height:0}
.sync-page .story-breadcrumb{margin-bottom:6px;font-size:11px}
.compact-story-head{margin-bottom:12px;gap:10px;align-items:center}
.compact-story-head .eyebrow{display:none}
.compact-story-head h1{font-size:clamp(22px,2.25vw,30px);margin:3px 0 4px}
.compact-story-head p{font-size:11px}
.head-meta{font-size:10px;padding:6px 10px;gap:3px;align-self:center}
.head-meta span{font-size:10px}
.listen-shell.reader-theater{height:clamp(500px,calc(100dvh - 174px),810px);display:flex;flex-direction:column;min-height:0;overflow:visible;border-radius:18px}
.listen-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) minmax(195px,.55fr);flex:1;min-height:0;position:relative}
.visual-pane{min-width:0;min-height:0;padding:12px 12px 11px;overflow:hidden;display:flex;flex-direction:column;background:#f1f2e9}
.visual-image{flex:1;min-height:0;aspect-ratio:auto;border-radius:12px}
.visual-image>img{width:100%;height:100%;object-fit:cover}
.visual-label{font-size:10px;left:10px;top:9px;padding:5px 8px}
.visual-foot{flex:none;margin-top:10px;padding-inline:3px;gap:8px;align-items:center}
.visual-foot span:last-child{font-size:11px}
.visual-heading{font-size:clamp(15px,1.6vw,20px);margin:4px 3px 8px;flex:none}
.mini-scene-nav{display:flex;gap:6px;align-items:center;padding:0 2px 1px;flex:none}
.mini-scene{border:1px solid #dbe3d5;color:#8a9c86;border-radius:9px;background:#ffffffb4;min-width:27px;height:25px;padding:2px 7px;font-size:11px}
.mini-scene.selected{color:#fff;background:#6d8b76;border-color:#6d8b76}
.caption-pane{display:flex;flex-direction:column;gap:12px;padding:18px 20px 15px;min-height:0;min-width:0;justify-content:initial;overflow:hidden;background:#fffefa}
.caption-top{gap:6px;min-height:18px}
.reading-live{font-size:11px;white-space:nowrap}
.caption-count{font-size:10px}
.reading-modes{display:flex;gap:4px;background:#f2f3ec;border:1px solid #e6e9df;border-radius:11px;padding:4px;min-height:40px;flex:none;align-items:center}
.reading-modes button{flex:1;font-size:12px;font-weight:600;white-space:nowrap;padding:8px 5px;border:0;border-radius:8px;background:transparent;color:#788779}
.reading-modes button.selected{background:#fff;color:#4f715b;box-shadow:0 1px 5px #34482b18}
.reading-modes .mobile-vocab-tab{display:none}
.reading-stage{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column}
.single-view,.full-view{height:100%;min-height:0;flex:1;min-width:0}
.single-view{display:flex;align-items:center;justify-content:center}
.single-view[hidden],.full-view[hidden]{display:none!important}
.caption-content{padding:14px 4px;flex:initial;width:100%;min-height:0}
.active-english{font:normal clamp(23px,2.35vw,32px)/1.53 Georgia,'Times New Roman',serif;color:#334b3b}
.active-translation{font-size:13px;line-height:1.7;margin-top:16px}
.full-view{overflow:hidden}
.full-script-list{height:100%;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding-right:6px;scrollbar-width:thin;scrollbar-color:#becbb8 transparent}
.full-script-line{font:normal 16px/1.6 Georgia,serif;display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;padding:10px 12px;margin-bottom:5px;cursor:pointer;color:#526052}
.full-script-line:hover{background:#f5f7f1}
.full-script-line.active{background:#eaf2e8;border-color:#cbdacb;color:#2e5338;box-shadow:inset 3px 0 #769c7c}
.full-line-en{display:block}
.full-line-cn{display:block;font:12px/1.6 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;color:#869c8a;margin-top:5px}
.full-line-cn[hidden]{display:none}
.story-keyword{background:#f1e9c7;border-radius:3px;color:#50735a;padding:0 1px}
.word-focused,.story-keyword.word-focused{background:#f8daa4!important;color:#774a26!important;outline:2px solid #e9b873;outline-offset:2px;border-radius:2px}
.caption-bottom{flex:none;min-height:30px;padding-top:8px;border-top:1px solid #f0f1e9;gap:8px}
.caption-bottom span{font-size:10px;color:#98a49a;line-height:1.3}
.translation-toggle{padding:6px 10px;font-size:10px}
/* Word rail is a true third column on wide displays, with its own scroll area. */
.reader-vocab-inline{background:#fbfbf7;border-left:1px solid #e7eae3;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.vocab-rail-head{flex:none;padding:19px 14px 12px;border-bottom:1px solid #ecede6}
.vocab-rail-title{display:flex;align-items:center;justify-content:space-between}
.vocab-rail-head .eyebrow{font-size:10px;letter-spacing:.16em}
.vocab-rail-head h3{font-size:17px;color:#3d4e43;margin:8px 0 4px;font-weight:650;white-space:nowrap}
.vocab-rail-head small{font-size:11px;color:#9ba698;font-weight:normal;margin-left:3px}
.vocab-rail-head p{font-size:10px;color:#a1aaa0;margin:0;line-height:1.5}
.vocab-close{display:none;border:0;background:transparent;color:#647b65;font-size:26px;padding:0 4px}
.vocab-rail-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c4d4c2 transparent;overscroll-behavior:contain;padding:8px 8px 6px}
.vocab-rail-row{display:flex;align-items:center;gap:0;min-width:0;border-radius:11px;border:1px solid transparent;margin-bottom:5px;transition:background .15s}
.vocab-rail-row.in-current{background:#eaf1e5;border-color:#d8e6d2}
.vocab-rail-row.focused{background:#fff0d6;border-color:#e6be81}
.vocab-jump{display:grid;grid-template-columns:19px minmax(0,1fr);align-items:baseline;column-gap:6px;row-gap:4px;width:100%;min-width:0;border:0;background:transparent;text-align:left;padding:8px 4px 8px 7px}
.vocab-jump:hover{color:#3a7852}
.vocab-n{color:#a1b5a1;font:12px Georgia,serif;grid-column:1;grid-row:1}
.vocab-name{grid-column:2;grid-row:1;font:17px/1.2 Georgia,serif;color:#3c5746;overflow-wrap:anywhere}
.vocab-zh{grid-column:2;grid-row:2;font-size:11px;color:#9dada0;line-height:1.2}
.vocab-sound{flex:none;border:0;background:transparent;color:#9bad98;padding:10px 6px;font-size:14px}
.vocab-sound:hover{color:#58755d}
.vocab-rail-tip{font-size:10px;line-height:1.5;color:#a4afa3;border-top:1px solid #eff0e9;padding:8px 12px;flex:none}
/* Slim consolidated player. Extra features are behind Settings. */
.audio-console{position:relative;z-index:5;flex:none;background:#fffefa;padding:12px 15px;border-top:1px solid #e7e9df}
.audio-main.compact-player{display:flex;align-items:center;gap:14px;min-height:54px}
.play-main{width:46px;height:46px;font-size:19px;flex:none;box-shadow:0 4px 12px #60866c2c}
.seek-wrap{flex:1;min-width:0}
.seek-meta b{font-size:12px;font-weight:650}
.seek-meta{font-size:11px}
#audio-seek{margin:12px 0 5px}
.quick-actions{display:flex;gap:5px;align-items:center;flex:none}
.quick-actions button{height:36px;width:37px;display:grid;place-items:center;border:1px solid #e0e8de;background:#f6f8f2;border-radius:10px;color:#54745d;font-size:21px;line-height:1}
.quick-actions button:hover{background:#e8f1e6}
.player-options{position:relative;flex:none}
.player-options>summary{list-style:none;cursor:pointer;color:#637d68;border-radius:10px;background:#f4f6ef;border:1px solid #e0e7da;padding:9px 10px;font-size:12px;white-space:nowrap;user-select:none}
.player-options>summary::-webkit-details-marker{display:none}
.player-options-pop{position:absolute;right:0;bottom:calc(100% + 10px);background:#fff;border:1px solid #e0e5dc;border-radius:14px;box-shadow:0 9px 25px #404f3d30;padding:13px;width:205px;z-index:8;display:flex;flex-direction:column;gap:10px}
.options-caption{font-size:11px;color:#819181}
.rate-group{display:flex;gap:4px}
.player-options-pop button{border:1px solid #e3e8de;border-radius:8px;background:#f8f9f5;color:#677b68;padding:8px 7px;font-size:11px;flex:1}
.player-options-pop button.selected{background:#e9f1e6;border-color:#adcaaf;color:#3e6b46;font-weight:700}
.story-after{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 3px 7px!important;font-size:12px;color:#8c9789}
.story-after>div{display:flex;align-items:center;gap:12px}
.story-after a{color:#68816c}
.story-after .button{padding:7px 10px;font-size:11px}
.sample-note{font-size:10px;color:#a5aea2}
@media(max-width:1050px){
 .listen-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
 .reading-modes .mobile-vocab-tab{display:block}
 .reader-vocab-inline{display:none;grid-column:2;grid-row:1;z-index:4;position:relative;border-left:1px solid #e1e7df;background:#fbfcf7}
 .reader-vocab-inline.is-open{display:flex}
 .vocab-close{display:block}
 .caption-pane{padding:17px 16px}
 .active-english{font-size:clamp(22px,3vw,29px)}
}
@media(max-width:750px){
 body.story-immersive .topbar{height:56px;padding:0 15px}
 body.story-immersive .brand-icon{width:35px;height:35px}
 .sync-page{padding:9px 11px 15px}
 .sync-page .story-breadcrumb{margin-bottom:4px;font-size:10px}
 .compact-story-head{margin-bottom:8px}
 .compact-story-head h1{font-size:clamp(19px,5.2vw,24px);line-height:1.12;margin:2px 0 3px}
 .compact-story-head p{font-size:10px}
 .head-meta{display:none}
 .listen-shell.reader-theater{height:calc(100dvh - 143px);min-height:510px;max-height:none;border-radius:16px}
 .listen-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,.92fr) minmax(195px,1fr);gap:0}
 .visual-pane{grid-column:1;grid-row:1;padding:7px 8px;min-height:0}
 .visual-image{flex:1;min-height:0;aspect-ratio:auto;border-radius:10px}
 .visual-foot{margin-top:6px}
 .visual-heading{font-size:14px;margin:3px 3px 4px}
 .mini-scene-nav{gap:5px}
 .mini-scene{min-width:25px;height:22px;border-radius:7px;font-size:10px}
 .caption-pane{grid-column:1;grid-row:2;min-height:0;padding:10px 13px 9px;gap:8px}
 .caption-top{min-height:15px}
 .reading-live{font-size:10px}
 .reading-modes{min-height:34px;padding:3px;border-radius:9px}
 .reading-modes button{font-size:11px;padding:6px 3px}
 .active-english{font-size:clamp(21px,5.7vw,27px);line-height:1.4}
 .caption-content{padding:4px 0}
 .active-translation{margin-top:8px;font-size:12px}
 .full-script-line{font-size:15px;line-height:1.48;padding:8px 10px}
 .caption-bottom{padding-top:5px}
 .caption-bottom span{font-size:9px}
 .translation-toggle{padding:5px 9px}
 .reader-vocab-inline{grid-column:1;grid-row:2;border-left:0;border-top:1px solid #e2e8e0;min-height:0;z-index:4}
 .vocab-rail-head{padding:8px 14px 6px}
 .vocab-rail-head h3{font-size:15px;margin:2px 0 0}
 .vocab-rail-head .eyebrow{font-size:9px}
 .vocab-rail-head p{font-size:9px}
 .vocab-rail-list{padding:4px 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 5px;align-content:start}
 .vocab-rail-row{margin:0;min-height:48px}
 .vocab-jump{grid-template-columns:15px minmax(0,1fr);column-gap:4px;padding:5px 2px 5px 5px}
 .vocab-name{font-size:14px}
 .vocab-zh{font-size:10px}
 .vocab-sound{font-size:12px;padding:6px 2px}
 .vocab-rail-tip{display:none}
 .audio-console{padding:8px 11px 9px}
 .audio-main.compact-player{display:grid;grid-template-columns:42px minmax(0,1fr) auto;grid-template-rows:42px 30px;gap:3px 10px;min-height:0}
 .play-main{width:40px;height:40px;font-size:19px;grid-column:1;grid-row:1}
 .seek-wrap{grid-column:2/4;grid-row:1;min-width:0}
 .seek-meta{font-size:10px}
 .seek-meta b{font-size:10px}
 #audio-seek{margin:10px 0 4px}
 .quick-actions{grid-column:1/3;grid-row:2;justify-content:flex-start}
 .quick-actions button{height:28px;width:42px;font-size:18px;border-radius:8px}
 .player-options{grid-column:3;grid-row:2;justify-self:end}
 .player-options>summary{font-size:10px;padding:5px 9px}
 .story-after{font-size:10px;flex-wrap:wrap}
 .story-after .button{padding:6px 9px}
}
@media(max-width:360px){
 .caption-top{flex-wrap:wrap}
 .active-english{font-size:21px}
 .reading-modes button{font-size:10px}
 .vocab-rail-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.full-script-list{scroll-behavior:auto}}

/* v0.4: complete 4:3 watercolor compositions should never lose characters to cropping */
.visual-image{background:#e6ecd9;display:flex;justify-content:center;align-items:center;overflow:hidden}
.visual-image>img{object-fit:contain;width:100%;height:100%;background:#e6ecd9}
.home-feature-art img{object-position:center 52%}
.card-art-illustrated{background:#dfeada}
.card-art-illustrated img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.card-art-illustrated .mini-issue{z-index:1;background:#fffce8e8;border-radius:7px;padding:5px 8px;color:#526953;left:13px;top:12px}

/* v0.5.1: preserve every 4:3 illustration at all breakpoints, soften unused space */
.visual-image{position:relative;isolation:isolate;background:#e6ecdf}
.visual-image::before{content:"";position:absolute;inset:-18px;background-image:var(--scene-backdrop,none);background-position:center;background-size:cover;filter:blur(20px) saturate(.82);opacity:.42;transform:scale(1.06);z-index:-1;pointer-events:none}
.visual-image>img{display:block;position:relative;z-index:0;object-fit:contain!important;width:100%;height:100%;background:transparent!important}
.visual-image .visual-label{z-index:2}
/* Landscape desktops: keep the stage naturally 4:3 where there is room, without growing the page. */
@media (min-width:1051px) and (min-height:770px){
  .visual-pane{justify-content:center}
  .visual-image:has(>img){flex:0 1 auto;width:100%;aspect-ratio:4/3;max-height:calc(100% - 103px);align-self:center}
}
/* Small desktop and mobile: show the whole illustration in available space, never crop. */
@media (max-width:1050px), (max-height:769px){.visual-image{flex:1;min-height:0;aspect-ratio:auto}}

/* v0.6.1: smaller phone viewport fit: keep main image, captions and controls above fold. */
@media(max-width:750px) and (max-height:740px){
  .sync-page{padding-top:5px;padding-bottom:7px}
  .compact-story-head{margin-bottom:5px}
  .compact-story-head h1{font-size:18px}
  .listen-shell.reader-theater{height:calc(100dvh - 127px);min-height:390px}
  .listen-grid{grid-template-rows:minmax(145px,.9fr) minmax(155px,1fr)}
  .visual-pane{padding:5px 7px}
  .visual-foot{margin-top:3px}
  .visual-heading{font-size:12px;margin:1px 3px 3px}
  .mini-scene{height:20px}
  .caption-pane{padding:7px 11px 5px;gap:5px}
  .reading-modes{min-height:29px}
  .reading-modes button{padding:4px}
  .active-english{font-size:clamp(18px,5.2vw,24px);line-height:1.32}
  .audio-console{padding:5px 9px}
  .audio-main.compact-player{grid-template-rows:38px 27px}
  .play-main{width:38px;height:38px}
}

/* v0.6.6: short phone screens keep the player visible, while text scrolls inside its own pane. */
@media (max-width:750px){
  .listen-shell.reader-theater{min-height:0; height:clamp(420px,calc(100dvh - 130px),760px);overflow:hidden;}
  .listen-grid{min-height:0;grid-template-rows:minmax(125px,0.95fr) minmax(175px,1fr);}
  .visual-image>img{object-fit:contain!important;}
  .single-view{overflow-y:auto;overscroll-behavior:contain;}
  .caption-content{max-height:100%;overflow-y:auto;}
  .audio-console{position:relative;}
}
@media (max-width:750px) and (max-height:660px){
  .listen-shell.reader-theater{height:calc(100dvh - 119px);min-height:370px;}
  .listen-grid{grid-template-rows:minmax(110px,.8fr) minmax(150px,1fr);}
  .visual-foot{display:none;}
  .visual-heading{font-size:11px;margin:2px 3px;}
  .mini-scene{height:18px;}
  .caption-pane{padding:5px 9px;gap:4px;}
  .reading-modes{min-height:27px;}
  .audio-console{padding:4px 8px;}
}


/* Storybook v0.7 — compact, playful, production presentation */
:root{--page:#faf8f0;--ink:#334b40;--accent:#638e76}
body{background:var(--page)}
.topbar{box-shadow:0 2px 12px #5369430c}
.top-status,.site-footer,.workflow-strip,.collection-banner,.sample-note,.vocab-tip,.vocab-rail-tip{display:none!important}
.page{padding-top:18px;padding-bottom:28px}
.home-page{padding-top:18px}.hero-intro{padding-top:4px}.hero-intro h1{line-height:1.18}.hero-intro p{max-width:490px;line-height:1.6}
.hero-actions{margin-top:17px}.mini-metrics{margin-top:15px}.section-heading{padding-top:17px}.section-heading p{margin:3px 0}
.page-intro{margin-bottom:14px}.page-intro h1{line-height:1.2}.stories-grid{gap:14px}.card-copy{padding:13px 15px}.card-copy h3{margin:6px 0}.card-description{line-height:1.4}.card-footer{margin-top:12px}
.sync-page{padding-top:10px}.sync-page .story-breadcrumb{margin-bottom:5px}
.compact-story-head{margin-bottom:11px;gap:10px}.compact-story-head h1{margin:2px 0 3px;font-size:clamp(24px,2.7vw,34px)}
.compact-story-head .eyebrow{display:none}.head-meta{display:none}
.listen-shell.reader-theater{border-radius:18px;box-shadow:0 8px 24px #52644c12;height:clamp(475px,calc(100dvh - 138px),750px)}
.visual-pane{padding:10px}.visual-image{border-radius:12px}.visual-label{top:9px;left:9px;padding:5px 9px;background:#fffdf5e8}
.visual-foot{margin-top:5px;gap:8px}.visual-heading{font-size:17px;margin:2px 4px}
.caption-pane{padding:15px 18px 12px}.caption-top{min-height:22px}.reading-modes{margin-top:5px}.reading-stage{min-height:0}
.active-english{font-size:clamp(23px,2.4vw,31px);line-height:1.48}.caption-content{padding:8px 0}
.vocab-rail-head{padding:11px 12px 7px}.vocab-rail-head h3{margin:2px 0 0}.vocab-rail-title .eyebrow{font-size:9px}
.vocab-rail-list{padding:5px 8px}.vocab-rail-row{margin-bottom:3px}.vocab-jump{padding:6px 5px}.vocab-name{font-size:16px}.vocab-zh{font-size:11px}
.audio-console{padding:9px 15px 10px}.audio-main.compact-player{gap:10px}.play-main{width:48px;height:48px}
#audio-seek{margin:9px 0 3px}.seek-meta b{font-size:11px}
.story-after{margin-top:10px!important;padding:10px 1px!important;gap:10px}
.story-after a{font-weight:600}.story-after .button{border-radius:13px}
.button,.reading-modes button,.mini-scene,.story-card,.vocab-jump{transition:background-color .16s,transform .16s}
.button:active,.mini-scene:active,.vocab-jump:active{transform:scale(.97)}
@media(max-width:750px){
 body.story-immersive .topbar{height:49px;padding:0 12px}.brand-copy small{font-size:9px}
 .sync-page{padding:5px 8px 13px}.sync-page .story-breadcrumb{margin-bottom:3px}
 .compact-story-head{margin-bottom:5px}.compact-story-head h1{font-size:clamp(20px,5.2vw,24px);margin:0 0 2px}.compact-story-head p{font-size:10px}
 .listen-shell.reader-theater{height:calc(100dvh - 115px);min-height:0;border-radius:13px}
 .listen-grid{grid-template-rows:minmax(155px,.94fr) minmax(172px,1.06fr)}
 .visual-pane{padding:5px 6px}.visual-image{border-radius:9px}.visual-foot{margin-top:3px}.visual-heading{font-size:13px;margin:1px 3px}
 .caption-pane{padding:6px 10px 7px;gap:4px}.caption-top{min-height:13px}.reading-modes{min-height:30px;margin-top:0}
 .reading-modes button{padding:5px 4px;font-size:11px}.active-english{font-size:clamp(21px,5.7vw,27px);line-height:1.4}
 .audio-console{padding:6px 9px}.audio-main.compact-player{grid-template-rows:39px 28px;gap:2px 7px}.play-main{width:38px;height:38px}
 .story-after{padding:7px 1px!important;margin-top:4px!important}.story-after .button{font-size:11px}
 .vocab-rail-head{padding:6px 9px 4px}.vocab-rail-list{padding:3px 8px}.vocab-rail-row{min-height:43px}
 .card-copy{padding:11px 12px}.page-intro{margin-bottom:10px}.stories-grid{gap:9px}.hero-actions{margin-top:12px}
}
@media(max-width:750px) and (max-height:650px){.listen-shell.reader-theater{height:calc(100dvh - 111px)}.listen-grid{grid-template-rows:minmax(132px,.87fr) minmax(157px,1.13fr)}.visual-heading{display:none}}