/* =============================================================================
   AGENT SMITH  -  "the phone line" : one page = one phone call, top to bottom.
   ----------------------------------------------------------------------------
   The ASCII skeleton (face / phone / connection line / directive) is REAL
   terminal output rendered by Rich (Python) -> SVG by build_ascii.py, embedded
   as <img src="ascii/*.svg">. This stylesheet does NOT fake a terminal; it:
     - lays out the call screens (ringing -> connected -> ... -> hangup),
     - draws the pure-text left rail (call progress),
     - styles char-art built in HTML (number, sound wave, comparison bars,
       flow diagram, read-only watch panel, memory note),
     - styles the one interactive pane (the wake-word voice demo) to match the
       Rich window chrome, plus the terminal REPL, plus the CRT dressing.

   smith.js reads --matrix-rgb + --matrix-green-bright off :root for the rain +
   voice waveform. All colour / size / spacing via tokens. No AI purple.
   ========================================================================== */

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

:root {
    --matrix-rgb: 42, 222, 120;
    --matrix-green: #2ade78;
    --matrix-green-bright: #8effbc;
    --matrix-green-dim: rgba(42, 222, 120, 0.55);
    --matrix-deep: #0c7a40;
    --matrix-bg: #02100a;

    /* Rich window chrome (match build_ascii.py export exactly). */
    --win-bg: #02100a;
    --win-border: rgba(255, 255, 255, 0.35);
    --win-radius: 8px;
    --dot-red: #ff5f57;
    --dot-yellow: #febc2e;
    --dot-green: #28c840;

    --line-faint: rgba(42, 222, 120, 0.16);
    --glow: 0 0 1px rgba(42, 222, 120, 0.85), 0 0 5px rgba(42, 222, 120, 0.28);
    --glow-soft: 0 0 8px rgba(42, 222, 120, 0.2);
    --glow-num: 0 0 2px rgba(42, 222, 120, 0.9), 0 0 14px rgba(42, 222, 120, 0.4), 0 0 34px rgba(42, 222, 120, 0.18);

    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --text: #cdeed6;
    --text-dim: rgba(205, 238, 214, 0.6);
    --danger: #ff7a93;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* spacing scale */
    --sp-1: 0.4rem; --sp-2: 0.8rem; --sp-3: 1.2rem; --sp-4: 1.8rem; --sp-6: 3rem;
    --rail-w: 128px;

    --z-rain: 1; --z-content: 3; --z-dress: 5;
    --z-rail: 6; --z-scan: 92; --z-vignette: 93; --z-cli: 94;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.matrix-page {
    font-family: var(--font-mono);
    color: var(--text);
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(42, 222, 120, 0.07) 0%, transparent 55%),
        var(--matrix-bg);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(42, 222, 120, 0.26); color: #eafff1; }

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

/* ── ambient rain + read scrim ─────────────────────────────────────────────── */
body.matrix-page .ms-canvas {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: var(--z-rain); pointer-events: none; opacity: 0.22;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(135% 95% at 50% 30%, #000 24%, transparent 90%);
            mask-image: radial-gradient(135% 95% at 50% 30%, #000 24%, transparent 90%);
}
.ms-readscrim {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(130% 80% at 50% 40%,
        rgba(2, 16, 10, 0.86) 0%, rgba(2, 16, 10, 0.5) 42%, transparent 74%);
}

/* ── CRT scanlines + vignette (very restrained) ───────────────────────────── */
.crt-scanlines {
    position: fixed; inset: 0; z-index: var(--z-scan); pointer-events: none;
    background: repeating-linear-gradient(to bottom,
        rgba(42, 222, 120, 0.03) 0px, rgba(42, 222, 120, 0.03) 1px,
        transparent 1px, transparent 3px);
    opacity: 0.42; mix-blend-mode: screen; animation: scanDrift 8s linear infinite;
}
@keyframes scanDrift { from { background-position-y: 0; } to { background-position-y: 3px; } }
.crt-vignette {
    position: fixed; inset: 0; z-index: var(--z-vignette); pointer-events: none;
    background:
        radial-gradient(120% 130% at 50% 50%, transparent 55%, rgba(0,0,0,0.5) 100%),
        radial-gradient(100% 60% at 50% 0%, rgba(42,222,120,0.04), transparent 42%);
}

/* ── top window bar ───────────────────────────────────────────────────────── */
.tui-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-dress);
    display: flex; align-items: center; gap: 0.9rem;
    padding: 0.6rem clamp(0.9rem, 3vw, 1.5rem);
    font-size: 0.7rem; letter-spacing: 0.06em; color: var(--matrix-green-dim);
    background: linear-gradient(180deg, rgba(2,16,10,0.94), rgba(2,16,10,0.6));
    border-bottom: 1px solid var(--line-faint); backdrop-filter: blur(6px);
}
.tui-dots { display: inline-flex; gap: 6px; }
.tui-dots i { width: 11px; height: 11px; border-radius: 50%; }
.tui-dots i:nth-child(1) { background: var(--dot-red); }
.tui-dots i:nth-child(2) { background: var(--dot-yellow); }
.tui-dots i:nth-child(3) { background: var(--dot-green); }
.tui-back { color: var(--matrix-green-bright); text-decoration: none; text-shadow: var(--glow-soft); white-space: nowrap; transition: color 0.25s var(--ease); }
.tui-back:hover { color: #d7ffe6; text-decoration: underline; }
.tui-path { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.tui-status { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.tui-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--matrix-green-bright); box-shadow: var(--glow); animation: msPulse 1.8s var(--ease) infinite; }
@keyframes msPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

/* ── left rail: the call-progress spine (pure text) ───────────────────────── */
.ms-rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-rail);
    width: var(--rail-w); padding: 3.4rem 0 1.4rem 0.9rem;
    display: flex; flex-direction: column; gap: 0.9rem;
    border-right: 1px solid var(--line-faint);
    background: linear-gradient(90deg, rgba(2,16,10,0.72), transparent);
    font-size: 0.62rem; letter-spacing: 0.04em; pointer-events: none;
}
.ms-rail-clock {
    font-size: 0.9rem; color: var(--matrix-green-bright); text-shadow: var(--glow-soft);
    font-weight: 700; letter-spacing: 0.08em;
}
.ms-rail-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.ms-rail-list li { color: rgba(205,238,214,0.32); transition: color 0.4s var(--ease), opacity 0.4s var(--ease); line-height: 1.35; }
.ms-rail-list li b { color: rgba(205,238,214,0.4); font-weight: 700; margin-right: 0.35em; }
.ms-rail-list li.past { color: rgba(205,238,214,0.5); }
.ms-rail-list li.here { color: var(--matrix-green-bright); text-shadow: var(--glow-soft); }
.ms-rail-list li.here b { color: var(--matrix-green); }
.ms-rail-list li.here::before { content: "> "; color: var(--matrix-green); }

/* ── layout shell ─────────────────────────────────────────────────────────── */
.ms-wrap {
    position: relative; z-index: var(--z-content);
    max-width: 940px; margin: 0 auto; padding: 0 1.2rem 8rem calc(var(--rail-w) + 1.2rem);
}
.ms-screen { padding: 5rem 0 2rem; }
.ms-said {
    font-family: var(--font-mono); font-size: clamp(0.82rem, 1.9vw, 0.95rem);
    color: var(--matrix-green-dim); text-shadow: var(--glow-soft);
    margin: 1.4rem auto 0; max-width: 780px; min-height: 1.3em; line-height: 1.6;
}
.ms-said:not(:empty)::before { content: "# "; color: rgba(42,222,120,0.4); }

/* shared blinking-caret for typewriter lines */
.ms-typing::after { content: "_"; color: var(--matrix-green); animation: msBlink 1.05s steps(1) infinite; }
@keyframes msBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ── $ command prompt lines (typed by JS) ─────────────────────────────────── */
.ms-cmd {
    font-family: var(--font-mono); font-size: clamp(0.8rem, 1.9vw, 0.94rem);
    color: var(--text); margin: 0 auto 1.3rem; max-width: 900px;
    min-height: 1.4em; letter-spacing: 0.01em;
}
.ms-cmd::before { content: "smith@localhost:~$ "; color: var(--matrix-green-dim); }

/* ── ascii SVG panes ──────────────────────────────────────────────────────── */
.ascii-svg {
    display: block; width: 100%; height: auto; margin: 0 auto;
    filter: drop-shadow(0 0 0.5px rgba(42,222,120,0.5)) drop-shadow(0 0 16px rgba(42,222,120,0.1));
}

/* ═══════════════════════════════════════════════════════════════════════════
   [00:00 · RINGING] the hero. The number is the hero.
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-ring {
    min-height: 100dvh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    gap: 1.4rem; padding: 4.5rem 0 3rem;
}
.js-motion .ms-ring { animation: msRingShake 1.4s var(--ease) infinite; }
@keyframes msRingShake {
    0%, 88%, 100% { transform: translate(0,0); }
    90% { transform: translate(-1px, 1px); }
    93% { transform: translate(1.5px, -1px); }
    96% { transform: translate(-1px, 0); }
}
.ms-phone { width: 100%; max-width: 460px; opacity: 0.9; }
.phone-svg { max-width: 460px; }

.ms-number {
    font-family: var(--font-mono); font-weight: 700;
    font-size: clamp(1.6rem, 7vw, 3.8rem); letter-spacing: 0.02em;
    color: var(--matrix-green-bright); text-shadow: var(--glow-num);
    line-height: 1.05; white-space: nowrap;
}
.ms-number span { display: inline-block; }
.js-motion .ms-number { animation: msNumFlash 1.4s var(--ease) infinite; }
@keyframes msNumFlash { 0%, 86%, 100% { opacity: 1; } 92% { opacity: 0.55; } }
.js-motion .ms-number span { animation: msDigitIn 0.05s linear both; }

.ms-ringwave {
    font-family: var(--font-mono); font-size: clamp(1rem, 3vw, 1.6rem);
    letter-spacing: 0.28em; color: var(--matrix-green); text-shadow: var(--glow-soft);
}
.js-motion .ms-ringwave { animation: msWaveRise 1.4s ease-in-out infinite; }
@keyframes msWaveRise { 0%,100% { opacity: 0.45; transform: scaleY(0.7); } 50% { opacity: 1; transform: scaleY(1.15); } }

.ms-antihype {
    max-width: 620px; font-size: clamp(0.82rem, 2vw, 0.98rem);
    color: rgba(170, 205, 180, 0.94); line-height: 1.6;
}
.ms-cta { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 0.6rem; }
.ms-cta-call {
    font-family: var(--font-mono); font-size: clamp(0.92rem, 2.4vw, 1.15rem);
    color: var(--matrix-green-bright); text-decoration: none; text-shadow: var(--glow-soft);
    padding: 0.55rem 1.1rem; border: 1px solid var(--matrix-green-dim); border-radius: 4px;
    background: rgba(42,222,120,0.06); transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
    cursor: pointer;
}
.ms-cta-call:hover { background: rgba(42,222,120,0.12); box-shadow: var(--glow-soft); }
.ms-cta-call.ms-copied { color: #eafff1; }
.ms-cta-enter {
    font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
    color: var(--matrix-green-dim); background: none; border: none; cursor: pointer; opacity: 0.7;
    transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.js-motion .ms-cta-enter { animation: msBreathe 2.6s var(--ease) infinite; }
.ms-cta-enter:hover { color: var(--matrix-green-bright); opacity: 1; }
.ms-cta-enter.ms-gone { display: none; }
@keyframes msBreathe { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.ms-whitelist { font-size: 0.68rem; letter-spacing: 0.03em; color: rgba(205,238,214,0.42); max-width: 420px; }

/* ═══════════════════════════════════════════════════════════════════════════
   [00:01 · CONNECTED] the line, the face develops
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-connect { min-height: 88dvh; display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; }
.ms-connect-line { max-width: 720px; margin: 0 auto; width: 100%; }
.connect-svg { max-width: 720px; }
.ms-connect-grid {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.6rem; align-items: center;
}
.ms-face { position: relative; width: 100%; }
.face-svg { max-width: 460px; }
.ms-firstline { display: flex; flex-direction: column; gap: 0.9rem; }
.ms-firstline .ms-said { margin-top: 0; font-size: clamp(0.9rem, 2.1vw, 1.05rem); color: var(--matrix-green-bright); }
.ms-note { font-size: clamp(0.78rem, 1.8vw, 0.9rem); color: var(--text-dim); line-height: 1.6; }
.ms-microtext {
    position: absolute; left: 8px; bottom: -1.25rem;
    font-size: 0.74rem; letter-spacing: 0.04em; color: var(--matrix-green-dim);
    text-shadow: var(--glow-soft); white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translateX(-6px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.ms-face:hover .ms-microtext { opacity: 0.92; transform: translateX(0); }

/* face develops top-to-bottom once, GPU-friendly clip-path */
.js-motion .ms-face .face-svg { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); }
.js-motion .ms-face.ms-developed .face-svg { animation: msDevelop 0.9s var(--ease) forwards; }
@keyframes msDevelop {
    from { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); }
    to   { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); }
}
/* the one-shot connect flash on the line */
.js-motion .ms-connect-line { opacity: 0; transform: scaleX(0.4); transform-origin: center; }
.js-motion .ms-connect-line.ms-lit { animation: msLineIn 0.7s var(--ease) forwards; }
@keyframes msLineIn { from { opacity: 0; transform: scaleX(0.4); } to { opacity: 1; transform: scaleX(1); } }

/* ═══════════════════════════════════════════════════════════════════════════
   [00:14 · INTERRUPT] the monologue, cut off
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-interrupt { }
.ms-monologue {
    font-size: clamp(0.9rem, 2.2vw, 1.15rem); line-height: 1.7; max-width: 760px;
    color: rgba(190, 225, 200, 0.96); margin-bottom: 0.4rem; min-height: 3em;
}
.ms-bargein {
    font-family: var(--font-mono); font-size: clamp(0.78rem, 1.8vw, 0.92rem);
    color: var(--matrix-green-bright); text-shadow: var(--glow-soft);
    letter-spacing: 0.04em; opacity: 0; margin: 0.2rem 0 1rem;
}
.ms-bargein.ms-flash { animation: msBargeFlash 0.16s steps(2) 1 forwards; }
@keyframes msBargeFlash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0.9; } }
.js-motion .ms-monologue.ms-cut { position: relative; }

.ms-bars { display: flex; flex-direction: column; gap: 0.9rem; max-width: 760px; margin: 1.4rem 0 0; }
.ms-bar { display: grid; grid-template-columns: 6.2rem 1fr; grid-template-rows: auto auto; gap: 0.2rem 0.9rem; align-items: center; }
.ms-bar-label { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--matrix-green-bright); }
.ms-bar-track { position: relative; height: 1.5rem; background: rgba(42,222,120,0.06); border: 1px solid var(--line-faint); overflow: hidden; }
.ms-bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); transform-origin: left; }
.ms-bar-win { background: repeating-linear-gradient(90deg, rgba(42,222,120,0.9) 0 6px, rgba(42,222,120,0.35) 6px 8px); }
.ms-bar-lose { background: repeating-linear-gradient(90deg, rgba(120,140,125,0.55) 0 6px, rgba(120,140,125,0.22) 6px 8px); }
.js-motion .ms-bars .ms-bar-fill { transform: scaleX(0); }
.js-motion .ms-bars.ms-grown .ms-bar-fill { animation: msGrow 0.8s var(--ease) forwards; }
@keyframes msGrow { to { transform: scaleX(1); } }
.ms-bar-val { grid-column: 2; font-size: 0.74rem; color: var(--text-dim); letter-spacing: 0.03em; }

/* ═══════════════════════════════════════════════════════════════════════════
   [00:31 · WHO ANSWERS] signal path, honesty, scars
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-flow {
    font-family: var(--font-mono); font-size: clamp(0.72rem, 1.7vw, 0.92rem);
    color: var(--matrix-green); text-shadow: var(--glow-soft);
    line-height: 1.9; white-space: pre-wrap; word-break: break-word;
    padding: 1rem 1.1rem; border: 1px solid var(--line-faint); border-radius: 4px;
    background: rgba(42,222,120,0.03); max-width: 860px; overflow-x: auto;
}
.ms-honest {
    margin-top: 1.1rem; font-size: clamp(0.82rem, 1.9vw, 0.96rem);
    color: rgba(190, 225, 200, 0.96); max-width: 760px; line-height: 1.6;
}
.ms-scars { list-style: none; margin: 1.2rem 0 0; max-width: 760px; display: flex; flex-direction: column; gap: 0.5rem; }
.ms-scars li { font-size: clamp(0.76rem, 1.7vw, 0.88rem); color: var(--text-dim); line-height: 1.55; }
.ms-scars li::before { content: "* "; color: var(--matrix-green-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   [00:48 · WHAT HE SEES] read-only watch panel
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-watch {
    position: relative; border: 1px solid var(--matrix-green-dim); border-radius: var(--win-radius);
    background: var(--win-bg); padding: 1rem; overflow: hidden;
    box-shadow: 0 0 18px rgba(42,222,120,0.08);
}
.ms-watch-stamp {
    position: absolute; top: 0.7rem; right: 0.9rem; z-index: 2;
    font-size: 0.66rem; letter-spacing: 0.22em; color: var(--matrix-green-bright);
    border: 1px solid var(--matrix-green-dim); border-radius: 3px; padding: 0.2rem 0.5rem;
    background: rgba(2,16,10,0.7); text-shadow: var(--glow-soft);
    transform: rotate(-4deg);
}
.ms-watch-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.8rem; }
.ms-watch-cell {
    font-family: var(--font-mono); font-size: clamp(0.62rem, 1.4vw, 0.74rem);
    line-height: 1.6; color: var(--matrix-green); white-space: pre;
    border: 1px solid var(--line-faint); border-radius: 4px; padding: 0.7rem 0.8rem;
    background: rgba(42,222,120,0.02); overflow: hidden; min-height: 9.5em;
}
.ms-watch-cell:last-child { color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   [01:20 · HE REMEMBERS] memory note + dormant
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-memo {
    font-family: var(--font-mono); font-size: clamp(0.76rem, 1.7vw, 0.9rem);
    line-height: 1.85; color: var(--matrix-green); white-space: pre-wrap; word-break: break-word;
    border: 1px solid var(--line-faint); border-radius: 4px; padding: 1rem 1.1rem;
    background: rgba(42,222,120,0.03); max-width: 760px; min-height: 8em;
}
.ms-memo .ms-memo-h { color: var(--matrix-green-bright); text-shadow: var(--glow-soft); }
.ms-dormant {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem;
    font-size: clamp(0.76rem, 1.7vw, 0.88rem); color: var(--matrix-green-dim); letter-spacing: 0.02em;
}
.ms-dormant-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--matrix-green-bright); box-shadow: var(--glow); }
.js-motion .ms-dormant-dot { animation: msPulse 2.2s var(--ease) infinite; }

/* ═══════════════════════════════════════════════════════════════════════════
   [01:55 · THE VOICE PANE] the one interactive pane  -  Rich chrome
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-wake { width: 100%; max-width: 560px; margin: 0.4rem 0 0; }
.ms-pane {
    border: 1px solid var(--win-border); border-radius: var(--win-radius);
    background: var(--win-bg); overflow: hidden;
    box-shadow: 0 0 16px rgba(42,222,120,0.08);
}
.ms-wake.ms-active .ms-pane { border-color: var(--matrix-green-dim); box-shadow: 0 0 24px rgba(42,222,120,0.18); }
.js-motion .ms-wake.ms-active .ms-pane { animation: msPaneBreathe 3s var(--ease) infinite; }
@keyframes msPaneBreathe {
    0%,100% { box-shadow: 0 0 16px rgba(42,222,120,0.1); }
    50%     { box-shadow: 0 0 28px rgba(42,222,120,0.24); }
}
.ms-pane-bar { position: relative; display: flex; align-items: center; padding: 0.55rem 0.8rem; min-height: 2rem; border-bottom: 1px solid var(--line-faint); }
.ms-pane-dots { display: inline-flex; gap: 6px; }
.ms-pane-dots i { width: 11px; height: 11px; border-radius: 50%; }
.ms-pane-dots i:nth-child(1) { background: var(--dot-red); }
.ms-pane-dots i:nth-child(2) { background: var(--dot-yellow); }
.ms-pane-dots i:nth-child(3) { background: var(--dot-green); }
.ms-pane-title { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; font-size: 0.72rem; color: var(--text); opacity: 0.82; }
.ms-pane-body { padding: 1rem 1.1rem 1.15rem; }
.ms-wake-btn {
    width: 100%; text-align: left; font-family: var(--font-mono);
    font-size: clamp(0.9rem, 2.2vw, 1.05rem); letter-spacing: 0.01em; color: var(--text);
    background: rgba(42,222,120,0.05); border: 1px solid var(--matrix-green-dim);
    border-radius: 4px; padding: 0.8rem 0.95rem; cursor: pointer;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.ms-wake-btn:hover { background: rgba(42,222,120,0.1); box-shadow: var(--glow-soft); }
.ms-wake-btn:active { transform: translateY(1px); }
.ms-prompt { color: var(--matrix-green-bright); margin-right: 0.5ch; }
.ms-ww { color: var(--matrix-green-bright); text-shadow: var(--glow-soft); }
.ms-wake-caret { display: inline-block; margin-left: 0.1ch; color: var(--matrix-green); text-shadow: var(--glow); animation: msBlink 1.05s steps(1) infinite; }
.ms-wake-btn.ms-listening { animation: msListen 0.9s var(--ease) infinite; }
.ms-wake-btn.ms-listening .ms-wake-caret { display: none; }
.ms-wake-btn.ms-listening::after { content: "  [ listening... ]"; color: var(--matrix-green-bright); }
@keyframes msListen {
    0%,100% { box-shadow: 0 0 8px rgba(42,222,120,0.16); border-color: var(--matrix-green-dim); }
    50%     { box-shadow: 0 0 22px rgba(42,222,120,0.4); border-color: var(--matrix-green-bright); }
}
.ms-wake-stage { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height 0.5s var(--ease), opacity 0.5s var(--ease), margin-top 0.5s var(--ease); }
.ms-wake-stage.ms-show { max-height: 220px; opacity: 1; margin-top: 0.9rem; }
.ms-wave { display: block; width: 100%; height: 64px; }
.ms-wake-reply { font-family: var(--font-mono); color: var(--matrix-green-bright); font-size: 0.98rem; text-shadow: var(--glow-soft); margin-top: 0.6rem; min-height: 1.3em; }
.ms-wake-reply:not(:empty)::before { content: "> "; color: var(--matrix-green-dim); }

/* wake jolt */
body.matrix-page.ms-jolt .ms-wrap { animation: msJolt 0.55s var(--ease) 1; }
@keyframes msJolt {
    0%{transform:translate(0,0);filter:none} 30%{transform:translate(-1px,0);filter:contrast(1.12) brightness(1.08)}
    60%{transform:translate(1px,0);filter:contrast(1.08) saturate(1.2)} 100%{transform:translate(0,0);filter:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   [02:0x · HANGUP] footer
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-hangup { padding-top: 4rem; }
.ms-hangup-line {
    font-size: 0.82rem; letter-spacing: 0.03em; color: rgba(205,238,214,0.5);
    padding-bottom: 1.4rem; border-bottom: 1px solid var(--line-faint); margin-bottom: 2rem;
}
.ms-hangup-line .cursor { color: var(--matrix-green-dim); animation: msBlink 1.05s steps(1) infinite; }
.directive-svg { max-width: 720px; }
.ms-foot-hint { margin-top: 2rem; font-size: 0.78rem; color: var(--matrix-green-dim); }
.ms-foot-hint b { color: var(--matrix-green-bright); font-weight: 700; }
.ms-foot-hint a { color: var(--matrix-green-bright); text-decoration: none; }
.ms-foot-hint a:hover { text-decoration: underline; }

/* ── glitch-hot: rare chromatic shudder on the face ───────────────────────── */
[data-glitch-hot] { position: relative; }
[data-glitch-hot].ms-glitch { animation: msGlitchHot 0.34s steps(2) 1; }
@keyframes msGlitchHot {
    0%   { transform: translate(0,0);   filter: none; }
    20%  { transform: translate(-2px,1px); filter: drop-shadow(2px 0 0 rgba(255,45,75,0.6)) drop-shadow(-2px 0 0 rgba(45,224,255,0.6)); }
    45%  { transform: translate(2px,-1px); filter: drop-shadow(-3px 0 0 rgba(255,45,75,0.5)) drop-shadow(3px 0 0 rgba(45,224,255,0.5)); }
    70%  { transform: translate(-1px,0);  filter: drop-shadow(1px 0 0 rgba(255,45,75,0.5)); }
    100% { transform: translate(0,0);   filter: none; }
}

/* ── EASTER EGG: live terminal REPL (fixed, bottom) ───────────────────────── */
.ms-cli { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cli); font-family: var(--font-mono); pointer-events: none; }
.ms-cli-tab {
    pointer-events: auto; display: block; margin: 0 clamp(0.6rem, 3vw, 1.4rem) 0 auto;
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
    color: var(--matrix-green-dim); background: rgba(2,16,10,0.92);
    border: 1px solid var(--line-faint); border-bottom: none; border-radius: 6px 6px 0 0;
    padding: 0.4rem 0.8rem; cursor: pointer; transition: color 0.25s var(--ease);
}
.ms-cli-tab:hover { color: var(--matrix-green-bright); }
.ms-cli.open .ms-cli-tab { color: var(--matrix-green-bright); }
.ms-cli-win {
    pointer-events: auto; max-width: 760px; margin: 0 auto;
    background: rgba(2,14,9,0.96); border-top: 1px solid var(--matrix-green-dim);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.5), 0 0 24px rgba(42,222,120,0.06);
    backdrop-filter: blur(8px);
}
.ms-cli-log { max-height: 34vh; overflow-y: auto; padding: 0.8rem 1rem 0.4rem; font-size: 0.82rem; line-height: 1.5; }
.ms-cli-log .ln { white-space: pre-wrap; word-break: break-word; }
.ms-cli-log .ln.cmd { color: var(--text); }
.ms-cli-log .ln.cmd::before { content: "smith@localhost:~$ "; color: var(--matrix-green-dim); }
.ms-cli-log .ln.out { color: var(--matrix-green); }
.ms-cli-log .ln.sys { color: var(--matrix-green-bright); text-shadow: var(--glow-soft); }
.ms-cli-log .ln.err { color: var(--danger); }
.ms-cli-log pre.art { color: var(--matrix-green-bright); text-shadow: var(--glow-soft); font-size: 0.7rem; line-height: 1.1; white-space: pre; overflow-x: auto; }
.ms-cli-form { display: flex; align-items: center; gap: 0.5ch; padding: 0.5rem 1rem 0.8rem; border-top: 1px solid var(--line-faint); }
.ms-cli-prompt { color: var(--matrix-green-dim); font-size: 0.82rem; white-space: nowrap; }
.ms-cli-field { flex: 1 1 auto; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font-mono); font-size: 0.82rem; caret-color: var(--matrix-green-bright); }

/* ── scroll-reveal for whole screens ──────────────────────────────────────── */
.js-motion .ms-section, .js-motion .ms-connect, .js-motion .ms-interrupt, .js-motion .ms-hangup { opacity: 0; transform: translateY(22px); }
.js-motion .ms-in { opacity: 1 !important; transform: none !important; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ms-rail { display: none; }
    .ms-wrap { padding: 0 1rem 7rem; }
}
@media (max-width: 768px) {
    .ms-wrap { padding: 0 0.8rem 7rem; }
    .ms-screen { padding: 3.6rem 0 1.6rem; }
    .ms-connect-grid { grid-template-columns: 1fr; gap: 1rem; }
    .ms-watch-grid { grid-template-columns: 1fr; }
    .ms-cli-win { max-width: none; }
    .tui-path { font-size: 0.62rem; }
    /* mobile: the tel: link is the real, working CTA */
    .ms-cta-call { font-size: 1.05rem; }
}
@media (max-width: 420px) { .ms-microtext { display: none; } }

/* ── reduced motion / static screenshot ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .crt-scanlines, .tui-dot, .ms-wake-caret, .cursor, .ms-dormant-dot { animation: none !important; }
    .ms-ring { animation: none !important; }
    .ms-number, .ms-ringwave, .ms-cta-enter { animation: none !important; }
}
body.static .crt-scanlines { animation: none; }