:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#21394c;color-scheme:light}*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden}#viewer{position:relative;background:#b7c9d9}#viewport,canvas{display:block;width:100%;height:100%;touch-action:none}.topbar{position:absolute;top:20px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.badge{font-size:11px;font-weight:700;letter-spacing:.15em;display:flex;gap:9px;align-items:center}.dot{height:7px;width:7px;background:#b78336;border-radius:50%}.camera-tools{display:flex;gap:6px;pointer-events:auto}button,select{font:inherit;color:inherit;border:1px solid #ffffff70;border-radius:9px;background:#ffffff70;min-height:38px;padding:0 13px;cursor:pointer;transition:background .15s}button:hover,select:hover{background:#ffffffcf}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #21669a;outline-offset:3px}button:disabled{opacity:.45;cursor:wait}#fullscreen{font-size:24px;width:40px;padding:0}#hint{position:absolute;left:22px;top:50px;font-size:12px;opacity:.7;pointer-events:none}#status,#error{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);padding:18px 24px;border-radius:12px;background:#f4f8fbe8;text-align:center;max-width:85%}#error a{color:#164c72}.transport{position:absolute;bottom:20px;left:22px;right:22px;display:flex;align-items:center;gap:12px;background:#f4f8fbea;padding:12px;border:1px solid #ffffff9c;border-radius:14px;box-shadow:0 6px 28px #243b5014;backdrop-filter:blur(14px)}.primary{background:#253e51;color:white;min-width:73px;border-color:#253e51}.primary:hover{background:#35566e}.timeline{flex:1;display:flex;min-width:40px}input[type=range]{width:100%;accent-color:#a8752d;cursor:pointer}output{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:95px;text-align:right}select{padding:0 7px;background:transparent;border-color:#21394c20}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:520px){.topbar{top:14px;left:14px;right:14px}.badge{font-size:9px}.transport{left:10px;right:10px;bottom:10px;gap:6px;padding:9px;flex-wrap:wrap}.primary{min-width:60px;padding:0 8px}#restart{padding:0 9px}output{min-width:85px;font-size:11px}.speed select{width:58px}.timeline{flex-basis:35%}#hint{left:14px;top:48px;font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none}}

#viewport{height:calc(100% - 88px)}@media(max-width:520px){#viewport{height:calc(100% - 110px)}}

@media(max-width:520px){.badge{font-size:8px;letter-spacing:.1em}.camera-tools{flex-shrink:0;gap:4px}#reset{white-space:nowrap;font-size:11px;padding:0 8px;min-height:34px}#fullscreen{width:34px;min-height:34px}}