:root {
  color-scheme: dark;

  --bg: #0b1a24;
  --surface-1: #122834;
  --surface-2: #1a3644;
  --text: #e8f1f2;
  --text-muted: #89a4ad;
  --accent: #4fd6e8;
  --accent-brass: #d9a441;
  --success: #5fd68f;
  --danger: #e8715f;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-ui: "IBM Plex Mono", ui-monospace, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-control: 4px;
  --radius-panel: 8px;

  --focus-glow: 0 0 0 1px rgba(79, 214, 232, 0.35);

  --motion-ui: 150ms ease-out;
  --motion-live: 80ms ease-out;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}

/* The studio is the hero: header + canvas fill the first screen, and the
   marketing/FAQ content flows in below the fold. */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.drafting-grid {
  background-image:
    repeating-linear-gradient(0deg, rgba(79, 214, 232, 0.06) 0, rgba(79, 214, 232, 0.06) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(79, 214, 232, 0.06) 0, rgba(79, 214, 232, 0.06) 1px, transparent 1px, transparent 24px);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  background: var(--surface-1);
  border-bottom: 1px solid var(--surface-2);
}

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .wordmark.has-pattern {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    /* The clipped-through pattern swatch averages close to --bg in
       brightness, which reads as illegible against the header on its own —
       boost it and add a thin accent stroke so the letterforms hold
       contrast at any palette without breaking the "live pattern" effect
       (docs/DESIGN.md signature detail). text-stroke draws from the glyph
       outline, so it still renders even though the fill color is transparent. */
    filter: brightness(1.9) saturate(1.3) contrast(1.15);
    -webkit-text-stroke: 0.6px rgba(232, 241, 242, 0.55);
  }
}

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

.studio {
  flex: 1;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-6);
  min-height: 0;
}

.preview {
  order: 2;
  flex: 1;
  /* Without this, flexbox treats the canvas's pixel-buffer width/height
     attributes (real device pixels, set in main.js) as its intrinsic
     content size and refuses to shrink the flex item below that, which
     overflows the row at anything less than the canvas's backing-store
     width. */
  min-width: 0;
  min-height: 70vh;
  border-radius: var(--radius-panel);
  background-color: var(--surface-1);
}

.controls {
  order: 1;
  flex: 0 0 280px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-panel);
  overflow-y: auto;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.control-group-heading {
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--surface-2);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .studio {
    flex-direction: column;
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .preview {
    order: 0;
    flex: 0 0 55vh;
    min-height: 55vh;
    width: 100%;
  }

  .controls {
    order: 1;
    flex: 1;
    width: 100%;
  }
}

/* --- form controls -------------------------------------------------- */

.control-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.control-field-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.control-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.control-value {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.control-select,
.control-number {
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-control);
  transition: box-shadow var(--motion-ui), border-color var(--motion-ui);
}

.control-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.control-select:hover,
.control-number:hover {
  border-color: var(--accent);
}

.control-select:focus-visible,
.control-number:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-glow);
}

.control-select:disabled,
.control-number:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.control-range {
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
}

/* Tick marks make the track read as a drafting rule (docs/DESIGN.md) instead
   of a bare line, so the thumb doesn't look like a stray dot floating in the
   control's 44px touch-target height. */
.control-range::-webkit-slider-runnable-track {
  height: 4px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--text-muted) 0,
    var(--text-muted) 1px,
    transparent 1px,
    transparent 12.5%
  );
  background-color: var(--surface-2);
  border-radius: var(--radius-control);
}

.control-range::-moz-range-track {
  height: 4px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--text-muted) 0,
    var(--text-muted) 1px,
    transparent 1px,
    transparent 12.5%
  );
  background-color: var(--surface-2);
  border-radius: var(--radius-control);
}

.control-range::-webkit-slider-thumb {
  appearance: none;
  margin-top: 13px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  border: 2px solid var(--surface-1);
  border-radius: 2px;
  box-shadow: none;
  transition: box-shadow var(--motion-ui), transform var(--motion-ui);
}

.control-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--accent);
  border: 2px solid var(--surface-1);
  border-radius: 2px;
  transition: box-shadow var(--motion-ui), transform var(--motion-ui);
}

.control-range:focus-visible::-webkit-slider-thumb,
.control-range:hover::-webkit-slider-thumb {
  box-shadow: var(--focus-glow);
}

.control-range:focus-visible::-moz-range-thumb,
.control-range:hover::-moz-range-thumb {
  box-shadow: var(--focus-glow);
}

.control-range:active::-webkit-slider-thumb,
.control-range:active::-moz-range-thumb {
  transform: scale(0.9);
}

.control-range:focus-visible {
  outline: none;
}

.control-swatch {
  appearance: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--surface-2);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: box-shadow var(--motion-ui), border-color var(--motion-ui);
}

.control-swatch::-webkit-color-swatch-wrapper {
  padding: 2px;
  border-radius: 50%;
}

.control-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.control-swatch:hover {
  border-color: var(--accent);
}

.control-swatch:focus-visible {
  outline: none;
  box-shadow: var(--focus-glow);
}

/* --- buttons ---------------------------------------------------------- */

.btn {
  appearance: none;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform var(--motion-ui), box-shadow var(--motion-ui), background-color var(--motion-ui);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-glow);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--surface-1);
}

.btn-primary:hover:not(:disabled) {
  background: #6fe0ee;
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--surface-2);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--accent);
}

.btn-brass {
  background: var(--accent-brass);
  color: var(--surface-1);
}

.btn-brass:hover:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.25);
}

.btn-pro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.pro-tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--accent-brass);
  border: 1px solid var(--accent-brass);
  border-radius: var(--radius-control);
  padding: 0 5px;
}

.btn-pro:disabled .pro-tag {
  color: var(--text-muted);
  border-color: var(--text-muted);
}

.icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--motion-ui), box-shadow var(--motion-ui);
}

.icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-glow);
}

.icon-btn[aria-pressed="true"] {
  color: var(--text-muted);
}

.export-status {
  min-height: 1.25em;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--success);
  opacity: 0;
  transition: opacity 600ms ease-out;
}

.export-status.is-visible {
  opacity: 1;
}

/* --- landing / below-the-fold --------------------------------------- */

.landing {
  border-top: 1px solid var(--surface-2);
  background: var(--bg);
  padding: var(--space-16) var(--space-6);
}

.landing-inner {
  max-width: 1100px;
  margin: 0 auto var(--space-16);
}

.landing-inner:last-child {
  margin-bottom: 0;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.landing h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.lead-copy {
  max-width: 60ch;
  margin: 0 0 var(--space-6);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.landing-cta {
  display: inline-block;
  text-decoration: none;
}

.landing-sample {
  margin: 0;
}

.landing-sample img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
  box-shadow: 0 0 0 1px rgba(79, 214, 232, 0.35);
}

.landing-sample figcaption {
  margin-top: var(--space-3);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Feature list styled as numbered blueprint spec rows, not emoji cards. */
.spec-list {
  list-style: none;
  counter-reset: spec;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-12);
}

.spec-list li {
  counter-increment: spec;
  position: relative;
  padding-left: var(--space-12);
  border-top: 1px solid var(--surface-2);
  padding-top: var(--space-4);
}

.spec-list li::before {
  content: counter(spec, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.spec-list h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.spec-list p,
.how-to li,
.faq dd {
  color: var(--text-muted);
  line-height: 1.65;
}

.spec-list p {
  margin: 0;
  font-size: 0.9rem;
}

.landing-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-12);
}

.landing-columns h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: 1.2rem;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--surface-2);
}

.how-to ol {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.9rem;
}

.faq dt {
  margin-top: var(--space-4);
  font-weight: 600;
  color: var(--text);
}

.faq dt:first-child {
  margin-top: 0;
}

.faq dd {
  margin: var(--space-1) 0 0;
  font-size: 0.9rem;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-1);
  border-top: 1px solid var(--surface-2);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.site-footer a {
  color: var(--accent);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* The header holds the wordmark, three controls, and the Pro CTA; on a narrow
   phone the extra GitHub icon would overflow the row, and the footer + landing
   both carry a visible GitHub link, so drop the header icon there. */
@media (max-width: 560px) {
  .gh-link {
    display: none;
  }
}

@media (max-width: 768px) {
  .landing {
    padding: var(--space-12) var(--space-4);
  }

  .landing-hero,
  .spec-list,
  .landing-columns {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .landing-inner {
    margin-bottom: var(--space-12);
  }
}