@font-face { font-family: "Space Grotesk"; src: url("/assets/space-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/assets/sora-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root { color-scheme: light; --navy: #071f28; --ink: #17242a; --muted: #4f5f65; --accent: #16736e; --accent-light: #dff4f1; --surface: #f2f5f4; --paper: #fff; --line: #a9b9b9; --focus: #ffbf47; font-family: "Space Grotesk", "Segoe UI", sans-serif; color: var(--ink); background: var(--surface); line-height: 1.5; font-synthesis: none; }
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { min-block-size: 100dvh; margin: 0; background: var(--surface); }
button, input, select, textarea { font: inherit; }
button, summary, input, select { touch-action: manipulation; }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: .18em; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

main { width: min(72rem, calc(100% - 2rem)); margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 5rem); }
.generator-shell { display: grid; grid-template-columns: minmax(16rem, .72fr) minmax(30rem, 1.28fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.generator-intro { position: sticky; top: 6rem; }
.eyebrow { margin: 0; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, legend { font-family: "Sora", "Space Grotesk", sans-serif; font-weight: 700; }
h1 { text-wrap: balance; margin: .5rem 0 1rem; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.02; letter-spacing: -.045em; }
.generator-intro > p:not(.eyebrow) { max-inline-size: 34rem; color: var(--muted); font-size: 1rem; }
.privacy-note { margin-block-start: 1.5rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); }
.privacy-note strong { color: var(--ink); }

.generator-card { min-inline-size: 0; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); border-block-start: .4rem solid var(--accent); border-radius: .75rem; background: var(--paper); box-shadow: 0 1rem 2.5rem rgb(7 31 40 / 10%); }
.generator-card h2 { margin: 0 0 1rem; font-size: 1.45rem; line-height: 1.2; }
.value-label, .text-setting label, .select-setting label { display: block; margin-block-end: .35rem; font-weight: 700; }
#generated-value { display: block; inline-size: 100%; min-block-size: 6.5rem; resize: vertical; border: 1px solid #6f8081; border-radius: .55rem; padding: .8rem; background: #fff; color: var(--ink); font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace; font-size: 1rem; overflow-wrap: anywhere; }
.generator-boundary { margin: .55rem 0 0; color: var(--muted); font-size: .78rem; }
.generator-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-block-start: 1rem; }
button { min-block-size: 3rem; border: 2px solid var(--accent); border-radius: .35rem; padding: .65rem .8rem; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
button:hover { border-color: #0b514d; background: #0b514d; }
button.secondary-button { background: #fff; color: var(--accent); }
button.secondary-button:hover { background: var(--accent-light); }
button:disabled { border-color: #a9b9b9; background: #e5e9e8; color: #697773; cursor: not-allowed; }

#generator-form { margin-block-start: 1rem; }
.generator-customize { overflow: hidden; margin-block-start: .8rem; border: 1px solid var(--line); border-radius: .55rem; background: #fff; }
.generator-customize > summary { display: flex; min-block-size: 3rem; align-items: center; justify-content: space-between; padding: .7rem .85rem; color: var(--accent); font-weight: 700; cursor: pointer; list-style: none; }
.generator-customize > summary::-webkit-details-marker { display: none; }
.generator-customize > summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; }
.generator-customize[open] > summary::after { content: "−"; }
.generator-customize-body { border-block-start: 1px solid var(--line); }
fieldset { margin: 0; padding: 0; border: 0; }
fieldset legend { inline-size: 100%; padding: .8rem 1rem .45rem; color: var(--muted); font-family: inherit; font-size: .76rem; }
.range-setting.mode-setting { border-block-start: 0; }
.mode-labels { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; font-weight: 700; }
.range-setting, .text-setting, .select-setting, .number-grid { padding: .8rem 1rem; border-block-start: 1px solid #d5dddb; }
.range-setting > label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-end: .35rem; font-weight: 700; }
.range-setting output { color: var(--muted); font-weight: 400; }
.range-setting input[type="range"] { inline-size: 100%; min-block-size: 3rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.primary-range-setting { margin-block-start: .8rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--surface); }
.character-options { display: grid; grid-template-columns: 1fr 1fr; border-block-start: 1px solid #d5dddb; }
.character-options legend { grid-column: 1 / -1; }
.character-options label { display: flex; min-block-size: 3rem; align-items: center; gap: .55rem; padding: .45rem 1rem; cursor: pointer; }
.character-options input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--accent); }
.text-setting input, .select-setting select, .number-grid select { display: block; inline-size: 100%; min-block-size: 3rem; border: 1px solid #6f8081; border-radius: .45rem; padding: .65rem .7rem; background: #fff; color: var(--ink); font-size: 1rem; }
.select-setting { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: .75rem; }
.select-setting label { margin: 0; }
.number-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.number-grid label { color: var(--muted); font-size: .75rem; }
.number-grid select { margin-block-start: .35rem; }
.generator-status { min-block-size: 1.3rem; margin: .7rem 0 0; color: var(--muted); font-size: .78rem; }
.preset-description { margin: 0; padding: .8rem 1rem; border-block-start: 1px solid #d5dddb; color: var(--muted); font-size: .78rem; }
.seed-setting label span { color: var(--muted); font-weight: 400; }
.seed-setting p { margin: 0 0 .55rem; color: var(--muted); font-size: .76rem; }

footer { display: grid; justify-items: center; gap: .4rem; padding: 1.5rem 1rem max(2rem, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--line); background: #fff; color: var(--muted); font-size: .74rem; text-align: center; }
.footer-copy { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .4rem; margin: 0; text-wrap: balance; }
.footer-copy span { white-space: nowrap; }
footer nav { display: flex; gap: 1rem; }

@media (max-width: 820px) {
  .generator-shell { grid-template-columns: 1fr; }
  .generator-intro { position: static; text-align: center; }
  .generator-intro h1, .generator-intro > p { margin-inline: auto; }
}
@media (max-width: 520px) {
  main { padding-block: 1rem 2.5rem; }
  .generator-card { padding: 1rem; }
  .generator-actions { grid-template-columns: 1fr; }
  .character-options { grid-template-columns: 1fr; }
  .number-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; padding-inline: .65rem; }
  .number-grid select { padding-inline: .35rem; }
  .footer-copy { display: grid; gap: .1rem; }
}
@media (pointer: coarse) {
  button, summary, input, select { min-block-size: 3rem; }
}