/* Cube Maze. Luke Steuber. Dark only: the marble is the light in the room. */
@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:#1a1a1a;--ink:#fff;--text:#ededed;--sub:#a6a6a6;--line:#2f2f2f;--guide:#8f8f8f;--frame:#ededed;--band:rgba(255,255,255,.06);--scrim:rgba(0,0,0,.8);--mono:"Plex Mono",ui-monospace,monospace;--sans:"Plex Sans",sans-serif}
*{box-sizing:border-box;border-radius:0}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{overflow:hidden;background:var(--bg);color:var(--text);font:16px/1.45 var(--sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;touch-action:none}
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,a: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}

#play{position:fixed;inset:0}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.readout{position:fixed;z-index:2;top:calc(max(0px,env(safe-area-inset-top)) + 11px);left:50%;transform:translateX(-50%);padding:5px 9px;background:rgba(26,26,26,.78);font:500 13px/1 var(--mono);letter-spacing:.02em;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
#restart-btn{position:fixed;top:max(0px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));color:var(--sub);z-index:2}
#completion{position:fixed;left:calc(50% - 24px);bottom:calc(max(6px,env(safe-area-inset-bottom)) + 58px);width:48px;height:48px}
.toolbar{position:fixed;bottom:max(6px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));display:flex;justify-content:space-between;z-index:2}.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,#restart-btn{color:var(--sub)}.ib:focus-visible{color:var(--ink)}@media (hover:hover) and (pointer:fine){.ib:hover:not(:disabled){color:var(--ink)}}
#hint-btn[aria-pressed=true],#undo-btn.hinted{color:var(--ink);outline:1px solid var(--ink);outline-offset:-7px}
#next-btn{color:var(--ink)}#next-btn:not([hidden]){animation:arrive .5s ease-out both}
@keyframes arrive{from{opacity:0}to{opacity:1}}
button,button *,header,.toolbar{-webkit-user-select:none;user-select:none;-webkit-touch-callout: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;touch-action:pan-y}.sheet-body p{margin:0 0 16px;max-width:60ch}.sheet-body p:last-child{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{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-foot{padding:12px 24px;border-top:1px solid var(--line);flex:none;color:var(--sub);font-size:14px}.sheet-foot a{color:inherit}
@media(max-width:480px){.sheet-head{padding:8px 12px}.sheet-body{padding:16px}}
/* Held sideways, the controls stand in a column on the right; the readout and the next arrow centre on the play area.
   The shared frame centres Next on --control-next-left, so that is set to the play area's centre, left of the column. */
@media(orientation:landscape) and (max-height:520px){.toolbar{left:auto;right:max(8px,env(safe-area-inset-right));top:12px;bottom:12px;flex-direction:column;width:48px}.toolbar>div{flex-direction:column}.readout{top:5px;left:calc(50% - 32px)}#completion{bottom:10px;left:calc(50% - 56px)}body[data-control-frame]{--control-next-left:calc(50% - 32px)}}
@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){.ib,#restart-btn{color:ButtonText}}
/* The look glyph sits under the cube and above the Next disc's space (64 px tall, 64 px up), with room to spare. */
.look-hint{position:fixed;z-index:1;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 136px);width:72px;height:56px;pointer-events:none;animation:lh-show 3.2s linear both}
.look-hint svg{display:block;width:100%;height:100%;overflow:visible}
.look-hint .arc{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:2 4}
.look-hint .dots circle{fill:rgba(255,255,255,.78)}
.look-hint .mouse rect,.look-hint .mouse path{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.6;stroke-linejoin:round}.look-hint .mouse .lit{fill:#fff;stroke:none}
.look-hint .dots,.look-hint .mouse{transform-box:view-box;transform-origin:36px 104px;animation:lh-sweep 2.6s ease-in-out both}
/* The pair of fingertips and the mouse travel along the arc but stay upright. */
.look-hint .up{transform-box:view-box;transform-origin:36px 39px;animation:lh-upright 2.6s ease-in-out both}
.look-hint.still,.look-hint.still *{animation:none!important}
@keyframes lh-show{0%{opacity:0}10%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes lh-sweep{0%{transform:rotate(0)}50%{transform:rotate(-17deg)}100%{transform:rotate(0)}}
@keyframes lh-upright{0%{transform:rotate(0)}50%{transform:rotate(17deg)}100%{transform:rotate(0)}}
@media(orientation:landscape) and (max-height:520px){.look-hint{bottom:66px}}
.help-more{border-top:1px solid var(--line);margin-top:16px;padding-top:4px}.help-more summary{cursor:pointer;min-height:44px;padding:12px 0;color:var(--sub)}.help-more p{font-size:14px}.sheet-body .help-more p:last-child{margin-bottom:0}.sheet summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}