*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#02060c;font-family:SF Mono,JetBrains Mono,ui-monospace,Menlo,Consolas,monospace;color:#cfeaf5;-webkit-font-smoothing:antialiased}#app{position:fixed;inset:0}#app canvas{display:block}#hud{position:fixed;inset:0;pointer-events:none;z-index:10}#title{position:absolute;top:94px;left:30px}#title .kicker{font-size:11px;letter-spacing:4px;color:#5fb8d8;opacity:.85}#title .name{font-size:22px;letter-spacing:1px;margin-top:6px;font-weight:600;text-shadow:0 2px 18px rgba(0,0,0,.6)}#z6z{position:absolute;top:26px;left:30px;pointer-events:auto}#z6z a{display:block}#z6z svg{width:54px;height:54px;display:block;opacity:.85;transition:opacity .2s ease}#z6z a:hover svg{opacity:1}#depthReadout{position:absolute;top:24px;right:36px;text-align:right}.depthValue{font-size:64px;font-weight:200;line-height:1;letter-spacing:-1px;text-shadow:0 4px 30px rgba(0,60,90,.8)}.depthValue .unit{font-size:26px;font-weight:300;opacity:.6;margin-left:6px}#depthNum{font-variant-numeric:tabular-nums}.depthLabel{font-size:11px;letter-spacing:6px;color:#5fb8d8;margin-top:8px;opacity:.8}#stats{position:absolute;bottom:30px;left:30px;display:grid;gap:10px}.stat{display:flex;align-items:baseline;gap:14px}.stat .k{font-size:10px;letter-spacing:3px;color:#4f93ad;width:78px}.stat .v{font-size:15px;color:#d6f1fb;font-variant-numeric:tabular-nums}#ruler{position:absolute;right:38px;top:200px;bottom:60px;width:2px;background:linear-gradient(to bottom,#78c8e680,#78c8e60a)}#rulerTicks{position:absolute;inset:0}#rulerTicks .tick{position:absolute;right:0;width:12px;height:1px;background:#96d2eb66}#rulerTicks .tick span{position:absolute;right:18px;top:-7px;font-size:10px;color:#6fa9c2;white-space:nowrap;font-variant-numeric:tabular-nums}#rulerMarker{position:absolute;right:-4px;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#7fe3ff;box-shadow:0 0 12px 3px #7fe3ffcc;transition:top .08s linear}#transport{position:absolute;bottom:22px;left:50%;transform:translate(-50%);width:clamp(340px,64vw,900px);display:flex;flex-direction:column;align-items:center;gap:16px;pointer-events:auto}#controls{display:flex;align-items:center;gap:14px}#scrubber{width:100%;position:relative;padding-top:24px}#scrubTrack{position:relative;height:6px;border-radius:3px;cursor:pointer;background:#78c8e62e}#scrubFill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f, 0) * 100%);border-radius:3px;background:linear-gradient(90deg,#4fb8d8,#7fe3ff)}#scrubHandle{position:absolute;top:50%;left:calc(var(--f, 0) * 100%);width:14px;height:14px;border-radius:50%;background:#eaffff;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 10px 2px #7fe3ffb3}#scrubTrack:before{content:"";position:absolute;inset:-10px 0}#scrubEvents{position:absolute;left:0;right:0;top:0;height:24px}.scrubEvent{position:absolute;bottom:0;left:calc(var(--f, 0) * 100%);transform:translate(-50%);display:flex;flex-direction:column;align-items:center;cursor:pointer;pointer-events:auto}.scrubEvent .evLabel{font-size:9.5px;letter-spacing:.5px;color:#8fc4dc;white-space:nowrap;margin-bottom:4px;opacity:.8;transition:color .15s ease,opacity .15s ease;text-shadow:0 1px 6px rgba(0,0,0,.7)}.scrubEvent .evTick{width:1px;height:9px;background:#96d2eb8c}.scrubEvent:hover .evLabel{color:#eaffff;opacity:1}.scrubEvent:hover .evTick{background:#7fe3ff}#scrubTimes{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:#6fa9c2;font-variant-numeric:tabular-nums;letter-spacing:1px}#transport .tbtn,#transport .sbtn{font-family:inherit;color:#cfeaf5;cursor:pointer;background:#0a1e2c8c;border:1px solid rgba(120,200,230,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s ease,border-color .15s ease,color .15s ease}#transport .tbtn:hover,#transport .sbtn:hover{background:#14374eb3;border-color:#78c8e680}#playBtn{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center}#playBtn svg{fill:currentColor}#playBtn .ic-pause,#playBtn.playing .ic-play{display:none}#playBtn.playing .ic-pause{display:block}#speeds{display:flex}#speeds .sbtn{font-size:12px;letter-spacing:1px;padding:9px 13px;border-right-width:0;font-variant-numeric:tabular-nums}#speeds .sbtn:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}#speeds .sbtn:last-child{border-right-width:1px;border-top-right-radius:8px;border-bottom-right-radius:8px}#speeds .sbtn.active{background:#7fe3ffe6;color:#04222e;border-color:#7fe3ffe6}#hint{position:absolute;bottom:28px;left:50%;transform:translate(-50%);font-size:12px;letter-spacing:1px;color:#7fb6cc;opacity:.75}#hint .scrollicon{display:inline-block;margin-right:6px;animation:bob 1.8s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(-2px)}50%{transform:translateY(2px)}}#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:2px;color:#7fb6cc;z-index:20;background:#02060c;transition:opacity .6s ease}#loading.hidden{opacity:0;pointer-events:none}@media(max-width:600px){#transport{inset:0;transform:none;width:auto;display:block;gap:0;pointer-events:none}#scrubber{position:absolute;left:14px;top:150px;bottom:160px;width:26px;padding-top:0;pointer-events:auto}#scrubTrack{position:absolute;left:4px;top:0;bottom:0;width:6px;height:auto}#scrubFill{inset:0 0 auto;width:auto;height:calc(var(--f, 0) * 100%);background:linear-gradient(180deg,#4fb8d8,#7fe3ff)}#scrubHandle{left:50%;top:calc(var(--f, 0) * 100%);transform:translate(-50%,-50%)}#scrubEvents{inset:0 auto 0 4px;width:6px;height:auto}.scrubEvent{bottom:auto;left:50%;top:calc(var(--f, 0) * 100%);transform:translateY(-50%);flex-direction:row-reverse;align-items:center;gap:5px}.scrubEvent .evLabel{margin-bottom:0}.scrubEvent .evTick{width:10px;height:1px}#scrubTimes{display:none}#stats{bottom:40px}#controls{position:absolute;left:50%;bottom:3px;transform:translate(calc(-50% + 10px));pointer-events:auto;flex-wrap:nowrap;flex-direction:row-reverse;align-items:center;justify-content:center;gap:10px}#controls #playBtn{width:40px;height:40px}#speeds .sbtn{padding:8px 9px;font-size:11px}}