@import "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=IBM+Plex+Sans:wght@400;600&family=Space+Mono:wght@700&display=swap";:root{--color-paper:oklch(95% .024 83);--color-paper-2:oklch(91% .032 82);--color-paper-3:oklch(86% .043 80);--color-surface:oklch(98% .014 83);--color-ink:oklch(22% .025 48);--color-ink-2:oklch(31% .035 49);--color-neutral:oklch(46% .03 55);--color-muted:oklch(39% .025 55);--color-rule:oklch(73% .045 75);--color-rule-strong:oklch(38% .04 48);--color-accent:oklch(50% .175 31);--color-accent-ink:oklch(98% .014 83);--color-focus:oklch(38% .17 31);--color-success:oklch(42% .12 145);--color-error:oklch(48% .19 26);--color-shadow:oklch(20% .025 48/.13);--color-overlay:oklch(16% .025 48/.62);--color-digit-1:oklch(45% .16 30);--color-digit-2:oklch(48% .12 62);--color-digit-3:oklch(42% .1 105);--color-digit-4:oklch(42% .11 145);--color-digit-5:oklch(43% .1 190);--color-digit-6:oklch(43% .12 230);--color-digit-7:oklch(42% .14 275);--color-digit-8:oklch(45% .14 320);--color-digit-9:oklch(36% .035 48);--font-display:"Bricolage Grotesque", "Trebuchet MS", sans-serif;--font-body:"IBM Plex Sans", "Segoe UI", sans-serif;--font-outlier:"Space Mono", "Lucida Console", monospace;--space-3xs:.125rem;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;--text-xs:.7rem;--text-sm:.82rem;--text-base:1rem;--text-md:1.25rem;--text-lg:1.56rem;--text-xl:1.95rem;--text-2xl:2.44rem;--text-display:clamp(2.4rem, 4vw + 1rem, 4.8rem);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-micro:.12s;--dur-short:.22s;--dur-long:.42s;--rule-thin:1px;--rule-heavy:2px;--radius-sm:.4rem;--radius-md:.75rem;--radius-round:999px;--z-base:1;--z-raised:10;--z-sticky:200;--z-modal:400;--z-toast:500}[data-theme=midnight]{--color-paper:oklch(16% .024 248);--color-paper-2:oklch(20% .028 248);--color-paper-3:oklch(25% .032 248);--color-surface:oklch(19% .026 248);--color-ink:oklch(94% .018 82);--color-ink-2:oklch(86% .02 82);--color-neutral:oklch(73% .025 82);--color-muted:oklch(76% .02 82);--color-rule:oklch(39% .035 248);--color-rule-strong:oklch(79% .03 82);--color-accent:oklch(68% .15 43);--color-accent-ink:oklch(17% .025 248);--color-focus:oklch(78% .16 85);--color-shadow:oklch(5% .02 248/.38);--color-overlay:oklch(8% .02 248/.75)}[data-theme=sakura]{--color-paper:oklch(96% .027 5);--color-paper-2:oklch(92% .04 5);--color-paper-3:oklch(87% .055 5);--color-surface:oklch(98% .016 5);--color-ink:oklch(23% .03 345);--color-ink-2:oklch(32% .045 345);--color-neutral:oklch(46% .04 345);--color-muted:oklch(40% .035 345);--color-rule:oklch(76% .065 5);--color-rule-strong:oklch(40% .055 345);--color-accent:oklch(49% .17 12);--color-accent-ink:oklch(98% .016 5);--color-focus:oklch(36% .17 12)}[data-theme=moss]{--color-paper:oklch(94% .03 115);--color-paper-2:oklch(89% .04 115);--color-paper-3:oklch(84% .055 115);--color-surface:oklch(97% .02 115);--color-ink:oklch(22% .035 135);--color-ink-2:oklch(31% .045 135);--color-neutral:oklch(44% .04 135);--color-muted:oklch(38% .035 135);--color-rule:oklch(70% .055 115);--color-rule-strong:oklch(36% .06 135);--color-accent:oklch(43% .14 145);--color-accent-ink:oklch(98% .02 115);--color-focus:oklch(34% .15 145)}*{box-sizing:border-box}html,body{min-height:100%;margin:0;overflow-x:clip}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);padding-block-end:env(safe-area-inset-bottom);line-height:1.5}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:var(--rule-heavy) solid var(--color-focus);outline-offset:var(--space-2xs)}button:disabled{cursor:not-allowed;opacity:.46}button:active:not(:disabled){transform:translateY(var(--space-3xs))}button[aria-busy=true]{cursor:progress;opacity:.7}button[data-state=error]{border-color:var(--color-error)}button[data-state=success]{border-color:var(--color-success)}#phaser-bg{opacity:.8;pointer-events:none;z-index:var(--z-base);position:fixed;inset:0}#phaser-bg canvas{display:block}#app{min-height:100dvh;z-index:var(--z-raised);position:relative}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.nav-slab{background:var(--color-paper);border-block-end:var(--rule-heavy) solid var(--color-ink);align-items:center;gap:var(--space-xs);min-height:4.5rem;padding:max(var(--space-sm), env(safe-area-inset-top)) max(var(--space-sm), env(safe-area-inset-right)) var(--space-sm) max(var(--space-sm), env(safe-area-inset-left));grid-template-columns:minmax(0,1fr) auto;display:grid}.brand,.points-chip,.mode-nav button{cursor:pointer;white-space:nowrap;background:0 0;border:0;min-height:44px}.brand{font-family:var(--font-display);font-size:var(--text-xs);align-items:center;gap:var(--space-xs);letter-spacing:.12em;text-align:start;padding:0;font-weight:400;line-height:1.05;display:flex}.brand b{font-size:var(--text-sm);font-weight:800}.brand__seal{background:var(--color-accent);border-radius:var(--radius-sm);color:var(--color-accent-ink);font-family:var(--font-body);font-size:var(--text-lg);justify-content:center;align-items:center;width:2.75rem;height:2.75rem;display:flex}.mode-nav{display:none}.points-chip{border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-round);padding:var(--space-xs) var(--space-sm);text-align:end;flex-direction:column;justify-content:center;line-height:1.1;display:flex}.points-chip span{font-family:var(--font-outlier);font-size:var(--text-sm);font-variant-numeric:tabular-nums}.points-chip small{color:var(--color-muted);font-size:var(--text-xs)}.game-shell{gap:var(--space-xl);max-width:76rem;padding:var(--space-lg) max(var(--space-sm), env(safe-area-inset-right)) var(--space-xl) max(var(--space-sm), env(safe-area-inset-left));margin-inline:auto;display:grid}.play-space{min-width:0}.puzzle-heading{align-items:end;gap:var(--space-md);justify-content:space-between;margin-block-end:var(--space-md);display:flex}.puzzle-heading p,.rank-block>p,.dialog-heading p{color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.12em;margin:0 0 var(--space-2xs);text-transform:uppercase;font-weight:600}.puzzle-heading h1{font-family:var(--font-display);letter-spacing:-.035em;overflow-wrap:anywhere;min-width:0;margin:0;font-size:clamp(1.75rem,5vw,2.65rem);font-weight:800;line-height:1.04}.run-stats{gap:var(--space-md);margin:0;display:flex}.run-stats div{text-align:end;min-width:3.25rem}.run-stats dt{color:var(--color-muted);font-size:var(--text-xs);text-transform:uppercase}.run-stats dd{font-family:var(--font-outlier);font-size:var(--text-md);font-variant-numeric:tabular-nums;margin:0}.board-wrap{background:var(--color-surface);border:var(--rule-thin) solid var(--color-rule-strong);box-shadow:0 var(--space-xs) var(--space-xl) var(--color-shadow);color:var(--color-ink);max-width:38rem;padding:clamp(var(--space-xs), 2.4vw, var(--space-lg));margin-inline:auto}.board{background:var(--color-rule-strong);border:var(--rule-heavy) solid var(--color-rule-strong);gap:var(--rule-thin);grid-template-columns:repeat(var(--board-size), minmax(0, 1fr));isolation:isolate;width:100%;display:grid}.cell{aspect-ratio:1;background:var(--color-surface);cursor:pointer;font-family:var(--font-display);min-width:0;transition:background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);border:0;justify-content:center;align-items:center;padding:0;font-size:clamp(1rem,5.2vw,2rem);font-weight:700;line-height:1;display:flex;position:relative}.cell.box-right{box-shadow:var(--rule-heavy) 0 0 var(--color-rule-strong);z-index:var(--z-base)}.cell.box-bottom:before{background:var(--color-rule-strong);content:"";height:var(--rule-heavy);inset:auto 0 calc(var(--rule-heavy) * -1);position:absolute}.cell.is-peer{background:var(--color-paper-2);color:var(--color-ink)}.cell.is-matched{background:var(--color-paper-3);color:var(--color-ink)}.cell.is-selected{background:var(--color-accent);color:var(--color-accent-ink);z-index:var(--z-raised)}.cell.is-fixed{font-weight:800}.cell.is-fixed .digit:after{content:"";height:var(--rule-heavy);opacity:.35;background:currentColor;width:100%;margin-block-start:var(--space-3xs);display:block}.cell.is-error{animation:wrong-cell var(--dur-long) var(--ease-out);background:var(--color-error);color:var(--color-accent-ink)}.cell.is-diagonal:after{border:var(--rule-thin) solid var(--color-accent);content:"";opacity:.28;pointer-events:none;position:absolute;inset:12%;transform:rotate(45deg)}.cell.is-selected.is-diagonal:after{border-color:var(--color-accent-ink)}.cell:active{transform:scale(.96)}.notes{font-family:var(--font-body);height:100%;padding:var(--space-3xs);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;font-size:clamp(.42rem,1.7vw,.7rem);font-weight:600;line-height:1;display:grid}.notes i{justify-content:center;align-items:center;font-style:normal;display:flex}.is-chromatic .cell[data-value="1"] .digit{color:var(--color-digit-1)}.is-chromatic .cell[data-value="2"] .digit{color:var(--color-digit-2)}.is-chromatic .cell[data-value="3"] .digit{color:var(--color-digit-3)}.is-chromatic .cell[data-value="4"] .digit{color:var(--color-digit-4)}.is-chromatic .cell[data-value="5"] .digit{color:var(--color-digit-5)}.is-chromatic .cell[data-value="6"] .digit{color:var(--color-digit-6)}.is-chromatic .cell[data-value="7"] .digit{color:var(--color-digit-7)}.is-chromatic .cell[data-value="8"] .digit{color:var(--color-digit-8)}.is-chromatic .cell[data-value="9"] .digit{color:var(--color-digit-9)}.rule-note{color:var(--color-muted);font-size:var(--text-sm);margin:var(--space-sm) 0 0;text-align:center}.number-pad{gap:var(--space-xs);margin:var(--space-md) auto 0;grid-template-columns:repeat(auto-fit,minmax(2.75rem,1fr));max-width:38rem;display:grid}.number-pad button,.tool-row button,.panel-heading button,.result-actions button,.primary-action{background:var(--color-surface);border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;min-height:44px}.number-pad button{font-family:var(--font-display);font-size:var(--text-md);font-weight:700}.tool-row{gap:var(--space-xs);margin:var(--space-xs) auto 0;grid-template-columns:repeat(4,minmax(0,1fr));max-width:38rem;display:grid}.tool-row button{font-size:var(--text-xs);align-items:center;gap:var(--space-3xs);min-width:0;padding:var(--space-xs) var(--space-2xs);flex-direction:column;justify-content:center;display:flex}.tool-row span{font-family:var(--font-outlier);font-size:var(--text-md);line-height:1}.tool-row .is-active,.mode-nav .is-active{background:var(--color-ink);color:var(--color-paper)}.journey-panel{border-block-start:var(--rule-heavy) solid var(--color-ink);gap:var(--space-xl);padding-block-start:var(--space-lg);display:grid}.rank-block{background:var(--color-ink);color:var(--color-paper);padding:var(--space-lg)}.rank-block>p{color:var(--color-paper-3)}.rank-line{align-items:center;gap:var(--space-sm);justify-content:space-between;display:flex}.rank-line strong{font-family:var(--font-display);font-size:var(--text-md)}.rank-line span{font-family:var(--font-outlier);font-size:var(--text-sm)}.progress-track{background:var(--color-ink-2);height:var(--space-2xs);margin-block:var(--space-md);overflow:clip}.progress-track span{background:var(--color-accent);height:100%;transform:scaleX(var(--progress-scale));transform-origin:0;display:block}.rank-block dl{gap:var(--space-xs);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;display:grid}.rank-block dl div{border-block-start:var(--rule-thin) solid var(--color-neutral);padding-block-start:var(--space-xs)}.rank-block dt{color:var(--color-paper-3);font-size:var(--text-xs)}.rank-block dd{font-family:var(--font-outlier);font-size:var(--text-md);margin:0}.panel-heading{align-items:center;gap:var(--space-sm);justify-content:space-between;display:flex}.panel-heading h2{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.025em;margin:0}.panel-heading button{padding-inline:var(--space-sm)}.trail{gap:var(--space-2xs);max-height:25rem;margin-block-start:var(--space-md);padding-inline-end:var(--space-2xs);display:grid;overflow-y:auto}.trail-node{border:0;border-block-start:var(--rule-thin) solid var(--color-rule);cursor:pointer;align-items:center;gap:var(--space-sm);min-height:3.75rem;padding:var(--space-xs) 0;text-align:start;background:0 0;grid-template-columns:auto minmax(0,1fr);display:grid}.trail-node__mark{border:var(--rule-thin) solid var(--color-rule-strong);font-family:var(--font-outlier);border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;display:flex}.trail-node b,.trail-node small{display:block}.trail-node b{font-family:var(--font-display)}.trail-node small{color:var(--color-muted);text-transform:capitalize}.trail-node.is-active .trail-node__mark{background:var(--color-accent);color:var(--color-accent-ink)}.trail-node.is-complete b:after{color:var(--color-success);content:" · cleared";font-family:var(--font-body);font-size:var(--text-xs)}.foot-marquee{background:var(--color-paper);border-block-start:var(--rule-heavy) solid var(--color-ink);color:var(--color-ink);overflow:clip}.foot-marquee__track{gap:var(--space-2xl);padding-block:var(--space-sm);white-space:nowrap;width:max-content;animation:32s linear infinite foot-marquee;display:flex}.foot-marquee__track span{font-family:var(--font-display);font-size:var(--text-sm);letter-spacing:.11em;font-weight:800}.game-dialog{background:var(--color-surface);border:var(--rule-heavy) solid var(--color-ink);border-radius:var(--radius-md);color:var(--color-ink);max-height:calc(100dvh - var(--space-xl));max-width:min(42rem, calc(100% - var(--space-lg)));padding:var(--space-lg);width:100%;overflow-y:auto}.game-dialog::backdrop{background:var(--color-overlay)}.game-dialog[open]{animation:dialog-in var(--dur-long) var(--ease-out)}.dialog-heading{align-items:start;gap:var(--space-md);justify-content:space-between;display:flex}.dialog-heading h2,.result-dialog h2{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.035em;margin:0;line-height:1.05}.dialog-heading>button{border:var(--rule-thin) solid var(--color-rule-strong);cursor:pointer;font-size:var(--text-lg);background:0 0;border-radius:50%;width:44px;height:44px}.game-dialog fieldset{margin:var(--space-lg) 0 0;border:0;padding:0}.game-dialog legend{font-family:var(--font-display);margin-block-end:var(--space-xs);font-weight:700}.choice-grid,.mode-grid,.theme-grid{gap:var(--space-xs);grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));display:grid}.choice-card,.mode-grid label,.difficulty-row label{cursor:pointer;min-width:0;position:relative}.choice-card input,.mode-grid input,.difficulty-row input{opacity:0;pointer-events:none;position:absolute}.choice-card>span,.mode-grid label>span,.difficulty-row label>span{background:var(--color-paper);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-sm);min-height:4.75rem;padding:var(--space-sm);flex-direction:column;justify-content:center;display:flex}.choice-card small,.mode-grid small{color:var(--color-muted);margin-block-start:var(--space-2xs);line-height:1.35}.choice-card input:checked+span,.mode-grid input:checked+span,.difficulty-row input:checked+span{border-color:var(--color-accent);box-shadow:inset 0 calc(var(--rule-heavy) * -1) 0 var(--color-accent)}.choice-card input:focus-visible+span,.mode-grid input:focus-visible+span,.difficulty-row input:focus-visible+span{outline:var(--rule-heavy) solid var(--color-focus);outline-offset:var(--space-2xs)}.difficulty-row{gap:var(--space-2xs);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.difficulty-row label>span{min-height:44px;padding:var(--space-xs);white-space:nowrap;align-items:center}.primary-action{background:var(--color-accent);color:var(--color-accent-ink);font-family:var(--font-display);padding-inline:var(--space-lg);width:100%;margin-block-start:var(--space-lg);font-weight:700}.theme-swatch{background:var(--color-paper);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:var(--space-sm);min-height:4rem;padding:var(--space-xs);white-space:nowrap;display:flex}.theme-swatch>span{background:var(--color-accent);border:var(--rule-thin) solid var(--color-rule-strong);border-radius:50%;width:2.25rem;height:2.25rem}.theme-swatch[data-theme-choice=midnight]>span{background:var(--color-ink)}.theme-swatch[data-theme-choice=sakura]>span{background:var(--color-digit-8)}.theme-swatch[data-theme-choice=moss]>span{background:var(--color-success)}.theme-swatch[aria-pressed=true]{border-color:var(--color-accent);box-shadow:inset 0 calc(var(--rule-heavy) * -1) 0 var(--color-accent)}.result-dialog{text-align:center}.result-mark{background:var(--color-accent);color:var(--color-accent-ink);font-family:var(--font-display);font-size:var(--text-xl);height:4rem;margin:0 auto var(--space-md);border-radius:50%;justify-content:center;align-items:center;width:4rem;display:flex}.result-dialog>p{color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase}.result-score{align-items:baseline;gap:var(--space-xs);margin-block:var(--space-lg);justify-content:center;display:flex}.result-score strong{font-family:var(--font-outlier);font-size:var(--text-2xl)}.result-score span{color:var(--color-muted)}.result-actions{gap:var(--space-xs);display:grid}.result-actions button{padding-inline:var(--space-lg)}.result-actions .primary-action{background:var(--color-accent);color:var(--color-accent-ink);margin:0}@keyframes dialog-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes wrong-cell{0%,to{transform:translate(0)}30%{transform:translateX(calc(var(--space-2xs) * -1))}60%{transform:translateX(var(--space-2xs))}}@keyframes foot-marquee{0%{transform:translate(0)}to{transform:translateX(calc(-50% - var(--space-xl)))}}@media (hover:hover) and (pointer:fine){.number-pad button:hover,.tool-row button:hover,.panel-heading button:hover,.result-actions button:hover,.theme-swatch:hover{background:var(--color-paper-2);transform:translateY(calc(var(--space-3xs) * -1))}.cell:hover{background:var(--color-paper-3)}.trail-node:hover b{color:var(--color-accent)}.mode-nav button:hover{box-shadow:inset 0 calc(var(--rule-heavy) * -1) 0 var(--color-accent)}}@media (width>=40rem){.nav-slab{gap:var(--space-lg);padding-inline:max(var(--space-lg), env(safe-area-inset-left));grid-template-columns:auto minmax(0,1fr) auto}.mode-nav{gap:var(--space-2xs);justify-content:center;display:flex}.mode-nav button{font-size:var(--text-sm);letter-spacing:.06em;padding-inline:var(--space-sm);text-transform:uppercase;font-weight:600}.game-shell{padding-inline:var(--space-lg)}.board-wrap,.number-pad,.tool-row{max-width:32rem}.difficulty-row{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width>=60rem){.game-shell{grid-template-columns:minmax(0,1fr) 20rem;align-items:start;padding-block-start:var(--space-xl)}.journey-panel{border-block-start:0;border-inline-start:var(--rule-heavy) solid var(--color-ink);gap:var(--space-lg);top:var(--space-lg);padding-block-start:0;padding-inline-start:var(--space-lg);position:sticky}.board-wrap{transform:translateX(calc(var(--space-lg) * -.5))}}@media (width>=60rem) and (height<=50rem){.game-shell{padding-block-start:var(--space-lg)}.board-wrap,.number-pad,.tool-row{max-width:26rem}}@media (pointer:coarse){.number-pad button,.tool-row button,.mode-nav button,.panel-heading button,.result-actions button,.theme-swatch{min-height:48px}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:var(--dur-micro)!important;transition-duration:var(--dur-micro)!important;animation-iteration-count:1!important}.foot-marquee__track{animation:none}}
