:root{--ink: #111418;--ink-2: #39414b;--ink-soft: #6b7480;--line: #d9dee4;--line-soft: #eceff3;--paper: #ffffff;--paper-2: #f6f8fa;--sky: #2fa8e8;--sky-deep: #0b7fc0;--sky-pale: #e6f5fd;--red: #e5484d;--red-pale: #fdecec;--radius: 10px;--font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;--mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", ui-monospace, monospace;--safe-b: env(safe-area-inset-bottom, 0px);color-scheme:light}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{font:inherit;color:inherit}.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}.btn{appearance:none;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:.7em 1.25em;font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:transform .06s ease,background .15s ease,opacity .15s;white-space:nowrap}.btn:active{transform:translateY(1px) scale(.98)}.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}.btn.primary{background:var(--ink);color:#fff}.btn.sky{background:var(--sky);border-color:var(--sky);color:#fff}.btn.ghost{border-color:var(--line)}.btn.small{padding:.45em .9em;font-size:13px}.btn.ghost[aria-pressed=true]{background:var(--sky-pale);border-color:var(--sky);color:var(--sky-deep)}.btn.block{width:100%;display:block}.btn:focus-visible,.seg button:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}.seg button{appearance:none;border:0;background:transparent;padding:.4em .9em;font-size:13px;font-weight:700;cursor:pointer}.seg button[aria-pressed=true]{background:var(--ink);color:#fff}.chip{display:inline-flex;align-items:center;gap:.35em;border:1px solid var(--line);border-radius:999px;padding:.3em .75em;font-size:12px;color:var(--ink-2);background:var(--paper);white-space:nowrap}.screen{min-height:100%;display:flex;flex-direction:column}.game-screen{height:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden;touch-action:none}.bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);min-height:52px}.bar .title{font-weight:800;font-size:15px;letter-spacing:.02em;white-space:nowrap}.bar .spacer{flex:1}.icon-btn{appearance:none;border:0;background:transparent;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:18px;flex:none}.icon-btn:hover{background:var(--paper-2)}.stage{position:relative;flex:1;min-height:0}.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}.hud{position:absolute;left:10px;top:10px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none;max-width:calc(100% - 20px)}.hud .chip{background:#ffffffeb}.hud .chip b{color:var(--ink)}.toolbar{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + var(--safe-b));border-top:1px solid var(--line-soft);background:var(--paper);flex-wrap:wrap;justify-content:center}.hint{font-size:12px;color:var(--ink-soft);text-align:center;padding:6px 12px 0;line-height:1.5}.msg{margin:0 12px;padding:8px 12px;font-size:13px;border-radius:8px;line-height:1.5}.msg.err{background:var(--red-pale);color:#a2262a}.msg.info{background:var(--sky-pale);color:#0a5f8f}.top{max-width:980px;margin:0 auto;width:100%;padding:28px 20px 40px;display:grid;gap:26px}.top-hero{display:grid;gap:18px;align-items:center}@media (min-width: 820px){.top-hero{grid-template-columns:1fr 1fr;gap:36px}.top{padding-top:56px}}.top h1{word-break:keep-all;font-size:clamp(34px,8vw,56px);line-height:1.12;margin:0;letter-spacing:.01em;font-weight:900}.top .catch{font-size:clamp(17px,3.6vw,21px);font-weight:700;margin:12px 0 0}.top .lead{color:var(--ink-2);line-height:1.75;margin:10px 0 0;font-size:15px}.top .actions{display:grid;gap:10px;margin-top:22px}.top .actions .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.top .actions .btn.primary{font-size:18px;padding:.85em 1.2em}.hero-canvas{position:relative;width:100%;aspect-ratio:1 / 1;max-height:440px;border:1.5px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}.hero-canvas canvas{width:100%;height:100%;display:block}.hero-caption{position:absolute;right:10px;bottom:8px;font-size:11px;color:var(--ink-soft);background:#ffffffd9;padding:2px 6px;border-radius:4px}.best-line{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;font-size:13px;color:var(--ink-2)}.best-line .num{font-size:20px;font-weight:800;color:var(--sky-deep)}.links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:14px}.links button{appearance:none;border:0;background:none;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--ink-2);padding:4px}.overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:16px;pointer-events:none}.overlay.wall{align-items:flex-start;justify-content:flex-start}.overlay.wall .card{width:100%}@media (max-width: 600px){.overlay.wall .card .btns{grid-template-columns:1fr}.overlay.wall .card{padding:14px}.overlay.wall .card h2{font-size:18px}}.overlay.center{align-items:center}.card{pointer-events:auto;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:18px;width:min(420px,100%);box-shadow:0 10px 30px #1114181f;display:grid;gap:12px;text-align:center;animation:pop .25s ease-out}.card h2{margin:0;font-size:22px}.card.fail h2{color:var(--red)}.card p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}.card .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}@keyframes pop{0%{transform:translateY(12px) scale(.97);opacity:0}to{transform:none;opacity:1}}.success-banner{pointer-events:none;font-size:clamp(34px,9vw,64px);font-weight:900;color:var(--ink);background:#ffffffe6;border:2px solid var(--ink);border-radius:16px;padding:.25em .6em;animation:success .5s cubic-bezier(.2,1.4,.4,1)}@keyframes success{0%{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}.tutorial-tip{position:absolute;left:50%;bottom:12px;transform:translate(-50%);background:var(--ink);color:#fff;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;pointer-events:none;max-width:calc(100% - 24px);text-align:center;line-height:1.5}.controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:10px 12px calc(10px + var(--safe-b));border-top:1px solid var(--line-soft);user-select:none;-webkit-user-select:none;touch-action:none}@media (min-width: 820px){.controls{grid-template-columns:repeat(5,120px);justify-content:center}}.rot-btn{appearance:none;border:1.5px solid var(--ink);background:var(--paper);border-radius:12px;min-height:56px;display:grid;place-items:center;gap:0;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;padding:4px 2px}.rot-btn .ic{font-size:22px;line-height:1}.rot-btn .lb{font-size:11px;font-weight:700;color:var(--ink-2)}.rot-btn.fine{border-color:var(--line)}.rot-btn[data-active=true]{background:var(--ink);color:#fff}.rot-btn[data-active=true] .lb{color:#fff}.rot-btn.toggle[aria-pressed=true]{background:var(--sky);border-color:var(--sky);color:#fff}.rot-btn.toggle[aria-pressed=true] .lb{color:#fff}.page{max-width:760px;margin:0 auto;width:100%;padding:20px 18px 48px}.page h2{font-size:22px;margin:28px 0 10px}.page h3{font-size:16px;margin:22px 0 8px}.page p,.page li{line-height:1.8;color:var(--ink-2);font-size:15px}.page ol,.page ul{padding-left:1.3em}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media (min-width: 620px){.stats{grid-template-columns:repeat(4,1fr)}}.stat{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}.stat .k{font-size:12px;color:var(--ink-soft)}.stat .v{font-size:24px;font-weight:800;margin-top:4px}.best-card{border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;display:grid}@media (min-width: 620px){.best-card{grid-template-columns:1.3fr 1fr}}.best-card .thumb{background:var(--paper-2);min-height:200px;position:relative}.best-card .info{padding:18px;display:grid;gap:6px;align-content:center}.best-card .score{font-size:46px;font-weight:800;color:var(--sky-deep);line-height:1.1}.thumb canvas{position:absolute;inset:0;width:100%;height:100%}.history{list-style:none;padding:0!important;margin:0;display:grid;gap:8px}.history li{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px 8px 8px}.history .mini{position:relative;width:64px;height:44px;background:var(--paper-2);border-radius:6px;overflow:hidden}.history .s{font-weight:800;font-size:18px}.history .d{font-size:12px;color:var(--ink-soft)}.table{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}.table th,.table td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left}.table td.num{text-align:right}.demo{position:relative;aspect-ratio:4 / 3;border:1.5px solid var(--ink);border-radius:var(--radius);overflow:hidden;margin:12px 0}.demo canvas{width:100%;height:100%;display:block}.result{max-width:980px;margin:0 auto;width:100%;padding:20px 18px 40px;display:grid;gap:18px}@media (min-width: 820px){.result{grid-template-columns:1.2fr 1fr;align-items:center;padding-top:48px}}.result .shape{position:relative;aspect-ratio:4 / 3;border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--paper-2)}.result .shape canvas{position:absolute;inset:0;width:100%;height:100%}.result .label{font-weight:800;font-size:15px}.result .big{font-size:clamp(64px,18vw,104px);font-weight:800;line-height:1;color:var(--sky-deep)}.result h1{margin:0;font-size:clamp(30px,7vw,44px);font-weight:900}.result .diff{font-size:15px;color:var(--ink-2)}.result .actions{display:grid;gap:10px}.result .actions .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.newbest{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;font-weight:800;padding:6px 14px;border-radius:999px;font-size:15px;width:fit-content;animation:shine 1.6s ease-in-out infinite}@keyframes shine{0%,to{box-shadow:0 0 #2fa8e899}50%{box-shadow:0 0 0 10px #2fa8e800}}.note{font-size:12px;color:var(--ink-soft);line-height:1.6}.confetti{position:fixed;inset:0;pointer-events:none;z-index:10}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.footer-card{padding:10px 12px calc(10px + var(--safe-b));border-top:1px solid var(--line-soft);display:flex;justify-content:center}.footer-card .card{box-shadow:none}.draw-msg{height:58px;padding-top:6px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.draw-msg .msg{font-size:12.5px;padding:6px 10px}.draw-msg .hint{padding-top:0}.toolbar.draw-tools{display:grid;grid-template-columns:auto auto minmax(0,1fr);flex-wrap:nowrap}.toolbar.draw-tools .btn{padding-left:.9em;padding-right:.9em}@media (min-width: 820px){.toolbar.draw-tools{grid-template-columns:auto auto 260px;justify-content:center}}