:root{color-scheme:dark;--navy:#062f48;--deep:#052238;--water:#087a9b;--foam:#eafff7;--mint:#73f3ce;--yellow:#ffe77d;--coral:#ff8f82;--line:#dffeff24;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{overscroll-behavior:none}body{margin:0;min-height:100svh;overflow-x:hidden;background:radial-gradient(circle at 25% 35%,#0e6073 0,transparent 40%),linear-gradient(140deg,#073b53,#041c31 72%);color:var(--foam)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.topbar{height:68px;max-width:1120px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:var(--foam);text-decoration:none;font-size:11px;font-weight:900;letter-spacing:2px}.brand-mark{width:28px;height:28px;display:grid;place-items:center;border:2px solid var(--mint);border-radius:50%;color:var(--mint);font-size:23px;box-shadow:0 0 20px #73f3ce55}.brand-small{display:none}.quiet{padding:9px 14px;border:1px solid var(--line);background:#ffffff08;border-radius:40px;font-size:11px}.layout{display:grid;grid-template-columns:360px 410px;gap:84px;align-items:center;justify-content:center;max-width:1100px;margin:5px auto 0;padding:0 24px}.story{padding-bottom:18px}.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 23px;color:var(--mint);font-size:11px;letter-spacing:1.4px}.eyebrow>span{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 15px var(--mint)}h1{margin:0;font-size:47px;line-height:1.35;letter-spacing:-3px}h1 em{color:var(--yellow);font-style:normal}.lead{color:#bfe1e5;font-size:14px;line-height:2;letter-spacing:.2px}.formula{display:flex;align-items:center;gap:9px;margin:28px 0 25px;padding:16px 18px;border:1px solid #73f3ce3d;background:#73f3ce09;border-radius:16px}.formula b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#eafff7;color:#07546b;font-size:16px;box-shadow:inset 0 -3px #bce7df}.formula b.answer{background:var(--yellow);transform:scale(1.12)}.formula span{font-weight:900;color:#9bcbd0}.formula i{font-style:normal;font-size:9px;color:var(--mint);margin-left:auto}.guide p{display:flex;align-items:center;gap:13px;margin:15px 0;font-size:13px}.guide p>b{display:grid;place-items:center;width:27px;height:27px;border:1px solid #eafff72e;border-radius:50%;font-size:9px;color:#9abdc3}.guide p span span{color:var(--yellow);font-weight:900}.small-note{font-size:9px;color:#86aeb8;line-height:1.9;margin-top:19px}.play-area{width:100%;min-width:0}.game-head{height:32px;padding:0 9px 7px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#b7dbe0}.game-head #score-label{color:var(--yellow);font-variant-numeric:tabular-nums}.viewport{position:relative;width:100%;aspect-ratio:400/560;min-height:330px;max-height:calc(100svh - 205px);overflow:hidden;isolation:isolate;border:1px solid #c9ffff35;border-radius:24px;background:#087895;box-shadow:0 24px 70px #00192788}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:22px;background:#03273db8;backdrop-filter:blur(7px);overflow:auto;overscroll-behavior:contain}.overlay.empty{display:none}.card{width:100%;margin:auto 0;padding:22px 20px;border-radius:21px;background:#f4fff9;color:#073a50;text-align:center;box-shadow:0 15px 40px #00233944}.card .kicker{margin:0;color:#32869a;font-size:9px;font-weight:900;letter-spacing:2px}.card h2{margin:8px 0 7px;font-size:24px;letter-spacing:-1px}.card>p{margin:5px auto 15px;max-width:310px;color:#537b84;font-size:11px;line-height:1.8}.primary{width:100%;min-height:49px;border-radius:13px;background:#087c92;color:white;font-weight:900;box-shadow:0 4px 0 #045367}.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #045367}.secondary{width:100%;min-height:43px;margin-top:10px;border:1px solid #0e62712e;border-radius:11px;background:transparent;color:#245968;font-size:11px}.stage-list{display:grid;gap:8px;margin:15px 0}.stage{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;width:100%;min-height:59px;padding:8px 13px;border:1px solid #0a657a25;border-radius:13px;background:#e3f7f2;color:#164f5c;text-align:left}.stage:not(:disabled):hover{border-color:#0796a8}.stage-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#b9eee3;font-size:18px}.stage strong{display:block;font-size:12px}.stage small{display:block;margin-top:3px;color:#54818a;font-size:9px}.stage-stars{min-width:48px;color:#d8990a;font-size:12px;letter-spacing:1px;text-align:right}.stage:disabled .stage-icon{filter:grayscale(1)}.math-tip{display:flex;align-items:center;justify-content:center;gap:8px;margin:13px 0}.math-tip b{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#b9eee3;font-size:12px}.math-tip b:last-child{background:#ffe77d}.how-list{text-align:left;margin:13px 0 4px;padding:0;list-style:none}.how-list li{display:flex;gap:10px;margin:12px 0;color:#416d77;font-size:11px;line-height:1.55}.how-list b{flex:0 0 23px;display:grid;place-items:center;height:23px;border-radius:50%;background:#b9eee3;color:#087084;font-size:9px}.result-bubble{display:grid;place-items:center;width:86px;height:86px;margin:10px auto;border:4px solid #fff;background:#ffe77d;color:#07566a;border-radius:50%;font-size:28px;font-weight:900;box-shadow:0 7px 0 #e5b845,0 0 0 7px #91e6db}.result-stars{color:#d99b12;font-size:29px;letter-spacing:4px}.result-score{font-size:11px;color:#5f858e}.result-score strong{display:block;color:#08465a;font-size:27px}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toast{position:absolute;z-index:3;left:14px;right:14px;top:83px;text-align:center;color:var(--yellow);font-size:13px;font-weight:900;text-shadow:0 2px 9px #00354d;pointer-events:none;opacity:0;transform:translateY(6px);transition:.18s}.toast.show{opacity:1;transform:none}.column-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:11px}.column-controls button{position:relative;height:44px;border-radius:12px;background:#0b6077;border:1px solid #dfffff1f;box-shadow:0 3px 0 #043d51}.column-controls button:hover:not(:disabled),.column-controls button.selected{background:#0b8da0;border-color:#73f3ce}.column-controls button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #043d51}.column-controls small{position:absolute;left:7px;top:6px;color:#86c7ce;font-size:8px}.column-controls span{font-size:18px;color:var(--mint)}.nav-buttons{display:flex;gap:6px;margin-top:13px}.nav-buttons button{flex:1;min-height:38px;border:1px solid var(--line);border-radius:10px;background:#ffffff07;font-size:10px}.nav-buttons button:hover{background:#ffffff12}.save-note{min-height:12px;margin:9px 0 0;text-align:center;color:#7ba6af;font-size:8px}footer{margin:19px 0 16px;text-align:center;color:#547f8a;font-size:8px;letter-spacing:2.5px}
@media(min-width:800px) and (max-height:760px){.topbar{height:52px}.layout{grid-template-columns:330px 365px;gap:80px;margin-top:0}.viewport{max-height:calc(100svh - 190px)}h1{font-size:41px}.formula{margin:19px 0}.guide p{margin:11px 0}footer{margin:10px}.story{padding:0}}
@media(max-width:799px){.topbar{height:51px;max-width:470px;padding:0 16px}.brand-wide{display:none}.brand-small{display:inline;font-size:12px;letter-spacing:.2px}.brand-mark{width:24px;height:24px;font-size:19px}.quiet{padding:7px 11px;font-size:9px}.layout{display:block;max-width:455px;margin:0 auto;padding:0 14px}.story{display:none}.viewport{min-height:300px;max-height:calc(100svh - 203px);border-radius:20px}.game-head{height:29px}.column-controls{margin-top:9px}.column-controls button{height:42px}.nav-buttons{margin-top:10px}.save-note{margin-top:7px}footer{margin:10px 0 9px;font-size:6px}.overlay{padding:18px}.card{padding:18px}.card h2{font-size:22px}.stage-list{margin:12px 0;gap:6px}.stage{min-height:54px}.brand{gap:7px}}
@media(max-height:590px) and (orientation:landscape){.topbar{height:42px}.layout{display:grid;grid-template-columns:225px 292px;gap:30px;max-width:760px}.story{display:block}.eyebrow,.lead,.formula,.guide,.small-note{display:none}h1{font-size:32px}.viewport{height:310px;min-height:260px;max-height:none}.game-head{height:25px}.column-controls button{height:35px}.nav-buttons{margin-top:7px}.nav-buttons button{min-height:32px}.save-note,footer{display:none}.card{padding:14px}.stage{min-height:45px}.stage-icon{width:32px;height:32px}.overlay{padding:14px}}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}