:root{--num:"JetBrains Mono","Inter","SF Pro Text",system-ui,monospace;--ac:#2D385F;--ac-bg:#eceff6;--pri:#2D385F;--pri-h:#384878}
.top .mark{background:#2D385F}
.wb{word-break:keep-all;overflow-wrap:anywhere}
.hw{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.camc{overflow:hidden}
.cam{position:relative;aspect-ratio:16/9;background:#000}
.cam img{position:absolute;inset:0;width:100%;height:100%;display:block}
.cam canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.66;transition:opacity .3s}
.cam.raw canvas,.cam.raw .tg{opacity:0}
.hud{position:absolute;left:14px;top:12px;display:flex;gap:14px;background:rgba(10,12,18,.74);color:#fff;font-size:13px;font-weight:700;padding:7px 12px;border-radius:6px}
.hud .rec::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:6px;vertical-align:1px}
.tg{position:absolute;transform:translate(-50%,-50%);background:rgba(10,12,18,.88);color:#d5d8df;border:0;border-radius:8px;padding:7px 11px;font-size:12px;line-height:1.35;text-align:left;transition:opacity .3s;white-space:nowrap}
.tg b{display:block;color:#fff;font:700 19px var(--num)}
.tg.on{box-shadow:0 0 0 2px #fff}
.lgd{position:absolute;left:14px;bottom:12px;background:rgba(10,12,18,.8);color:#fff;font-size:12px;padding:8px 12px;border-radius:8px;width:240px}
.lgd i{display:block;height:9px;border-radius:5px;margin:6px 0 3px;background:linear-gradient(90deg,#2b59c3,#29b6b0,#f2d43c,#f08a24,#d7301f)}
.lgd .s{display:flex;justify-content:space-between;color:#c9cbd2;font-size:11px}
.cops{display:flex;gap:10px;padding:12px 14px;flex-wrap:wrap;border-top:1px solid var(--ln)}
.rk{list-style:none;margin:0 0 14px;padding:0}
.rk li{display:grid;grid-template-columns:22px 1fr auto;gap:4px 10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--ln2);font-size:13px;cursor:pointer}
.rk li:last-child{border:0}.rk li.on b.n{color:#d7301f}
.rk .n{font:700 13px var(--num);color:var(--mu)}.rk .v{font:700 13px var(--num)}.rk .meter{grid-column:2/4}
.rk .up2{color:#b42318;font:600 11.5px var(--num)}.rk .dn2{color:#2563c9;font:600 11.5px var(--num)}
.tl{height:280px}
svg.plot .c1{stroke:#2D385F}svg.plot .c1.ar{fill:#2D385F}svg.plot .c2{stroke:#9aa3b5}
.legend .c1 i{background:#2D385F}.legend .c2 i{background:#9aa3b5}
.hb2{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#29b6b0,#f2d43c,#d7301f);min-width:20px}
.sg{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--ln2)}.sg:last-child{border:0}
.sg .ico{width:34px;height:34px;border-radius:8px;background:var(--ac-bg);color:var(--ac);display:grid;place-items:center;flex:none}
.sg b{display:block;font-size:14px}.sg p{margin:2px 0 8px;font-size:13px;color:var(--ink2);line-height:1.7}
@media (max-width:1100px){.hw{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.tg{padding:3px 6px;font-size:0}.tg b{font-size:12px}.lgd{display:none}.hud{font-size:11px;gap:8px;padding:5px 8px}.hud .num{display:none}.cops .seg{width:100%;overflow-x:auto}.cops .seg button{flex:1}}
/* スマホの上部バー（タブを2段目に） */
@media (max-width:640px){
  .top-in{flex-wrap:wrap;height:auto;padding:10px 12px 0;row-gap:4px}
  .tabs{order:3;width:100%;margin:0;height:40px}.tabs button{flex:1;justify-content:center;padding:0 4px;font-size:12px}.tabs button svg.i{display:none}
}