/* ---- Stage ---- */
.stage{position:relative;flex:1 1 auto;min-height:0;z-index:1;container-type:size}
/* Initial geometry matches stage.js layout() exactly, so nothing shifts when JS takes over (CLS 0). */
.stage .slide{--cap:106cqw;--g:clamp(56px,12cqh,150px);--h:min(calc((110cqh - var(--g)) / .951),calc(var(--cap) * .743652));
  position:absolute;height:var(--h);width:calc(var(--h) * 1.344714);top:calc(110cqh - var(--h));left:calc(50cqw - var(--h) * .672357);max-width:none;z-index:3;pointer-events:none;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
@container (max-width:599px){.stage .slide{--cap:142cqw;--g:clamp(52px,13cqh,110px)}}
.stage[data-cap="1.0"] .slide{--cap:100cqw}
.stage[data-cap="0.9"] .slide{--cap:90cqw}
.stage[data-cap="1.05"] .slide{--cap:105cqw}
.stage .rui{visibility:hidden}
.stage.laid .rui{visibility:visible}
.stage .slide img{width:100%;height:100%}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage .rings{z-index:2}
.stage .glow{z-index:4;mix-blend-mode:screen}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:26%;z-index:5;background:linear-gradient(to top,#000 8%,rgba(0,0,0,0));pointer-events:none}

/* ---- Background record screen ---- */
.rui{position:absolute;z-index:1;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:var(--side,150px) 1fr var(--side,150px);grid-template-rows:auto 1fr var(--chart-h,160px);
  column-gap:0;padding:0 2px;border-radius:24px;font-size:11px;color:var(--ui-text);user-select:none;letter-spacing:0;
  background:linear-gradient(180deg,rgba(14,15,18,.78),rgba(1,2,3,.2) 85%);
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 70%,transparent),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.rui::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ui-line);pointer-events:none}
.rui-bar{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:10px;height:38px;padding:0 max(8%,30px);border-bottom:1px solid var(--ui-line)}
.rui-brand{height:9px;width:auto;color:var(--ui-silver);flex:none}
.rui-id{font-weight:500;color:var(--ui-text);font-size:11px}
.rui-rec{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 8px;border-radius:999px;background:var(--ui-glass);color:var(--ui-signal);font-weight:400;font-size:10px}
.rui-tag{display:inline-flex;align-items:center;height:16px;padding:0 7px;border-radius:999px;background:rgba(255,51,232,.14);color:var(--ui-signal);font-size:8.5px;font-weight:500}
.rui-sample{margin-left:auto;font-size:8.5px;font-weight:500;color:var(--ui-silver)}
.rui-rec i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:blink 1.4s infinite}
.rui-clock{color:var(--ui-silver);font-size:10.5px}
@keyframes blink{50%{opacity:.25}}
.rui-l,.rui-r{grid-row:2;display:flex;flex-direction:column;gap:14px;padding:16px 10px 10px max(8%,26px);min-width:0;overflow:hidden}
.rui-l{grid-column:1}
.rui-r{grid-column:3;padding:16px max(8%,26px) 10px 10px}
.rui-r{text-align:right;align-items:flex-end}
.rui-m{min-width:0;width:100%}
.rui-m label{display:block;font-size:9px;letter-spacing:.02em;text-transform:uppercase;color:var(--ui-slate);font-weight:500}
.rui-m b{display:block;font-size:26px;letter-spacing:0;font-weight:300;color:var(--ui-text);line-height:1.1;margin-top:3px}
.rui-m small{display:block;font-size:10px;color:var(--ui-silver);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rui-m svg{width:100%;height:20px;margin-top:6px;overflow:visible}
.rui-chart{grid-column:1/-1;grid-row:3;width:100%;height:100%;overflow:visible;opacity:.95}
.rui-log{display:flex;flex-direction:column;gap:1px;margin-top:2px;width:100%}
.rui-row{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:9.5px;color:var(--ui-slate);white-space:nowrap;overflow:hidden;animation:rowIn .6s var(--ease);border-top:1px solid var(--ui-line)}
.rui-row::after{content:"";order:-1;width:5px;height:5px;border-radius:50%;background:var(--ui-slate);flex:none}
.rui-row:first-child::after{background:var(--ui-signal)}
.rui-row:first-child{color:var(--ui-text)}
.rui-row span:first-child{color:var(--ui-silver)}
.rui-row span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis}
.rui-row .who{display:none}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rui-chain{display:flex;gap:3px;justify-content:flex-end;margin-top:7px}
.rui-chain i{width:8px;height:12px;border-radius:2px;background:var(--ui-glass);box-shadow:inset 0 0 0 1px var(--ui-line);transition:background .5s,box-shadow .5s}
.rui-chain i.on{background:var(--ui-signal);box-shadow:none}
.rui.narrow .rui-l,.rui.narrow .rui-r{visibility:hidden}

.rui-m b .u{font-size:.46em;font-weight:400;color:var(--ui-silver);margin-left:3px;letter-spacing:0}
.rui-chart .ticks rect{fill:var(--ui-slate)}
.rui-chart .ticks rect.s{fill:var(--ui-signal)}