*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#10232f;color:#d1e3e9;font:14px/1.5 'Segoe UI',Arial,sans-serif}#viewer{display:flex;flex-direction:column;width:100%;height:100%;min-height:320px;background:#10232f}header{padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #314653;background:#102733}.project{font-size:14px;letter-spacing:1.5px;font-weight:700}.project span{display:block;font-size:11px;font-weight:400;color:#8eacb8;letter-spacing:1.1px;margin-top:2px}nav{display:flex;gap:6px}button{font:inherit;border:1px solid #395461;background:#1a3543;color:#d3e6ec;padding:8px 13px;border-radius:6px;cursor:pointer;white-space:nowrap}button:hover{background:#284958}button.selected{background:#a1e6c8;border-color:#a1e6c8;color:#0c3933;font-weight:650}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid #a5ebce;outline-offset:3px}#viewport{position:relative;flex:1;min-height:210px}canvas{width:100%;height:100%;display:block;touch-action:none}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#10232f;z-index:3;padding:25px;text-align:center}.view-actions{position:absolute;top:13px;right:14px;display:flex;gap:6px}.view-actions button{font-size:12px;background:#102b3ade}#fullscreen{font-size:18px;padding:2px 10px}.hint{position:absolute;bottom:12px;left:18px;font-size:12px;color:#afc6d0;pointer-events:none;text-shadow:0 1px 4px #07141a}#legend{position:absolute;top:18px;left:18px;display:flex;gap:12px;font-size:12px;pointer-events:none}#legend span{display:flex;align-items:center;gap:5px}#legend i{width:7px;height:7px;border-radius:50%}.green{background:#74bfa7}.yellow{background:#ffce70}.grey{background:#526e82}#transport{padding:12px 17px;border-top:1px solid #314653;display:flex;gap:15px;align-items:center;background:#142f3d}#play{border-radius:50%;width:38px;height:38px;padding:0;background:#9ce1c3;color:#123c35;font-weight:700}.timeline{flex:1;min-width:0}.timeline span{display:flex;justify-content:space-between;gap:12px}.timeline strong{font-size:12px;letter-spacing:1px;color:#a4e3cb}.timeline small{font-size:12px;color:#a9c2cd}.timeline input{width:100%;accent-color:#9ce1c3;margin:10px 0 0;cursor:pointer}#restart{font-size:20px;border:0;background:transparent;padding:0 4px}footer{padding:7px 17px;font-size:12px;color:#a9c2cd;border-top:1px solid #293f4b;background:#102733}#viewer:fullscreen{min-height:100vh}[hidden]{display:none!important}@media(max-width:500px){header{padding:10px;gap:8px}.project{font-size:12px;letter-spacing:.5px}.project span{font-size:10px}nav button{font-size:12px;padding:7px 9px}.timeline small{display:none}#legend{top:56px;left:12px}.hint{font-size:11px;left:12px;right:10px}.view-actions{right:10px;top:10px}footer{font-size:11px;padding:7px 10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}