/* Measurement is the typography: one plain face, a huge number, tiny labels. */
:root{--paper:#efeee9;--graphite:#262626;--red:#d8342b;--tape:40px;color:var(--graphite);background:var(--paper);font:11px/1.3 Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

#scene{position:fixed;inset:0 0 var(--tape) 0;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
#scene:active{cursor:grabbing}
#scene canvas{display:block;width:100%;height:100%}

.measure{position:fixed;left:12px;top:calc(10px + env(safe-area-inset-top));pointer-events:none;z-index:2}
.measure p{margin:0;text-transform:uppercase}
.measure a{pointer-events:auto;font-weight:700;text-decoration:none}
.big{font-size:clamp(96px,30vw,220px);line-height:.8;letter-spacing:-.07em;margin:6px 0 4px -4px!important;font-variant-numeric:tabular-nums}
.big small{font-size:.16em;letter-spacing:0;margin-left:.2em;vertical-align:top}
#wd{font-size:15px;font-variant-numeric:tabular-nums}
#status{color:var(--red);margin-top:2px!important}

#ruler{position:fixed;right:0;top:calc(14px + env(safe-area-inset-top));bottom:calc(var(--tape) + 150px);width:62px;z-index:3;touch-action:none;cursor:ns-resize;border-left:1px solid var(--graphite)}
#ruler .tick{position:absolute;left:0;width:6px;height:1px;background:var(--graphite)}
#ruler .tick.big{width:12px}
#ruler .num{position:absolute;left:15px;margin-top:-5px;font-size:8px;line-height:10px;font-weight:400;pointer-events:none}
#ruler button{position:absolute;right:4px;transform:translateY(-50%);min-height:30px;font-size:10px;letter-spacing:.03em;padding:0 2px;background:var(--paper)}
#ruler button.on{color:var(--paper);background:var(--red)}
#marker{position:absolute;left:-9px;width:17px;height:17px;margin-top:-9px;background:var(--red);border-radius:50%;pointer-events:none}

#slot{position:fixed;left:12px;right:74px;bottom:calc(var(--tape) + 10px);z-index:2;transition:opacity .2s;max-width:420px}
#slot.moving{opacity:.25}
#slot p,#slot h2{margin:0}
.label{color:var(--red);letter-spacing:.06em}
#slot h2{font-size:22px;letter-spacing:-.03em;font-weight:700;margin:2px 0 4px}
#slot-text{font-size:12px;background:color-mix(in srgb,var(--paper) 80%,transparent)}
#slot-links{display:flex;gap:0 14px;flex-wrap:wrap}
#slot-links a{min-height:30px;display:inline-flex;align-items:center;font-size:12px}

#hint{position:fixed;left:12px;right:74px;top:calc(env(safe-area-inset-top) + 190px);font-size:9px;text-align:left!important;margin:0;text-align:center;text-transform:uppercase;letter-spacing:.05em;pointer-events:none;z-index:2}
#hint[hidden]{display:none}
#loading{position:fixed;left:0;right:0;top:40%;text-align:center;margin:0}

/* the exits are printed on a tape measure */
.tape{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tape) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);overflow-x:auto;overflow-y:hidden;background:#f4e04a;border-top:1px solid var(--graphite);z-index:4;scrollbar-width:none}
.tape::-webkit-scrollbar{display:none}
.tape div{display:flex;align-items:center;height:var(--tape);width:max-content;gap:26px;padding:0 14px;background-image:repeating-linear-gradient(90deg,var(--graphite) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,var(--graphite) 0 1px,transparent 1px 50px);background-size:100% 7px,100% 13px;background-repeat:repeat-x;background-position:0 0,0 0}
.tape a,.tape span{white-space:nowrap;padding-top:12px;min-height:40px;display:flex;align-items:center;text-transform:uppercase;font-size:11px}
.tape span{font-size:9px}
.noscript{position:fixed;top:40%;left:12px}

@media(min-width:900px){#hint{top:290px}.big{font-size:200px}#slot{bottom:calc(var(--tape) + 18px);left:18px}.measure{left:18px;top:16px}#ruler{bottom:calc(var(--tape) + 20px);width:74px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}