:root {
  --ink: #17372f;
  --ink-soft: #49625c;
  --paper: #fffaf0;
  --cream: #f4efe2;
  --cream-deep: #e7dfcf;
  --orange: #ff6940;
  --orange-dark: #d84a28;
  --lime: #dff065;
  --yellow: #ffd867;
  --blue: #79c8ff;
  --pink: #ff9ac5;
  --border: #17372f;
  --shadow: 6px 7px 0 #17372f;
  --radius-lg: 28px;
  --radius-md: 18px;
  --font: ui-rounded, "Arial Rounded MT Bold", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,216,103,.22), transparent 28rem),
    radial-gradient(circle at 90% 34%, rgba(121,200,255,.15), transparent 30rem),
    var(--cream);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(#17372f 0.55px, transparent 0.55px);
  background-size: 8px 8px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }

.ambient { position: fixed; border: 2px solid rgba(23,55,47,.14); border-radius: 50%; pointer-events:none; z-index:-1; }
.ambient-a { width: 380px; height:380px; top:-220px; right:-80px; }
.ambient-b { width:280px; height:280px; bottom:7%; left:-190px; }

.site-header {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; font-family:var(--font); font-weight:900; letter-spacing:-1.2px; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:2px solid var(--ink); border-radius:12px; background:var(--orange); box-shadow:3px 3px 0 var(--ink); color:white; font-size:24px; transform:rotate(-4deg); }
.brand-word { font-size:24px; }
.brand-word span { color:var(--orange); }
.brand-dot { width:8px; height:8px; background:var(--lime); border:2px solid var(--ink); border-radius:50%; margin-left:-6px; margin-top:-22px; }
.header-actions { display:flex; align-items:center; gap:10px; }
.tiny-label { font-size:10px; font-weight:900; letter-spacing:.13em; opacity:.65; }
.language-switch { display:flex; padding:3px; border:2px solid var(--ink); background:var(--paper); border-radius:999px; box-shadow:2px 2px 0 var(--ink); }
.language-button { border:0; background:transparent; border-radius:999px; font-size:12px; font-weight:900; padding:7px 11px; cursor:pointer; }
.language-button.is-active { background:var(--ink); color:var(--paper); }

main { width:min(1120px, calc(100% - 40px)); margin:0 auto; }
.hero { display:grid; grid-template-columns:1fr 220px; align-items:end; gap:42px; padding:76px 0 50px; }
.hero-copy { max-width:790px; }
.eyebrow, .section-kicker, .machine-kicker { font-size:11px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 12px; border:1.5px solid var(--ink); border-radius:999px; background:rgba(255,250,240,.65); }
.eyebrow-led { width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(255,105,64,.18); }
.hero h1 { font-family:var(--font); font-size:clamp(46px, 7vw, 82px); line-height:.93; letter-spacing:-.055em; margin:26px 0 22px; max-width:940px; }
.hero h1 em { color:var(--orange); font-style:normal; position:relative; white-space:nowrap; }
.hero h1 em::after { content:""; position:absolute; height:7px; border-radius:100%; background:var(--yellow); left:3%; right:1%; bottom:-10px; transform:rotate(-1deg); border:1px solid var(--ink); z-index:-1; }
.hero-copy > p { max-width:650px; font-size:18px; line-height:1.65; color:var(--ink-soft); margin:0; }
.hero-note { margin-top:22px; display:flex; gap:8px; align-items:center; font-size:13px; font-weight:800; }
.scribble { font-size:24px; transform:rotate(11deg); color:var(--orange); }
.hero-sticker { justify-self:end; width:185px; aspect-ratio:1; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); box-shadow:var(--shadow); display:grid; place-items:center; align-content:center; text-align:center; transform:rotate(7deg); font-family:var(--font); position:relative; }
.hero-sticker strong { font-size:36px; line-height:.8; }
.hero-sticker span:not(.sticker-star) { font-size:13px; line-height:1.1; margin-top:8px; font-weight:900; }
.sticker-star { position:absolute; top:16px; right:30px; font-size:20px; }

.machine { position:relative; border:2px solid var(--ink); border-radius:var(--radius-lg); background:#dfe7c7; box-shadow:10px 12px 0 var(--ink); overflow:hidden; }
.machine::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background:repeating-linear-gradient(0deg, transparent 0 21px, rgba(23,55,47,.24) 22px); }
.machine-topbar { position:relative; padding:20px 24px 18px; border-bottom:2px solid var(--ink); background:#bfd091; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.machine-topbar h2 { font-family:var(--font); font-size:25px; margin:4px 0 0; letter-spacing:-.04em; }
.status { display:flex; align-items:center; gap:9px; padding:9px 11px; border:1.5px solid var(--ink); background:rgba(255,250,240,.65); border-radius:10px; font-size:10px; font-weight:900; letter-spacing:.08em; }
.status-light { width:9px; height:9px; background:#65c56d; border:1.5px solid var(--ink); border-radius:50%; box-shadow:0 0 0 4px rgba(101,197,109,.18); }
.machine.is-thinking .status-light { background:var(--orange); animation:blink .45s steps(2) infinite; }

.paper-wrap { position:relative; padding:38px clamp(18px, 4vw, 58px) 30px; }
.paper { position:relative; background:var(--paper); border:2px solid var(--ink); min-height:290px; border-radius:4px; box-shadow:6px 7px 0 rgba(23,55,47,.25); padding:27px clamp(22px,4vw,44px); transform:rotate(-.35deg); background-image:linear-gradient(rgba(23,55,47,.055) 1px, transparent 1px); background-size:100% 28px; }
.paper::before { content:""; position:absolute; inset:8px; border:1px dashed rgba(23,55,47,.25); pointer-events:none; }
.paper-head { display:flex; justify-content:space-between; gap:16px; font:800 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.09em; opacity:.58; position:relative; z-index:1; }
.paper blockquote { position:relative; z-index:1; margin:40px 0 30px; font-family:Georgia, "Times New Roman", serif; font-size:clamp(23px,3.3vw,39px); line-height:1.2; letter-spacing:-.025em; font-weight:600; text-wrap:balance; }
.paper blockquote::before { content:"“"; position:absolute; left:-25px; top:-24px; font:70px/1 Georgia,serif; color:var(--orange); opacity:.75; }
.paper-footer { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; gap:18px; font-size:12px; font-weight:700; color:var(--ink-soft); }
.fake-stamp { color:var(--orange-dark); border:3px double currentColor; padding:6px 9px; font:900 10px/1.05 var(--font); letter-spacing:.1em; text-align:center; transform:rotate(-8deg); opacity:.7; }
.paper-pin { position:absolute; z-index:4; width:18px; height:18px; border-radius:50%; border:2px solid var(--ink); background:var(--orange); top:29px; box-shadow:inset -2px -2px 0 rgba(0,0,0,.15); }
.pin-left { left:calc(clamp(18px, 4vw, 58px) + 18px); }
.pin-right { right:calc(clamp(18px, 4vw, 58px) + 18px); background:var(--blue); }

.controls-grid { position:relative; display:grid; grid-template-columns:1.45fr .8fr; border-top:2px solid var(--ink); }
.control-block { border:0; min-width:0; padding:22px 24px 18px; margin:0; }
.control-block + .control-block { border-left:2px solid var(--ink); }
.control-block legend { float:left; width:100%; padding:0; margin:0 0 13px; font:900 11px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; }
.theme-list { clear:both; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.theme-button { min-width:0; border:1.7px solid var(--ink); background:rgba(255,250,240,.67); border-radius:12px; padding:10px 9px; cursor:pointer; text-align:left; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.theme-button:hover { transform:translateY(-2px); }
.theme-button.is-active { background:var(--yellow); box-shadow:3px 3px 0 var(--ink); transform:translate(-1px,-1px); }
.theme-button span { display:block; font-size:19px; margin-bottom:3px; }
.theme-button strong { display:block; font:900 12px/1.1 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.control-hint { clear:both; font-size:11px; line-height:1.4; color:var(--ink-soft); margin:11px 0 0; }
.segmented { clear:both; display:grid; grid-template-columns:repeat(3,1fr); border:1.7px solid var(--ink); border-radius:12px; overflow:hidden; background:rgba(255,250,240,.67); }
.segmented button { border:0; border-right:1.5px solid var(--ink); background:transparent; cursor:pointer; padding:9px 5px 8px; }
.segmented button:last-child { border-right:0; }
.segmented button.is-active { background:var(--ink); color:var(--paper); }
.segmented span, .segmented small { display:block; }
.segmented span { font:900 15px/1 var(--font); }
.segmented small { margin-top:4px; font-size:9px; opacity:.7; }

.action-row { position:relative; border-top:2px solid var(--ink); padding:22px 24px; display:flex; align-items:center; gap:14px; justify-content:space-between; background:rgba(255,250,240,.22); }
.generate-button { border:2px solid var(--ink); background:var(--orange); color:white; border-radius:14px; padding:16px 22px; min-width:260px; box-shadow:5px 6px 0 var(--ink); cursor:pointer; font:900 17px/1 var(--font); letter-spacing:.08em; display:flex; align-items:center; justify-content:center; gap:12px; transition:transform .08s ease, box-shadow .08s ease; }
.generate-button:hover { transform:translate(-1px,-1px); box-shadow:7px 8px 0 var(--ink); }
.generate-button:active { transform:translate(4px,5px); box-shadow:1px 1px 0 var(--ink); }
.generate-button:disabled { opacity:.65; cursor:progress; }
.generate-button kbd { font:800 9px/1 ui-monospace, monospace; border:1px solid rgba(255,255,255,.8); border-radius:5px; padding:4px 5px; opacity:.75; }
.button-spark { font-size:18px; }
.secondary-actions { display:flex; gap:8px; }
.icon-action { border:1.7px solid var(--ink); background:var(--paper); border-radius:11px; padding:11px 13px; cursor:pointer; font-size:12px; font-weight:800; display:flex; gap:7px; align-items:center; box-shadow:2px 2px 0 var(--ink); }
.icon-action:hover { background:var(--yellow); }

.machine-footer { position:relative; border-top:2px solid var(--ink); display:grid; grid-template-columns:1fr 1fr 1.3fr; background:var(--ink); color:var(--paper); }
.meter { padding:14px 18px; border-right:1px solid rgba(255,250,240,.25); display:grid; gap:6px; align-content:center; }
.meter:last-child { border-right:0; }
.meter-label { font:700 8px/1.2 ui-monospace, monospace; letter-spacing:.1em; opacity:.62; }
.meter strong { font:900 14px/1 var(--font); }
.meter-wide { grid-template-columns:auto 1fr auto; align-items:center; }
.meter-wide .meter-label { grid-column:1/-1; }
.bar { height:8px; border:1px solid rgba(255,250,240,.55); padding:1px; border-radius:10px; }
.bar span { display:block; height:100%; width:94%; border-radius:8px; background:var(--lime); }
.asterisk { position:relative; margin:0; padding:8px 20px 10px; background:var(--ink); color:rgba(255,250,240,.56); text-align:right; font-size:9px; border-top:1px dashed rgba(255,250,240,.2); }

.how { padding:115px 0 100px; }
.how-heading { display:grid; grid-template-columns:70px 1fr; align-items:start; gap:20px; margin-bottom:42px; }
.section-number { width:56px; height:56px; border:2px solid var(--ink); border-radius:50%; display:grid; place-items:center; background:var(--blue); font:900 14px/1 var(--font); box-shadow:3px 3px 0 var(--ink); transform:rotate(-7deg); }
.section-kicker { margin:2px 0 10px; color:var(--orange-dark); }
.how h2, .legacy h2 { font:900 clamp(34px,5vw,58px)/.98 var(--font); letter-spacing:-.05em; margin:0; }
.how h2 span, .legacy h2 span { color:var(--orange); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step-card { border:2px solid var(--ink); border-radius:18px; background:var(--paper); box-shadow:5px 6px 0 var(--ink); padding:25px; min-height:210px; }
.step-card:nth-child(2) { background:#e9f2c7; }
.step-card:nth-child(3) { background:#fbd9e7; }
.rotate-left { transform:rotate(-1.2deg); }
.rotate-right { transform:rotate(1.1deg); }
.rotate-left-small { transform:rotate(-.45deg); }
.step-icon { width:38px; height:38px; border:2px solid var(--ink); border-radius:10px; background:var(--yellow); display:grid; place-items:center; font:900 16px/1 var(--font); }
.step-card h3 { font:900 22px/1.1 var(--font); margin:25px 0 9px; }
.step-card p { color:var(--ink-soft); font-size:14px; line-height:1.6; margin:0; }

.legacy { border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:55px 0; display:grid; grid-template-columns:90px 1fr 1.1fr; align-items:center; gap:30px; }
.legacy-mark { width:70px; height:70px; display:grid; place-items:center; background:var(--orange); color:white; border:2px solid var(--ink); border-radius:18px; box-shadow:4px 4px 0 var(--ink); font:900 28px/1 var(--font); transform:rotate(-6deg); }
.legacy p:last-child { color:var(--ink-soft); font-size:15px; line-height:1.7; margin:0; }

footer { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:38px 0 45px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; }
.footer-brand { font:900 15px/1 var(--font); }
.footer-brand span { color:var(--orange); }
footer > p { margin:0; font-size:11px; color:var(--ink-soft); }
.footer-legal { text-align:right; opacity:.7; }

.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); background:var(--ink); color:var(--paper); border:2px solid var(--paper); outline:2px solid var(--ink); box-shadow:4px 5px 0 rgba(0,0,0,.18); border-radius:999px; padding:11px 17px; font-size:12px; font-weight:800; opacity:0; pointer-events:none; transition:.22s ease; z-index:20; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@keyframes blink { 50% { opacity:.3; } }
@keyframes paperIn { from { transform:rotate(-.35deg) translateY(5px); opacity:.45; } to { transform:rotate(-.35deg) translateY(0); opacity:1; } }
.paper.refresh { animation:paperIn .25s ease both; }


/* Desktop cockpit ---------------------------------------------------------
   Keep the whole generator usable above the fold on common laptop/Full-HD
   browser viewports. The marketing intro stays visible, while the machine
   switches to a two-column control-panel layout. */
@media (min-width: 1000px) and (min-height: 720px) {
  .site-header {
    padding: 18px 0 8px;
  }

  .hero {
    grid-template-columns: 1fr 160px;
    gap: 34px;
    padding: 24px 0 24px;
    align-items: center;
  }

  .hero-copy {
    max-width: 830px;
  }

  .eyebrow {
    padding: 6px 10px;
    font-size: 9px;
  }

  .hero h1 {
    font-size: clamp(48px, 4.15vw, 62px);
    line-height: .92;
    margin: 16px 0 14px;
  }

  .hero h1 em::after {
    height: 5px;
    bottom: -7px;
  }

  .hero-copy > p {
    max-width: 720px;
    font-size: 15px;
    line-height: 1.45;
  }

  .hero-note {
    margin-top: 12px;
    font-size: 11px;
  }

  .scribble {
    font-size: 19px;
  }

  .hero-sticker {
    width: 136px;
    box-shadow: 5px 6px 0 var(--ink);
  }

  .hero-sticker strong {
    font-size: 28px;
  }

  .hero-sticker span:not(.sticker-star) {
    font-size: 10px;
    margin-top: 5px;
  }

  .sticker-star {
    top: 11px;
    right: 22px;
    font-size: 16px;
  }

  .machine {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(350px, .75fr);
    grid-template-areas:
      "topbar topbar"
      "paper controls"
      "paper actions"
      "footer footer"
      "asterisk asterisk";
  }

  .machine-topbar {
    grid-area: topbar;
    padding: 14px 20px 12px;
  }

  .machine-topbar h2 {
    font-size: 21px;
    margin-top: 3px;
  }

  .machine-kicker {
    font-size: 9px;
  }

  .status {
    padding: 7px 9px;
    font-size: 9px;
  }

  .paper-wrap {
    grid-area: paper;
    min-width: 0;
    display: flex;
    padding: 25px 30px 24px;
    border-right: 2px solid var(--ink);
  }

  .paper {
    width: 100%;
    min-height: 286px;
    padding: 22px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .paper blockquote {
    margin: 29px 0 22px;
    font-size: clamp(24px, 2.25vw, 34px);
    line-height: 1.16;
  }

  .paper blockquote::before {
    left: -19px;
    top: -22px;
    font-size: 58px;
  }

  .paper-pin {
    top: 17px;
  }

  .pin-left {
    left: 47px;
  }

  .pin-right {
    right: 47px;
  }

  .controls-grid {
    grid-area: controls;
    display: block;
    border-top: 0;
    min-width: 0;
  }

  .control-block {
    padding: 15px 17px 13px;
  }

  .control-block + .control-block {
    border-left: 0;
    border-top: 2px solid var(--ink);
  }

  .control-block legend {
    margin-bottom: 9px;
    font-size: 9px;
  }

  .theme-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }

  .theme-button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border-radius: 10px;
  }

  .theme-button span {
    flex: 0 0 auto;
    font-size: 16px;
    margin: 0;
  }

  .theme-button strong {
    min-width: 0;
    font-size: 10px;
  }

  .control-hint {
    margin-top: 7px;
    font-size: 9px;
    line-height: 1.3;
  }

  .segmented button {
    padding: 7px 4px 6px;
  }

  .segmented span {
    font-size: 13px;
  }

  .segmented small {
    margin-top: 3px;
    font-size: 8px;
  }

  .action-row {
    grid-area: actions;
    padding: 13px 17px 16px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 9px;
  }

  .generate-button {
    min-width: 0;
    width: 100%;
    padding: 13px 12px;
    font-size: 14px;
    border-radius: 12px;
    box-shadow: 4px 5px 0 var(--ink);
  }

  .secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .icon-action {
    justify-content: center;
    padding: 8px 10px;
    font-size: 10px;
  }

  .machine-footer {
    grid-area: footer;
  }

  .meter {
    padding: 9px 15px;
    gap: 4px;
  }

  .meter-label {
    font-size: 7px;
  }

  .meter strong {
    font-size: 12px;
  }

  .asterisk {
    grid-area: asterisk;
    padding: 5px 18px 6px;
    font-size: 8px;
  }
}

/* On shorter desktop windows, sacrifice decorative copy before controls. */
@media (min-width: 1000px) and (max-height: 820px) {
  .site-header { padding-top: 12px; }
  .hero { padding: 15px 0 17px; }
  .hero h1 { font-size: 50px; margin: 12px 0 10px; }
  .hero-copy > p { font-size: 13px; line-height: 1.35; }
  .hero-note { display: none; }
  .hero-sticker { width: 112px; }
  .hero-sticker strong { font-size: 23px; }
  .paper-wrap { padding-top: 19px; padding-bottom: 18px; }
  .paper { min-height: 250px; }
  .paper blockquote { font-size: clamp(22px, 2vw, 30px); margin: 24px 0 18px; }
}

@media (max-width: 820px) {
  .hero { grid-template-columns:1fr; padding-top:55px; }
  .hero-sticker { display:none; }
  .controls-grid { grid-template-columns:1fr; }
  .control-block + .control-block { border-left:0; border-top:2px solid var(--ink); }
  .theme-list { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:1fr; }
  .step-card { min-height:auto; transform:none; }
  .legacy { grid-template-columns:70px 1fr; }
  .legacy p:last-child { grid-column:1/-1; }
  footer { grid-template-columns:1fr; text-align:center; }
  .footer-legal { text-align:center; }
}

@media (max-width: 560px) {
  .site-header, main, footer { width:min(100% - 24px,1120px); }
  .site-header { padding-top:18px; }
  .brand-word { font-size:20px; }
  .brand-mark { width:37px; height:37px; font-size:21px; }
  .tiny-label { display:none; }
  .hero { padding:45px 0 34px; }
  .hero h1 { font-size:48px; }
  .hero h1 em { white-space:normal; }
  .hero-copy > p { font-size:16px; }
  .machine { border-radius:20px; box-shadow:6px 7px 0 var(--ink); }
  .machine-topbar { align-items:flex-start; padding:16px; }
  .machine-topbar h2 { font-size:20px; }
  .status { padding:7px; }
  #statusText { display:none; }
  .paper-wrap { padding:24px 12px 20px; }
  .paper { min-height:290px; padding:23px 19px; }
  .paper-head { font-size:8px; }
  .paper blockquote { font-size:25px; margin:38px 0 25px; }
  .paper blockquote::before { left:-10px; top:-29px; }
  .paper-footer { align-items:center; }
  .fake-stamp { font-size:8px; }
  .paper-pin { top:17px; }
  .pin-left { left:28px; }
  .pin-right { right:28px; }
  .control-block { padding:19px 16px; }
  .theme-button { padding:10px 7px; }
  .action-row { padding:17px 16px; flex-direction:column; align-items:stretch; }
  .generate-button { min-width:0; width:100%; }
  .secondary-actions { display:grid; grid-template-columns:1fr 1fr; }
  .icon-action { justify-content:center; }
  .machine-footer { grid-template-columns:1fr 1fr; }
  .meter-wide { grid-column:1/-1; border-top:1px solid rgba(255,250,240,.25); }
  .how { padding:85px 0 75px; }
  .how-heading { grid-template-columns:55px 1fr; gap:12px; }
  .section-number { width:45px; height:45px; }
  .legacy { grid-template-columns:1fr; }
  .legacy-mark { width:58px; height:58px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}