/* Console look of the Salsa Beat app: values from ui/theme/ConsoleTokens.kt and ui/console/. */

@font-face{ font-family:'Barlow'; font-weight:400; font-display:swap; src:url('fonts/barlow_regular.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-weight:500; font-display:swap; src:url('fonts/barlow_medium.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-weight:600; font-display:swap; src:url('fonts/barlow_semibold.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-weight:600; font-display:swap; src:url('fonts/barlow_condensed_semibold.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-weight:700; font-display:swap; src:url('fonts/barlow_condensed_bold.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-weight:500; font-display:swap; src:url('fonts/jetbrains_mono_medium.woff2') format('woff2'); }

:root{
  color-scheme: dark;
  --bg:#161514; --panel:#1C1A18; --bar:#1F1D1B; --key:#2A2724; --segment:#34302C;
  --recessed:#0F0E0D; --deep:#0B0A09; --pad:#221F1D; --pad-current:#4A4540; --selected:#241C12;
  --border:#2A2724; --border-soft:#2E2B28; --border-key:#3A3632; --border-beat:#423D38;
  --border-current:#8A837A; --divider:#262321; --chip-border:#5A4020;
  --text:#F1EDE6; --text-2:#E4DFD7; --text-3:#CFC9C0; --text-4:#B8B1A7; --text-5:#9A938A;
  --text-muted:#8A837A; --text-7:#5E5851;
  --amber:#F0A43A; --amber-light:#FFC163; --amber-lighter:#FFD690; --amber-dark:#7A5422; --amber-border:#9A6C2C;
  --on-amber:#1A1209; --play-top:#FFBE5C; --play-bottom:#E0912A;
  --mute:#EF5A4C; --mute-bg:#3D1B17; --mute-text:#FFB3AA; --led-off:#3D3935;
  --cap-top:#EBE7E1; --cap-bottom:#A39E96; --cap-line:#2A2826;
  --sans:'Barlow',system-ui,sans-serif;
  --condensed:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text-3);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--amber); text-underline-offset:3px; }
a:hover{ color:var(--amber-light); }
:focus-visible{ outline:2px solid var(--amber-light); outline-offset:3px; }

.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 16px; }
.wrap.narrow{ max-width:720px; }

/* ---------- Widgets ---------- */

.caption{
  font-family:var(--condensed);
  font-weight:600;
  font-size:0.8125rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-5);
}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
}

.key{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--key);
  border:1px solid var(--border-key);
  border-radius:6px;
  box-shadow:0 2px 0 var(--deep), inset 0 1px 0 rgba(255,255,255,0.06);
  color:var(--text-2);
  text-decoration:none;
}
.key:hover{ color:var(--text); }
.key:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-weight:500;
  font-size:0.8125rem;
  text-transform:uppercase;
  color:var(--amber);
  background:var(--selected);
  border:1px solid var(--chip-border);
  border-radius:4px;
  padding:7px 11px;
}
a.chip{ min-height:44px; padding-inline:14px; text-decoration:none; }
a.chip:hover{ border-color:var(--amber); }

.led{
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--led-off);
}
.led.on{ background:var(--amber); box-shadow:0 0 6px rgba(240,164,58,0.8); }

/* Clave strip */
.strip{ padding:8px; }
.strip-row{ display:grid; grid-template-columns:repeat(16,1fr); gap:3px; }
.cell{
  height:30px;
  background:var(--pad);
  border:1px solid var(--border-soft);
  border-radius:4px;
}
.cell.beat{ border-color:var(--border-beat); }
.cell.hit{ background:var(--amber-dark); border-color:var(--amber-border); }
.cell.current{ background:var(--pad-current); border-color:var(--border-current); }
.cell.hit.current{
  background:var(--amber-light);
  border-color:var(--amber-lighter);
  box-shadow:0 0 12px rgba(255,193,99,0.7);
}
.count{
  margin-top:5px;
  text-align:center;
  font-family:var(--mono);
  font-weight:500;
  font-size:0.625rem;
  line-height:1.4;
  color:var(--text-7);
}
.count.beat{ color:var(--text-5); }

/* Segmented selector */
.seg{
  display:flex;
  gap:3px;
  flex:1;
  background:var(--recessed);
  border:1px solid var(--border);
  border-radius:9px;
  padding:3px;
}
.seg-item{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  border:0;
  border-radius:6px;
  background:transparent;
  font-family:var(--condensed);
  font-weight:600;
  font-size:0.875rem;
  letter-spacing:0.1em;
  color:var(--text-muted);
}
.seg-item.on{
  background:var(--segment);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
  color:var(--text);
}

/* ---------- Site chrome ---------- */

.topbar{ padding:14px 0; }
.topbar .wrap{ display:flex; align-items:center; gap:12px; }
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  font-weight:600;
  font-size:1.25rem;
  color:var(--text);
  text-decoration:none;
}
.brand img{ display:block; width:36px; height:36px; border-radius:9px; border:1px solid var(--border-key); }
.brand:hover{ color:var(--text); }

.foot{
  margin-top:56px;
  background:var(--bar);
  border-top:1px solid var(--border);
  padding:24px 0;
  font-size:0.9375rem;
  color:var(--text-4);
}
.foot .wrap{ display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:space-between; }
.foot nav{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.foot a{ color:var(--text-3); }
.foot a:hover{ color:var(--amber-light); }

/* ---------- Privacy ---------- */

.doc-head{ padding:20px 0 24px; }
.doc-head h1{
  margin-top:8px;
  font-weight:600;
  font-size:clamp(2.1rem,7vw,3rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--text);
}
.doc-head .updated{ margin-top:12px; font-family:var(--mono); font-weight:500; font-size:0.8125rem; color:var(--text-5); }

.summary{
  display:flex;
  gap:14px;
  background:var(--selected);
  border:1px solid var(--chip-border);
  border-radius:12px;
  padding:18px;
  font-weight:500;
  font-size:1.125rem;
  line-height:1.5;
  color:var(--text);
}
.summary .led{ margin-top:10px; }

.doc{ margin-top:14px; }
.doc section{ padding:22px 18px; border-top:1px solid var(--divider); }
.doc section:first-child{ border-top:0; }
.doc h2{
  margin-bottom:8px;
  font-weight:600;
  font-size:1.1875rem;
  line-height:1.3;
  color:var(--text);
}
.doc p + p, .doc p + ul, .doc ul + p{ margin-top:10px; }
.doc ul{ padding-left:20px; }
.doc li + li{ margin-top:8px; }
.doc strong{ font-weight:600; color:var(--text-2); }

/* ---------- Landing ---------- */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:56px;
  align-items:center;
  padding:32px 0 24px;
}
.hero h1{
  margin-top:14px;
  font-weight:600;
  font-size:clamp(2.6rem,6.2vw,4.25rem);
  line-height:1.03;
  letter-spacing:-0.015em;
  color:var(--text);
}
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero .lead{ margin-top:20px; max-width:30em; font-size:1.25rem; line-height:1.5; color:var(--text-3); }
.hero .chip{ margin-top:26px; }

/* Picture of the main screen, drawn with the same tokens as the app */
.phone{
  width:100%;
  max-width:360px;
  margin:0 auto;
  background:var(--bg);
  border:1px solid var(--border-key);
  border-radius:26px;
  padding:14px 10px 0;
  overflow:hidden;
  box-shadow:0 0 0 6px var(--deep), 0 28px 60px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.phone-head{ display:flex; align-items:center; justify-content:space-between; padding:2px 6px 6px; }
.phone-head b{ font-weight:600; font-size:1.25rem; line-height:1.3; color:var(--text); }
.phone-head svg{ display:block; width:20px; height:20px; fill:var(--text-3); margin-left:16px; }
.phone-head span{ display:flex; }
.phone .selectors{ display:flex; gap:8px; }
.phone .seg-item{ min-height:30px; font-size:0.8125rem; }

.mixer{ padding:4px 8px; }
.track{ display:flex; align-items:center; gap:6px; padding:3px 0; }
.led-key{
  flex:none;
  width:44px;
  height:36px;
  flex-direction:column;
  gap:4px;
  font-family:var(--condensed);
  font-weight:700;
  font-size:0.6875rem;
  letter-spacing:0.1em;
  line-height:1;
  color:var(--text-4);
}
.led-key i{ width:16px; height:3px; border-radius:2px; background:var(--led-off); }
.led-key.muted{ background:var(--mute-bg); color:var(--mute-text); }
.led-key.muted i{ background:var(--mute); box-shadow:0 0 8px rgba(239,90,76,0.8); }
.track-body{ flex:1; min-width:0; margin-left:4px; }
.track-label{ display:flex; align-items:center; justify-content:space-between; gap:6px; height:18px; }
.track-label b{ font-weight:500; font-size:0.875rem; color:var(--text-2); flex:1; }
.track-label small{ font-family:var(--mono); font-weight:500; font-size:0.625rem; color:var(--text-4); }
.tune{
  gap:3px;
  width:30px;
  height:16px;
  border-radius:4px;
  font-family:var(--condensed);
  font-weight:700;
  font-size:0.625rem;
  color:var(--text-3);
}
.tune svg{ width:10px; height:10px; fill:currentColor; }
.track.off .track-label b, .track.off .track-label small{ color:var(--text-muted); }

.fader{ position:relative; height:24px; }
.fader::before{
  content:'';
  position:absolute;
  left:0; right:0; top:8px;
  height:6px;
  border-radius:3px;
  background:var(--deep);
}
.fader i{
  position:absolute;
  left:0; top:8px;
  height:6px;
  width:calc(7px + (100% - 14px) * var(--v));
  border-radius:3px;
  background:var(--amber);
}
.track.off .fader i{ background:var(--text-7); }
.fader::after{
  content:'';
  position:absolute;
  top:1px;
  left:calc((100% - 14px) * var(--v));
  width:14px;
  height:21px;
  border-radius:3px;
  background:
    linear-gradient(var(--cap-line),var(--cap-line)) center / 10px 2px no-repeat,
    linear-gradient(var(--cap-top),var(--cap-bottom));
  box-shadow:0 2px 2px rgba(0,0,0,0.5);
}

.tempo{ padding:10px; display:flex; flex-direction:column; gap:8px; }
.tempo-top{ display:flex; gap:6px; }
.nudge{ flex:none; width:40px; height:40px; font-family:var(--mono); font-weight:500; font-size:0.8125rem; }
.lcd{
  flex:1;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:7px;
  background:var(--deep);
  border:1px solid var(--border);
  border-radius:6px;
  line-height:38px;
  font-family:var(--mono);
  font-weight:500;
  font-size:1.625rem;
  color:var(--amber);
}
.lcd small{ font-family:var(--condensed); font-weight:600; font-size:0.6875rem; letter-spacing:0.14em; color:var(--text-5); }
.presets{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.preset{
  flex-direction:column;
  height:42px;
  line-height:1.2;
  font-family:var(--mono);
  font-weight:500;
  font-size:0.8125rem;
}
.preset small{ font-family:var(--condensed); font-weight:600; font-size:0.625rem; letter-spacing:0.1em; color:var(--text-5); }
.preset.on{ border-color:var(--amber-border); color:var(--amber); }
.preset.on small{ color:var(--amber); }

.transport{
  display:flex;
  align-items:center;
  gap:10px;
  margin:4px -10px 0;
  padding:10px 14px;
  background:var(--bar);
  border-top:1px solid var(--border);
}
.switch{ flex:none; position:relative; width:42px; height:24px; border-radius:12px; background:var(--amber-dark); }
.switch::after{
  content:'';
  position:absolute;
  top:2px; right:2px;
  width:20px; height:20px;
  border-radius:50%;
  background:linear-gradient(var(--cap-top),var(--cap-bottom));
}
.transport div{ flex:1; line-height:1.25; font-size:0.75rem; color:var(--text-5); }
.transport div b{ display:block; font-family:var(--condensed); font-weight:600; font-size:0.75rem; letter-spacing:0.12em; color:var(--text-3); }
.play{
  flex:none;
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(var(--play-top),var(--play-bottom));
  box-shadow:0 3px 0 var(--deep);
}
.play svg{ width:22px; height:22px; fill:var(--on-amber); margin-left:3px; }

/* Sections below the hero */
.clave-demo{ margin-top:40px; padding:22px; display:grid; gap:18px; }
.clave-demo h2, .feature h2{ margin-top:4px; font-weight:600; line-height:1.2; color:var(--text); }
.clave-demo h2{ font-size:1.75rem; }
.clave-demo p{ max-width:36em; }
.clave-demo .strip{ background:var(--recessed); border:1px solid var(--border); border-radius:10px; }
.clave-demo .cell{ height:clamp(30px,6vw,52px); }
.clave-demo .count{ font-size:clamp(0.625rem,1.6vw,0.8125rem); }
.clave-controls{ display:flex; flex-wrap:wrap; gap:8px; }
.clave-controls .seg{ min-width:220px; }
.clave-controls .seg-item{ min-height:44px; font-size:1rem; cursor:pointer; }
.clave-controls .seg-item:not(.on):hover{ color:var(--text-3); }

.features{ margin-top:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.feature{ padding:22px; }
.feature h2{ font-size:1.375rem; }
.feature p{ margin-top:8px; }

@media (max-width:860px){
  .hero{ grid-template-columns:minmax(0,1fr); gap:36px; padding-top:16px; }
  .features{ grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce){
  .key:active{ transform:none; }
}