@import url('./styles.css');
.experiment main { max-width: 1120px; padding-top: 22px; }
.experiment h1 { font-size: clamp(42px,5.5vw,62px); margin-bottom: 28px; }
.scenarios { display: flex; justify-content: center; gap: 6px; }
.scenarios button { min-height: 44px; padding: 12px 23px; border-radius: 25px; color: #adb5a3; font-size: 13px; }
.scenarios button[aria-pressed="true"] { background: #252c1f; color: #d4e6be; }
.scenarios button:hover { color: #e1edda; }
.action-stage { max-width: 780px; margin: 7px auto 0; text-align: center; }
#scene { width: 100%; }
#scene > svg { display: block; width: 100%; height: auto; overflow: visible; }
.route-base { fill: none; stroke: #394332; stroke-width: 1; }
.route-progress { fill: none; stroke: #bdda9f; stroke-width: 2; stroke-dasharray: 374; stroke-dashoffset: 374; transition: stroke-dashoffset .55s cubic-bezier(.2,.7,.2,1), stroke .2s; }
.gate-bg { fill: #101010; }
.route-gate { opacity: .35; transition: opacity .2s; }
.gate-cross { display: none; stroke: #e1aa8b; stroke-width: 1.5; }
.result-art { opacity: .35; transition: opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1); transform-origin: 626px 100px; }
.result-check { opacity: 0; transition: opacity .2s .2s; }
.scene-destination { fill: #161b12; stroke: #3e4c31; stroke-width: 1; transition: fill .3s,stroke .3s; }
.action-stage[data-phase="review"] .route-progress { stroke-dashoffset: 187; }
.action-stage[data-phase="review"] .route-gate { opacity: 1; }
.action-stage[data-phase="review"] .lock { stroke: #d2dcbf; }
.action-stage[data-phase="error"] .route-progress { stroke-dashoffset: 187; stroke: #d59c7e; }
.action-stage[data-phase="error"] .route-gate { opacity: 1; }
.action-stage[data-phase="error"] .gate-lock { display: none; }
.action-stage[data-phase="error"] .gate-cross { display: inline; }
.action-stage[data-phase="complete"] .route-progress { stroke-dashoffset: 0; }
.action-stage[data-phase="complete"] .result-art { opacity: 1; transform: scale(1.04); }
.action-stage[data-phase="complete"] .scene-destination { fill: #283620; stroke: #8da971; }
.action-stage[data-phase="complete"] .result-check { opacity: 1; }
.action-stage[data-phase="complete"] .route-gate { opacity: 0; }
.live-toggle .knob { transition: transform .35s ease; }
.action-stage[data-enabled="false"] .live-toggle .knob { transform: translateX(-20px); }
.action-stage[data-enabled="false"] .live-toggle .switch { fill: #34372f; }
.action-stage[data-scenario="settings"] .result-art { opacity: 1; }
.object-caption { margin: -5px 0 0; }
.object-caption h2 { font-size: 22px; font-weight: 400; letter-spacing: -.045em; margin: 0 0 8px; }
.object-caption p { font-size: 13px; color: #b1bba6; margin: 0; }
.feedback { min-height: 20px; margin: 20px 0 14px; color: #bdc8b1; font-size: 13px; line-height: 1.5; }
.feedback[data-error="true"] { color: #efb18c; }
.primary { min-width: 196px; max-width: 100%; min-height: 48px; padding: 13px 24px; color: #192311; background: #c6dbaf; border-radius: 28px; font-size: 14px; font-weight: 600; }
.primary:hover:enabled { background: #d8ecc3; }
button:disabled { cursor: default; opacity: .45; }
.utilities { display: flex; gap: 18px; align-items: center; justify-content: center; margin: 10px 0 0; }
.utilities button { min-height: 44px; font-size: 12px; color: #b2bca5; padding: 8px 0; }
.utilities button:hover:enabled { color: #e1edda; }
.utilities #reset { width: 44px; height: 44px; padding: 13px; }
.boundary { margin: 14px 0 0; color: #a8b09d; font-size: 11px; text-align: center; }
.experiment footer { justify-content: flex-end; font-size: 12px; color: #a8b49a; margin-top: 16px; }
dialog { color: #e2e8db; background: #151911; border: 1px solid #414b37; border-radius: 18px; padding: 26px 30px; width: min(640px,calc(100vw - 32px)); max-height: 85dvh; }
dialog::backdrop { background: #000b; backdrop-filter: blur(6px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialog-heading h2 { font-size: 28px; font-weight: 400; letter-spacing: -.045em; margin: 0; }
.dialog-heading button { width: 44px; height: 44px; padding: 12px; }
dialog details { border-top: 1px solid #343d2c; margin-top: 12px; }
dialog summary { cursor: pointer; padding: 15px 0; font-size: 13px; }
dialog p { font-size: 13px; line-height: 1.6; color: #bdc8b1; }
dialog a { text-decoration: underline; text-underline-offset: 4px; }
label { display: block; font-size: 13px; margin: 4px 0 9px; color: #c7d2ba; }
input { font: inherit; }
input:not([type="checkbox"]) { width: 100%; background: #10140d; color: #eef2e9; border: 1px solid #5b684b; padding: 12px; border-radius: 7px; }
.checkbox { display: flex; align-items: center; gap: 20px; justify-content: space-between; min-height: 44px; }
input[type="checkbox"] { width: 24px; height: 24px; accent-color: #bdda9f; }
.apply { color: #d2e4bc; border: 1px solid #60724c; border-radius: 7px; padding: 12px 18px; min-height: 44px; margin-top: 16px; }
pre { background: #1c2216; padding: 16px; border-radius: 7px; font: 12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
input:focus-visible,summary:focus-visible { outline: 2px solid #c9e4b0; outline-offset: 4px; }
@media (max-width:700px) { .experiment main { padding: 16px 24px 0; } .experiment h1 { font-size: clamp(36px,9.3vw,56px); margin-bottom: 28px; } .scenarios button { padding: 12px 18px; } .action-stage { margin-top: 18px; } #scene { width: calc(100% + 12px); margin-left: -6px; } .object-caption { margin-top: 14px; } .object-caption h2 { font-size: 21px; } .feedback { margin-top: 24px; } .boundary { margin-top: 22px; } dialog { padding: 20px; } }