*,*:before,*:after{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}body{--ink: rgba(255, 255, 255, .92);--ink-dim: rgba(255, 255, 255, .5);--bar: rgba(22, 22, 24, .82);--pop: #16161a;--hover: rgba(255, 255, 255, .1);--on: rgba(255, 255, 255, .16);--edge: rgba(255, 255, 255, .14)}body[data-background=white]{background:#fff;--ink: rgba(0, 0, 0, .88);--ink-dim: rgba(0, 0, 0, .48);--bar: rgba(252, 252, 253, .86);--pop: #fbfbfc;--hover: rgba(0, 0, 0, .07);--on: rgba(0, 0, 0, .11);--edge: rgba(0, 0, 0, .12)}.hud{position:fixed;left:50%;bottom:16px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:10;max-width:calc(100vw - 24px)}.status{height:14px;line-height:14px;font-size:11.5px;letter-spacing:.01em;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.bar{display:flex;align-items:center;gap:2px;padding:4px;border-radius:11px;background:var(--bar);border:1px solid var(--edge);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 20px #00000047;max-width:100%;overflow:hidden}.seg{display:flex;align-items:center;gap:2px}.div{width:1px;align-self:stretch;margin:3px 4px;background:var(--edge);flex:none}.bar button{appearance:none;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;line-height:1;padding:7px 11px;cursor:pointer;white-space:nowrap;transition:background .11s ease,opacity .11s ease}.bar button:hover:not(:disabled){background:var(--hover)}.bar button:disabled{opacity:.3;cursor:default}.bar button.icon{padding:7px 9px;font-size:14px}.bar button.size{font-variant-numeric:tabular-nums;padding-right:21px;position:relative}.bar button.size:after{content:"";position:absolute;right:9px;top:50%;width:4.5px;height:4.5px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.55}.counter,.move{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-dim);padding:0 4px;white-space:nowrap}.move{color:var(--ink);min-width:26px;text-align:center}.counter{min-width:46px;text-align:center}.speed{width:70px;margin:0 4px;accent-color:var(--ink)}.pop{position:absolute;bottom:calc(100% + 7px);padding:5px;border-radius:11px;background:var(--pop);border:1px solid var(--edge);box-shadow:0 8px 28px #0000005c;display:flex;flex-direction:column;gap:1px;max-height:min(56vh,360px);overflow-y:auto}.pop-left{left:0}.pop-right{right:0}.pop-label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);padding:5px 8px 3px}.row{appearance:none;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;text-align:left;padding:7px 14px 7px 9px;cursor:pointer;white-space:nowrap}.row:hover{background:var(--hover)}.row.on{background:var(--on)}.choices{display:flex;gap:4px;padding:2px 4px 4px}.choices button{appearance:none;flex:1;border:1px solid var(--edge);border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;padding:6px 12px;cursor:pointer}.choices button.on{background:var(--on)}.keys{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;align-items:center;padding:9px 11px}.keys kbd{font:inherit;font-size:11px;color:var(--ink);background:var(--hover);border:1px solid var(--edge);border-radius:5px;padding:3px 6px;white-space:nowrap}.keys span{font-size:12px;color:var(--ink-dim);white-space:nowrap}.fatal{position:fixed;inset:0;display:grid;place-items:center;padding:24px;color:var(--ink);font-size:14px;text-align:center;line-height:1.5;z-index:20}@media (max-width: 620px){.bar button{padding:7px 8px;font-size:12px}.speed{width:52px}.keys span{white-space:normal}}.landing{position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:auto 1fr auto;pointer-events:none;opacity:1;transition:opacity .38s ease;font-family:inherit}.landing.leaving{opacity:0}.landing-scrim{position:absolute;inset:0;background:linear-gradient(100deg,#06080af0,#06080ab8 34%,#06080a1f 62%,#06080a00 78%),linear-gradient(to top,#040608f5,#0406088c 22%,#04060800 48%),radial-gradient(120% 90% at 70% 40%,#0000 40%,#0009)}.landing-top,.landing-hero,.landing-cards{position:relative}.landing-top{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,4vw,54px)}.brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:15px;font-weight:650;letter-spacing:-.01em}.brand-mark{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;width:19px;height:19px;padding:2px;border-radius:5px;background:#ffffff1a}.brand-mark i{border-radius:1px}.landing-hero{align-self:center;padding:0 clamp(20px,4vw,54px);max-width:720px}.wordmark{margin:0;font-size:clamp(58px,10.5vw,158px);line-height:.86;letter-spacing:-.045em;font-weight:600;color:#f4f7f2;text-shadow:0 6px 44px rgba(0,0,0,.55)}.blurb{margin:22px 0 0;max-width:33ch;font-size:clamp(15px,1.25vw,17.5px);line-height:1.55;color:#ffffffbd}.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{pointer-events:auto;appearance:none;border:0;border-radius:999px;font:inherit;font-size:14px;font-weight:650;letter-spacing:.07em;padding:16px 34px;cursor:pointer;transition:transform .13s ease,background .13s ease,border-color .13s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:#21a34a;color:#fff;box-shadow:0 10px 30px #21a34a52}.btn-primary:hover{background:#26b954}.btn-ghost{background:#ffffff0f;color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.btn-ghost:hover{background:#ffffff21;border-color:#ffffff73}.btn-small{font-size:11.5px;padding:11px 20px}.hint{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:18px;font-size:13px;color:#ffffff80}.landing kbd,.modal kbd{font:inherit;font-size:11.5px;font-weight:600;color:#ffffffe6;background:#ffffff1f;border:1px solid rgba(255,255,255,.22);border-bottom-width:2px;border-radius:6px;padding:3px 7px;white-space:nowrap}.landing-cards{padding:0 clamp(20px,4vw,54px) clamp(20px,3vw,34px)}.cards-label{font-size:10.5px;font-weight:650;letter-spacing:.18em;color:#ffffff6b;margin-bottom:12px}.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.card{pointer-events:auto;appearance:none;text-align:left;font:inherit;cursor:pointer;padding:14px 16px 15px;border-radius:12px;background:#0e12149e;border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .15s ease,background .15s ease,border-color .15s ease}.card:hover{transform:translateY(-3px);background:#141a1cd1;border-color:#ffffff3d}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.card-size{font-size:12px;font-variant-numeric:tabular-nums;color:#ffffff80}.card-tag{font-size:9.5px;font-weight:650;letter-spacing:.12em;color:#ffffff57}.card-tag[data-tag=optimal]{color:#4ade80}.card-tag[data-tag=solvable]{color:#9ae6a4}.card-name{margin-top:5px;font-size:15.5px;font-weight:650;color:#fff;letter-spacing:-.01em}.card-meta{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:11.5px;color:#ffffff80;line-height:1.3}.swatch{display:grid;gap:1px;width:18px;height:18px;flex:none;padding:1.5px;border-radius:4px;background:#00000073}.swatch i{border-radius:.5px;opacity:.85}.modal{position:absolute;inset:0;pointer-events:auto;display:grid;place-items:center;padding:24px;background:#040608b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.sheet{width:min(460px,100%);padding:26px 28px 24px;border-radius:16px;background:#14181a;border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 70px #0009}.sheet h2{margin:0 0 18px;font-size:19px;font-weight:650;color:#fff;letter-spacing:-.01em}.sheet-rows{display:grid;grid-template-columns:auto 1fr;gap:11px 14px;align-items:center;margin-bottom:22px}.sheet-rows span{font-size:13px;color:#ffffffa8;line-height:1.35}@media (max-width: 900px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.cards .card:nth-child(n+4){display:none}}@media (max-width: 620px){.landing-hero,.blurb{max-width:none}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cards .card:nth-child(n+3){display:none}.btn{padding:14px 26px}}@media (max-height: 560px){.landing-cards{display:none}}body[data-stage=landing] .hud{display:none}