/* ==========================================================================
   You, the Future Astronaut — interface styles
   Mobile first. Every size below assumes a phone, then scales up at the
   breakpoints at the bottom of the file.
   ========================================================================== */

:root {
    /* Deep space. Not pure black: real night sky is a very dark blue. */
    --void: #05070f;
    --deep: #0a0e1c;
    --panel: rgba(18, 24, 44, 0.82);
    --panel-solid: #12182c;
    --edge: rgba(140, 165, 220, 0.16);
    --edge-bright: rgba(140, 165, 220, 0.32);

    --ink: #eef2ff;
    --ink-soft: #a9b4d4;
    --ink-faint: #6f7b9c;

    /* Launch flame, and a cool counterpoint for the space scenes. */
    --flame: #ff9d4a;
    --flame-deep: #e8834a;
    --cool: #3fb8c9;
    --gold: #ffc46b;
    --danger: #ff6b6b;
    --ok: #5ddc9a;

    --touch: 56px;
    --gap: 16px;
    --pad: 20px;
    --radius: 18px;
    --radius-sm: 12px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    color-scheme: dark;
}

/* Respect the OS setting: no twinkling, no drifting, no pulsing. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

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

/* Author rules like .btn { display:inline-flex } outrank the UA's [hidden]
   rule, so an element carrying the hidden attribute has to be spelled out or
   it stays on screen — the staged footer buttons depend on this. */
[hidden] {
    display: none !important;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--void);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
        "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    /* Phones should not select the chrome when you tap around, but should
       still let people highlight a real paragraph. */
    -webkit-tap-highlight-color: transparent;
}

/* The star field canvas sits behind everything and never eats taps. */
#sky {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* A faint nebula wash, so the flat background has some depth. */
.sky-wash {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 18% 8%, rgba(63, 184, 201, 0.14), transparent 60%),
        radial-gradient(ellipse 70% 45% at 84% 92%, rgba(255, 157, 74, 0.13), transparent 62%);
}

.app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    /* Notched phones: keep the chrome clear of the notch and the bar. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
        env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* A quiet credit line at the very bottom of the booth screen. As the last
   flex child of .app it never overlaps the step buttons, whatever the step. */
.site-foot {
    flex: 0 0 auto;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-faint);
    padding: 8px var(--pad) calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--edge);
}

.site-foot a {
    color: var(--cool);
    text-decoration: none;
    border-bottom: 1px solid rgba(63, 184, 201, 0.4);
}

.site-foot a:hover {
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--pad);
    flex: 0 0 auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--gold), var(--flame-deep) 58%, #8a3d18);
    box-shadow: 0 0 16px rgba(255, 157, 74, 0.45);
}

.brand-text {
    min-width: 0;
}

.brand-text b {
    display: block;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-text span {
    display: block;
    font-size: 0.68rem;
    color: var(--ink-faint);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.top-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    appearance: none;
    border: 1px solid var(--edge-bright);
    background: rgba(255, 255, 255, 0.05);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    min-height: var(--touch);
    padding: 0 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-decoration: none;
    transition: transform 0.12s var(--ease), background 0.18s, border-color 0.18s,
        opacity 0.18s;
}

.btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--edge-bright);
}

.btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.99);
}

.btn:focus-visible {
    outline: 3px solid var(--cool);
    outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(160deg, var(--gold), var(--flame-deep));
    border-color: transparent;
    color: #2a1405;
    box-shadow: 0 8px 26px rgba(255, 157, 74, 0.28);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(160deg, #ffd08f, var(--flame));
}

.btn-ghost {
    background: transparent;
    border-color: var(--edge);
    font-weight: 500;
}

.btn-sm {
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.9rem;
}

.btn-block {
    width: 100%;
}

.btn-icon {
    min-height: 44px;
    width: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.step {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.step.is-active {
    display: flex;
}

.step-head {
    flex: 0 0 auto;
    padding: 4px var(--pad) 12px;
    text-align: center;
}

.step-head h1 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.step-head p {
    margin: 6px 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.step-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--pad) var(--pad);
    overscroll-behavior: contain;
}

/* The choose step has to hold the whole scene grid plus the consent block and
   the Next button without scrolling, so it gives back its bottom padding. */
.step[data-step="choose"] .step-body {
    padding-bottom: 8px;
}

.step-foot {
    flex: 0 0 auto;
    padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--edge);
    background: linear-gradient(to top, rgba(5, 7, 15, 0.96), rgba(5, 7, 15, 0.6));
    backdrop-filter: blur(8px);
}

/* A footer that swaps whole rows: shutter vs keep/retake, Next vs Done. */
.foot-row {
    display: flex;
    gap: 10px;
}

.foot-row[hidden] {
    display: none;
}

.field-label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 8px 0 6px;
}

.field-label:first-child {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Scene and style pickers
   -------------------------------------------------------------------------- */

/* Scene cards. Three to a row on a phone, so the full set of six is two rows
   and the whole choose step — picker, consent and Next — fits without
   scrolling. An odd last row, or a single scene, still centres itself. */
.picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.picker .card {
    flex: 1 1 calc(33.333% - 6px);
    /* Capped against the viewport height as well as a fixed maximum: when the
       screen is short (landscape) the cards must not grow taller just because
       the screen is wide, or the grid pushes everything off the bottom. */
    max-width: min(170px, 26dvh);
    padding: 5px;
}

/* Tight, because every pixel here comes out of the picker's height budget. */
.picker .card-label {
    margin-top: 3px;
    font-size: 0.72rem;
    line-height: 1.15;
}

/* Short screens: the credit line is the cheapest thing to give up, and on a
   568px phone it is the difference between fitting and scrolling. The agree
   button comes down to the 48px minimum too — still a comfortable target. */
@media (max-height: 600px) {
    .site-foot {
        display: none;
    }

    .consent-block .btn {
        min-height: 48px;
    }

    .retention {
        margin-bottom: 6px;
    }
}

.card {
    position: relative;
    display: block;
    border: 1.5px solid var(--edge);
    background: var(--panel);
    border-radius: var(--radius);
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.14s var(--ease), background 0.18s;
    text-align: center;
}

.card:active {
    transform: scale(0.97);
}

.card:focus-within {
    outline: 3px solid var(--cool);
    outline-offset: 2px;
}

.card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.card-art {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--deep);
    display: block;
}

.card-art svg {
    width: 100%;
    height: 100%;
    display: block;
}

.card-label {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.card-note {
    display: block;
    font-size: 0.72rem;
    color: var(--ink-faint);
    line-height: 1.3;
    margin-top: 2px;
}

.card:has(input:checked) {
    border-color: var(--flame);
    background: rgba(255, 157, 74, 0.1);
    box-shadow: 0 0 0 1px var(--flame), 0 10px 30px rgba(255, 157, 74, 0.16);
}

.card:has(input:checked) .card-label {
    color: var(--gold);
}

.card:has(input:checked)::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--flame);
    color: #2a1405;
    font-size: 0.85rem;
    font-weight: 800;
}

/* Style cards show the actual swatch art. */
.style-card {
    grid-template-columns: 1fr 1fr 1fr;
}

.style-card .card-art {
    aspect-ratio: 1 / 1;
}

/* --------------------------------------------------------------------------
   Camera
   -------------------------------------------------------------------------- */

.stage {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0 var(--pad) 12px;
}

.frame {
    position: relative;
    /* 3:4, the same shape the photo will come out as. */
    aspect-ratio: 3 / 4;
    width: 100%;
    max-width: min(100%, calc((100dvh - 300px) * 0.75));
    max-height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}

.frame video,
.frame img,
.frame canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The frame's display:block outranks the UA's [hidden] rule, so without this
   the last photo stays painted over the live preview — which is exactly
   "the camera is stuck at the last image" after Next guest. */
.frame [hidden] {
    display: none;
}

/* Passenger-seat framing: the face sits in the top third so the shot reads as
   a portrait, and the body stays in frame. */
.frame .guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.frame .guide svg {
    width: 100%;
    height: 100%;
}

/* Mirrored preview only for people; the saved file is never mirrored. */
.frame.is-mirrored video {
    transform: scaleX(-1);
}

.frame-badge {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 3;
    background: rgba(5, 7, 15, 0.72);
    border: 1px solid var(--edge);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Countdown numerals. */
.countdown {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    place-items: center;
    background: rgba(5, 7, 15, 0.55);
    font-size: 5rem;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 40px rgba(255, 157, 74, 0.6);
}

.countdown.is-on {
    display: grid;
}

.countdown span {
    animation: pop 1s var(--ease);
}

@keyframes pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    35% {
        transform: scale(1.1);
        opacity: 1;
    }
    70% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0;
    }
}

/* Shutter flash. */
.flash {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.flash.is-on {
    animation: flash 0.5s ease-out;
}

@keyframes flash {
    0% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   Consent: retention notice + agree button (no checkbox)
   -------------------------------------------------------------------------- */

/* Breathing room between the scene grid and the notice. */
.consent-block {
    margin-top: 10px;
    margin-bottom: 6px;
}

.retention {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: var(--ink-soft);
    line-height: 1.4;
}

.retention a {
    color: var(--cool);
}

/* Flat buttons: no filled background, just an outline on the night sky. */
.btn-plain {
    background: transparent;
    border: 1.5px solid var(--edge-bright);
    color: var(--ink);
    box-shadow: none;
}

.btn-plain:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--cool);
}

.btn-plain[aria-pressed='true'] {
    border-color: var(--flame);
    color: var(--gold);
}

.btn-plain[aria-pressed='true']::after {
    content: ' ✓';
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   Working state
   -------------------------------------------------------------------------- */

.working {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: var(--pad);
    text-align: center;
}

/* An orbiting astronaut-in-a-dish, purely CSS. */
.orbit {
    position: relative;
    width: 132px;
    height: 132px;
    /* The orbiting dot is a full-size disc, so keep the whole widget out of
       the hit-testing path — it is decoration, nothing here is clickable. */
    pointer-events: none;
}

/* The dashed orbit is a fixed guide. It used to rotate, which read as the
   track spinning rather than the dot travelling along it. */
.orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(255, 157, 74, 0.28);
}

/* The dot itself is a full-size, invisible disc, so its own centre IS the
   orbit centre and spinning it swings the drawn dot around the core. Placing
   the dot directly and rotating that would only spin it on the spot. */
.orbit-dot {
    position: absolute;
    inset: 0;
    animation: spin 3.8s linear infinite;
}

.orbit-dot::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--flame);
    box-shadow: 0 0 18px var(--flame);
}

.orbit-core {
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fff6e6, var(--gold) 42%, var(--flame-deep) 74%, #8a3d18);
    animation: breathe 2.6s var(--ease) infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes breathe {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.07);
    }
}

.working h2 {
    margin: 0;
    font-size: 1.2rem;
}

.working p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
    max-width: 34ch;
}

/* Progress ticks so a long wait still feels like it is doing something. */
.ticks {
    display: flex;
    gap: 8px;
}

.ticks i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--edge-bright);
    transition: background 0.3s, transform 0.3s;
}

.ticks i.on {
    background: var(--flame);
    transform: scale(1.35);
}

.ticks i.past {
    background: var(--ok);
}

/* --------------------------------------------------------------------------
   Result
   -------------------------------------------------------------------------- */

/* Two views inside the result step: the photo itself, then the share panel.
   The photo owns the screen; the arrow steps between them. */
.result-view {
    display: none;
    position: relative;
}

.result-view.is-on {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    animation: rise 0.28s var(--ease);
}

.result-view-photo {
    align-items: center;
}

.plate {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: min(100%, calc((100dvh - 200px) * 0.75));
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--deep);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}

.plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Share row: download, QR, email. */
.share {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.share .btn-primary {
    grid-column: 1 / -1;
}

.qr-card {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--edge);
    background: var(--panel);
    border-radius: var(--radius-sm);
    grid-column: 1 / -1;
}

.qr-box {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    display: grid;
    place-items: center;
}

.qr-box canvas,
.qr-box img {
    width: 100%;
    height: 100%;
    display: block;
}

.qr-copy {
    min-width: 0;
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.4;
}

.qr-copy b {
    display: block;
    color: var(--ink);
    font-size: 0.88rem;
    margin-bottom: 3px;
}

/* Email form */
.mail {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.mail input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--touch);
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--edge-bright);
    background: rgba(0, 0, 0, 0.32);
    color: var(--ink);
    font: inherit;
    font-size: 1rem; /* 16px stops iOS zooming on focus */
}

.mail input:focus {
    outline: none;
    border-color: var(--cool);
}

.mail input::placeholder {
    color: var(--ink-faint);
}

/* Save-this-photo warning. Because Replicate links die, and the booth's own
   copies are pruned on a schedule, both ways out get a nudge. */
.notice {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--gold);
    background: rgba(255, 157, 74, 0.09);
    border: 1px solid rgba(255, 157, 74, 0.28);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    grid-column: 1 / -1;
}

.notice--quiet {
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--edge);
}

.hint {
    font-size: 0.76rem;
    color: var(--ink-faint);
    text-align: center;
    line-height: 1.45;
}

/* Available to a screen reader, gone from the screen. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Toasts and error bar
   -------------------------------------------------------------------------- */

.toast-host {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(92vw, 460px);
    pointer-events: none;
}

.toast {
    background: var(--panel-solid);
    border: 1px solid var(--edge-bright);
    border-left: 3px solid var(--cool);
    border-radius: var(--radius-sm);
    padding: 12px 15px;
    font-size: 0.88rem;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    animation: rise 0.28s var(--ease);
}

.toast.bad {
    border-left-color: var(--danger);
}

.toast.good {
    border-left-color: var(--ok);
}

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

.banner {
    margin: 0 var(--pad) 10px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 107, 107, 0.35);
    background: rgba(255, 107, 107, 0.12);
    color: #ffd9d9;
    font-size: 0.84rem;
}

.banner--info {
    border-color: var(--edge-bright);
    background: rgba(63, 184, 201, 0.1);
    color: #d6f2f6;
}

/* --------------------------------------------------------------------------
   Privacy page and claim page
   -------------------------------------------------------------------------- */

.doc {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px var(--pad) 40px;
    -webkit-overflow-scrolling: touch;
}

.doc article {
    max-width: 68ch;
    margin: 0 auto;
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.7;
}

.doc h1 {
    font-size: 1.5rem;
    color: var(--ink);
    margin: 12px 0 4px;
    letter-spacing: -0.01em;
}

.doc h2 {
    font-size: 1.05rem;
    color: var(--ink);
    margin: 26px 0 8px;
    padding-top: 18px;
    border-top: 1px solid var(--edge);
}

.doc h2:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.doc ul,
.doc ol {
    padding-left: 1.2em;
    margin: 10px 0;
}

.doc li {
    margin: 5px 0;
}

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

.doc a {
    color: var(--cool);
}

.doc .lede {
    font-size: 0.98rem;
    color: var(--ink-soft);
    border-left: 3px solid var(--flame);
    padding-left: 14px;
    margin: 14px 0 0;
}

.doc-foot {
    max-width: 68ch;
    margin: 30px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--edge);
    font-size: 0.8rem;
    color: var(--ink-faint);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.updated {
    font-size: 0.74rem;
    color: var(--ink-faint);
    margin: 6px 0 0;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Small and large screens
   -------------------------------------------------------------------------- */

/* Very narrow phones: two scene columns gets cramped. */
@media (max-width: 359px) {
    .picker {
        grid-template-columns: 1fr;
    }
    :root {
        --pad: 16px;
    }
    .step-head h1 {
        font-size: 1.2rem;
    }
}

@media (min-width: 600px) {
    :root {
        --touch: 52px;
        --gap: 18px;
        --pad: 28px;
    }

    .picker {
        grid-template-columns: repeat(3, 1fr);
    }

    .style-card {
        grid-template-columns: repeat(3, 1fr);
    }

    .step-head h1 {
        font-size: 1.7rem;
    }

    .step-head p {
        font-size: 0.98rem;
    }

    .share {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    body {
        font-size: 17px;
    }

    .step-body,
    .doc {
        /* Reading lines get too long on a wide monitor. */
        --measure: 900px;
    }

    .step-body > * {
        max-width: var(--measure);
        margin-left: auto;
        margin-right: auto;
    }

    .picker {
        grid-template-columns: repeat(6, 1fr);
    }

    .style-card {
        grid-template-columns: repeat(3, 1fr);
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    .brand-text b {
        font-size: 1.05rem;
    }

    .frame {
        max-width: min(100%, calc((100dvh - 340px) * 0.75));
    }
}

@media (min-width: 1280px) {
    .top,
    .step-head,
    .step-foot {
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

/* Landscape phones: the 3:4 frame has almost no height to work with. */
@media (max-height: 560px) and (orientation: landscape) {
    .step-head {
        padding-bottom: 6px;
    }
    .step-head p {
        display: none;
    }
    .frame,
    .plate {
        max-width: min(100%, calc((100dvh - 150px) * 0.75));
    }
    .field-label {
        margin-top: 12px;
    }
}

/* Anyone who asked for less motion gets a plain star field instead of the
   animated one, courtesy of the media query at the top of this file. */