/* Enfermatiko Audio Services. Matches the enfermatiko.net look.
   No external requests: fonts fall back to system faces unless Clash Display / Satoshi are installed. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.25rem);
  --text-hero:clamp(2.4rem,1rem + 5vw,5rem);
  --s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s24:6rem;

  --bg:oklch(.145 .006 285);
  --surface:oklch(.175 .007 285);
  --surface-2:oklch(.205 .008 285);
  --surface-off:oklch(.12 .005 285);
  --border:oklch(1 0 0 / .09);
  --divider:oklch(1 0 0 / .06);
  --text:oklch(.95 .004 285);
  --muted:oklch(.74 .01 285);
  --faint:oklch(.58 .01 285);
  --red:oklch(.63 .25 28);
  --red-hover:oklch(.69 .23 30);
  --red-dim:oklch(.63 .25 28 / .14);
  --steel:oklch(.72 .11 252);
  --steel-dim:oklch(.68 .11 252 / .16);
  --green:oklch(.78 .15 150);
  --green-dim:oklch(.78 .15 150 / .1);
  --amber:oklch(.82 .14 78);
  --amber-dim:oklch(.82 .14 78 / .1);

  --notch:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  --notch-sm:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  --ease:cubic-bezier(.16,1,.3,1);
  --t:180ms var(--ease);
  --wide:1180px;

  --font-display:'Clash Display','Satoshi',ui-sans-serif,system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'Satoshi','Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  color-scheme:dark;
}
html{-webkit-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth;scroll-padding-top:84px;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;background:var(--bg);color:var(--text);font:var(--text-base)/1.6 var(--font-body)}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
main :is(p,li,td) a:not([class]){color:var(--steel);text-decoration:underline;text-underline-offset:3px}
main :is(p,li,td) a:not([class]):hover{color:var(--text)}
h1,h2,h3{text-wrap:balance;line-height:1.15}
p,li{text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px}
::selection{background:oklch(.63 .25 28 / .35)}
a,button,input,select,textarea,summary{transition:color var(--t),background var(--t),border-color var(--t),box-shadow var(--t)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-100px;z-index:100;background:var(--red);color:#fff;padding:.75rem 1rem}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2 * var(--s6),var(--wide));margin-inline:auto}
@media (max-width:520px){.wrap{width:calc(100% - 32px)}}
.mono{font-family:var(--font-mono);letter-spacing:.01em}
.red{color:var(--red)}
.nowrap{white-space:nowrap}
.kicker{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.12em;display:inline-flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.dot{width:8px;height:8px;display:inline-block;background:var(--faint);transform:rotate(45deg);flex:none}
.dot--live{background:var(--red);box-shadow:0 0 12px var(--red)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s6);font-size:var(--text-sm);font-weight:700;letter-spacing:.02em;clip-path:var(--notch-sm);white-space:nowrap}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-hover)}
.btn--ghost{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border)}
.btn--ghost:hover{background:oklch(.25 .01 285)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:18px;height:18px}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
@media (max-width:520px){.actions .btn{flex:1 1 100%}}

/* Header */
.header{position:sticky;top:0;z-index:50;background:oklch(.145 .006 285 / .85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--divider)}
.header__inner{width:min(100% - 2 * var(--s6),var(--wide));margin-inline:auto;display:flex;align-items:center;gap:var(--s6);min-height:68px}
@media (max-width:520px){.header__inner{width:calc(100% - 32px)}}
.brand{display:flex;align-items:center;gap:var(--s3);margin-right:auto;min-height:44px}
.brand img{width:40px;height:40px;object-fit:cover;clip-path:var(--notch-sm)}
.brand__word{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.08em;line-height:1;display:flex;flex-direction:column;gap:5px}
.brand__sub{font-family:var(--font-mono);font-weight:400;font-size:.66rem;letter-spacing:.3em;color:var(--red)}
.nav__list{display:flex;gap:2px;list-style:none}
.nav__list a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);font-size:var(--text-sm);color:var(--muted);font-weight:500}
.nav__list a:hover,.nav__list a[aria-current=page]{color:var(--text)}
.nav__list a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--red)}
.nav__toggle{display:none}
@media (max-width:900px){
  .header__cta{display:none}
  .nav__toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;padding:0 10px}
  .nav__toggle span{display:block;height:2px;background:var(--text);transition:transform .25s var(--ease)}
  .nav__toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav__toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav__list{position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--border);padding:var(--s2) 16px var(--s6);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .35s var(--ease),visibility 0s linear .35s}
  .nav__list.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .35s var(--ease)}
  .nav__list a{width:100%;min-height:56px;padding:0;font-size:var(--text-lg);color:var(--text);border-bottom:1px solid var(--divider)}
}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--divider);padding-block:clamp(var(--s12),7vw,var(--s24))}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 70% at 85% 30%,var(--red-dim),transparent 70%),
  radial-gradient(50% 60% at 10% 100%,var(--steel-dim),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(var(--divider) 1px,transparent 1px),linear-gradient(90deg,var(--divider) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(var(--s8),5vw,var(--s16));align-items:center}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}}
.hero__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-hero);line-height:.98;letter-spacing:-.015em;text-transform:uppercase;margin-bottom:var(--s6)}
.hero__lede{font-size:var(--text-lg);color:var(--muted);max-width:52ch;line-height:1.5}
.badges{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6);list-style:none}
.badge{display:inline-flex;align-items:center;gap:var(--s2);min-height:36px;padding:0 var(--s3);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.badge svg{width:15px;height:15px;color:var(--red)}
.art{position:relative;background:var(--surface-off);box-shadow:inset 0 0 0 1px var(--border);clip-path:var(--notch);padding:var(--s6)}
.art figcaption{display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--faint);text-transform:uppercase;letter-spacing:.1em}

/* Sections */
.section{padding-block:clamp(var(--s16),8vw,var(--s24))}
.section + .section{border-top:1px solid var(--divider)}
.section--tint{background:var(--surface-off)}
.section__head{max-width:720px;margin-bottom:clamp(var(--s8),4vw,var(--s12))}
.section__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);line-height:1;letter-spacing:-.01em;text-transform:uppercase;margin-bottom:var(--s4)}
.section__lede{color:var(--muted);max-width:60ch}
.sub{font-size:var(--text-lg);font-weight:700;margin:var(--s10) 0 var(--s4)}
.small{font-size:var(--text-sm)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.prose p+p{margin-top:var(--s3)}

/* Grids & cards */
.grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));list-style:none}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.card{position:relative;display:flex;flex-direction:column;gap:var(--s3);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);padding:var(--s6);clip-path:var(--notch)}
a.card:hover{background:var(--surface-2)}
.card h3{font-size:var(--text-lg);line-height:1.2}
.card p{color:var(--muted);font-size:var(--text-sm)}
.icon{width:44px;height:44px;display:grid;place-items:center;background:var(--red-dim);color:var(--red);clip-path:var(--notch-sm);flex:none}
.icon svg{width:22px;height:22px}
.icon--steel{background:var(--steel-dim);color:var(--steel)}
.list{list-style:none;display:grid;gap:var(--s2)}
.list li{position:relative;padding-left:1.6em;font-size:var(--text-sm);color:var(--muted)}
.list li::before{content:"";position:absolute;left:.2em;top:.62em;width:7px;height:7px;background:var(--faint);transform:rotate(45deg)}
.list--yes li::before{content:"✓";background:none;transform:none;top:0;left:0;color:var(--green);font-weight:700}
.list--no li::before{content:"✕";background:none;transform:none;top:0;left:0;color:var(--red);font-weight:700}
.list strong{color:var(--text)}
.card--yes{box-shadow:inset 0 0 0 1px oklch(.78 .15 150 / .3)}
.card--no{box-shadow:inset 0 0 0 1px oklch(.63 .25 28 / .3)}
.tag{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--steel)}

/* Pricing */
.price-card{gap:var(--s4)}
.price-card--pop{background:linear-gradient(180deg,var(--red-dim),var(--surface) 55%);box-shadow:inset 0 0 0 1px var(--red)}
.price-card .ribbon{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;padding:6px 22px 6px 12px}
.price{font-family:var(--font-display);font-size:clamp(2.4rem,1.8rem + 2vw,3.2rem);font-weight:600;line-height:1}
.price small{font-family:var(--font-body);font-size:var(--text-sm);font-weight:400;color:var(--muted);margin-left:.3em}
.price-card .btn{margin-top:auto}
.addons{display:grid;gap:1px;background:var(--border);list-style:none;margin-top:var(--s4)}
.addons li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);background:var(--bg);padding:var(--s4) var(--s5);flex-wrap:wrap}
.addons li span:first-child{font-weight:600}
.addons li span:last-child{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--muted)}

/* Process steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--s4);list-style:none;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding:var(--s6);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);clip-path:var(--notch)}
.steps li::before{content:"0" counter(step);display:block;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--red);margin-bottom:var(--s3)}
.steps h3{font-size:var(--text-base);margin-bottom:var(--s2)}
.steps p{font-size:var(--text-sm);color:var(--muted)}

/* Notes */
.note{padding:clamp(var(--s6),3vw,var(--s10));clip-path:var(--notch);box-shadow:inset 0 0 0 1px var(--border);background:var(--surface)}
.note h2,.note h3{display:flex;align-items:center;gap:var(--s3);font-size:var(--text-xl);font-family:var(--font-display);font-weight:600;text-transform:uppercase;margin-bottom:var(--s4);line-height:1.05}
.note h2 svg{width:28px;height:28px;flex:none}
.note p,.note li{color:var(--muted)}
.note strong{color:var(--text)}
.note .list{margin-top:var(--s3)}
.note .list li{font-size:var(--text-base)}
.note p+p{margin-top:var(--s3)}
.note--warn{background:linear-gradient(135deg,var(--amber-dim),var(--surface) 60%);box-shadow:inset 0 0 0 1px oklch(.82 .14 78 / .35)}
.note--warn h2{color:var(--amber)}
.note--ok{background:linear-gradient(135deg,var(--green-dim),var(--surface) 60%);box-shadow:inset 0 0 0 1px oklch(.78 .15 150 / .3)}
.note--ok h2{color:var(--green)}
.note--alt{background:linear-gradient(135deg,var(--steel-dim),var(--surface) 60%);box-shadow:inset 0 0 0 1px oklch(.72 .11 252 / .4)}
.note--alt h2{color:var(--steel)}
.legal{margin-top:var(--s6);font-size:var(--text-xs)!important;color:var(--faint)!important}

/* Table */
.table-wrap{overflow-x:auto;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);clip-path:var(--notch)}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th,td{text-align:left;padding:var(--s3) var(--s5);border-bottom:1px solid var(--divider)}
th{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:500}
tr:last-child td{border-bottom:0}
td:last-child{font-family:var(--font-mono)}

/* FAQ */
.faq{display:grid;gap:var(--s2)}
.faq details{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:56px;padding:var(--s3) var(--s5);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:1.4rem;color:var(--red);transition:transform var(--t)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:var(--surface-2)}
.faq details p{padding:0 var(--s5) var(--s5);color:var(--muted);font-size:var(--text-sm);max-width:75ch}

/* Order form */
.order{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(var(--s6),4vw,var(--s12));align-items:start}
@media (max-width:900px){.order{grid-template-columns:1fr}}
.form{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);clip-path:var(--notch);padding:clamp(var(--s5),3vw,var(--s8))}
.field{display:grid;gap:6px;margin-bottom:var(--s5)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
label,.label{font-weight:600;font-size:var(--text-sm)}
.hint{font-size:var(--text-xs);color:var(--faint)}
input,select,textarea{width:100%;min-height:48px;background:var(--surface-off);border:1px solid var(--border);padding:var(--s3) var(--s4);font-size:1rem;line-height:1.5;border-radius:0}
input:hover,select:hover,textarea:hover{border-color:oklch(1 0 0 / .2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px var(--steel-dim)}
textarea{min-height:120px;resize:vertical}
::placeholder{color:var(--faint)}
.check{display:flex;gap:var(--s3);align-items:flex-start;background:var(--amber-dim);box-shadow:inset 0 0 0 1px oklch(.82 .14 78 / .3);padding:var(--s4);margin-bottom:var(--s5)}
.check input{width:22px;height:22px;min-height:0;flex:none;margin-top:2px;accent-color:var(--red)}
.check label{font-weight:400;color:var(--muted)}
.brief{display:none;margin-top:var(--s5)}
.brief.is-on{display:block}
.brief pre{white-space:pre-wrap;word-break:break-word;font:var(--text-xs)/1.7 var(--font-mono);background:var(--surface-off);box-shadow:inset 0 0 0 1px var(--border);padding:var(--s5);max-height:420px;overflow:auto}
.status{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--green);min-height:1.5em;margin-top:var(--s2)}
.aside{display:grid;gap:var(--s4);position:sticky;top:90px}
.contact{font-family:var(--font-mono);font-size:var(--text-sm);word-break:break-all}
.contact--missing{color:var(--amber)}

/* Sound demos */
.demo{display:flex;flex-direction:column;gap:var(--s3)}
.demo__wave{width:100%;height:56px;color:var(--steel)}
.demo__play{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:56px;padding:0 var(--s4);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);clip-path:var(--notch-sm);font-weight:600;text-align:left}
.demo__play:hover{background:oklch(.25 .01 285)}
.demo__play .pi{width:36px;height:36px;display:grid;place-items:center;background:var(--red);color:#fff;clip-path:var(--notch-sm);flex:none}
.demo__play .pi svg{width:16px;height:16px}
.demo__play[aria-pressed=true] .demo__wave,.demo.is-playing .demo__wave{color:var(--red)}
.demo__meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--faint);display:flex;justify-content:space-between}

/* Related */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s4);list-style:none}
.related .card{flex-direction:row;align-items:center;gap:var(--s4)}
.related .card div{flex:1}
.related .card h3{font-size:var(--text-base)}
.related .card>svg,.hub__go svg{width:20px;height:20px;color:var(--faint);transition:transform var(--t),color var(--t);flex:none}
a.card:hover>svg,a.card:hover .hub__go svg{transform:translate(3px,-3px);color:var(--red)}
.btn svg:last-child:not(:first-child){margin-left:2px}

/* Hub */
.hub>li{display:flex}
.hub__card{width:100%;gap:var(--s4)}
.hub__card h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);text-transform:uppercase;line-height:1.05}
.hub__art{width:100%;height:auto;background:var(--surface-off);box-shadow:inset 0 0 0 1px var(--border);padding:var(--s3);clip-path:var(--notch-sm)}
.hub__go{margin-top:auto;display:inline-flex;align-items:center;gap:var(--s2);font-weight:700;font-size:var(--text-sm);color:var(--text);padding-top:var(--s3)}

/* Inline graphics */
.g-box rect{fill:var(--surface);stroke:var(--border);stroke-width:1}
.g-text text{fill:var(--faint);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em}
.g-label,.g-label text{fill:var(--text);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;font-weight:500}
.g-steel{stroke:var(--steel)}
.g-red{stroke:var(--red)}
.g-faint{stroke:var(--faint)}
.g-dim{stroke:oklch(1 0 0 / .14)}
.g-node{fill:var(--surface-2);stroke:var(--red);stroke-width:2}
.g-mark circle,circle.g-mark{fill:var(--bg);stroke:var(--red);stroke-width:2.5}
.g-band rect{fill:oklch(1 0 0 / .03)}
.g-hot{fill:var(--red-dim)}
.g-cut{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 4;fill-opacity:1}
.g-axis{stroke:var(--border);stroke-width:1.5}
.art svg{width:100%;height:auto;overflow:visible}

/* Footer */
.footer{background:var(--surface-off);border-top:1px solid var(--border);padding-top:clamp(var(--s12),6vw,var(--s16))}
.footer__grid{display:grid;grid-template-columns:1.2fr .8fr 1.6fr;gap:var(--s10);padding-bottom:var(--s12)}
@media (max-width:800px){.footer__grid{grid-template-columns:1fr}}
.footer__brand img{width:64px;height:64px;margin-bottom:var(--s4);clip-path:var(--notch)}
.footer__name{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--text-xl);line-height:1}
.footer__small{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--faint);margin-top:var(--s2)}
.footer__h{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--red);font-weight:500;margin-bottom:var(--s3)}
.footer nav ul{list-style:none}
.footer nav a{display:inline-flex;min-height:44px;align-items:center;color:var(--muted);font-size:var(--text-sm)}
.footer nav a:hover{color:var(--text)}
.footer__note p{font-size:var(--text-xs);color:var(--muted);line-height:1.7}
.footer__note p+p{margin-top:var(--s2)}
.footer__base{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-block:var(--s5);border-top:1px solid var(--divider);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--faint)}
.footer__base a{min-height:44px;display:inline-flex;align-items:center}
.footer__base a:hover{color:var(--text)}

/* Reveal */
.reveal{animation:rise .7s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.2s var(--ease) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Sample tracks */
.tracks{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));list-style:none}
.track{display:flex;flex-direction:column;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);clip-path:var(--notch)}
.track img{width:100%;aspect-ratio:1;object-fit:cover}
.track__body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);flex:1}
.track h3{font-size:var(--text-base);line-height:1.25}
.track__alt{display:block;font-weight:400;font-size:var(--text-sm);color:var(--muted)}
.track p{font-size:var(--text-xs);color:var(--muted)}
.track__ctl{margin-top:auto;padding-top:var(--s3);display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:var(--s3);align-items:center}
.track__btn{grid-row:span 2;width:44px;height:44px;display:grid;place-items:center;background:var(--red);color:#fff;clip-path:var(--notch-sm)}
.track__btn:hover{background:var(--red-hover)}
.track__btn svg{width:16px;height:16px}
.track__btn .ico-pause,.track__btn[aria-pressed=true] svg:first-child{display:none}
.track__btn[aria-pressed=true] .ico-pause{display:block}
.track__seek{min-height:0;height:20px;padding:0;border:0;background:none;accent-color:var(--red);cursor:pointer}
.track__seek:focus{box-shadow:none}
.track__time{font-family:var(--font-mono);font-size:.7rem;color:var(--faint)}
.track.is-playing{box-shadow:inset 0 0 0 1px var(--red)}

[hidden]{display:none!important}
.tbl-notes td:last-child{font-family:inherit}
.check + .check{margin-top:calc(-1 * var(--s3))}
@media (max-width:1100px){.header__cta{display:none}}
.hub__wide{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:var(--s8)}
.hub__text{display:flex;flex-direction:column;gap:var(--s3)}
@media (max-width:800px){.hub__wide{grid-template-columns:1fr;gap:var(--s4)}}