/* GENERATED by scripts/build-shared-css.mjs from src/web/styles/tokens.css + src/web/styles/app.css — do not edit. */
/* Design tokens (ARCHITECTURE §5): every themed value for BOTH the
   converter page and the Worker-rendered pages lives here and only
   here. Phase 7 design (Task 6): quiet light editorial — warm paper,
   warm ink, one vermillion accent — so the emoji output is the only
   colour on the page. A re-skin edits this file alone.
   Task 6b adds the designed system on the same palette: specimen
   tint, deep accent (hover for the strong vermillion), pill radius,
   kicker tracking, layered card shadow, inset + focus-ring shadows. */
:root {
  /* Colour — 紙 (paper), 墨 (ink), 朱 (vermillion). */
  --color-bg: #faf6ef;
  --color-card: #fffdf9;
  --color-surface: #f4eee3;
  --color-ink: #2c2620;
  --color-muted: #71665a;
  --color-border: #e2d7c3;
  --color-control-border: #9c8a6d;
  --color-accent: #e03c1f;
  --color-accent-strong: #ae2e11;
  --color-accent-deep: #8f2a0e;
  --color-accent-ink: #ffffff;
  --color-specimen: #f3ebda;
  --color-danger: #9e1b1b;
  --color-danger-ink: #ffffff;
  --color-danger-bg: #f9e9e4;
  --color-warning-border: #a87b1f;
  --color-warning-bg: #fbf2dc;

  /* Type — one Japanese gothic system stack; weight + size carry the
     hierarchy (no webfont, no synthesis). Mono is for machine codes
     only (error codes, punycode), never for URLs or emoji strings. */
  --font-family-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Latin display face (Space Grotesk, bundled via @fontsource —
     no runtime CDN) for the Latin grammar: kicker, section labels,
     indices, and the Latin runs of the wordmark. Japanese glyphs
     fall through to the base stack. */
  --font-family-latin: "Space Grotesk", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP",
    system-ui, sans-serif;
  --font-size-display: clamp(1.9rem, 5.5vw + 0.5rem, 2.75rem);
  --font-size-host: clamp(1.6rem, 6vw, 2.25rem);
  --font-size-large: 1.25rem;
  --font-size-value: 1.0625rem;
  --font-size-example: clamp(1.125rem, 1rem + 1.5vw, 1.375rem);
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-kicker: 0.75rem;
  --font-size-specimen: clamp(1.1875rem, 1.05rem + 1.5vw, 1.5rem);
  --font-size-step-num: 1.0625rem;
  --font-weight-display: 700;
  --font-weight-strong: 600;
  --line-height: 1.8;
  --line-height-tight: 1.45;
  --line-height-value: 1.6;
  --tracking-display: 0.02em;
  --tracking-kicker: 0.22em;
  --tracking-brand: 0.06em;

  /* Spacing — one scale, generous vertical rhythm between blocks. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-small: 0.375rem;
  --radius: 0.5rem;
  --radius-large: 0.875rem;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgb(60 45 20 / 0.05),
    0 4px 8px -2px rgb(60 45 20 / 0.06),
    0 24px 48px -20px rgb(60 45 20 / 0.18);
  --shadow-inset: inset 0 1px 2px rgb(60 45 20 / 0.07);
  --shadow-focus: 0 0 0 3px rgb(224 60 31 / 0.28);

  /* Motion — one restrained entrance for result content; press
     feedback on buttons. Nothing else moves. */
  --duration-enter: 180ms;
  --duration-press: 120ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --measure: 44rem;
  --tap-target: 2.75rem;
  /* The primary Convert action (Task 6d) stands taller than a
     standard tap target: it is the page's one explicit action. */
  --button-primary-height: 3rem;

  /* Desktop composition (Task 6c): at ≥1024px the page stops being
     a centred mobile column — wider container, one display size up.
     Below the breakpoint none of these apply and the Task 6b layout
     is untouched. */
  --layout-max-desktop: 70rem;
  --font-size-display-desktop: clamp(2.5rem, 1.9rem + 2.4vw, 3.375rem);
}

/* Component styles for the converter page AND the Worker-rendered
   pages (landing, error, preview, password gate) — one shared
   stylesheet, served at /styles.css (built from tokens.css + this
   file). Themed values come only from tokens.css: no colour/font/
   spacing literals here (colour literals are enforced by
   scripts/check-tokens.mjs). Semantic class names only.
   Phase 7 design (Task 6): quiet light editorial; the converter is
   the one dominant card, everything else stays flat and calm so the
   emoji strings are the colour.
   Task 6b: the designed system on the same palette — brand header
   with the five header dots (the product's actual header symbols),
   a letterspaced Latin kicker, numbered section grammar
   (01 CONVERT / 02 HOW IT WORKS / 03 STORED LINK), specimen panels
   for results, a segmented mode control, and a two-surface rhythm
   (paper vs card vs tinted specimen/how surfaces). */

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

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  line-break: strict;
  margin: 0;
  padding: var(--space-10) var(--space-4) var(--space-16);
}

.site-header,
.hero,
main,
.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
}

/* --- Brand header: the five header dots are the product's own
   symbols (SPEC §4.1), so the logo motif is product-true. --- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-10);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.brand-strip {
  font-size: var(--font-size-base);
  line-height: 1;
  letter-spacing: var(--space-1);
}

.brand-name {
  font-family: var(--font-family-latin);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--tracking-brand);
}

/* --- Hero: kicker, headline, and the vermillion square motif. --- */
.hero {
  margin-bottom: var(--space-8);
}

.kicker {
  font-family: var(--font-family-latin);
  font-size: var(--font-size-kicker);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--tracking-kicker);
  color: var(--color-accent-strong);
  margin: 0 0 var(--space-4);
}

.headline {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-display);
  line-break: strict;
  margin: 0;
}

/* The square is the owner's editorial motif; it replaced Task 6's
   plain bar so the headline carries a designed accent. */
.headline::before {
  content: "";
  display: block;
  width: var(--space-4);
  height: var(--space-4);
  background: var(--color-accent);
  margin-bottom: var(--space-5);
}

/* Plain h1: the Worker-rendered pages' titles. */
h1 {
  font-size: var(--font-size-host);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3);
}

h2 {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  margin: var(--space-8) 0 var(--space-3);
}

h3 {
  line-height: var(--line-height-tight);
}

/* --- Section grammar: numbered Latin label + hairline rule above
   each block's Japanese heading, so the page reads as an editorial
   sheet (01 → 02 → 03 is the real order of use). --- */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.section-index {
  font-family: var(--font-family-latin);
  color: var(--color-accent-strong);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-kicker);
}

.section-name {
  font-family: var(--font-family-latin);
  color: var(--color-ink);
  font-size: var(--font-size-kicker);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--tracking-kicker);
  white-space: nowrap;
}

.section-rule {
  flex: 1 1 auto;
  border-top: 1px solid var(--color-border);
}

/* The converter is the one dominant element: a raised card. Later
   sections separate with hairlines — subordinate by construction. */
main > section:first-of-type {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

main > section:first-of-type h2 {
  margin-top: 0;
}

main > section + section {
  margin-top: var(--space-12);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-8);
}

main > section + section h2 {
  margin-top: 0;
}

/* How-it-works is a tinted panel (the second surface), not a
   hairline block: it carries the steps, not a form. */
main > section.how {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-inset);
  padding: var(--space-6);
}

/* Steps are rows, not columns: at this measure a 3-column split
   leaves ~14 characters per line and orphan kana on the last line
   (round-1 finding). The number chip rides a left rail and the
   text keeps a readable Japanese measure. */
.steps {
  list-style: none;
  display: grid;
  gap: var(--space-6);
  margin: var(--space-5) 0 0;
  padding: 0;
}

.step {
  display: grid;
  grid-template-columns: var(--space-8) 1fr;
  column-gap: var(--space-4);
}

.step h3,
.step p {
  grid-column: 2;
}

/* The step number sits in a vermillion square — the headline motif
   at component scale. White on accent-strong is 6.57:1. */
.step-num {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-small);
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
  font-size: var(--font-size-step-num);
  font-weight: var(--font-weight-display);
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-display);
  margin: 0 0 var(--space-2);
}

.step p {
  font-size: var(--font-size-small);
  margin: 0;
}

p {
  margin: var(--space-2) 0;
}

label {
  font-weight: var(--font-weight-strong);
}

fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
}

fieldset label {
  font-weight: 400;
  margin-right: var(--space-4);
  white-space: nowrap;
}

legend {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  padding: 0 var(--space-2);
}

/* --- Segmented mode control: the three radios become one pill
   track. Real radio inputs stay (absolutely positioned over their
   label), so semantics, keyboard behaviour and form behaviour are
   the platform's; only the paint is custom. The legend remains the
   group's accessible name, visually hidden because the segments
   are self-describing. --- */
.mode-control {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  margin: var(--space-4) 0;
  padding: var(--space-1);
}

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

.mode-control label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    transform var(--duration-press) var(--ease-out),
    background-color var(--duration-press) var(--ease-out),
    color var(--duration-press) var(--ease-out);
}

.mode-control label:active {
  transform: scale(0.97);
}

.mode-control input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mode-control label:has(input:checked) {
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
  font-weight: var(--font-weight-strong);
}

.mode-control label:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .mode-control label:hover {
    background: var(--color-card);
  }

  .mode-control label:has(input:checked):hover {
    background: var(--color-accent-deep);
  }
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-accent);
}

textarea,
input[type="url"],
input[type="number"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font: inherit;
  line-height: var(--line-height-value);
  background: var(--color-card);
  color: var(--color-ink);
}

/* Fields answer focus with the accent border plus a soft offset
   ring (token shadow); the ring replaces the generic outline on
   fields so the two never stack. */
textarea:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

textarea:focus-visible,
input[type="url"]:focus-visible,
input[type="number"]:focus-visible,
input[type="password"]:focus-visible,
input[type="text"]:focus-visible {
  outline: none;
}

input[type="number"] {
  width: auto;
}

details.advanced {
  margin: var(--space-3) 0;
}

details.advanced summary {
  cursor: pointer;
  padding: var(--space-2) 0;
}

details.advanced label {
  font-weight: 400;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

button {
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-ink);
  font: inherit;
  font-weight: var(--font-weight-strong);
  cursor: pointer;
  transition:
    transform var(--duration-press) var(--ease-out),
    background-color var(--duration-press) var(--ease-out),
    border-color var(--duration-press) var(--ease-out);
}

button:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  button:hover {
    background: var(--color-surface);
    border-color: var(--color-accent-strong);
  }
}

/* Primary action (Task 6d): the explicit Convert button in the
   input column. Live conversion alone is invisible as an action
   model — a first-time user looks for the button that makes it
   happen — so the button carries the specimen copy button's solid
   strong-vermillion treatment at full column width and a taller
   height than a standard tap target. Same paint as .open-button /
   .specimen .copy-button; this is its home in the input column. */
.btn-primary {
  width: 100%;
  min-height: var(--button-primary-height);
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--color-accent-deep);
    border-color: var(--color-accent-deep);
  }
}

.pitch {
  font-size: var(--font-size-value);
  line-height: var(--line-height-value);
}

/* The hero visual of the empty state: a real conversion, shown
   large on the specimen tint. The link itself is set in the base
   sans — emoji are not monospace. */
.example {
  background: var(--color-specimen);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-inset);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.example .value-inline {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-example);
  line-height: var(--line-height-value);
  color: var(--color-ink);
}

.note {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  /* Notes can carry an unbroken canonical URL; it must wrap inside
     the card instead of widening the page. */
  overflow-wrap: anywhere;
  /* Japanese prose breaks at phrase boundaries (same treatment as
     the desktop step columns): without this, short notes can end in
     a one-character orphan line （ん。). anywhere above remains the
     safety net for unbroken URLs and over-long phrases. */
  word-break: keep-all;
}

/* The no-expiry checkbox label never wraps mid-phrase. */
label:has(#stored-no-expiry) {
  white-space: nowrap;
}

.warning {
  border: 1px solid var(--color-warning-border);
  background: var(--color-warning-bg);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.error {
  border: 1px solid var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.error-title {
  font-weight: var(--font-weight-display);
  color: var(--color-danger);
  margin-top: 0;
}

.error-code {
  color: var(--color-muted);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-small);
  margin-bottom: 0;
}

.result-title {
  font-size: var(--font-size-large);
  margin: var(--space-5) 0 var(--space-2);
}

/* The header-mode line as a badge: the header emoji is content
   (it names the link's mode), the pill is its specimen label. */
.mode-badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-strong);
  margin: var(--space-2) 0;
}

.value-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  flex-wrap: wrap;
}

.value-label {
  flex: 0 0 100%;
  font-size: var(--font-size-small);
  color: var(--color-muted);
  font-weight: var(--font-weight-strong);
}

.value-box {
  flex: 1 1 12rem;
  min-width: 0;
  word-break: break-all;
  font-size: var(--font-size-value);
  line-height: var(--line-height-value);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

/* Specimen: the primary converted link (and a freshly created
   stored link) is the product's output on display — deeper tint,
   larger setting, and the one solid primary copy button. The
   other forms stay reference copies on the plain inset tint. */
.specimen .value-box {
  background: var(--color-specimen);
  border-color: var(--color-control-border);
  box-shadow: var(--shadow-inset);
  font-size: var(--font-size-specimen);
}

.specimen .copy-button {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  .specimen .copy-button:hover {
    background: var(--color-accent-deep);
    border-color: var(--color-accent-deep);
  }
}

.value-inline {
  word-break: break-all;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-small);
}

.decoded-url {
  flex: 1 1 12rem;
  min-width: 0;
  word-break: break-all;
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-value);
  background: var(--color-specimen);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.copy-button {
  flex: 0 0 auto;
}

/* Counters close the result block as a tabular meta strip. */
.counters {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  list-style: none;
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) 0 0;
  margin: var(--space-4) 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
}

.actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.open-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--color-accent-strong);
  border-radius: var(--radius);
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
  text-decoration: none;
  font-weight: var(--font-weight-strong);
  transition: transform var(--duration-press) var(--ease-out);
}

.open-button:active {
  transform: scale(0.97);
}

.link-button {
  color: var(--color-accent-strong);
  font-weight: var(--font-weight-strong);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  padding: var(--space-2) 0;
}

.danger-button {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-danger-ink);
}

#turnstile {
  margin: var(--space-3) 0;
}

/* --- Footer: the dots motif returns at small scale, over one
   factual line. --- */
.site-footer {
  margin-top: var(--space-16);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

.footer-strip {
  font-size: var(--font-size-small);
  line-height: 1;
  letter-spacing: var(--space-1);
  margin: 0 0 var(--space-2);
}

.footer-line {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  margin: 0;
}

/* Result content appears with one restrained fade/rise. Kept
   deliberately faint (from 35% opacity, 3px) because conversion
   re-renders on every keystroke: state changes read as a gentle
   fade-in, live updates as a soft shimmer, never a flicker. */
#output > * {
  transition:
    opacity var(--duration-enter) var(--ease-out),
    transform var(--duration-enter) var(--ease-out);

  @starting-style {
    opacity: 0.35;
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #output > * {
    transition: none;
  }

  button,
  .open-button,
  .mode-control label {
    transition: none;
  }

  button:active,
  .open-button:active,
  .mode-control label:active {
    transform: none;
  }
}

/* Worker-rendered pages (SPEC §5/§6/§7.3): classes emitted by
   src/server/pages.ts. */

.host {
  font-size: var(--font-size-host);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  word-break: break-all;
  margin: var(--space-1) 0;
}

.target,
.target-inert {
  word-break: break-all;
  line-height: var(--line-height-value);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.punycode {
  color: var(--color-muted);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-small);
}

form {
  display: flex;
  gap: var(--space-3);
  align-items: end;
  flex-wrap: wrap;
}

form input[type="password"] {
  display: block;
}

@media (max-width: 480px) {
  body {
    padding: var(--space-6) var(--space-3) var(--space-12);
  }

  main > section:first-of-type {
    padding: var(--space-4);
  }

  main > section.how {
    padding: var(--space-4);
  }

  /* Wrapped segments fill their row so the pill reads as a
     deliberate two-row control, not a blob (round-1 finding). */
  .mode-control {
    display: flex;
    width: 100%;
  }

  .mode-control label {
    flex: 1 1 auto;
    justify-content: center;
  }

  .value-row {
    flex-direction: column;
    align-items: stretch;
  }

  .copy-button {
    align-self: flex-start;
  }
}

/* --- Desktop composition (Task 6c): at ≥1024px the page uses the
   width it has. Below this breakpoint nothing in this block applies
   and the Task 6b single-column layout is byte-for-byte the same.
   The skin (colours, motifs, type) does not change — only the
   composition does. --- */
@media (min-width: 1024px) {
  /* Container: the converter page widens to the desktop measure.
     Worker-rendered pages keep the reading measure: their <main>
     has no .hero before it, so the sibling selector scopes the
     wide container to this page only. */
  .site-header,
  .hero,
  .site-footer {
    max-width: var(--layout-max-desktop);
  }

  .hero + main {
    max-width: var(--layout-max-desktop);
  }

  /* Hero: a single text block (kicker + headline). The decorative
     visual band that sat here was removed at the owner's direction
     (2026-11-02): it added scroll height and carried no function. */
  .hero {
    margin-bottom: var(--space-12);
  }

  .headline {
    font-size: var(--font-size-display-desktop);
  }

  /* Converter: input column left, result column right, tops
     aligned. DOM order stays input → result, so the narrow layout
     and screen readers keep the Task 6b order. The error state
     renders inside #output, so it lands in the result column next
     to the input that caused it — never stranded. */
  .converter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-10);
    align-items: start;
  }

  main > section:first-of-type {
    padding: var(--space-8);
  }

  /* The result column opens flush with the input column's
     heading: whatever #output renders first (pitch, result title,
     error block) starts at the same height. */
  .converter-grid #output > :first-child {
    margin-top: 0;
  }

  /* How-it-works: three columns. At the desktop measure each
     column is ~330px (~23 characters per line at the step body
     size) — wide enough for Japanese, unlike the ~14-character
     columns that broke inside the old 44rem card (Task 6b round
     1). The chip leaves its left rail and sits above the title. */
  main > section.how {
    padding: var(--space-8);
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-8);
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
  }

  .step-num {
    grid-row: auto;
    margin-bottom: var(--space-3);
  }

  .step h3,
  .step p {
    grid-column: 1;
  }

  /* Japanese line breaking in the columns: default breaking split
     words mid-phrase （ブラウザ → ブ/ラウザ) and left step 3 with an
     orphan 「ん。」 as its last line (round-1 finding). keep-all
     breaks at phrase boundaries instead; break-word is the safety
     net for any phrase longer than the column. line-break: strict
     (body) still applies on top. */
  .step p {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* Stored link: fields in a two-column grid — URL and password
     span both columns, expiry and max-clicks sit side by side.
     The notes, Turnstile, button and result stay full width under
     the grid, and the section keeps its flat, subordinate weight
     (no card). */
  .stored-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-6);
  }

  .field-url,
  .field-password {
    grid-column: 1 / -1;
  }
}