/* Rhyme: the Mac app's tokens (mac/Rhyme/Sources/Design/Tokens.swift). */
@font-face { font-family: Geist; src: url(/fonts/Geist-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url(/fonts/Geist-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Geist; src: url(/fonts/Geist-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/GeistMono-Regular.ttf) format("truetype"); font-display: swap; }

:root {
  --bg: #050409;
  --fg: #f4f2ee;
  --fg-2: rgb(244 242 238 / 0.62);
  --fg-3: rgb(244 242 238 / 0.45);
  --hair: rgb(255 255 255 / 0.10);
  --surface: rgb(255 255 255 / 0.035);
  --enter: cubic-bezier(0.16, 1, 0.3, 1);
  --exit: cubic-bezier(0.55, 0, 0.9, 0.3);
  --r-card: 20px;
  --pad-card: 24px;
  --r-pill: 999px;
  --spectrum: linear-gradient(90deg, #ff9fc9, #ffae66, #ffe27a, #6fd6c2, #8fb5ff, #b9a9ff);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.55 Geist, ui-sans-serif, system-ui, sans-serif; }
a { color: inherit; }
code, pre { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.86em; }
h1, h2, h3 { text-wrap: balance; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
p { text-wrap: pretty; margin: 0; }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ nav */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
       padding: 14px clamp(20px, 5vw, 56px); background: linear-gradient(var(--bg), rgb(5 4 9 / 0)); }
.wordmark { font: 400 11px "Geist Mono", monospace; letter-spacing: 0.32em; color: var(--fg-3); text-decoration: none; }
.nav nav { display: flex; gap: 4px; }
.nav nav a { padding: 10px 12px; border-radius: var(--r-pill); color: var(--fg-2); text-decoration: none; font-size: 14px;
             transition: color 160ms ease, background-color 160ms ease; }
.nav nav a:hover { color: var(--fg); background: var(--surface); }

/* ----------------------------------------------------------------- hero */
.hero { min-height: min(100svh, 900px); display: grid; grid-template-rows: 1fr auto; align-content: center; gap: 40px; padding: 24px clamp(20px, 5vw, 56px) 72px; }
.stage { display: grid; place-items: center; }
.lyrics { width: min(980px, 100%); display: grid; gap: 0.22em; font-size: clamp(24px, 3.5vw, 44px); font-weight: 600;
          letter-spacing: -0.025em; line-height: 1.12; }
.line { color: rgb(244 242 238 / 0.16); transition: color 500ms var(--enter), opacity 500ms var(--enter), filter 500ms var(--enter), translate 500ms var(--enter);
        filter: blur(1.5px); opacity: 0.7; translate: 0 0; }
.line.near { opacity: 0.9; filter: blur(0.6px); }
.line.active { opacity: 1; filter: none; }
.line.done { opacity: 0.45; filter: blur(1px); }
@media (min-width: 900px) { .lyrics { width: max-content; max-width: 100%; } .line { white-space: nowrap; } }
.word { position: relative; display: inline-block; white-space: pre; color: rgb(244 242 238 / 0.22); }
/* The sung part: the word's colour (its mood, or off-white) revealed left to right. */
.word::after { content: attr(data-text); position: absolute; inset: 0; white-space: pre; color: var(--c, var(--fg));
               clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }

.hero-copy { display: grid; justify-items: center; text-align: center; gap: 18px; }
.hero h1 { font-size: clamp(28px, 3.6vw, 40px); }
.lede { max-width: 560px; color: var(--fg-2); }
.actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.enter { animation: enter 900ms var(--enter) both; animation-delay: calc(var(--i) * 70ms + 250ms); }
@keyframes enter { from { opacity: 0; translate: 0 10px; filter: blur(6px); } }

/* ---------------------------------------------------------------- pills */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0;
        border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font: 500 15px Geist, sans-serif;
        text-decoration: none; cursor: pointer; transition: scale 160ms var(--enter), background-color 160ms ease, opacity 160ms ease; }
.pill:hover { background: #fff; }
.pill:active { scale: 0.96; }
.pill:disabled { opacity: 0.5; cursor: progress; }
.pill-muted { background: var(--surface); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--hair); cursor: default; }
.pill-muted:hover { background: var(--surface); }
.pill-muted:active { scale: 1; }
.pill-small { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* ------------------------------------------------------------- sections */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
            padding: 0 clamp(20px, 5vw, 56px); max-width: 1120px; margin: 0 auto 96px; }
.feature { padding: var(--pad-card); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.feature h2 { font-size: 18px; margin: 14px 0 8px; }
.feature p { color: var(--fg-2); font-size: 15px; }
.swatch { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 16px var(--c); }

.block { max-width: 1120px; margin: 0 auto 104px; padding: 0 clamp(20px, 5vw, 56px); scroll-margin-top: 72px; }
.block-head { display: grid; gap: 8px; margin-bottom: 24px; }
.block-head h2 { font-size: clamp(24px, 2.6vw, 32px); }
.block-head p { color: var(--fg-2); max-width: 620px; }

.code { border-radius: var(--r-card); background: rgb(255 255 255 / 0.025); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.code-bar { display: flex; gap: 12px; align-items: center; padding: 14px var(--pad-card); box-shadow: inset 0 -1px 0 var(--hair); color: var(--fg-3); }
.code-bar span { font: 500 11px "Geist Mono", monospace; letter-spacing: 0.12em; color: #6fd6c2; }
.code pre { margin: 0; padding: 20px var(--pad-card); overflow-x: auto; color: var(--fg-2); line-height: 1.6; }
.code pre.response { box-shadow: inset 0 1px 0 var(--hair); color: var(--fg-3); }

.table { border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; margin-bottom: 16px; }
.row { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 20px; padding: 16px var(--pad-card); box-shadow: inset 0 -1px 0 var(--hair); }
.row:last-child { box-shadow: none; }
.row.head { color: var(--fg-3); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.row span { color: var(--fg-2); }
.row > code { color: var(--fg); }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; gap: 6px; } }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card { padding: var(--pad-card); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.card h3 { font-size: 16px; margin-bottom: 14px; }
.facts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.facts li { display: flex; justify-content: space-between; gap: 16px; color: var(--fg-2); }
.facts b { font-weight: 500; color: var(--fg); text-align: right; }
.fine { color: var(--fg-3); font-size: 13px; }

.palette { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.palette span { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill);
                background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); font: 400 12px "Geist Mono", monospace; color: var(--fg-2); }
.palette i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

.keyform { display: grid; gap: 16px; max-width: 520px; }
.keyform label { display: grid; gap: 8px; font-size: 14px; color: var(--fg-2); }
.keyform i { font-style: normal; color: var(--fg-3); }
.keyform input { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: rgb(255 255 255 / 0.05);
                 box-shadow: inset 0 0 0 1px var(--hair); color: var(--fg); font: 400 15px Geist, sans-serif; outline: none;
                 transition: box-shadow 160ms ease; }
.keyform input:focus { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.32); }
.keyform .pill { justify-self: start; }
.status:empty { display: none; }
.keyresult { display: grid; gap: 10px; max-width: 520px; margin-top: 16px; animation: enter 600ms var(--enter) both; }
.keyline { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-radius: 16px;
           background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--hair); }
.keyline code { overflow-wrap: anywhere; color: var(--fg); }

.foot { display: flex; justify-content: space-between; gap: 16px; padding: 32px clamp(20px, 5vw, 56px) 48px; color: var(--fg-3);
        font-size: 13px; box-shadow: inset 0 1px 0 var(--hair); }

@media (prefers-reduced-motion: reduce) {
  .enter, .keyresult { animation: none; }
  .line { transition: none; }
}