:root {
  --paper:#f3f5f7; --ink:#16243a; --soft:#52627a; --line:#cfd6df;
  --plum:#7a1f5c; --plum-soft:#f0dbe8; --amber:#b86a00; --green:#1f6b4a; --green-soft:#dcece4;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:#fff; font-family:var(--sans); color:var(--ink); }
#frame { background:#fff; padding:28px 30px; width:1180px; }
h1 { font-size:19px; font-weight:600; margin:0 0 4px; letter-spacing:-0.01em; }
.sub { color:var(--soft); font-size:13px; margin:0 0 22px; }
.row { display:flex; gap:14px; align-items:stretch; }
.col { display:flex; flex-direction:column; gap:14px; }
.box { border:1.5px solid var(--line); border-radius:7px; background:#fff; padding:11px 13px; }
.box .t { font-weight:600; font-size:13.5px; letter-spacing:-0.005em; }
.box .d { color:var(--soft); font-size:11.5px; margin-top:3px; line-height:1.45; }
.box .k { font-family:var(--mono); font-size:10.5px; color:var(--soft); margin-top:5px; }
.ink { border-color:var(--ink); }
.plum { border-color:var(--plum); background:#fdf7fb; }
.plum .t { color:var(--plum); }
.green { border-color:var(--green); background:#f4faf7; }
.green .t { color:var(--green); }
.amber { border-color:var(--amber); background:#fffaf2; }
.amber .t { color:var(--amber); }
.muted { background:var(--paper); }
.band { border:1.5px dashed var(--line); border-radius:9px; padding:13px; background:#fcfdfe; }
.band > .lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--soft); font-weight:600; margin-bottom:9px; }
.arrow { display:flex; align-items:center; justify-content:center; color:var(--soft); font-size:17px; padding:0 2px; }
.arrow.down { justify-content:flex-start; padding:1px 0 1px 18px; }
.note { font-size:11px; color:var(--soft); font-style:italic; margin-top:9px; }
.pill { display:inline-block; font-size:10.5px; font-family:var(--mono); padding:1.5px 6px; border-radius:10px; background:var(--paper); color:var(--soft); border:1px solid var(--line); }
.pill.on { background:var(--green-soft); color:var(--green); border-color:var(--green); }
.pill.off { background:var(--plum-soft); color:var(--plum); border-color:var(--plum); }