:root{--ink:#173e46;--muted:#50727a;--teal:#20b7bc;--teal-deep:#087a83;--teal-dark:#095460;--grape-deep:#70479c;--grape-dark:#4e3272;--sun:#ffd16b;--coral:#b33b43;--rule-soft:#e7f6f3;--pat-soft:#f1ebf8}
*{box-sizing:border-box}html{background:#e5f5f4}body{margin:0;min-height:100vh;color:var(--ink);font:18px/1.55 "Segoe UI",system-ui,sans-serif;background:radial-gradient(ellipse at top,#fafffa,#dff2f2 80%)}
.wrap{max-width:1320px;margin:auto;padding:28px 24px 46px}button{font:inherit;cursor:pointer}button:disabled{cursor:default}img{display:block;max-width:100%}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.2}h1{font-size:clamp(42px,6vw,66px);letter-spacing:-.045em}h2{font-size:34px;letter-spacing:-.02em}h3{font-size:23px}.center{text-align:center}.screen{display:none}.screen.active{display:block;animation:appear .3s ease-out}.panel{max-width:1080px;margin:auto;background:#fff;border:1px solid #cce4df;border-radius:28px;padding:38px;box-shadow:0 7px 0 #c7ded9}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.13em;color:#3c7179;margin-bottom:16px}.btn{border:0;border-radius:18px;padding:16px 30px;color:#fff;background:var(--teal-deep);font-weight:800;font-size:21px;box-shadow:0 6px 0 var(--teal-dark);transition:transform .1s,box-shadow .1s}.btn.sun{color:#4b3712;background:var(--sun);box-shadow:0 6px 0 #bb963d}.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--teal-dark)}button:focus-visible,summary:focus-visible{outline:4px solid #eea621;outline-offset:5px}.tiny,footer{font-size:15px;color:var(--muted);text-align:center;margin-top:24px}footer{font-size:14px}.section-title{font-size:27px;margin:42px 0 22px}
.cover{text-align:center;padding-top:18px}.cover .lede{font-size:23px;line-height:1.6;margin:24px auto 30px}.cover-scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:24px auto 40px;max-width:1130px}.cover-scenes figure{background:#fff;padding:8px 8px 15px;border:1px solid #cae2dc;border-radius:23px;box-shadow:0 6px 0 #c4ddd8;overflow:hidden}.cover-scenes img{aspect-ratio:3/2;width:100%;object-fit:cover;border-radius:17px}.cover-scenes figcaption{font-weight:750;margin-top:12px;font-size:19px}
.lesson-link{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;margin:36px 0}.lesson-link img{width:100%;height:230px;object-fit:contain}.lesson-link figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:12px}.lesson-link p{font-size:19px;line-height:1.65;margin-top:18px}.methods{display:grid;grid-template-columns:1fr 1fr;gap:24px}.methods article{border-radius:21px;padding:28px;display:grid;grid-template-columns:78px 1fr;column-gap:22px;align-items:center}.methods .rule{background:var(--rule-soft)}.methods .pattern{background:var(--pat-soft)}.methods img{width:78px;height:95px;object-fit:contain;grid-row:1/4}.methods p{margin-top:13px;line-height:1.6}.methods span{font-size:16px;margin-top:12px;color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.steps article{background:#f3f8f5;border-radius:20px;padding:24px}.step-art{height:110px;display:flex;justify-content:center;align-items:center;gap:20px;margin-bottom:24px}.step-art>img{width:90px;height:90px;object-fit:contain}.step-art .object-crop{width:150px}.step-art#how3>img{width:100%;height:110px;object-fit:cover;border-radius:12px}.steps h3{font-size:22px}.n{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--teal-deep);color:#fff;font-size:16px;margin-right:7px}.steps p{font-size:18px;line-height:1.6;margin-top:17px}.tip{border-radius:18px;background:#fff4dc;padding:23px 26px;margin:28px 0;line-height:1.7}
#s-game.active{display:grid;grid-template-columns:minmax(0,1fr) 315px;column-gap:24px;align-items:start}.hud{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.pill,.hintb{background:#fff;border-radius:999px;padding:8px 16px;font-weight:750;font-size:16px;border:0;box-shadow:0 3px 0 #bed8d4}.pill.found{background:#ffda87;color:#543f16}.spacer{flex:1}.icon-btn{background:#d0e9e4;color:#335c62;border:0;border-radius:13px;width:44px;height:43px;display:grid;place-items:center}.hintb.pulse{animation:throb .7s ease-in-out infinite alternate;background:#ffe6a7}.tabs{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tab{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border:1px solid #c2ddd6;border-radius:15px;background:#fff;color:var(--ink);font-weight:750;font-size:18px;box-shadow:0 4px 0 #c1d9d3}.tab .ct{padding:2px 8px;border-radius:999px;background:#eaf4ef;font-size:14px}.tab[aria-selected=true]{background:var(--teal-deep);color:white;border-color:var(--teal-deep);box-shadow:0 4px 0 var(--teal-dark)}.tab[aria-selected=true] .ct{background:#ffffff24}.tab.done .ct{background:#d4ede5;color:#19574f}.tab.flash{animation:throb .5s ease-in-out 4 alternate}.game-prompt{grid-column:1/-1;font-size:17px;margin:22px 0 14px;color:#345c64}
.scroller{grid-column:1;grid-row:4;border-radius:22px;overflow-x:auto;overflow-y:hidden;border:1px solid #b8d6cf;box-shadow:0 6px 0 #bdd6d1;scrollbar-color:#558d92 #deeeeb;scrollbar-width:thin}.scene{position:relative;width:100%;aspect-ratio:3/2}.room-art,#room{position:absolute;width:100%;height:100%;inset:0}.room-art{object-fit:cover}.thing{position:absolute;z-index:2;appearance:none;border:0;background:none;border-radius:13px;padding:0;color:transparent;touch-action:manipulation}.thing .art{position:absolute;inset:0;border-radius:13px;transition:box-shadow .15s,background .15s}.thing:hover .art{box-shadow:0 0 0 3px #fff9;background:#ffffff12}.thing:focus-visible{outline:4px solid #ffdf79;outline-offset:1px}.thing.selected .art{box-shadow:0 0 0 4px #ffcd43,0 0 18px #ffdf79;background:#ffd24b15}.thing.sparkle .art{animation:spark .5s ease-in-out 6 alternate}.notes{position:absolute;left:86%;top:3%;font-size:31px;font-weight:800;color:#79599d;animation:notes 2.4s ease-in-out infinite;pointer-events:none}.badge{position:absolute;z-index:3;transform:translate(-50%,-50%);width:32px;height:32px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 2px 5px #122f3a44;pointer-events:none;animation:badge .45s cubic-bezier(.2,1.6,.4,1) both}.badge.rule{background:#cae9e2}.badge.pattern{background:#e4d5f3}.badge img{width:23px;height:23px;object-fit:contain}.bubble{position:absolute;z-index:4;max-width:260px;text-align:center;transform:translate(-50%,-110%);background:#fff;border-radius:13px;padding:8px 12px;font-weight:700;font-size:16px;box-shadow:0 5px 0 #173f4433;pointer-events:none;animation:bub 1.8s ease-out forwards}.swipe{display:none}
.sheet{grid-column:2;grid-row:4;background:#fff;border-radius:23px;padding:24px;border:1px solid #c9e0d8;box-shadow:0 6px 0 #c1d9d2;scroll-margin:24px;min-height:200px}.sheet:focus{outline:none}.sheet .idle{font-size:20px;line-height:1.6;color:#486870;padding:20px 2px;text-align:center}.ask{display:flex;gap:16px;align-items:center;margin-bottom:23px}.object-crop{display:block;position:relative;overflow:hidden;border-radius:12px;background:#edf6f1;flex:none;max-width:100%}.object-crop img{position:absolute;max-width:none;height:auto}.ask .object-crop{width:86px;max-height:120px}.object-name{font-weight:750;font-size:18px;line-height:1.4}.task-label{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}.question{font-size:21px;font-weight:650;line-height:1.55}.choose-label{font-size:16px;margin:24px 0 14px;color:var(--muted)}.picks{display:grid;gap:17px}.pick{border:0;color:#fff;border-radius:17px;padding:17px 14px;display:flex;align-items:center;text-align:left;gap:13px;min-height:90px;transition:transform .1s}.pick:active{transform:translateY(3px)}.pick.rule{background:var(--teal-deep);box-shadow:0 5px 0 var(--teal-dark)}.pick.pattern{background:var(--grape-deep);box-shadow:0 5px 0 var(--grape-dark)}.pick img{width:42px;height:48px;object-fit:contain;flex:none}.pick b{font-size:19px;line-height:1.3;display:block}.pick small{display:block;font-size:14px;line-height:1.5;margin-top:6px;font-weight:500}.answer-object{display:flex;align-items:center;gap:16px;font-weight:750;margin-bottom:24px}.answer-object .object-crop{width:86px;max-height:125px}.verdict{display:flex;gap:16px;align-items:center;padding:18px 15px;border-radius:16px}.verdict.rule{background:var(--rule-soft)}.verdict.pattern{background:var(--pat-soft)}.verdict img{width:46px;height:52px;object-fit:contain}.verdict h3{font-size:21px;margin-top:7px}.answer-status{font-weight:750;font-size:15px}.explanation{font-size:19px;line-height:1.7;margin-top:22px}
.stars{display:flex;justify-content:center;gap:12px;margin:25px 0 18px}.rating-star{font-size:52px;line-height:1;color:#dfe8e4}.rating-star.on{color:#efb334;text-shadow:0 3px 0 #cb982a;animation:starpop .5s cubic-bezier(.2,1.6,.4,1) both}.rating-star:nth-child(2){animation-delay:.18s}.rating-star:nth-child(3){animation-delay:.36s}.statrow{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:24px 0}.stat{padding:16px 25px;border-radius:18px;background:#f2f8f3;text-align:center;min-width:185px}.stat b{display:block;font-size:33px}.stat span{font-size:15px;color:var(--muted)}.best{text-align:center;color:var(--muted);margin-bottom:30px;font-weight:600}.best.new{color:var(--teal-deep)}.sum{display:grid;grid-template-columns:1fr 1fr;gap:24px}.sum article{padding:25px;border-radius:19px;display:flex;align-items:center;gap:22px}.sum .rule{background:var(--rule-soft)}.sum .pattern{background:var(--pat-soft)}.sum img{width:78px;height:82px;object-fit:contain}.sum b{font-size:22px;line-height:1.4;display:block}.sum p{margin-top:12px;font-size:17px}.takeaway{margin-top:28px;padding:23px 27px;border-radius:18px;background:#fff4dd;font-weight:650;font-size:20px;line-height:1.6}.review-note{font-size:17px;color:var(--muted);margin-bottom:24px}.timeline{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.review-card{border:1px solid #cee2dc;border-radius:18px;background:#fbfdfb;overflow:hidden}.review-card summary{display:flex;align-items:center;gap:16px;cursor:pointer;padding:19px;list-style:none}.review-card summary::-webkit-details-marker{display:none}.review-card .object-crop{width:71px;max-height:95px}.review-card summary>span:nth-child(2){flex:1;min-width:0}.review-card small{text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted)}.review-card b{display:block;font-size:19px;text-transform:capitalize;line-height:1.4;margin:4px 0 9px}.answer-tag{display:inline-block;border-radius:8px;padding:3px 8px;background:#dfefea;font-size:13px;font-weight:650}.review-card.pattern .answer-tag{background:#eae1f2}.review-status{font-size:13px;color:var(--muted);font-weight:700}.review-body{padding:0 23px 24px;font-size:18px;line-height:1.65}.review-body p{margin-top:18px}.correction{color:#943b43;font-size:16px}.vocab{display:grid;grid-template-columns:1fr 1fr;gap:24px}.vocab article{padding:27px;background:#f1f7f3;border-radius:20px}.vocab img{height:78px;width:85px;object-fit:contain;margin-bottom:22px}.vocab p{margin-top:17px;font-size:18px;line-height:1.7}
@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes throb{to{transform:scale(1.045)}}@keyframes spark{from{box-shadow:0 0 0 3px #ffdf75,0 0 8px #fff}to{box-shadow:0 0 0 5px #ffbe31,0 0 22px 6px #fff5a9;background:#ffe87a2e}}@keyframes notes{50%{transform:translateY(-6px)}}@keyframes badge{from{opacity:0;scale:.15}to{opacity:1;scale:1}}@keyframes bub{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}@keyframes starpop{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
@media(max-width:1000px){.wrap{padding:24px 18px 40px}#s-game.active{grid-template-columns:minmax(0,1fr) 295px;gap:18px}.sheet{padding:21px}.question{font-size:20px}.cover-scenes{gap:17px}.panel{padding:30px}.methods article{padding:22px;column-gap:16px;grid-template-columns:65px 1fr}.methods img{width:65px}.timeline{grid-template-columns:1fr}}
@media(max-width:800px){#s-game.active{display:block}.hud{position:sticky;top:0;z-index:10;background:#e4f4f2f5;padding:10px;border:1px solid #c5dfd8;border-radius:16px;margin-bottom:16px;backdrop-filter:blur(8px)}.scene{width:720px}.scroller{max-width:100%}.swipe{display:block;text-align:center;color:var(--muted);font-size:14px;margin:14px 0 20px}.sheet{margin-top:20px;padding:26px;scroll-margin:95px}.ask{margin-bottom:20px}.ask .object-crop{width:105px;max-height:120px}.picks{grid-template-columns:1fr 1fr}.sheet .idle{padding:8px}.cover-scenes figcaption{font-size:16px}.lesson-link{grid-template-columns:1fr;gap:27px}.lesson-link img{height:230px}.methods{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.steps article{display:grid;grid-template-columns:140px 1fr;column-gap:25px}.step-art{grid-row:1/3;margin:0}.steps p{margin-top:12px}.sum{grid-template-columns:1fr}.game-prompt{margin:22px 0 14px}}
@media(max-width:500px){.wrap{padding:18px 12px 36px}.panel{padding:27px 20px;border-radius:23px}h2{font-size:29px}.eyebrow{font-size:11px}.cover .lede{font-size:20px;margin:22px auto 26px}.cover-scenes{grid-template-columns:1fr;max-width:340px;gap:18px;margin-bottom:30px}.cover-scenes figure{display:grid;grid-template-columns:148px 1fr;align-items:center;padding:7px;gap:10px;border-radius:17px}.cover-scenes img{border-radius:12px}.cover-scenes figcaption{margin:0;font-size:18px}.steps article{display:block;padding:25px}.step-art{margin-bottom:22px}.methods article{display:block;padding:25px}.methods img{height:75px;width:75px;margin-bottom:22px}.methods h3{font-size:23px}.methods span{display:block}.lesson-link p{font-size:18px}.section-title{font-size:25px}.tip{padding:23px;font-size:18px}.tabs{gap:9px}.tab{flex-direction:column;gap:5px;font-size:15px;padding:10px 4px}.tab .ct{font-size:13px}.pill,.hintb{font-size:13px;padding:8px 10px}.hud{gap:7px;padding:8px}.icon-btn{width:35px;height:37px}.spacer{display:none}.hud .icon-btn{margin-left:auto}.game-prompt{font-size:16px}.sheet{padding:24px 21px}.question{font-size:21px}.picks{grid-template-columns:1fr;gap:18px}.pick{padding:18px;min-height:94px}.choose-label{margin-top:24px}.sheet .idle{font-size:19px}.sum article{padding:24px;gap:18px}.sum img{width:62px;height:75px}.sum b{font-size:21px}.takeaway{font-size:19px;padding:24px}.vocab{grid-template-columns:1fr}.review-card summary{padding:18px;gap:13px}.review-card .object-crop{width:61px}.review-status{font-size:12px}.statrow{gap:16px}.stat{min-width:0;flex:1;padding:15px 10px}.stat b{font-size:28px}.stat span{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hud{position:sticky;top:0;z-index:10;padding:10px;background:#e4f4f2f5;border:1px solid #c5dfd8;border-radius:16px;backdrop-filter:blur(8px)}
.review-card summary::after{content:'+';font-size:23px;color:#527c7e;flex:none}.review-card[open] summary::after{content:'−'}
.review-body b{display:inline;font-size:inherit;text-transform:none;margin:0;line-height:inherit}
.thing{min-width:44px;min-height:44px}
@media(min-width:801px){#s-game>.hud,#s-game>.tabs,#s-game>.game-prompt{grid-column:1}#s-game>.sheet{grid-column:2;grid-row:1/5;position:sticky;top:24px}}