#scenarios .scn-bench { display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
#scenarios .scn-index { position: sticky; top: calc(var(--lg-nav-h) + 16px); display: grid; gap: 20px; }
#scenarios .scn-tabs { display: grid; gap: 6px; }
#scenarios .scn-tab {
position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 1px 14px;
width: 100%; min-height: 64px; padding: 10px 14px 10px 12px; text-align: left;
border: 1px solid transparent; border-radius: var(--lg-r); background: none; color: var(--lg-text-2);
transition: border-color var(--lg-dur), background-color var(--lg-dur), box-shadow var(--lg-dur);
}
#scenarios .scn-tab::before {
content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0;
background: var(--lg-cyan); transform: scaleY(0); transition: transform var(--lg-dur) var(--lg-ease);
}
#scenarios .scn-tab__icon {
grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
border: 1px solid var(--lg-border); background: var(--lg-chip-bg); color: var(--lg-text-3);
transition: color var(--lg-dur), border-color var(--lg-dur);
}
#scenarios .scn-tab__icon .lg-icon { width: 20px; height: 20px; }
#scenarios .scn-tab__area { font: 600 var(--lg-fs-label)/1.3 var(--lg-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-text-3); }
#scenarios .scn-tab__name { font: 650 .96875rem/1.3 var(--lg-font-sans); color: var(--lg-text-2); transition: color var(--lg-dur); }
#scenarios .scn-tab:hover { border-color: var(--lg-border); background: var(--lg-chip-bg); }
#scenarios .scn-tab:hover .scn-tab__name { color: var(--lg-text); }
#scenarios .scn-tab[aria-selected="true"] { border-color: var(--lg-border-hover); background: color-mix(in srgb, var(--lg-blue) 9%, transparent); box-shadow: var(--lg-glow-soft); }
#scenarios .scn-tab[aria-selected="true"]::before { transform: scaleY(1); }
#scenarios .scn-tab[aria-selected="true"] .scn-tab__name { color: var(--lg-text); }
#scenarios .scn-tab[aria-selected="true"] .scn-tab__icon { color: var(--lg-cyan); border-color: color-mix(in srgb, var(--lg-cyan) 55%, transparent); }
#scenarios .scn-tab--ai[aria-selected="true"] .scn-tab__icon { color: var(--lg-purple); border-color: color-mix(in srgb, var(--lg-purple) 55%, transparent); }
#scenarios .scn-tab:focus-visible { outline-offset: 2px; }
#scenarios .scn-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: var(--lg-fs-small); color: var(--lg-text-3); }
#scenarios .scn-console { position: relative; min-width: 0; padding: clamp(20px, 2.6vw, 36px); border: 1px solid var(--lg-border); border-radius: var(--lg-r-lg); background: var(--lg-card-bg); box-shadow: var(--lg-card-shadow); }
#scenarios .scn-panel { padding-top: 0; }
#scenarios .scn-panel:not([hidden]) ~ .scn-panel:not([hidden]) { margin-top: var(--lg-space-8); }
#scenarios .scn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
#scenarios .scn-meta .lg-label { margin-right: auto; color: var(--lg-cyan); }
#scenarios .scn-title { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.95rem); max-width: 30ch; margin-bottom: 20px; }
#scenarios .scn-ticket { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--lg-border); border-radius: var(--lg-r); overflow: hidden; }
#scenarios .scn-ticket__half { display: grid; align-content: start; justify-items: start; gap: 8px; padding: 16px 20px 18px; }
#scenarios .scn-ticket__half--hold {
border-left: 1px dashed var(--lg-border-strong);
background: linear-gradient(100deg, color-mix(in srgb, var(--lg-critical) 9%, transparent), color-mix(in srgb, var(--lg-critical) 3%, transparent));
}
#scenarios .scn-ticket__text { color: var(--lg-text); font-size: .975rem; line-height: 1.5; }
#scenarios .scn-stage { margin: 24px 0 0; }
#scenarios .scn-screen { border: 1px solid var(--lg-border); border-radius: var(--lg-r); background-color: var(--lg-code-bg); }
#scenarios .scn-screen__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 48px; padding: 10px 14px; border-bottom: 1px solid var(--lg-border); }
#scenarios .scn-rec { display: inline-flex; align-items: center; gap: 9px; font: 600 var(--lg-fs-label)/1.3 var(--lg-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-text-3); }
#scenarios .scn-rec::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--lg-cyan); }
#scenarios .scn-view {
position: relative; overflow: hidden; padding: clamp(8px, 2vw, 20px); border-radius: 0 0 var(--lg-r) var(--lg-r);
background-image: linear-gradient(var(--lg-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--lg-grid-line) 1px, transparent 1px);
background-size: 24px 24px; background-position: center;
}
#scenarios .scn-svg { width: 100%; max-width: 700px; height: auto; margin-inline: auto; overflow: visible; }
#scenarios .scn-beam {
position: absolute; inset: 0; pointer-events: none; opacity: 0;
background: linear-gradient(90deg, transparent 55%, color-mix(in srgb, var(--lg-cyan) 12%, transparent) 96%, var(--lg-cyan) 99.4%, transparent 99.8%);
}
#scenarios .scn-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
#scenarios .scn-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--lg-border-strong); border-radius: 13px; background: var(--lg-input-bg); }
#scenarios .scn-seg__btn {
min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--lg-text-2);
font: 700 .75rem/1 var(--lg-font-mono); letter-spacing: .1em; text-transform: uppercase;
transition: background-color var(--lg-dur), color var(--lg-dur), box-shadow var(--lg-dur);
}
#scenarios .scn-seg__btn:hover { color: var(--lg-text); }
#scenarios .scn-seg__btn[aria-pressed="true"] { color: var(--lg-text); background: color-mix(in srgb, var(--lg-blue) 18%, transparent); box-shadow: inset 0 0 0 1px var(--lg-border-hover); }
#scenarios .scn-replay .lg-icon:last-child { transform: none; }
#scenarios .scn-stage:not([data-scn-mode="fixed"]) .scn-fixed,
#scenarios .scn-stage[data-scn-mode="fixed"] .scn-built { display: none; }
#scenarios .scn-svg text { font-family: var(--lg-font-mono); font-size: 13px; font-weight: 500; fill: var(--lg-text-2); }
#scenarios .scn-svg .scn-h { font-size: 11px; font-weight: 700; letter-spacing: .12em; fill: var(--lg-text-3); }
#scenarios .scn-svg .scn-c { font-size: 12px; font-weight: 600; fill: var(--lg-text); white-space: pre; }
#scenarios .scn-svg .scn-s { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; fill: var(--lg-text-3); }
#scenarios .scn-svg .scn-big { font: 800 24px/1 var(--lg-font-sans); letter-spacing: -.02em; fill: var(--lg-text); }
#scenarios .scn-svg .scn-sym { font: 800 20px/1 var(--lg-font-sans); }
#scenarios .scn-svg .scn-hi { fill: var(--lg-text); font-weight: 700; }
#scenarios .scn-svg .scn-dim { fill: var(--lg-text-3); }
#scenarios .scn-svg .scn-bad { fill: var(--lg-critical); }
#scenarios .scn-svg .scn-ok { fill: var(--lg-success); }
#scenarios .scn-svg .scn-ai { fill: var(--lg-purple); }
#scenarios .scn-svg .scn-on { fill: var(--lg-on-primary); }
#scenarios .scn-svg .scn-ico { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--lg-text-3); }
#scenarios .scn-svg .scn-ico.scn-ok { color: var(--lg-success); fill: none; }
#scenarios .scn-svg .scn-ico.scn-ai { color: var(--lg-purple); fill: none; }
#scenarios .scn-node { fill: var(--lg-surface); stroke: var(--lg-border-strong); stroke-opacity: .65; stroke-width: 1.25; }
#scenarios .scn-node--ai { stroke: var(--lg-purple); stroke-opacity: .8; fill: color-mix(in srgb, var(--lg-purple) 7%, var(--lg-surface)); }
#scenarios .scn-rule { stroke: var(--lg-border); stroke-width: 1; }
#scenarios .scn-wire { fill: none; stroke: var(--lg-muted); stroke-width: 1.5; stroke-dasharray: 3 5; }
#scenarios .scn-head { fill: none; stroke: var(--lg-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#scenarios .scn-tag { fill: var(--lg-surface-2); stroke: var(--lg-border-strong); stroke-width: 1.25; }
#scenarios .scn-tag--bad { fill: color-mix(in srgb, var(--lg-critical) 12%, var(--lg-surface)); stroke: var(--lg-critical); }
#scenarios .scn-tag--ok { fill: color-mix(in srgb, var(--lg-success) 12%, var(--lg-surface)); stroke: var(--lg-success); }
#scenarios .scn-hl { fill: color-mix(in srgb, var(--lg-cyan) 10%, transparent); stroke: color-mix(in srgb, var(--lg-cyan) 55%, transparent); stroke-width: 1; }
#scenarios .scn-field { fill: var(--lg-input-bg); stroke: var(--lg-border-strong); stroke-width: 1; }
#scenarios .scn-btn { fill: var(--lg-blue); }
#scenarios .scn-bar { fill: var(--lg-track); }
#scenarios .scn-bar-ok { fill: var(--lg-success); }
#scenarios .scn-cell { fill: var(--lg-track); }
#scenarios .scn-key { fill: var(--lg-chip-bg); stroke: var(--lg-border-strong); stroke-width: 1; }
#scenarios .scn-strike { stroke: var(--lg-critical); stroke-width: 2; stroke-linecap: round; }
#scenarios .scn-dot { fill: var(--lg-muted); }
#scenarios .scn-dot--bad { fill: var(--lg-critical); }
#scenarios .scn-dot--ok { fill: var(--lg-success); }
#scenarios .scn-hidden { fill: color-mix(in srgb, var(--lg-purple) 7%, transparent); stroke: var(--lg-purple); stroke-width: 1.25; stroke-dasharray: 4 4; }
#scenarios .scn-path-bad { fill: none; stroke: var(--lg-critical); stroke-width: 2.5; stroke-linecap: round; }
#scenarios .scn-focus { fill: none; stroke: var(--lg-focus); stroke-width: 2.5; }
#scenarios .scn-trap { fill: none; stroke: var(--lg-critical); stroke-width: 2; stroke-dasharray: 5 4; }
#scenarios .scn-ghost { opacity: 0; }
:root[data-theme="dark"] #scenarios .scn-tag--bad,
:root[data-theme="dark"] #scenarios .scn-path-bad { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lg-critical) 45%, transparent)); }
:root[data-theme="dark"] #scenarios .scn-tag--ok,
:root[data-theme="dark"] #scenarios .scn-focus { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--lg-focus) 40%, transparent)); }
#scenarios .scn-a-pop, #scenarios .scn-a-strike { transform-box: fill-box; transform-origin: center; }
#scenarios .scn-a-strike { transform-origin: left center; }
#scenarios .scn-late { --t: 1.6s; }
#scenarios .scn-stage[data-scn-mode="fixed"] .scn-late { --t: .3s; }
#scenarios .scn-chip { --t: 2.6s; }
#scenarios .is-playing .scn-a-in { animation: scn-in .5s var(--lg-ease) var(--t, 0s) both; }
#scenarios .is-playing .scn-a-pop { animation: scn-pop .55s var(--lg-ease) var(--t, 0s) both; }
#scenarios .is-playing .scn-a-move { animation: scn-move .8s var(--lg-ease-in-out) var(--t, 0s) both; }
#scenarios .is-playing .scn-a-strike { animation: scn-strike .35s var(--lg-ease) var(--t, 0s) both; }
#scenarios .is-playing .scn-ghost { animation: scn-blip .55s linear var(--t, 0s) both; }
#scenarios .is-playing .scn-beam { animation: scn-sweep 1.1s var(--lg-ease-in-out) 1.6s both; }
#scenarios .is-playing .scn-chip { animation: scn-in .4s var(--lg-ease) var(--t) both, lg-pulse-once 1.1s var(--lg-ease) calc(var(--t) + .3s) 1; }
@keyframes scn-in { from { opacity: 0; } }
@keyframes scn-pop { from { opacity: 0; transform: scale(.7); } 70% { opacity: 1; transform: scale(1.04); } }
@keyframes scn-move { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)); } 25% { opacity: 1; } }
@keyframes scn-strike { from { transform: scaleX(0); } }
@keyframes scn-blip { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } }
@keyframes scn-sweep { 0% { opacity: 1; transform: translateX(-100%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } }
#scenarios .scn-detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px 40px; margin-top: 28px; }
#scenarios .scn-readout { margin: 0; border-top: 1px solid var(--lg-border); }
#scenarios .scn-readout > div { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0 12px 14px; border-bottom: 1px solid var(--lg-border); }
#scenarios .scn-readout > div[data-status]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--lg-tone); }
#scenarios .scn-readout dt { padding-top: 3px; font: 600 var(--lg-fs-label)/1.4 var(--lg-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-text-3); }
#scenarios .scn-readout dd { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--lg-text-2); overflow-wrap: anywhere; }
#scenarios .scn-readout dd .lg-status { margin: 0 6px 4px 0; vertical-align: middle; }
#scenarios .scn-why { display: grid; align-content: start; justify-items: start; gap: 12px; }
#scenarios .scn-why .lg-label { margin-bottom: -2px; }
#scenarios .scn-more { margin-left: -10px; }
@media (max-width: 1199.98px) {
#scenarios .scn-detail { grid-template-columns: 1fr; }
}
@media (max-width: 899.98px) {
#scenarios .scn-bench { grid-template-columns: 1fr; }
#scenarios .scn-index { position: static; gap: 14px; }
#scenarios .scn-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#scenarios .scn-tab { min-height: 60px; align-content: center; }
}
@media (max-width: 719.98px) {
#scenarios .scn-console { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
#scenarios .scn-stage { margin-inline: calc(-1 * var(--lg-gutter)); }
#scenarios .scn-screen { border-radius: 0; border-inline: 0; }
#scenarios .scn-screen.lg-frame::before { display: none; }
#scenarios .scn-view { border-radius: 0; padding: 10px 6px; }
#scenarios .scn-controls { padding-inline: var(--lg-gutter); }
#scenarios .scn-ticket { grid-template-columns: 1fr; }
#scenarios .scn-ticket__half--hold { border-left: 0; border-top: 1px dashed var(--lg-border-strong); }
}
@media (max-width: 559.98px) {
#scenarios .scn-tab { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
#scenarios .scn-tab__icon { display: none; }
#scenarios .scn-tab__name { font-size: .9rem; }
#scenarios .scn-readout > div { grid-template-columns: 1fr; padding-left: 12px; }
#scenarios .scn-controls { column-gap: 12px; }
#scenarios .scn-seg__btn { padding: 0 12px; }
#scenarios .scn-replay { padding-inline: 10px; }
#scenarios .scn-svg text { font-size: 14.5px; }
#scenarios .scn-svg .scn-c { font-size: 12.5px; }
#scenarios .scn-svg .scn-s { font-size: 11.5px; letter-spacing: .06em; }
#scenarios .scn-svg .scn-h { font-size: 12px; letter-spacing: .08em; }
}
@media (max-height: 759.98px) {
#scenarios .scn-index { position: static; }
}
:root:not([data-theme]) #scenarios .scn-bench { display: block; }
:root:not([data-theme]) #scenarios .scn-index .scn-tabs { display: none; }
:root:not([data-theme]) #scenarios .scn-index { position: static; margin-bottom: 24px; }
@media (prefers-reduced-motion: reduce) {
#scenarios .scn-replay { display: none; }
#scenarios .scn-tab::before { transition: none; }
}
@media (forced-colors: active) {
#scenarios .scn-tab[aria-selected="true"] { outline: 2px solid Highlight; }
#scenarios .scn-seg__btn[aria-pressed="true"] { outline: 2px solid Highlight; }
}