:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;color:#f3f7f9;background:#101d28;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select,input{font:inherit}button,select{color:inherit}button{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border-radius:10px;background:#ffffff10;-webkit-tap-highlight-color:transparent}button:disabled,select:disabled,input:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #67d8ef;outline-offset:3px}button:hover:not(:disabled){background:#ffffff20}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg{pointer-events:none}[hidden]{display:none!important}#viewer{position:relative;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto}#viewport{min-width:0;min-height:0;grid-row:1;position:relative;background:#b6c7d1}canvas{display:block;width:100%;height:100%}header{position:absolute;top:0;left:0;right:0;padding:calc(16px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 28px max(18px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center;gap:16px;pointer-events:none;background:linear-gradient(#101d28a8,transparent);text-shadow:0 1px 4px #0005}header p{margin:0 0 4px;font-size:11px;letter-spacing:.12em}h1{font-size:17px;letter-spacing:.04em;margin:0;font-weight:600}#share{pointer-events:auto;background:#101d2880;backdrop-filter:blur(10px);padding:0 13px;font-size:12px}.control-panel{grid-row:2;background:#101d28;padding:14px max(18px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));z-index:2;display:grid;gap:10px;box-shadow:0 -4px 24px #0002}.camera-switch{display:flex;background:#07121b;border-radius:12px;padding:4px;gap:4px}.camera-switch button{flex:1;background:transparent;font-size:14px;min-height:42px;font-weight:600}.camera-switch button[aria-pressed=true]{background:#d5edf1;color:#16323d;box-shadow:0 1px 5px #0002}.scene-info{display:flex;align-items:center;gap:16px;min-height:30px}.scene-info p{margin:0}#chapter{font-size:12px;line-height:1.5;color:#becbd3;flex:1}.speed{white-space:nowrap;display:flex;align-items:baseline;gap:5px}.speed b{font-size:23px;font-weight:500;font-variant-numeric:tabular-nums}.speed span{font-size:10px;color:#9cb0bf}.timeline{min-width:0}#seek{display:block;width:100%;margin:0;height:24px;accent-color:#70c9dc;cursor:pointer;touch-action:pan-y}.time{display:flex;justify-content:space-between;font-size:10px;color:#9cb0bf;font-variant-numeric:tabular-nums}.transport{display:flex;align-items:center;gap:10px}.transport>button:not(.play){width:44px;flex-shrink:0}.play{flex:1;background:#d5edf1;color:#16323d;font-size:13px;font-weight:600;min-width:110px}.play:hover:not(:disabled){background:#f1fbfd}.play svg{width:17px;height:17px}.rate{display:flex;align-items:center}select{background:#1e303e;border:1px solid #ffffff18;border-radius:10px;min-height:44px;padding:0 8px;font-size:12px;max-width:84px}#loading{position:absolute;z-index:5;left:50%;top:33%;transform:translate(-50%,-50%);background:#101d28ef;border:1px solid #ffffff20;box-shadow:0 10px 45px #0003;border-radius:18px;padding:25px 24px;text-align:center;width:min(330px,86vw)}#load-stage{font-size:15px;margin:14px 0}#load-detail{display:block;font-size:11px;color:#bccbd4;line-height:1.7;margin-top:10px}progress{width:100%;height:5px;border:0;accent-color:#70c9dc}.loading-dot{display:inline-block;width:24px;height:24px;border:2px solid #ffffff25;border-top-color:#70c9dc;border-radius:50%;animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#retry{margin:16px auto 0;padding:0 20px;background:#d5edf1;color:#16323d}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#toast{position:absolute;left:50%;top:100px;transform:translateX(-50%);z-index:9;background:#101d28ed;padding:12px 20px;border-radius:12px;font-size:12px;max-width:90vw;box-shadow:0 3px 18px #0003}#restore-controls{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));z-index:8;padding:0 15px;background:#101d28bd;backdrop-filter:blur(8px);font-size:12px}.immersive .control-panel,.immersive header{display:none}.immersive #viewer{grid-template-rows:1fr}.immersive #restore-controls{display:flex!important}
@media(min-aspect-ratio:1/1){#viewer{display:block}#viewport{height:100%}.control-panel{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(660px,calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)));border:1px solid #ffffff20;border-radius:16px;background:#101d28ed;backdrop-filter:blur(14px);padding:10px 14px;gap:5px;grid-template-columns:170px 1fr;grid-template-areas:"camera info" "camera timeline" "transport transport"}.camera-switch{grid-area:camera;align-self:center}.camera-switch button{font-size:12px;gap:4px}.camera-switch svg{width:18px}.scene-info{grid-area:info;gap:8px}#chapter{font-size:11px}.speed b{font-size:20px}.timeline{grid-area:timeline}.transport{grid-area:transport;gap:8px}.play{max-width:260px;margin:0 auto;min-height:40px}.transport>button:not(.play),select{min-height:40px;height:40px}.time{font-size:9px}header{padding-top:max(12px,env(safe-area-inset-top))}#loading{top:42%}}
@media(min-width:900px) and (min-height:650px){.control-panel{bottom:24px;padding:14px 18px;gap:8px}header{padding:25px 30px}h1{font-size:20px}}
@media(max-width:360px){.control-panel{padding-left:12px;padding-right:12px;gap:7px}.transport{gap:6px}header{padding-left:14px;padding-right:14px}#share span{display:none}}
@media(prefers-reduced-motion:reduce){.loading-dot{animation:none}}
/* Three views remain readable on portrait phones and short landscape screens. */
.camera-switch button{white-space:nowrap;min-width:0;font-size:12px;gap:5px}
.camera-switch svg{width:18px;height:18px}
@media(min-aspect-ratio:1/1){.control-panel{width:min(760px,calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)));grid-template-columns:minmax(270px,1fr) minmax(160px,1fr)}}
@media(max-width:360px){.camera-switch button{font-size:11px;gap:3px}.camera-switch svg{width:16px;height:16px}}
@media(max-height:420px) and (min-aspect-ratio:1/1){header p{display:none}header h1{font-size:15px}.control-panel{bottom:max(8px,env(safe-area-inset-bottom));padding:7px 10px;gap:3px}.transport button,.transport select{min-height:36px;height:36px}.camera-switch button{min-height:38px}}
@media(max-height:420px) and (min-aspect-ratio:1/1){body[data-view-mode=overview] .control-panel{left:auto;right:max(12px,env(safe-area-inset-right));top:80px;bottom:auto;transform:none;width:260px;grid-template-columns:1fr;grid-template-areas:"camera" "info" "timeline" "transport";gap:8px;padding:12px}body[data-view-mode=overview] .transport{flex-wrap:wrap;gap:6px}body[data-view-mode=overview] .play{order:-1;flex-basis:100%;max-width:none}body[data-view-mode=overview] .rate{margin-left:auto}body[data-view-mode=overview] .camera-switch button{font-size:11px;gap:3px}body[data-view-mode=overview] .camera-switch svg{width:15px}}