:root {
  --bg: #e9e7e0;
  --light: #ffffff;
  --dark: #c3c1b8;
  --ink: #2c2b27;
  --ink-2: #6f6e67;
  --ink-3: #9b9a92;
  --accent: #ef6a1e;
  --accent-ink: #fffaf6;
  --line: rgba(0, 0, 0, 0.06);
  --out-sm: 4px 4px 9px var(--dark), -4px -4px 9px var(--light);
  --out-xs: 2px 2px 5px var(--dark), -2px -2px 5px var(--light);
  --in: inset 4px 4px 9px var(--dark), inset -4px -4px 9px var(--light);
  --bevel: inset 1px 1px 1.5px rgba(255, 255, 255, 0.65), inset -1px -1px 1.5px rgba(0, 0, 0, 0.05);
  --lift: 0 8px 20px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.1);
  --art: #d8d6cd;
  --spec: 64, 59, 52;
  --ec: cubic-bezier(0.34, 0.01, 0.2, 1);
  --font: "Helvetica Neue", "Inter", -apple-system, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Roboto Mono", Menlo, monospace;
}
[data-theme="dark"] {
  --bg: #23262c;
  --light: #2f333b;
  --dark: #141519;
  --ink: #eceef0;
  --ink-2: #a3a6ad;
  --ink-3: #70737a;
  --line: rgba(255, 255, 255, 0.055);
  --out-sm: 3px 3px 7px var(--dark), -2px -2px 6px var(--light);
  --out-xs: 2px 2px 5px var(--dark), -2px -2px 4px var(--light);
  --in: inset 4px 4px 9px var(--dark), inset -3px -3px 8px var(--light);
  --bevel: inset 1px 1px 1px rgba(255, 255, 255, 0.05), inset -1px -1px 1px rgba(0, 0, 0, 0.3);
  --lift: 0 10px 24px rgba(0, 0, 0, 0.55), 0 2px 5px rgba(0, 0, 0, 0.4);
  --art: #2f3137;
  --spec: 230, 233, 236;
}
[data-theme="dark"] body {
  background: #16181c;
}
[data-theme="dark"] body.embed {
  background: transparent;
}

.eko-web {
  width: 100%;
  max-width: 680px;
  background: var(--bg);
  box-shadow: var(--lift);
  border-radius: 22px;
  padding: 22px;
  position: relative;
}
.ew-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.ew-cover {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  flex: 0 0 auto;
  /* When a track is loaded, a generated cover is set as a background image on top of the
     empty slot's own gradient, so the slot reads as a record sleeve rather than a hole. */
  background-size: cover;
  background-position: center;
  background: radial-gradient(120% 120% at 25% 20%, var(--light), transparent 60%), var(--art);
  box-shadow: var(--out-sm), var(--bevel);
  background-size: cover;
  background-position: center;
}
.ew-meta {
  flex: 1;
  min-width: 0;
}
.ew-lab {
  font: 700 8.5px var(--mono);
  letter-spacing: 2px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ew-eqg {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.ew-eqg i {
  width: 2.5px;
  height: 10px;
  background: var(--accent);
  border-radius: 1px;
  transform-origin: bottom;
  animation: bar 1.1s var(--ec) infinite;
  opacity: 0;
  transition: opacity 0.3s;
}
.playing .ew-eqg i {
  opacity: 1;
}
.ew-eqg i:nth-child(2) {
  animation-delay: 0.2s;
}
.ew-eqg i:nth-child(3) {
  animation-delay: 0.45s;
}
.ew-eqg i:nth-child(4) {
  animation-delay: 0.7s;
}
@keyframes bar {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}
.ew-title {
  font-size: 18px;
  font-weight: 600;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ew-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ew-badge {
  font: 700 8px var(--mono);
  letter-spacing: 1.5px;
  color: var(--accent);
  background: var(--bg);
  box-shadow: var(--in);
  border-radius: 999px;
  padding: 7px 12px;
  flex: 0 0 auto;
}
.ew-theme {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--out-xs), var(--bevel);
  border: none;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.ew-theme svg {
  width: 15px;
  height: 15px;
}

.ew-spec {
  height: 96px;
  background: var(--bg);
  box-shadow: var(--in);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.ew-spec canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ew-sig {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg);
  box-shadow: var(--in);
  border-radius: 13px;
  padding: 12px 18px;
  margin-bottom: 16px;
}
.ew-sig .node {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ew-sig .node.o {
  text-align: right;
}
.ew-sig .k {
  font: 700 8px var(--mono);
  letter-spacing: 1.4px;
  color: var(--ink-3);
}
.ew-sig .v {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ew-sig .link {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--bg);
  box-shadow:
    inset 1px 1px 2px var(--dark),
    inset -1px -1px 2px var(--light);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.ew-sig .seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
  flex: 0 0 auto;
}
.ew-sig .ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--in);
  color: var(--ink-3);
}
.ew-sig .ring svg {
  width: 15px;
  height: 15px;
}
.ew-sig .sl {
  font: 700 8px var(--mono);
  letter-spacing: 1px;
  color: var(--ink-3);
  white-space: nowrap;
}

.ew-ctrls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 14px;
}
.ew-play {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--out-sm);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.ew-play svg {
  width: 22px;
  height: 22px;
}
.ew-scrub {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ew-scrub .t {
  font: 600 11px var(--mono);
  color: var(--ink-3);
  min-width: 38px;
}
.ew-scrub .t.r {
  text-align: right;
}
.ew-track {
  flex: 1;
  height: 6px;
  border-radius: 6px;
  background: var(--bg);
  box-shadow: var(--in);
  position: relative;
  cursor: pointer;
}
.ew-track .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: var(--accent);
  width: 0;
}
.ew-track .knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--out-xs), var(--bevel);
  transform: translate(-50%, -50%);
}
.ew-live {
  font: 700 9px var(--mono);
  letter-spacing: 1.5px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 7px;
}
.ew-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.ew-ctrls2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.ew-vol {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 170px;
  flex: 0 0 auto;
}
.ew-vol .vk {
  font: 700 8px var(--mono);
  letter-spacing: 1px;
  color: var(--ink-3);
}
.ew-presets {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.ew-presets b {
  font: 600 11px var(--font);
  color: var(--ink-3);
  background: var(--bg);
  box-shadow: var(--out-xs), var(--bevel);
  border-radius: 999px;
  padding: 8px 13px;
  cursor: pointer;
}
.ew-presets b.on {
  color: var(--accent);
  box-shadow: var(--in);
}

.ew-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.ew-note {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
  flex: 1;
}
.ew-note b {
  color: var(--ink-2);
}
.ew-dl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: var(--out-sm);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.ew-dl svg {
  width: 14px;
  height: 14px;
}
.hidden {
  display: none !important;
}
img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 560px) {
  .eko-web {
    padding: 16px;
    min-width: 0;
    margin: 0 auto;
    /* Size against the VIEWPORT, not the parent. `width: 100%` is no use here: a
       framework that mounts into a wrapper div leaves that wrapper shrink-wrapped around
       the card's widest flex row, so 100% of it is already too wide. Viewport units
       ignore whatever the host wrapped this in, which is the only version that holds for
       every one of the three demos. The subtraction is body's own padding at this
       breakpoint. */
    width: calc(100vw - 28px);
    max-width: 100%;
    box-sizing: border-box;
  }
  .ew-sig {
    flex-wrap: wrap;
    gap: 10px;
  } /* signal-path row must wrap or it forces the card wide */
  .ew-ctrls2 {
    flex-wrap: wrap;
  }
  .ew-vol {
    width: 100%;
  }
  .ew-presets {
    margin-left: 0;
  }
}
/* safety net: never allow horizontal scroll on any device (clip keeps position:sticky working) */

/* The file picker.
   A native file input is the one control that breaks this material: it renders a
   system button and a "no file chosen" label that no amount of surrounding soft
   shadow can absorb. Styling ::file-selector-button and making the input's own text
   transparent leaves just the button, in the same material as everything else, with
   no change to anyone's markup. Both demo class names are matched because the React
   demo named this row differently from the other two. */
.ew-load input[type="file"],
.ew-source input[type="file"] {
  color: transparent;
  width: 124px;
  font: 600 11px var(--font);
}
.ew-load input[type="file"]::file-selector-button,
.ew-source input[type="file"]::file-selector-button {
  font: 600 11px var(--font);
  color: var(--ink-2);
  background: var(--bg);
  box-shadow: var(--out-xs), var(--bevel);
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  margin-right: 10px;
  cursor: pointer;
}
.ew-load input[type="file"]::file-selector-button:hover,
.ew-source input[type="file"]::file-selector-button:hover {
  color: var(--accent);
}