.storybook-shelf{display:flex;gap:24px;padding:16px 0}.storybook-book{width:230px;padding:0;border:0;background:transparent;text-align:left}.storybook-cover{display:flex;flex-direction:column;align-items:center;justify-content:space-around;aspect-ratio:3/4;background:#e9ecd9;border:1px solid #cdd1bd;border-left:9px solid #9ca780;border-radius:4px 12px 12px 4px;padding:22px 18px;color:#29483c;box-shadow:4px 8px 18px #203a231a;gap:14px}.storybook-cover .cover-series{font-size:9px;letter-spacing:2px;text-align:center}.storybook-cover strong{font:26px KaiTi,serif;white-space:nowrap}.storybook-cover img{width:100%;height:175px;object-fit:contain;mix-blend-mode:multiply}.storybook-cover>span:last-child{font-size:12px;letter-spacing:1px}.book-label{display:block;font-size:19px;margin:14px 0}.book-label small{display:block;font-size:13px;color:#69766c;margin-top:5px}.storybook-contents{display:grid;grid-template-columns:235px 1fr;gap:45px;max-width:950px;margin:25px auto}.storybook-contents h1{font:32px KaiTi,serif;margin:8px 0 30px}.story-list-card{display:flex;align-items:center;gap:24px;padding:18px;width:100%;text-align:left;background:#fffefa;border:1px solid #d7dfcf;border-radius:16px}.story-list-card>img{width:145px;height:170px;object-fit:contain;border-radius:8px}.story-list-card>span{display:grid;gap:17px}.story-list-card strong{font:27px KaiTi,serif}.story-list-card small{color:#73836c}.story-list-card>span>span{font-size:14px;color:#526548}.story-reader-brand{display:flex;gap:14px;align-items:center;padding:12px 22px}.story-reader-brand img{width:145px;display:block}.story-reader-brand small{font-size:11px;color:#6c7c6c}.story-toolbar{position:sticky;top:0;z-index:8;background:#f5f6efef;backdrop-filter:blur(12px);display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid #dce3d5}.story-toolbar label{display:flex;gap:6px;align-items:center;font-size:14px;white-space:nowrap}.story-toolbar button,.story-toolbar select{min-height:44px;background:#fffefa;border:1px solid #d2dccb;border-radius:10px;padding:8px 12px;color:#29483c}.story-toolbar button[aria-pressed=true]{background:#29483c;color:white}.story-paper{max-width:1180px;padding:45px 50px;margin:24px auto;background:#fffef9;border:1px solid #dce2d4;border-radius:18px}.story-paragraph{display:flow-root;margin-bottom:30px;scroll-margin-top:155px}.story-paragraph p{font:var(--story-size,32px)/2.5 KaiTi,STKaiti,'Microsoft YaHei',serif;color:#29483c;letter-spacing:.04em;text-indent:2em;margin:0;overflow-wrap:anywhere}.story-paragraph ruby{cursor:pointer;ruby-align:center}.story-paragraph rt{font:12px/1.1 'Segoe UI',sans-serif;letter-spacing:0;color:#879573}.story-paragraph .pinyin-hidden rt{visibility:hidden}.story-lead{white-space:nowrap}.story-play{display:inline-flex;align-items:center;justify-content:center;width:38.57px;height:38.57px;min-height:38.57px;border:1px solid #c4d3ac;border-radius:50%;padding:0;margin:0 7px 0 2px;font:11px/1 sans-serif;background:#eff4e6;color:#456642;text-indent:0;letter-spacing:0;vertical-align:baseline;position:relative;top:-3px}.story-sentence.playing{background:#e8efd7;border-radius:5px}.story-art{float:right;clear:right;width:27%;max-height:330px;object-fit:contain;margin:8px 0 20px 28px;border-radius:10px;mix-blend-mode:multiply}.story-paragraph:nth-child(4n) .story-art{float:left;margin:8px 28px 20px 0}.story-extra-art{display:block;max-width:230px;max-height:250px;object-fit:contain;margin:16px auto}.story-source{display:block;max-width:900px;width:100%;margin:25px auto}.story-verification{text-align:center;font-size:12px;color:#66745e}#story-content>p{padding:30px}body[data-route=story] #connection{max-width:1100px;margin:auto}
@media(max-width:850px){.story-paper{margin:15px;padding:30px}.story-toolbar{gap:7px;padding:10px}.storybook-contents{gap:25px;grid-template-columns:190px 1fr}.storybook-cover{padding:18px 12px}.storybook-cover strong{font-size:23px}.story-list-card{gap:15px}.story-list-card>img{width:110px}}
@media(max-width:550px){.storybook-contents{display:block}.storybook-contents>div:first-child{max-width:170px;margin:0 auto 28px}.storybook-contents h1{font-size:29px}.storybook-cover img{height:130px}.story-list-card>img{width:100px;height:130px}.story-list-card strong{font-size:24px}.story-toolbar{font-size:12px;gap:5px}.story-toolbar label{font-size:12px}.story-toolbar button,.story-toolbar select{padding:7px 8px}.story-paper{padding:22px 17px;margin:10px 7px}.story-paragraph p{font-size:var(--story-size,32px);line-height:2.6;text-indent:1em}.story-art,.story-paragraph:nth-child(4n) .story-art{float:none;display:block;width:75%;height:185px;margin:0 auto 20px}.story-reader-brand{padding:10px}.story-reader-brand img{width:120px}}

body[data-route=story]{background:#f4f5ed}.story-reader-brand{display:block}.story-reader-brand small{display:block;margin-top:5px}
/* Reader controls share the logo row; wrap only when the viewport requires it. */
.story-header{position:sticky;top:0;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#f5f6eff5;backdrop-filter:blur(12px);border-bottom:1px solid #dce3d5;padding:10px 20px}
.story-header .story-reader-brand{padding:0;flex:none}.story-header .story-toolbar{position:static;padding:0;border:0;backdrop-filter:none;background:none;justify-content:flex-end;gap:8px}.story-header .story-toolbar button{display:inline-flex;align-items:center;justify-content:center;min-width:44px}.story-header .story-reader-brand small{font-size:10px;white-space:nowrap}.story-title{font:32px/1.5 KaiTi,STKaiti,serif;margin:0 0 35px;color:#29483c}.story-title span{display:block;font-size:24px;margin-top:8px}.story-word{border-radius:5px;cursor:pointer;box-decoration-break:clone;-webkit-box-decoration-break:clone}.story-word:hover,.story-word:focus-visible{background:#dce8cb;outline:1px solid #acbf92}.story-sentence.playing{background:none}.story-page-marker{display:inline-block;width:0;height:1em;pointer-events:none}.story-play[aria-busy=true]{opacity:.45;animation:story-loading 1s infinite alternate}@keyframes story-loading{to{opacity:1}}
#story-dialog{width:min(680px,calc(100vw - 28px));max-height:88dvh;border:1px solid #ccd8c4;border-radius:18px;padding:26px;color:#29483c;background:#fffefa}#story-dialog::backdrop{background:#17352750}#story-dialog .close{position:sticky;float:right;top:0;border:0;font-size:27px;padding:0;width:38px;height:38px;background:#edf1e6;border-radius:50%}#story-dialog h2{margin-top:8px}#story-dialog button:not(.close),#story-dialog select{padding:10px 13px;min-height:44px;border:1px solid #cbd8c0;border-radius:9px;background:#f6f8ef;color:#29483c;font-size:16px}#story-dialog button:disabled{opacity:.5;cursor:default}.story-settings{display:grid;gap:20px;margin:26px 0}.story-settings label{display:flex;justify-content:space-between;align-items:center;gap:16px}.story-settings input[type=range]{min-width:0;flex:1}.story-settings select{max-width:190px}#story-dialog details{margin-top:18px}#story-dialog small,#story-audio-status{color:#687963;font-size:13px}.story-word-card{padding:8px 0 20px}.story-word-card h2{font:38px/1.4 KaiTi,serif}.story-word-card h3{font:30px/1.4 KaiTi,serif;margin:0}.story-word-card p{margin:8px 0 16px;line-height:1.5}.story-word-pinyin{color:#76895d}.story-word-actions{display:flex;flex-wrap:wrap;gap:8px}.story-character-cards{border-top:1px solid #dce2d4;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;padding-top:20px}.story-character-cards .story-word-card{border-bottom:1px solid #e8ecdf}
.story-vocabulary-page{max-width:1100px;margin:0 auto}.story-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.story-tabs button[aria-selected=true],.story-vocab-item[aria-pressed=true]{background:#dfebcb;border-color:#688453}.story-selection{position:sticky;top:0;background:#f5f6efef;display:flex;justify-content:space-between;align-items:center;padding:14px 0;z-index:3}.story-vocabulary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.story-vocab-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:15px 8px;background:#fffefa;min-height:140px}.story-vocab-item>span:first-child{font:27px/1.4 KaiTi,serif}.story-vocab-item small{font-size:14px;color:#788363}.story-vocab-item>span:nth-child(3){font-size:14px}.story-vocab-item:disabled{opacity:.55}.story-vocabulary-page button{border:1px solid #cbd8c0;border-radius:10px;min-height:44px}.story-vocabulary-page button:not(.story-vocab-item){padding:10px 13px}#story-sync-status{margin:10px 20px;font-size:14px;color:#805b29}
@media(max-width:1050px){.story-header{gap:12px;padding:10px 12px}.story-header .story-toolbar{gap:6px}.story-reader-brand img{width:125px}.story-toolbar button,.story-toolbar select{font-size:14px;padding:8px}}
@media(max-width:730px){.story-header{flex-wrap:wrap;gap:10px}.story-header .story-toolbar{justify-content:flex-start;flex:1 1 100%}.story-header .story-reader-brand{display:flex;align-items:center;gap:14px}.story-header .story-reader-brand small{margin:0}.story-toolbar label{font-size:13px}.story-title{font-size:28px}.story-title span{font-size:23px}}
@media(max-width:420px){.story-header{padding:8px}.story-header .story-toolbar{gap:5px}.story-header .story-toolbar button{padding:6px;font-size:12px;min-width:38px}.story-header .story-toolbar label{gap:3px;font-size:12px}.story-header .story-toolbar select{padding:6px 3px}.story-header .story-toolbar button[data-story-settings]{font-size:22px}.story-vocabulary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:550px){.story-header .story-reader-brand{display:block}.story-header .story-reader-brand small{margin-top:5px}.story-header .story-toolbar{display:grid;grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) 45px 38px 38px;gap:4px;width:100%}.story-header .story-toolbar label>span{display:none}.story-header .story-toolbar select{width:100%}.story-header .story-toolbar button{font-size:12px;line-height:1.2;padding:5px;min-width:0;min-height:44px;white-space:normal}.story-header .story-toolbar button[data-story-settings]{font-size:22px}}
@font-face{font-family:VistaHandwriting;src:url('/fonts/handwriting-peter-rabbit-v1.woff2') format('woff2');font-display:swap}
@font-face{font-family:VistaSerif;src:url('/fonts/serif-peter-rabbit-v1.woff2') format('woff2');font-display:swap}
@font-face{font-family:VistaSans;src:url('/fonts/sans-peter-rabbit-v1.woff2') format('woff2');font-display:swap}
.storybook-reader{--story-reading-font:VistaHandwriting;--story-pinyin-size:14px}
.storybook-reader[data-font=serif]{--story-reading-font:VistaSerif}
.storybook-reader[data-font=sans]{--story-reading-font:VistaSans}
.story-paragraph p{font-family:var(--story-reading-font),serif;line-height:calc(1.9em + var(--story-pinyin-size))}
.story-paragraph rt{font-size:var(--story-pinyin-size);font-family:var(--story-reading-font),sans-serif}
.story-title{font:700 clamp(36px,4vw,50px)/1.4 var(--story-reading-font),serif;margin-bottom:30px}
.story-word-card h2,.story-word-card h3{font-family:var(--story-reading-font),serif}
.story-art,.story-extra-art,.story-source{cursor:zoom-in}
.story-art:focus-visible,.story-extra-art:focus-visible,.story-source:focus-visible{outline:3px solid #648944}
.story-word.story-pointed,.story-word.story-speaking{background:#ffe88a;outline:none;box-shadow:none}
.story-pinyin-none .story-paragraph rt{visibility:hidden!important}

#story-pointer-panel{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));right:24px;z-index:12;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 24px);padding:10px;border:1px solid #b9caa6;border-radius:16px;background:#fffef7;box-shadow:0 6px 28px #233b3a33}
#story-pointer-panel button{min-width:44px;min-height:48px;padding:8px 12px;border:1px solid #c6d5b6;border-radius:10px;background:#eff4e5;color:#29483c;font-size:17px}
#story-pointer-panel button:disabled{opacity:.35}
#story-pointer-panel [role=status]{font:26px var(--story-reading-font),serif;max-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.storybook-reader:has(#story-pointer-panel) .story-paper{padding-bottom:130px}
#story-image-dialog{width:min(1100px,96vw);height:92dvh;max-width:96vw;max-height:94dvh;padding:12px;border:1px solid #bbc9b0;border-radius:18px;background:#fffefa;overflow:hidden}
#story-image-dialog::backdrop{background:#14271de0}
.story-image-controls{height:54px;display:flex;justify-content:center;gap:10px;align-items:center}
.story-image-controls button{min-width:48px;min-height:44px;border:1px solid #c6d5b6;border-radius:10px;background:#eff4e5;font-size:20px;color:#29483c}
.story-image-controls [data-image-close]{margin-left:auto}
.story-image-stage{height:calc(100% - 60px);width:100%;overflow:hidden;touch-action:none;cursor:grab;display:flex;align-items:center;justify-content:center}
.story-image-stage:active{cursor:grabbing}.story-image-stage img{width:100%;height:100%;object-fit:contain;transform-origin:center;user-select:none;pointer-events:none;will-change:transform}
@media(max-width:1050px){.story-header .story-reader-brand img{width:110px}.story-header .story-toolbar{gap:5px}.story-header .story-toolbar button{font-size:13px}}
@media(max-width:550px){.story-header .story-toolbar{display:flex;flex-wrap:wrap}.story-header .story-toolbar button{padding:7px 9px;flex:1 0 auto}.story-header .story-toolbar label{flex:0 0 55px}.story-header .story-toolbar [data-story-bookmark],.story-header .story-toolbar [data-story-settings]{flex:0 0 40px}.story-title{font-size:36px}#story-pointer-panel{right:12px;gap:5px;padding:8px}#story-pointer-panel button{font-size:14px;padding:7px;min-width:40px}#story-pointer-panel [role=status]{font-size:22px;max-width:3em}.story-settings label{gap:10px;flex-wrap:wrap}}

#story-pointer-panel{flex-wrap:wrap;touch-action:none;user-select:none;cursor:grab}
#story-pointer-panel:active{cursor:grabbing}
#story-pointer-panel [data-pointer-drag]{font-size:22px;color:#84917d;padding:8px 2px}
#story-pointer-panel [data-pointer-back],#story-pointer-panel [data-pointer-forward]{min-width:88px;flex-shrink:0}
@media(max-width:550px){#story-pointer-panel [data-pointer-back],#story-pointer-panel [data-pointer-forward]{min-width:80px}#story-pointer-panel [role=status]{display:none}}

/* Vertical parent reading pointer: forward, backward, personal pinyin. */
#story-pointer-panel{flex-direction:column;flex-wrap:nowrap;gap:10px;padding:10px;width:110px;max-height:calc(100dvh - 16px);overflow:auto}
#story-pointer-panel [data-pointer-drag]{display:block;text-align:center;width:100%;height:28px;padding:0;line-height:28px;cursor:grab}
#story-pointer-panel button,#story-pointer-panel [data-pointer-back],#story-pointer-panel [data-pointer-forward]{width:88px;height:88px;min-width:88px;min-height:88px;border-radius:50%;padding:0;flex-shrink:0;font-size:28px}
#story-pointer-panel [data-pointer-pinyin]{position:relative;border:3px solid #43895a;background:#f2f7ed;font-family:'Noto Serif SC',serif;font-size:34px}
#story-pointer-panel [data-pointer-pinyin][aria-pressed=false]{border-color:#b64d4d;color:#a63e3e;background:#fff7f4}
#story-pointer-panel [data-pointer-pinyin][aria-pressed=false]::after{content:'';position:absolute;left:10%;top:calc(50% - 2px);width:80%;height:4px;background:#b64d4d;transform:rotate(-45deg);border-radius:2px}
.story-paper{touch-action:pan-y}
@media(max-width:550px){#story-pointer-panel{width:102px}#story-pointer-panel button,#story-pointer-panel [data-pointer-back],#story-pointer-panel [data-pointer-forward]{width:80px;height:80px;min-width:80px;min-height:80px}}
.story-lead{white-space:normal}

#story-pointer-panel button{display:flex;align-items:center;justify-content:center}
.story-entry-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.story-entry-heading h2,.story-entry-heading h3{margin:0}.story-membership{display:block;text-align:right;color:#7b8774;font-size:12px;margin-top:6px}.story-state{display:flex;gap:7px;align-items:center;border:1px solid #d0dcbf;border-radius:24px;padding:7px 12px;font-size:14px;min-height:44px}.story-state>span{font-size:24px}.story-state.known{background:#e8f2dc;border-color:#adc993}.story-state.learning{background:#fff2cf;border-color:#e6ce92}.story-state.needs_practice{background:#fbe8e3;border-color:#dcafa5}.story-state-options{display:grid;gap:10px}.story-state-options label{display:flex;align-items:center;gap:12px;border:1px solid #cbd8bf;border-radius:12px;padding:14px;cursor:pointer}.story-state-options label:has(:checked){background:#edf5e4;border-color:#6a8c4d}.story-state-options span{font-size:25px}.story-state-options input{width:18px;height:18px;accent-color:#486a3c}.story-state-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}.story-state-footer button{padding:10px 18px}.story-state-footer [data-story-state-save]{background:#29483c;color:white}.story-word-card.main-word{background:#f3f6e9;border-radius:16px;padding:20px}.story-character-cards .story-entry-heading{flex-wrap:wrap}@media(max-width:550px){.story-entry-heading{flex-wrap:wrap}}

.storybook-shelf{flex-wrap:wrap}.storybook-cover strong{white-space:normal;text-wrap:balance;text-align:center;font-size:24px}.story-list{display:grid;gap:12px}.story-list-card img{flex-shrink:0;object-fit:cover}.storybook-cover img{mix-blend-mode:normal}

.story-state .rating-face svg,.story-state-options .rating-face svg{width:30px;height:30px}.story-state .rating-face,.story-state-options .rating-face{flex-shrink:0}

#story-pointer-panel button[hidden]{display:none}
#story-pointer-panel[data-compact=true]{width:74px;padding:7px;gap:7px}
#story-pointer-panel[data-compact=true] button{width:58px;height:58px;min-width:58px;min-height:58px;font-size:24px}
#story-pointer-panel[data-compact=true] button svg{width:26px;height:26px}
#story-pointer-panel[data-orientation=horizontal]{flex-direction:row;width:auto;max-width:calc(100vw - 16px);flex-wrap:wrap}
#story-pointer-panel[data-orientation=horizontal] [data-pointer-drag]{width:24px;flex-shrink:0}
#story-pointer-panel[data-orientation=horizontal][data-compact=true]{gap:6px}
.story-panel-options{margin-top:20px;border:1px solid #cbd8bf;border-radius:12px;padding:16px;display:grid;gap:14px}
.story-panel-options label{display:flex;gap:10px;align-items:center}.story-panel-buttons{display:flex;gap:16px;flex-wrap:wrap}
.story-panel-options input[type=checkbox]{width:20px;height:20px;accent-color:#486a3c}

.story-completion-card{position:relative}.story-completion-card .story-list-card{width:100%}.story-completion-card [data-story-unread]{margin:8px 0 16px}.story-completion-card [data-story-finished]{color:var(--green);font-weight:700}.story-completion-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.story-completion-card [hidden]{display:none!important}

.story-completion-card{border:1px solid #d7dfcf;border-radius:16px;background:#fffefa;overflow:hidden}.story-completion-card .story-list-card{border:0}.story-completion-card [data-story-unread]{margin:0 18px 16px}

.story-title-pinyin{display:block;color:var(--muted);font-size:16px;font-weight:400;line-height:1.6;white-space:normal}
.story-completion-card{padding-bottom:44px}.story-completion-card [data-story-finished]{position:absolute;right:14px;bottom:14px;background:#e5f3e9;border-radius:8px;padding:5px 9px}.story-completion-card [data-story-unread]{position:absolute;left:12px;bottom:8px;margin:0}
.story-end-actions{display:flex;justify-content:flex-end;margin:24px 0}.story-batch-rating{margin:12px 0;display:flex;flex-wrap:wrap;gap:12px}.story-batch-rating legend small{font-weight:400}.story-batch-rating label{display:flex;align-items:center;gap:5px}

.home-story-resume{display:flex;gap:20px;align-items:center}.home-story-resume>img{width:110px;height:140px;object-fit:cover;border-radius:10px}.home-story-resume>div{flex:1;min-width:0}.home-story-resume h3,.home-story-resume p{margin:5px 0}.home-story-resume span{display:block;margin-top:8px}.home-story-resume .story-title-pinyin{display:block}@media(max-width:550px){.home-story-resume{gap:14px;flex-wrap:wrap}.home-story-resume>img{width:80px;height:110px}.home-story-resume>button{width:100%}}

.story-paragraph rt.story-pinyin-unknown,#story-dialog .story-pinyin-unknown,.story-vocab-item .story-pinyin-unknown{color:#b42318}.story-end-actions{gap:12px;flex-wrap:wrap}.story-end-actions [hidden]{display:none!important}

/* Original book illustrations: viewport-wide in portrait, half in landscape. */
@media (orientation:portrait){
 .storybook-reader[data-book=peter-rabbit] .story-paper{max-width:none;margin:0;border:0;border-radius:0;padding:28px 24px}
 .storybook-reader[data-book=peter-rabbit] .story-art,.storybook-reader[data-book=peter-rabbit] .story-extra-art,.storybook-reader[data-book=peter-rabbit] .story-paragraph:nth-child(4n) .story-art{float:none;clear:both;display:block;width:100vw;max-width:none;height:auto;max-height:none;margin:12px calc(50% - 50vw) 24px;border-radius:0;object-fit:contain}
}
@media (orientation:landscape){
 .storybook-reader[data-book=peter-rabbit] .story-paper{max-width:none;margin:16px 0;padding:32px;border-left:0;border-right:0;border-radius:0}
 .storybook-reader[data-book=peter-rabbit] .story-art,.storybook-reader[data-book=peter-rabbit] .story-paragraph:nth-child(4n) .story-art{float:right;clear:right;display:block;width:50vw;max-width:none;height:auto;max-height:none;margin:8px 0 24px 24px;object-fit:contain}
 .storybook-reader[data-book=peter-rabbit] .story-extra-art{display:block;width:50vw;max-width:none;height:auto;max-height:none;margin:24px auto;object-fit:contain}
}

.story-pinyin-unreviewed{color:#9ca3af!important}