:root{--bg:#0e0f12;--fg:#e6e8ed;--muted:#8a8f9c;--accent:#6ea8ff;--border:#20232a;--chrome:#16181d;--raised:#1f2229;--hairline:#262a32;color:var(--fg);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;font:16px/1.5 ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;min-height:100dvh;margin:0;padding:0}button{touch-action:manipulation}#app{flex-direction:column;min-height:100dvh;display:flex}.shell{width:100%;max-width:960px;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;margin:0 auto;display:flex}.shell__body{flex-direction:column;flex:1;justify-content:center;align-items:center;padding-inline:4px;display:flex}#board{width:100%;max-width:min(720px, calc((100dvh - 8.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--board-aspect,1)));aspect-ratio:var(--board-aspect,1);margin:0 auto;display:flex;position:relative}#board canvas{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block;position:absolute;inset:0}#board canvas.board__win{pointer-events:none}#board canvas:focus{outline:none}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.shell__bar{align-items:center;gap:.5rem;padding-inline:.5rem;transition:opacity .12s;display:flex;position:relative}.shell--dragging .shell__bar{opacity:.3}.shell__bar--top{height:3.5rem}.shell__bar--bottom{height:4.5rem;padding-inline:1.25rem .75rem}.shell__icon{width:44px;height:44px;color:var(--fg);cursor:pointer;background:0 0;border:0;border-radius:22px;flex:none;place-items:center;padding:0;display:grid}.shell__icon:active:not(:disabled){background:var(--raised)}.shell__icon:disabled{color:#3d414b;cursor:default}.shell__icon--primary .icon{width:28px;height:28px}.shell__title{text-align:center;font-variant-numeric:tabular-nums;flex:1;margin:0;font-size:1.0625rem;font-weight:600;line-height:1.15}.shell__check{color:var(--muted);margin-left:.25em;font-weight:500}.shell__size{color:var(--muted);font-size:.75rem;font-weight:400;display:block}.shell__recording{background:#e5484d;border-radius:3px;width:6px;height:6px;margin-left:4rem;position:absolute;top:.75rem;left:50%}.shell__notice{color:var(--muted);text-align:center;margin:0 1rem;font-size:.8125rem}.shell__pairs{flex-wrap:wrap;flex:1;gap:7px;display:flex}.shell__pairs i{opacity:.55;border-radius:50%;width:9px;height:9px;box-shadow:inset 0 0 0 1.5px}.shell__pairs i.is-connected{opacity:1;background:currentColor}.shell__solved{left:max(.75rem, env(safe-area-inset-left));right:max(.75rem, env(safe-area-inset-right));bottom:max(.75rem, env(safe-area-inset-bottom));background:var(--chrome);border-radius:24px;grid-template-columns:auto 1fr;align-items:baseline;gap:.75rem .5rem;max-width:30rem;margin:0 auto;padding:1rem;animation:.22s cubic-bezier(.2,.8,.2,1) rise;display:grid;position:fixed}.shell__solved[hidden]{display:none}.shell--solved .shell__bar--bottom{visibility:hidden}.shell__solved h2{margin:0 0 0 .25rem;font-size:1.25rem;font-weight:700}.shell__solved p{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;margin:0 .25rem 0 0;font-size:.875rem}.shell__cta,.picker__cta{width:100%;height:52px;font:inherit;color:var(--bg);background:var(--fg);cursor:pointer;border:0;border-radius:16px;font-size:1.0625rem;font-weight:650;display:block}.shell__quiet{height:52px;font:inherit;color:var(--fg);background:var(--raised);cursor:pointer;border:0;border-radius:16px;padding-inline:1rem}.shell__solved .shell__quiet{grid-area:2/1}.shell__solved .shell__cta{grid-area:2/2}@keyframes rise{0%{opacity:0;transform:translateY(24px)}}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.picker{width:100%;max-width:100%;height:100dvh;max-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);color:var(--fg);background:var(--bg);overscroll-behavior:contain;border:0;margin:0}.picker::backdrop{background:var(--bg)}.picker__page{-webkit-user-select:none;user-select:none;max-width:36rem;min-height:100%;margin:0 auto;padding:.25rem 1rem 1.5rem;position:relative}.picker__page--forward{animation:.2s cubic-bezier(.2,.8,.2,1) push}.picker__page--back{animation:.2s cubic-bezier(.2,.8,.2,1) pop}@keyframes push{0%{opacity:0;transform:translate(32px)}}@keyframes pop{0%{opacity:0;transform:translate(-32px)}}.picker__back{height:44px;font:inherit;color:var(--fg);cursor:pointer;background:0 0;border:0;align-items:center;gap:2px;margin-left:-.5rem;padding:0 .5rem 0 0;font-size:1.0625rem;display:flex}.picker__title{letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:.5rem .25rem .25rem;font-size:2.125rem;font-weight:700;line-height:1.15}.picker__page>.picker__title:first-child{margin-top:1.5rem;margin-bottom:1rem}.picker__title:focus{outline:none}.picker__subtitle{color:var(--muted);font-variant-numeric:tabular-nums;margin:0 .25rem 1.25rem}.picker__list,.picker__continue{background:var(--chrome);border-radius:14px;margin-bottom:1.5rem;overflow:hidden}.picker__continue,.picker__row{width:100%;font:inherit;color:var(--fg);text-align:left;cursor:pointer;border:0;align-items:center;gap:.875rem;padding:.75rem .875rem;display:flex}.picker__row{background:0 0;position:relative}.picker__row+.picker__row:before{content:"";background:var(--hairline);height:1px;position:absolute;top:0;left:.875rem;right:0}.picker__row:active,.picker__continue:active{background:var(--raised)}.picker__meta{flex:1;min-width:0}.picker__meta b{font-variant-numeric:tabular-nums;font-size:1.0625rem;font-weight:600;display:block}.picker__meta>span:not(.picker__bar),.picker__hint{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8125rem;display:block}.picker__play{width:44px;height:44px;color:var(--bg);background:var(--fg);border-radius:22px;place-items:center;display:grid}.picker__play svg{fill:currentColor;width:22px;height:22px}.picker__glyph{background:var(--raised);border-radius:10px;place-items:center;width:40px;height:40px;display:grid}.picker__glyph svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linejoin:round;width:24px;height:24px}.picker__count{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.picker__chevron{color:#4a4f5a;width:20px;height:20px;margin-left:-.25rem}.picker__bar{background:#2a2e37;border-radius:2px;height:3px;margin-top:.5rem;display:block;overflow:hidden}.picker__bar i{background:var(--fg);height:100%;display:block}.picker__foot{color:#6b707c;margin:0 1rem;font-size:.75rem}.picker__foot a{color:inherit}.picker__block{color:var(--muted);font-variant-numeric:tabular-nums;justify-content:space-between;align-items:baseline;margin:1rem 2.25rem .5rem .25rem;scroll-margin-top:1rem;font-size:.8125rem;font-weight:400;display:flex}.picker__block b{color:var(--fg);font-size:.9375rem;font-weight:600}.picker__block:focus{outline:none}.picker__tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;display:grid}.picker__page:has(.picker__scrubber) .picker__tiles{margin-right:2rem}.picker__tile{aspect-ratio:1;max-height:5rem;font:inherit;font-variant-numeric:tabular-nums;color:var(--fg);box-shadow:inset 0 0 0 1px var(--hairline);cursor:pointer;background:0 0;border:0;border-radius:12px;font-weight:600;position:relative}.picker__tile--solved{background:var(--raised);box-shadow:none}.picker__tile--new{color:var(--muted);font-weight:500}.picker__tile--started:after{content:"";background:var(--fg);border-radius:3px;width:6px;height:6px;position:absolute;top:7px;right:7px}.picker__tile[aria-current]{color:var(--fg);box-shadow:inset 0 0 0 2px var(--fg)}.picker__scrubber{top:50%;right:max(.25rem, env(safe-area-inset-right));max-height:calc(100dvh - 10rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));scrollbar-width:none;flex-direction:column;display:flex;position:fixed;overflow-y:auto;transform:translateY(-50%)}.picker__jump{min-width:2rem;font:inherit;font-variant-numeric:tabular-nums;color:var(--muted);cursor:pointer;background:0 0;border:0;padding:.2rem .25rem;font-size:.625rem;font-weight:600}.picker__cta{box-shadow:0 -12px 24px 8px var(--bg);margin-top:1.5rem;position:sticky;bottom:1rem}@media (prefers-reduced-motion:reduce){.shell__solved,.picker__page--forward,.picker__page--back{animation:none}.shell__bar{transition:none}}