body {background:#111915;color:#f7f8f2}
main {max-width:1050px;padding:32px clamp(16px,5vw,48px) 64px}
h1 {font-size:clamp(38px,7vw,70px);letter-spacing:-.05em}
h2,h3 {color:#d6e77a}
.workspace {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.workspace > *, .deliverables {background:#1c2820;border:1px solid #52634d;border-radius:16px;padding:20px;min-width:0}
label {display:grid;gap:4px;margin:12px 0}
button,select {font:inherit;padding:8px 12px;border-radius:8px;border:1px solid #879681}
button {background:#26372b;color:#f7f8f2;cursor:pointer}
button[aria-pressed=true],#run {background:#d6e77a;color:#111915}
input[type=range] {width:100%;accent-color:#d6e77a}
#route {padding-left:25px}
#next-step {color:#d6e77a;font-weight:700}
#choices {display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
#brief {margin:14px 0}
aside {display:flex;align-items:center;gap:12px;margin-top:16px}
aside img {height:auto}
@media(max-width:700px){.workspace {grid-template-columns:1fr}}
@media print {body,.deliverables{background:white;color:black}h2,h3{color:black}main{padding:0}main>a,.workspace,#choices,button,aside{display:none}.deliverables{border:0;padding:0}}

.walkthrough {padding:16px;border:1px solid #52634d;border-radius:16px;background:#141f1a}
.workflow-view {overflow:hidden;border-radius:10px;aspect-ratio:3/1;background:#09151e url('./control-room.jpg') center/cover}
.workflow-view img {width:100%;height:100%;object-fit:contain;display:block;transition:transform .55s ease,opacity .55s ease}
[data-stage="0"] .workflow-view img {transform:scale(1.35);transform-origin:10% 50%}
[data-stage="1"] .workflow-view img {transform:scale(1.6);transform-origin:36% 50%}
[data-stage="2"] .workflow-view img {transform:scale(2.35);transform-origin:50% 65%;opacity:.85}
[data-stage="3"] .workflow-view img,[data-stage="complete"] .workflow-view img {transform:scale(1.45);transform-origin:88% 52%}
.trace {display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.trace li {padding:5px 9px;border-radius:6px;background:#26372b}
.trace [aria-current] {color:#111915;background:#d6e77a}
.envoy-guide {min-height:90px}
.envoy-guide img {flex:none}
.envoy-guide p {margin:4px 0}
.sound {display:flex;align-items:center}
#record details {padding:8px 0;border-top:1px solid #52634d}
#record summary {cursor:pointer}
[data-stage="complete"] .envoy-guide img {animation:envoy-hop .55s ease}
@keyframes envoy-hop {40%{transform:translateY(-12px) rotate(-5deg);filter:drop-shadow(0 0 8px #8ff7ff)}}
@media(max-width:700px){.workflow-view{aspect-ratio:2/1}}
@media(prefers-reduced-motion:reduce){.workflow-view img{transition:none}[data-stage="complete"] .envoy-guide img{animation:none}}
@media print{.walkthrough{display:none}}
.trace li {padding:0;background:none}
.trace button:disabled {cursor:default}
#handoff {margin:16px 0}

#jad-flow {margin: 16px 0; padding: 16px; border: 1px solid #52634d; border-radius: 12px; background: #111915}
#jad-status {color: #f7f8f2; font-weight: 700}
.jad-flow {display: grid; gap: 20px; padding: 0; list-style: none}
.jad-flow li {position: relative; text-align: center}
.jad-flow li:not(:last-child)::after {content: "↓"; position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); color: #6ee7f4}
.jad-flow li:not(.jad-branches), .jad-branches span {padding: 8px; border: 1px solid #6ee7f4; border-radius: 8px; background: #1c2820; color: #f7f8f2}
.jad-branches {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px}
.jad-branches span {border-color: #617067}
.jad-branches .selected-route {background: #d6e77a; border-color: #d6e77a; color: #111915; font-weight: 700}
@media print {
  #jad-flow, #jad-status, .jad-flow li:not(.jad-branches), .jad-branches span {background: white; color: black}
  .jad-branches .selected-route {border: 2px solid black}
}

.field-help {position:relative;margin:0 0 12px;font-size:.9rem}
.field-help summary {width:fit-content;cursor:pointer;color:#9cebf2}
.field-help .field-tip {position:absolute;z-index:1;top:100%;left:0;max-width:100%;padding:6px 9px;background:#111915;color:#f7f8f2;border:1px solid #6ee7f4;border-radius:6px}
.field-help:not([open]) .field-tip {display:none}
@media (hover:hover) {
  .field-help:not([open]) summary:hover + .field-tip {display:block;pointer-events:none}
}
.field-help:not([open]) summary:focus-visible + .field-tip {display:block;pointer-events:none}
.field-help[open] .field-tip {position:static;display:block;width:fit-content;margin-top:6px}
#view-flow {display:inline-block;margin-bottom:8px}
#workflow-advice {margin-top:20px}
@media print {#workflow-advice {display:none}}