@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, figure, dl, dd { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  button { cursor: pointer; color: inherit; border: 0; background: none; }
  a { color: inherit; }
  img, svg, canvas { max-width: 100%; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; scroll-padding-top: 32px; }
}

@layer base {
  :root {
    color-scheme: dark;
    --bg: #0b1118;
    --surface: #111c28;
    --raised: #182637;
    --soft: #192b18;
    --line: #34475c;
    --control: #718497;
    --text: #f4f7fb;
    --muted: #c4d0de;
    --subtle: #aabaca;
    --primary: #82c341;
    --primary-hover: #98d657;
    --on-primary: #102207;
    --accent: #bbc9ff;
    --focus: #ffd18c;
    --warning: #ffd18c;
    --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radius: 12px;
  }
  body { font: 18px/1.65 var(--sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
  ::selection { background: var(--primary); color: var(--on-primary); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
  h1, h2, h3 { color: var(--text); font-weight: 550; text-wrap: balance; }
  h1 { font-size: clamp(44px, 5.7vw, 84px); line-height: 1.08; letter-spacing: -.055em; }
  h2 { font-size: clamp(34px, 3.8vw, 56px); line-height: 1.12; letter-spacing: -.045em; }
  h3 { font-size: 27px; line-height: 1.28; letter-spacing: -.025em; }
  h1 em, h2 em { color: var(--primary); font-style: normal; }
  p { color: var(--muted); text-wrap: pretty; }
  p + p { margin-top: 18px; }
  strong { color: var(--text); font-weight: 650; }
  a { text-decoration-thickness: 1px; text-underline-offset: 5px; }
  a:hover { text-decoration-thickness: 2px; }
  main p a, dd a, .source-link, .text-link { color: var(--primary); }
  code, pre { font-family: var(--mono); }
  code { font-size: .92em; overflow-wrap: anywhere; }
  pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.8; tab-size: 2; }
  small, .fine-print { font-size: 15px; line-height: 1.65; color: var(--subtle); }
  .eyebrow { font: 500 14px/1.6 var(--mono); letter-spacing: .075em; color: var(--subtle); }
  .eyebrow + h1, .eyebrow + h2 { margin-top: 20px; }
  label { display: block; margin-bottom: 10px; color: var(--text); font-size: 14px; font-weight: 650; line-height: 1.6; letter-spacing: .035em; }
  label span { color: var(--subtle); font-weight: 400; }
  input, select, textarea { width: 100%; min-width: 0; min-height: 54px; padding: 14px 16px; border: 1px solid var(--control); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 17px; line-height: 1.55; }
  textarea { resize: vertical; min-height: 130px; }
  input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
  input:hover, select:hover, textarea:hover { border-color: var(--muted); }
  input:focus, select:focus, textarea:focus { border-color: var(--primary); }
  [aria-invalid=true] { border-color: var(--warning); border-width: 2px; }
  button, .button, summary, input, select, textarea { scroll-margin-block: 24px; }
  button:disabled { cursor: not-allowed; }
}

@layer layout {
  .wrap { width: min(1320px, calc(100% - 96px)); margin-inline: auto; }
  .section-pad { padding-block: 96px; }
  .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; margin-bottom: 44px; }
  .section-heading > div { flex: 1; min-width: 0; }
  .section-heading > p { width: 360px; max-width: 60ch; font-size: 18px; }
  .light-section { background: var(--surface); border-block: 1px solid var(--line); }
  .site-header { padding-block: 20px 8px; background: var(--bg); }
  .nav-wrap { position: relative; isolation: isolate; width: min(1440px, calc(100% - 64px)); min-height: 104px; margin-inline: auto; padding: 12px 16px 12px 24px; display: flex; align-items: center; gap: 32px; border: 1px solid #3a503b; border-radius: 24px; background: radial-gradient(ellipse at 8% 100%, #263d23 0, transparent 45%), linear-gradient(115deg, #142019, #111c28 70%); box-shadow: 0 16px 40px #0003, inset 0 1px #ffffff08; }
  .site-header .brand { position: relative; flex-shrink: 0; min-width: 210px; min-height: 76px; padding: 0 18px 0 8px; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-size: 26px; font-weight: 650; line-height: 1; letter-spacing: -1.2px; text-decoration: none; }
  .brand-mark { flex: 0 0 auto; width: 34px; height: 34px; overflow: visible; }
  .brand-mark circle { fill: var(--primary); transform-box: fill-box; transform-origin: center; }
  .brand-mark .brand-spin { transform-origin: 20px 20px; }
  .brand-mark .brand-core { fill: #d7f0b1; }
  /* The mark plays once on load and on hover: particles scatter and settle while the asterisk turns by one arm, so it ends where it began. */
  .brand-mark.play circle { animation: brand-scatter 1.6s cubic-bezier(.55, 0, .2, 1) var(--d) both; }
  .brand-mark.play .brand-spin { animation: brand-turn 1.95s cubic-bezier(.45, 0, .2, 1) both; }
  .site-footer .brand-mark { width: 28px; height: 28px; }
  /* Main menu: a dock. Items grow as the pointer approaches (common.js sets --m from 0 to 1); each shows its name and a short description. */
  .dock { display: flex; align-items: flex-end; gap: 6px; margin-left: auto; padding: 8px; border: 1px solid #344637; border-radius: 22px; background: #09130ee6; }
  .dock-item { --m: 0; display: grid; justify-items: center; align-content: end; gap: 4px; min-width: calc(112px + var(--m) * 22px); height: 100px; padding: 4px 12px 8px; border: 1px solid transparent; border-radius: 16px; color: var(--subtle); text-align: center; text-decoration: none; transform: translateY(calc(var(--m) * -3px)); transition: background .18s, border-color .18s; }
  .dock-icon { display: grid; place-items: center; width: calc(36px + var(--m) * 12px); height: calc(36px + var(--m) * 12px); border-radius: 50%; background: #1a2a1c; color: var(--primary); }
  .dock-icon svg { width: calc(19px + var(--m) * 5px); height: calc(19px + var(--m) * 5px); }
  .dock-label { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
  .dock-note { font-size: 12px; line-height: 1.25; white-space: nowrap; }
  .dock-item:hover { background: #16251a; border-color: #3f5c34; }
  .dock-item:hover .dock-icon { background: #253d22; }
  .dock-item[aria-current=page] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 3px 14px #82c3411c; }
  .dock-item[aria-current=page] .dock-label { color: var(--on-primary); }
  .dock-item[aria-current=page] .dock-icon { background: var(--on-primary); color: var(--primary); }
  .page-intro { padding-block: 64px 68px; }
  .page-intro h1 { max-width: 1100px; }
  .intro-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 44px; margin-top: 30px; }
  .intro-bottom > p { max-width: 680px; font-size: 21px; line-height: 1.6; }
  .intro-bottom .button { flex-shrink: 0; }
  /* Numbered section names: large enough to scan, with the brand's green dash. */
  .eyebrow.section-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: .06em; }
  .section-label::before { content: ""; width: 24px; height: 3px; border-radius: 2px; background: var(--primary); }
  .section-no { color: var(--primary); }
  .page-jumps { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
  .page-jumps a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary); font-size: 17px; }
  .creator-section { padding-top: 46px; }
  .creator-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 56px; margin-bottom: 34px; }
  .creator-intro h1 { font-size: clamp(44px, 4.8vw, 72px); margin-top: 16px; }
  .creator-intro > p { max-width: 390px; font-size: 20px; line-height: 1.6; padding-bottom: 4px; }
  .voice-banner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px 80px; padding-block: 84px 96px; }
  .voice-banner > .eyebrow { grid-column: 1/-1; }
  .voice-banner > div { max-width: 440px; align-self: end; justify-self: end; }
  .voice-banner .button { margin-top: 26px; }
  .site-footer { position: relative; isolation: isolate; background: linear-gradient(180deg, #080e15 30%, #0b190f 100%); border-top: 1px solid var(--line); padding: 56px max(48px, calc((100vw - 1320px) / 2)) 200px; overflow: hidden; }
  /* A floor of particles receding to the horizon; it is wider than the footer so its tilted edges stay out of view. */
  .site-footer::after { content: ""; position: absolute; z-index: -1; pointer-events: none; left: -35%; right: -35%; bottom: 0; height: 240px; transform-origin: 50% 100%; transform: perspective(300px) rotateX(62deg); background: radial-gradient(circle, var(--primary) 0 1.6px, transparent 2.2px) 0 0 / 22px 22px; mask-image: linear-gradient(0deg, #000 15%, transparent 90%); opacity: .85; }
  .footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; padding-bottom: 42px; }
  .footer-top > p { color: var(--text); font-size: clamp(30px, 3vw, 42px); line-height: 1.2; letter-spacing: -.04em; }
  .footer-top em { color: var(--primary); font-style: normal; }
  .footer-top > div { display: flex; flex-direction: column; gap: 6px; }
  .footer-top a { min-height: 44px; display: flex; align-items: center; font-size: 17px; color: var(--muted); }
  .footer-bottom { display: flex; align-items: center; gap: 30px; border-top: 1px solid var(--line); padding-top: 24px; }
  .footer-bottom > span { font-size: 14px; color: var(--subtle); }
  .footer-bottom > span:last-child { margin-left: auto; }
}

@layer components {
  .button, .copy-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; padding: 13px 20px; border: 1px solid var(--control); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 16px; font-weight: 650; line-height: 1.5; text-decoration: none; transition: background .18s, border-color .18s, color .18s; }
  .button:hover, .copy-button:hover { background: var(--raised); border-color: var(--primary); text-decoration: none; }
  .button > span { font-size: 20px; line-height: 1; }
  .button.primary, .primary-copy { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
  .button.primary:hover, .primary-copy:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
  .copy-button { white-space: nowrap; padding: 11px 17px; }
  .copy-button:disabled { background: var(--raised); color: var(--subtle); border-color: var(--control); }
  .text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font-size: 17px; }
  .pill { display: inline-flex; border: 1px solid currentColor; border-radius: 5px; padding: 6px 9px; color: var(--primary); font: 13px/1.6 var(--mono); letter-spacing: .025em; }
  .live-dot, .evidence-stamp i { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--primary); }
  .live-dot { margin-right: 12px; box-shadow: 0 0 14px #82c34155; }
  .segmented { display: inline-flex; flex-wrap: wrap; padding: 5px; gap: 5px; border: 1px solid var(--control); border-radius: 10px; background: var(--bg); }
  .segmented button { min-height: 44px; padding: 10px 17px; border-radius: 6px; font-size: 16px; font-weight: 550; color: var(--muted); line-height: 1.5; }
  .segmented button:hover { background: var(--raised); color: var(--text); }
  .segmented button[aria-pressed=true] { background: var(--primary); color: var(--on-primary); }
  .toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; max-width: calc(100vw - 32px); width: max-content; padding: 14px 22px; border: 1px solid var(--primary); border-radius: 10px; background: var(--primary); color: var(--on-primary); font-size: 16px; line-height: 1.5; box-shadow: 0 12px 40px #0008; opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: opacity .2s, transform .2s; }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
  .skip-link { position: fixed; left: 20px; top: -100px; z-index: 200; min-height: 48px; padding: 12px 18px; border-radius: 6px; background: var(--primary); color: var(--on-primary); font-weight: 650; }
  .skip-link:focus { top: 12px; }

  /* Both prompt tools share one readable form and output treatment. */
  .prompt-studio { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.5fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 24px 60px #0002; }
  .prompt-studio.main-creator { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prompt-settings, .prompt-result { min-width: 0; padding: 32px; }
  .prompt-settings { border-right: 1px solid var(--line); background: var(--surface); border-radius: var(--radius) 0 0 var(--radius); }
  .prompt-settings select { margin-bottom: 26px; }
  .prompt-settings .fine-print { margin-top: 26px; max-width: 58ch; }
  .draft-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; margin-top: 26px; }
  .prompt-settings .draft-row .fine-print { flex: 1 1 260px; margin-top: 0; }
  .text-button { min-height: 44px; padding-inline: 2px; color: var(--primary); font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
  .text-button:hover { text-decoration-thickness: 2px; }
  .text-button:disabled { color: var(--subtle); text-decoration: none; }
  .prompt-settings .field-help { margin-top: 10px; }
  .prompt-result { display: flex; flex-direction: column; background: var(--bg); border-radius: 0 var(--radius) var(--radius) 0; }
  .prompt-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
  .prompt-toolbar .eyebrow { color: var(--text); }
  .prompt-result pre { color: var(--text); max-height: 660px; overflow-y: auto; padding: 4px 12px 4px 4px; margin-left: -4px; scrollbar-color: var(--control) var(--bg); scrollbar-width: thin; }
  .main-creator pre { min-height: 300px; max-height: 600px; }
  .prompt-result pre.empty-prompt { max-width: 38ch; font: 20px/1.7 var(--sans); color: var(--muted); padding-top: 16px; }
  .main-creator #task-brief { min-height: 144px; }
  .field-help { color: var(--subtle); font-size: 15px; line-height: 1.65; margin-bottom: 26px; max-width: 64ch; }
  .creator-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .creator-options > div, .comparison-pair > div { min-width: 0; }
  .prompt-state { font-size: 16px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
  .prompt-state.ready { color: var(--primary); }
  .prompt-result-foot { display: flex; flex-wrap: wrap; gap: 12px 22px; padding-top: 22px; margin-top: auto; border-top: 1px solid var(--line); font: 13px/1.65 var(--mono); color: var(--subtle); }
  .comparison-fields { min-width: 0; margin: 0 0 28px; padding: 20px; border: 1px solid var(--control); border-radius: 8px; background: var(--soft); }
  .comparison-fields legend { color: var(--primary); font-size: 17px; padding: 0 8px; }
  .comparison-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .comparison-fields .field-help:last-child { margin-bottom: 0; }
  .comparison-fields textarea { min-height: 100px; }
  .task-suggestion { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; padding: 12px 16px; margin-bottom: 24px; border-left: 3px solid var(--primary); border-radius: 0 6px 6px 0; background: var(--soft); font-size: 16px; }
  .task-suggestion button { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; text-align: left; }
  .prompt-checklist { border-left: 3px solid var(--warning); border-radius: 0 6px 6px 0; padding: 18px 20px; margin-bottom: 24px; background: var(--raised); font-size: 16px; }
  .prompt-checklist p { color: var(--warning); }
  .prompt-checklist ul { margin: 10px 0 0; padding-left: 20px; }
  .prompt-checklist li { padding-block: 4px; }
  .prompt-checklist a { color: var(--warning); }

  /* Decorative field; controls sit on an opaque, high-contrast surface. */
  .figure-section { padding-block: 88px 72px; }
  .figure-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; margin-bottom: 32px; }
  .figure-heading h2 { margin-top: 16px; }
  .figure-heading > p { width: 380px; font-size: 18px; }
  .signal-stage { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(ellipse at 40% 35%, #29451c66, transparent 65%), #080f19; }
  .signal-stage.expanded-field { height: 780px; }
  .expanded-field::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, #080f19 0, #080f1900 25%), radial-gradient(ellipse at 50% 42%, transparent 36%, #080f1966 100%); }
  #signal-field { display: block; width: 100%; height: 100%; }
  .field-controls { position: absolute; top: 24px; right: 24px; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; }
  .motion-toggle, .chaos-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 10px 16px; border: 1px solid var(--control); border-radius: 30px; background: var(--surface); color: var(--text); font-size: 15px; line-height: 1.4; white-space: nowrap; }
  .motion-toggle:hover, .chaos-toggle:hover { background: var(--raised); border-color: var(--primary); }
  .motion-icon, .chaos-toggle > span { color: var(--primary); }
  .chaos-toggle > span { font-size: 20px; line-height: 1; }
  .chaos-toggle[aria-pressed=true] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  .chaos-toggle[aria-pressed=true] > span { color: inherit; }
  .stage-bottom { position: absolute; bottom: 28px; left: 28px; right: 28px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
  .stage-bottom > span { color: var(--muted); font: 14px/1.6 var(--mono); letter-spacing: .04em; }
  .figure-selector { display: flex; gap: 8px; }
  .figure-selector button { min-width: 48px; min-height: 48px; padding: 10px; border: 1px solid var(--control); border-radius: 7px; background: var(--surface); color: var(--text); font: 15px/1.5 var(--mono); }
  .figure-selector button:hover { background: var(--raised); border-color: var(--primary); }
  .figure-selector button[aria-pressed=true] { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
  .figure-progress { position: absolute; inset: auto 0 0; height: 3px; z-index: 2; background: var(--surface); }
  .figure-progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--primary); }
  .result-ribbon { border-block: 1px solid var(--line); background: var(--bg); padding: 24px; }
  .creator-section + .result-ribbon { margin-top: clamp(40px, 5vw, 72px); }
  .result-ribbon > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 34px; font: 14px/1.7 var(--mono); color: var(--text); letter-spacing: .06em; }
  .result-ribbon i { color: var(--primary); font-size: 22px; font-style: normal; }

  .rule-grid, .editing-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .rule-grid { margin-bottom: 44px; }
  .rule-grid article, .editing-flow > div { border-top: 1px solid var(--line); padding-top: 22px; }
  .rule-no, .editing-flow span { color: var(--accent); font: 14px/1.6 var(--mono); }
  .rule-grid h3, .editing-flow h3 { margin: 22px 0 16px; }
  .rule-grid p, .editing-flow p { font-size: 18px; line-height: 1.7; max-width: 38ch; }
  .source-note { display: flex; align-items: flex-start; gap: 24px; padding-block: 24px; border-block: 1px solid var(--line); font-size: 16px; line-height: 1.7; color: var(--muted); }
  .source-note .pill { flex-shrink: 0; margin-top: 2px; }
  .source-note p { font-size: 16px; max-width: 80ch; }
  .example-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin: 48px 0 24px; }
  .example-header h3 { font-size: 25px; }
  .rewrite-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .rewrite-pair article { min-width: 0; padding: 32px; display: flex; flex-direction: column; }
  .rewrite-pair .before { border-right: 1px solid var(--line); background: var(--bg); }
  .rewrite-pair .after { background: var(--soft); }
  .rewrite-pair .eyebrow { margin-bottom: 24px; color: var(--subtle); font-size: 13px; letter-spacing: .04em; }
  .rewrite-pair .after > .eyebrow { color: var(--primary); }
  .rewrite-pair .before > p { font-size: 20px; line-height: 1.7; color: var(--muted); }
  .rewrite-pair .after p { color: var(--text); font-size: 18px; line-height: 1.7; }
  .rewrite-pair ol, .rewrite-pair ul { padding-left: 24px; margin: 0 0 20px; color: var(--text); font-size: 18px; line-height: 1.8; }
  .rewrite-pair li + li { margin-top: 4px; }
  .rewrite-pair .annotation { margin-top: auto; padding-top: 30px; color: var(--subtle); font: 14px/1.6 var(--mono); }
  .voice-pair .after h3 { font-size: 28px; }
  .voice-pair .after p, .voice-pair .after ul { margin-top: 20px; }
  .example-reason { font-size: 16px; margin-top: 20px; max-width: 80ch; }
  .editing-flow { margin-top: 56px; }
  .dark-note { margin-top: 44px; }
  .human-prompt-section { padding-bottom: 72px; }
  #editing-examples { padding-top: 40px; border-top: 1px solid var(--line); }

  .setup-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .setup-options > div { border-top: 1px solid var(--line); padding-top: 22px; }
  .setup-options dt { color: var(--text); font-size: 25px; line-height: 1.3; margin-bottom: 14px; }
  .setup-options dt a { display: inline-flex; min-height: 44px; align-items: center; margin-top: -6px; color: var(--primary); }
  .setup-options dd { max-width: 54ch; color: var(--muted); font-size: 18px; }
  .style-list { margin-bottom: 8px; }
  .subsection-title { margin: 64px 0 18px; }
  #output-styles { border-top: 1px solid var(--line); }
  #output-styles .setup-details p { margin-top: 20px; }
  .setup-callout { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 28px 32px; margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .setup-callout.creator-followup { margin-top: clamp(40px, 5vw, 64px); }
  .setup-callout > div { max-width: 760px; }
  .setup-callout h2 { margin-block: 8px 12px; font-size: 28px; line-height: 1.25; letter-spacing: -.025em; }
  .setup-callout .eyebrow { color: var(--accent); }
  .setup-callout .button { flex-shrink: 0; }
  .setup-note { margin-top: 26px; max-width: 82ch; font-size: 17px; line-height: 1.7; }
  #claude-md { border-top: 1px solid var(--line); padding-top: 64px; }
  .file-download { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: center; gap: 48px; padding: 40px; border: 1px solid var(--control); border-radius: var(--radius); background: var(--soft); }
  .file-summary h3 { margin-bottom: 16px; font: 500 clamp(30px, 3.5vw, 48px)/1.2 var(--mono); letter-spacing: -.05em; }
  .file-summary > p { color: var(--text); font-size: 22px; line-height: 1.5; }
  .file-summary .file-meta { margin-top: 20px; color: var(--subtle); font-size: 16px; }
  .file-actions { display: flex; flex-direction: column; gap: 14px; }
  .setup-details { margin-block: 28px; border: 1px solid var(--control); border-radius: 10px; background: var(--surface); }
  .setup-details summary { min-height: 56px; padding: 20px 24px; cursor: pointer; font-size: 18px; font-weight: 550; color: var(--text); border-radius: 10px; }
  .setup-details summary::marker { color: var(--primary); }
  .setup-details summary:hover { background: var(--raised); }
  .setup-details[open] summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
  .setup-details > div { padding: 24px; }
  .setup-details p { font-size: 17px; line-height: 1.75; max-width: 80ch; }
  .snippet { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
  .snippet .prompt-toolbar { margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--line); }
  .snippet pre { padding: 24px; color: var(--text); max-width: 100%; }
  .file-preview pre { max-height: 600px; overflow-y: auto; scrollbar-color: var(--control) var(--bg); }
  .install-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 36px 0 30px; padding: 0; }
  .install-steps li { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
  .install-steps li > span { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 1px solid var(--control); border-radius: 50%; color: var(--primary); font: 15px var(--mono); }
  .install-steps h3 { font-size: 24px; margin-block: 3px 12px; }
  .install-steps p { font-size: 17px; line-height: 1.7; }

  .evidence-section { padding-block: 8px 88px; }
  .evidence-heading { margin-bottom: 36px; }
  .evidence-heading h2 { font-size: clamp(32px, 3.3vw, 46px); margin-top: 16px; max-width: 25ch; }
  .evidence-stamp { display: flex; align-items: center; gap: 10px; color: var(--subtle); font: 13px/1.7 var(--mono); letter-spacing: .025em; }
  .claim-list { border-top: 1px solid var(--line); }
  .claim-list article { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px; padding-block: 32px; border-bottom: 1px solid var(--line); }
  /* Grid items default to min-width: auto; a wide table would otherwise widen the track instead of scrolling. */
  .claim-list article > * { min-width: 0; }
  .verdict { justify-self: start; align-self: start; max-width: 100%; padding: 7px 10px; border: 1px solid currentColor; border-radius: 5px; font: 13px/1.6 var(--mono); letter-spacing: .025em; }
  .verdict.verified { color: var(--primary); }
  .verdict.qualified { color: var(--warning); }
  .verdict.editorial { color: var(--muted); }
  .verdict.unresolved { color: var(--accent); }
  .claim-list h3 { font-size: 25px; line-height: 1.3; margin-bottom: 16px; max-width: 48ch; }
  .claim-list p { font-size: 18px; line-height: 1.75; max-width: 76ch; }
  .claim-list .claim-note { font-size: 16px; }
  .source-link { display: inline-flex; align-items: center; min-height: 44px; margin: 14px 24px 0 0; font-size: 15px; line-height: 1.6; }
  .evidence-lead { max-width: 76ch; font-size: 19px; margin-bottom: 32px; }
  .table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; scrollbar-color: var(--control) var(--bg); }
  .evidence-table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; background: var(--surface); }
  .evidence-table caption { padding: 20px 24px; text-align: left; font-size: 16px; color: var(--subtle); background: var(--bg); }
  .evidence-table th, .evidence-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 17px; line-height: 1.7; color: var(--muted); }
  .evidence-table thead th { color: var(--text); background: var(--raised); font-weight: 650; }
  .evidence-table tbody th { font-weight: 550; width: 25%; }
  .evidence-table tbody a { color: var(--primary); }
  .evidence-table tbody tr:last-child > * { border-bottom: 0; }
  .github-counts-table { min-width: 620px; }
  .github-counts-table tbody th { width: 38%; }
  .github-counts-table .github-stars { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .repository-alias { display: block; margin-top: 8px; color: var(--subtle); font-size: 14px; font-weight: 400; }
  .table-scroll + .fine-print { margin-block: 24px 30px; max-width: 92ch; }
  /* Screensaver: covers the page after 12 seconds without input (screensaver.js); the page underneath stops painting. */
  .screensaver { position: fixed; inset: 0; z-index: 1000; background: #000; opacity: 0; transition: opacity .8s ease; }
  .screensaver.on { opacity: 1; }
  .screensaver canvas { display: block; width: 100%; height: 100%; }
  /* Corner controls, placed as in the original screensaver file. "all: revert" drops the site's form-field styles. */
  .screensaver input { all: revert; position: absolute; top: 10px; margin: 0; accent-color: var(--c, #82c341); opacity: .2; }
  .screensaver input[type=range] { width: 70px; height: 12px; }
  .screensaver .saver-speed { left: 10px; }
  .screensaver .saver-smooth { top: 9px; left: 86px; width: 12px; height: 12px; }
  .screensaver .saver-color { right: 10px; }
  .screensaver-on body > :not(.screensaver) { visibility: hidden; }
  .reveal-ready { animation: enter .55s both; }
  .motion-paused .reveal-ready { animation: none; }
  @keyframes brand-scatter { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(var(--dx), var(--dy)); } }
  @keyframes brand-turn { to { transform: rotate(45deg); } }
  @keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}

@layer responsive {
  @media (max-width: 1100px) {
    .wrap, .nav-wrap { width: calc(100% - 64px); }
    .nav-wrap { gap: 16px; padding-inline: 16px; }
    .site-header .brand { min-width: 0; padding-left: 0; }
    .creator-intro, .figure-heading, .section-heading { gap: 36px; }
    .creator-intro > p { max-width: 330px; font-size: 19px; }
    .prompt-settings, .prompt-result { padding: 28px; }
    .creator-options { grid-template-columns: 1fr; gap: 0; }
    .comparison-pair { grid-template-columns: 1fr; }
    .section-heading > p, .figure-heading > p { width: 320px; }
    .rule-grid, .editing-flow { gap: 28px; }
    .setup-callout { align-items: flex-start; }
    .setup-callout h2 { font-size: 26px; }
    .setup-callout .button { max-width: 240px; }
    .site-footer { padding-inline: 32px; }
    .install-steps { grid-template-columns: 1fr; gap: 26px; }
    .claim-list article { grid-template-columns: 165px minmax(0, 1fr); gap: 32px; }
  }
  @media (max-width: 980px) {
    .nav-wrap { flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 12px; }
    .site-header .brand { min-height: 56px; padding-left: 12px; }
    .dock { order: 3; width: 100%; margin: 0; }
    .dock-item { flex: 1 1 0; min-width: 0; }
  }
  @media (max-width: 850px) {
    .section-pad { padding-block: 72px; }
    .page-intro { padding-block: 48px 56px; }
    .creator-intro, .figure-heading, .section-heading, .intro-bottom { display: block; }
    .creator-intro > p, .figure-heading > p, .section-heading > p { margin-top: 22px; max-width: 60ch; width: auto; }
    .intro-bottom .button, .intro-bottom .evidence-stamp { margin-top: 24px; }
    .creator-intro h1 { font-size: clamp(44px, 7vw, 62px); }
    .creator-section { padding-top: 36px; }
    .prompt-studio, .prompt-studio.main-creator { grid-template-columns: 1fr; }
    .prompt-settings { border-right: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
    .prompt-result { border-radius: 0 0 var(--radius) var(--radius); }
    .prompt-result-foot { margin-top: 28px; }
    .main-creator pre { min-height: 160px; max-height: 560px; }
    .creator-options, .comparison-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .source-note { display: block; }
    .source-note .pill { margin-bottom: 18px; }
    .figure-section { padding-block: 64px 56px; }
    .signal-stage.expanded-field { height: 620px; }
    .stage-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
    .figure-selector { width: 100%; }
    .figure-selector button { flex: 1; }
    .result-ribbon > div { gap: 14px 22px; }
    .result-ribbon i { display: none; }
    .rule-grid, .editing-flow { gap: 24px; }
    .rule-grid h3, .editing-flow h3 { font-size: 24px; }
    .rule-grid p, .editing-flow p { font-size: 17px; }
    .rewrite-pair article { padding: 26px; }
    .rewrite-pair .before > p { font-size: 18px; }
    .setup-callout { flex-direction: column; gap: 24px; }
    .setup-callout .button { max-width: none; }
    .file-download { grid-template-columns: 1fr; gap: 28px; }
    .file-actions { max-width: 420px; }
    .voice-banner { gap: 24px 36px; }
    .voice-banner h2 { font-size: 40px; }
    .footer-bottom { flex-wrap: wrap; gap: 20px 28px; }
    .footer-bottom > span:last-child { margin-left: 0; }
    .claim-list article { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .evidence-section { padding-bottom: 64px; }
  }
  @media (max-width: 600px) {
    .wrap, .nav-wrap { width: calc(100% - 40px); }
    body { font-size: 17px; }
    h1 { font-size: clamp(38px, 9.2vw, 54px); letter-spacing: -.045em; }
    h2 { font-size: clamp(32px, 7.5vw, 42px); }
    h3 { font-size: 25px; }
    .eyebrow { font-size: 13px; letter-spacing: .055em; }
    .brand { font-size: 25px; }
    .site-header { padding-block: 12px 4px; }
    .nav-wrap { width: calc(100% - 24px); gap: 14px; padding: 10px; border-radius: 20px; }
    .dock { gap: 4px; padding: 5px; border-radius: 16px; }
    /* Labels wrap on phones, so icons align to the top instead of the bottom. */
    .dock-item { min-width: 0; height: 74px; padding: 6px 2px 8px; gap: 4px; border-radius: 12px; align-content: start; }
    .dock-icon { width: 30px; height: 30px; }
    .dock-icon svg { width: 17px; height: 17px; }
    .dock-label { font-size: 11px; line-height: 1.15; white-space: normal; }
    .dock-note { display: none; }
    .section-pad { padding-block: 56px; }
    .section-heading { margin-bottom: 32px; }
    .section-heading > p, .figure-heading > p { font-size: 18px; }
    .page-intro { padding-block: 40px 48px; }
    .intro-bottom > p { font-size: 19px; }
    .page-jumps { gap: 6px 24px; margin-top: 28px; padding-top: 16px; }
    .creator-intro { margin-bottom: 28px; }
    .creator-intro h1 { font-size: clamp(38px, 9.5vw, 56px); }
    .creator-intro > p { font-size: 18px; }
    .prompt-settings, .prompt-result { padding: 24px; }
    .creator-options, .comparison-pair { grid-template-columns: 1fr; gap: 0; }
    .comparison-pair { gap: 18px; }
    .comparison-fields { padding: 18px; }
    .prompt-toolbar { gap: 14px; }
    .prompt-toolbar > .eyebrow { max-width: 150px; }
    .prompt-result pre { font-size: 16px; line-height: 1.75; }
    .prompt-result pre.empty-prompt { font-size: 18px; }
    .main-creator #task-brief { min-height: 170px; }
    .prompt-result-foot { font-size: 12px; gap: 10px 16px; }
    .figure-section { padding-block: 56px 44px; }
    .signal-stage.expanded-field { height: 560px; }
    .field-controls { top: 16px; right: 16px; gap: 8px; }
    .field-controls button { padding-inline: 12px; }
    .stage-bottom { bottom: 22px; left: 18px; right: 18px; }
    .stage-bottom > span { font-size: 13px; }
    .figure-selector { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
    .figure-selector button { min-width: 44px; min-height: 46px; padding: 8px; font-size: 14px; }
    .result-ribbon { padding: 20px; }
    .result-ribbon > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; text-align: center; font-size: 13px; }
    .rule-grid, .editing-flow, .rewrite-pair, .setup-options { grid-template-columns: 1fr; }
    .rule-grid { gap: 28px; }
    .rule-grid h3 { margin-top: 14px; font-size: 26px; }
    .rule-grid h3 br { display: none; }
    .rule-grid p, .editing-flow p { font-size: 18px; max-width: 60ch; }
    .source-note { font-size: 16px; }
    .example-header { margin-top: 36px; gap: 20px; }
    .example-header h3 { font-size: 24px; }
    .segmented { width: 100%; }
    .segmented button { flex: 1; font-size: 15px; padding-inline: 10px; }
    .rewrite-pair article { padding: 26px 24px; }
    .rewrite-pair .before { border-right: 0; border-bottom: 1px solid var(--line); }
    .rewrite-pair .eyebrow { margin-bottom: 20px; }
    .rewrite-pair .annotation { padding-top: 22px; }
    .editing-flow { gap: 28px; margin-top: 40px; }
    .editing-flow h3 { margin-top: 14px; font-size: 26px; }
    #editing-examples { padding-top: 48px; }
    .setup-callout { padding: 24px; }
    .setup-callout h2 { font-size: 26px; }
    #claude-md { padding-top: 48px; }
    .file-download { padding: 26px 24px; }
    .file-summary > p { font-size: 20px; }
    .setup-details summary { padding: 20px; }
    .setup-details > div { padding: 20px; }
    .snippet pre { padding: 18px; font-size: 16px; }
    .snippet .prompt-toolbar { padding: 18px; }
    .install-steps { gap: 26px; }
    .voice-banner { grid-template-columns: 1fr; gap: 24px; padding-block: 56px; }
    .voice-banner h2 { font-size: 36px; }
    .voice-banner > div { max-width: 100%; justify-self: start; }
    .site-footer { padding: 44px 20px 150px; }
    .site-footer::after { height: 180px; background-size: 18px 18px; }
    .site-header .brand-mark { width: 30px; height: 30px; }
    .footer-top { display: block; padding-bottom: 32px; }
    .footer-top > div { margin-top: 28px; }
    .footer-bottom { display: grid; gap: 16px; }
    .evidence-heading h2 { font-size: 34px; }
    .claim-list h3 { font-size: 24px; }
    .claim-list p { font-size: 17px; }
    .claim-list .claim-note { font-size: 16px; }
    .claim-list article { padding-block: 28px; }
    .evidence-lead { font-size: 18px; }
    .evidence-stamp { font-size: 13px; }
    .eyebrow.section-label { font-size: 15px; letter-spacing: .05em; }
    .section-label::before { width: 18px; }
  }
  @media (max-width: 440px) {
    .figure-selector { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
    .prompt-settings, .prompt-result { padding: 22px 20px; }
    .prompt-toolbar > .eyebrow { max-width: 100%; }
    .prompt-toolbar .copy-button { width: 100%; justify-content: center; }
    .file-actions .button { padding-inline: 16px; gap: 12px; }
  }
  @media (max-width: 380px) {
    .nav-wrap { column-gap: 8px; padding: 8px; }
    .dock { gap: 2px; padding: 4px; }
    .dock-item { padding-inline: 0; }
    .dock-label { font-size: 10px; }
    .site-header .brand { font-size: 22px; gap: 8px; }
    .creator-intro h1 { font-size: clamp(32px, 10vw, 38px); }
    .page-intro h1 { font-size: 34px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
  @media (forced-colors: active) {
    .button, .copy-button, .segmented button, .figure-selector button { border: 1px solid ButtonText; }
    [aria-pressed=true], .dock-item[aria-current=page] { outline: 2px solid Highlight; outline-offset: -4px; }
    :focus-visible { outline: 3px solid Highlight; }
  }
}