/* ============ WAVE WEB v2 — the prototype's design system for wavekeyboard.com ============
   Liquid Glass dark · living wordmark (Baloo 2, spec palette) · scene-reactive nebula ·
   holo for premium (never gold, never violet→pink shorthand) · brand spring 0.32,0.72,0,1 ·
   reduced-motion kills every loop. Fonts load via <link> in each page head (no @import). */

:root{
  --bg:#08070b; --fg:rgba(255,255,255,0.94); --fg60:rgba(255,255,255,0.62);
  --fg55:rgba(255,255,255,0.55);            /* smallest legible label tier (5.1:1 on --bg) */
  --fg-dim:rgba(255,255,255,0.34);          /* decorative only — never body/label text */
  --hair:rgba(255,255,255,0.12); --glass:rgba(255,255,255,0.06);
  /* brand aurora hues (DESIGN-WAVE-BRAND) */
  --violet:#7a5cff; --pink:#ff5c9d; --blue:#2fb7ff; --mint:#3ce6b4; --ember:#ff8a3c;
  /* wordmark — fixed spec palette, lifted just enough for the dark bg */
  --wm-w:#ef3d9d; --wm-a:#f2662f; --wm-v:#aecb42; --wm-e:#22b6e8;
  --holo:conic-gradient(from calc(210deg + var(--ha,0deg)),#a9c9ff,#ffd7f4,#c9ffe8,#dff3c9,#a9c9ff);
  --spring:cubic-bezier(0.32,0.72,0,1); --ease:cubic-bezier(0.16,1,0.3,1);
}
@property --ha{ syntax:'<angle>'; inherits:true; initial-value:0deg; }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ background:var(--bg); color:var(--fg); font-family:'Outfit','Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:clip; }
::selection{ background:rgba(122,92,255,0.45); }
a, button, summary{ outline:none; }
:focus-visible{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px #8fb8ff !important; border-radius:6px; }

/* ---- scene-reactive nebula: soft gradient blobs (NO filter blur — gradients are the blur),
   screen blend, scene recoloring via wash crossfade + per-scene blob choreography ---- */
.nebula{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:var(--bg); }
.nebula i{ position:absolute; width:64vmax; height:64vmax; border-radius:50%; mix-blend-mode:screen;
  opacity:0.34; transition:opacity 1.6s ease, transform 2.2s var(--ease);
  animation:ndrift 26s ease-in-out infinite alternate; }
.nebula i:nth-child(1){ top:-24vmax; left:-18vmax; background:radial-gradient(circle,rgba(122,92,255,0.5),transparent 62%); }
.nebula i:nth-child(2){ top:-14vmax; right:-22vmax; background:radial-gradient(circle,rgba(255,92,157,0.42),transparent 62%); animation-delay:-7s; }
.nebula i:nth-child(3){ bottom:-26vmax; left:-14vmax; background:radial-gradient(circle,rgba(47,183,255,0.42),transparent 62%); animation-delay:-13s; }
.nebula i:nth-child(4){ bottom:-20vmax; right:-16vmax; background:radial-gradient(circle,rgba(60,230,180,0.4),transparent 62%); animation-delay:-19s; }
.nebula .wash{ position:absolute; inset:0; mix-blend-mode:screen; opacity:0; transition:opacity 1.6s ease; }
@keyframes ndrift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(4vmax,3vmax) scale(1.14); } }
/* scene choreography — the page IS a Wave theme: each scene relights the room */
body[data-scene="led"] .nebula i{ opacity:0.5; }
body[data-scene="led"] .nebula i:nth-child(1){ transform:translate(6vmax,10vmax) scale(1.2); }
body[data-scene="led"] .nebula i:nth-child(2){ transform:translate(-8vmax,6vmax) scale(1.25); }
body[data-scene="swipe"] .nebula i{ opacity:0.26; }
body[data-scene="swipe"] .nebula i:nth-child(4){ opacity:0.6; transform:translate(-6vmax,-8vmax) scale(1.3); }
body[data-scene="apps"] .nebula i{ opacity:0.3; }
body[data-scene="apps"] .nebula i:nth-child(2){ opacity:0.55; transform:translate(-6vmax,8vmax) scale(1.28); }
body[data-scene="fonts"] .nebula i{ opacity:0.2; }
body[data-scene="ai"] .nebula i{ opacity:0.3; }
body[data-scene="ai"] .nebula i:nth-child(3){ opacity:0.55; transform:translate(6vmax,-6vmax) scale(1.3); }
body[data-scene="finale"] .nebula i{ opacity:0.62; }
body[data-scene="finale"] .nebula i:nth-child(1){ transform:translate(10vmax,12vmax) scale(1.35); }
body[data-scene="finale"] .nebula i:nth-child(2){ transform:translate(-10vmax,8vmax) scale(1.3); }
body[data-scene="finale"] .nebula i:nth-child(3){ transform:translate(8vmax,-8vmax) scale(1.3); }
body[data-scene="finale"] .nebula i:nth-child(4){ transform:translate(-8vmax,-10vmax) scale(1.35); }

/* ---- living wordmark: Baloo 2, spec palette, wave bob + splat twinkle ---- */
.wm{ display:inline-flex; align-items:baseline; font-family:'Baloo 2','Outfit',sans-serif; font-weight:800;
  letter-spacing:-0.01em; text-decoration:none; color:var(--fg); }
.wm .splat{ color:var(--wm-w); margin-right:0.1em; display:inline-block; animation:splat 3.4s var(--ease) infinite; }
.wm .l{ display:inline-block; animation:wmbob 2.8s ease-in-out infinite; }
.wm .l:nth-of-type(2){ animation-delay:0.14s; } .wm .l:nth-of-type(3){ animation-delay:0.28s; }
.wm .l:nth-of-type(4){ animation-delay:0.42s; } .wm .l:nth-of-type(5){ animation-delay:0.56s; }
.wm .c1{ color:var(--wm-w); } .wm .c2{ color:var(--wm-a); } .wm .c3{ color:var(--wm-v); } .wm .c4{ color:var(--wm-e); }
@keyframes wmbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-0.12em); } }
@keyframes splat{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.16) rotate(16deg); } }

/* ---- chrome ---- */
.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:clamp(14px,3vw,28px);
  padding:14px clamp(18px,6vw,72px); background:rgba(8,7,11,0.72);
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,0.07); }
.nav .wm{ font-size:25px; margin-right:auto; }
.nav a:not(.wm){ color:var(--fg60); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:12px 4px; transition:color .2s; }
.nav a:not(.wm):hover{ color:var(--fg); }
.nav .cta{ color:#000 !important; background:rgba(255,255,255,0.94); padding:11px 18px; border-radius:999px;
  font-weight:800 !important; font-size:11.5px !important; letter-spacing:0.1em; white-space:nowrap; }
@media (max-width:520px){
  .nav a[href="#swipe"], .nav a[href="#themes"]{ display:none; }
  .nav .cta{ padding:10px 14px; font-size:10.5px !important; }
}

/* light-signature: the holo hairline that opens a scene (the ONE recurring brand gesture) */
.lightsig{ width:120px; height:2px; border-radius:2px; margin-bottom:20px;
  background:linear-gradient(90deg,transparent,#a9c9ff,#ffd7f4,#c9ffe8,transparent); }

.kick{ font-size:12px; letter-spacing:0.3em; font-weight:800; color:var(--fg55); text-transform:uppercase; }
h1{ font-size:clamp(40px,6vw,88px); font-weight:800; line-height:1.04; letter-spacing:-0.03em;
  margin:14px 0 18px; text-wrap:balance; }
.sub{ font-size:clamp(15px,1.7vw,19px); color:var(--fg60); line-height:1.7; font-weight:400; max-width:54ch;
  text-wrap:pretty; }

/* one pill system, two sizes */
.pill{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px;
  padding:14px 30px; border-radius:999px; background:rgba(255,255,255,0.94); color:#000;
  font-family:'Outfit'; font-weight:800; font-size:13.5px; letter-spacing:0.1em; text-decoration:none;
  border:none; cursor:pointer; transition:transform .3s var(--spring), box-shadow .3s; }
.pill:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(160,160,255,0.28); }
.pill:active{ transform:scale(0.97); }
.pill.ghost{ background:var(--glass); color:var(--fg); border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.pill.holo{ position:relative; border:2px solid transparent;
  background:linear-gradient(rgba(12,11,17,0.96),rgba(12,11,17,0.96)) padding-box, var(--holo) border-box;
  color:var(--fg); }
.pill svg{ width:16px; height:16px; flex:0 0 auto; }

/* glass panel — used sparingly, not as default chrome */
.panel{ background:var(--glass); border:1px solid var(--hair); border-radius:26px;
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09), 0 24px 60px rgba(0,0,0,0.45); }
.gicon{ width:46px; height:46px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  background:var(--holo); color:#141126; box-shadow:0 8px 22px rgba(140,160,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.45); }
.gicon svg{ width:22px; height:22px; }

/* ---- legal / article pages ---- */
.doc{ max-width:840px; margin:0 auto; padding:70px clamp(20px,5vw,40px) 110px; }
.doc header{ margin-bottom:44px; }
.doc h1{ font-size:clamp(30px,4.6vw,48px); }
.doc h2{ font-size:21px; font-weight:700; margin:44px 0 12px; letter-spacing:-0.01em;
  padding-top:8px; scroll-margin-top:90px; }
.doc h2::before{ content:''; display:block; width:52px; height:2px; border-radius:2px; margin-bottom:14px;
  background:linear-gradient(90deg,var(--violet),var(--pink),transparent); }
.doc p, .doc li{ font-size:15.5px; line-height:1.75; color:var(--fg60); font-weight:400; max-width:72ch; }
.doc p{ margin:10px 0; }
.doc ul{ margin:10px 0 10px 22px; }
.doc li{ margin:6px 0; }
.doc strong{ color:var(--fg); font-weight:600; }
.doc .meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.doc .meta s{ text-decoration:none; font-size:12px; font-weight:600; letter-spacing:0.06em; color:var(--fg60);
  padding:7px 14px; border-radius:999px; background:var(--glass); border:1px solid var(--hair); }
.doc a{ color:#8fb8ff; text-decoration:none; }
.doc a:hover{ text-decoration:underline; }
.notice{ margin:26px 0; padding:16px 20px; border-radius:16px; font-size:13.5px; line-height:1.6;
  background:rgba(255,138,60,0.07); border:1px solid rgba(255,138,60,0.3); color:var(--fg60); }

/* FAQ accordion (help page) */
details{ border-radius:18px; background:var(--glass); border:1px solid var(--hair); margin:12px 0;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); overflow:hidden; }
summary{ cursor:pointer; padding:18px 22px; font-size:16px; font-weight:600; list-style:none;
  display:flex; align-items:center; gap:12px; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:'+'; margin-left:auto; font-size:20px; font-weight:300; color:var(--fg55);
  transition:transform .3s var(--spring); }
details[open] summary::after{ transform:rotate(45deg); }
details .body{ padding:0 22px 20px 56px; }
details .body p, details .body li{ font-size:14.5px; }

/* ---- footer ---- */
footer{ margin-top:110px; border-top:1px solid rgba(255,255,255,0.07);
  padding:44px clamp(20px,6vw,72px) 60px; display:flex; flex-wrap:wrap; gap:28px; align-items:center; }
footer .wm{ font-size:21px; }
footer nav{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-left:auto; }
footer a{ color:var(--fg55); text-decoration:none; font-size:13px; font-weight:500; padding:10px 0; }
footer a:hover{ color:var(--fg); }
footer .co{ width:100%; font-size:12px; color:var(--fg55); }

/* ---- doc pages v2: reading progress, TL;DR, numbered legal sections, floating TOC ---- */
#readbar{ position:fixed; top:0; left:0; right:0; height:2.5px; z-index:60; transform-origin:0 50%;
  transform:scaleX(var(--rp,0)); pointer-events:none;
  background:linear-gradient(90deg,var(--violet),var(--pink),var(--blue),var(--mint)); }
.doc ::marker{ color:var(--mint); }
.tldr{ margin:30px 0 8px; padding:22px 24px 18px; border-radius:20px;
  background:var(--glass); border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.tldr h3{ font-size:12px; letter-spacing:0.26em; font-weight:800; color:var(--fg55);
  text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.tldr h3::before{ content:''; width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#a9c9ff,#ffd7f4,#c9ffe8); }
.tldr ul{ margin:0; padding:0; list-style:none; }
.tldr li{ position:relative; padding-left:22px; margin:8px 0; font-size:14.5px; line-height:1.6; color:var(--fg60); }
.tldr li::before{ content:'✦'; position:absolute; left:0; top:0; font-size:11px; color:var(--pink); }
.tldr li strong{ color:var(--fg); }
/* numbered sections — legal documents are a real ordered sequence */
article.legal{ counter-reset:sec; }
article.legal h2{ counter-increment:sec; display:flex; align-items:baseline; gap:14px; }
article.legal h2::before{ content:counter(sec, decimal-leading-zero); display:inline-flex; width:auto; height:auto;
  background:none; margin:0; flex:0 0 auto;
  font-family:'Baloo 2','Outfit',sans-serif; font-size:15px; font-weight:800; color:var(--wm-e);
  border-bottom:2px solid color-mix(in srgb, var(--wm-e) 50%, transparent); padding-bottom:2px; }
article.legal h2:nth-of-type(4n+2)::before{ color:var(--wm-w); border-color:color-mix(in srgb, var(--wm-w) 50%, transparent); }
article.legal h2:nth-of-type(4n+3)::before{ color:var(--wm-a); border-color:color-mix(in srgb, var(--wm-a) 50%, transparent); }
article.legal h2:nth-of-type(4n)::before{ color:var(--wm-v); border-color:color-mix(in srgb, var(--wm-v) 50%, transparent); }
/* floating table of contents (wide screens) */
.doctoc{ position:fixed; right:clamp(16px,3vw,44px); top:50%; transform:translateY(-50%); z-index:40;
  max-width:230px; padding:14px 16px; border-radius:18px;
  background:rgba(8,7,11,0.8); border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.doctoc b{ display:block; font-size:10px; letter-spacing:0.26em; font-weight:800; color:var(--fg55);
  text-transform:uppercase; margin-bottom:8px; }
.doctoc a{ display:block; padding:5px 0 5px 14px; font-size:12px; color:var(--fg55); text-decoration:none;
  border-left:0; position:relative; line-height:1.35; transition:color .2s; }
.doctoc a::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.18); transition:background .2s, box-shadow .2s; }
.doctoc a:hover{ color:var(--fg); }
.doctoc a.on{ color:var(--fg); }
.doctoc a.on::before{ background:var(--mint); box-shadow:0 0 8px var(--mint); }
@media (max-width:1259px){ .doctoc{ display:none; } }
/* back to top */
.totop{ position:fixed; right:clamp(16px,3vw,44px); bottom:26px; z-index:40; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--hair); background:rgba(8,7,11,0.85); color:var(--fg60);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .35s, transform .35s var(--spring), color .2s; }
.totop.show{ opacity:1; pointer-events:auto; transform:none; }
.totop:hover{ color:var(--fg); }

/* legacy demo keyboard (help page availability) — no background-position animation */
.herokbd{ display:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}
@media (max-width:720px){
  .nav{ gap:12px; }
  .nav a:not(.wm){ font-size:12px; padding:12px 2px; }
  footer nav{ margin-left:0; }
}