/* Tilt · Levels. 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:#2a2a2a;--frame:#ededed;--scrim:rgba(0,0,0,.8);--tray:#171717;--tray2:#222;--block:#f2f2f2;--hole:#000;--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:#dcdcdc;--frame:#121212;--scrim:rgba(255,255,255,.85);--tray:#f4f4f4;--tray2:#e9e9e9;--block:#111;--hole:#fff}
@media(prefers-color-scheme:light){:root[data-theme=system]{color-scheme:light;--bg:#fff;--ink:#000;--text:#121212;--sub:#606060;--line:#dcdcdc;--frame:#121212;--scrim:rgba(255,255,255,.85);--tray:#f4f4f4;--tray2:#e9e9e9;--block:#111;--hole:#fff}}
*{box-sizing:border-box}html,body{touch-action:manipulation}body{margin:0;height:100dvh;overflow:hidden;background:var(--bg);color:var(--text);font:16px/1.45 var(--sans);-webkit-tap-highlight-color:transparent}
button,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}
button:focus-visible,select:focus-visible,#stack: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);color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
#restart-btn{position:fixed;top:max(0px,env(safe-area-inset-top));left:8px;color:var(--sub);z-index:3}
.toolbar{position:fixed;bottom:max(6px,env(safe-area-inset-bottom));left:8px;right:8px;display:flex;justify-content:space-between;z-index:3}.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)}
.ib svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.toolbar .ib{color:var(--sub)}.ib:hover,.ib:focus-visible{color:var(--ink)}
#shell{position:absolute;inset:56px 8px 60px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#stackwrap{position:relative;flex:none}
#stack{position:relative;display:flex;flex-direction:column;align-items:center;touch-action:none;cursor:grab}
#stack:active{cursor:grabbing}
.tray{position:relative;border:1.5px solid var(--ink);background:var(--tray);flex:none}
.tray.dim{opacity:.92}.tray.active{border-width:2px;box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--ink)}
.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-child .cell{border-bottom:0}.cell:last-child{border-right:0}
.cell.block{background:var(--block)}
.cell.landing::after{content:'';position:absolute;inset:31%;border:1.5px solid var(--sub);transform:rotate(45deg);opacity:.9}
.hole{position:absolute;inset:19%;border:2px solid var(--ink);border-radius:50%;background:var(--hole);box-shadow:inset 0 0 0 3px var(--bg)}
.hole.final{inset:13%;border-width:2.5px;background:var(--ink)}
.hole.final::after{content:'';position:absolute;inset:32%;border-radius:50%;background:var(--bg)}
.shaft{position:absolute;width:0;border-left:2px dashed var(--sub);opacity:.75;pointer-events:none;z-index:1}
.gap{flex:none;width:100%;position:relative}
#marble{position:absolute;left:0;top:0;width:calc(var(--cell)*.62);height:calc(var(--cell)*.62);margin:calc(var(--cell)*-.31) 0 0 calc(var(--cell)*-.31);pointer-events:none;z-index:5}
.marble-core{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 8%,#cfcfcf 32%,#666 78%,#222 100%);border:1px solid var(--ink)}
#next-wrap{height:56px;flex:none;display:flex;align-items:flex-start;justify-content:center;padding-top:4px}
#next-btn{color:var(--ink);border:1px solid var(--ink);border-radius:50%}
.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;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:48px;height:48px}
.sheet-body{padding:20px 24px;overflow:auto}.sheet-body p{margin:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--line)}
.row select{min-height:44px;background:var(--bg);border:0;padding:4px 8px;max-width:65%}
@media(orientation:landscape) and (max-height:500px){#shell{inset:48px 64px 8px 8px}.toolbar{left:auto;right:8px;top:12px;bottom:12px;flex-direction:column;width:48px}.toolbar>div{flex-direction:column}.readout{left:calc(50% - 28px)}}
@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}