:root{color-scheme:light;--paper:#f6edd7;--ink:#263b49;--muted:#667567;--yellow:#f5ce4c;--teal:#167e8b;--red:#e85b42}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:#c9a46b url('/assets/paper/tabletop-landscape.webp') center/cover fixed;font:600 17px/1.5 'Avenir Next','Trebuchet MS',sans-serif}button,a{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button,a.primary{cursor:pointer}a{color:inherit}header{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--paper);padding:20px max(24px,calc((100vw - 1120px)/2));border-bottom:6px solid var(--red)}.brand{font-weight:1000;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}.brand i{display:inline-block;transform:rotate(-3deg);color:var(--ink);background:var(--yellow);padding:3px 9px;font-style:normal}#language{font-size:14px;text-underline-offset:4px;margin-left:20px}.landing-paper{position:relative;max-width:1120px;margin:52px auto;padding:54px 48px 24px;background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:10px 10px 0 var(--red),17px 18px 0 var(--ink);display:grid;grid-template-columns:1.05fr 1fr;gap:30px 38px}.landing-paper:before{content:'';position:absolute;left:-15px;top:1px;width:115px;height:32px;background:#edce83b0;transform:rotate(-32deg);border:1px solid #bda66b70}.tape{display:inline-block;letter-spacing:.12em;font-size:12px;font-weight:850;color:var(--teal)}h1{font:850 clamp(32px,4vw,49px)/1.13 Georgia,'Times New Roman',serif;letter-spacing:-.025em;margin:22px 0;white-space:pre-line}.intro{color:var(--muted);font-size:18px;max-width:410px}.actions{display:flex;flex-wrap:wrap;gap:15px;margin-top:26px;align-items:center}.primary{display:inline-block;text-align:center;background:var(--yellow);border:3px solid var(--ink);border-radius:7px;box-shadow:4px 5px 0 var(--ink);padding:15px 25px;font-size:20px;font-weight:950;text-decoration:none;transition:transform .12s,box-shadow .12s}.primary:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 var(--ink)}.primary:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--ink)}.primary:disabled{opacity:.55;cursor:wait}.quiet{border:0;background:transparent;text-decoration:underline;text-underline-offset:5px;color:var(--muted);padding:8px 0;font-size:14px}.fine{font-size:13px;color:var(--muted);margin:15px 0 0}#who{overflow-wrap:anywhere}#msg{border-left:4px solid var(--red);background:#fff7df;padding:12px 15px;font-size:15px;margin-top:18px}.preview{align-self:center;text-align:center;position:relative;padding:35px 10px 22px;background:#fff9e9;border:2px solid #b4b296;border-radius:8px;box-shadow:5px 6px 0 #c9c2a7;transform:rotate(1deg)}.preview-stamp{display:inline-block;padding:5px 10px;color:var(--teal);border:2px solid var(--teal);font-size:11px;letter-spacing:.09em;transform:rotate(-3deg);margin-bottom:25px}.equation{display:flex;align-items:center;justify-content:center;gap:10px;font:750 clamp(28px,3.2vw,42px)/1 Georgia,serif}.math-card{display:inline-grid;place-items:center;min-width:52px;height:72px;padding:8px;border:3px solid var(--ink);border-radius:7px;background:#fffaed;box-shadow:4px 5px 0 #b4b3a6}.number{background:var(--yellow);transform:rotate(-3deg)}.variable{background:#d8e6de}.connector{font-size:40px;color:var(--red);line-height:1.2}.result{font:800 48px/1.4 Georgia,serif}.result span{text-shadow:2px 3px var(--yellow)}.result b{display:inline-block;font:850 24px sans-serif;color:var(--teal);border:2px solid;border-radius:50%;width:32px;height:32px;margin-left:18px;transform:rotate(-12deg)}.preview p{font-size:14px;color:var(--muted);margin:16px 0 0}.play-notes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px dashed #b6a779;gap:20px;padding:18px 0}.play-notes p{margin:0;display:flex;gap:12px;align-items:center;font-size:15px}.play-notes b{color:var(--teal);font:800 13px monospace;background:#dfebdf;padding:7px;transform:rotate(-3deg)}.storage-note{grid-column:1/-1;font-size:14px;line-height:1.6;color:var(--muted)}summary{cursor:pointer;color:var(--ink);font-weight:850}.storage-note p{max-width:850px}.device-reminder{grid-column:1/-1;font-size:12px;color:var(--muted);margin:-10px 0 0}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px dashed var(--teal);outline-offset:5px}[hidden]{display:none!important}@media(max-width:1160px){.landing-paper{margin:40px 28px 45px;padding:40px 30px 24px}}@media(max-width:720px){header{padding:16px 22px}.landing-paper{grid-template-columns:1fr;margin:30px 20px 40px;padding:32px 24px 23px;gap:26px}.welcome{max-width:500px}h1{font-size:39px}.preview{max-width:420px;width:100%;justify-self:center;padding-block:24px 20px}.play-notes{grid-template-columns:1fr;gap:12px}.equation{font-size:36px}.math-card{min-width:50px;height:65px}.intro{font-size:17px}.primary{width:100%;font-size:19px}.device-reminder{margin:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}html[lang=ko] h1{font-family:'Avenir Next','Trebuchet MS',sans-serif;font-size:clamp(30px,3.5vw,42px);line-height:1.3;word-break:keep-all}