@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #0b0d12;
  --ink-soft: #11151d;
  --paper: #f3f1eb;
  --muted: #a3a8b3;
  --line: rgba(255, 255, 255, .12);
  --acid: #d7ff57;
  --cyan: #38bdf8;
  --orange: #ff9252;
  --sans: 'Manrope', 'Helvetica Neue', sans-serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app-shell {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 79% 10%, rgba(43, 119, 160, .18), transparent 25rem),
    radial-gradient(circle at 12% 46%, rgba(132, 63, 120, .13), transparent 30rem),
    var(--ink);
}
.topbar, main, .footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.topbar {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; gap: 12px; align-items: center; letter-spacing: .08em; }
.brand strong { display: block; font-size: 14px; line-height: 1; font-weight: 800; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }
.brand-mark { position: relative; display: flex; width: 28px; height: 28px; align-items: end; gap: 2px; }
.brand-mark i { display: block; width: 8px; border-radius: 8px 8px 2px 2px; transform: skewY(-23deg); }
.brand-mark i:nth-child(1) { height: 16px; background: var(--acid); }
.brand-mark i:nth-child(2) { height: 25px; background: var(--cyan); }
.brand-mark i:nth-child(3) { height: 20px; background: var(--orange); }
.topnav { display: flex; gap: 36px; margin-left: auto; margin-right: 42px; color: var(--muted); font-size: 13px; }
.topnav a { transition: color .2s ease; }
.topnav a:hover, .topnav a:focus-visible { color: var(--paper); }
.language-toggle { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; background: transparent; padding: 7px 12px; color: var(--muted); font: 11px var(--mono); letter-spacing: .04em; }
.language-option { transition: color .2s; }
.language-option.is-active { color: var(--acid); }
.language-divider { color: #555b66; }

.intro { padding: 96px 0 80px; max-width: 720px; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--acid); font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow-line { display: block; width: 34px; height: 1px; background: var(--acid); }
h1, h2, h3, p { margin: 0; }
h1 { margin-top: 22px; font-size: clamp(64px, 9.2vw, 132px); font-weight: 700; letter-spacing: -.085em; line-height: .89; }
h1 em { color: var(--acid); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.12em; }
.intro-copy { max-width: 360px; margin-top: 34px; color: var(--muted); font-size: 17px; line-height: 1.65; }

.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 18px; }
.panel { border: 1px solid var(--line); background: rgba(17, 21, 29, .72); border-radius: 6px; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; padding: 28px 30px 12px; }
.panel-kicker { color: var(--muted); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
h2 { margin-top: 7px; font-size: 24px; letter-spacing: -.04em; }
.live-label, .palette-count { color: var(--muted); font: 11px var(--mono); }
.live-label { display: flex; align-items: center; gap: 7px; padding-top: 5px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); }
.wheel-stage { padding: 20px 30px 24px; }
.color-wheel { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: conic-gradient(from -90deg, #ff5757, #ffcc52, #68de73, #38bdf8, #656eea, #dc63d9, #ff5757); box-shadow: 0 0 0 13px rgba(255,255,255,.02), 0 0 70px rgba(56,189,248,.12); touch-action: none; }
.color-wheel::after { content: ''; position: absolute; inset: 25%; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.wheel-marker { position: absolute; z-index: 2; width: 22px; height: 22px; top: 16%; left: 75%; border: 3px solid var(--paper); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(11,13,18,.5), 0 0 22px currentColor; transform: translate(-50%, -50%); pointer-events: none; }
.wheel-core { position: absolute; z-index: 3; inset: 35%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: var(--ink); font: 10px var(--mono); letter-spacing: .04em; transition: background .25s ease; }
.wheel-caption { display: flex; justify-content: space-between; margin-top: 18px; color: var(--muted); font: 11px var(--mono); }
.wheel-degree { color: var(--paper); }
.control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding: 24px 30px 30px; border-top: 1px solid var(--line); }
.range-control > span { display: flex; justify-content: space-between; margin-bottom: 11px; color: var(--muted); font: 11px var(--mono); }
output { color: var(--paper); }
input[type='range'] { width: 100%; height: 3px; accent-color: var(--acid); }

.palette-panel { display: flex; flex-direction: column; min-height: 100%; }
.palette-heading { padding-bottom: 28px; }
.palette-count { padding-top: 5px; }
.mode-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 30px 20px; border-bottom: 1px solid var(--line); }
.mode-tab { border: 1px solid var(--line); border-radius: 2px; background: transparent; padding: 8px 11px; color: var(--muted); font-size: 11px; transition: all .2s ease; }
.mode-tab:hover, .mode-tab:focus-visible { border-color: rgba(215,255,87,.5); color: var(--paper); }
.mode-tab.is-selected { border-color: var(--acid); background: var(--acid); color: var(--ink); }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 26px 30px 24px; }
.swatch { min-width: 0; }
.swatch-color { position: relative; height: 190px; border-radius: 3px; transition: transform .25s ease; }
.swatch:hover .swatch-color { transform: translateY(-5px); }
.copy-swatch { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; background: rgba(0,0,0,.18); color: inherit; opacity: 0; transition: opacity .2s; }
.swatch:hover .copy-swatch, .copy-swatch:focus-visible { opacity: 1; }
.copy-swatch svg { width: 13px; height: 13px; }
.swatch-label { display: block; margin-top: 10px; font: 11px var(--mono); color: var(--paper); }
.swatch-role { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-note { margin: auto 30px 30px; padding: 16px; border-left: 2px solid var(--cyan); background: rgba(255,255,255,.035); color: var(--muted); font-size: 13px; line-height: 1.55; }
.palette-note strong { color: var(--paper); font-weight: 600; }

.principles { padding: 150px 0 120px; }
.principles-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.principles-heading h2 { max-width: 400px; font-size: clamp(30px, 4vw, 54px); font-weight: 600; line-height: 1; }
.principle-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.principle-card { min-height: 195px; padding: 28px 28px 20px 0; border-right: 1px solid var(--line); }
.principle-card + .principle-card { padding-left: 28px; }
.principle-card:last-child { border-right: 0; }
.principle-number { color: var(--acid); font: 11px var(--mono); }
.principle-card h3 { margin-top: 30px; font-size: 20px; letter-spacing: -.04em; }
.principle-card p { max-width: 260px; margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.footer { display: flex; justify-content: space-between; padding: 22px 0 32px; border-top: 1px solid var(--line); color: var(--muted); font: 11px var(--mono); }

@media (max-width: 760px) {
  .topbar, main, .footer { width: min(100% - 32px, 560px); }
  .topbar { height: 76px; }
  .topnav { display: none; }
  .intro { padding: 70px 0 58px; }
  h1 { font-size: clamp(62px, 20vw, 108px); }
  .intro-copy { font-size: 16px; }
  .lab-grid { grid-template-columns: 1fr; }
  .color-wheel { width: min(100%, 300px); }
  .swatches { gap: 7px; padding-left: 18px; padding-right: 18px; }
  .panel-heading, .wheel-stage, .control-row { padding-left: 18px; padding-right: 18px; }
  .mode-tabs { padding-left: 18px; padding-right: 18px; }
  .swatch-color { height: 130px; }
  .palette-note { margin-left: 18px; margin-right: 18px; }
  .principles { padding: 100px 0 76px; }
  .principles-heading { display: block; }
  .principles-heading h2 { margin-top: 26px; }
  .principle-list { grid-template-columns: 1fr; }
  .principle-card, .principle-card + .principle-card { min-height: auto; padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .principle-card:last-child { border-bottom: 0; }
  .principle-card h3 { margin-top: 20px; }
  .footer { gap: 20px; flex-direction: column; }
}

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