signal-time-machine { display: block; --stm-progress: 0%; }
.stm-shell { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr); min-height: 590px; overflow: hidden; color: var(--page-paper); background: var(--page-ink); border: 1px solid var(--page-ink); border-radius: 22px 15px 24px 14px; box-shadow: 12px 14px 0 rgba(90,80,188,.16); outline: none; }
.stm-shell:focus-visible { box-shadow: 0 0 0 3px var(--page-cyan), 12px 14px 0 rgba(90,80,188,.16); }
.stm-rail { display: flex; flex-direction: column; min-width: 0; padding: 29px 25px; border-right: 1px solid rgba(255,253,249,.16); }
.stm-rail-label, .stm-kicker, .stm-question span { color: var(--page-coral); font: 10px/1.2 var(--page-mono); letter-spacing: .14em; }
.stm-rail h3 { margin: 24px 0 13px; color: var(--page-paper); font: 700 29px/1.08 Inter,"PingFang SC",sans-serif; letter-spacing: -.06em; }
.stm-rail > p { margin: 0; color: rgba(255,253,249,.62); font-size: 14px; line-height: 1.65; }
.stm-record-link { width:max-content; max-width:100%; margin-top:16px; color:var(--page-coral); font:10px/1.4 var(--page-mono); text-underline-offset:4px; }
.stm-record-link:focus-visible { outline:2px solid var(--page-coral); outline-offset:4px; }
.stm-events { position: relative; display: grid; margin-top: 28px; }
.stm-events::before { content:""; position:absolute; left:7px; top:9px; bottom:9px; width:1px; background:linear-gradient(var(--page-coral),rgba(255,253,249,.2),var(--page-violet)); }
.stm-event { position:relative; z-index:1; display:grid; grid-template-columns:16px 1fr; gap:11px; padding:8px 0; color:rgba(255,253,249,.48); text-align:left; background:none; border:0; cursor:pointer; }
.stm-event > i { width:15px; height:15px; margin-top:1px; border:1px solid rgba(255,253,249,.58); border-radius:50%; background:var(--page-ink); transition:transform 180ms ease-out,background-color 180ms ease; }
.stm-event small { display:block; margin-bottom:3px; color:inherit; font:9px var(--page-mono); }
.stm-event span { font-size:12px; line-height:1.35; }
.stm-event:hover,.stm-event.active { color:var(--page-paper); }
.stm-event:hover > i,.stm-event.active > i { background:var(--page-coral); transform:scale(1.14); }
.stm-controls { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:24px; }
.stm-control { width:36px; height:34px; flex:0 0 auto; display:grid; place-items:center; color:var(--page-paper); background:rgba(255,253,249,.09); border:1px solid rgba(255,253,249,.25); border-radius:9px; cursor:pointer; transition:background-color 180ms ease,transform 120ms ease-out; }
.stm-control:hover { background:rgba(139,124,246,.72); }
.stm-control:active { transform:scale(.96); }
.stm-range-wrap { flex:1; }
.stm-range { width:100%; accent-color:var(--page-violet); }
.stm-panel { position:relative; display:flex; flex-direction:column; min-width:0; padding:30px; color:var(--page-ink); background:linear-gradient(135deg,rgba(255,253,249,.99),rgba(238,239,255,.96)); }
.stm-panel::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at var(--stm-progress) 19%,rgba(139,124,246,.2),transparent 22%); transition:background 360ms var(--ease-out,cubic-bezier(.23,1,.32,1)); }
.stm-top,.stm-body,.stm-progress,.stm-facts,.stm-question { position:relative; z-index:1; }
.stm-top { display:flex; justify-content:space-between; align-items:start; gap:18px; }
.stm-kicker { color:var(--page-brand); }
.stm-status { padding:6px 9px; color:var(--page-ink); background:var(--page-coral); border:1px solid var(--page-ink); border-radius:999px; font:9px var(--page-mono); }
.stm-body { max-width:680px; margin:auto 0; padding:40px 0 26px; }
.stm-title { max-width:690px; margin:0 0 16px; font:700 clamp(31px,4.2vw,56px)/1.04 Inter,"PingFang SC",sans-serif; letter-spacing:-.08em; }
.stm-copy { max-width:620px; margin:0; color:var(--page-muted); font-size:15px; line-height:1.72; }
.stm-evidence-list { display:grid; gap:8px; margin-top:22px; }
.stm-evidence-list div { display:flex; gap:9px; color:var(--page-ink); font-size:13px; line-height:1.45; }
.stm-evidence-list div::before { content:"↗"; color:var(--page-brand); font:11px var(--page-mono); }
.stm-progress { height:5px; margin:8px 0 22px; background:rgba(90,80,188,.14); border-radius:99px; }
.stm-progress span { position:absolute; inset:0 auto 0 0; width:var(--stm-progress); background:linear-gradient(90deg,var(--page-coral),var(--page-violet)); border-radius:99px; transition:width 420ms var(--ease-out,cubic-bezier(.23,1,.32,1)); }
.stm-progress i { position:absolute; top:50%; left:var(--stm-progress); width:13px; height:13px; background:var(--page-paper); border:3px solid var(--page-brand); border-radius:50%; transform:translate(-50%,-50%); transition:left 420ms var(--ease-out,cubic-bezier(.23,1,.32,1)); }
.stm-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.stm-facts > div { padding:14px; background:rgba(255,253,249,.54); border:1px solid var(--page-line); border-radius:11px; }
.stm-facts span { display:block; color:var(--page-muted); font:9px var(--page-mono); }
.stm-facts strong { display:block; margin-top:7px; color:var(--page-brand); font:700 21px/1 Inter,sans-serif; }
.stm-question { margin-top:18px; padding-top:17px; border-top:1px solid var(--page-line); }
.stm-question span { color:var(--page-brand); }
.stm-question p { max-width:650px; margin:7px 0 0; color:var(--page-ink); font:600 15px/1.45 Inter,"PingFang SC",sans-serif; }
.stm-error { padding:28px; color:var(--page-ink); background:var(--page-soft); border:1px solid var(--page-line); border-radius:14px; }
signal-time-machine[compact] .stm-shell { min-height:520px; grid-template-columns:minmax(220px,.58fr) minmax(0,1.42fr); }
signal-time-machine[compact] .stm-rail h3 { font-size:23px; }
signal-time-machine[compact] .stm-title { font-size:clamp(29px,3.5vw,48px); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) {
  .stm-shell { grid-template-columns:1fr; }
  .stm-rail { border-right:0; border-bottom:1px solid rgba(255,253,249,.16); }
  .stm-events { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .stm-events::before { top:8px; right:0; bottom:auto; width:auto; height:1px; }
  .stm-event { grid-template-columns:1fr; gap:7px; padding-right:6px; }
  .stm-controls { margin-top:12px; }
}
@media (max-width:560px) {
  .stm-shell { border-radius:17px 12px 18px 11px; }
  .stm-rail,.stm-panel { padding:21px; }
  .stm-events { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stm-body { padding-top:48px; }
  .stm-facts { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .stm-event > i,.stm-control,.stm-progress span,.stm-progress i { transition:none!important; }
}