:root{--ink:#1f1a17;--red:#d0312d;--blue:#2a52be;--green:#2f8a3a;--yellow:#ffe35c;--sticky:#fff27a;--paper:#fffdf6;--board:#fbfbf9;--tray:#e7e3da;--track:#e2ddd2;--dash:#b9b2a3;--navy:#1c2340;--navy-deep:#0c0f1e;--pale:#c9dcef;--muted:#6b6560;--faint:#b0a898;--wobbly:255px 15px 225px 15px / 15px 225px 15px 255px;--wobbly-2:15px 255px 15px 225px / 225px 15px 255px 15px;--tile-r:6px 9px 6px 8px;color:var(--ink);background:var(--tray);font-family:Kalam,Comic Sans MS,cursive}*{box-sizing:border-box}body{background:var(--tray);min-height:100dvh;margin:0}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.marker{color:var(--red);letter-spacing:.4px;font-family:Permanent Marker,Kalam,cursive;font-weight:400}.muted{color:var(--muted)}.small{font-size:.88rem;line-height:1.3}.center{text-align:center}.byline{color:var(--muted)}.btn{border:2.5px solid var(--ink);background:#fff;padding:10px 14px;font-weight:700;transition:transform 80ms}.btn:active{transform:translateY(2px)}.btn.round{border-radius:26px;min-height:52px;font-size:1.1rem}.btn.dark{background:var(--ink);color:#fff}.btn.red,.btn.primary{background:var(--red);color:#fff;box-shadow:2px 2px 0 var(--ink)}.btn.wobbly{border-radius:var(--wobbly-2)}.link{color:var(--muted);background:0 0;border:none;padding:0}.home{background:var(--board);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:18px;max-width:440px;min-height:100dvh;margin:0 auto;padding:28px 26px;display:flex}.app.wide .home{max-width:none;padding-inline:calc(50vw - 210px)}.logo-tiles{gap:6px;display:flex}.logo-tile{border:2.5px solid var(--ink);border-radius:var(--tile-r);place-items:center;width:50px;height:50px;font-family:Permanent Marker,cursive;font-size:1.6rem;animation:.5s ease-out both flip-in;display:grid}.home-title{flex-direction:column;line-height:1.05;display:flex}.home-title h1{margin:0;font-size:2rem}.home-title .byline{margin-top:6px}.home-pitch{margin:0;font-size:1.2rem;line-height:1.3}.home-buttons{flex-direction:column;gap:10px;width:100%;display:flex}.manual-btn{background:var(--sticky);box-shadow:2px 2px 0 var(--ink);justify-content:center;align-items:center;gap:8px;font-weight:400;display:flex;min-height:44px!important;font-size:1rem!important}.book-icon{background:var(--navy);border:2px solid var(--ink);border-radius:2px 4px 4px 2px;width:14px;height:18px}.stat-row{border-top:2px solid var(--ink);text-align:center;grid-template-columns:repeat(4,1fr);width:100%;padding-top:12px;display:grid}.stat-row b{font-size:1.5rem;line-height:1.1;display:block}.stat-row span{color:var(--muted);font-size:.8rem}.countdown{color:var(--muted);text-align:center}.countdown b{color:var(--ink)}.manual{flex-direction:column;gap:16px;max-width:440px;min-height:100dvh;margin:0 auto;padding:24px 20px;display:flex}.app.wide .manual{min-height:min(844px,100dvh);max-height:900px;padding-block:32px}.manual-top{color:var(--muted);justify-content:space-between;display:flex}.cover{background:var(--navy);border:3px solid var(--ink);box-shadow:inset 14px 0 0 var(--navy-deep), 4px 6px 0 #0000002e;border-radius:6px 14px 14px 6px;flex-direction:column;flex:1;gap:18px;padding:36px 24px 24px 38px;display:flex;position:relative}.cover-label{background:var(--paper);border:2.5px solid var(--ink);flex-direction:column;margin-right:40px;padding:14px 16px;line-height:1.05;display:flex;transform:rotate(-1.5deg)}.cover-label .marker{font-size:1.9rem}.cover-label .byline{margin-top:6px}.cover-scrawl{color:var(--pale);line-height:1.25;transform:rotate(-2deg)}.cover-ac{opacity:.92;align-self:flex-end;width:110px}.cover-ac svg{width:100%;display:block}.ribbon{background:var(--red);border:2.5px solid var(--ink);clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);border-top:none;width:34px;height:120px;position:absolute;top:-3px;right:22px}.cover .btn{box-shadow:2px 2px 0 var(--navy-deep);margin-top:auto;padding:12px;font-size:1.1rem}.page{border:2px solid #00000014;border-radius:10px;flex-direction:column;flex:1;gap:10px;padding:22px 20px 20px 48px;line-height:1.3;display:flex;box-shadow:0 2px 6px #00000014}.lined{background:linear-gradient(90deg, transparent 34px, #d0312d8c 34px 36px, transparent 36px), repeating-linear-gradient(to bottom, var(--paper) 0 27px, var(--pale) 27px 28px)}.page h2{margin:0;font-size:1.4rem}.page ol{flex-direction:column;gap:6px;margin:4px 0;padding-left:1.2em;font-size:.97rem;line-height:1.25;display:flex}.scrawl{color:var(--blue);line-height:1.25;transform:rotate(-1deg)}.page-buttons{gap:8px;margin-top:auto;display:flex}.page-buttons .btn:first-child{flex:1}.page-buttons .btn:last-child{flex:2}.page-turn{transform-origin:0;animation:.35s ease-out page-turn}.legend-examples{flex-direction:column;gap:12px;display:flex}.legend-ex{flex-direction:column;gap:4px;font-size:.92rem;display:flex}.tile-row{perspective:400px;grid-template-columns:1.1fr 1fr 1.1fr;gap:6px;display:grid}.tile{border:2.5px solid var(--ink);border-radius:var(--tile-r);overflow-wrap:anywhere;background:#fff;flex-direction:column;justify-content:center;align-items:flex-start;min-height:46px;padding:4px 8px;font-size:.82rem;line-height:1.12;display:flex;position:relative}.tile:nth-child(2){border-radius:8px 6px 9px}.tile:nth-child(3){border-radius:6px 8px 6px 9px}.tile.inf{font-size:.78rem}.tile.exp{background:var(--paper)}.tile.exp .ct{color:var(--red);font-size:.72rem}.tile.exp .missed{background:var(--red);color:#fff;border:2px solid var(--ink);border-radius:10px;padding:0 5px;font-size:.68rem;line-height:1.3;position:absolute;top:-8px;right:-6px}.tile.exp.active{border:3px solid var(--red);box-shadow:2px 2px 0 var(--red);background:#fff;font-size:.9rem;font-weight:700}.tile.exp.ask-exp{color:var(--red);align-items:center;font-family:Permanent Marker,cursive;font-size:1.3rem}.tile.blank{border:2.5px dashed var(--dash);background:0 0}.tile.blank.label{color:var(--faint)}.tile.asking{background:var(--sticky);border-width:3px;align-items:center;font-family:Permanent Marker,cursive;font-size:1.3rem;animation:1.6s ease-in-out infinite asking;transform:rotateX(38deg);box-shadow:0 6px #0000001f}.tile.asking s{opacity:.7;font-family:Kalam,cursive;font-size:.75rem}.tone-w{background:#fff}.tone-g{background:var(--green);color:#fff;font-weight:700}.tone-y{background:var(--yellow)}.tone-r{background:var(--red);color:#fff}.tile.tone-r>span:last-child{font-weight:700}.tile-cut{opacity:.8;flex-direction:column;font-size:.7rem;display:flex}.tile.flip{animation:.55s ease-out both flip-in}.tile-row.small{gap:4px}.tile-row.small .tile{border-width:2px;min-height:38px;padding:3px 5px;font-size:.72rem;line-height:1.05}.tile-row.ghost{opacity:.6}.formula-row{grid-template-columns:1.1fr 2.1fr}.formula-row.ghost{grid-template-columns:1fr}.formula-row .tile:not(.exp){font-size:1.05rem}.tile-sheet{flex-direction:column;gap:6px;display:flex}.tile-head{color:var(--muted);text-transform:uppercase;letter-spacing:1px;grid-template-columns:1.1fr 1fr 1.1fr;gap:6px;font-size:.78rem;display:grid}.tile-section{flex-direction:column;gap:6px;display:flex}.sec-title{margin-top:4px;font-size:.92rem}.swatch{border:2px solid var(--ink);border-radius:4px;flex:none;width:18px;height:18px}.legend-key{border:2.5px solid var(--ink);border-radius:var(--wobbly);background:#fff;flex-direction:column;gap:6px;padding:10px 14px;font-size:.92rem;display:flex}.legend-key div{align-items:center;gap:8px;display:flex}.lens{background:var(--navy);border:2.5px solid var(--ink);border-radius:12px;flex-direction:column;align-items:center;gap:6px;padding:10px;display:flex;position:relative;overflow:hidden}.lens-stage{flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;max-width:240px;height:260px;display:flex}.lab-svg{flex:1;max-width:100%;min-height:0;max-height:100%;display:block;overflow:visible}.lab-label{fill:var(--pale);font-family:Kalam,cursive;font-size:11px}.lab-smell{color:var(--pale);font-size:.85rem;animation:.5s 1.6s both fade}.lens-caption{color:#e9eef5;text-align:center;font-size:.9rem}.replay{color:var(--pale);background:0 0;border:none;font-size:.8rem;position:absolute;bottom:6px;right:8px}.avatar{flex:none}.avatar svg{width:100%;height:100%;display:block;overflow:hidden}.teacher-says{align-items:center;gap:10px;animation:.35s ease-out fade;display:flex}.teacher-says .avatar{width:46px;height:50px}.teacher-says .says{flex-direction:column;flex:1;line-height:1.2;display:flex}.teacher-says .quote{color:var(--muted);font-size:.92rem}.bubble{border:2.5px solid var(--ink);border-radius:var(--wobbly-2);background:#fff;padding:6px 10px;line-height:1.2;position:relative}.mood-shouting{animation:.35s ease-in-out 2 shake}.mood-shocked{animation:.3s ease-out pop}.ac-note{align-items:flex-start;gap:8px;display:flex}.ac-note .avatar{width:46px;height:48px}.sticky{background:var(--sticky);padding:8px 10px 6px;font-size:.95rem;line-height:1.25;animation:.35s ease-out stick;transform:rotate(2deg);box-shadow:2px 4px #00000021}.ac-note.hint .sticky{background:var(--yellow);outline:2px dashed var(--blue)}.sticky .sig{text-align:right;color:var(--blue);font-size:.8rem;display:block}.keyboard{flex-direction:column;gap:8px;display:flex}.tabs{gap:4px;font-size:.85rem;display:flex}.tabs span{color:var(--muted);border-radius:6px;padding:2px 10px}.tabs span.on{background:var(--ink);color:#fff}.tabs span.past{color:var(--faint)}.keys{gap:5px;display:grid}.keys.chain{grid-template-columns:repeat(4,1fr)}.keys.confirm{grid-template-columns:repeat(5,1fr)}.keys-label{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:.72rem}.key{border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);background:#fff;border-radius:7px;line-height:1.08;transition:transform 60ms,box-shadow 60ms}.key:active:not(:disabled){box-shadow:0 0 0 var(--ink);transform:translateY(3px)}.key.reagent{min-height:50px;padding:3px;font-size:.78rem}.key.reagent.confirm{background:var(--paper);min-height:44px;font-size:.72rem}.key.done{border-color:var(--dash);color:var(--muted);box-shadow:none;background:#d9d4c9}.key.crossed{border-color:var(--red);color:var(--red);box-shadow:none;background:#f3d6d4;text-decoration:line-through}.opts{grid-template-columns:1fr 1fr;gap:6px;display:grid}.key.opt{min-height:48px;padding:4px 8px;font-size:.82rem;font-weight:700}.opts.big{gap:8px}.opts.big .key.opt{min-height:60px;box-shadow:0 4px 0 var(--ink);border-width:2.5px;border-radius:8px;font-size:1.15rem}.ask{border:2px dashed var(--blue);min-height:38px;color:var(--blue);background:#fff;border-radius:8px;padding:4px 8px;font-size:.88rem}.ask:disabled{opacity:.55}.over-keys{grid-template-columns:1fr 1fr;gap:8px;display:grid}.board-page{background:var(--board);min-height:100dvh}.board-head{border-bottom:2.5px solid var(--ink);grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 22px;display:grid}.head-left,.head-right{align-items:center;gap:6px;display:flex}.head-right{justify-content:flex-end}.pill{border:2.5px solid var(--ink);border-radius:var(--wobbly);background:#fff;padding:3px 12px;font-weight:700}.pill.on{background:var(--ink);color:#fff}.pill.square{width:38px;padding-inline:0}.pill.ghost{border-style:dashed;font-weight:400}.title-btn{background:0 0;border:none;flex-direction:column;align-items:center;line-height:1;display:flex}.title-btn h1{white-space:nowrap;margin:0;font-size:1.7rem}.title-btn .byline{margin-top:3px;font-size:.9rem}.board-grid{grid-template-columns:minmax(240px,300px) minmax(0,600px) minmax(220px,300px);justify-content:center;gap:28px;padding:18px 22px 32px;display:grid}.board-left,.board-right{flex-direction:column;align-self:start;gap:14px;display:flex;position:sticky;top:12px}.board-center{flex-direction:column;gap:12px;min-width:0;display:flex}.next-note{background:var(--sticky);flex-direction:column;gap:2px;padding:10px 14px;line-height:1.25;display:flex;transform:rotate(-.8deg);box-shadow:2px 3px #0000001f}.next-note b{font-size:1.05rem}.status-line{align-items:center;gap:10px;display:flex}.status-line .where{color:var(--muted);white-space:nowrap;font-size:.9rem}.progress{flex:1;gap:4px;display:flex}.seg{background:linear-gradient(90deg, var(--red) var(--fill), var(--track) var(--fill));border-radius:4px;height:8px;transition:background .4s}.seg.done{background:var(--green)}.strike-dots{gap:3px;display:flex}.strike-dots span{border:2px solid var(--ink);background:#fff;border-radius:50% 45% 50% 40%;width:16px;height:16px}.strike-dots span.used{background:var(--red);animation:.3s ease-out pop}.board-center .keyboard{border-top:2.5px solid var(--ink);margin-top:6px;padding-top:12px}.board-center .key.reagent{min-height:52px;font-size:.85rem}.board-center .keys.confirm{grid-template-columns:repeat(5,1fr)}.board-center .key.opt{font-size:.9rem}.board-center .opts.big .key.opt{min-height:58px}.board-left .lens-stage{height:280px}.board-left .bubble{flex:1}.app.narrow .game-wrap{max-width:520px;margin:0 auto}.phone-page{background:var(--board);flex-direction:column;height:100dvh;display:flex}.phone-head{border-bottom:2px solid var(--ink);justify-content:space-between;align-items:center;padding:10px 12px 6px;display:flex}.phone-head button{background:0 0;border:none;min-width:32px;padding:2px 6px;font-weight:700}.phone-head .head-left{gap:2px}.phone-head .marker{font-size:1.15rem}.phone-status{white-space:nowrap;align-items:center;gap:8px;padding:8px 12px 0;font-size:.78rem;display:flex}.phone-status .seg{height:7px}.phone-body{flex-direction:column;flex:1;gap:8px;padding:8px 12px 12px;display:flex;overflow-y:auto}.phone-body .tile{border-width:2px;min-height:44px;padding:2px 6px;font-size:.8rem}.phone-body .tile-row{gap:4px}.phone-body .tile.exp.active,.phone-body .tile.asking{border-width:3px}.phone-body .recent .tile{min-height:34px;font-size:.68rem;line-height:1.05}.recent{opacity:.6;flex-direction:column;gap:4px;display:flex}.recent.all{opacity:.85}.sheet-toggle{color:var(--blue);background:0 0;border:none;align-self:center;padding:0;font-size:.85rem}.phone-body .lens{flex:none;padding:8px}.phone-body .lens-stage{height:clamp(190px,32dvh,290px)}.phone-body .teacher-says .avatar{width:38px;height:42px}.phone-body .ac-note .avatar{width:38px;height:40px}.phone-body .sticky{font-size:.88rem}.phone-page .keyboard{background:var(--tray);border-top:2.5px solid var(--ink);padding:10px 8px calc(14px + env(safe-area-inset-bottom));gap:6px;max-height:52dvh;overflow-y:auto}.phone-page .tabs{font-size:.78rem}.phone-page .tabs span{border-radius:5px;padding:1px 8px}.phone-page .ask{min-height:36px;font-size:.85rem}@media (width<=380px){.keys.chain{grid-template-columns:repeat(3,1fr)}.keys.confirm{grid-template-columns:repeat(4,1fr)}}.modal-back{z-index:10;background:#1f1a1773;place-items:center;padding:16px;animation:.2s ease-out fade;display:grid;position:fixed;inset:0}.modal{background:var(--board);border:2.5px solid var(--ink);border-radius:18px;flex-direction:column;gap:12px;width:min(420px,100%);max-height:calc(100dvh - 32px);padding:20px;animation:.25s ease-out pop;display:flex;overflow-y:auto}.app.narrow .modal-back{padding:0}.app.narrow .modal{border:none;border-radius:0;width:100%;max-width:520px;height:100dvh;max-height:none;padding:22px 20px}.modal-head{justify-content:space-between;align-items:baseline;display:flex}.modal-head h2{margin:0;font-size:1.4rem}.close{background:0 0;border:none;font-size:1.2rem}.share-card{background:var(--ink);color:#fff;border-radius:14px;flex-direction:column;gap:10px;padding:16px;display:flex}.share-card .pitch{opacity:.85;font-size:.92rem}.share-title{justify-content:space-between;align-items:baseline;display:flex}.share-title .score{color:var(--sticky);font-size:2.2rem;line-height:1}.share-grid{flex-direction:column;gap:5px;display:flex}.share-grid>div{align-items:center;gap:6px;display:flex}.share-grid .lbl{opacity:.8;width:4.2em;font-size:.85rem}.mini{border-radius:5px;width:28px;height:28px;animation:.45s ease-out both flip-in}.mini.tone-w{background:var(--board)}.verdict{align-items:center;gap:10px;line-height:1.2;display:flex}.verdict .avatar{width:44px;height:48px}.dist{flex-direction:column;gap:3px;display:flex}.dist-row{align-items:center;gap:6px;display:flex}.dist-row>span{text-align:center;width:1em;font-weight:700}.dist .bar{color:#fff;text-align:right;background:#8f887b;border-radius:3px;padding:0 6px;font-size:.85rem}.dist .bar.me{background:var(--green)}.dist-note{color:var(--muted);margin:2px 0 0;font-size:.8rem}@keyframes flip-in{0%{opacity:.4;transform:rotateX(90deg)}60%{opacity:1;transform:rotateX(-12deg)}to{transform:rotateX(0)}}@keyframes asking{0%,to{transform:rotateX(38deg)}50%{transform:rotateX(28deg)}}@keyframes page-turn{0%{opacity:.4;transform:perspective(900px)rotateY(-14deg)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:.4;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)rotate(-2deg)}75%{transform:translate(3px)rotate(2deg)}}@keyframes stick{0%{opacity:0;transform:rotate(8deg)translateY(-10px)}}@keyframes lab-dropper{0%{opacity:0;transform:translateY(-46px)}12%,52%{opacity:1;transform:translateY(0)}66%,to{opacity:0;transform:translateY(-46px)}}@keyframes lab-drip{0%,14%{opacity:0;transform:translateY(0)}15%{opacity:1}26%{opacity:1;transform:translateY(84px)}28%,to{opacity:0;transform:translateY(84px)}}@keyframes lab-settle{0%,34%{opacity:0;transform:translateY(-46px)}58%,92%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(0)}}@keyframes lab-show{0%,34%{opacity:0}46%,92%{opacity:1}to{opacity:0}}@keyframes lab-dissolve{0%,30%{opacity:1;transform:translateY(0)}60%,92%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes lab-bub{0%{opacity:0;transform:translateY(0)}15%{opacity:1}to{opacity:0;transform:translateY(-96px)}}@keyframes lab-fume{0%{opacity:0;transform:translateY(8px)scale(.5)}30%{opacity:.95}to{transform:translate(var(--dx,0px), -56px) scale(1.6);opacity:0}}@keyframes lab-flick{0%{transform:scaleY(1)skew(0)}to{transform:scaleY(1.07)skew(2.5deg)}}@keyframes lab-wire{0%,6%{transform:translate(80px,-60px)}24%,76%{transform:translate(0)}94%,to{transform:translate(80px,-60px)}}@keyframes lab-tint{0%,26%{opacity:0}36%,74%{opacity:.95}86%,to{opacity:0}}@keyframes lab-spark{0%,28%{opacity:0;transform:translate(0)}34%{opacity:1}48%,to{opacity:0;transform:translate(var(--dx,6px), -18px)}}@keyframes lab-shake{0%,to{transform:rotate(0)}50%{transform:rotate(1.2deg)}}.lab-dropper{animation:5s ease-in-out infinite lab-dropper}.lab-drip{opacity:0;animation:5s ease-in infinite lab-drip}.lab-settle{opacity:0;animation:5s ease-out infinite lab-settle}.lab-show{opacity:0;animation:5s ease-out infinite lab-show}.lab-dissolve{animation:5s ease-in-out infinite lab-dissolve}.lab-bub{opacity:0;animation:1s ease-in infinite lab-bub}.lab-fume{opacity:0;transform-box:fill-box;transform-origin:50%;animation:2.4s ease-out infinite lab-fume}.lab-flick{transform-box:fill-box;transform-origin:50% 100%;animation:.22s ease-in-out infinite alternate lab-flick}.lab-wire{animation:4.5s ease-in-out infinite lab-wire}.lab-tint{opacity:0;animation:4.5s ease-in-out infinite lab-tint}.lab-spark{opacity:0;animation:4.5s ease-out infinite lab-spark}.lab-shake{transform-box:fill-box;transform-origin:50% 100%;animation:.5s ease-in-out infinite lab-shake}.lab-pop{transform-box:fill-box;transform-origin:50% 100%;animation:.4s ease-out pop}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}.lab-show,.lab-settle,.lab-tint,.lab-bub,.lab-fume,.lab-spark{opacity:1;animation:none!important}.lab-dropper,.lab-drip,.lab-dissolve{opacity:0;animation:none!important}.lab-wire,.tile.asking{animation:none!important}}.feedback{flex-direction:column;gap:12px;display:flex}.feedback-kind{flex-wrap:wrap;gap:8px;display:flex}.feedback label{flex-direction:column;gap:4px;font-weight:700;display:flex}.feedback textarea,.feedback input:not([type=checkbox]){font:inherit;border:2px solid var(--ink);box-sizing:border-box;background:#fff;border-radius:10px;width:100%;padding:8px 10px;font-weight:400}.feedback textarea{resize:vertical}.feedback .feedback-check{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400}.feedback-check input{accent-color:var(--ink);margin-top:5px}.feedback-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.app.narrow .feedback-row{grid-template-columns:1fr}.feedback .honeypot{width:1px;height:1px;position:absolute;left:-9999px}.feedback-error{color:var(--red);margin:0}.feedback-link{margin-top:-4px;text-decoration:underline}