/* NSTACK website v3 · How it works: the mission console. Choose on the left, watch in the middle, follow the goal, the
   step, and the record on the right. Isometric hairlines, mono micro labels, the data tone for what is moving, gold for
   what waits on a person, red only for what failed. Playback is a transport and a thin segmented track: no step strip. */

/* The page: a compact header, then the console. From 1241px it fills the rest of the first screen, so the whole
   console shows at once; the rails scroll inside it when a window is short. */
.hw-wide { --max: 1560px; }
.hw-hero { padding: clamp(20px, 2.4vw, 32px) 0 clamp(14px, 1.6vw, 20px); }
.hw-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; }
.hw-head h1 { margin-top: 10px; font-weight: 600; font-size: clamp(30px, 2.7vw, 44px); line-height: 1.04; letter-spacing: -0.038em; color: var(--studio-ink); text-wrap: balance; }
.hw-head .lead { max-width: 50ch; margin: 0; font-size: 15px; line-height: 1.55; color: var(--studio-ink-soft); }
.hw-wrap-sec { padding-bottom: clamp(28px, 3vw, 48px); }

.hw { display: grid; grid-template-columns: 276px minmax(0, 1fr) 332px; min-height: 700px; border: 1px solid var(--studio-line); border-radius: 14px; overflow: hidden; background: var(--studio-surface); outline: none; }
.hw:focus-visible { box-shadow: 0 0 0 2px var(--studio-focus); }
.hw .cap { color: var(--studio-ink-muted); }

/* Left rail: what to play */
.hw-side { display: flex; flex-direction: column; gap: 0; border-right: 1px solid var(--studio-line); background: var(--studio-paper); }
.hw-sec { flex: none; display: grid; gap: 10px; padding: 16px 18px 18px; border-bottom: 1px solid var(--studio-line); }
.hw-missions, .hw-group { display: grid; gap: 8px; }
.hw-group[hidden] { display: none; }
.hw-mission { display: grid; gap: 5px; padding: 12px 14px 13px; border: 1px solid var(--studio-line); border-radius: 9px; background: var(--studio-surface); text-align: left; cursor: pointer; transition: border-color var(--duration), box-shadow var(--duration); }
.hw-mission b { font-size: 14.5px; font-weight: 600; color: var(--studio-ink); }
.hw-mission span { font-size: 13px; line-height: 1.45; color: var(--studio-ink-soft); }
.hw-mission em { font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--studio-ink-muted); }
.hw-mission:hover { border-color: var(--studio-line-strong); }
.hw-mission[aria-checked="true"] { border-color: var(--studio-ink); box-shadow: inset 0 0 0 1px var(--studio-ink); }
.hw-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border: 1px solid var(--studio-line); border-radius: 8px; background: var(--studio-surface); }
.hw-scn { height: 30px; border: 0; border-radius: 6px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--studio-ink-muted); cursor: pointer; transition: background var(--duration), color var(--duration); }
.hw-scn:hover { color: var(--studio-ink); }
.hw-scn[aria-checked="true"] { background: var(--studio-ink); color: var(--studio-on-ink); }
.hw-scn:focus-visible, .hw-mission:focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 2px; }
.hw-hint { font-size: 12.5px; line-height: 1.5; color: var(--studio-ink-muted); min-height: 38px; }
.hw-switch { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--studio-line); border-radius: 9px; background: var(--studio-surface); text-align: left; cursor: pointer; }
.hw-switch .knob { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--studio-line-strong); transition: background var(--duration); }
.hw-switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--studio-surface); box-shadow: 0 1px 2px rgba(10, 22, 40, .2); transition: transform 220ms var(--ease-out); }
.hw-switch[aria-checked="true"] .knob { background: var(--studio-ink); }
.hw-switch[aria-checked="true"] .knob::after { transform: translateX(14px); }
.hw-switch .lbl { display: grid; gap: 2px; }
.hw-switch b { font-size: 13.5px; font-weight: 600; color: var(--studio-ink); }
.hw-switch small { font-size: 12px; line-height: 1.4; color: var(--studio-ink-muted); }
.hw-switch:focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 2px; }

/* Middle: the stage */
.hw-main { display: flex; flex-direction: column; min-width: 0; }
.hw-main > .hw-stage { flex: 1 1 auto; }
.hw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--studio-line); }
.hw-top .who { display: grid; gap: 5px; min-width: 0; }
.hw-top .who .name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hw-top .who b { font-size: 14.5px; font-weight: 600; color: var(--studio-ink); white-space: nowrap; }
.hw-top .who .name span { font-size: 12.5px; color: var(--studio-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Controls: where the run happens, what the agent may do, who approves */
.hw-top .ctl { display: flex; flex-wrap: wrap; gap: 4px; }
.hw-top .ctl .chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--studio-line); border-radius: 5px; background: var(--studio-surface); font: 500 10.5px/1 var(--font-studio-mono); letter-spacing: .02em; color: var(--studio-ink-soft); white-space: nowrap; }
.hw-top .meta { display: flex; align-items: center; gap: 8px; flex: none; }
.hw-top .status { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border: 1px solid var(--studio-line-strong); border-radius: 999px; font: 500 10.5px/1 var(--font-studio-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--studio-ink-soft); white-space: nowrap; }
.hw-top .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--studio-ink-faint); }
.hw-top .status[data-state="running"]::before { background: var(--studio-tone-data); animation: studio-pulse 1.4s ease-in-out infinite; }
.hw-top .status[data-state="attention"] { border-color: color-mix(in srgb, var(--studio-tone-error) 55%, transparent); color: var(--studio-tone-error); }
.hw-top .status[data-state="attention"]::before, .hw-top .status[data-state="stopped"]::before { background: var(--studio-tone-error); }
.hw-top .status[data-state="done"]::before { background: var(--studio-ink); }
.hw-top .hw-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--studio-line); }
.hw-top .hw-tools .iconbtn { width: 30px; height: 30px; color: var(--studio-ink-soft); text-decoration: none; cursor: pointer; }
.hw-top .hw-tools .iconbtn[hidden] { display: none; }
.hw-top .hw-tools .iconbtn:focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 1px; }
.hw-top [data-hw-full] .i-off, .hw-top [data-hw-full][data-on="true"] .i-on { display: none; }
.hw-top [data-hw-full][data-on="true"] .i-off { display: block; }

/* The race: the same work, today and with NSTACK, on one time scale */
.hw-race { display: grid; gap: 6px; padding: 10px 16px 12px; border-bottom: 1px solid var(--studio-line); background: var(--studio-paper); --prog: 0; --ns: .1; }
.hw-race[hidden] { display: none; }
.hw-race .lane { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.hw-race .name { font: 600 10.5px/1 var(--font-studio-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--studio-ink-muted); }
.hw-race .track { position: relative; height: 8px; border-radius: 999px; background: var(--studio-wash); overflow: hidden; }
.hw-race .ns .track { width: calc(var(--ns) * 100%); min-width: 14px; }
.hw-race .fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--prog) * 100%); border-radius: 999px; transition: width 700ms var(--ease-out); }
.hw-race .bau .fill { background: color-mix(in srgb, var(--studio-ink) 34%, transparent); }
.hw-race .ns .fill { background: var(--studio-tone-data); }
.hw-race .val { font-size: 12px; color: var(--studio-ink-soft); white-space: nowrap; }

.hw-stage { position: relative; min-height: 540px; background-color: var(--studio-canvas); background-image: radial-gradient(var(--stage-dot) 1px, transparent 1.2px); background-size: 18px 18px; }
.hw-stage svg { position: absolute; inset: 10px 10px 4px; width: calc(100% - 20px); height: calc(100% - 14px); overflow: visible; }
/* Playback: transport on the left, the track across, the count on the right */
.hw-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--studio-line); background: var(--studio-paper); }
.hw-track { display: grid; gap: 3px; min-width: 0; padding: 8px 0; }
.hw-stepbar { position: relative; height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--studio-line-strong); cursor: pointer; min-width: 0; transition: background var(--duration), transform var(--duration); }
.hw-stepbar::before { content: ""; position: absolute; inset: -10px 0; }
.hw-stepbar:hover { transform: scaleY(1.6); }
.hw-stepbar:focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 4px; }
.hw-stepbar[data-state="done"] { background: color-mix(in srgb, var(--studio-ink) 55%, var(--studio-surface)); }
.hw-stepbar[data-state="active"] { background: var(--studio-ink); }
.hw-stepbar[data-state="attention"] { background: var(--studio-tone-error); }
.hw-stepbar[data-state="skipped"] { background: color-mix(in srgb, var(--studio-tone-error) 35%, var(--studio-surface)); }
.hw-count { font: 500 11px/1 var(--font-studio-mono); color: var(--studio-ink-muted); white-space: nowrap; }
.hw-ctrl { display: flex; align-items: center; gap: 6px; }
.hw-ctrl .iconbtn { width: 34px; height: 34px; }
.hw-ctrl .iconbtn[disabled] { opacity: .4; cursor: default; }
.hw-play { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 1px solid var(--studio-ink); border-radius: 7px; background: var(--studio-ink); color: var(--studio-on-ink); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--duration); }
.hw-play:hover { background: var(--studio-ink-hover); }
.hw-play svg { width: 13px; height: 13px; }
.hw-play .i-pause { display: none; }
.hw-play[data-state="playing"] .i-play { display: none; }
.hw-play[data-state="playing"] .i-pause { display: block; }

/* Right rail: the goal, the step, and the record */
.hw-hud { display: grid; grid-template-rows: auto auto minmax(0, 1fr); border-left: 1px solid var(--studio-line); background: var(--studio-paper); min-width: 0; }
.hw-hud > section { padding: 16px 18px; border-bottom: 1px solid var(--studio-line); min-width: 0; }
.hw-goal { display: grid; gap: 8px; align-content: start; }
.hw-goal .goal { font-size: 14px; line-height: 1.5; color: var(--studio-ink); }
.hw-goal .cap.sub { margin-top: 6px; }
.hw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hw-checks li { position: relative; padding-left: 24px; font-size: 13px; line-height: 1.45; color: var(--studio-ink-muted); transition: color var(--duration); }
.hw-checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 14px; height: 14px; border: 1px solid var(--studio-line-strong); border-radius: 4px; background: var(--studio-surface); transition: background var(--duration), border-color var(--duration); }
.hw-checks li.on { color: var(--studio-ink); }
.hw-checks li.on::before { border-color: var(--studio-ink); background: var(--studio-ink); }
.hw-checks li.on::after { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 3.5px; border-left: 1.6px solid var(--studio-on-ink); border-bottom: 1.6px solid var(--studio-on-ink); transform: rotate(-45deg); }
.hw-checks li.off { text-decoration: line-through; }
.hw-checks li.off::before { border-color: color-mix(in srgb, var(--studio-tone-error) 60%, transparent); }
.hw-now { display: grid; gap: 10px; align-content: start; }
.hw-now .phase { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-studio-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--studio-ink-muted); }
.hw-now .phase b { color: var(--studio-ink); font-weight: 600; }
.hw-now .phase .lyr { margin-left: auto; color: var(--studio-ink-soft); }
.hw-now .say { font-size: 15.5px; line-height: 1.5; color: var(--studio-ink); min-height: 70px; }
.hw-now .does { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.hw-now .does li { display: flex; gap: 8px; font: 400 11.5px/1.45 var(--font-studio-mono); color: var(--studio-ink-soft); }
.hw-now .does li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 6px; border-radius: 1px; background: var(--studio-tone-data); }
.hw-tabs { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; border-bottom: 0 !important; }
.hw-tabs .tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--studio-line); border-radius: 8px; background: var(--studio-surface); justify-self: start; }
.hw-tabs [role="tab"] { height: 26px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--studio-ink-muted); cursor: pointer; }
.hw-tabs [role="tab"][hidden] { display: none; }
.hw-tabs [role="tab"][aria-selected="true"] { background: var(--studio-ink); color: var(--studio-on-ink); }
.hw-tabs [role="tab"]:focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 1px; }
.hw-tabs .panel { min-height: 0; display: grid; }
.hw-tabs .panel:not(.cost) { grid-template-rows: minmax(0, 1fr); }
.hw-tabs .panel[hidden] { display: none; }
.hw-tabs ol { list-style: none; margin: 0; padding: 8px 0; border: 1px solid var(--studio-line); border-radius: 8px; background: var(--studio-surface); overflow: auto; min-height: 140px; max-height: 300px; }
.hw-tabs ol:focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 1px; }
.hw-tabs li { display: grid; grid-template-columns: 54px minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 4px 12px; font: 400 11px/1.5 var(--font-studio-mono); color: var(--studio-ink-soft); animation: v2-fade 360ms var(--ease-out) both; }
.hw-tabs li .t { color: var(--studio-ink-muted); }
.hw-tabs li .ev { color: var(--studio-ink); font-weight: 600; white-space: nowrap; }
.hw-tabs li .d { color: var(--studio-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-tabs li.cur { background: color-mix(in srgb, var(--studio-tone-data) 8%, transparent); box-shadow: inset 2px 0 0 var(--studio-tone-data); }
.hw-tabs li.err .ev { color: var(--studio-tone-error); }

/* Cost tab */
.hw-tabs .panel.cost { gap: 12px; align-content: start; overflow: auto; }
.hw-cost { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hw-cost th, .hw-cost td { padding: 7px 8px; border-bottom: 1px solid var(--studio-line); text-align: left; vertical-align: baseline; }
.hw-cost thead th { font: 600 10.5px/1 var(--font-studio-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--studio-ink-muted); }
.hw-cost tbody th { font-weight: 500; color: var(--studio-ink-muted); width: 38%; }
.hw-cost td { color: var(--studio-ink-soft); }
.hw-cost td.ns { color: var(--studio-ink); font-weight: 600; }
.hw-cost thead th.ns { color: var(--studio-ink); }
.hw-tabs .saving { font-size: 13.5px; line-height: 1.5; color: var(--studio-ink); }
.hw-tabs .assume summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--studio-ink); }
.hw-tabs .assume .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
.hw-tabs .assume .fld { display: grid; gap: 4px; font-size: 11.5px; color: var(--studio-ink-muted); }
.hw-tabs .assume input { height: 30px; padding: 0 8px; border: 1px solid var(--studio-line-strong); border-radius: 6px; background: var(--studio-surface); font: 500 13px/1 var(--font-studio-sans); color: var(--studio-ink); }
.hw-tabs .assume input:focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 1px; }
.hw-tabs .bausteps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.hw-tabs .bausteps li { display: flex; justify-content: space-between; gap: 10px; padding: 0; font: 400 11.5px/1.5 var(--font-studio-sans); color: var(--studio-ink-soft); animation: none; }
.hw-tabs .bausteps li b { font-weight: 600; color: var(--studio-ink); white-space: nowrap; }
.hw-tabs .note { font-size: 11.5px; line-height: 1.5; color: var(--studio-ink-muted); }

/* Stage overlays: the exception that needs a person, and the end of a mission */
.hw-exc, .hw-done { position: absolute; top: 16px; left: 16px; z-index: 2; display: grid; gap: 8px; max-width: 320px; padding: 16px 18px 18px; border: 1px solid var(--studio-line-strong); border-radius: 10px; background: color-mix(in oklab, var(--studio-surface) 95%, transparent); backdrop-filter: blur(6px); box-shadow: var(--studio-shadow-menu); animation: rise 500ms var(--ease-expo) both; }
.hw-exc[hidden], .hw-done[hidden] { display: none; }
.hw-exc { border-color: color-mix(in srgb, var(--studio-tone-error) 50%, transparent); }
.hw-exc .cap { color: var(--studio-tone-error); }
.hw-exc b, .hw-done b { font-size: 16.5px; line-height: 1.3; font-weight: 600; color: var(--studio-ink); }
.hw-exc p { font-size: 13px; line-height: 1.5; color: var(--studio-ink-soft); }
.hw-exc .owner { color: var(--studio-ink); }
.hw-exc .opts { display: grid; gap: 6px; margin-top: 4px; }
.hw-exc .opts .btn { justify-content: flex-start; height: auto; min-height: 34px; padding: 7px 12px; white-space: normal; text-align: left; line-height: 1.35; }
.hw-done ul { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; gap: 5px; }
.hw-done li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.45; color: var(--studio-ink-soft); }
.hw-done li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 4px; border-left: 1.5px solid var(--studio-ink); border-bottom: 1.5px solid var(--studio-ink); transform: rotate(-45deg); }
.hw-done .btns { gap: 8px; }

/* The scene */
.hw-svg text.hw-l { font: 500 9.5px/1 var(--font-studio-mono); letter-spacing: .07em; text-transform: uppercase; fill: color-mix(in srgb, var(--studio-ink) 58%, var(--studio-canvas)); paint-order: stroke; stroke: var(--studio-canvas); stroke-width: 3px; stroke-linejoin: round; }
.hw-svg text.hw-l.sm { font-size: 8px; fill: color-mix(in srgb, var(--studio-ink) 50%, var(--studio-canvas)); }
.hw-svg text.hw-l.dt { fill: var(--studio-tone-data); }
.hw-svg text.hw-l.layer { font-size: 10px; }
.hw-svg text.hw-l.axis { fill: color-mix(in srgb, var(--studio-tone-data) 70%, var(--studio-canvas)); }
.hw-svg .f3 { fill: color-mix(in srgb, var(--studio-ink) 4%, var(--studio-canvas)); }
.hw-svg .f2 { fill: color-mix(in srgb, var(--studio-ink) 3%, var(--studio-canvas)); }
.hw-svg .f1 { fill: color-mix(in srgb, var(--studio-ink) 1.5%, var(--studio-canvas)); }
.hw-svg .e, .hw-svg .hw-tick { fill: none; stroke: color-mix(in srgb, var(--studio-ink) 32%, var(--studio-canvas)); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke 400ms var(--ease-out); }
.hw-svg .hw-g { fill: none; stroke: color-mix(in srgb, var(--studio-ink) 20%, var(--studio-canvas)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-svg .hw-g.strong { stroke: color-mix(in srgb, var(--studio-ink) 40%, var(--studio-canvas)); stroke-width: 1.5; stroke-linecap: round; }
.hw-svg .hw-dot { stroke: color-mix(in srgb, var(--studio-ink) 40%, var(--studio-canvas)); stroke-width: 4; stroke-linecap: round; }
.hw-svg .hw-dot.dt { stroke: var(--studio-tone-active); }
.hw-svg .hw-plate { transition: opacity 500ms var(--ease-out); }
.hw-svg[data-step] .hw-plate:not(.is-cur) { opacity: .55; }
.hw-svg .hw-plate.is-cur > .hw-slab-plate .e { stroke: color-mix(in srgb, var(--studio-ink) 46%, var(--studio-canvas)); }

/* Systems: dashed while planned, lit while read, quiet once read, red when they fail; Scan sources carry a dashed rim */
.hw-svg .hw-sys.scan .e { stroke-dasharray: 3 2.5; }
.hw-svg .hw-sys.is-plan .e { stroke: color-mix(in srgb, var(--studio-tone-data) 70%, var(--studio-canvas)); }
.hw-svg .hw-sys.is-act .e { stroke: var(--studio-tone-data); stroke-dasharray: none; }
.hw-svg .hw-sys.is-act .f3 { fill: color-mix(in srgb, var(--studio-tone-data) 14%, var(--studio-canvas)); }
.hw-svg .hw-sys.is-act .f2, .hw-svg .hw-sys.is-act .f1 { fill: color-mix(in srgb, var(--studio-tone-data) 8%, var(--studio-canvas)); }
.hw-svg .hw-sys.is-done .e { stroke: color-mix(in srgb, var(--studio-ink) 48%, var(--studio-canvas)); }
.hw-svg .hw-sys.is-err .e { stroke: var(--studio-tone-error); stroke-dasharray: none; }
.hw-svg .hw-sys.is-err .f3, .hw-svg .hw-sys.is-err .f2, .hw-svg .hw-sys.is-err .f1 { fill: color-mix(in srgb, var(--studio-tone-error) 12%, var(--studio-canvas)); }
.hw-svg .hw-planlines { opacity: 0; transition: opacity 400ms var(--ease-out); }
.hw-svg .hw-planlines.is-on { opacity: 1; }
.hw-svg .hw-planline { fill: none; stroke: color-mix(in srgb, var(--studio-tone-data) 60%, var(--studio-canvas)); stroke-width: 1; stroke-dasharray: 2 4; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: hw-march 1.2s linear infinite; }
@keyframes hw-march { to { stroke-dashoffset: -12; } }

/* Model: objects light as the sources that feed them are read */
.hw-svg .hw-link { fill: none; stroke: color-mix(in srgb, var(--studio-ink) 14%, var(--studio-canvas)); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; transition: stroke 400ms; }
.hw-svg .hw-link.is-on { stroke: color-mix(in srgb, var(--studio-ink) 40%, var(--studio-canvas)); stroke-dasharray: none; }
.hw-svg .hw-obj.is-on .e { stroke: color-mix(in srgb, var(--studio-ink) 55%, var(--studio-canvas)); }
.hw-svg .hw-obj.is-act .e { stroke: var(--studio-tone-data); }
.hw-svg .hw-obj.is-act .f3 { fill: color-mix(in srgb, var(--studio-tone-data) 12%, var(--studio-canvas)); }
.hw-svg text.hw-l.obj { font-size: 8.5px; paint-order: normal; stroke: none; }

/* Experience: the app screen fills at Compose; a flag line marks what the agent could not get */
.hw-svg .hw-screen .e { stroke: color-mix(in srgb, var(--studio-tone-data) 70%, var(--studio-canvas)); }
.hw-svg .hw-screen .f2, .hw-svg .hw-screen .f3, .hw-svg .hw-screen .f1 { fill: color-mix(in srgb, var(--studio-tone-data) 6%, var(--studio-canvas)); }
.hw-svg .hw-view { opacity: .22; transition: opacity 500ms var(--ease-out); }
.hw-svg .hw-app.is-on .hw-view { opacity: 1; }
.hw-svg .hw-bar { fill: none; stroke: color-mix(in srgb, var(--studio-tone-data) 55%, var(--studio-canvas)); stroke-width: 7; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.hw-svg .hw-bar.hi { stroke: var(--studio-tone-data); }
.hw-svg .hw-app.grow .hw-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: v2-grow 800ms var(--ease-expo) both; animation-delay: calc(var(--k) * 90ms + 200ms); }
.hw-svg .hw-app.grow .hw-row { animation: v2-fade 520ms var(--ease-out) both; animation-delay: calc(var(--k) * 120ms + 500ms); }
.hw-svg .hw-flag { opacity: 0; }
.hw-svg .hw-app.flagged.is-on .hw-flag { opacity: 1; }
.hw-svg .hw-flagline { fill: none; stroke: var(--studio-tone-active); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hw-svg .hw-tool .e { stroke-dasharray: 3 2.5; }
.hw-svg .hw-toolg.is-act .e { stroke: var(--studio-tone-data); stroke-dasharray: none; }
.hw-svg .hw-toolg.is-done .e { stroke: color-mix(in srgb, var(--studio-ink) 48%, var(--studio-canvas)); stroke-dasharray: none; }

/* Approval: gold while it waits on a person, ink once approved, red when the run stopped instead */
.hw-svg .hw-gate .hw-check { fill: none; stroke: var(--studio-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 300ms; }
.hw-svg .hw-gate.is-act .e { stroke: var(--studio-tone-active); }
.hw-svg .hw-gate.is-act .f3, .hw-svg .hw-gate.is-act .f1, .hw-svg .hw-gate.is-act .f2 { fill: color-mix(in srgb, var(--studio-tone-active) 16%, var(--studio-canvas)); }
.hw-svg .hw-gate.is-done .e { stroke: color-mix(in srgb, var(--studio-ink) 70%, var(--studio-canvas)); }
.hw-svg .hw-gate.is-done .hw-check { opacity: 1; }
.hw-svg .hw-gate.is-stop .e { stroke: var(--studio-tone-error); }

/* Record: a new slab lands on the run ledger */
.hw-svg .hw-rec { transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-expo); }
.hw-svg .hw-rec:not(.is-on) { opacity: 0; transform: translateY(-10px); }
.hw-svg .hw-rec.new.is-on .e { stroke: var(--studio-tone-data); }

/* The agent, the lift it rides between layers, and the packets */
.hw-svg .hw-agent .e { stroke: var(--studio-ink); }
.hw-svg .hw-agent .f3 { fill: var(--studio-surface); }
.hw-svg .hw-agent .f2 { fill: color-mix(in srgb, var(--studio-ink) 10%, var(--studio-surface)); }
.hw-svg .hw-agent .f1 { fill: color-mix(in srgb, var(--studio-ink) 18%, var(--studio-surface)); }
.hw-svg .hw-beacon { fill: var(--studio-tone-data); animation: hw-beacon 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hw-svg text.hw-l.agent { fill: var(--studio-ink); }
.hw-svg .hw-axis { fill: none; stroke: color-mix(in srgb, var(--studio-tone-data) 40%, var(--studio-canvas)); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hw-svg .hw-route { fill: none; stroke: none; }
.hw-svg .hw-pk path { fill: var(--studio-ink); stroke: var(--studio-canvas); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-svg .hw-pk.dt path { fill: var(--studio-tone-data); }
@keyframes hw-beacon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* After the console */
.hw-after .v2-card .amb { height: 150px; }

@media (prefers-reduced-motion: reduce) {
  .hw-svg .hw-rec, .hw-svg .hw-plate, .hw-race .fill, .hw-stepbar { transition: none; }
  .hw-stepbar:hover { transform: none; }
  .hw-svg .hw-beacon, .hw-svg .hw-planline, .hw-tabs li, .hw-top .status::before { animation: none; }
}
:root[data-motion="reduce"] .hw-svg .hw-beacon, :root[data-motion="reduce"] .hw-svg .hw-planline, :root[data-motion="reduce"] .hw-tabs li { animation: none; }

/* Full screen, and the fallback where a browser cannot put one element in full screen (iPhone): the console covers the page */
.hw.is-full { width: 100vw; max-width: none; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
.hw.is-immersive { position: fixed; inset: 0; z-index: 1000; }
.hw::backdrop { background: var(--studio-paper); }
:root.hw-lock, :root.hw-lock body { overflow: hidden; }

/* A window of its own (?view=window): only the console, edge to edge */
.hw-window .nav, .hw-window .skip, .hw-window .hw-hero, .hw-window main > :not(.hw-first), .hw-window footer.foot { display: none !important; }
.hw-window .hw-first { height: 100vh; height: 100svh; min-height: 0; max-height: none; }
.hw-window .hw-wrap-sec { padding: 0; }
.hw-window .hw-wide { --max: 100%; --pad: 0px; }
.hw-window .hw { border: 0; border-radius: 0; }
.hw-window [data-hw-window] { display: none; }

@media (min-width: 1241px) {
  .hw-first { display: flex; flex-direction: column; height: calc(100svh - var(--nav-h)); min-height: 640px; max-height: 1120px; }
  .hw-first > .hw-wrap-sec { flex: 1 1 auto; min-height: 0; display: flex; padding-bottom: 20px; }
  .hw-first > .hw-wrap-sec > .wrap { display: flex; min-height: 0; }
  .hw-first .hw, .hw.is-full { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .hw.is-full { grid-template-columns: 300px minmax(0, 1fr) 368px; }
  .hw-first .hw .hw-side, .hw.is-full .hw-side { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .hw-first .hw .hw-stage, .hw.is-full .hw-stage { flex: 1 1 0; min-height: 0; }
  .hw-first .hw .hw-hud, .hw.is-full .hw-hud { min-height: 0; }
  .hw-first .hw .hw-tabs ol, .hw.is-full .hw-tabs ol { min-height: 0; max-height: none; }
}

@media (min-width: 1241px) and (max-height: 900px) {
  .hw-sec { gap: 8px; padding: 12px 16px 14px; }
  .hw-hint { min-height: 0; }
  .hw-mission { padding: 10px 12px 11px; gap: 4px; }
  .hw-hud > section { padding: 13px 16px; }
  .hw-now .say { min-height: 0; font-size: 15px; }
}

@media (max-width: 1240px) {
  .hw.is-full { overflow-y: auto; }
  .hw { grid-template-columns: 256px minmax(0, 1fr); }
  .hw-hud { grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1.2fr; grid-template-rows: auto; border-left: 0; border-top: 1px solid var(--studio-line); }
  .hw-hud > section { border-bottom: 0; border-right: 1px solid var(--studio-line); }
  .hw-hud > section:last-child { border-right: 0; }
}
@media (max-width: 860px) {
  .hw { grid-template-columns: 1fr; }
  .hw-side { border-right: 0; border-bottom: 1px solid var(--studio-line); }
  .hw-hud { grid-template-columns: 1fr; }
  .hw-hud > section { border-right: 0; border-bottom: 1px solid var(--studio-line); }
  .hw-stage { min-height: 400px; }
  .hw-bottom { grid-template-columns: 1fr auto; }
  .hw-track { grid-column: 1 / -1; grid-row: 1; }
  .hw-ctrl { justify-content: flex-start; }
  .hw-top .ctl { display: none; }
  .hw-exc, .hw-done { left: 10px; right: 10px; max-width: none; }
  .hw-race .lane { grid-template-columns: 54px minmax(0, 1fr); }
  .hw-race .val { grid-column: 2; font-size: 11px; }
  .hw-top [data-hw-window] { display: none; }
  .hw-head { gap: 10px; }
}