/* How I work: interactive page.
   Uses the site tokens from styles.css. The gradient is reserved for the path line. */

.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;
}

.hw {
    padding-top: 120px;
    padding-bottom: 96px;
    min-height: 100vh;
    --hw-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --paper: #e9e3c8;
    --paper-ink: #16161f;
}

.hw section {
    padding: 0;
}

.hw [hidden] {
    display: none !important;
}

:where(.hw button) {
    font: inherit;
    color: inherit;
}

.hw :focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
}

/* ---------- Intro ---------- */

.hw-h1 {
    font-size: clamp(36px, 5.4vw, 64px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.02em;
    max-width: 16ch;
}

.hw-sub {
    margin-top: 20px;
    font-size: clamp(17px, 1.6vw, 20px);
    color: var(--text-secondary);
    max-width: 52ch;
}

.hw-concept {
    margin-top: 20px;
    padding-left: 14px;
    border-left: 2px solid var(--accent-purple);
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 60ch;
}

.hw-paths {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hw-path {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding: 28px;
    min-height: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s var(--hw-ease), background-color 0.25s ease;
}

.hw-path:hover {
    border-color: var(--accent-green);
    background: var(--bg-card-hover);
    transform: translateY(-3px);
}

.hw-path[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.hw-path[aria-disabled="true"]:hover {
    border-color: var(--border-color);
    background: var(--bg-card);
    transform: none;
}

.hw-path-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-green);
}

.hw-path-title {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
}

.hw-path-brief {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 34ch;
}

.hw-path-go {
    margin-top: auto;
    padding-top: 12px;
    font-weight: 600;
    font-size: 15px;
}

.hw-path[aria-disabled="true"] .hw-path-go {
    visibility: hidden;
}

.hw-arrow {
    display: inline-block;
    transition: transform 0.25s var(--hw-ease);
}

.hw-path:hover .hw-arrow {
    transform: translateX(4px);
}

/* ---------- Play: bar ---------- */

.hw-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px 32px;
    margin-bottom: 36px;
}

.hw-play-title {
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hw-play-brief {
    margin-top: 10px;
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 62ch;
}

.hw-bar-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.hw-bar-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hw-link {
    background: none;
    border: 0;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--border-color);
    cursor: pointer;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.hw-link:hover {
    color: var(--text-primary);
    text-decoration-color: var(--text-primary);
}

.hw-count {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}

.hw-count-num {
    display: inline-block;
    min-width: 1.6ch;
    text-align: right;
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    transform-origin: right center;
}

.hw-count-num.tick {
    animation: hw-tick 0.34s var(--hw-ease);
}

.hw-count-label {
    font-size: 14px;
    color: var(--text-secondary);
    min-width: 8ch;
}

@keyframes hw-tick {
    0% { transform: scale(1.35); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---------- Play: path line ---------- */

.hw-layout {
    display: block;
}

.hw-track {
    position: relative;
    list-style: none;
    height: 88px;
    margin: 0 28px 32px;
}

.hw-track-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 19px;
    height: 3px;
    border-radius: 2px;
    background: var(--border-color);
    overflow: hidden;
}

.hw-track-fill {
    position: absolute;
    inset: 0;
    background: var(--gradient-green);
    transform-origin: left center;
    transform: scaleX(var(--p, 0));
    transition: transform 0.7s var(--hw-ease);
}

.hw-node {
    position: absolute;
    top: 0;
    left: calc(var(--i) * 100% / var(--max, 4));
    width: 40px;
    margin-left: -20px;
    text-align: center;
}

.hw-node-box {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    transition: border-color 0.3s ease;
}

.hw-node-box::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    transition: opacity 0.2s ease;
}

.hw-node-box svg {
    position: absolute;
    inset: 6px;
    width: 24px;
    height: 24px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.3s ease, transform 0.4s var(--hw-ease);
}

.hw-node-box::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    border: 2px solid var(--accent-cyan);
    opacity: 0;
    pointer-events: none;
}

.hw-node.is-current .hw-node-box {
    border-color: var(--accent-cyan);
}

.hw-node.is-current .hw-node-box::before {
    background: var(--accent-cyan);
}

.hw-node.is-current .hw-node-box::after {
    animation: hw-glow 1.8s ease-in-out infinite;
}

.hw-node.is-done .hw-node-box {
    border-color: var(--accent-green);
}

.hw-node.is-done .hw-node-box::before {
    opacity: 0;
}

.hw-node.is-done .hw-node-box svg {
    opacity: 1;
    transform: scale(1);
}

.hw-node-label {
    display: block;
    margin-top: 10px;
    margin-left: -20px;
    margin-right: -20px;
    font-family: "SF Mono", "Fira Code", Consolas, monospace;
    font-size: 13px;
    color: var(--text-secondary);
}

.hw-node.is-current .hw-node-label,
.hw-node.is-done .hw-node-label {
    color: var(--text-primary);
}

@keyframes hw-glow {
    0%, 100% { opacity: 0.15; transform: scale(0.96); }
    50% { opacity: 0.7; transform: scale(1.06); }
}

/* ---------- Play: stage ---------- */

.hw-stage {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: start;
}

.hw-stage-text {
    min-height: 260px;
}

.hw-step {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    font-weight: 600;
}

.hw-stage-title {
    margin-top: 10px;
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.2;
    font-weight: 700;
}

.hw-block {
    margin-top: 22px;
    max-width: 62ch;
}

.hw-block h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.hw-block p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.hw-stage-text.is-enter .hw-step,
.hw-stage-text.is-enter .hw-stage-title,
.hw-stage-text.is-enter .hw-block {
    animation: hw-rise 0.5s var(--hw-ease) both;
}

.hw-stage-text.is-enter .hw-stage-title { animation-delay: 0.04s; }
.hw-stage-text.is-enter .hw-block:nth-of-type(1) { animation-delay: 0.1s; }
.hw-stage-text.is-enter .hw-block:nth-of-type(2) { animation-delay: 0.18s; }

@keyframes hw-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.hw-art {
    position: relative;
}

.hw-art-inner {
    position: relative;
    min-height: 340px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
}

.hw-art-empty {
    display: grid;
    place-items: center;
    min-height: 298px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
}

.hw-art-empty code {
    font-family: "SF Mono", "Fira Code", Consolas, monospace;
    color: var(--accent-green);
}

.hw-fx {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}

.hw-line {
    position: absolute;
    left: 0;
    height: 2px;
    width: var(--w, 60%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7));
    transform: translateX(-110%);
    animation: hw-zip 0.46s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--d, 0s);
}

@keyframes hw-zip {
    from { transform: translateX(-110%); opacity: 1; }
    to { transform: translateX(520%); opacity: 0; }
}

.hw-letter {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    font-family: "SF Mono", "Fira Code", Consolas, monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-green);
    left: 0;
    top: 0;
    will-change: transform, opacity;
}

/* ---------- Decision card ---------- */

.hw-decision {
    margin-top: 28px;
    max-width: 70ch;
    padding: 20px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-purple);
    border-radius: 12px;
    animation: hw-rise 0.4s var(--hw-ease) both;
}

.hw-decision h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.hw-decision p {
    font-size: 16px;
    color: var(--text-secondary);
}

/* ---------- Prompt ---------- */

.hw-prompt {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 32px;
    padding: 14px 0 16px;
    background: var(--bg-primary);
}

.hw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.hw-chip {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-family: "SF Mono", "Fira Code", Consolas, monospace;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.hw-chip:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.hw-chip.is-primary {
    color: var(--text-primary);
    border-color: var(--accent-green);
}

.hw-chip.is-primary:hover {
    background: rgba(0, 255, 136, 0.08);
}

.hw-term {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px 12px;
    transition: border-color 0.2s ease;
}

.hw-term:focus-within {
    border-color: var(--accent-cyan);
}

.hw-term-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.hw-term-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hw-term-sign {
    font-family: "SF Mono", "Fira Code", Consolas, monospace;
    font-size: 20px;
    color: var(--accent-green);
}

.hw-term-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    font-family: "SF Mono", "Fira Code", Consolas, monospace;
    font-size: 20px;
    padding: 6px 0;
    caret-color: var(--accent-green);
}

.hw-term-input::placeholder {
    color: #8e8e9e;
}

.hw-term-input:focus-visible {
    outline: 0;
}

.hw-term-go {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.hw-term-go:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.hw-hint {
    min-height: 1.6em;
    margin-top: 8px;
    font-size: 15px;
    color: var(--text-secondary);
}

.hw-hint code,
.hw-decision code,
.hw-block code {
    font-family: "SF Mono", "Fira Code", Consolas, monospace;
    color: var(--accent-green);
}

.hw-term.is-shake {
    animation: hw-nudge 0.32s ease;
}

@keyframes hw-nudge {
    0%, 100% { transform: none; }
    30% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
}

/* ---------- Inventory ---------- */

.hw-inventory {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.hw-inv-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.hw-inv-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
    gap: 12px;
}

.hw-inv-slot {
    position: relative;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: #8e8e9e;
    font-size: 13px;
}

.hw-inv-slot.is-full {
    border-style: solid;
    border-color: var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    animation: hw-drop 0.5s var(--hw-ease) both;
}

.hw-inv-slot svg {
    flex: none;
    width: 32px;
    height: 32px;
    color: var(--accent-green);
}

.hw-inv-name {
    font-family: "SF Mono", "Fira Code", Consolas, monospace;
    font-size: 13px;
    word-break: break-word;
}

.hw-inv-empty {
    width: 100%;
    text-align: center;
    font-family: "SF Mono", "Fira Code", Consolas, monospace;
}

@keyframes hw-drop {
    from { opacity: 0; transform: translateY(-26px) scale(0.9); }
    to { opacity: 1; transform: none; }
}

/* ---------- Summary ---------- */

.hw-sum-title {
    font-size: clamp(30px, 4.2vw, 48px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hw-sum-sub {
    margin-top: 14px;
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 60ch;
}

.hw-sum-list {
    list-style: none;
    margin-top: 40px;
    display: grid;
    gap: 12px;
    max-width: 860px;
}

.hw-sum-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    animation: hw-rise 0.5s var(--hw-ease) both;
    animation-delay: calc(var(--i) * 70ms);
}

.hw-sum-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
}

.hw-sum-icon svg {
    width: 30px;
    height: 30px;
    color: var(--accent-green);
}

.hw-sum-name {
    font-size: 17px;
    font-weight: 700;
}

.hw-sum-name code {
    font-family: "SF Mono", "Fira Code", Consolas, monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-green);
    margin-right: 8px;
}

.hw-sum-line {
    margin-top: 4px;
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 62ch;
}

.hw-sum-actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 22px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hw-btn:hover {
    border-color: var(--text-secondary);
    background: var(--bg-card);
}

.hw-btn-primary {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.hw-btn-primary:hover {
    background: #dcdce4;
    border-color: #dcdce4;
}

/* ---------- Artifact: shared ---------- */

.a-cap {
    margin-top: 14px;
    font-size: 14px;
    color: var(--text-secondary);
}

.a-stage {
    animation: hw-rise 0.4s var(--hw-ease) both;
}

/* Assumption map */

.a-map {
    position: relative;
    aspect-ratio: 1.3 / 1;
    margin-left: 22px;
    margin-bottom: 24px;
}

.a-map-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    border-left: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
}

.a-map-cell {
    border-right: 1px dashed var(--border-color);
    border-top: 1px dashed var(--border-color);
}

.a-map-cell.is-bet {
    background: rgba(0, 255, 136, 0.06);
    outline: 1px solid rgba(0, 255, 136, 0.5);
    outline-offset: -1px;
}

.a-axis {
    position: absolute;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.a-axis-x {
    left: 0;
    right: 0;
    bottom: -24px;
    display: flex;
    justify-content: space-between;
}

.a-axis-y {
    left: -20px;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.a-bet-tag {
    position: absolute;
    left: 8px;
    bottom: calc(50% + 6px);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-green);
    opacity: 0;
    transition: opacity 0.4s ease 1.4s;
}

.a-map.play .a-bet-tag {
    opacity: 1;
}

.a-note {
    position: absolute;
    width: 42%;
    padding: 9px 10px;
    background: var(--paper);
    color: var(--paper-ink);
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 500;
    border-radius: 3px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translate(var(--fx), var(--fy)) rotate(var(--fr));
    transition: transform 0.6s var(--hw-ease), opacity 0.2s ease;
    transition-delay: var(--d);
}

.a-map.play .a-note {
    opacity: 1;
    transform: rotate(var(--r));
}

/* Sketches */

.a-sk {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.a-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg-primary);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    opacity: 0;
}

.a-frame svg {
    position: absolute;
    inset: 6%;
    width: 88%;
    height: 88%;
    fill: none;
    stroke: #d6d6e4;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.a-frame b {
    position: absolute;
    left: 6px;
    top: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
}

.a-sk.play .a-frame {
    animation: hw-flick 0.3s var(--hw-ease) forwards;
    animation-delay: calc(var(--i) * 120ms);
}

.a-frame.is-pick svg {
    stroke: var(--accent-green);
}

@keyframes hw-flick {
    0% { opacity: 0; transform: translateX(-30px) rotate(-6deg) scale(1.3); }
    100% { opacity: 1; transform: none; }
}

/* Build: tiles that assemble */

.a-build {
    position: relative;
    aspect-ratio: 1400 / 929;
    background: #f7f4ef;
    border-radius: 8px;
    overflow: hidden;
}

.a-tiles {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.a-tile {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) rotate(var(--tr));
    transition: transform 0.7s var(--hw-ease), opacity 0.25s ease;
    transition-delay: var(--d);
}

.a-tile picture {
    position: absolute;
    display: block;
    width: 300%;
    height: 200%;
    left: calc(var(--c) * -100%);
    top: calc(var(--r) * -100%);
}

.a-tile img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

.a-build.play .a-tile {
    opacity: 1;
    transform: none;
}

.a-wire {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #16161f;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 1;
    transition: opacity 0.5s ease 0.9s;
}

.a-build.play .a-wire {
    opacity: 0;
}

/* Test plan */

.a-plan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.a-plan-head {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.a-plan-head h4 {
    font-size: 18px;
    font-weight: 700;
}

.a-plan-head span {
    font-size: 14px;
    color: var(--text-secondary);
}

.a-plan h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

.a-plan ol,
.a-plan ul {
    list-style: none;
    display: grid;
    gap: 10px;
}

.a-plan li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-secondary);
    opacity: 0;
}

.a-plan.play li {
    animation: hw-rise 0.4s var(--hw-ease) forwards;
    animation-delay: calc(var(--i) * 110ms + 150ms);
}

.a-plan ol {
    counter-reset: t;
}

.a-plan ol li::before {
    counter-increment: t;
    content: counter(t);
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid var(--accent-green);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-green);
}

.a-plan ul li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--accent-purple);
    border-radius: 50%;
}

/* Ship */

.a-ship {
    position: relative;
}

.a-ship-frame {
    border-radius: 8px;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.82) translateY(30px);
    transition: transform 0.6s var(--hw-ease), opacity 0.3s ease;
    background: #f7f4ef;
}

.a-ship-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.a-ship.play .a-ship-frame {
    opacity: 1;
    transform: none;
}

.a-live {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 3;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-primary);
    border: 1px solid var(--accent-green);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-green);
    opacity: 0;
    transform: scale(0.6);
    transition: transform 0.45s var(--hw-ease) 0.55s, opacity 0.2s ease 0.55s;
}

.a-ship.play .a-live {
    opacity: 1;
    transform: none;
}

.a-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    z-index: 3;
    pointer-events: none;
}

/* Static render (language change, back): final state, no motion */

.is-static .a-frame,
.is-static .a-plan li,
.is-static .a-note,
.is-static .a-tile,
.is-static .a-ship-frame,
.is-static .a-live {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
}

.is-static .a-note { transform: rotate(var(--r)) !important; }
.is-static .a-tile,
.is-static .a-ship-frame { transform: none !important; }
.is-static .a-wire { opacity: 0; transition: none; }
.is-static .a-live { transform: none !important; }
.is-static .a-bet-tag { opacity: 1; transition: none; }
.is-static.a-stage { animation: none; }
.hw-inv-slot.is-still { animation: none; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .hw-path {
        min-height: 0;
    }

    .hw-stage {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hw-bar-side {
        align-items: flex-start;
    }

    .hw-bar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .hw {
        padding-top: 96px;
    }

    .hw-layout {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 16px;
    }

    .hw-track {
        height: auto;
        margin: 0;
        min-height: 520px;
    }

    .hw-track-line {
        left: 18px;
        right: auto;
        top: 20px;
        bottom: 20px;
        width: 3px;
        height: auto;
    }

    .hw-track-fill {
        transform-origin: center top;
        transform: scaleY(var(--p, 0));
    }

    .hw-node {
        left: 0;
        top: calc(var(--i) * (100% - 40px) / var(--max, 4));
        margin-left: 0;
    }

    .hw-node-label {
        display: none;
    }

    .a-sk {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .a-map {
        aspect-ratio: 0.8 / 1;
    }

    .a-note {
        font-size: 11px;
        padding: 7px 8px;
        width: 46%;
    }

    .a-plan {
        grid-template-columns: 1fr;
    }

    .hw-art-inner {
        padding: 14px;
    }

    .hw-term-input {
        font-size: 18px;
    }

    .hw-term-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .hw-term {
        padding: 8px 12px 8px;
    }

    .hw-prompt {
        padding: 10px 0 12px;
    }

    .hw-chips {
        margin-bottom: 8px;
        gap: 8px;
    }

    .hw-hint {
        margin-top: 4px;
        font-size: 14px;
        min-height: 1.4em;
    }

    .hw-count-num {
        font-size: 36px;
    }
}

@media (pointer: coarse) {
    .hw-chip {
        min-height: 48px;
        padding: 10px 20px;
        font-size: 16px;
    }

    .hw-term-go {
        min-height: 44px;
    }

    .hw-term-label,
    .hw-term {
        opacity: 0.95;
    }
}

/* ---------- Reduced motion ---------- */

.hw-rm *,
.hw-rm *::before,
.hw-rm *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
}

.hw-rm .hw-line,
.hw-rm .a-spark,
.hw-rm .hw-letter {
    display: none !important;
}

.hw-rm .a-note,
.hw-rm .a-tile,
.hw-rm .a-ship-frame {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .hw *,
    .hw *::before,
    .hw *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ======================================================================
   Complex path: layers and assembly
   ====================================================================== */

.hw-stack {
    display: inline-flex;
    flex-direction: column-reverse;
    gap: 3px;
    width: 38px;
}

.hw-stack i {
    display: block;
    height: 7px;
    border-radius: 2px;
    border: 1px solid #3a3a4e;
    opacity: 0.45;
    transform: scaleX(0.72);
    transition: transform 0.45s var(--hw-ease), opacity 0.3s ease;
}

.hw-stack i.on {
    opacity: 1;
    transform: none;
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

.hw-layer {
    position: absolute;
    inset: 0;
    border: 1px solid var(--accent-cyan);
    border-radius: 16px;
    opacity: 0;
    animation: hw-layer 0.85s ease-out var(--d, 0s) both;
}

@keyframes hw-layer {
    0% { opacity: 0; transform: scale(1.4); }
    35% { opacity: 0.55; }
    100% { opacity: 0; transform: scale(1); }
}

.hw-art-inner.is-zoom {
    animation: hw-zoom 0.7s var(--hw-ease);
}

@keyframes hw-zoom {
    from { transform: scale(1.05); opacity: 0.55; }
    to { transform: none; opacity: 1; }
}

.hw-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--accent-cyan);
    box-shadow: 0 0 16px 4px rgba(0, 212, 255, 0.5);
    animation: hw-scan 0.85s ease-in-out both;
}

@keyframes hw-scan {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(var(--h, 300px)); opacity: 0; }
}

/* Interviews */

.a-listen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.a-col h4 {
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--accent-purple);
}

.a-col.is-eng h4 {
    border-bottom-color: var(--accent-cyan);
}

.a-q {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateX(calc(var(--dir) * 70px));
}

.a-q.is-core {
    color: var(--text-primary);
    border-color: var(--accent-green);
    font-weight: 600;
}

.play .a-q {
    opacity: 1;
    transform: none;
    transition: transform 0.6s var(--hw-ease) calc(var(--i) * 0.12s), opacity 0.3s ease calc(var(--i) * 0.12s);
}

/* Object model */

.a-model-svg {
    display: block;
    width: 100%;
    height: auto;
}

.a-edges {
    opacity: 0;
    transition: opacity 0.5s ease 0.55s;
}

.play .a-edges {
    opacity: 1;
}

.a-edges path {
    fill: none;
    stroke: #3a3a4e;
    stroke-width: 2;
}

.a-n {
    opacity: 0;
    transform: scale(0.6);
    transform-box: fill-box;
    transform-origin: center;
}

.play .a-n {
    opacity: 1;
    transform: none;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.1s), opacity 0.3s ease calc(var(--i) * 0.1s);
}

.a-n rect {
    fill: #1f1f2b;
    stroke: #4a4a5e;
    stroke-width: 1.5;
}

.a-n text {
    fill: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.a-lay {
    opacity: 0;
    fill: none;
}

.a-lay-f { transform: translateY(-28px); }
.a-lay-e { transform: translateY(28px); }

.play .a-lay {
    opacity: 1;
    transform: none;
    transition: transform 0.7s var(--hw-ease) 1.1s, opacity 0.4s ease 1.1s;
}

.play .a-lay-e {
    transition-delay: 1.5s;
}

.a-lay rect {
    fill: rgba(168, 85, 247, 0.1);
    stroke: var(--accent-purple);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.a-lay path {
    stroke: var(--accent-purple);
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
}

.a-lay-e rect {
    fill: rgba(0, 212, 255, 0.08);
    stroke: var(--accent-cyan);
}

.a-lay-e path {
    stroke: var(--accent-cyan);
}

.a-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.a-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--accent-purple);
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
}

.a-chip.is-e {
    border-color: var(--accent-cyan);
}

.play .a-chip {
    opacity: 1;
    transition: opacity 0.4s ease 1.9s;
}

/* Design system tiles */

.a-sys {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.a-tl {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) rotate(var(--tr));
}

.a-sys.play .a-tl {
    opacity: 1;
    transform: none;
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.09s), opacity 0.25s ease calc(var(--i) * 0.09s);
}

.a-tl b {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.tlb {
    height: 56px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.tlb svg {
    width: 100%;
    height: 100%;
}

.tlb .ln,
.a-var .ln {
    stroke: var(--accent-cyan);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
}

.a-var .ln2 {
    stroke: var(--accent-purple);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 4 3;
}

.tlb .ax,
.a-var .ax {
    stroke: #4a4a5e;
    stroke-width: 1.5;
    fill: none;
}

.tlb .bar,
.a-var .bar {
    stroke: var(--accent-green);
    stroke-width: 7;
    stroke-linecap: round;
    fill: none;
}

.a-var .hot {
    fill: none;
    stroke: var(--accent-green);
    stroke-width: 2;
}

.tlb .sw {
    display: flex;
    gap: 4px;
}

.tlb .sw i {
    width: 14px;
    height: 36px;
    border-radius: 4px;
}

.tlb .tb {
    display: grid;
    gap: 6px;
    width: 100%;
}

.tlb .tb i {
    height: 7px;
    border-radius: 2px;
    background: #3a3a4e;
}

.tlb .st {
    display: grid;
    justify-items: center;
    gap: 3px;
    width: 100%;
    padding: 6px;
    border: 1px dashed #4a4a5e;
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    color: var(--text-secondary);
}

.tlb .st.is-err {
    border-color: #dc2626;
    color: #fca5a5;
}

.tlb .st b {
    font-size: 13px;
    color: #fca5a5;
}

.tlb .sk {
    width: 100%;
}

.tlb .sk i {
    position: relative;
    display: block;
    height: 7px;
    margin-bottom: 6px;
    border-radius: 2px;
    background: #2a2a3a;
    overflow: hidden;
}

.tlb .sk i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(-100%);
    animation: hw-shimmer 1.6s ease-in-out infinite;
}

@keyframes hw-shimmer {
    to { transform: translateX(100%); }
}

/* Validation */

.a-val {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.a-var {
    padding: 12px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.a-var h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.a-var svg {
    display: block;
    width: 100%;
    height: auto;
}

.a-ai {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--accent-purple);
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.1);
    opacity: 0;
    transform: translateY(14px);
}

.a-ai b {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}

.a-ai p {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.play .a-ai {
    opacity: 1;
    transform: none;
    transition: transform 0.6s var(--hw-ease) 1.1s, opacity 0.4s ease 1.1s;
}

/* Handoff: dim and dialog over assembled tiles */

.a-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    z-index: 2;
}

.a-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40%;
    z-index: 3;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.a-dialog picture,
.a-dialog img {
    display: block;
    width: 100%;
    height: auto;
}

.a-build.play .a-dim {
    opacity: 1;
    transition: opacity 0.4s ease 1.7s;
}

.a-build.play .a-dialog {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: transform 0.55s var(--hw-ease) 1.9s, opacity 0.3s ease 1.9s;
}

/* ======================================================================
   UX audit path: scanning and repair
   ====================================================================== */

.a-tag {
    display: grid;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.a-tag span {
    grid-area: 1 / 1;
}

.a-tag .ta {
    opacity: 0;
    color: var(--accent-green);
    font-weight: 600;
}

.a-tag .tb {
    font-weight: 600;
    color: #fca5a5;
}

.a-sp {
    container-type: inline-size;
    position: relative;
    aspect-ratio: 16 / 10;
    background: #e8e9ee;
    border-radius: 8px;
    overflow: hidden;
}

.sp-in {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 1.7cqw;
    color: #2b2d3a;
}

.sp-side {
    width: 15%;
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    padding: 1em 0.8em;
    background: #1b1e30;
}

.sp-side b {
    color: #ffffff;
    font-size: 1em;
}

.sp-side i {
    display: block;
    height: 0.6em;
    border-radius: 0.2em;
    background: #3b4060;
}

.sp-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8em 1em;
    background: #ffffff;
    border-bottom: 1px solid #d4d6de;
    font-size: 0.9em;
}

.sp-f {
    display: flex;
    gap: 0.3em;
}

.sp-f i {
    font-style: normal;
    font-size: 0.62em;
    padding: 0.15em 0.4em;
    border: 1px solid #c5c8d4;
    border-radius: 0.3em;
    background: #f1f2f6;
}

.sp-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 44% 56%;
    gap: 0.8em;
    padding: 0.8em;
}

.sp-map {
    position: relative;
    background: #d9dde6;
    border-radius: 0.4em;
    overflow: hidden;
}

.sp-map .pt {
    position: absolute;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
}

.sp-map .pt.is-sel {
    outline: 0.2em solid #4f46e5;
}

.sp-list {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    padding: 0.4em;
    background: #ffffff;
    border-radius: 0.4em;
    overflow: hidden;
}

.sp-row {
    display: grid;
    grid-template-columns: 1em 1fr 2em 2.6em;
    align-items: center;
    gap: 0.5em;
    padding: 0.25em 0.4em;
    font-size: 0.72em;
    border-radius: 0.3em;
}

.sp-row .d {
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
}

.sp-row .mv {
    font-size: 0.7em;
    padding: 0.1em 0.3em;
    border: 1px solid #c5c8d4;
    border-radius: 0.3em;
    text-align: center;
    color: #666b80;
}

.sp-row.is-sel {
    background: #e5e7fb;
}

.sp-row.is-alert {
    background: #f1e6e6;
    color: #8f6f6f;
}

.sp-beam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    z-index: 3;
    background: var(--accent-cyan);
    box-shadow: 0 0 18px 6px rgba(0, 212, 255, 0.45);
    opacity: 0;
}

.play .sp-beam {
    animation: sp-beam 1.1s ease-in-out both;
}

@keyframes sp-beam {
    0% { transform: translateX(0); opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translateX(100cqw); opacity: 0; }
}

.sp-mk {
    position: absolute;
    z-index: 4;
    width: 2.6em;
    height: 2.6em;
    margin: -1.3em 0 0 -1.3em;
    perspective: 500px;
    opacity: 0;
}

.sp-mk .fl {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.sp-mk .f {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.05em;
    font-weight: 800;
    color: #ffffff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.35);
}

.sp-mk .r { background: #dc2626; }
.sp-mk .g { background: #15803d; transform: rotateY(180deg); }

.play .sp-mk {
    animation: sp-glitch 0.55s steps(1, end) var(--pd, 0s) both;
}

@keyframes sp-glitch {
    0% { opacity: 0; transform: scale(0.3); }
    20% { opacity: 1; transform: translate(-3px, 0) scale(1.25); }
    35% { opacity: 0.35; transform: translate(3px, -2px) scale(1); }
    55% { opacity: 1; transform: translate(-2px, 1px) scale(1.1); }
    100% { opacity: 1; transform: none; }
}

.play .sp-mk.is-fixed .fl {
    transform: rotateY(180deg);
    transition: transform 0.55s var(--hw-ease) calc(var(--i) * 0.5s + 0.7s);
}

.a-leg {
    list-style: none;
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

.a-leg li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 0;
}

.a-leg .n {
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dc2626;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.play .a-leg li {
    animation: hw-rise 0.4s var(--hw-ease) both;
    animation-delay: calc(1.5s + var(--i) * 0.12s);
}

/* Context card */

.a-ctx h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
}

.a-ctx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.a-cx {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    opacity: 0;
    transform: translateY(16px);
}

.a-cx svg {
    width: 28px;
    height: 28px;
    color: var(--accent-cyan);
}

.a-ctx.play .a-cx {
    opacity: 1;
    transform: none;
    transition: transform 0.6s var(--hw-ease) calc(var(--i) * 0.12s), opacity 0.35s ease calc(var(--i) * 0.12s);
}

/* Rank grid */

.a-mk {
    position: absolute;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    opacity: 0;
    transform: translate(var(--fx), var(--fy));
}

.a-mk .sp-mk-n {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #dc2626;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.a-map.play .a-mk {
    opacity: 1;
    transform: none;
    transition: transform 0.75s var(--hw-ease) var(--d), opacity 0.2s ease var(--d);
}

/* Fix: before morphs into after */

.a-morph {
    position: relative;
}

.a-after {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.98);
    background: #ffffff;
}

.a-after picture {
    display: block;
    width: 100%;
    height: 100%;
}

.a-after img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.a-morph .a-sp {
    transition: opacity 0.8s ease 3.1s, transform 0.8s var(--hw-ease) 3.1s;
}

.play .a-morph .a-sp {
    opacity: 0;
    transform: scale(1.03);
}

.play .a-after {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease 3.1s, transform 0.8s var(--hw-ease) 3.1s;
}

.play .a-tag .tb {
    opacity: 0;
    transition: opacity 0.5s ease 3.1s;
}

.play .a-tag .ta {
    opacity: 1;
    transition: opacity 0.5s ease 3.1s;
}

/* Prove */

.a-prove {
    display: grid;
    gap: 14px;
}

.a-pv-screen {
    position: relative;
    aspect-ratio: 1400 / 875;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.a-pv-screen > picture,
.a-pv-screen > picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.a-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 26%;
    transform: translateX(108%);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
    background: #ffffff;
}

.a-drawer picture,
.a-drawer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.play .a-drawer {
    transform: none;
    transition: transform 0.7s var(--hw-ease) 0.5s;
}

.a-plan.one {
    grid-template-columns: 1fr;
    gap: 14px;
}

.play .a-plan li {
    animation: hw-rise 0.4s var(--hw-ease) forwards;
    animation-delay: calc(var(--i) * 110ms + 900ms);
}

/* Static states (language change, going back) for the new artifacts */

.is-static .a-q,
.is-static .a-n,
.is-static .a-tl,
.is-static .a-cx,
.is-static .a-leg li,
.is-static .a-plan li,
.is-static .a-edges,
.is-static .a-lay,
.is-static .a-chip,
.is-static .a-ai,
.is-static .sp-mk,
.is-static .a-mk,
.is-static .a-dim,
.is-static .a-dialog {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.is-static .a-dialog { transform: translate(-50%, -50%) !important; }
.is-static .sp-beam { display: none; }
.is-static .sp-mk.is-fixed .fl { transform: rotateY(180deg) !important; transition: none !important; }
.is-static .a-morph .a-sp { opacity: 0 !important; transition: none !important; }
.is-static .a-after { opacity: 1 !important; transform: none !important; transition: none !important; }
.is-static .a-tag .tb { opacity: 0 !important; }
.is-static .a-tag .ta { opacity: 1 !important; }
.is-static .a-drawer { transform: none !important; transition: none !important; }
.is-static .hw-stack i { transition: none; }

.hw-rm .hw-layer,
.hw-rm .hw-scan {
    display: none !important;
}

@media (max-width: 720px) {
    .a-listen,
    .a-val {
        grid-template-columns: 1fr;
    }

    .a-sys {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .a-ctx-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .a-dialog {
        width: 58%;
    }
}

/* ======================================================================
   Version 3: six situations
   ====================================================================== */

/* Intro cards */

.hw-path-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hw-path-ico {
    font-size: 20px;
    line-height: 1;
}

.hw-path-title {
    font-size: 24px;
}

/* Brief panel */

.hw-brief-text {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 62ch;
}

.hw-brief-h {
    margin-top: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.hw-brief-list {
    list-style: none;
    display: grid;
    gap: 8px;
}

.hw-brief-list li {
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    color: var(--text-secondary);
}

.hw-brief-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border: 2px solid var(--accent-green);
    border-radius: 50%;
}

.hw-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.hw-var {
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.hw-var:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.hw-var.is-on {
    color: var(--text-primary);
    border-color: var(--accent-green);
    background: rgba(0, 255, 136, 0.08);
}

.hw-brief-start {
    margin-top: 20px;
    font-size: 15px;
    color: var(--text-secondary);
}

/* Summary extras */

.hw-sum-extra {
    margin-top: 20px;
    max-width: 62ch;
    padding-left: 14px;
    border-left: 2px solid var(--accent-purple);
    font-size: 16px;
    color: var(--text-secondary);
}

.hw-sum-closing {
    margin-top: 28px;
    font-size: 18px;
    font-weight: 600;
}

.hw-sum-closing a {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--accent-green);
}

/* Motion: growth */

.hw-blade {
    position: absolute;
    bottom: 0;
    width: 3px;
    height: var(--bh, 80px);
    border-radius: 2px 2px 0 0;
    background: var(--accent-green);
    transform-origin: bottom center;
    opacity: 0;
    animation: hw-grow 0.9s ease-out var(--d, 0s) both;
}

@keyframes hw-grow {
    0% { transform: scaleY(0); opacity: 0.8; }
    60% { transform: scaleY(1); opacity: 0.7; }
    100% { transform: scaleY(1); opacity: 0; }
}

.a-map.m-growth:not(.play) .a-note {
    transform: scale(0.2) translateY(30px) rotate(var(--r));
    transform-origin: 50% 100%;
}

.a-build.bloom:not(.play) .a-tile {
    transform: scale(0.5) rotate(var(--tr));
}

/* Motion: chaos */

.hw-chaos {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--co, 0.6);
    transition: opacity 0.9s ease;
}

.hw-art-inner {
    z-index: 1;
}

.hw-art.has-chaos .hw-art-inner {
    background: rgba(22, 22, 31, 0.7);
}

.cx {
    position: absolute;
    transform: rotate(var(--rot, 0deg));
    transition: transform 0.9s var(--hw-ease), opacity 0.6s ease;
}

.cx.gone {
    transform: translate(var(--gx, 0), var(--gy, 0)) scale(0.25) rotate(40deg);
    opacity: 0;
}

.cxi {
    animation: cx-drift 7s ease-in-out var(--dd, 0s) infinite alternate;
}

@keyframes cx-drift {
    from { transform: translate(-6px, -4px) rotate(-1.5deg); }
    to { transform: translate(7px, 5px) rotate(1.5deg); }
}

.cx-card {
    width: 92px;
    padding: 8px;
    border: 1px solid #4a4a5e;
    border-radius: 6px;
    background: #1c1c28;
}

.cx-card i {
    display: block;
    height: 5px;
    margin-bottom: 5px;
    border-radius: 2px;
    background: #3a3a4e;
}

.cx-menu {
    width: 70px;
    padding: 6px;
    border: 1px solid #4a4a5e;
    background: #1c1c28;
}

.cx-menu b {
    display: block;
    height: 6px;
    margin-bottom: 5px;
    border-radius: 1px;
    background: #4a4a5e;
}

.cx-btns {
    display: flex;
    gap: 6px;
}

.cx-btns u {
    display: block;
    width: 32px;
    height: 16px;
    border-radius: 2px;
    background: #3b82f6;
}

.cx-btns u:nth-child(2) { background: #2563eb; border-radius: 8px; }
.cx-btns u:nth-child(3) { background: #6366f1; width: 36px; }
.cx-btns u:nth-child(4) { background: #0ea5e9; border-radius: 4px; height: 18px; }
.cx-btns u:nth-child(5) { background: #1d4ed8; border-radius: 10px; }

.cx-label {
    padding: 3px 8px;
    border: 1px dashed #6b6b7a;
    border-radius: 4px;
    font-size: 12px;
    color: #a0a0b0;
    white-space: nowrap;
}

.cx-arrow svg {
    display: block;
    width: 56px;
    height: 22px;
    fill: none;
    stroke: #6b6b7a;
    stroke-width: 2;
}

/* Green meadow artifacts */

.a-guide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.a-gcol h4 {
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--accent-green);
    font-size: 14px;
    font-weight: 700;
}

.a-tw {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.a-tw .tr {
    color: transparent;
}

.a-jobs {
    display: grid;
    gap: 10px;
}

.a-src {
    width: max-content;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px dashed var(--accent-green);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-green);
}

.a-job {
    margin-left: 18px;
    padding: 12px 14px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-green);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-secondary);
    opacity: 0;
    transform: scaleY(0.05);
    transform-origin: top center;
}

.play .a-job {
    opacity: 1;
    transform: none;
    transition: transform 0.7s var(--hw-ease) calc(0.4s + var(--i) * 0.4s), opacity 0.3s ease calc(0.4s + var(--i) * 0.4s);
}

.a-sk.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.play .a-sk.m-growth .a-frame {
    animation: hw-unfold 0.6s var(--hw-ease) forwards;
    animation-delay: calc(var(--i) * 160ms);
}

@keyframes hw-unfold {
    0% { opacity: 0; transform: scaleY(0.03); }
    30% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}

.a-wf {
    margin-top: 12px;
    padding: 10px;
    background: var(--bg-primary);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(14px);
}

.play .a-wf {
    opacity: 1;
    transform: none;
    transition: transform 0.6s var(--hw-ease) 1.1s, opacity 0.4s ease 1.1s;
}

.a-wf svg {
    display: block;
    width: 100%;
    height: auto;
    fill: none;
    stroke: #d6d6e4;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.a-wf .hot {
    stroke: var(--accent-green);
}

.a-scope {
    display: grid;
    gap: 12px;
}

.a-sc-img {
    border-radius: 8px;
    overflow: hidden;
    background: #f7f4ef;
    opacity: 0;
    transform: scale(0.9) translateY(18px);
}

.a-sc-img picture,
.a-sc-img img {
    display: block;
    width: 100%;
    height: auto;
}

.play .a-sc-img {
    opacity: 1;
    transform: none;
    transition: transform 0.6s var(--hw-ease), opacity 0.3s ease;
}

.a-sc-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 14px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.a-sc-col h5 {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

.a-sc-col ul {
    list-style: none;
    display: grid;
    gap: 8px;
}

.a-sc-col li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 0;
}

.a-sc-col li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border: 2px solid #8e8e9e;
    border-radius: 50%;
}

.a-sc-col.is-now li::before {
    border-color: var(--accent-green);
    background: var(--accent-green);
}

.play .a-sc-col li {
    animation: hw-rise 0.4s var(--hw-ease) forwards;
    animation-delay: calc(0.7s + var(--i) * 110ms);
}

/* Total mess artifacts */

.a-bp-svg {
    display: block;
    width: 100%;
    height: auto;
}

.a-lane {
    opacity: 0;
}

.a-lane rect {
    fill: rgba(255, 255, 255, 0.03);
    stroke: #2a2a3a;
}

.a-lane text {
    fill: #a0a0b0;
    font-size: 11px;
    font-weight: 600;
}

.play .a-lane {
    opacity: 1;
    transition: opacity 0.4s ease calc(var(--i) * 0.15s);
}

.a-flow {
    fill: none;
    stroke: var(--accent-cyan);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    opacity: 0;
}

.play .a-flow {
    opacity: 0.8;
    transition: opacity 0.5s ease 1.7s;
}

.a-bx {
    opacity: 0;
    transform: scale(0.7);
    transform-box: fill-box;
    transform-origin: center;
}

.play .a-bx {
    opacity: 1;
    transform: none;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.5s + var(--i) * 0.12s), opacity 0.3s ease calc(0.5s + var(--i) * 0.12s);
}

.a-bx rect {
    fill: #1f1f2b;
    stroke: #4a4a5e;
}

.a-bx.is-work rect {
    stroke: #f59e0b;
}

.a-bx text {
    fill: #ffffff;
    font-size: 10.5px;
    font-weight: 500;
}

.a-bx circle {
    fill: #f59e0b;
}

.a-bx .bang {
    fill: #16161f;
    font-size: 10px;
    font-weight: 800;
}

.a-bp-leg {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.a-bp-leg .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
}

.a-inv {
    display: grid;
    gap: 6px;
}

.a-inv-head,
.a-inv-row {
    display: grid;
    grid-template-columns: 1.1fr 0.8fr 1.6fr;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.a-inv-head {
    font-weight: 600;
    color: var(--text-secondary);
}

.a-inv-row {
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) rotate(var(--tr));
}

.a-inv-row span:first-child {
    font-weight: 600;
    color: #ffffff;
}

.play .a-inv-row {
    opacity: 1;
    transform: none;
    transition: transform 0.7s var(--hw-ease) calc(var(--i) * 0.08s), opacity 0.25s ease calc(var(--i) * 0.08s);
}

.a-inv-row.is-dup {
    border-left: 3px solid var(--accent-purple);
    box-shadow: 0 3px 0 -1px #2a2a3a, 0 6px 0 -2px #202030;
}

.a-inv-row.is-dup span:last-child {
    color: #d8b4fe;
}

.a-aifloat {
    position: absolute;
    left: 6%;
    top: 36%;
    z-index: 1;
    width: 42%;
    padding: 10px 12px;
    border: 1px solid var(--accent-purple);
    border-radius: 10px;
    background: rgba(22, 22, 31, 0.96);
    opacity: 0;
    transform: translateY(12px);
}

.a-aifloat b {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}

.a-aifloat p {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.a-build.play .a-aifloat {
    opacity: 1;
    transform: none;
    transition: transform 0.6s var(--hw-ease) 1.4s, opacity 0.4s ease 1.4s;
}

.a-build.late.play .a-dim {
    transition-delay: 2.6s;
}

.a-build.late.play .a-dialog {
    transition-delay: 2.8s;
}

/* UX audit: usability test card */

.a-tasks h4 {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
}

.a-task-head {
    display: grid;
    grid-template-columns: 1fr 96px;
    padding: 0 12px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.a-tasks ol {
    list-style: none;
    display: grid;
    gap: 8px;
}

.a-tasks li {
    display: grid;
    grid-template-columns: 1fr 96px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(14px);
}

.play .a-tasks li {
    opacity: 1;
    transform: none;
    transition: transform 0.5s var(--hw-ease) calc(var(--i) * 0.14s), opacity 0.3s ease calc(var(--i) * 0.14s);
}

.a-tasks .mks {
    display: flex;
    gap: 6px;
}

.a-tasks .n {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dc2626;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.a-tasks h5 {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
}

.a-wchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.a-wchip {
    padding: 6px 12px;
    border: 1px solid var(--accent-purple);
    border-radius: 999px;
    font-size: 13px;
    opacity: 0;
}

.play .a-wchip {
    opacity: 1;
    transition: opacity 0.4s ease calc(var(--i) * 0.14s);
}

/* Static states for the new artifacts */

.is-static .a-job,
.is-static .a-wf,
.is-static .a-sc-img,
.is-static .a-sc-col li,
.is-static .a-lane,
.is-static .a-bx,
.is-static .a-inv-row,
.is-static .a-aifloat,
.is-static .a-tasks li,
.is-static .a-wchip {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.is-static .a-flow {
    opacity: 0.8 !important;
    transition: none !important;
}

.is-static .a-tile {
    transform: none !important;
}

.hw-rm .cxi,
.hw-rm .hw-blade {
    animation: none !important;
}

.hw-rm .hw-blade {
    display: none !important;
}

/* Responsive for the new layout */

@media (max-width: 960px) {
    .hw-paths {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hw-inv-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .hw-paths {
        grid-template-columns: 1fr;
    }

    .hw-inv-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .a-guide,
    .a-sc-card {
        grid-template-columns: 1fr;
    }

    .a-sk.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .a-aifloat {
        width: 62%;
        top: 30%;
    }

    .a-inv-head,
    .a-inv-row {
        grid-template-columns: 1fr 0.8fr;
    }

    .a-inv-head span:last-child,
    .a-inv-row span:last-child {
        display: none;
    }

    .cx-card,
    .cx-menu {
        transform-origin: center;
    }
}

@media (max-width: 720px) {
    .a-bp,
    .a-model {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .a-bp-svg {
        min-width: 500px;
    }

    .a-model-svg {
        min-width: 420px;
    }
}

/* Intro cards: thumbnail instead of emoji icon, three per row */

.hw-paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hw-path {
    padding: 0 0 24px;
    overflow: hidden;
    gap: 10px;
}

.hw-path > .hw-path-name,
.hw-path > .hw-path-title,
.hw-path > .hw-path-go {
    padding-left: 24px;
    padding-right: 24px;
}

.hw-path-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 8px;
    background: var(--bg-card-hover);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.hw-path-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

.hw-path-thumb.is-empty {
    background:
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(128, 128, 128, 0.08) 12px 24px),
        var(--bg-card-hover);
}

@media (max-width: 600px) {
    .hw-paths { grid-template-columns: 1fr; }
}

.hw-path > .hw-path-go {
    align-self: flex-end;
    text-align: right;
}

/* Summary screenshots gallery */

.hw-sum-gallery {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.hw-sum-gallery li:first-child {
    grid-column: 1 / -1;
}

.hw-sum-gallery a {
    display: block;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card);
}

.hw-sum-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .hw-sum-gallery { grid-template-columns: 1fr; }
}

/* Screenshot buttons + lightbox */

.hw-sum-gallery .hw-shot {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card);
    cursor: zoom-in;
}

body.hw-lb-open { overflow: hidden; }

.hw-lb {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
}

.hw-lb-fig {
    margin: 0;
    max-width: calc(100vw - 160px);
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.hw-lb-fig img {
    max-width: 100%;
    max-height: calc(100vh - 90px);
    object-fit: contain;
    border-radius: 8px;
}

.hw-lb-fig figcaption {
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.hw-lb button {
    position: absolute;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 30px;
    line-height: 1;
}

.hw-lb button:hover,
.hw-lb button:focus-visible { background: rgba(255, 255, 255, 0.28); }

.hw-lb-x { top: 16px; right: 16px; }
.hw-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.hw-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
    .hw-lb-fig { max-width: 100vw; }
    .hw-lb-nav { top: auto !important; bottom: 16px; transform: none !important; }
}

/* Summary: two boxes per row, connected by arrows to show the flow */

.hw-sum-list {
    --gap: 56px;
    --row: 44px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: var(--row);
    max-width: 1040px;
}

.hw-sum-item {
    position: relative;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    align-items: start;
}

.hw-sum-item .hw-sum-icon {
    width: 48px;
    height: 48px;
}

/* left box -> right box */
.hw-sum-item:nth-child(odd):not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: var(--gap);
    height: 14px;
    margin-top: -7px;
    background: var(--accent-green);
    opacity: 0.75;
    clip-path: polygon(8px 6px, calc(100% - 12px) 6px, calc(100% - 12px) 0, calc(100% - 4px) 7px, calc(100% - 12px) 14px, calc(100% - 12px) 8px, 8px 8px);
}

/* right box -> next row's left box */
.hw-sum-item:nth-child(even):not(:last-child)::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 50%;
    width: calc(100% + var(--gap) + 8px);
    height: var(--row);
    background: var(--accent-green);
    opacity: 0.75;
    clip-path: polygon(
        calc(100% - 2px) 0, 100% 0, 100% 22px, 9px 22px, 9px calc(100% - 12px),
        14px calc(100% - 12px), 8px calc(100% - 2px), 2px calc(100% - 12px), 7px calc(100% - 12px),
        7px 20px, calc(100% - 2px) 20px);
}

@media (max-width: 700px) {
    .hw-sum-list {
        grid-template-columns: 1fr;
        --row: 32px;
    }

    .hw-sum-item:nth-child(n):not(:last-child)::after {
        top: 100%;
        left: 50%;
        right: auto;
        width: 14px;
        height: var(--row);
        margin: 0 0 0 -7px;
        clip-path: polygon(6px 4px, 8px 4px, 8px calc(100% - 12px), 14px calc(100% - 12px), 7px calc(100% - 2px), 0 calc(100% - 12px), 6px calc(100% - 12px));
    }
}

.hw-shot-cap {
    margin: 10px 2px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
    color: var(--text-secondary);
}

.hw-shot-cap strong {
    color: var(--text-primary);
    font-size: 16px;
}

.hw-lb-fig figcaption strong { font-size: 16px; }
.hw-lb-fig figcaption small { opacity: 0.7; }

/* Prove step: the station detail slides in as a panel over the ops console */

.a-drawer {
    top: 50%;
    bottom: auto;
    right: 2%;
    width: 54%;
    border-radius: 10px;
    overflow: hidden;
    transform: translate(108%, -50%);
}

.a-drawer picture,
.a-drawer img {
    height: auto;
}

.play .a-drawer {
    transform: translate(0, -50%);
}

.is-static .a-drawer { transform: translate(0, -50%) !important; }

/* Summary flow boxes span the full container width */
.hw-sum-list {
    max-width: none;
    width: 100%;
}

/* Mobile menu: show every item (incl. Contact), scroll if the screen is short */
@media (max-width: 768px) {
    .nav-links {
        justify-content: safe center;
        overflow-y: auto;
        padding: 80px 0 40px;
        gap: 28px;
    }

    .nav-links.active li {
        opacity: 1;
        transform: translateY(0);
    }
}