/* Tilt. Luke Steuber. */
@font-face{font-family:"Plex Mono";src:url("fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-display:swap}@font-face{font-family:"Plex Sans";src:url("fonts/IBMPlexSans-400.woff2") format("woff2");font-weight:400;font-display:swap}
:root{color-scheme:dark;--bg:#000;--ink:#fff;--text:#ededed;--sub:#a6a6a6;--line:#262626;--frame:#ededed;--scrim:rgba(0,0,0,.8);--mono:"Plex Mono",monospace;--sans:"Plex Sans",sans-serif}
:root[data-theme=light]{color-scheme:light;--bg:#fff;--ink:#000;--text:#121212;--sub:#606060;--line:#dedede;--frame:#121212;--scrim:rgba(255,255,255,.8)}
@media(prefers-color-scheme:light){:root[data-theme=system]{color-scheme:light;--bg:#fff;--ink:#000;--text:#121212;--sub:#606060;--line:#dedede;--frame:#121212;--scrim:rgba(255,255,255,.8)}}
*{box-sizing:border-box;border-radius:0}body{margin:0;height:100dvh;overflow:hidden;background:var(--bg);color:var(--text);font:16px/1.45 var(--sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}button,select,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}button:focus-visible,select:focus-visible,input:focus-visible,.cell:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.readout{position:fixed;top:calc(max(0px,env(safe-area-inset-top)) + 18px);left:50%;transform:translateX(-50%);font:500 13px/1 var(--mono);letter-spacing:.02em;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
#restart-btn{position:fixed;top:max(0px,env(safe-area-inset-top));left:8px;color:var(--sub);z-index:2}.toolbar{position:fixed;bottom:max(6px,env(safe-area-inset-bottom));left:8px;right:8px;display:flex;justify-content:space-between}.toolbar>div{display:flex}.ib{display:inline-grid;place-items:center;width:48px;height:48px;min-width:48px;min-height:48px;border:0;background:none;padding:12px;color:var(--ink);transition:opacity .15s,transform .1s}.ib svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.ib:active{transform:scale(.94)}.toolbar .ib{color:var(--sub)}.ib:hover,.ib:focus-visible{color:var(--ink)}
#board-shell{position:absolute;inset:58px 12px 104px;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain}.board-stage{position:relative;flex:none;margin-bottom:64px}.tilt-stage{position:relative;padding:48px}.board{position:relative;border:1px solid var(--line);touch-action:none;background:var(--bg)}.grid-row{display:flex}.cell{width:var(--cell);height:var(--cell);position:relative;flex:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.grid-row:last-of-type .cell{border-bottom:0}.cell:last-child{border-right:0}.cell.block{background:var(--ink)}.cell:focus-visible{outline-offset:-3px;z-index:1}.cell.block:focus-visible{outline-color:var(--bg)}.hole{position:absolute;inset:25%;border:1px solid var(--ink);border-radius:50%;transition:background .12s}.board.dropped .hole{background:var(--ink)}.marble{position:absolute;left:calc(var(--cell)*.2);top:calc(var(--cell)*.2);width:calc(var(--cell)*.6);height:calc(var(--cell)*.6);border-radius:50%;background:var(--ink);pointer-events:none;z-index:2;transform-origin:center}.direction{position:absolute;color:var(--sub)}.direction.up{top:0;left:calc(50% - 24px)}.direction.right{right:0;top:calc(50% - 24px)}.direction.down{bottom:0;left:calc(50% - 24px)}.direction.left{left:0;top:calc(50% - 24px)}
.completion{position:absolute;top:100%;left:0;right:0;text-align:center;padding-top:4px}.completion>div{display:flex;justify-content:center}.milestone{margin:4px 0 0;color:var(--sub);font:14px/1.3 var(--sans)}#feedback{position:fixed;bottom:66px;left:16px;right:16px;margin:0;text-align:center;color:var(--sub);font:14px/1.3 var(--sans);pointer-events:none}
.sheet{width:min(32rem,calc(100vw - 16px));max-height:calc(100dvh - 16px);border:1px solid var(--frame);padding:0;background:var(--bg);color:var(--text)}.sheet[open]{display:flex;flex-direction:column}.sheet::backdrop{background:var(--scrim)}.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;gap:12px;flex:none;border-bottom:1px solid var(--line)}.sheet-head h2{margin:0;font:500 16px/1.3 var(--mono)}.sheet-head form{margin:0}.sheet-x{width:44px;height:44px;min-width:44px;min-height:44px;padding:10px}.sheet-body{padding:20px 24px;overflow:auto;min-height:0;overscroll-behavior:contain;scroll-padding:12px}.sheet-body p{margin:0 0 16px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--line)}.row select{max-width:65%;min-height:44px;background:var(--bg);border:0;padding:4px 8px}.row button{min-height:44px;background:none;border:0;padding:8px}.row button:not(:disabled){text-decoration:underline;text-underline-offset:4px}.sheet-body .quiet{margin:8px 0;color:var(--sub);font:13px/1.4 var(--mono);overflow-wrap:anywhere}.sheet-foot{padding:12px 24px;border-top:1px solid var(--line);flex:none;color:var(--sub);font-size:14px}.sheet-foot a{color:inherit}.text-action{min-height:44px;padding:8px 12px;border:1px solid var(--line);background:none;font:500 14px/1.3 var(--mono);color:var(--text)}.controls{border-top:1px solid var(--line);padding-top:16px}.controls p{margin:0 0 8px}#settings-feedback input{width:100%;min-height:44px;background:var(--bg);border:1px solid var(--line);padding:8px;font:13px var(--mono)}
.board,.board *,button,button *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(max-width:480px){.sheet-head{padding:8px 12px}.sheet-body{padding:16px}}
@media(orientation:landscape) and (max-height:500px){#board-shell{inset:48px 72px 24px 12px}.toolbar{left:auto;right:8px;top:12px;bottom:12px;flex-direction:column;width:48px}.toolbar>div{flex-direction:column}.readout{left:calc(50% - 32px)}#feedback{left:12px;right:72px;bottom:4px;font-size:12px}.board-stage{margin-bottom:48px}.tilt-stage{padding:44px}.completion{padding:0}.completion .ib{height:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}:root[data-motion=reduce] *,:root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after{animation:none!important;transition:none!important}
@media(forced-colors:active){:root{--bg:Canvas;--ink:CanvasText;--text:CanvasText;--sub:CanvasText;--line:GrayText;--frame:CanvasText}.board,.cell,.hole,.marble{forced-color-adjust:none}.cell{background:Canvas;border-color:GrayText}.cell.block,.marble,.board.dropped .hole{background:CanvasText}.hole{border-color:CanvasText}.cell:focus-visible{outline-color:Highlight}}

/* Double-tap zoom: touch-action is intersected across every ancestor, so
   manipulation on the root stops double-tap zoom page-wide (readouts, gaps
   between controls, sheet backdrops) while pinch zoom still works. */
html, body { touch-action: manipulation; }

/* A shallow monochrome tray; controls stay on the stationary outer stage. */
:root{--tray:#242424;--tray-light:#414141;--block:#030303;--edge:#707070;--ball:#dadada;--ball-light:#fff;--ball-shade:#707070}
:root[data-theme=light]{--tray:#e0e0e0;--tray-light:#fafafa;--block:#080808;--edge:#777;--ball:#252525;--ball-light:#929292;--ball-shade:#000}
@media(prefers-color-scheme:light){:root[data-theme=system]{--tray:#e0e0e0;--tray-light:#fafafa;--block:#080808;--edge:#777;--ball:#252525;--ball-light:#929292;--ball-shade:#000}}
.tray-view{perspective:1200px}.board{--pitch:0deg;--roll:0deg;transform-style:preserve-3d;transform:rotateX(var(--pitch)) rotateY(var(--roll));transition:none;background:linear-gradient(145deg,var(--tray-light),var(--tray) 65%);border-color:var(--edge);box-shadow:0 6px 0 #111,0 7px 0 var(--edge),0 18px 28px #0006;cursor:grab}.board.dragging{transition:none;cursor:grabbing}.grid-row,.cell{transform-style:preserve-3d}.cell{border-color:#8882}.cell.block{background:var(--block);box-shadow:7px 10px 9px #0006}.block-face{position:absolute;pointer-events:none;background:var(--block)}.block-face.top{inset:0;transform:translateZ(var(--depth));border:1px solid #ffffff40;background:linear-gradient(145deg,#ffffff0a,transparent 65%),var(--block)}.block-face.north,.block-face.south{height:var(--depth);left:0;right:0;transform-origin:top;transform:rotateX(90deg);background:#181818}.block-face.south{top:100%}.block-face.north{top:0}.block-face.east,.block-face.west{width:var(--depth);top:0;bottom:0;transform-origin:left;transform:rotateY(-90deg);background:#303030}.block-face.east{left:100%}.block-face.west{left:0}.hole{inset:14%;background:#000;border-color:#aaa;box-shadow:inset 3px 5px 5px #000,0 1px 0 #fff7;transform:translateZ(1px)}.board.dropped .hole{box-shadow:0 0 14px #ffffff40}.marble{left:calc(var(--cell)*.2);top:calc(var(--cell)*.2);width:calc(var(--cell)*.6);height:calc(var(--cell)*.6);background:none;transform-style:preserve-3d}.marble-core{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 30% 25%,var(--ball-light) 3%,var(--ball) 40%,var(--ball-shade) 85%);transform:rotate(var(--spin,0rad));box-shadow:inset -1px -2px 3px #0004}.marble-core::after{content:'';position:absolute;inset:5%;border:1px solid #7773;border-radius:50%;transform:rotate(var(--spin,0rad)) scaleX(.55)}.marble-shadow{position:absolute;left:calc(var(--cell)*.3);top:calc(var(--cell)*.37);width:calc(var(--cell)*.46);height:calc(var(--cell)*.35);border-radius:50%;background:radial-gradient(ellipse,#000b,transparent 72%);pointer-events:none;transform-origin:center}.board:focus-within{outline:none}
@media(prefers-reduced-motion:reduce){.board{transform:none!important}}:root[data-motion=reduce] .board{transform:none!important}
@media(forced-colors:active){.board{transform:none!important;background:Canvas;box-shadow:none}.block-face,.marble-shadow{display:none}.cell.block{background:CanvasText;box-shadow:none}.marble-core{background:CanvasText;border:1px solid CanvasText;box-shadow:none}.marble-core::after{display:none}.hole{background:Canvas;border-color:CanvasText;box-shadow:none}}

.board.pointer-focus .cell:focus-visible{outline:none}

.hint-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:translateZ(2px)}.hint-route polyline{fill:none;stroke:var(--ink);stroke-width:.025;stroke-dasharray:.035 .09;stroke-linecap:round}.direction{touch-action:none}