/* Keyripple — keyripple.app
   Layout: one column of full-width bands; the live keyboard is the only loud thing on the page.
   Everything else is warm near-black, cream type, one orange accent; the RGB spectrum lives on the keys only. */
:root {
  --bg: #141413;
  --bg-2: #1C1C1A;
  --panel: #232321;
  --panel-2: #2C2C29;
  --line: #34342F;
  --fg: #EFEBE2;
  --fg-2: #A8A49B;
  --accent: #FF7A45;
  --accent-ink: #1C1C1A;
  --lcd: #7CF29A;
  --lcd-bg: #0E140F;
  --cap: #2E2E2B;
  --ground: #1A1A18;
  --legend: #E9E6DF;
  --key-r: 7px;
  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --max: 1160px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: 17px; line-height: 1.55;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7.2vw, 5.6rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--fg-2); max-width: 36em; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.band { padding-block: clamp(64px, 9vw, 128px); }
.band + .band { border-top: 1px solid var(--line); }
.mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--fg-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; min-height: 52px; padding: 0 22px; border-radius: 14px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform .18s ease, box-shadow .3s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 34px rgba(255, 122, 69, .35); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn.ghost:hover { box-shadow: none; border-color: var(--fg-2); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: .92rem; border-radius: 11px; }
.btn .apple { width: 18px; height: 18px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.nav .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav nav { display: flex; gap: 22px; margin-left: 12px; }
.nav nav a { text-decoration: none; color: var(--fg-2); font-size: .95rem; }
.nav nav a:hover { color: var(--fg); }
.nav .cta { margin-left: auto; }
@media (max-width: 760px) { .nav nav { display: none; } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px); position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero h1 .lit { position: relative; display: inline-block; }
.hero h1 .lit::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: 0.02em; height: 0.18em; border-radius: 999px; background: linear-gradient(90deg, #FF3B3B, #FF9B2F, #FFE23B, #4ADE80, #3DE3FF, #4D7BFF, #B347FF, #FF4FD8); opacity: .9; z-index: -1; filter: blur(1px); animation: hueShift 9s linear infinite; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--fg-2); font-size: .92rem; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--lcd); display: inline-block; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero { padding-bottom: 40px; } }
.glow-bg { position: absolute; inset: auto -20% -40% auto; width: 70vw; max-width: 900px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,122,69,.18), rgba(179,71,255,.10) 45%, transparent 70%); pointer-events: none; animation: drift 14s ease-in-out infinite alternate; }

/* phone frame */
.phone { position: relative; width: min(100%, 390px); margin: 0 auto; aspect-ratio: 390 / 720; border-radius: 44px; background: #0B0B0C; border: 1px solid #2A2A2E; box-shadow: 0 40px 100px rgba(0,0,0,.55), inset 0 0 0 6px #151517; overflow: hidden; display: flex; flex-direction: column; }
.phone .chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 56px 16px 12px; background: #111113; min-height: 0; }
.phone .who { position: absolute; top: 20px; left: 0; right: 0; text-align: center; font-size: .78rem; color: #8E8C86; }
.bubble { max-width: 78%; padding: 9px 13px; border-radius: 18px; font-size: .95rem; line-height: 1.35; }
.bubble.them { align-self: flex-start; background: #2A2A2D; border-bottom-left-radius: 6px; }
.bubble.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); font-weight: 600; border-bottom-right-radius: 6px; position: relative; }
.bubble.me.pop { animation: pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.composer { min-height: 40px; border-radius: 20px; border: 1px solid #333338; padding: 0 14px; display: flex; align-items: center; font-size: .95rem; color: var(--fg); overflow: hidden; white-space: nowrap; }
.composer .caret { width: 2px; height: 1.1em; background: #3DE3FF; margin-left: 2px; animation: blink 1s steps(1) infinite; }
.strip { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: #141413; border-top: 1px solid #222224; font-size: .8rem; }
.strip .k-badge { width: 28px; height: 28px; border-radius: 8px; background: #34342F; box-shadow: inset 0 -2px 0 var(--accent); display: grid; place-items: center; font-weight: 700; font-size: .78rem; color: var(--accent); }
.strip .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; background: #262624; font-weight: 600; }
.strip .chip i { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, #3DE3FF, #4D7BFF, #B347FF); }
.strip .combo { margin-left: auto; font-family: var(--mono); font-size: .7rem; color: #FFC24D; background: #2A1A10; padding: 3px 7px; border-radius: 7px; animation: breathe 2.6s ease-in-out infinite; }

/* ---------- the keyboard ---------- */
.kb { background: var(--ground); padding: 8px 4px 10px; display: flex; flex-direction: column; gap: 8px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.kb .sugg { display: flex; justify-content: space-around; font-size: .9rem; color: var(--legend); opacity: .85; padding: 0 10px 2px; }
.kb .row { display: flex; gap: 6px; }
.kb .row.r1 { padding: 0 18px; }
.kb .k { --p: 0; --c: #FF7A45; flex: 1 1 0; min-width: 0; height: 44px; padding: 0; border: 0; border-radius: var(--key-r); font-family: var(--body); font-weight: 500; font-size: 17px; color: var(--legend);
  background: color-mix(in srgb, var(--c) calc(var(--p) * 100%), var(--cap));
  box-shadow: 0 0 calc(var(--p) * 18px) color-mix(in srgb, var(--c) calc(var(--p) * 100%), transparent), inset 0 -2px 0 color-mix(in srgb, var(--c) 45%, transparent);
  transition: background .08s linear; }
.kb .k.w { flex-grow: 1.45; font-size: 14px; }
.kb .k.mod { flex-grow: 1.25; font-size: 13px; }
.kb .k.globe { flex-grow: 1.1; }
.kb .k.space { flex-grow: 4.5; font-size: 14px; }
.kb .k.ret { flex-grow: 2.15; font-size: 14px; }
.kb .k:active { transform: translateY(1px); }
.kb .k svg { width: 18px; height: 18px; margin: 0 auto; }
.kb.lit .k { color: var(--legend); }

/* ---------- try it ---------- */
.try .wrap { display: grid; grid-template-columns: 1fr; gap: 28px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg-2); font-size: .92rem; transition: all .2s ease; }
.chip-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 600; }
.chip-btn .sw { width: 14px; height: 14px; border-radius: 4px; }
.hint { font-size: .92rem; color: var(--fg-2); }
.hint kbd { font-family: var(--mono); font-size: .8rem; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
.try-board { width: min(100%, 560px); margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.try-board .kb { padding: 12px 8px 14px; }
.try-board .kb .k { height: clamp(44px, 9vw, 56px); font-size: clamp(16px, 3vw, 20px); border-radius: 9px; }
@media (max-width: 480px) { .try-board .kb .k { height: 44px; font-size: 16px; } }

/* ---------- story (scrollytelling) ---------- */
.story .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: start; }
.steps { display: flex; flex-direction: column; }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-block: 8vh; opacity: .35; transition: opacity .5s ease; }
.step.on { opacity: 1; }
.step .tag { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--accent); }
.step h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; }
.step p { color: var(--fg-2); max-width: 30em; }
.sticky { position: sticky; top: 84px; }
.sticky .phone { aspect-ratio: 390 / 640; }
@media (max-width: 860px) {
  /* on phones the demo keyboard docks to the bottom of the screen, like a real one, while the steps scroll above it */
  .story .wrap { grid-template-columns: 1fr; gap: 0; }
  .sticky { position: sticky; bottom: 0; z-index: 3; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter-r)); }
  .sticky .phone { aspect-ratio: auto; height: auto; width: 100%; max-width: none; border-radius: 22px 22px 0 0; border-bottom: 0; box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
  .sticky .phone .chat { padding: 12px 16px 10px; min-height: 0; gap: 6px; }
  .sticky .phone .chat .bubble.them { display: none; }
  .sticky .phone .who { display: none; }
  .sticky .kb .sugg { display: none; }
  .sticky .kb .k { height: 40px; font-size: 16px; }
  .sticky .composer { min-height: 36px; font-size: .9rem; }
  .step { min-height: 46vh; padding-block: 5vh 8vh; justify-content: flex-start; }
  .step:first-child { padding-top: 0; }
}

/* ---------- catalog numbers ---------- */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.num { padding: 22px 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.num b { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.num span { color: var(--fg-2); font-size: .95rem; }
.num .strip-ex { display: flex; gap: 3px; margin-top: 6px; }
.num .strip-ex i { flex: 1; height: 8px; border-radius: 2px; background: var(--c); animation: breathe 2.8s ease-in-out infinite; }
@media (max-width: 760px) { .numbers { grid-template-columns: 1fr 1fr; } }
.marquee { overflow: hidden; margin-top: 28px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee ul { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; width: max-content; animation: marquee 48s linear infinite; }
.marquee.rev ul { animation-direction: reverse; animation-duration: 56s; }
.marquee li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); font-size: .92rem; white-space: nowrap; }
.marquee li i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); }
.marquee:hover ul { animation-play-state: paused; }

/* ---------- two-column feature bands ---------- */
.feature .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.feature.flip .wrap > :first-child { order: 2; }
.feature .copy { display: flex; flex-direction: column; gap: 18px; }
.feature .copy ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--fg-2); }
.feature .copy li { display: flex; gap: 12px; align-items: flex-start; }
.feature .copy li::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: .55em; }
@media (max-width: 860px) { .feature .wrap { grid-template-columns: 1fr; } .feature.flip .wrap > :first-child { order: 0; } }

/* sounds */
.sound-panel { border-radius: 20px; background: var(--panel); border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.packs { display: flex; flex-direction: column; gap: 8px; }
.pack { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid transparent; transition: border-color .25s; text-align: left; width: 100%; }
.pack[aria-pressed="true"] { border-color: var(--pc); }
.pack .wave { flex: 0 0 58px; height: 26px; display: flex; align-items: center; gap: 2px; }
.pack .wave i { width: 2px; border-radius: 1px; background: #4A4A45; height: var(--h); }
.pack[aria-pressed="true"] .wave i { background: var(--pc); animation: bar 1.1s ease-in-out infinite; animation-delay: var(--d); transform-origin: center; }
.pack .name { font-weight: 600; font-size: .95rem; }
.pack .desc { color: var(--fg-2); font-size: .82rem; }
.pack .use { margin-left: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--fg-2); }
.pack[aria-pressed="true"] .use { color: var(--pc); }
.lcd { background: var(--lcd-bg); border: 1px solid #2A3A2C; border-radius: 12px; padding: 12px 14px; font-family: var(--mono); color: var(--lcd); font-size: .82rem; letter-spacing: .04em; display: flex; justify-content: space-between; gap: 12px; position: relative; overflow: hidden; }
.lcd::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(124,242,154,.08), transparent); animation: scan 3.2s linear infinite; pointer-events: none; }

/* AI */
.ai-panel { border-radius: 20px; background: var(--panel); border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.prompt { min-height: 84px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); padding: 14px; font-size: 1.05rem; line-height: 1.4; }
.prompt .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); vertical-align: -0.15em; margin-left: 2px; animation: blink 1s steps(1) infinite; }
.takes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.take { padding: 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; transition: border-color .3s; }
.take.on { border-color: var(--accent); }
.take .st { display: flex; gap: 3px; }
.take .st i { flex: 1; height: 10px; border-radius: 2px; }
.take b { font-size: .9rem; }
.take span { font-size: .78rem; color: var(--fg-2); }
@media (max-width: 480px) { .takes { grid-template-columns: 1fr; } }

/* text styles */
.styler { border-radius: 20px; background: var(--panel); border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.styler input { width: 100%; min-height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); padding: 0 16px; font: inherit; font-size: 1.05rem; }
.styler input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.style-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.style-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px 8px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid transparent; text-align: left; width: 100%; min-width: 0; }
.style-row:hover { border-color: var(--line); }
.style-row .sample { flex: 1; min-width: 0; font-size: 1.15rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-row .nm { font-size: .72rem; color: var(--fg-2); font-family: var(--mono); letter-spacing: .05em; flex: 0 0 auto; }
.style-row .copy { flex: 0 0 auto; font-size: .8rem; font-weight: 600; color: var(--accent); }
@media (max-width: 640px) { .style-list { grid-template-columns: 1fr; } }

/* looks */
.looks { display: flex; flex-wrap: wrap; gap: 10px; }
.look { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg-2); }
.look i { width: 26px; height: 26px; border-radius: var(--r, 7px); background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); }
.look[aria-pressed="true"] { border-color: var(--accent); color: var(--fg); }

/* share */
.link-card { border-radius: 18px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.link-card .top { padding: 16px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.link-card .top b { font-size: 1rem; }
.link-card .top span { color: var(--fg-2); font-size: .85rem; }
.link-card .url { font-family: var(--mono); font-size: .82rem; color: var(--lcd); padding: 10px 18px; background: var(--lcd-bg); }
.link-card .kb { padding: 10px 6px 12px; }
.formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.formats span { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--fg-2); }

/* privacy */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.promise div { padding: 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.promise b { font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.01em; }
.promise p { color: var(--fg-2); font-size: .95rem; }
@media (max-width: 760px) { .promise { grid-template-columns: 1fr; } }

/* pricing */
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan { padding: 26px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.plan.free { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 20px 60px rgba(255,122,69,.08); }
.plan .amount { font-family: var(--display); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.plan .amount small { font-size: 1rem; font-weight: 500; color: var(--fg-2); letter-spacing: 0; }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; color: var(--fg-2); }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: "✓"; color: var(--lcd); font-weight: 700; }
@media (max-width: 700px) { .price { grid-template-columns: 1fr; } }

/* faq */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; font-weight: 600; font-size: 1.05rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--display); font-size: 1.5rem; color: var(--fg-2); transition: transform .25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .a { padding: 0 0 20px; color: var(--fg-2); max-width: 46em; }

/* final cta */
.final { text-align: center; position: relative; overflow: hidden; }
.final .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.final .glow-bg { inset: auto auto -60% 50%; transform: translateX(-50%); width: 90vw; }

/* footer */
footer { border-top: 1px solid var(--line); padding-block: 36px 48px; color: var(--fg-2); font-size: .92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
footer a { text-decoration: none; }
footer a:hover { color: var(--fg); }
footer .copy { margin-left: auto; }
.email { font-family: var(--mono); font-size: .85rem; color: var(--fg); background: var(--panel); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; display: inline-flex; gap: 8px; align-items: center; }
.email button { border: 0; background: transparent; color: var(--accent); font-weight: 600; padding: 0; font-size: .82rem; }

/* modal */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-left, 0px)); background: rgba(8,8,7,.7); backdrop-filter: blur(6px); }
.modal .box { width: min(100%, 440px); border-radius: 22px; background: var(--panel); border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 14px; animation: pop .35s cubic-bezier(.2,.8,.2,1) both; }
.modal h3 { font-size: 1.5rem; }
.modal input { min-height: 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); padding: 0 14px; font: inherit; width: 100%; }
.modal .row { display: flex; gap: 10px; }
.modal .msg { font-size: .92rem; color: var(--fg-2); min-height: 1.4em; }
.modal .close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--fg-2); font-size: 1.3rem; }
.modal .box { position: relative; }

/* reveal */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---------- motion ---------- */
@keyframes blink { 50% { opacity: 0; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes scan { from { transform: translateY(-120%); } to { transform: translateY(260%); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes hueShift { to { filter: blur(1px) hue-rotate(360deg); } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-6%, 8%); } }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; animation: burst .9s cubic-bezier(.2,.7,.3,1) forwards; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .marquee ul { animation: none; }
}

/* /k/<CODE>: the shared creation's byline and parts */
.share-by { display: flex; align-items: center; gap: 10px; margin: -8px 0 0; color: var(--fg-2); font-size: 1rem; }
.share-by:not(:has(span:not([hidden]))) { display: none; }
.share-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.share-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
.share-parts li[hidden], .share-parts[hidden], .share-dot[hidden] { display: none; }
/* A look's art on the demo keyboard (share page): background art, caps by material, character figure */
.try-board { position: relative; }
.kb.art { background: var(--ground) var(--bg-img, none) center / cover no-repeat; }
.kb.art .k { color: var(--legend); }
.kb.art[data-material="outline"] .k { box-shadow: 0 0 calc(var(--p) * 18px) color-mix(in srgb, var(--c) calc(var(--p) * 100%), transparent), inset 0 0 0 1.5px var(--accent-k); }
.kb.art[data-material="frosted"] .k { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kb.art[data-material="glass"] .k, .kb.art[data-material="light-glass"] .k { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.kb.art .sugg { text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.kb-figure { position: absolute; bottom: 0; right: 2%; height: 48%; width: auto; pointer-events: none; z-index: 2; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.kb-figure.left { right: auto; left: 2%; }
/* A catalog look: the app-rendered keyboard image, the light laid over its key rectangles */
.try-board .kb.kbimg { position: relative; display: block; padding: 0; background: #000; }
.try-board .kb.kbimg .sugg { display: none; }
.try-board .kb.kbimg .row { display: contents; }
.kb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.try-board .kb.kbimg .k { position: absolute; height: auto; padding: 0; border-radius: 22%/16%; color: transparent; font-size: 0;
  background: color-mix(in srgb, var(--c) calc(var(--p) * 62%), transparent);
  box-shadow: 0 0 calc(var(--p) * 22px) color-mix(in srgb, var(--c) calc(var(--p) * 100%), transparent);
  mix-blend-mode: screen; -webkit-backdrop-filter: none; backdrop-filter: none; }
.try-board .kb.kbimg .k svg { display: none; }
/* Borrowed keycap art (Look Studio capsFrom): pieces drawn with border-image; the light glows round them */
.kb.capart .k { background: transparent; border: 0 solid transparent; border-radius: 0; box-shadow: 0 0 calc(var(--p) * 20px) color-mix(in srgb, var(--c) calc(var(--p) * 100%), transparent); -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.share-note { margin: -10px 0 0; font-size: .74rem; }
.share-note[hidden] { display: none; }
/* Look Studio cap shapes (GenericCaps.path): letter keys take the shape; wide keys fall back to a pill like the app */
.kb.art[data-shape="pill"] .k, .kb.art[data-shape="circle"] .k, .kb.art[data-shape="bubble"] .k, .kb.art[data-shape="heart"] .k,
.kb.art[data-shape="blob"] .k, .kb.art[data-shape="leaf"] .k, .kb.art[data-shape="gem"] .k, .kb.art[data-shape="tilt"] .k { border-radius: 999px; }
.kb.art .k:is(.w, .mod, .space, .ret, .globe) { clip-path: none; }
.kb.art[data-shape="circle"] .k:not(.w, .mod, .space, .ret, .globe) { border-radius: 0; clip-path: circle(closest-side); }
.kb.art[data-shape="bubble"] .k:not(.w, .mod, .space, .ret, .globe) { border-radius: 42%; }
.kb.art[data-shape="blob"] .k:not(.w, .mod, .space, .ret, .globe) { border-radius: 52% 48% 46% 54% / 44% 56% 44% 56%; }
.kb.art[data-shape="leaf"] .k:not(.w, .mod, .space, .ret, .globe) { border-radius: 48% 3px 48% 3px; }
.kb.art[data-shape="heart"] .k:not(.w, .mod, .space, .ret, .globe) { border-radius: 0; clip-path: polygon(50% 100%, 8% 58%, 0 32%, 6% 12%, 25% 4%, 42% 10%, 50% 22%, 58% 10%, 75% 4%, 94% 12%, 100% 32%, 92% 58%); }
.kb.art[data-shape="gem"] .k:not(.w, .mod, .space, .ret, .globe) { border-radius: 0; clip-path: polygon(26% 0, 74% 0, 100% 20%, 100% 80%, 74% 100%, 26% 100%, 0 80%, 0 20%); }
.kb.art[data-shape="hex"] .k { border-radius: 0; clip-path: polygon(28% 0, 72% 0, 100% 50%, 72% 100%, 28% 100%, 0 50%); }
.kb.art[data-shape="hex"] .k:is(.w, .mod, .space, .ret, .globe) { clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.kb.art[data-shape="tag"] .k { border-radius: 0 4px 4px 0; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
.kb.art[data-shape="ticket"] .k { border-radius: 4px; -webkit-mask: radial-gradient(circle at 0 50%, transparent 14%, #000 15%) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 14%, #000 15%) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent 14%, #000 15%) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 14%, #000 15%) right / 51% 100% no-repeat; }
.kb.art[data-shape="tilt"] .k:not(.w, .mod, .space, .ret, .globe) { border-radius: 7px; transform: rotate(-5deg) scale(.94); }
.kb.art[data-shape="square"] .k { border-radius: 2px; }
.kb.art[data-shape="flat"] .k { border-radius: 4px; box-shadow: none; }
.kb.art[data-shape="mech"] .k, .kb.art[data-shape="bevel"] .k { box-shadow: 0 0 calc(var(--p) * 18px) color-mix(in srgb, var(--c) calc(var(--p) * 100%), transparent), inset 0 -4px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.18); }
.kb.art[data-shape="inset"] .k { box-shadow: 0 0 calc(var(--p) * 18px) color-mix(in srgb, var(--c) calc(var(--p) * 100%), transparent), inset 0 2px 4px rgba(0,0,0,.35); }
/* The look's designed tap: sprites flying out of the pressed key (the cap's own motion is a Web Animation) */
.tsp { position: absolute; z-index: 3; pointer-events: none; line-height: 1; border-radius: 50%; will-change: transform, opacity; }
.tsp-pixels, .tsp-confetti { border-radius: 1px; }
.tsp-ring, .tsp-bubbles { background: transparent !important; border: 2px solid currentColor; }
.tsp-sparks, .tsp-stars, .tsp-hearts, .tsp-notes, .tsp-leaves, .tsp-petals, .tsp-snow, .tsp-bolts, .tsp-drips { border-radius: 0; text-shadow: 0 0 6px currentColor; }

/* at a glance (#about) */
.lede a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.facts div { padding: 20px 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.facts dt { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.facts dd { margin: 0; color: var(--fg); font-size: .98rem; line-height: 1.45; }
.facts dd a { color: var(--accent); text-decoration: none; }
.facts dd a:hover { text-decoration: underline; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }