:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#020817;--surface:#071f34b8;--line:#80cfff61;--text:#f5fcff;--muted:#a9c6d4;--cyan:#55e8ff;--cam-a:#4da3ff;--cam-b:#ff9a3c;--live:#62efbd;--replay:#c5a3ff;--offline:#ff596d;--danger:#ff596d;--mock:#ffd84d;--accent:#c8d3dc;background:var(--bg);color:var(--text);font-family:Noto Sans JP,Yu Gothic UI,system-ui,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0}body{background:radial-gradient(circle at 67% 38%,#103f5a 0,#061a30 38%,#020817 76%);min-height:100vh;font-size:15px;line-height:1.5}h1,h2,p{margin:0}button{font:inherit}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.mono{font-family:ui-monospace,monospace}[data-accent=a]{--accent:var(--cam-a)}[data-accent=b]{--accent:var(--cam-b)}.app-header{background:linear-gradient(150deg,#092039f0,#030f21f5);border-bottom:2px solid #55e8ff7a;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 28px;padding:12px 16px;display:flex}.app-kicker{color:#9defff;letter-spacing:.08em;margin-bottom:2px;font-size:clamp(11px,.78vw,15px);font-weight:800;display:block}.title-block h1{letter-spacing:-.02em;font-size:clamp(20px,2.2vw,30px);line-height:1.1}.app-subtitle{white-space:nowrap;margin-left:.8em;font-size:66.667%;display:inline-block}@media (max-width:1023.98px){.app-subtitle{margin:.3em 0 0;display:block}}.meta-list{color:var(--muted);flex-wrap:wrap;gap:2px 16px;margin:6px 0 0;font-size:13px;display:flex}.meta-list div{gap:6px;display:flex}.meta-list dd{color:var(--text);margin:0;font-weight:700}.window-block{flex-direction:column;gap:6px;min-width:0;display:flex}.window-selector{border:0;min-width:0;margin:0;padding:0}.window-selector legend{color:var(--muted);margin-bottom:4px;padding:0;font-size:13px}.segmented{border:1px solid var(--line);border-radius:8px;display:inline-flex;overflow:hidden}.segmented label{position:relative}.segmented input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.segmented span{border-left:1px solid var(--line);text-align:center;min-width:92px;padding:6px 14px;font-weight:700;display:block}.segmented label:first-child span{border-left:0}.segmented input:checked+span{box-shadow:inset 0 -3px 0 var(--cyan);color:#fff;background:#55e8ff33}.segmented input:checked+span:before{content:"✓ "}.segmented input:focus-visible+span{outline-offset:-4px;outline:2px solid #fff}.range-block{font-size:13px}.range-title{color:var(--muted)}.range-list{margin:2px 0 0;padding:0;list-style:none}.range-item{flex-wrap:wrap;gap:0 8px;display:flex}.range-camera{color:var(--accent);font-weight:800}.range-value{font-family:ui-monospace,monospace}.clock-block{text-align:right;flex-direction:column;align-items:flex-end;display:flex}.clock-label,.last-update{color:var(--muted);font-size:12px}.clock{font:800 clamp(18px,1.8vw,24px) ui-monospace,monospace}.banner{border:2px solid;border-left-width:10px;border-radius:8px;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:10px 16px 0;padding:8px 14px;display:flex}.banner-mock{border-color:var(--mock);background:#ffd84d1f}.banner-mock strong{color:var(--mock)}.banner-mock strong:before{content:"◆ "}.banner-info{border-color:var(--cyan);background:#55e8ff1a}.banner-info strong{color:#cdefff}.banner-info strong:before{content:"● "}.banner-error{border-color:var(--danger);background:#ff596d26}.banner-error strong{color:#ffd0d6}.banner-error strong:before{content:"▲ "}.camera-tabs{gap:8px;margin:12px 16px 0;display:flex}.camera-tab{border:1px solid var(--line);border-top:6px solid var(--accent);min-width:0;color:var(--muted);cursor:pointer;text-align:left;background:#071f3473;border-bottom:0;border-radius:8px 8px 0 0;flex-direction:column;flex:1 1 0;align-items:flex-start;gap:2px;padding:8px 12px;display:flex}.camera-tab[aria-selected=true]{background:var(--surface);color:var(--text)}.camera-tab[aria-selected=true] .tab-name:before{content:"▸ "}.camera-tab:focus-visible{outline-offset:-4px;outline:2px solid #fff}.tab-name{font-size:16px;font-weight:800}.tab-mode{font-size:12px;font-weight:700}.panels{gap:16px;padding:12px 16px 16px;display:grid}.camera-panel{border:1px solid var(--line);border-top:6px solid var(--accent);background:var(--surface);border-radius:10px;flex-direction:column;gap:10px;min-width:0;padding:12px 14px 14px;display:flex}.panel-head{flex-wrap:wrap;align-items:center;gap:6px 12px;display:flex}.panel-title{align-items:center;gap:8px;font-size:clamp(18px,1.7vw,24px);line-height:1.2;display:flex}.accent-mark{background:var(--accent);border-radius:3px;flex:none;width:14px;height:14px}.badges{flex-wrap:wrap;gap:6px;margin-left:auto;display:flex}.mode-badge,.origin-badge{letter-spacing:.04em;white-space:nowrap;border:2px solid #0000;align-items:center;padding:2px 10px;font-size:14px;font-weight:900;display:inline-flex}.mode-live{background:var(--live);color:#03140d;border-radius:999px}.mode-replay{border-color:var(--replay);color:var(--replay);background:#c5a3ff1f;border-radius:6px}.mode-offline{border-color:var(--offline);color:#ffd0d6;background:#ff596d33;border-radius:0}.mode-unknown{border-color:var(--muted);color:var(--muted);border-style:dashed;border-radius:0}.origin-badge{letter-spacing:0;border-radius:4px;font-size:13px;font-weight:700}.origin-synthetic{border:2px dashed var(--mock);color:var(--mock)}.mode-detail{color:#d9edf5;flex-wrap:wrap;flex-basis:100%;gap:2px 16px;font-size:14px;display:flex}.detail-reason{color:#ffb3bd;font-weight:700}.panel-alert{border:2px solid var(--danger);background:#ff596d29;border-left-width:10px;border-radius:8px;flex-wrap:wrap;gap:2px 12px;padding:8px 12px;display:flex}.panel-alert strong{color:#ffd0d6}.panel-alert strong:before{content:"▲ "}.panel-notice{border:1px dashed var(--mock);color:#ffe9a6;border-radius:8px;flex-direction:column;padding:6px 12px;font-size:13px;display:flex}.layer-toggles{border:0;flex-wrap:wrap;gap:6px;min-width:0;margin:0;padding:0;display:flex}.layer-toggles label{border:1px solid var(--line);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:4px 12px 4px 8px;font-size:14px;font-weight:700;display:inline-flex}.layer-toggles input{width:18px;height:18px;accent-color:var(--accent);margin:0}.layer-toggles label:has(input:checked){border-color:var(--accent);background:#ffffff14}.layer-toggles label:has(input:focus-visible){outline-offset:1px;outline:2px solid #fff}.canvas-frame{position:relative}.camera-canvas{aspect-ratio:8/5;border:1px solid var(--accent);background:#061727;border-radius:10px;width:100%;max-width:100%;height:auto;display:block}.canvas-message{border:1px solid var(--line);text-align:center;background:#020817db;border-radius:8px;max-width:90%;padding:8px 16px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.coordinate-caption{border-left:4px solid var(--cyan);color:#cdefff;background:#55e8ff14;padding:4px 10px;font-size:13px;font-weight:700}.legend{color:var(--muted);flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;font-size:13px;list-style:none;display:flex}.legend li{align-items:center;gap:6px;display:flex}.sym{flex:none;display:inline-block}.sym-position{border:3px solid var(--accent);background:#fff;border-radius:50%;width:14px;height:14px}.sym-track{border-top:3px solid var(--accent);width:28px}.sym-heat{background:linear-gradient(90deg,#043c8b66,#05d60cbd,#fa8d2e);width:30px;height:11px}.stats{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;margin:0;display:grid}.stat{border:1px solid var(--line);border-left:6px solid var(--accent);background:#0212238c;border-radius:6px;min-width:0;padding:6px 10px}.stat dt{color:var(--muted);font-size:12px}.stat dd{overflow-wrap:anywhere;margin:0;font:800 18px ui-monospace,monospace}.stat-wide{grid-column:1/-1}.stat-wide dd{font-size:15px}.stat.is-alert{border-color:var(--danger);background:#ff596d33;border-left-width:10px}.stat.is-alert dt,.stat.is-alert dd{color:#ffd0d6}.camera-panel.is-stale .canvas-frame,.camera-panel.is-stale .legend,.camera-panel.is-stale .stats{opacity:.45}.empty-list{color:var(--muted);margin:24px 16px}.app-footer{color:var(--muted);padding:4px 16px 20px;font-size:12px}@media (max-width:1023.98px){.panels{padding-top:0}.camera-panel{border-top-left-radius:0;border-top-right-radius:0}.camera-panel:not(.is-active){display:none}.clock-block{text-align:left;align-items:flex-start}.segmented span{min-width:76px;padding:6px 10px}}@media (min-width:1024px){.camera-tabs{display:none}.panels{grid-template-columns:repeat(2,minmax(0,1fr))}}.signin{justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.signin-card{border:1px solid var(--line);background:var(--surface);border-radius:14px;flex-direction:column;gap:6px;width:min(420px,100%);padding:24px;display:flex}.signin-card h1{letter-spacing:.04em;margin:0;font-size:20px}.signin-lead{color:var(--muted);margin:0 0 10px;font-size:13px;line-height:1.6}.signin-card label{color:var(--muted);font-size:13px}.signin-card input{border:1px solid var(--line);color:var(--text);font:inherit;background:#02081799;border-radius:8px;padding:10px 12px}.signin-card input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}.signin-card input:disabled{opacity:.6}.signin-error{border:1px solid var(--danger);color:#ffd0d6;background:#ff596d26;border-radius:8px;margin:8px 0 0;padding:8px 12px;font-size:13px}.signin-submit{border:1px solid var(--cyan);color:var(--text);font:inherit;cursor:pointer;background:#55e8ff29;border-radius:8px;margin-top:14px;padding:11px 16px;font-weight:700}.signin-submit:disabled{cursor:progress;opacity:.6}.signin-note{color:var(--muted);margin:14px 0 0;font-size:12px;line-height:1.7}.account-block{border-left:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px 16px;padding-left:16px;display:flex}.site-select,.site-single{color:var(--muted);align-items:center;gap:6px;margin:0;font-size:13px;display:flex}.site-select select{border:1px solid var(--line);color:var(--text);font:inherit;background:#02081799;border-radius:8px;padding:6px 10px}.site-single .mono{color:var(--text);font-weight:700}.signout{border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer;background:0 0;border-radius:8px;padding:7px 14px}.signout:hover{border-color:var(--cyan)}.app-loading,.app-message{min-height:60vh;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.app-message .banner{margin:0}.plan-block{border:1px solid var(--line);background:var(--surface);border-radius:10px;margin:12px 16px 0;padding:10px 14px}.plan-head{flex-wrap:wrap;align-items:baseline;gap:6px 14px;display:flex}.plan-head h2{letter-spacing:.04em;margin:0;font-size:14px}.plan-toggle{color:var(--muted);align-items:center;gap:6px;font-size:13px;display:flex}.plan-note{color:var(--muted);font-size:12px}.plan-image{background:#fff;border-radius:8px;width:100%;max-width:900px;margin:10px auto 0;display:block}