/* ========================================
   App styles - edulab "Editorial Color"
   All colours, fonts, radii and shadows come from colors_and_type.css.
   ======================================== */

:root {
    /* App-level aliases over the edulab tokens */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 450ms ease-out;
    --wrap: 1100px;
    --gutter: 30px;
    --on-dark-muted: color-mix(in srgb, var(--paper) 72%, transparent);
    --on-dark-line: color-mix(in srgb, var(--paper) 14%, transparent);
}

/* ========================================
   Reset & Base
   ======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

button {
    font: inherit;
}

:focus-visible {
    outline: 3px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* ========================================
   Branded top menu
   ======================================== */

.edu-header {
    position: static;
    width: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line-2);
}

.edu-header-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 8px var(--gutter);
    display: flex;
    align-items: center;
    gap: 12px;
}

.edu-logo {
    width: 64px;
    height: 64px;
    display: block;
    margin-right: -6px;
}

.edu-wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.02em;
    color: var(--ink);
}

/* ========================================
   Language switcher (segmented toggle)
   ======================================== */

.language-switcher {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--paper-2);
    border-radius: var(--r-pill);
}

.lang-btn {
    border: none;
    background: transparent;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.lang-btn:hover {
    background: var(--paper-3);
    color: var(--ink);
}

.lang-btn.active {
    background: var(--yellow);
    color: var(--yellow-ink);
}

/* ========================================
   App container
   ======================================== */

.app {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 81px);
}

/* ========================================
   Page header
   ======================================== */

.header {
    padding: 44px 0 36px;
    margin-bottom: 32px;
    text-align: left;
    border-bottom: 1px solid var(--line-2);
}

.title-main {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.3rem, 5vw, 3.3rem);
    letter-spacing: -.025em;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 14px;
}

.subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ink-2);
}

/* ========================================
   Browser bar simulation
   ======================================== */

.browser-bar {
    margin-bottom: 32px;
}

.browser-bar-inner {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow-sm);
}

.browser-controls {
    display: flex;
    gap: var(--sp-2);
}

.browser-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.browser-dot.red {
    background: var(--red);
}

.browser-dot.yellow {
    background: var(--yellow);
}

.browser-dot.green {
    background: var(--green);
}

.address-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--paper-2);
    border: 1px solid var(--line-strong);
    padding: 10px 18px;
    border-radius: var(--r-pill);
}

.lock-icon {
    display: inline-flex;
    color: var(--green-600);
}

.lock-icon svg {
    width: 18px;
    height: 18px;
}

.url-text {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--ink);
}

.cursor {
    width: 2px;
    height: 18px;
    background: var(--ink);
    animation: blink 1s step-end infinite;
    opacity: 0;
}

@keyframes blink {
    50% {
        opacity: 1;
    }
}

/* ========================================
   Timeline
   ======================================== */

.timeline {
    margin-bottom: 32px;
    position: relative;
}

.timeline-track {
    position: absolute;
    top: 30px;
    left: 56px;
    right: 56px;
    height: 4px;
    background: var(--paper-3);
    border-radius: var(--r-pill);
    z-index: 0;
}

.timeline-progress {
    height: 100%;
    background: var(--yellow);
    border-radius: var(--r-pill);
    width: 0%;
    transition: width var(--transition-slow);
}

.timeline-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    gap: var(--sp-1);
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    padding: var(--sp-2);
    min-width: 96px;
}

.step-number {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1rem;
    color: var(--ink-2);
    transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.timeline-step:hover .step-number {
    background: var(--paper-2);
    color: var(--ink);
}

.timeline-step.completed .step-number {
    background: var(--blue-soft);
    border-color: var(--blue-soft);
    color: var(--blue-ink);
}

.timeline-step.active .step-number {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--yellow-ink);
    box-shadow: var(--shadow-primary);
}

.step-label {
    font-size: 0.92rem;
    color: var(--ink-3);
    text-align: center;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.timeline-step.completed .step-label {
    color: var(--ink-2);
}

.timeline-step.active .step-label {
    color: var(--ink);
    font-weight: 600;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   Main content
   ======================================== */

.main-content {
    flex: 1;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
}

/* The active step dissolves into the main column so its stage and its text
   can sit on either side of the shared controls: stage → controls → text */
.step-content {
    display: none;
}

.step-content.active {
    display: contents;
}

.step-content.active > * {
    animation: fadeIn var(--transition-slow);
}

.step-visualization { order: 1; }
.nav-controls       { order: 2; }
.kbd-hint           { order: 3; }
.step-info          { order: 4; }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Visualization stage: full-width stone well with a faint dot grid */
.step-visualization {
    position: relative;
    background-color: var(--paper-2);
    background-image: radial-gradient(var(--line) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-xl);
    padding: 56px 48px;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    box-shadow: var(--shadow-sm);
}

/* Step info: text left, info card right */
.step-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;   /* a tall card stretches the paragraph row, not the gap under the title */
    column-gap: 48px;
    margin-top: 40px;
    align-items: start;
}

.step-info h2 {
    grid-column: 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 3.4vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 16px;
}

.step-info > p {
    grid-column: 1;
    font-size: 1.18rem;
    line-height: 1.65;
    color: var(--ink-2);
}

.info-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.info-card > h3 {
    padding: 16px 24px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--ink);
}

.info-card > :not(h3) {
    margin: 20px 24px 24px;
}

.info-card p {
    font-size: 1.05rem;
    color: var(--ink-2);
}

.info-card strong {
    color: var(--ink);
}

.info-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-card li {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    padding-left: 26px;
    position: relative;
}

.info-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    font-family: var(--font-mono);
    color: var(--ink);
}

/* ========================================
   Motion: entrances and travelling messages
   Stagger with style="--d:N" (N x 150ms)
   ======================================== */

.anim {
    animation: rise .55s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--d, 0) * 150ms);
}

.pop {
    animation: fadeIn .35s ease-out both;
    animation-delay: calc(var(--d, 0) * 150ms);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Building blocks: tiles, nodes, chips, pills
   ======================================== */

.tile {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.tile svg {
    width: 40px;
    height: 40px;
}

.tile.lg {
    width: 112px;
    height: 112px;
    border-radius: var(--r-xl);
}

.tile.lg svg {
    width: 52px;
    height: 52px;
}

.tile.sm {
    width: 64px;
    height: 64px;
    border-radius: var(--r-md);
}

.tile.sm svg {
    width: 30px;
    height: 30px;
}

.tile.blue   { background: var(--blue-soft);   border-color: var(--blue-soft);   color: var(--blue-ink); }
.tile.green  { background: var(--green-soft);  border-color: var(--green-soft);  color: var(--green-ink); }
.tile.red    { background: var(--red-soft);    border-color: var(--red-soft);    color: var(--red-ink); }
.tile.yellow { background: var(--yellow);      border-color: var(--yellow);      color: var(--yellow-ink); }
.tile.ink    { background: var(--ink);         border-color: var(--ink);         color: var(--yellow); }

.node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.node-label {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.node-meta {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--ink-3);
}

.chip {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--r-pill);
}

.chip-red {
    background: var(--red-soft);
    color: var(--red-ink);
}

.pill-lg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px 12px 18px;
    border-radius: var(--r-pill);
    font-size: 1.05rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.pill-lg svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.pill-yellow {
    background: var(--yellow);
    color: var(--yellow-ink);
}

.pill-green {
    background: var(--green-soft);
    color: var(--green-ink);
}

.chain-arrow {
    display: inline-flex;
    color: var(--ink-3);
}

.chain-arrow svg {
    width: 24px;
    height: 24px;
}

/* ========================================
   Duplex: browser on the left, server on the right,
   message lanes in between (steps 1, 4, 5, 6, 7)
   ======================================== */

.duplex {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 36px;
}

.endpoint {
    min-width: 140px;
}

.lanes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.lane {
    position: relative;
    width: 100%;
    height: 54px;
}

.lane::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px dashed var(--line-2);
}

.msg {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-md);
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    animation-duration: .9s;
    animation-timing-function: cubic-bezier(.45, 0, .2, 1);
    animation-fill-mode: both;
    animation-delay: calc(var(--d, 0) * 150ms);
}

.msg svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.lane.to-server .msg {
    animation-name: toServer;
}

.lane.to-client .msg {
    animation-name: toClient;
}

/* The pill travels the lane and rests where it arrived */
@keyframes toServer {
    from {
        left: 0;
        translate: 0 -50%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    to {
        left: 100%;
        translate: -100% -50%;
        opacity: 1;
    }
}

@keyframes toClient {
    from {
        left: 100%;
        translate: -100% -50%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    to {
        left: 0;
        translate: 0 -50%;
        opacity: 1;
    }
}

.msg-key {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* ========================================
   Step 1: URL anatomy
   ======================================== */

.url-anatomy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 6px;
}

.url-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.u-seg {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    line-height: 1.2;
}

.u-proto  { background: var(--blue-soft);  color: var(--blue-ink); }
.u-sub    { background: var(--surface);    color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.u-domain { background: var(--yellow);     color: var(--yellow-ink); }
.u-path   { background: var(--green-soft); color: var(--green-ink); }
.u-query  { background: var(--ink);        color: var(--paper); }

.u-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
}

/* ========================================
   Step 2: cache chain
   ======================================== */

.cache-chain {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

.cache-chain .node {
    width: 168px;
}

.cache-chain .chain-arrow {
    margin-top: 32px;
}

.handoff {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.handoff-arrow {
    display: inline-flex;
    color: var(--ink-3);
}

.handoff-arrow svg {
    width: 26px;
    height: 26px;
}

/* ========================================
   Step 3: DNS ladder
   ======================================== */

.dns-ladder {
    width: min(100%, 680px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dns-row {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 14px 20px 14px 14px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.dns-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.dns-id .node-label {
    font-size: 1.1rem;
}

.answer {
    font-size: 1rem;
    font-style: italic;
    color: var(--ink-2);
    background: var(--paper-2);
    padding: 8px 16px;
    border-radius: var(--r-pill);
}

.ip-chip {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 500;
    background: var(--ink);
    color: var(--yellow);
    padding: 8px 16px;
    border-radius: var(--r-pill);
}

.ladder-step {
    display: inline-flex;
    padding: 8px 0;
    color: var(--ink-3);
}

.ladder-step svg {
    width: 22px;
    height: 22px;
}

/* ========================================
   Steps 6-7: dark data panel (request / response on the wire)
   ======================================== */

.payload {
    width: min(100%, 420px);
    background: var(--ink);
    border-radius: var(--r-lg);
    padding: 18px 22px;
    font-family: var(--font-mono);
    font-size: 15px;
    box-shadow: var(--shadow-md);
}

.payload-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--on-dark-line);
    font-size: 1.15rem;
}

.method {
    font-weight: 500;
    color: var(--yellow);
}

.path {
    color: var(--paper);
}

.proto {
    color: var(--on-dark-muted);
}

.status-chip {
    font-size: 14px;
    background: var(--green-soft);
    color: var(--green-ink);
    padding: 3px 12px;
    border-radius: var(--r-pill);
}

.payload-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    line-height: 1.8;
}

.payload-row .k {
    color: var(--on-dark-muted);
}

.payload-row .v {
    color: var(--paper);
    overflow-wrap: anywhere;
}

.file-stream {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.file-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 18px 12px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.file-card .tile {
    box-shadow: none;
    margin-bottom: 4px;
}

.file-name {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
}

/* ========================================
   Step 8: rendering flow
   ======================================== */

.render-flow {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 28px;
}

.parse-rows {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.parse-row,
.paint-chain {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.node.sm {
    width: 112px;
    gap: 8px;
}

.js-row {
    justify-content: center;
}

.node.sm .node-label {
    font-size: 14px;
}

.parse-row .chain-arrow,
.paint-chain .chain-arrow {
    margin-top: 20px;
}

.merge-arrow {
    display: inline-flex;
    color: var(--ink);
}

.merge-arrow svg {
    width: 32px;
    height: 32px;
}

.paint-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

/* Hand-drawn finished page */
.page-mock {
    width: 270px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.pm-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
}

.pm-bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
}

.pm-bar span:nth-child(2) { background: var(--yellow); }
.pm-bar span:nth-child(3) { background: var(--green); }

.pm-bar .pm-url {
    flex: 1;
    width: auto;
    height: 12px;
    margin-left: 8px;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
}

.pm-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.pm-hero {
    height: 48px;
    border-radius: var(--r-xs);
    background: var(--yellow);
}

.pm-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pm-card {
    height: 38px;
    border-radius: var(--r-xs);
    background: var(--paper-3);
}

.pm-card.b { background: var(--blue); }
.pm-card.g { background: var(--green); }

.pm-line {
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--line);
}

.pm-line.short {
    width: 60%;
}

/* ========================================
   Navigation controls
   ======================================== */

.nav-controls {
    display: flex;
    justify-content: center;
    gap: var(--sp-4);
    padding: 24px 0 0;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 12px 24px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nav-btn svg {
    width: 20px;
    height: 20px;
}

.prev-btn,
.next-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
}

.prev-btn:hover:not(:disabled),
.next-btn:hover:not(:disabled) {
    background: var(--paper-2);
}

.prev-btn:disabled,
.next-btn:disabled {
    color: var(--ink-3);
    border-color: var(--line-2);
    cursor: not-allowed;
}

.auto-btn {
    background: var(--yellow);
    color: var(--on-primary);
    border: 1px solid var(--yellow);
    box-shadow: var(--shadow-primary);
}

.auto-btn:hover {
    background: var(--yellow-600);
    border-color: var(--yellow-600);
}

.auto-btn:active {
    transform: scale(.96);
}

.auto-btn.playing {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: var(--shadow-sm);
}

.play-icon,
.pause-icon {
    display: inline-flex;
}

.pause-icon,
.auto-btn.playing .play-icon {
    display: none;
}

.auto-btn.playing .pause-icon {
    display: inline-flex;
}

.kbd-hint {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--ink-3);
}

.kbd-hint kbd {
    display: inline-block;
    min-width: 26px;
    margin: 0 2px;
    padding: 2px 7px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
}

/* ========================================
   Footer
   ======================================== */

.footer {
    padding: 20px 0 28px;
    border-top: 1px solid var(--line-2);
}

.footer p {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--ink-3);
}

/* ========================================
   Tooltip (created by script.js)
   ======================================== */

.tooltip {
    position: fixed;
    background: var(--ink);
    color: var(--paper);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    max-width: 250px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 900px) {
    .timeline-steps {
        justify-content: flex-start;
        padding-bottom: var(--sp-4);
    }

    .timeline-track {
        left: 24px;
        right: 24px;
    }

    .render-flow {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .merge-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 16px;
    }

    .edu-logo {
        width: 48px;
        height: 48px;
    }

    .header {
        padding: 28px 0 32px;
    }

    .browser-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3);
    }

    .step-visualization {
        padding: 32px 16px;
        min-height: 0;
        gap: 28px;
    }

    .step-info {
        grid-template-columns: 1fr;
        margin-top: 28px;
    }

    .info-card {
        grid-column: 1;
        grid-row: auto;
        margin-top: 24px;
    }

    /* Duplex: endpoints side by side, lanes full width underneath */
    .duplex {
        grid-template-columns: 1fr 1fr;
        gap: 24px 12px;
    }

    .duplex > .lanes {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .duplex > .node:last-child {
        grid-column: 2;
        grid-row: 1;
    }

    .endpoint {
        min-width: 0;
    }

    .tile.lg {
        width: 84px;
        height: 84px;
    }

    .tile.lg svg {
        width: 40px;
        height: 40px;
    }

    .msg {
        font-size: 13px;
        padding: 10px 14px;
    }

    .u-seg {
        font-size: 1.05rem;
        padding: 8px 10px;
    }

    .cache-chain {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px 12px;
    }

    .cache-chain .node {
        width: auto;
    }

    .cache-chain .chain-arrow {
        display: none;
    }

    .dns-row {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px 14px;
    }

    .dns-row > :last-child {
        grid-column: 2;
        justify-self: start;
    }

    .payload {
        font-size: 13px;
        padding: 16px;
    }

    .payload-row {
        grid-template-columns: 1fr;
        gap: 0;
        line-height: 1.5;
        margin-bottom: 6px;
    }

    .file-stream {
        gap: 8px;
    }

    .file-card {
        padding: 12px;
    }

    .node.sm {
        width: 74px;
    }

    .node.sm .node-label {
        font-size: 13px;
    }

    .tile.sm {
        width: 54px;
        height: 54px;
    }

    .tile.sm svg {
        width: 26px;
        height: 26px;
    }

    .parse-row,
    .paint-chain {
        gap: 2px;
    }

    .parse-row .chain-arrow,
    .paint-chain .chain-arrow {
        margin-top: 15px;
    }

    .chain-arrow svg {
        width: 20px;
        height: 20px;
    }

    .page-mock {
        width: 100%;
        max-width: 270px;
    }

    /* One row on phones: arrow-only Back / Next around a wide Play */
    .nav-controls {
        gap: var(--sp-2);
        padding-top: 16px;
    }

    .nav-btn {
        justify-content: center;
        padding: 12px 18px;
    }

    .auto-btn {
        flex: 1;
    }

    .prev-btn span,
    .next-btn span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .kbd-hint {
        display: none;
    }
}

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

/* ========================================
   Animation classes (for JS control)
   ======================================== */

.animate-typing .url-text {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 2s steps(15, end);
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.animate-typing .cursor {
    opacity: 1;
}

/* Pause animations on hidden steps */
.step-content:not(.active) * {
    animation-play-state: paused !important;
}