/* =========================================================================
   Entry page  ·  Orbit paper
   -------------------------------------------------------------------------
   The entry used to be a dark terminal window with gradient type, sitting in
   front of a warm-white canvas. Two problems: the palette belonged to nobody,
   and stepping into the canvas felt like landing on a different site.

   This surface now speaks YC brand (wine #B23A48, denim #3B6EA5, ink #1A1A2E)
   through Orbit's material (ivory #F7F2E8 paper, dusk #2B1C1A at night). The
   ground is the same family as the canvas behind it, so entering reads as
   walking further into one room rather than switching buildings.

   Two radii on this page, no third: 8px for controls, 20px for panels.
   One accent, wine, on every action. Denim carries system meaning only, and
   the orbit node palette is borrowed straight from the canvas tones it is
   previewing.
   ========================================================================= */

#terminal-entry {
    /* Surfaces: Orbit ivory ground, a slightly brighter face for the panel. */
    --e-paper: #F7F2E8;
    --e-surface: #FCFAF4;

    /* Ink: YC neutrals, warm-tinted. */
    --e-ink: #1A1A2E;
    --e-ink-muted: #4A4A5A;
    --e-ink-faint: #6E6E7C;

    /* The one accent. Every action on this page is wine. */
    --e-wine: #B23A48;
    --e-wine-deep: #8E2C3A;
    --e-wine-fill: #B23A48;
    --e-wine-hover: #8E2C3A;
    --e-wine-edge: #7A2331;
    --e-wine-wash: rgba(178, 58, 72, 0.09);
    --e-on-wine: #FFF9F6;

    /* System colour. Structure and connection only, never an action. */
    --e-denim: #3B6EA5;

    /* Status, not an action: availability reads as green everywhere. */
    --e-available: #3F9A6B;

    --e-line: rgba(26, 26, 46, 0.10);
    --e-shadow-panel: 0 18px 44px rgba(93, 62, 52, 0.10);
    --e-shadow-lift: 0 10px 24px rgba(142, 44, 58, 0.20);

    /* The turntable YC stands on: paper lit from above. */
    --e-floor-light: rgba(255, 255, 255, 0.95);
    --e-floor-mid: rgba(242, 232, 216, 0.9);
    --e-floor-edge: rgba(178, 58, 72, 0.22);
    --e-grid: rgba(178, 58, 72, 0.09);

    /* The sculpted YC behind him: paper folded into letters, lit from the left. */
    --e-mono-face: #F2E9DC;
    --e-mono-stroke: rgba(178, 58, 72, 0.16);
    --e-mono-side: #E4D5C3;
    --e-mono-side-deep: #D6C2AB;

    /* Orbit's icon palette, reused for the canvas nodes. */
    --e-node-1: #E89987;
    --e-node-2: #DFB877;
    --e-node-3: #8FB4C9;
    --e-node-4: #B4A4C4;
    --e-node-5: #8FAE97;
    --e-node-6: #C59AB5;
    --e-node-7: #9FA8CE;
    --e-node-8: #D2A98F;

    --e-radius-control: 8px;
    --e-radius-panel: 20px;

    --parallax-x: 0;
    --parallax-y: 0;

    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 56px);
    overflow: auto;
    color: var(--e-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
    background: var(--e-paper);
    transition: opacity 0.55s ease, visibility 0.55s ease;
    -webkit-overflow-scrolling: touch;
}

/* Paper tooth. Warm, almost invisible, and fixed so it never repaints on
   scroll (a full-bleed noise layer over a scrolling container is a reliable
   way to lose frames on mobile). */
#terminal-entry::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 22% 8%, rgba(255, 255, 255, 0.72), transparent 70%),
        radial-gradient(ellipse 50% 46% at 74% 52%, rgba(178, 58, 72, 0.06), transparent 72%),
        radial-gradient(ellipse 60% 50% at 88% 92%, rgba(59, 110, 165, 0.05), transparent 72%);
}

#terminal-entry.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.entry-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1220px;
    display: grid;
    /* The reading column leads; the diorama answers at a slightly larger size
       because it is the one thing on the page that moves. */
    grid-template-columns: minmax(0, 0.94fr) minmax(340px, 1.06fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

/* -------------------------------------------------------------------------
   Reading column
   ------------------------------------------------------------------------- */

.entry-lede {
    min-width: 0;
}

/* --entry-rise is the one timing every entry line rises with; cinema.css
   reuses it. At 0.44s the name, role and availability read within 0.6s and
   the last line lands by 1.2s (checked by scripts/qa-motion-browser.mjs). */
.terminal-line {
    --entry-rise: 0.44s cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 0;
    transform: translateY(12px);
    animation: entryRise var(--entry-rise) forwards;
}

/* Availability first: it is the question a recruiter opens the page with. */
.entry-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius-control);
    background: var(--e-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(93, 62, 52, 0.08);
    font-size: 0.8rem;
    font-weight: 560;
    letter-spacing: 0.01em;
    color: var(--e-ink-muted);
}

.entry-status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--e-available);
}

.entry-status-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--e-available);
    animation: statusPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes statusPing {
    0% { transform: scale(1); opacity: 0.55; }
    80%, 100% { transform: scale(2.8); opacity: 0; }
}

/* The name is set in Fraunces, the serif of the canvas headings, so the
   entrance and the map speak in one voice. */
.entry-name {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.9rem, 5.6vw, 4.6rem);
    line-height: 1.02;
    font-weight: 650;
    letter-spacing: -0.025em;
    color: var(--e-ink);
    /* A few pixels of wine extrusion: the title belongs to the 3D world
       without turning into a gradient headline. */
    text-shadow:
        1px 1px 0 rgba(178, 58, 72, 0.26),
        2px 2px 0 rgba(178, 58, 72, 0.16),
        3px 3px 0 rgba(178, 58, 72, 0.08),
        0 18px 34px rgba(93, 62, 52, 0.16);
}

/* The one thing worth keeping from the terminal: a caret. It marks which
   block the arrow keys are on, so it earns its place as a nav affordance
   rather than decoration. */
.entry-caret {
    display: inline-block;
    width: 0.055em;
    height: 0.78em;
    margin-left: 0.1em;
    vertical-align: -0.03em;
    border-radius: 2px;
    background: var(--e-wine);
    opacity: 0;
}

.entry-role {
    margin: 14px 0 0;
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    font-weight: 560;
    letter-spacing: 0.005em;
    color: var(--e-wine-deep);
}

.entry-text {
    margin: 20px 0 0;
    max-width: 46ch;
    font-size: clamp(0.98rem, 1.25vw, 1.08rem);
    line-height: 1.68;
    color: var(--e-ink-muted);
}

/* Proof strip. Numbers are data, so they are the only monospace on the page.
   No cards: a hairline between columns is enough separation. */
.entry-proof {
    margin: 30px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: start;
    gap: clamp(20px, 3vw, 38px);
}

.entry-proof-item {
    display: flex;
    flex-direction: column-reverse;
    /* Numbers share a top line even when one label wraps. */
    justify-content: flex-end;
    gap: 5px;
    padding-left: clamp(16px, 2.4vw, 28px);
    border-left: 1px solid var(--e-line);
}

.entry-proof-item:first-child {
    padding-left: 0;
    border-left: 0;
}

.entry-proof dd {
    margin: 0;
    /* Count-up must not make the row jitter: reserve the final width. */
    min-width: 3.4ch;
    font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    font-weight: 550;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--e-ink);
}

.entry-proof dt {
    font-size: 0.76rem;
    line-height: 1.35;
    letter-spacing: 0.012em;
    color: var(--e-ink-faint);
}

/* -------------------------------------------------------------------------
   Actions
   ------------------------------------------------------------------------- */

.entry-actions {
    margin: 34px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

/* A physical key: a darker wine edge under the face gives it thickness, and
   pressing it closes that gap instead of just changing colour. */
.entry-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 22px 0 26px;
    border: 0;
    border-radius: var(--e-radius-control);
    background: var(--e-wine-fill);
    color: var(--e-on-wine);
    font: inherit;
    font-size: 0.98rem;
    font-weight: 560;
    letter-spacing: 0.004em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 0 var(--e-wine-edge),
        0 12px 24px rgba(178, 58, 72, 0.24);
    transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 0.18s ease,
                box-shadow 0.18s ease;
}

.entry-cta-arrow {
    display: inline-block;
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.entry-cta:hover {
    transform: translateY(-2px);
    background: var(--e-wine-hover);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 6px 0 var(--e-wine-edge),
        0 18px 32px rgba(142, 44, 58, 0.26);
}

.entry-cta:hover .entry-cta-arrow {
    transform: translateX(4px);
}

.entry-cta:active {
    transform: translateY(3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 0 var(--e-wine-edge),
        0 5px 12px rgba(178, 58, 72, 0.2);
}

.entry-cta:disabled {
    cursor: default;
    transform: none;
    opacity: 0.72;
    box-shadow: none;
}

.entry-actions-minor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.entry-link {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--e-ink-muted);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    position: relative;
    transition: color 0.18s ease;
}

.entry-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.entry-link:hover {
    color: var(--e-wine);
}

.entry-link:hover::after {
    transform: scaleX(1);
}

/* Sound is a real toggle: a small pill with a speaker that shows its state. */
.entry-sound {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border: 1px solid color-mix(in srgb, var(--e-ink-muted) 28%, transparent);
    border-radius: 999px;
    background: none;
    color: var(--e-ink-muted);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.entry-sound:hover { color: var(--e-wine); border-color: var(--e-wine); }

.entry-sound-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entry-sound[aria-pressed='false'] .sound-waves,
.entry-sound[aria-pressed='true'] .sound-mute { display: none; }
.entry-sound[aria-pressed='true'] { color: var(--e-wine); border-color: color-mix(in srgb, var(--e-wine) 45%, transparent); }

#terminal-entry :is(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--e-wine);
    outline-offset: 3px;
    border-radius: var(--e-radius-control);
}

/* Location and status. Separated by space, not by punctuation. */
.entry-meta {
    margin: 30px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--e-line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px clamp(20px, 3vw, 34px);
    font-size: 0.78rem;
    color: var(--e-ink-faint);
}

/* -------------------------------------------------------------------------
   Top bar
   ------------------------------------------------------------------------- */

.entry-topbar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 32px);
}

.entry-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--e-ink);
}

/* The mark is a small physical tile, the same key as the CTA. */
.entry-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--e-radius-control);
    background: var(--e-wine-fill);
    color: var(--e-on-wine);
    font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 0 var(--e-wine-edge), 0 8px 16px rgba(178, 58, 72, 0.22);
}

.entry-topnav {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 26px);
}

.entry-topnav a {
    font-size: 0.84rem;
    color: var(--e-ink-muted);
    text-decoration: none;
    transition: color 0.18s ease;
}

.entry-topnav a:hover {
    color: var(--e-wine);
}

.entry-topbar .entry-language {
    position: static;
}

.entry-topbar .language-switch button {
    color: var(--e-ink-muted);
}

.entry-topbar .language-switch button.is-active {
    color: var(--e-ink);
    background: var(--e-surface);
    border-color: var(--e-line);
}

/* -------------------------------------------------------------------------
   Atmosphere: dust at several depths, shifted by the camera.
   ------------------------------------------------------------------------- */

.entry-atmosphere {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.entry-dust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* -------------------------------------------------------------------------
   The world
   -------------------------------------------------------------------------
   One CSS 3D scene behind the reading column, deliberately not a canvas or
   WebGL: the planets are the real portfolio records as focusable buttons, so
   they stay accessible, translatable and crisp. entry-scene.js writes
   --spin, --cam-x, --cam-y, --dolly and each planet's --depth; everything
   else is geometry here, set per breakpoint through the --fig/--ring/--mono
   variables on .entry-orbit.

   Horizontal planes (horizon, turntable, main orbit) lean back by --tilt.
   Anything that must face the visitor (YC, planets, moons) undoes every
   rotation above it in reverse order, which is what the billboard transforms
   spell out.

   Nothing between .orbit3d-camera and a leaf may set opacity, filter,
   overflow or clip: any of those flattens the 3D context and planets stop
   passing behind YC.
   ------------------------------------------------------------------------- */

.entry-preview {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.entry-orbit {
    --tilt: 72deg;
    --spin: -22.5deg;
    --cam-x: 0deg;
    --cam-y: 0deg;
    --dolly: 0px;

    --fig-x: 50%;
    --feet-y: 90%;
    --fig-h: 78%;
    --ring-y: 60%;
    --ring-w: 84%;
    --moon-y: 44%;
    --moon-w: 58%;
    --floor-w: 80%;
    --mono-x: 50%;
    --mono-y: 38%;
    --mono-size: 36vh;

    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1400px;
    perspective-origin: var(--fig-x) 38%;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.entry-orbit.is-dragging {
    cursor: grabbing;
}

/* YC's hover and tap are hit-tested against his silhouette in JS, so a planet
   seen through the transparent space around him stays clickable. */
.entry-orbit.is-over-yc {
    cursor: pointer;
}

/* The camera is an invisible full-size plane at z = 0. It must not take
   pointer events: every planet on the far half of the orbit sits behind it
   and would otherwise be unclickable. Planets opt back in themselves. */
.orbit3d-camera {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    transform-origin: var(--fig-x) 55%;
    transform: translateZ(var(--dolly)) rotateX(var(--cam-x)) rotateY(var(--cam-y));
}

/* Ground that runs to the horizon, hinged at YC's feet so none of it can
   swing through the camera. */
.orbit3d-horizon {
    position: absolute;
    left: var(--fig-x);
    top: var(--feet-y);
    width: 320%;
    height: 220%;
    transform-origin: 50% 100%;
    transform: translate(-50%, -100%) rotateX(var(--tilt));
    background:
        repeating-linear-gradient(0deg, var(--e-grid) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(90deg, var(--e-grid) 0 1px, transparent 1px 72px);
    -webkit-mask-image: radial-gradient(ellipse 34% 62% at 50% 100%, #000 0 8%, transparent 70%);
    mask-image: radial-gradient(ellipse 34% 62% at 50% 100%, #000 0 8%, transparent 70%);
    pointer-events: none;
}

/* Sculpted monogram. Eight copies step back 5px each; the camera turns the
   stack, so its sides show the way a real paper cut-out would. */
.orbit3d-monogram {
    position: absolute;
    left: var(--mono-x);
    top: var(--mono-y);
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: translateZ(-420px) rotateY(-12deg);
    pointer-events: none;
}

.orbit3d-monogram span {
    position: absolute;
    left: 0;
    top: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    font-size: var(--mono-size);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.05em;
    white-space: nowrap;
    color: var(--e-mono-side);
    transform: translate(-50%, -50%) translateZ(calc(var(--layer) * -5px));
}

.orbit3d-monogram span:nth-child(1) { --layer: 0; color: var(--e-mono-face); -webkit-text-stroke: 1.5px var(--e-mono-stroke); }
.orbit3d-monogram span:nth-child(2) { --layer: 1; }
.orbit3d-monogram span:nth-child(3) { --layer: 2; }
.orbit3d-monogram span:nth-child(4) { --layer: 3; }
.orbit3d-monogram span:nth-child(5) { --layer: 4; color: var(--e-mono-side-deep); }
.orbit3d-monogram span:nth-child(6) { --layer: 5; color: var(--e-mono-side-deep); }
.orbit3d-monogram span:nth-child(7) { --layer: 6; color: var(--e-mono-side-deep); }
.orbit3d-monogram span:nth-child(8) { --layer: 7; color: var(--e-mono-side-deep); text-shadow: 0 40px 60px rgba(93, 62, 52, 0.16); }

/* Turntable under YC's feet. */
.orbit3d-floor {
    position: absolute;
    left: var(--fig-x);
    top: var(--feet-y);
    width: var(--floor-w);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(var(--tilt));
    pointer-events: none;
}

.orbit3d-floor-grid {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--e-floor-edge);
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(178, 58, 72, 0.07) 22px 23px),
        radial-gradient(circle at 50% 50%, var(--e-floor-light) 0 16%, var(--e-floor-mid) 44%, transparent 71%);
    box-shadow: 0 0 80px rgba(178, 58, 72, 0.08);
    transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease, box-shadow 0.3s ease;
}

.orbit3d-floor-shadow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(60, 34, 30, 0.34) 0 20%, rgba(60, 34, 30, 0.12) 46%, transparent 70%);
}

/* Orbit planes. */
.orbit3d-plane {
    position: absolute;
    left: var(--fig-x);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    pointer-events: none;
}

.orbit3d-plane-main {
    top: var(--ring-y);
    width: var(--ring-w);
    transform: translate(-50%, -50%) rotateX(var(--tilt)) rotateZ(var(--spin));
}

.orbit3d-plane-tilted {
    top: var(--moon-y);
    width: var(--moon-w);
    transform: translate(-50%, -50%) rotateZ(-20deg) rotateX(var(--tilt)) rotateZ(calc(var(--spin) * -1.4));
}

.orbit3d-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}

.orbit3d-ring-wine {
    border: 2px dashed rgba(178, 58, 72, 0.6);
    box-shadow: 0 0 34px rgba(178, 58, 72, 0.14), inset 0 0 34px rgba(178, 58, 72, 0.09);
}

.orbit3d-ring-denim {
    border: 1.2px solid rgba(59, 110, 165, 0.32);
}

.orbit3d-spoke {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 1.5px;
    transform-origin: 0 50%;
    transform: rotateZ(var(--angle));
    background: repeating-linear-gradient(90deg, rgba(59, 110, 165, 0.34) 0 4px, transparent 4px 10px);
    transition: opacity 0.6s ease;
}

.orbit3d-spoke.is-lit {
    height: 2.5px;
    background: repeating-linear-gradient(90deg, rgba(178, 58, 72, 0.9) 0 7px, transparent 7px 11px);
}

.orbit3d-slot,
.orbit3d-moon-slot {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateZ(var(--angle));
}

.orbit3d-billboard {
    position: absolute;
    left: 100%;
    top: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform:
        rotateZ(calc(-1 * (var(--angle) + var(--spin))))
        rotateX(calc(-1 * var(--tilt)))
        rotateY(calc(-1 * var(--cam-y)))
        rotateX(calc(-1 * var(--cam-x)));
}

.orbit3d-moon {
    position: absolute;
    left: 100%;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #f6fbff 0 12%, #8fb4c9 55%, #4f7494 100%);
    box-shadow: 0 8px 18px rgba(59, 110, 165, 0.25);
    transform:
        translate(-50%, -50%)
        rotateZ(calc(-1 * var(--angle) + var(--spin) * 1.4))
        rotateX(calc(-1 * var(--tilt)))
        rotateZ(20deg)
        rotateY(calc(-1 * var(--cam-y)))
        rotateX(calc(-1 * var(--cam-x)));
}

.orbit3d-moon-small {
    width: 13px;
    height: 13px;
    background: radial-gradient(circle at 32% 28%, #fff7ea 0 14%, #dfb877 58%, #a9794f 100%);
}

/* YC. A billboard standing on the turntable, pivoting at the feet. */
.orbit3d-figure {
    position: absolute;
    left: var(--fig-x);
    top: var(--feet-y);
    height: var(--fig-h);
    aspect-ratio: 792 / 1384;
    pointer-events: none;
    transform-origin: 50% 100%;
    transform:
        translate(-50%, -100%)
        rotateY(calc(-1 * var(--cam-y)))
        rotateX(calc(-1 * var(--cam-x)));
    transition: opacity 0.8s ease, translate 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.orbit3d-pose {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
    animation: ycBreathe 4.6s ease-in-out infinite;
    transition: opacity 0.2s ease;
    -webkit-user-drag: none;
    user-select: none;
}

.orbit3d-pose-wave {
    opacity: 0;
}

.orbit3d-figure.is-waving .orbit3d-pose-wave {
    opacity: 1;
}

.orbit3d-figure.is-waving .orbit3d-pose-orbit {
    opacity: 0;
}

@keyframes ycBreathe {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.006, 1.012); }
}

/* The WebGL rig (entry-figure-rig.js) draws YC once his textures are ready.
   Its canvas overhangs the crop by 14% on every side so a turning head or a
   waving hand never clips. Until then, or without WebGL, the <img> poses show. */
.orbit3d-rig {
    position: absolute;
    left: -14%;
    top: -14%;
    width: 128%;
    height: 128%;
    opacity: 0;
}

.orbit3d-figure.has-rig .orbit3d-rig {
    opacity: 1;
}

.orbit3d-figure.has-rig .orbit3d-pose {
    visibility: hidden;
    animation: none;
}

/* The planet rides the same body sway the rig applies to the raised hand. */
.orbit3d-palm-sway {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
    transform: rotate(var(--hand-sway, 0rad));
    pointer-events: none;
}

/* The planet YC is setting spinning. Drawn as SVG so its ring passes behind
   the sphere at the top and in front of it at the bottom. */
.orbit3d-palm-planet {
    position: absolute;
    left: 13%;
    top: 20.5%;
    width: 24%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.36' cy='.3' r='.78'%3E%3Cstop offset='0' stop-color='%23fff5de'/%3E%3Cstop offset='.34' stop-color='%23f2c47f'/%3E%3Cstop offset='.74' stop-color='%23cf8a4f'/%3E%3Cstop offset='1' stop-color='%239a5833'/%3E%3C/radialGradient%3E%3CclipPath id='c'%3E%3Ccircle cx='50' cy='50' r='23'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='rotate(-16 50 50)'%3E%3Cpath d='M9 50a41 11 0 0 1 82 0' fill='none' stroke='%23ffe1ad' stroke-width='3' opacity='.8'/%3E%3Ccircle cx='50' cy='50' r='23' fill='url(%23g)'/%3E%3Cg clip-path='url(%23c)' fill='none' stroke='%23b8743f' stroke-opacity='.35' stroke-width='3'%3E%3Cpath d='M22 43q28 7 56 0'/%3E%3Cpath d='M24 57q26 6 52 0'/%3E%3C/g%3E%3Cpath d='M9 50a41 11 0 0 0 82 0' fill='none' stroke='%23ffe8c2' stroke-width='3.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 10px rgba(255, 196, 120, 0.75)) drop-shadow(0 0 24px rgba(255, 196, 120, 0.35));
    pointer-events: none;
    animation: palmFloat 3.4s ease-in-out infinite;
    transition: opacity 0.3s ease, scale 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.orbit3d-figure.is-waving .orbit3d-palm-planet {
    opacity: 0;
    scale: 0.4;
}

@keyframes palmFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-9%) rotate(8deg); }
}

.orbit3d-greeting {
    position: absolute;
    left: 76%;
    top: 2%;
    padding: 8px 14px;
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius-control);
    background: var(--e-surface);
    box-shadow: 0 12px 26px rgba(93, 62, 52, 0.14);
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--e-ink);
    opacity: 0;
    translate: 0 6px;
    scale: 0.9;
    transform-origin: 0 100%;
    pointer-events: none;
    transition: opacity 0.22s ease, translate 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), scale 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.orbit3d-greeting::after {
    content: '';
    position: absolute;
    left: 14px;
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: inherit;
    border-right: 1px solid var(--e-line);
    border-bottom: 1px solid var(--e-line);
    transform: rotate(45deg);
}

.orbit3d-figure.is-waving .orbit3d-greeting {
    opacity: 1;
    translate: 0 0;
    scale: 1;
}

/* Planets: the curated records themselves. */
.entry-orbit-node {
    --depth: 0.5;
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 7px;
    border: 1px solid var(--e-line);
    border-radius: var(--e-radius-control);
    background: var(--e-surface);
    box-shadow: 0 8px 20px rgba(93, 62, 52, 0.14);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    opacity: calc(0.4 + var(--depth) * 0.6);
    transform: translate(-50%, -50%) scale(calc(0.84 + var(--depth) * 0.2));
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.3s ease,
                box-shadow 0.24s ease,
                border-color 0.24s ease;
}

.entry-orbit-node:hover,
.entry-orbit-node:focus-visible {
    opacity: 1;
    border-color: rgba(178, 58, 72, 0.4);
    box-shadow: 0 18px 34px rgba(93, 62, 52, 0.22), 0 0 0 3px rgba(178, 58, 72, 0.1);
    transform: translate(-50%, -50%) translateZ(30px) scale(1.14);
}

.entry-orbit-dot {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 11%, var(--node-tone) 48%, color-mix(in srgb, var(--node-tone) 62%, #2B1C1A) 100%);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--node-tone) 55%, transparent);
    transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.entry-orbit-node:hover .entry-orbit-dot,
.entry-orbit-node:focus-visible .entry-orbit-dot {
    transform: rotate(-24deg) scale(1.18);
}

.entry-orbit-title {
    font-size: 0.8rem;
    font-weight: 560;
    line-height: 1.2;
    letter-spacing: -0.002em;
    color: var(--e-ink);
}

/* Arrival. entry-scene.js holds the world in .is-intro (entered with
   transitions off, via .is-preparing) until YC's image has decoded, then
   removes it so each piece transitions into place; .is-arriving staggers only
   that first pass. */
.entry-orbit.is-preparing,
.entry-orbit.is-preparing * {
    transition: none !important;
}

.entry-orbit.is-intro .orbit3d-ring {
    opacity: 0;
    transform: scale(0.35);
}

.entry-orbit.is-intro .orbit3d-floor-grid {
    opacity: 0;
    transform: scale(0.55);
}

.entry-orbit.is-intro .orbit3d-figure {
    opacity: 0;
    translate: 0 7%;
}

.entry-orbit.is-intro :is(.entry-orbit-node, .orbit3d-spoke) {
    opacity: 0;
}

.entry-orbit.is-intro .entry-orbit-node {
    transform: translate(-50%, -50%) scale(0.3);
}

.entry-orbit.is-arriving .entry-orbit-node {
    transition-duration: 0.7s, 0.6s, 0.24s, 0.24s;
    transition-delay: calc(0.45s + var(--intro-order) * 0.07s);
}

.entry-orbit.is-arriving .orbit3d-figure {
    transition-delay: 0.15s;
}

.entry-orbit.is-arriving .orbit3d-ring-denim {
    transition-delay: 0.25s;
}

/* Legend under the world: caption, hint and the pause control share one
   line where there is room and wrap on narrow screens. */
.entry-orbit-legend {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 2px 14px;
    text-align: center;
}

.entry-preview-caption {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--e-ink-faint);
}

.entry-orbit-hint {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--e-ink-faint);
    opacity: 0.85;
}

.entry-motion-toggle {
    font-size: 0.75rem;
}

.entry-motion-toggle[aria-pressed='true'] {
    color: var(--e-wine);
    text-decoration: underline;
}

/* The icon stands in for the words on phones (see the 620px block). */
.entry-motion-icon {
    display: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entry-motion-toggle[aria-pressed='false'] .motion-play,
.entry-motion-toggle[aria-pressed='true'] .motion-pause { display: none; }

/* Phones fold the proof counts and background under this switch. */
.entry-more-toggle {
    display: none;
    align-items: center;
    gap: 2px;
}

.entry-more-chevron {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.entry-more-toggle[aria-expanded='true'] .entry-more-chevron {
    transform: rotate(180deg);
}

/* Paused or leaving: everything decorative holds its frame. */
#terminal-entry.is-background-paused :is(.orbit3d-pose, .orbit3d-palm-planet),
#terminal-entry.is-background-paused .entry-status-dot::after,
#terminal-entry.hidden :is(.orbit3d-pose, .orbit3d-palm-planet) {
    animation-play-state: paused;
}

/* Launch: the camera flies into the orbit while the reading column steps
   back, so entering feels like travelling into the map it previewed. */
#terminal-entry.is-launching :is(.entry-lede, .entry-topbar, .entry-orbit-legend) {
    opacity: 0.35;
    transform: translateX(-14px);
    transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#terminal-entry.is-launching .orbit3d-greeting {
    opacity: 0;
}

/* -------------------------------------------------------------------------
   Keyboard navigation
   -------------------------------------------------------------------------
   Arrow keys walk the entry blocks. The marker has to be legible without
   being another card, so it is a wine rule in the left margin.
   ------------------------------------------------------------------------- */

.terminal-nav-target {
    position: relative;
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The name already shows its nav state through the caret, so it does not also
   take a rule: two wine verticals around one heading read as decoration. */
.entry-lede .terminal-nav-target:not(.entry-name)::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 0.16em;
    bottom: 0.16em;
    width: 2px;
    border-radius: 2px;
    background: var(--e-wine);
    opacity: 0;
    transform: scaleY(0.4);
    transform-origin: center;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.entry-lede .terminal-nav-target:not(.entry-name).is-active::before {
    opacity: 1;
    transform: scaleY(1);
}

/* The world's nav state lights the turntable rim. */
.entry-preview.terminal-nav-target.is-active .orbit3d-floor-grid {
    border-color: rgba(178, 58, 72, 0.55);
    box-shadow: 0 0 0 6px var(--e-wine-wash), 0 0 80px rgba(178, 58, 72, 0.14);
}

.terminal-nav-target:not(.is-active) .terminal-nav-cursor {
    opacity: 0;
    animation: none;
}

.terminal-nav-target.is-active .terminal-nav-cursor {
    opacity: 1;
    animation: entryBlink 1.1s step-end infinite;
}

/* -------------------------------------------------------------------------
   Launch state
   -------------------------------------------------------------------------
   The old entry charged a fake battery for 720ms before letting anyone in.
   What is left is a thin honest progress rule, shown only while loading.
   ------------------------------------------------------------------------- */

.entry-launch-status {
    position: fixed;
    left: 50%;
    bottom: clamp(22px, 4vh, 44px);
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(340px, calc(100% - 48px));
    font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--e-ink-faint);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#terminal-entry.is-launching .entry-launch-status {
    opacity: 1;
}

.entry-launch-track {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: var(--e-line);
    overflow: hidden;
}

.entry-launch-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--e-wine);
    transition: width 0.12s linear;
}

.entry-launch-value {
    font-variant-numeric: tabular-nums;
}

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

@keyframes entryBlink {
    50% { opacity: 0; }
}

/* -------------------------------------------------------------------------
   Night. Orbit's dusk, not a neutral black: dimming a warm ground with grey
   drains its hue before its luminance and the page just looks faded. At
   night the turntable becomes a pool of warm light YC stands in.
   ------------------------------------------------------------------------- */

body[data-theme='dark'] #terminal-entry {
    --e-paper: #2B1C1A;
    --e-surface: #382724;
    --e-ink: #F7F2E8;
    --e-ink-muted: #DCCCC4;
    --e-ink-faint: #AC978F;
    --e-wine: #D28D95;
    --e-wine-deep: #E4A6AC;
    --e-wine-wash: rgba(210, 141, 149, 0.16);
    --e-wine-fill: #B23A48;
    --e-wine-hover: #C4485A;
    --e-wine-edge: #6E1F2B;
    --e-on-wine: #FFF9F6;
    --e-denim: #9DBDE0;
    --e-available: #6BC495;
    --e-line: rgba(247, 242, 232, 0.13);
    --e-shadow-panel: 0 20px 48px rgba(0, 0, 0, 0.34);
    --e-shadow-lift: 0 12px 28px rgba(0, 0, 0, 0.42);
    --e-floor-light: rgba(255, 236, 210, 0.34);
    --e-floor-mid: rgba(255, 214, 170, 0.12);
    --e-floor-edge: rgba(228, 166, 172, 0.3);
    --e-grid: rgba(247, 236, 220, 0.07);
    --e-mono-face: #3E2B27;
    --e-mono-stroke: rgba(228, 166, 172, 0.2);
    --e-mono-side: #33221F;
    --e-mono-side-deep: #291A18;
}

body[data-theme='dark'] #terminal-entry::before {
    background:
        radial-gradient(ellipse 70% 55% at 22% 8%, rgba(255, 237, 212, 0.06), transparent 70%),
        radial-gradient(ellipse 46% 50% at 70% 60%, rgba(255, 200, 150, 0.07), transparent 72%),
        radial-gradient(ellipse 60% 50% at 88% 92%, rgba(210, 141, 149, 0.07), transparent 72%);
}

body[data-theme='dark'] .entry-name {
    text-shadow:
        1px 1px 0 rgba(210, 141, 149, 0.32),
        2px 2px 0 rgba(210, 141, 149, 0.2),
        3px 3px 0 rgba(210, 141, 149, 0.1),
        0 18px 34px rgba(0, 0, 0, 0.3);
}

body[data-theme='dark'] .entry-status {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

body[data-theme='dark'] .entry-cta {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 0 var(--e-wine-edge), 0 12px 24px rgba(0, 0, 0, 0.34);
}

body[data-theme='dark'] :is(.entry-orbit-node, .orbit3d-greeting) {
    border-color: rgba(0, 0, 0, 0.22);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}

body[data-theme='dark'] .orbit3d-ring-wine {
    border-color: rgba(228, 166, 172, 0.58);
}

body[data-theme='dark'] .orbit3d-floor-shadow {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.42) 0 20%, rgba(0, 0, 0, 0.16) 46%, transparent 70%);
}

/* -------------------------------------------------------------------------
   Layout. On landscape screens from 900px the world fills the viewport
   behind the reading column. Narrower or portrait screens (phones, a tablet
   held upright, a tall browser window) stack name, information, world, then
   actions. The compact world introduces YC without taking over the entrance.
   ------------------------------------------------------------------------- */

@media (width >= 900px) and (aspect-ratio >= 6/5) {
    #terminal-entry {
        display: block;
        padding: 0;
    }

    .entry-topbar {
        padding: 22px clamp(24px, 4vw, 56px) 0;
    }

    .entry-stage {
        display: flex;
        align-items: center;
        max-width: none;
        min-height: calc(100% - 76px);
        padding: 16px clamp(24px, 6vw, 110px) 56px;
    }

    .entry-lede {
        position: relative;
        z-index: 2;
        width: min(560px, 44vw);
    }

    .entry-stage > .entry-preview {
        position: fixed;
        inset: 0;
        z-index: 0;
    }

    .entry-orbit {
        --fig-x: 70%;
        --feet-y: 90%;
        --fig-h: 78%;
        --ring-y: 58%;
        --ring-w: 46%;
        --moon-y: 42%;
        --moon-w: 32%;
        --floor-w: 50%;
        --mono-x: 71%;
        --mono-y: 40%;
        --mono-size: 64vh;
    }

    .entry-orbit-legend {
        position: absolute;
        right: clamp(24px, 4vw, 56px);
        bottom: 20px;
        justify-content: flex-end;
        text-align: right;
    }
}

/* Laptop widths: pull the world right and tighten the orbit so its far-left
   planets never cross the copy. */
@media (width >= 900px) and (width < 1500px) and (aspect-ratio >= 6/5) {
    .entry-stage {
        padding-left: clamp(24px, 4.5vw, 72px);
    }

    .entry-lede {
        width: min(520px, 42vw);
    }

    .entry-orbit {
        --fig-x: 72%;
        --ring-w: 40%;
        --moon-w: 30%;
        --floor-w: 46%;
        --mono-x: 73%;
    }
}

@media (width >= 900px) and (width < 1120px) and (aspect-ratio >= 6/5) {
    .entry-orbit {
        --ring-w: 37%;
        --fig-h: 74%;
    }
}

/* Large displays: the copy grows with the room instead of shrinking into it. */
@media (width >= 1800px) and (aspect-ratio >= 6/5) {
    .entry-lede,
    .entry-topbar {
        zoom: 1.18;
    }
}

@media (width >= 2400px) and (aspect-ratio >= 6/5) {
    .entry-lede,
    .entry-topbar {
        zoom: 1.4;
    }
}

@media (width >= 900px) and (aspect-ratio >= 6/5) and (max-height: 640px) {
    .entry-name {
        font-size: clamp(2.4rem, 4.6vw, 3.4rem);
    }

    .entry-text {
        margin-top: 14px;
    }

    .entry-proof,
    .entry-actions {
        margin-top: 22px;
    }

    .entry-meta {
        margin-top: 20px;
        padding-top: 14px;
    }
}

@media (width < 900px), (aspect-ratio < 6/5) {
    #terminal-entry {
        display: block;
        padding: 0 0 24px;
    }

    .entry-topbar {
        padding: 14px clamp(18px, 4vw, 40px) 0;
    }

    .entry-stage {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .entry-stage > .entry-preview {
        order: 5;
        width: 100%;
        max-width: 520px;
        margin: 8px auto 0;
    }

    .entry-orbit {
        --fig-x: 50%;
        --feet-y: 90%;
        --fig-h: 78%;
        --ring-y: 60%;
        --ring-w: 70%;
        --moon-y: 44%;
        --moon-w: 52%;
        --floor-w: 86%;
        --mono-y: 38%;
        --mono-size: min(30vh, 58vw);
        height: clamp(190px, 26vh, 240px);
        /* A landscape phone still gets a whole YC, just not more than fits. */
        min-height: min(190px, 60vh);
        perspective: 1000px;
        /* The floor fades into the copy instead of ending on a hard edge. */
        -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
        mask-image: linear-gradient(to bottom, #000 80%, transparent);
    }

    .entry-orbit-legend {
        padding: 0 18px;
    }

    .entry-lede {
        display: contents;
    }

    .entry-lede > * {
        width: calc(100% - clamp(40px, 12vw, 80px));
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .entry-name {
        order: 0;
        margin-top: 24px;
    }

    .entry-role { order: 1; }

    .entry-status {
        order: 2;
        margin-top: 12px;
        margin-bottom: 0;
    }

    .entry-text { order: 3; }

    .entry-meta {
        order: 8;
        margin-top: 16px;
        padding-top: 12px;
    }

    .entry-actions {
        order: 6;
        margin-top: 16px;
    }

    .entry-proof {
        order: 7;
        margin-top: 24px;
    }

    .entry-lede .terminal-nav-target:not(.entry-name)::before {
        left: -12px;
    }

    .orbit3d-greeting {
        left: 64%;
        font-size: 0.76rem;
    }

    .entry-orbit-node {
        gap: 5px;
        padding: 4px 9px 4px 5px;
    }

    .entry-orbit-dot {
        width: 15px;
        height: 15px;
    }

    .entry-orbit-title {
        font-size: 0.68rem;
    }
}

@media (max-width: 620px) {
    .entry-topnav {
        display: none;
    }

    .entry-name {
        font-size: clamp(2.4rem, 12vw, 3rem);
    }

    .entry-text {
        margin-top: 12px;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .entry-proof {
        margin-top: 24px;
        gap: 16px;
    }

    .entry-proof-item {
        padding-left: 14px;
    }

    .entry-proof dt {
        font-size: 0.7rem;
    }

    .entry-actions {
        margin-top: 16px;
        gap: 12px;
    }

    .entry-cta {
        width: 100%;
        justify-content: center;
        padding: 0 18px;
    }

    .entry-actions-minor {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }

    .entry-meta {
        gap: 6px 18px;
        font-size: 0.7rem;
    }

    .entry-brand-text {
        display: none;
    }

    /* A phone's first screen keeps who, availability, one world and one
       action. The introduction, the orbit's caption and the sound switch
       (also in Settings) step aside; the proof counts and background wait
       behind "More about me". */
    .entry-text,
    .entry-orbit-legend > p,
    .entry-sound,
    #terminal-entry:not(.is-more-open) :is(.entry-proof, .entry-meta) {
        display: none;
    }

    .entry-more-toggle {
        display: inline-flex;
    }

    /* Revealed on request, so without the entrance's reading delay. */
    #terminal-entry.is-more-open :is(.entry-proof, .entry-meta) {
        animation-delay: 0s !important;
    }

    .entry-actions-minor {
        justify-content: center;
        gap: 28px;
    }

    /* What remains fits a small phone. A tall one gives its spare height
       to the world and centres the column, rather than leaving an empty
       band under the proof. */
    #terminal-entry {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .entry-stage {
        margin-block: auto;
    }

    .entry-orbit {
        height: clamp(190px, calc(100vh - 500px), 280px);
    }

    /* The world is YC, the YC letters and one ring of planets; the second
       ring, its moons, the spokes and the greeting step aside. A planet is
       a dot on the ring, and its name surfaces beneath it on the front half
       of the orbit, where the dots are far enough apart to carry one, then
       sinks again as it passes behind YC. */
    .orbit3d-plane-tilted,
    .orbit3d-greeting {
        display: none;
    }

    .orbit3d-spoke:not(.is-lit) {
        opacity: 0;
    }

    /* The name sits inside the button, under the dot, rather than
       overflowing it: Chrome cuts overflow from a 3D leaf where the ring's
       plane sorts against it. The dot stays on the orbit point: scaling
       pivots on its centre (the 5px padding plus half the 15px dot) and
       `translate` moves that centre to where the box centre was. */
    #terminal-entry .entry-orbit-node {
        flex-direction: column;
        gap: 3px;
        padding: 5px;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        transform-origin: 50% 12.5px;
        translate: 0 calc(50% - 12.5px);
    }

    .entry-orbit-title {
        padding: 2px 7px;
        border: 1px solid var(--e-line);
        border-radius: var(--e-radius-control);
        background: var(--e-surface);
        box-shadow: 0 4px 10px rgba(93, 62, 52, 0.12);
        font-size: 0.64rem;
        opacity: clamp(0, (var(--depth) - 0.5) * 4, 1);
    }

    .entry-orbit-node.is-behind .entry-orbit-title {
        visibility: hidden;
    }

    body[data-theme='dark'] .entry-orbit-title {
        border-color: rgba(0, 0, 0, 0.22);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    }

    /* The pause control becomes a small round switch in the world's top
       corner; the bottom corners belong to the planets' names. */
    .entry-orbit-legend {
        position: absolute;
        top: 4px;
        right: 14px;
        padding: 0;
    }

    .entry-motion-toggle {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--e-ink-muted) 28%, transparent);
        border-radius: 999px;
        background: var(--e-surface);
    }

    .entry-motion-toggle::after {
        display: none;
    }

    .entry-motion-toggle[aria-pressed='true'] {
        border-color: color-mix(in srgb, var(--e-wine) 45%, transparent);
    }

    .entry-motion-icon {
        display: block;
    }

    .entry-motion-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 400px) {
    .entry-orbit-node {
        padding: 3px 7px 3px 4px;
    }

    .entry-orbit-title {
        font-size: 0.6rem;
    }

    .entry-proof {
        gap: 12px;
    }

    .entry-proof-item {
        padding-left: 11px;
    }
}

/* -------------------------------------------------------------------------
   Reduced motion: the world stays, still. Settings' Reduced Effects already
   zeroes durations globally; the system preference gets the same result.
   ------------------------------------------------------------------------- */

/* Pseudo-elements are not valid inside :is(), so the status ping is listed out. */
body[data-motion='reduced'] :is(.orbit3d-pose, .orbit3d-palm-planet),
body[data-motion='reduced'] .entry-status-dot::after {
    animation: none;
}

body[data-motion='reduced'] .entry-motion-toggle {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .terminal-line {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .terminal-nav-target.is-active .terminal-nav-cursor {
        animation: none;
        opacity: 1;
    }

    :is(.orbit3d-pose, .orbit3d-palm-planet),
    .entry-status-dot::after {
        animation: none;
    }

    .entry-motion-toggle {
        display: none;
    }

    .entry-cta,
    .entry-link::after,
    .entry-orbit-node,
    #terminal-entry.is-launching :is(.entry-lede, .entry-topbar, .entry-orbit-legend) {
        transition: none;
    }

    .entry-cta:hover {
        transform: none;
    }
}