:root{--ink:#23384d;--blue:#106caa;--purple:#774caa;--coral:#e75f67;--cream:#fff8e7;--gold:#ffdb79}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 15%,#fff1ba,transparent 45%),linear-gradient(135deg,#d3f1ff,#e9e4ff);color:var(--ink);font:17px/1.5 "Segoe UI",sans-serif}button,select{font:inherit}button{border:0;border-radius:14px;min-height:44px;padding:10px 17px;color:var(--ink);background:white;box-shadow:0 2px 0 #18384920;cursor:pointer;font-weight:650}button:hover{filter:brightness(.97)}button:disabled{opacity:.55;cursor:default}button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:4px solid #d03f82;outline-offset:3px}button[aria-pressed=true],button.selected{background:#e5d7ff;box-shadow:inset 0 0 0 3px var(--purple)}button.correct{background:#def3df;box-shadow:inset 0 0 0 2px #36834b}.primary{background:var(--blue);color:white}.secondary{background:#f0e8fb;color:#613992}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:bold;color:#735da1}header{display:flex;justify-content:space-between;align-items:center;padding:12px 28px;background:#157eaf;color:white;box-shadow:0 3px 0 #16608b22}.brand{display:flex;align-items:center;gap:10px;font-size:36px;line-height:1.2}.brand span{font-size:17px;font-weight:800;letter-spacing:.04em}.brand small{display:block;font-size:11px;font-weight:500;letter-spacing:.13em;margin-top:4px}.top-actions{display:flex;gap:9px}.top-actions button{font-size:14px;background:#ffffff22;color:white;box-shadow:none}#film{background:#ffe39a;color:#3f4055}.top-actions button[aria-pressed=true]{background:#f5e8bd;color:#254258}main{max-width:1320px;margin:auto;display:flex;align-items:center;justify-content:center;gap:55px;min-height:calc(100vh - 157px);padding:22px}aside{width:260px;flex:none}aside h1{font-size:44px;line-height:1.08;color:#176da7;margin:15px 0}aside p{color:#567184}aside img{width:180px;height:150px;object-fit:contain;border-radius:50%}.credit{font-size:12px}#progress{font-size:14px;color:#66498f;margin:16px 0;font-weight:700}#contents{background:#fff7d8;font-size:14px}#bookArea{position:relative;filter:drop-shadow(3px 10px 12px #33406126)}#book{background:#fffbef}.leaf{background:#fffcf4;overflow:hidden;border:1px solid #e2dbcd}.paper{height:100%;padding:25px 29px 20px;display:flex;flex-direction:column;gap:12px;overflow:auto}.paper small{font-size:11px;color:#718090}.paper h2{font-size:31px;line-height:1.15;color:#c44152;margin:0}.paper p{margin:0}.paper .art{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:15px;background:white}.paper.story .art{height:230px}.story-lines{font-size:17px;line-height:1.48}.story-lines p{margin:6px 0}.story-lines .narrator{color:#247b49;font-weight:650}.speaker{font-size:11px;color:#775592;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.page-bottom{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:center;gap:10px}.page-bottom button{font-size:13px;background:#e3f3fc;color:#14648f;padding:8px 12px}.page-no{font-size:11px;color:#85909b}.cover-title{font-size:39px!important;color:#156b9f!important}.cover-sticker{background:#fff1b8;padding:9px 15px;border-radius:13px;font-size:14px;align-self:flex-start}.activity-links{display:grid;gap:10px}.activity-links button{text-align:left;background:#fff1c7;color:#654b2f;border-left:6px solid #efba55}.page-note{font-size:12px;background:#f4edff;border-radius:12px;padding:12px;color:#674f80}.cover .art{height:255px}footer{display:flex;justify-content:center;align-items:center;gap:14px;padding:10px 12px;background:#ffffffa8;position:sticky;bottom:0;z-index:3;backdrop-filter:blur(7px)}footer button{background:#126faa;color:white;min-width:115px}footer select{border:1px solid #c7d8e1;background:white;padding:10px;border-radius:12px;font-size:14px;max-width:230px;height:46px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}dialog{border:0;border-radius:23px;padding:0;width:min(960px,calc(100vw - 28px));max-height:92vh;color:var(--ink);box-shadow:0 20px 100px #18364b55}dialog::backdrop{background:#18364bb5;backdrop-filter:blur(4px)}.modal-head{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:18px 24px;background:#dff2ff;border-bottom:3px solid #bbdfea}.modal-head h2{font-size:25px;line-height:1.2;margin:3px 0}.modal-head small{font-size:11px;color:#507589}.modal-head button{background:white;font-size:22px;flex-shrink:0}#modalBody{padding:24px;overflow:auto;max-height:calc(92vh - 104px)}.instruction{font-size:17px;margin:0 0 18px;color:#51667a}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.feedback{background:#edf4fa;border-radius:12px;padding:12px;min-height:50px;font-weight:650;margin:16px 0 0}.feedback.success{background:#e0f2d9;color:#235d36}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.picture-card{padding:12px;border:2px solid #e0e5eb;box-shadow:none}.picture-card img{width:100%;height:140px;object-fit:contain}.picture-card span{display:block}.match{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:15px}.match-column{display:grid;gap:10px;grid-auto-rows:1fr}.match button{width:100%;font-size:16px;text-align:left;min-height:66px;border:2px solid #d6e4ee;box-shadow:none;overflow-wrap:anywhere}.match img{height:85px;width:100%;object-fit:contain}.match.picture-match .match-column{grid-auto-rows:108px}.oral-card{padding:25px;border:2px solid #e6d9f7;border-radius:18px;background:#fcf8ff}.oral-card h3{font-size:25px;line-height:1.4;margin:0 0 20px}.answer{padding:15px;background:#e0f3e2;border-radius:12px}.steps{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.steps button{min-width:44px;background:#eff2fb}.word-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;max-width:520px;margin:auto}.word-grid button{padding:0;border-radius:7px;min-height:44px;font-size:18px;border:1px solid #cbdce7;box-shadow:none}.found{background:#d6f2da!important;color:#1a5c34}.word-list{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.word-list span{padding:5px 10px;border-radius:20px;background:#edf3fa;font-size:14px}.word-list .found{text-decoration:line-through}.letter-word{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:25px 0}.letter-word button,.letter-fixed{display:grid;place-items:center;min-width:45px;height:53px;font-size:25px;font-weight:bold;border:2px solid #b9d5e8;border-radius:10px;background:#fff}.letter-fixed{border:0;background:#edf4fa}.letter-word button{background:#fff2c7}.bank{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.bank button{background:#e7daf7;min-width:54px;font-size:20px}.builder-stage{display:flex;gap:16px;align-items:center;justify-content:center;min-height:130px;background:#f8f2ff;border-radius:17px;font-size:32px;flex-wrap:wrap;padding:18px}.built-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.built-list span{border-radius:10px;background:#e8f3e5;padding:10px;text-align:center}.sentence{font-size:21px;line-height:2.4;margin:16px 0;padding-bottom:14px;border-bottom:1px solid #e5ebef}.slot{min-width:110px;background:#fff0be;color:#624519}.gallery{text-align:center}.gallery img{width:100%;max-width:330px;height:220px;object-fit:contain}.gallery-options{display:flex;gap:20px;justify-content:center;margin-top:18px}.gallery-options button{background:#e2effa;min-width:100px;font-size:25px}.video{width:100%;aspect-ratio:16/9;background:#14344a;border-radius:12px}.film-caption{padding:12px 16px;background:#fff3ce;border-radius:12px;font-size:19px;min-height:55px}.film-scenes{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.film-scenes button{font-size:13px;background:#e6f1f9}.role-box{font-size:25px;line-height:1.6;background:#fff5ce;border-radius:16px;padding:22px;margin:20px 0}.swatches{display:flex;gap:10px;flex-wrap:wrap}.swatches button{width:48px;min-height:48px;border:3px solid white;box-shadow:0 0 0 1px #bbcbd6}.umbrella-canvas{display:block;width:100%;max-width:600px;margin:auto}.umbrella-canvas [role=button]{cursor:pointer;stroke:#2d5370;stroke-width:3}.umbrella-canvas [role=button]:focus{stroke:#d23579;stroke-width:6;outline:none}.art-status{font-size:13px;color:#5d7585}#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:20;background:#18394d;color:white;border-radius:20px;padding:10px 20px;display:none}#toast.show{display:block}.stf__parent{height:100%!important}
@media(max-width:850px){aside{display:none}header{padding:9px 12px}.brand{font-size:27px}.brand span{font-size:13px}.brand small{font-size:9px}.top-actions{gap:4px}.top-actions button{font-size:12px;padding:8px}#film span{display:none}main{padding:14px 6px;min-height:calc(100vh - 145px)}footer{gap:7px;padding:8px 6px}footer button{min-width:70px;padding:9px;font-size:13px}footer select{font-size:12px;max-width:calc(100vw - 173px)}.paper{padding:20px;gap:10px}.paper h2{font-size:28px}.paper.story .art{height:205px}.story-lines{font-size:16px}.modal-head{padding:13px 15px}.modal-head h2{font-size:21px}#modalBody{padding:16px}.match{gap:9px}.match button{font-size:14px;padding:8px}.picture-card img{height:110px}.sentence{font-size:18px}.oral-card{padding:17px}.oral-card h3{font-size:21px}.film-caption{font-size:17px}.word-grid{gap:2px}.word-grid button{font-size:16px;min-height:38px}.letter-word{gap:4px}.letter-word button,.letter-fixed{min-width:33px;height:46px;font-size:21px}.gallery img{height:180px}}
@media(max-width:360px){.brand small{display:none}.top-actions button{font-size:11px;padding:6px}.brand span{font-size:11px}.brand{gap:4px}.paper{padding:16px}.paper.story .art{height:190px}.story-lines{font-size:15px}.cover-title{font-size:32px!important}.word-grid button{min-height:30px;font-size:14px}.match button{font-size:13px}.letter-word button,.letter-fixed{min-width:29px}.modal-head h2{font-size:19px}.role-box{font-size:20px}.gallery-options{gap:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}