/* freeaudio.tools shared look: loaded after each page's own <style>, so it wins on equal selectors.
   Tokens come from the page (:root --bg --panel --line --ink --dim --accent); this adds the rest. */
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:500 700; font-display:swap;
  src:url(/space-grotesk.woff2) format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+2191,U+2193,U+2212; }
:root { --accent-2:#d48cf0; --ink-2:#c9c6e4; --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --lift:0 12px 24px -16px #000c, 0 2px 6px -2px #0006; --r:14px; }

::selection { background:#8b7dfb55; color:#fff; }
html { scrollbar-color:#3a3c58 transparent; caret-color:var(--accent); }
body { padding:clamp(20px,5vw,48px) 16px 40px; }
.wrap { gap:1.25rem; }

/* headings */
h1 { font:700 clamp(2rem,6vw,2.9rem)/1.05 var(--display); letter-spacing:-.025em; text-wrap:balance; }
header.center p { color:var(--ink-2); font-size:1rem; max-width:34rem; margin:.6rem auto 0; text-wrap:balance; }
.home { padding:.45rem .2rem; min-height:44px; box-sizing:border-box; font-family:var(--display); }
.panel h2 { font:600 .72rem var(--display); letter-spacing:.14em; color:var(--accent); }
.faq h2, .learn h2, .more h2 { font:700 1.3rem/1.2 var(--display); letter-spacing:-.01em; text-transform:none; color:var(--ink); margin:0 0 .2rem; }

/* panels: a little depth, a lit top edge */
.panel { border-radius:var(--r); border-color:#2c2e42; box-shadow:var(--lift);
  background:linear-gradient(180deg,#1f2032,var(--panel) 40%); }

/* drop zone: the front door */
.drop { position:relative; display:grid; justify-items:center; gap:.35rem; padding:1.6rem 1rem; border:1.5px dashed #3a3c58;
  border-radius:12px; background:radial-gradient(120% 140% at 50% 0%,#8b7dfb14,transparent 60%); color:var(--ink-2);
  transition:border-color .2s, background-color .2s; }
.drop::before { content:""; width:38px; height:38px; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12h1M7 8v8M11 4v16M15 7v10M19 10v4M22 12h-1'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12h1M7 8v8M11 4v16M15 7v10M19 10v4M22 12h-1'/%3E%3C/svg%3E") center/contain no-repeat; }
.drop .hint { font:600 1rem var(--display); color:var(--ink); }
.drop small { color:var(--dim); }
.drop:hover, .drop.over, .drop:focus-visible { border-color:var(--accent); background-color:#8b7dfb0d; outline:none; }
.drop:focus-visible { box-shadow:0 0 0 3px #8b7dfb55; }
.drop.loaded { grid-template-columns:auto 1fr auto; justify-items:start; align-items:center; text-align:left; padding:.6rem .9rem; gap:.1rem .7rem; }
.drop.loaded::before { width:24px; height:24px; grid-row:span 2; }
.drop.loaded .hint { font-size:.8rem; font-weight:500; color:var(--dim); grid-column:2; }
.drop.loaded small { grid-column:2; grid-row:1; color:var(--ink); font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.drop.loaded br { display:none; }
.drop.loaded + button { display:none; }

/* waveform with the real seek slider laid over it */
.wave { position:relative; height:76px; border-radius:10px; background:#0d0e17; border:1px solid #24263a; overflow:hidden; }
.wave canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.wave input[type=range] { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.wave:focus-within { box-shadow:0 0 0 2px var(--accent); }
.wave[hidden] { display:none; }

/* buttons */
button { font:600 .9rem var(--display); border-radius:10px; min-height:40px; transition:background-color .15s, border-color .15s, color .15s, transform .1s; }
button:hover:not(:disabled) { border-color:#4a4c6e; }
button:active:not(:disabled) { transform:translateY(1px); }
button.main { background:linear-gradient(135deg,var(--accent),#9f86fb); color:#0f0f19; border-color:transparent; box-shadow:0 8px 20px -10px #8b7dfbcc; }
button.main:hover:not(:disabled) { filter:brightness(1.08); }
#play { display:inline-flex; align-items:center; gap:.45rem; padding-left:.9rem; }
#play::before { content:""; width:12px; height:12px; background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%); }
#play.is-playing::before { clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0); }
#mp3:not(:disabled), #exportMp3:not(:disabled) { border-color:var(--accent); color:#cfc8ff; }
#mp3:hover:not(:disabled), #exportMp3:hover:not(:disabled) { background:#8b7dfb1f; }
button:disabled { opacity:.35; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* presets: real selected state */
.presets button { border-radius:999px; background:#151624; }
.presets button[aria-pressed=true] { background:#8b7dfb26; border-color:var(--accent); color:#fff; box-shadow:inset 0 0 0 1px var(--accent); }
.presets button.reset { background:none; border-color:transparent; color:var(--dim); text-decoration:underline; text-underline-offset:3px; }

/* sliders: filled track (JS sets --p) */
label { text-transform:none; letter-spacing:0; font-size:.84rem; color:var(--ink-2); }
label b { font:500 .82rem ui-monospace,Consolas,monospace; color:#fff; font-variant-numeric:tabular-nums; }
input[type=range] { -webkit-appearance:none; appearance:none; height:22px; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)) 0/var(--p,50%) 100% no-repeat, #2a2c42; }
input[type=range]::-moz-range-track { height:6px; border-radius:6px; background:#2a2c42; }
input[type=range]::-moz-range-progress { height:6px; border-radius:6px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; margin-top:-6px; border-radius:50%; background:#fff; border:0; box-shadow:0 2px 6px #0008; }
input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:0; box-shadow:0 2px 6px #0008; }
input[type=range]:disabled { opacity:.4; cursor:default; }
select, input[type=number] { font:inherit; background:#12131c; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:.35rem .5rem; }

/* fine-tune drawer for advanced sliders */
details.fine { border-top:1px solid var(--line); padding-top:.7rem; }
details.fine summary { cursor:pointer; font:600 .85rem var(--display); color:var(--ink-2); list-style:none; display:flex; align-items:center; gap:.4rem; }
details.fine summary::-webkit-details-marker { display:none; }
details.fine summary::before { content:""; width:8px; height:8px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(-45deg); transition:transform .2s; }
details.fine[open] summary::before { transform:rotate(45deg); }
details.fine .grid { margin-top:.8rem; }

/* status: busy bar + done card */
.status { color:var(--ink-2); }
.status.busy { position:relative; padding-bottom:10px; }
.status.busy::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent) 0 0/40% 100% no-repeat, #2a2c42; animation:fa-busy 1.1s cubic-bezier(.4,0,.2,1) infinite; }
.status.busy[style*="--pct"]::after { animation:none; background:linear-gradient(90deg,var(--accent),var(--accent-2)) 0 0/var(--pct) 100% no-repeat, #2a2c42; }
@keyframes fa-busy { from { background-position:-60% 0, 0 0; } to { background-position:160% 0, 0 0; } }
.done { display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; align-items:center; padding:.9rem 1rem; border-radius:12px;
  background:linear-gradient(135deg,#8b7dfb1f,#d48cf014); border:1px solid #8b7dfb55; animation:fa-in .35s cubic-bezier(.2,.8,.2,1); }
.done[hidden] { display:none; }
.done svg { grid-row:span 2; width:30px; height:30px; color:var(--accent); }
.done strong { font:700 1rem var(--display); }
.done p { margin:0; color:var(--ink-2); font-size:.85rem; overflow-wrap:anywhere; }
.done .row { grid-column:1/-1; margin-top:.4rem; gap:.5rem; }
.done .row a { font-size:.85rem; }
@keyframes fa-in { from { opacity:0; transform:translateY(6px); } }

/* reading sections */
.learn h3 { font:600 1.05rem var(--display); color:var(--ink); margin:1.2rem 0 .3rem; }
.learn p, .learn li { color:var(--ink-2); max-width:68ch; }
.learn b { color:var(--ink); }
.faq summary { font-weight:600; padding:.35rem 0; }
.faq details p { color:var(--ink-2); }
.more p { color:var(--ink-2); }
.wall { gap:.5rem; }
.wall a { border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem; text-decoration:none; color:var(--ink-2); font-size:.85rem; }
.wall a:hover { border-color:var(--accent); color:#fff; }
footer { opacity:1; font-size:.8rem; gap:.35rem; }
footer .legal a { color:var(--ink-2); }

@media (max-width:520px) {
  .row:not(.presets):not(.tools) > button { flex:1 1 auto; }
  .time { width:100%; text-align:center; }
  .grid { grid-template-columns:1fr; }
}
@media (pointer:coarse) { button { min-height:44px; } .presets button { min-height:40px; } }
@media (prefers-reduced-motion:reduce) { *, ::after { animation:none !important; transition:none !important; } }