@font-face {
  font-family: Geist;
  src: url(/geist-semibold.woff2) format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: Geist;
  src: url(/geist.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* Theme tokens — light defaults; dark via html.is-dark */
:root {
  color-scheme: light;
  --surface:#f5f3ed;
  --ink:#23251f;
  --ink-soft:#869779;
  --ink-strong:#263421;
  --muted:#616457;
  --line:#c6cabd;
  --accent:#283622;
  --accent-hover:#405137;
  --accent-text:#f8faee;
  --panel:#fafaf6;
  --panel-alt:#f1f1e9;
  --studio:#e9e9df;
  --hero-wash:#dce5cc;
  --hero-frame:#e7dcc4;
  --hero-shadow:#d9ddce;
  --dashed:#a6ac98;
  --selected-bg:#edf1e5;
  --selected-border:#465c39;
  --status:#405137;
  --figure-bg:#dfdfd3;
  --progress:#dde1d3;
  --skeleton:#ccd3bf;
  --ok-bg:#e7eddd;
  --ok-border:#bdc8ad;
  --err-bg:#fff0e8;
  --err-border:#b4654d;
  --err-text:#7c291a;
  --backdrop:#1e261b99;
  --input-bg:transparent;
  --focus:var(--accent);
}
html.is-dark,
html[data-theme="dark"] {
  color-scheme: dark;
  --surface:#1a1c17;
  --ink:#eceee4;
  --ink-soft:#9aab88;
  --ink-strong:#d5e0c4;
  --muted:#a8aea0;
  --line:#3d4238;
  --accent:#a8bd8c;
  --accent-hover:#c0d4a4;
  --accent-text:#1a1c17;
  --panel:#22251f;
  --panel-alt:#262922;
  --studio:#151712;
  --hero-wash:#2a2d24;
  --hero-frame:#2f3328;
  --hero-shadow:#0f110e;
  --dashed:#5a6154;
  --selected-bg:#2c3426;
  --selected-border:#8fa878;
  --status:#b4c99a;
  --figure-bg:#2a2d24;
  --progress:#2c3228;
  --skeleton:#3a4034;
  --ok-bg:#24301f;
  --ok-border:#4a5c3c;
  --err-bg:#3a221c;
  --err-border:#c47860;
  --err-text:#f0b8a8;
  --backdrop:#050605cc;
  --input-bg:#1a1c17;
  --focus:var(--accent);
}
html[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not(.is-dark) {
    color-scheme: dark;
    --surface:#1a1c17;
    --ink:#eceee4;
    --ink-soft:#9aab88;
    --ink-strong:#d5e0c4;
    --muted:#a8aea0;
    --line:#3d4238;
    --accent:#a8bd8c;
    --accent-hover:#c0d4a4;
    --accent-text:#1a1c17;
    --panel:#22251f;
    --panel-alt:#262922;
    --studio:#151712;
    --hero-wash:#2a2d24;
    --hero-frame:#2f3328;
    --hero-shadow:#0f110e;
    --dashed:#5a6154;
    --selected-bg:#2c3426;
    --selected-border:#8fa878;
    --status:#b4c99a;
    --figure-bg:#2a2d24;
    --progress:#2c3228;
    --skeleton:#3a4034;
    --ok-bg:#24301f;
    --ok-border:#4a5c3c;
    --err-bg:#3a221c;
    --err-border:#c47860;
    --err-text:#f0b8a8;
    --backdrop:#050605cc;
    --input-bg:#1a1c17;
    --focus:var(--accent);
  }
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: Geist, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select,
summary {
  outline-offset: 5px;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
[hidden] {
  display: none !important;
}
header,
main,
footer {
  max-width: 1400px;
  margin: auto;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 48px;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-size: 24px;
  letter-spacing: -1px;
  font-weight: 650;
}
.brand span {
  font-weight: 400;
  margin-left: 4px;
}
nav {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 14px;
}
.nav-cta {
  border-bottom: 1px solid;
  padding-bottom: 4px;
}
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 48px 96px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 24px;
}
h1 {
  font-size: 72px;
  line-height: 1;
  letter-spacing: -4px;
  font-weight: 500;
  margin: 0 0 32px;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
.intro {
  font-size: 18px;
  line-height: 28px;
  color: var(--muted);
  max-width: 440px;
  margin-bottom: 32px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--accent);
  color: var(--accent-text);
  border: 0;
  padding: 16px 24px;
  font-weight: 600;
  font-size: 16px;
  min-height: 48px;
  border-radius: 4px;
}
.button:hover {
  background: var(--accent-hover);
}
.small {
  font-size: 12px;
  line-height: 20px;
  color: var(--muted);
}
.hero-art {
  background: var(--hero-wash);
  min-height: 440px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(-2deg);
}
.art-top,
.art-bottom {
  font-size: 12px;
  letter-spacing: 1px;
}
.ink-word {
  font-size: 72px;
  line-height: 1;
  letter-spacing: -4px;
  font-weight: 600;
  color: var(--ink-soft);
}
.ink-word span {
  color: var(--ink-strong);
}
.art-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.studio {
  padding: 64px 48px;
  background: var(--studio);
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}
h2 {
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -1px;
  font-weight: 500;
  margin: 0;
}
.section-heading p:last-child {
  font-size: 14px;
  color: var(--muted);
}
.workspace {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.photo-panel {
  padding: 32px;
  background: var(--panel-alt);
  min-width: 0;
}
.upload {
  min-height: 580px;
  border: 1px dashed var(--dashed);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 32px;
  gap: 16px;
  cursor: pointer;
}
.upload strong {
  font-size: 24px;
  font-weight: 500;
}
.upload > span {
  font-size: 14px;
  color: var(--muted);
}
.upload .upload-mark {
  font-size: 60px;
  color: var(--accent);
}
.upload-note {
  max-width: 240px;
}
.photo-panel > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.photo-panel:focus-within .upload {
  outline: 2px solid var(--accent);
}
.editor-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 12px;
}
.editor-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-bar button,
footer button,
.consent button {
  border: 0;
  background: none;
  text-decoration: underline;
  color: inherit;
  padding: 0;
}
canvas {
  display: block;
  max-width: 100%;
  max-height: 560px;
  margin: auto;
  touch-action: none;
  cursor: crosshair;
}
.coordinates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  font-size: 12px;
}
.coordinates input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 4px;
}
form {
  padding: 32px;
}
fieldset {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
legend {
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 600;
}
.style {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.style:has(input:checked) {
  border-color: var(--selected-border);
  background: var(--selected-bg);
}
.style strong {
  font-size: 14px;
  font-weight: 600;
}
.style small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--accent-hover);
}
.field {
  display: block;
  font-size: 14px;
  margin: 16px 0;
}
.field > span {
  color: var(--muted);
  font-size: 12px;
}
.field input,
.field select {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  margin: 24px 0;
}
#generate {
  width: 100%;
}
#status {
  font-size: 14px;
  min-height: 40px;
  color: var(--status);
}
#result {
  margin-top: 48px;
}
.results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
figure {
  margin: 0;
}
figure img {
  width: 100%;
  max-height: 640px;
  object-fit: contain;
  background: var(--figure-bg);
}
figcaption {
  font-size: 14px;
  padding: 12px 0;
}
.process {
  padding: 96px 48px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 48px;
}
h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 16px;
}
.steps p {
  color: var(--muted);
  font-size: 14px;
  max-width: 320px;
}
.faq {
  padding: 64px 48px 96px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
}
.faq details {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.faq details:first-child {
  padding-top: 0;
}
summary {
  cursor: pointer;
  font-size: 18px;
}
.faq p {
  color: var(--muted);
  font-size: 14px;
}
footer {
  padding: 32px 48px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  color: var(--muted);
}
dialog {
  max-width: 560px;
  width: calc(100% - 32px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px;
  background: var(--panel);
  color: var(--ink);
}
dialog::backdrop {
  background: var(--backdrop);
}
dialog p {
  font-size: 14px;
}
dialog h2 {
  font-size: 30px;
  line-height: 36px;
}
@media (max-width: 900px) {
  header {
    padding: 24px;
  }
  .hero {
    padding: 48px 24px;
    gap: 32px;
  }
  h1,
  .ink-word {
    font-size: 48px;
    letter-spacing: -2px;
  }
  .hero-art {
    min-height: 360px;
    padding: 24px;
  }
  .studio {
    padding: 48px 24px;
  }
  .workspace {
    grid-template-columns: 1fr;
  }
  .upload {
    min-height: 360px;
  }
  .process,
  .faq {
    padding: 64px 24px;
  }
  .section-heading {
    align-items: start;
  }
  .steps {
    gap: 24px;
  }
  .faq {
    grid-template-columns: 1fr;
  }
  footer {
    padding: 24px;
  }
}
@media (max-width: 600px) {
  nav > a:not(.nav-cta) {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-art {
    min-height: 300px;
    margin: 16px 8px;
  }
  .hero h1 {
    font-size: 48px;
  }
  .section-heading {
    display: block;
  }
  .section-heading .button {
    margin-top: 24px;
  }
  h2 {
    font-size: 30px;
    line-height: 36px;
  }
  .photo-panel,
  form {
    padding: 16px;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .results {
    gap: 12px;
  }
  .coordinates {
    gap: 4px;
  }
  footer {
    flex-wrap: wrap;
  }
  footer > span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-art {
    transform: none;
  }
}

#account-form { display: grid; gap: 12px; margin-top: 24px; }
#account-form[hidden] { display: none; }
#account-dialog { width: min(440px, calc(100vw - 32px)); }
#account-dialog h2 { margin-top: 24px; }
#account-dialog input { width: 100%; padding: 12px; font: inherit; }
#account-summary { margin: 0 0 20px; }

#account-form { padding: 0; }
#account-form .button { justify-content: center; padding: 12px 20px; }
#send-code { background: transparent; color: inherit; border: 1px solid var(--line); }
#account-open, #account-close, #account-logout { background: transparent; border: 0; color: inherit; padding: 6px 0; text-decoration: underline; text-underline-offset: 4px; }
#account-close { float: right; }
#account-dialog input { border: 1px solid var(--line); border-radius: 4px; background: var(--input-bg); color: inherit; }
#account-dialog h2 { clear: both; padding-top: 16px; }
#account-message {margin:0;padding:12px;font-size:14px;line-height:20px;background:var(--ok-bg);border:1px solid var(--ok-border);border-radius:4px;color:var(--ink)}
#account-message:empty {display:none}
#account-message[data-kind="error"] {background:var(--err-bg);border-color:var(--err-border);color:var(--err-text)}

/* Launch refinement: the existing editorial palette, with a real design study. */

button,input,select,textarea,a { -webkit-tap-highlight-color:transparent; }
button,a.button {transition:background-color 300ms cubic-bezier(.22,1,.36,1),opacity 300ms cubic-bezier(.22,1,.36,1),transform 300ms cubic-bezier(.22,1,.36,1)}
button:active,.button:active {transform:translateY(1px)}
:focus-visible {outline:2px solid var(--focus);outline-offset:4px}
.skip-link {position:fixed;left:16px;top:16px;z-index:50;transform:translateY(-160%);background:var(--accent);color:var(--surface);padding:12px 16px}
.skip-link:focus {transform:none}
.hero-art {min-height:0;padding:0;margin:0;max-width:480px;justify-self:end;border:1px solid var(--line);background:var(--hero-frame);box-shadow:8px 8px 0 var(--hero-shadow)}
.hero-art img {width:100%;height:auto;display:block}
.hero-art figcaption {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:12px 16px;font-size:12px;line-height:16px;background:var(--surface)}
.promise {max-width:1400px;margin:auto;padding:32px 48px 80px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.promise>p {font-size:48px;line-height:1.05;letter-spacing:-2px;margin:0;font-weight:500}.promise h2 {font-size:24px;line-height:32px}.promise div>p {max-width:60ch;color:var(--muted)}
.account-strip {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.account-strip #account-summary {margin:0;font-variant-numeric:tabular-nums}
#account-studio,#credit-help,#retry-connection {border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink);padding:8px 12px;min-height:44px}
#pending-reference {overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#generation-progress {background:var(--progress);padding:16px;border-radius:8px;font-size:14px;line-height:20px;color:var(--ink)}
.preview-skeleton {height:80px;background:var(--skeleton);border-radius:4px;animation:breathing 1600ms cubic-bezier(.22,1,.36,1) infinite alternate}
@keyframes breathing {from {opacity:.45} to {opacity:1}}
.final-cta {padding:64px 24px 80px;max-width:1400px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:24px}.final-cta h2 {max-width:680px}
.footer-links {display:flex;gap:16px;align-items:center;flex-wrap:wrap}.footer-links a {text-decoration:underline;text-underline-offset:4px}
.document {max-width:800px;padding:64px 24px 96px;margin:auto}.document h1 {font-size:48px;line-height:1;letter-spacing:-2px}.document h2 {font-size:24px;line-height:32px;margin-top:40px}.document p,.document li {line-height:28px}.document a {text-decoration:underline;text-underline-offset:4px}.document-status {font-size:14px;color:var(--muted)}
dialog {max-height:calc(100dvh - 32px);overflow-y:auto}input,select,textarea {font-size:16px}canvas {touch-action:none}
@media(max-width:900px) {.promise {padding:32px 24px 64px;gap:32px}.hero-art {justify-self:center;max-width:400px}}
@media(max-width:600px) {
  .hero h1 {font-size:36px;line-height:40px;letter-spacing:-1px}
  header {gap:16px;padding:16px}.brand {font-size:20px}nav {gap:12px}nav .nav-cta {display:none}
  .hero {padding:40px 16px 64px}.hero-art {transform:none;width:calc(100% - 8px);max-width:360px;margin:0 8px 0 0}
  .promise {padding:24px 16px 48px;grid-template-columns:1fr;gap:24px}.promise>p {font-size:36px;line-height:40px}
  .studio,.process,.faq {padding:48px 16px}.coordinates input {min-width:0;width:100%;padding:8px 4px}.coordinates {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .photo-panel,form {min-width:0}.results {grid-template-columns:1fr}.final-cta {padding:48px 16px;align-items:start;flex-direction:column}
  .document {padding:48px 16px 64px}.document h1 {font-size:36px;line-height:40px}dialog {padding:24px}footer {padding:24px 16px 80px}
}
@media(prefers-reduced-motion:reduce) {.preview-skeleton {animation:none}button,a.button {transition:none}}

.theme-toggle {border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink);padding:6px 10px;min-height:36px;font-size:12px;font-weight:600;text-decoration:none;text-transform:capitalize}
.theme-toggle:hover {background:var(--panel-alt)}
.theme-toggle:focus-visible {outline:2px solid var(--focus);outline-offset:4px}
/* Keep real photos and generated results unfiltered in both themes */
html.is-dark img,
html.is-dark canvas,
html[data-theme="dark"] img,
html[data-theme="dark"] canvas {filter:none}
html.is-dark .hero-art img,
html[data-theme="dark"] .hero-art img,
html.is-dark #result img,
html[data-theme="dark"] #result img,
html.is-dark #original-preview,
html[data-theme="dark"] #original-preview {filter:none;opacity:1}
@media (max-width:600px) {
  .theme-toggle {padding:6px 8px;font-size:11px}
}