:root{color-scheme:light;--paper:#fff9ed;--ink:#34453d;--muted:#627164;--line:#e8dfcd;--green:#237255;--blue:#dceff2;--pink:#f9e3dc;--yellow:#ffe28b;--orange:#ed6749;font-family:'Game Sans',ui-rounded,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:#fffdf7;border:2px solid var(--ink);border-radius:11px;padding:9px 14px;min-height:44px;font-weight:700;touch-action:manipulation}button:hover:enabled{background:#fff3d5}button:focus-visible,a:focus-visible{outline:3px solid #157eae;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button:active:enabled{transform:translateY(2px)}
main{max-width:1060px;margin:auto;padding:18px 24px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.brand{border:0;background:none;font-size:30px;font-weight:850;letter-spacing:-1px;padding:0;display:flex;align-items:center;gap:11px}.brand:hover:enabled{background:none}.seal{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--orange);color:white;font-size:27px;transform:rotate(-6deg);font-family:system-ui,sans-serif}.icon{font-size:23px;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid #d4d7ca}
h1{font-size:28px;letter-spacing:-.7px;margin:6px 0 20px}h2{font-size:21px;margin:0 0 10px}.eyebrow{font-size:11px;color:var(--muted);font-weight:700}.set-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.set-card{border:2px solid var(--ink);border-radius:20px;padding:20px;background:var(--blue);box-shadow:4px 5px 0 #e5dfcc}.set-card:nth-child(2){background:var(--pink)}.set-card:nth-child(3){background:#eaf3d8}.set-top{display:flex;justify-content:space-between;gap:8px}.set-num{font-size:24px;font-weight:800;opacity:.35}.characters{font-family:system-ui,sans-serif;font-size:27px;letter-spacing:4px;margin:22px 0}.stages{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.stage{font-size:12px;padding:8px 4px;box-shadow:0 3px 0 #34453d}.medal{display:block;font-size:17px;line-height:1.3}.bronze{color:#a56b3e}.silver{color:#76838f}.gold{color:#b58a22}.diamond{color:#35898f}.mode-note{font-size:12px;color:var(--muted)}footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;margin-top:16px}footer button{font-size:11px;border:0;background:none;padding:6px;min-height:32px}
/* The writing square consumes remaining space inside a viewport-height cabinet. */
body.practicing main{height:100vh;height:100dvh;display:grid;grid-template-rows:44px minmax(0,1fr);gap:12px;padding-top:12px;padding-bottom:16px}body.practicing header{margin:0}body.practicing footer{display:none}
.lesson{position:relative;min-height:0;display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:48px 4px minmax(0,1fr) auto auto auto;grid-template-areas:'top top' 'progress progress' 'prompt board' 'tabs board' 'tools board' 'submit board';gap:0 22px;border:3px solid var(--ink);border-radius:23px;background:#fffdf7;box-shadow:5px 6px 0 #e5dfcc;overflow:hidden;padding:0 22px 20px}
.lesson-top{grid-area:top;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;margin:0 -22px;padding:0 20px;background:#fff3d5;border-bottom:2px solid var(--ink)}.text-button{border:0;background:none;padding:0;min-height:40px;font-size:12px}.progress{grid-area:progress;height:4px;background:#eee6d1;margin:0 -22px}.progress div{background:var(--orange);height:100%;transition:width .2s}
.prompt{grid-area:prompt;align-self:stretch;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:14px 6px;margin-top:18px;border-radius:16px;background-color:var(--blue);background-image:radial-gradient(#fff8 1.3px,transparent 1.3px);background-size:18px 18px}.lesson[data-set=people] .prompt{background-color:var(--pink)}.lesson[data-set=everyday] .prompt{background-color:#eaf3d8}.pinyin{font-size:32px;font-weight:800;line-height:1.25;letter-spacing:-.5px}.meaning{font-size:15px;line-height:1.5;margin-top:10px}.prompt .mode-note:empty{display:none}.prompt .mode-note{margin-top:6px}
.character-tabs{grid-area:tabs;display:flex;justify-content:center;gap:8px;margin:10px 0}.char-tab{padding:4px;min-width:44px;height:44px;border-color:#b3bba9}.char-tab.active{border-color:var(--ink);background:var(--yellow);box-shadow:0 3px 0 #d1bd7d}.char-tab svg{width:30px;height:30px}.char-tab span{font-size:23px;font-family:system-ui,sans-serif}
.board-wrap{grid-area:board;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:18px;container-type:size}.board{position:relative;flex-shrink:0;width:min(100cqw,calc(100cqh - 32px));height:min(100cqw,calc(100cqh - 32px));background:#fffefa;border:2px solid var(--ink);border-radius:17px;overflow:hidden;box-shadow:0 4px 0 #e5dfcc}.board svg,.board canvas{position:absolute;inset:0;width:100%;height:100%}.board canvas{touch-action:none;cursor:crosshair}.grid-line{stroke:#d9d8c8;stroke-width:.002;stroke-dasharray:.008 .008}.stroke-guide{fill:#e6e6d7}.hint-path{fill:none;stroke:#8cad9b;stroke-width:.008;stroke-linecap:round;stroke-dasharray:.015 .012}.hint-dot{fill:var(--green)}.board-caption{display:flex;justify-content:space-between;gap:12px;width:min(100cqw,calc(100cqh - 32px));font-size:10px;color:var(--muted);margin-top:10px;white-space:nowrap}
.tools{grid-area:tools;display:flex;justify-content:center;gap:6px;margin:10px 0}.tools button{padding:8px;font-size:12px;border:1.5px solid #b8c3b4;background:#f0f4e9}.primary{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-weight:800}.primary:hover:enabled{background:#ffdc6c}.main-action{grid-area:submit;width:100%;margin:5px 0 3px;min-height:48px}.main-action:disabled{background:#e7e9df;box-shadow:none}
/* Feedback stays in the cabinet instead of extending the document. */
#feedback:empty{display:none}#feedback:not(:empty){position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:#fff9ede8;backdrop-filter:blur(3px)}.feedback{width:min(100%,470px);max-height:100%;display:flex;flex-direction:column;background:#eaf3d8;border:2px solid var(--ink);border-radius:18px;padding:20px;box-shadow:4px 5px 0 #e5dfcc;min-height:0}.feedback.needs-work{background:#fff0e4}.feedback h2{font-size:21px}.feedback p{font-size:14px;line-height:1.5;margin:6px 0}.feedback ul{min-height:0;overflow:auto;padding-left:20px;line-height:1.6;font-size:14px;margin:6px 0 14px}.feedback .actions{display:flex;gap:10px;margin-top:10px;flex-shrink:0}.feedback .actions button{flex:1;padding:9px;font-size:13px}.feedback .actions .primary{background:var(--yellow)}
.result{text-align:center;padding:28px 20px;background:#dceff2;border:3px solid var(--ink);border-radius:22px;box-shadow:5px 6px 0 #e5dfcc}.result .big-medal{font-size:60px;display:inline-block;margin:10px}.result h1{font-size:40px;margin:0 0 10px}.result p{color:var(--muted)}.result button{margin:8px}.diamond.celebrate{animation:shine 1.2s ease-in-out 2}@keyframes shine{50%{filter:drop-shadow(0 0 10px #73cccc);transform:scale(1.15)}}.error{padding:24px;background:#fff0e4;border-radius:14px}
dialog{border:2px solid var(--ink);border-radius:20px;max-width:440px;width:calc(100% - 28px);max-height:calc(100dvh - 28px);background:var(--paper);color:var(--ink);padding:22px;box-shadow:5px 6px 0 #34453d44}dialog::backdrop{background:#34453d55}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head button{border:0;background:none;font-size:25px;padding:3px 10px}label{display:block;margin:20px 0 9px;font-size:14px;font-weight:700}select{width:100%;padding:12px;border:1.5px solid var(--ink);border-radius:9px;background:#fffdf7;color:var(--ink)}input[type=range]{width:100%;accent-color:var(--green)}output{display:block;font-size:12px;font-weight:400;margin-top:7px}.range-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.muted{color:var(--muted);font-size:13px;line-height:1.6}dialog .primary{width:100%;margin-top:16px}dialog p{font-size:14px;line-height:1.6}a{color:var(--green)}
@media(max-width:700px){main{padding:12px}.set-list{grid-template-columns:1fr}.set-card{padding:16px}.characters{margin:12px 0}.stages{grid-template-columns:repeat(4,1fr)}.set-top h2{font-size:19px}.brand{font-size:26px}.lesson{grid-template-columns:180px minmax(0,1fr);gap:0 12px;padding:0 12px 14px}.lesson-top{margin:0 -12px;padding:0 12px}.progress{margin:0 -12px}.pinyin{font-size:27px}}
@media(max-width:540px) and (min-height:501px){body.practicing main{padding:8px 10px 12px;gap:8px}.lesson{grid-template-columns:minmax(0,1fr);grid-template-rows:40px 3px auto auto minmax(0,1fr) auto auto;grid-template-areas:'top' 'progress' 'prompt' 'tabs' 'board' 'tools' 'submit';padding:0 12px 12px;border-radius:19px}.lesson-top{font-size:11px}.text-button{font-size:11px;min-height:36px}.prompt{padding:9px 0 0}.pinyin{font-size:26px}.meaning{font-size:13px;margin-top:3px}.prompt .mode-note{font-size:10px;margin-top:2px}.character-tabs{margin:7px 0 0}.char-tab{height:38px;min-height:38px;min-width:40px}.char-tab span{font-size:21px}.board-wrap{padding-top:8px}.tools{margin:7px 0 2px}.tools button{min-height:40px;padding:6px 12px}.main-action{min-height:44px;margin-top:6px}.feedback{padding:16px}.feedback h2{font-size:19px}}
@media(max-height:500px){body.practicing main{padding:6px 10px 10px;grid-template-rows:36px minmax(0,1fr);gap:6px}.brand{font-size:24px}.seal{height:30px;width:30px;font-size:22px}.icon{height:34px;min-height:34px;width:34px;font-size:20px}.lesson{grid-template-columns:minmax(140px,32%) minmax(0,1fr);grid-template-rows:36px 3px minmax(0,1fr) auto auto auto;padding-bottom:10px;gap:0 12px}.lesson-top{font-size:10px}.text-button{min-height:32px;font-size:10px}.prompt{padding:5px 0}.pinyin{font-size:24px}.meaning{font-size:12px;margin-top:3px}.character-tabs{margin:4px 0}.char-tab{height:36px;min-height:36px;min-width:36px}.tools{margin:4px 0}.tools button{min-height:36px;font-size:11px;padding:4px}.main-action{min-height:40px;font-size:13px}.board-wrap{padding-top:10px}.board-caption{font-size:9px}.feedback{padding:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:540px) and (min-height:501px){.prompt{margin-top:8px;padding:7px 5px}}@media(max-height:500px){.prompt{margin-top:8px}}
.character-tabs:has(.char-tab:only-child){display:none}@media(max-width:540px) and (min-height:501px) and (max-height:650px){.prompt{flex-direction:row;align-items:center;gap:12px;padding:6px}.meaning{margin:0}.prompt .mode-note{display:none}}
/* Picture stories share the exercise viewport; they never extend the page. */
.friends-entry{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:94px;border:0;background:transparent;padding:4px;margin:6px 0 12px}.friends-entry img{width:52%;height:100%;object-fit:contain}.friends-entry span{font-size:12px;text-align:left}.friends-entry:hover:enabled{background:#fff8;border-radius:12px}
.prompt.has-mnemonic{min-height:0;padding:8px;overflow:hidden}.mnemonic-preview{border:0;background:transparent;min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0 6px;width:100%;overflow:hidden}.mnemonic-preview img{width:100%;height:calc(100% - 22px);min-height:0;object-fit:contain;max-height:180px}.mnemonic-preview span{font-size:10px;flex-shrink:0}.mnemonic-preview:hover:enabled{background:#fff6}.has-mnemonic .pinyin{font-size:26px}.has-mnemonic .meaning{font-size:13px;margin-top:3px}
.story-dialog{width:min(650px,calc(100vw - 24px));height:min(700px,calc(100dvh - 24px));max-width:none;max-height:none;padding:14px 18px;overflow:hidden}.story-dialog[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto;gap:8px}.story-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700}.story-close{font-size:24px;border:0;padding:0;width:36px;min-height:36px;background:transparent}.story-tabs{display:flex;gap:10px;justify-content:center}.story-tabs button{padding:4px 18px;min-height:40px;font-size:19px;background:#fffdf7}.story-tabs button[aria-pressed=true]{background:var(--yellow)}.story-visual{min-height:0;border-radius:16px;background:#f9e3dc;display:flex;align-items:center;justify-content:center;overflow:hidden}.story-art{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;padding:8px}.story-label{display:flex;align-items:center;justify-content:center;gap:12px}.story-shapes{display:flex;justify-content:center;align-items:center;font-size:32px}.story-shapes svg{height:42px;width:42px}.story-reading{font-size:18px;font-weight:700}.story-copy{text-align:center}.story-copy p{font-size:13px;line-height:1.4;margin:0}.story-copy .story-caption{font-weight:700}.story-copy .story-translation{color:var(--muted);margin-top:3px}.story-copy .story-translation:empty{display:none}.story-details{font-size:11px;line-height:1.4}.story-details summary{cursor:pointer;min-height:24px;padding:4px 0;color:var(--muted)}.story-details p{font-size:11px;line-height:1.4;margin:3px 0}.story-details a{font-size:10px}.story-dialog .story-practice{margin:0;min-height:42px;padding:8px}
@media(max-width:540px) and (min-height:501px){.prompt.has-mnemonic{display:grid;grid-template-columns:90px minmax(0,1fr);grid-template-rows:auto auto;gap:0 8px;padding:5px;height:78px}.mnemonic-preview{grid-row:1/3;grid-column:1;height:68px;padding:0}.mnemonic-preview img{height:52px}.mnemonic-preview span{font-size:9px}.has-mnemonic .pinyin{align-self:end;font-size:23px}.has-mnemonic .meaning{align-self:start;font-size:12px}.has-mnemonic .mode-note{display:none}.story-dialog{padding:10px 12px;gap:6px}.story-copy p{font-size:12px}.story-shapes svg{height:34px;width:34px}}
@media(max-height:500px){.mnemonic-preview img{max-height:65px}.has-mnemonic .pinyin{font-size:21px}.has-mnemonic .meaning{font-size:11px}.story-dialog[open]{grid-template-columns:1fr 1fr;grid-template-rows:32px 40px minmax(0,1fr) auto auto;gap:5px 12px}.story-head{grid-column:1/3}.story-tabs{grid-column:1/3}.story-visual{grid-column:1;grid-row:3/6}.story-label{grid-column:2;grid-row:3;align-self:start}.story-copy{grid-column:2;grid-row:3;align-self:end;padding-top:40px}.story-details{grid-column:2;grid-row:4}.story-dialog .story-practice{grid-column:2;grid-row:5}.story-copy p{font-size:11px}.story-shapes svg{width:30px;height:30px}}
html:has(dialog[open]){overflow:hidden;overscroll-behavior:none}
@media(max-width:540px) and (min-height:501px) and (max-height:650px){.lesson{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:40px 3px auto auto minmax(0,1fr) 48px;grid-template-areas:'top top' 'progress progress' 'prompt prompt' 'tabs tabs' 'board board' 'tools submit';column-gap:8px}.tools{gap:3px;margin:4px 0 0}.tools button{min-width:0;min-height:42px;padding:3px;font-size:10px}.main-action{margin:4px 0 0;min-height:42px;font-size:12px}.prompt.has-mnemonic{height:66px}.mnemonic-preview{height:56px}.mnemonic-preview img{height:42px}}
/* Class directory lives inside the viewport; exercise screens never scroll. */
body.browsing main{height:100vh;height:100dvh;display:grid;grid-template-rows:44px minmax(0,1fr) 28px;gap:10px;padding:12px 20px}body.browsing header,body.browsing footer{margin:0}.catalog{display:grid;grid-template-rows:38px 44px 44px minmax(0,1fr);gap:10px;min-height:0}.catalog-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.catalog-title h1{font-size:24px;margin:0}.catalog-title span{font-size:11px;color:var(--muted)}.catalog-tabs{display:flex;gap:8px}.catalog-tabs button{flex:1;font-size:13px;padding:8px}.catalog-tabs button[aria-pressed=true]{background:var(--yellow);box-shadow:0 3px 0 var(--ink)}.catalog-filter{display:flex;align-items:center;gap:12px}.catalog-filter label{margin:0;font-size:12px;white-space:nowrap}.catalog-filter select,.catalog-filter input{height:42px;margin:0;min-width:0;flex:1;border:1.5px solid var(--ink);border-radius:10px;background:#fffdf7;padding:8px 12px;color:var(--ink);font:inherit;font-size:13px}.catalog-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px 5px 6px 0}.practice-set{background:var(--blue);border:2px solid var(--ink);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:4px 4px 0 #e5dfcc}.practice-set:nth-child(3n+2){background:var(--pink)}.practice-set:nth-child(3n){background:#eaf3d8}.set-heading{display:flex;justify-content:space-between;align-items:center}.set-heading h2{font-size:18px;margin:0}.set-heading span{font-size:12px}.word-preview{font-size:18px;margin:12px 0;line-height:1.8;letter-spacing:1px}.practice-set .stages{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.practice-set .stages button{font-size:12px;padding:7px}.practice-set .stages span{margin-right:4px}.practice-set .stages small{font-size:10px}.component-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}.component-grid button{font-size:28px;min-height:66px;background:#f9e3dc}.component-grid button:nth-child(3n+1){background:var(--blue)}.component-grid button:nth-child(3n+2){background:#eaf3d8}.word-row{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid #d8dece}.word-story{border:0;background:#dceff2;padding:7px 12px;min-width:100px;max-width:38%;text-align:center;flex-shrink:0}.word-story strong{display:block;font-size:22px;letter-spacing:1px}.word-story span{display:block;font-size:11px;font-weight:400}.word-meaning{flex:1;min-width:0;font-size:13px;line-height:1.5}.word-meaning small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.word-practice{font-size:12px;padding:8px;background:var(--yellow)}.review-start{margin:4px 0 12px}.empty-state{font-size:14px;color:var(--muted);padding:20px}
.component-scene{position:relative;width:100%;height:100%;aspect-ratio:1}.scene-piece{position:absolute;display:grid;place-items:center;min-width:0;min-height:0}.object-sprite{display:block;width:100%;height:100%;aspect-ratio:1;background-size:400% 400%;background-repeat:no-repeat}.word-scenes{display:flex;align-items:stretch;justify-content:center;gap:10px;width:100%;height:100%;padding:8px}.character-scene{flex:1;min-width:0;min-height:0;display:grid;place-items:center}.character-scene .component-scene{max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:1;min-width:80%;min-height:80%}.special-art{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.mini-scene{display:block;width:100%;height:calc(100% - 20px);min-height:0;max-height:180px}.mini-scene .component-scene{max-width:160px;margin:auto}.mini-scene .special-art{height:100%}.story-copy{max-height:95px;overflow:auto}.story-note{max-height:100px;overflow:auto}.story-tabs{flex-wrap:nowrap;min-width:0}.story-tabs button{min-width:0;padding:4px 12px}.class-note{font-size:11px;text-align:left;max-width:440px}.class-note summary{cursor:pointer;min-height:25px;padding:5px}.class-note p{margin:5px 0}.prompt:has(.class-note){position:relative}.class-note[open]{position:absolute;z-index:3;inset:0;background:#fff9ed;border:1px solid var(--ink);border-radius:12px;padding:10px;overflow:auto}
@media(max-width:540px){body.browsing main{padding:8px 10px}.catalog{gap:8px;grid-template-rows:32px 40px 42px minmax(0,1fr)}.catalog-tabs{gap:5px}.catalog-tabs button{font-size:11px;padding:5px;min-height:38px}.catalog-title span{font-size:10px}.word-row{gap:8px;padding:10px 0}.word-story{min-width:74px;padding:5px;max-width:34%}.word-story strong{font-size:20px}.word-meaning{font-size:12px}.practice-set{padding:12px}.word-preview{font-size:16px}.practice-set .stages{gap:5px}.practice-set .stages button{font-size:10px;padding:7px 2px}.mini-scene{height:42px}.mini-scene .component-scene{max-width:60px}.story-copy{max-height:82px}.story-note{max-height:96px}}
@media(max-height:500px){.catalog{grid-template-rows:26px 36px 36px minmax(0,1fr);gap:6px}.catalog-tabs button{min-height:34px;padding:4px}.catalog-filter input,.catalog-filter select{height:34px}.catalog-title h1{font-size:20px}.story-copy{max-height:65px}.story-note{max-height:64px}.mini-scene{max-height:65px}}
.header-actions{display:flex;align-items:center;gap:8px}.header-actions #account{font-size:11px;border:1.5px solid #d4d7ca;min-height:36px;padding:7px 10px;background:transparent}.scene-piece{container-type:size}.object-cluster{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}.object-cluster .object-sprite{width:min(100cqw,100cqh);height:auto;max-height:100%;flex:1;min-height:0;max-width:100%;aspect-ratio:1}.object-cluster:has(.object-sprite:nth-child(2)) .object-sprite{width:min(100cqw,calc(100cqh / 2))}.object-cluster:has(.object-sprite:nth-child(3)) .object-sprite{width:min(100cqw,calc(100cqh / 3))}
.object-cluster .object-sprite{flex:0 0 auto;width:min(100cqw,100cqh);height:min(100cqw,100cqh)}.object-cluster:has(.object-sprite:nth-child(2)) .object-sprite{width:min(100cqw,calc(100cqh / 2));height:min(100cqw,calc(100cqh / 2))}.object-cluster:has(.object-sprite:nth-child(3)) .object-sprite{width:min(100cqw,calc(100cqh / 3));height:min(100cqw,calc(100cqh / 3))}.word-info{font-size:18px;border:0;background:transparent;padding:3px;min-height:32px;min-width:28px}.lesson-top>span{margin-left:auto}.has-mnemonic .meaning{max-height:44px;overflow:auto}
.object-cluster.row{flex-direction:row}.object-cluster.row:has(.object-sprite:nth-child(2)) .object-sprite{width:min(calc(100cqw / 2),100cqh);height:min(calc(100cqw / 2),100cqh)}.object-cluster.row:has(.object-sprite:nth-child(3)) .object-sprite{width:min(calc(100cqw / 3),100cqh);height:min(calc(100cqw / 3),100cqh)}
.shape-anchor{position:absolute;inset:0;pointer-events:none;z-index:2}.shape-anchor svg{width:100%;height:100%;overflow:visible}.shape-anchor path{fill:rgba(255,249,237,.2);stroke:#34453d;stroke-width:7;stroke-linejoin:round}.component-scene:has(.shape-anchor) .scene-piece{opacity:.88}.integrated-friend{width:100%;height:100%;background-image:url(art/pengyou-friends-v4.png);background-repeat:no-repeat;background-size:200% auto;background-position:0 center}.integrated-friend.you{background-position:100% center}
.word-scenes{container-type:size}.story-visual .character-scene .component-scene{min-width:0;min-height:0;width:min(100cqh,100cqw);height:min(100cqh,100cqw);max-width:100%;max-height:100%;flex:none}.word-scenes:has(.character-scene:nth-child(2)) .component-scene{width:min(100cqh,calc(100cqw / 2 - 8px));height:min(100cqh,calc(100cqw / 2 - 8px))}.word-scenes:has(.character-scene:nth-child(3)) .component-scene{width:min(100cqh,calc(100cqw / 3 - 8px));height:min(100cqh,calc(100cqw / 3 - 8px))}.word-scenes:has(.character-scene:nth-child(4)) .component-scene{width:min(100cqh,calc(100cqw / 4 - 8px));height:min(100cqh,calc(100cqw / 4 - 8px))}
.component-scene .object-cluster:has(.object-sprite:only-child) .object-sprite{width:min(100cqh,calc(100cqw * 1.65));height:min(100cqh,calc(100cqw * 1.65));max-width:none;max-height:none}.shape-anchor path{fill:rgba(52,69,61,.08);stroke:rgba(52,69,61,.65);stroke-width:6}

/* The canonical Hanzi remains the dominant, opaque foreground over natural artwork. */
.shape-anchor path{fill:#243b32;stroke:#fff9ed;stroke-width:10;paint-order:stroke fill;stroke-linejoin:round}.component-scene:has(.shape-anchor) .scene-piece{opacity:1}.shape-anchor{opacity:1}.shape-anchor svg{display:block}.story-visual .word-scenes .character-scene .component-scene{width:min(100cqh,calc((100cqw - 10px * (var(--characters,1) - 1)) / var(--characters,1)));height:min(100cqh,calc((100cqw - 10px * (var(--characters,1) - 1)) / var(--characters,1)))}