:root{color-scheme:dark;font:14px/1.45 system-ui,-apple-system,sans-serif;color:#dce9ec;background:#061017}*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden}main{position:relative}#viewport{position:absolute;inset:0}canvas{display:block;touch-action:none}header{position:absolute;z-index:2;left:26px;top:23px;pointer-events:none}h1{margin:0;font-size:clamp(26px,3.2vw,40px);font-weight:550;letter-spacing:-.035em;line-height:1.15}header p{margin:7px 0 0;font-size:13px;color:#90a9b1}button{color:inherit;font:inherit}#gear{position:absolute;z-index:5;top:24px;right:25px;width:39px;height:39px;display:grid;place-items:center;border:1px solid #324b55;background:#0b1b24d9;border-radius:50%;cursor:pointer}#gear svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}#gear:hover,#gear[aria-expanded=true]{color:#7fe2d1;border-color:#7fe2d1}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #7fe2d1;outline-offset:4px}[hidden]{display:none!important}#settings{position:absolute;z-index:4;right:25px;top:73px;width:252px;padding:18px 19px;border:1px solid #29414d;border-radius:9px;background:#091820ed;backdrop-filter:blur(16px);box-shadow:0 12px 40px #0005;max-height:calc(100dvh - 95px);overflow:auto}h2{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#92aab3;margin:0 0 10px}.current-toggle{display:flex;align-items:center;gap:9px;min-height:33px;font-size:12px;cursor:pointer}.current-toggle input{margin:0;accent-color:#7fe2d1}.current-toggle i,#legend i{display:inline-block;flex-shrink:0;width:15px;height:3px;border-radius:2px}.snapshot{margin-top:15px;border-top:1px solid #29414d;padding-top:15px}.snapshot label{display:block;font-size:12px;margin-bottom:4px}#elapsed,#timestamp,.range-labels{font:10px/1.5 ui-monospace,monospace;color:#94afb7}#timestamp{display:block;margin-top:9px}#time{display:block;width:100%;margin:13px 0 5px;accent-color:#7fe2d1}.range-labels{display:flex;justify-content:space-between;color:#667f88}#legend{position:absolute;z-index:2;left:26px;bottom:48px;display:flex;flex-direction:column;gap:5px;font-size:11px;color:#b2c8ce;pointer-events:none;text-shadow:0 1px 4px #061017}#legend span{display:flex;align-items:center;gap:9px;transition:opacity .15s}#legend .inactive{opacity:.25}.axis-label{position:absolute;transform:translate(-50%,-50%);font:9px ui-monospace,monospace;letter-spacing:.08em;color:#66848e;pointer-events:none;white-space:nowrap}footer{position:absolute;z-index:2;left:26px;right:26px;bottom:16px;display:flex;justify-content:space-between;font-size:10px;color:#68838c}footer a{color:#7f9ca5;text-decoration:none}footer a:hover{text-decoration:underline}#load-error{position:absolute;z-index:6;top:100px;left:26px;color:#ffc1ac;background:#192027;padding:10px;border-radius:6px;font-size:12px}@media(max-width:600px){header{left:17px;top:22px}h1{font-size:26px}header p{font-size:11px}#gear{right:16px;top:20px}#settings{right:16px;top:68px;width:240px}#legend{left:17px;bottom:43px;font-size:10px;gap:4px}footer{left:17px;right:17px;font-size:9px}#load-error{left:17px;max-width:85vw}}

/* Phone shell: safe areas, browser chrome, touch targets, scrollable controls. */
html,body,main{height:100%;height:100dvh;overscroll-behavior:none}
header{left:max(20px,env(safe-area-inset-left));top:max(20px,env(safe-area-inset-top));right:80px}
#gear{width:44px;height:44px;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));touch-action:manipulation}
#settings{right:max(16px,env(safe-area-inset-right));top:calc(max(16px,env(safe-area-inset-top)) + 54px);width:min(280px,calc(100vw - 32px));max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)) - 70px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.current-toggle{min-height:44px}.current-toggle input{width:18px;height:18px}
#time{min-height:44px;margin:3px 0;touch-action:pan-y}
#legend{left:max(20px,env(safe-area-inset-left));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 32px)}
footer{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
@media(max-width:600px){h1{font-size:clamp(20px,6vw,28px)}header p{max-width:240px}#legend{font-size:10px;gap:5px}footer{font-size:9px}.axis-label{font-size:8px}}
@media(max-height:480px){header{top:max(10px,env(safe-area-inset-top))}h1{font-size:23px}header p{margin-top:3px}#legend{font-size:9px;gap:3px}#settings{top:64px;max-height:calc(100dvh - 78px - env(safe-area-inset-bottom))}}