/* ===================================================================
   Melo — shared design system  ("Expressive Pop")
   Canonical tokens + base typography + components + signature elements +
   motion. Served to every app at /engine/melo.css. UI only — no logic.
   Spec: DESIGN.md. Pair with the Google Fonts <link> (Fraunces/Space Mono/Inter).
=================================================================== */
:root {
  /* ---- palette ---- */
  --cream:#FBF2E4; --ink:#2A1A0E;
  --orange:#FF5A1F; --orange2:#F0531A; --orange-soft:#FF8A4D;
  --cobalt:#1F3DFF; --purple:#7A3FF2; --muted:#8a7a64;
  --card:#FFFFFF; --line:#EFE3CF; --line-2:#E6DECF;
  --sub:#6E5D49; --label:#9A8A74; --eyebrow:#C2511F;
  --warm:#FFFAF3; --surface-2:#FBF2E8;
  --press:#FFE9DC; --hover:#FFF3EB;
  /* compatibility aliases used by the teaching app components */
  --orange-d:#F0531A; --orange-l:#FFD9C2; --orange-bg:#FFF3EB; --bg:#FBF2E4;
  /* ---- status ---- */
  --green:#46b34d; --green-d:#369a3d; --green-bg:#e8f6e4;
  --red:#e5484d; --red-d:#cf3b40; --red-bg:#fdeceb;
  --blue:#1F3DFF; --blue-d:#1a34dd; --gold:#e8a91e; --gold-d:#c98f12;
  /* ---- shape ---- */
  --r-sm:13px; --r-md:16px; --r-lg:22px; --r-xl:24px; --r-pill:999px;
  --sp:22px;
  /* one shared content width + standard page padding across the app */
  --page-w:1080px; --page-pad:28px;
  /* ---- shadow ---- */
  --soft:0 26px 56px rgba(120,60,10,.20);
  --shadow:0 3px 0 rgba(120,80,20,.10);
  --lift:0 14px 38px rgba(150,90,20,.16);
  --site:0 30px 70px rgba(0,0,0,.22);
  /* ---- motion ---- */
  --spring:cubic-bezier(.2,1.35,.35,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  /* ---- type ---- */
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --t-xs:12px; --t-sm:14.5px; --t-md:17px; --t-lg:22px; --t-xl:30px; --t-2xl:40px;
}

/* ---- SVG icons (shared sprite injected by melo-header.js; symbols #i-*) ---- */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-0.12em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.fill{fill:currentColor;stroke:none}

/* ---- base typography helpers ---- */
.serif{font-family:var(--font-serif)}
.display{font-family:var(--font-serif);font-weight:600;letter-spacing:-.02em;line-height:1.02}
.display em{font-style:italic;color:var(--orange)}
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--eyebrow)}
.mono-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--label)}
.muted{color:var(--muted)}

/* ---- logo / wordmark ---- */
.logo{font-family:var(--font-serif);font-weight:900;font-size:26px;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:7px;color:var(--ink);cursor:pointer;text-decoration:none}
.logo .d{width:9px;height:9px;border-radius:50%;background:var(--orange);margin-top:11px;animation:pulse 2.4s ease-in-out infinite}
.logo-wave{display:inline-flex;align-items:flex-end;gap:2px;height:18px;margin-right:2px}
.logo-wave i{width:3px;border-radius:2px;background:var(--orange);animation:eq 1.1s ease-in-out infinite}
.logo-wave i:nth-child(2){animation-delay:.15s;background:var(--cobalt)}
.logo-wave i:nth-child(3){animation-delay:.3s}
.logo-wave i:nth-child(4){animation-delay:.45s;background:var(--purple)}

/* ---- buttons ---- */
.btn{font-family:var(--font-ui);font-size:14px;font-weight:600;padding:12px 22px;border-radius:var(--r-pill);border:none;cursor:pointer;transition:transform .15s var(--ease-out),box-shadow .15s,background .15s,border-color .15s;display:inline-flex;align-items:center;gap:8px;line-height:1}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{transform:translateY(-2px)}
.btn-cobalt{background:var(--cobalt);color:#fff;box-shadow:0 4px 14px rgba(31,61,255,.30)}
.btn-cobalt:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,61,255,.40)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 4px 14px rgba(255,90,31,.32)}
.btn-orange:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,90,31,.42)}
.btn-ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--orange);background:var(--hover)}
.link-italic{font-family:var(--font-serif);font-style:italic;font-size:15.5px;color:var(--ink);cursor:pointer;border-bottom:1.5px solid var(--ink);padding-bottom:1px;text-decoration:none;display:inline-block;transition:transform .15s var(--ease-out)}
.link-italic:hover{transform:translateY(-2px);color:var(--orange);border-color:var(--orange)}

/* ---- cards / chips ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.card-lift{box-shadow:var(--soft)}
.hover-lift{transition:transform .15s var(--ease-out),box-shadow .15s}
.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.chip{border-radius:var(--r-sm);padding:10px 8px;text-align:center;background:var(--cream);border:1px solid var(--line)}
.chip b{display:block;font-family:var(--font-serif);font-size:15px;font-weight:700;margin-bottom:1px;color:var(--ink)}
.chip span{font-family:var(--font-mono);font-size:8.5px;color:var(--label);text-transform:uppercase;letter-spacing:.03em}
.chip.c0 b{color:var(--orange)} .chip.c1 b{color:var(--cobalt)} .chip.c2 b{color:var(--purple)}

/* ---- live indicator + waveform ---- */
.live{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);display:inline-flex;align-items:center;gap:7px}
.wave{display:inline-flex;align-items:flex-end;gap:2.5px;height:16px}
.wave i{width:3px;border-radius:2px;background:var(--orange);display:block;height:5px;animation:eq 1.1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}
.wave i:nth-child(4){animation-delay:.45s}.wave i:nth-child(5){animation-delay:.6s}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:pulse 2.4s ease-in-out infinite;display:inline-block}

/* ---- floating blob motif ---- */
.blob{position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--orange-soft),#EF4F18);z-index:0;opacity:.9;animation:float 9s ease-in-out infinite;pointer-events:none}
.blob.cobalt{background:var(--cobalt);opacity:.12;width:130px;height:130px;animation:float 11s ease-in-out infinite reverse}
.blob.purple{background:radial-gradient(circle at 35% 30%,#A06BFF,var(--purple));opacity:.16}

/* ---- film grain ---- */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.045;z-index:5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Note: the demo/landing keyboard styles live in landing.html (scoped to .demo) so
   they never collide with the live keyboard.js renderer, which also uses .kbd/.wk/.bk. */

/* ---- animations ---- */
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14px,16px) scale(1.04)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
@keyframes eq{0%,100%{height:5px}50%{height:16px}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{transform:scale(.92);opacity:.4}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
.rise{opacity:0;animation:rise .8s var(--ease-out) forwards}
.rise.d1{animation-delay:.1s}.rise.d2{animation-delay:.25s}.rise.d3{animation-delay:.4s}
.pop{animation:pop .35s ease}
.swap{animation:pop .35s ease}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rise{opacity:1}
}