/* Lyro design tokens. Shared by the site, the app and the admin panel.
   Direction: light, calm, a professional tool. One accent. No cards, no shadows:
   hierarchy comes from space and type. The signature element is the 16-step bar. */

:root{
  --paper:#FAFAF8;
  --panel:#FFFFFF;
  --ink:#1A1A18;
  --ink-2:#3B3B37;
  --muted:#6B6B66;
  --faint:#9C9C95;
  --line:#E6E6E1;
  --line-firm:#D4D4CD;
  --cell:#EDEDE8;
  --cell-beat:#DEDED7;
  --blue:#2F6BFF;
  --blue-ink:#1F5AEE;
  --blue-tint:#EFF4FF;
  --ok:#1C7A57;
  --warn:#8A5D0F;
  --err:#C0392B;

  --r:6px;
  --r-lg:10px;
  --font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* One family, two voices: body at normal width, display condensed. */
  --display-stretch:77%;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button,input,textarea,select,output{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
img,svg,canvas{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
::selection{background:var(--blue);color:#fff}

/* ------------------------------------------------------------------ brand */
.mark{display:inline-flex;align-items:baseline;gap:4px;text-decoration:none;color:var(--ink)}
.mark span{font-weight:600;font-size:24px;letter-spacing:-.045em;line-height:1}
.mark i{width:6px;height:6px;background:var(--blue);border-radius:50%;display:block}
.mark.small span{font-size:19px}
.mark.small i{width:5px;height:5px}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:var(--r);
  padding:10px 18px;font-weight:500;font-size:15px;line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:background .14s,border-color .14s,transform .14s;
}
.btn:hover{background:var(--blue-ink);border-color:var(--blue-ink)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{background:#DCDCD6;border-color:#DCDCD6;color:var(--faint);cursor:not-allowed;transform:none}
.btn.lg{padding:14px 24px;font-size:16.5px}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-firm)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.ink{background:var(--ink);border-color:var(--ink)}
.btn.ink:hover{background:#000;border-color:#000}
.btn.quiet{background:transparent;border-color:var(--line-firm);color:var(--muted);padding:6px 11px;font-size:13px;font-weight:400}
.btn.quiet:hover{color:var(--ink);border-color:var(--faint);background:transparent}
.link{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.link:hover{color:var(--ink)}

/* ----------------------------------------------------------------- fields */
.input,textarea.input,select.input{
  width:100%;background:var(--panel);border:1px solid var(--line-firm);border-radius:var(--r);
  padding:11px 13px;font-size:15px;line-height:1.5;
}
textarea.input{resize:vertical;min-height:140px;line-height:1.7}
.input::placeholder{color:#B6B6AF}
.input:focus-visible{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.label{display:block;font-size:13.5px;font-weight:500;color:var(--muted);margin:0 0 7px}
.hint{font-size:13px;color:var(--faint);margin:8px 0 0;line-height:1.5}
.error{color:var(--err);font-size:13.5px;margin:10px 0 0}
.okmsg{color:var(--ok);font-size:13.5px;margin:10px 0 0}
input[type=range]{accent-color:var(--blue);background:transparent}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.check input{margin:3px 0 0;accent-color:var(--blue);width:16px;height:16px;flex:0 0 auto}

/* ------------------------------------------------------------------ pills */
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{
  background:var(--panel);border:1px solid var(--line-firm);color:var(--ink);padding:7px 14px;border-radius:99px;
  font-size:14px;line-height:1.3;transition:border-color .12s,background .12s;
}
.pill:hover{border-color:var(--faint)}
.pill[aria-pressed=true],.pill[aria-selected=true],.pill[aria-checked=true]{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:500}
.pill small{opacity:.5;font-size:12px;margin-left:4px}

/* ----------------------------------------- the 16-step bar (4/4, one bar)
   While something is being made the playhead sweeps it; on a finished track the same strip is the scrubber. */
.bar{position:relative;display:grid;grid-template-columns:repeat(16,1fr);gap:3px;height:22px}
.bar i{background:var(--cell);border-radius:2px;display:block}
.bar i:nth-child(4n+1){background:var(--cell-beat)}
.bar.live .head{position:absolute;top:0;bottom:0;left:0;width:calc((100% - 45px) / 16);background:var(--blue);border-radius:2px;
  animation:sweep 2.13s steps(16,end) infinite}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(calc(1600% + 48px))}}
.bar.seek{cursor:pointer}
.bar.seek i{transition:background .1s}
.bar.seek i[data-lit=true]{background:var(--blue)}
@media(prefers-reduced-motion:reduce){.bar.live .head{animation:none;opacity:.5}}

.pp{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-firm);background:var(--panel);
  color:var(--ink);display:grid;place-items:center;padding:0;line-height:0;transition:border-color .12s,color .12s}
.pp:hover{border-color:var(--blue);color:var(--blue)}
.pp svg{width:12px;height:12px;fill:currentColor}
.player{display:flex;align-items:center;gap:14px}
.player .bar{flex:1}
.clock{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}