/* tooldesign scene (light slide) */
.sc-td { position: absolute; inset: 0; }

/* context gauge */
.sc-td-gauge { position: absolute; left: 0; right: 0; top: 70px; }
.sc-td-gh { display: flex; align-items: baseline; justify-content: space-between; height: 44px; }
.sc-td-gl { font-size: 21px; color: var(--fg2); }
.sc-td-gn { font-family: var(--mono); font-size: 20px; color: var(--mute); }
.sc-td-num { font-family: var(--font); font-size: 40px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sc-td-track { position: relative; height: 18px; margin-top: 8px; border-radius: 9px; background: rgba(0,0,0,.09); }
.sc-td-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 9px; will-change: transform; }
.sc-td-ghost { position: absolute; inset: -4px 0; border: 1.5px dashed rgba(210,59,42,.55); border-radius: 12px; }
.sc-td-ghost-l { position: absolute; right: 0; top: 28px; font-family: var(--mono); font-size: 17px; color: #b84a3a; }

/* cards */
.sc-td-card { position: absolute; left: 0; right: 0; padding: 22px 26px; border-radius: 20px; background: rgba(255,255,255,.62); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 12px 34px rgba(0,0,0,.07); overflow: hidden; }
.sc-td-h { display: flex; align-items: center; gap: 14px; height: 28px; margin-bottom: 22px; white-space: nowrap; }
.sc-td-h code { font-family: var(--mono); font-size: 21px; font-weight: 700; color: #111; }
.sc-td-l { font-size: 15px; font-weight: 700; padding: 5px 11px; border-radius: 7px; color: #fff; background: #5a5a5a; }
.sc-td-card.after .sc-td-l { background: #1c63c4; }
.sc-td-card.err .sc-td-l { background: #222; }
.sc-td-chip { margin-left: auto; font-family: var(--mono); font-size: 18px; font-weight: 700; color: #111; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.06); }
.sc-td-card.before .sc-td-chip { color: #b8402e; background: rgba(224,87,63,.12); }
.sc-td-card.after .sc-td-chip { color: #1c63c4; background: rgba(28,99,196,.1); }
.sc-td-card .t-str { color: #a0620a; } .sc-td-card .t-num { color: #c2410c; } .sc-td-card .t-bi { color: #6d4fd0; }

.sc-td-pre { position: relative; margin: 0; padding: 12px 16px; border-radius: 12px; background: rgba(0,0,0,.05); font-family: var(--mono); font-size: 17px; line-height: 26px; color: #2a2a2a; white-space: pre; }
.sc-td-pre.dim { color: #7a7a7a; }
.sc-td-line { }
.sc-td-f { }
.sc-td-reader { position: absolute; left: 0; top: 0; height: 28px; border-radius: 7px; background: rgba(47,127,224,.16); box-shadow: 0 0 0 1.5px rgba(47,127,224,.55), 0 0 18px rgba(47,127,224,.45); pointer-events: none; }
.sc-td-wrongbox { position: absolute; left: 0; top: 0; height: 3px; border-radius: 2px; background: #d23b2a; pointer-events: none; }
.sc-td-note { margin-top: 14px; font-size: 21px; line-height: 28px; color: #3a3a3a; }

/* error card */
.sc-td-404 { position: relative; display: inline-block; margin-bottom: 12px; padding: 3px 12px; border-radius: 8px; background: rgba(210,59,42,.1); }
.sc-td-404 code { font-family: var(--mono); font-size: 18px; font-weight: 700; color: #b8402e; }
.sc-td-strike { position: absolute; left: 6px; right: 6px; top: 50%; height: 2.5px; margin-top: -1px; background: #b8402e; }
.sc-td-instr { color: #1d1d1d; }
.sc-td-model { display: flex; align-items: flex-start; gap: 14px; margin-top: 14px; }
.sc-td-orb { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #86b9ff, #2f7fe0 55%, #123a6e); box-shadow: 0 0 16px rgba(47,127,224,.6); }
.sc-td-mtext { margin: 0; padding: 10px 16px; border-radius: 14px 14px 14px 4px; background: #1c63c4; color: #fff; font-size: 21px; line-height: 28px; max-width: 900px; }

/* token squares */
.sc-td-toks { position: absolute; inset: 0; pointer-events: none; }
.sc-td-tok { position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: #e0573f; border-radius: 2px; will-change: transform; }

html.story .sc-td-gauge { top: 40px; }