:root{
  /* Light background + carbon/marengo palette */
  --bg:#EEEAE2; --text:#222; --muted-text:#6B6B6B;
  --panel-bg:#FDFCFB; --panel-border:#CFCAC2; --panel-shadow:0 8px 24px rgba(0,0,0,.15);
  --btn-bg:#E6E3DC; --btn-bg-hover:#DCD8D0; --btn-border:#BDB7AE; --btn-text:#1A1A1A;
  --chip-bg:#F5F3F0; --chip-border:#D9D4CD;
  --overlay-bg1:#F2EFE9; --overlay-bg2:#EAE6DE; --overlay-border:#D8D2C7; --overlay-text:#2A2A2A;

  /* Slider sizing (alineación perfecta) */
  --track-h: 6px;        /* alto de la línea */
  --thumb-d: 20px;       /* diámetro del círculo (sin borde) */
  --thumb-b: 2px;        /* grosor del borde del círculo */
  --thumb-outer: calc(var(--thumb-d) + (2 * var(--thumb-b)));
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial}
body{background:var(--bg);color:var(--text)}

/* ===== Layers ===== */
#bg-particles{position:fixed;inset:0;z-index:0;pointer-events:none}
#three{position:fixed;inset:0;z-index:1}
#radial-spectrum{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(48vmin,560px);height:min(48vmin,560px);
  pointer-events:none;z-index:5;filter:drop-shadow(0 0 6px rgba(0,0,0,.10))
}

/* ===== Overlay / loader ===== */
#overlay{
  position:fixed;inset:0;z-index:20;
  background:linear-gradient(135deg,var(--overlay-bg1) 0%,var(--overlay-bg2) 100%);
  display:flex;align-items:center;justify-content:center
}
#overlay .box{
  padding:24px 28px;border:1px solid var(--overlay-border);border-radius:14px;
  background:#ffffffcc;box-shadow:0 12px 32px rgba(0,0,0,.12);text-align:center;backdrop-filter:blur(6px)
}
#overlay .title{font-weight:700;letter-spacing:.12em;margin-bottom:6px;color:var(--overlay-text)}
#overlay .sub{opacity:.85;font-size:14px;color:var(--muted-text)}

/* ===== Panel vidrio marengo esmerilado ===== */
.panel{
  position:fixed; top:16px; left:16px; width:340px; z-index:10;
  position: relative; /* para pseudo-elementos */
  background: rgba(34,38,42,0.32);           /* marengo con alpha */
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color:#f1f1f1;
}
.panel::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  mix-blend-mode: overlay; opacity:.6;
}
.panel::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>\
<rect width='100%' height='100%' filter='url(%23n)' opacity='0.08'/>\
</svg>");
  background-size: 140px 140px; opacity:.35;
}
.panel-header{
  padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.14);
  font-weight:600; letter-spacing:.02em; cursor:grab;
}
.panel-body{padding:12px;display:flex;flex-direction:column;gap:10px}

/* ===== Botón circular Play/Pause ===== */
.controls-row{display:flex;gap:10px;align-items:center}
.icon-btn{
  width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 2px 10px rgba(0,0,0,.15), inset 0 0 0 1px rgba(0,0,0,.06);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.icon-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.14); }
.icon-btn.is-playing{ background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }
.icon-btn svg{ display:block; width:20px; height:20px; stroke: currentColor; fill: none; }

/* ===== Contenedores de controles ===== */
.inline{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  padding:8px 10px; border-radius:10px; color:#f3f3f3;
}

/* ===== Slider cross-browser con centrado perfecto ===== */
.slider{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:64%;
  height: max(var(--thumb-outer), 28px); /* deja espacio al thumb (Firefox) */
  background: transparent;
  outline: none;
}

/* Track común (colores del panel oscuro) */
.slider::-webkit-slider-runnable-track{
  height: var(--track-h);
  background: rgba(255,255,255,0.32);
  border-radius: 3px;
}
.slider::-moz-range-track{
  height: var(--track-h);
  background: rgba(255,255,255,0.32);
  border-radius: 3px;
}

/* Thumb (WebKit) */
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width: var(--thumb-d);
  height: var(--thumb-d);
  border-radius: 50%;
  background: #FAFAFA;
  border: var(--thumb-b) solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.05), 0 0 0 3px rgba(255,255,255,.18);
  cursor: pointer;
  /* Centrado vertical: (alto track - tamaño exterior del thumb)/2 → negativo */
  margin-top: calc((var(--track-h) - var(--thumb-outer)) / 2);
}

/* Thumb (Firefox) */
.slider::-moz-range-thumb{
  width: var(--thumb-d);
  height: var(--thumb-d);
  border-radius: 50%;
  background: #FAFAFA;
  border: var(--thumb-b) solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.05), 0 0 0 3px rgba(255,255,255,.18);
  cursor: pointer;
}

/* Hover y foco accesible */
.slider:hover::-webkit-slider-runnable-track,
.slider:hover::-moz-range-track{ background: rgba(255,255,255,0.40); }
.slider:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 3px;
}

/* ===== Zonas de texto ===== */
#zones{ position:fixed; inset:0; z-index:6; pointer-events:none; }
#zone1{ position:absolute; left:2.5vw; bottom:12vh; width:min(36vw, 680px); }
#zone1 .zone1-header{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(40,40,40,.55);
  margin: 0 0 8px 0; border-bottom: 1px solid rgba(40,40,40,.12); padding-bottom: 4px;
  user-select: none;
}
#zone1 code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: .02em; color: rgba(40,40,40,.38);
  white-space: pre-wrap; line-height: 1.35; will-change: opacity, transform;
}
#zone2{
  position:absolute; right:2.8vw; top:10vh; width:min(28vw, 520px); max-height:78vh; overflow:hidden;
}
#zone2 .code-marengo{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(8px, 0.75vw, 13px);
  color: rgba(40,40,40,.28); line-height: 1.3; white-space: pre-wrap;
}
#zone2 .scroll-wrap{ will-change: transform; }
#zone2 .code-marengo{ display:block; margin:0; }

@supports (mask-image: linear-gradient(#000, #000)) {
  #zone2{
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
}