:root{--paper:#f8f8f6;--ink:#17151f;--muted:#605b6b;--line:#e2dfe8;--brand:#6031df;--accent:var(--brand);--tint:#eee7ff;--header-height:97px;--dock-height:132px;--font-body:"eurostile",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-display:"eurostile-extended",Arial,sans-serif;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-strong:700;--type-body:18px;--type-body-large:19px;--type-label:20px;--type-control:16px;--type-control-large:17px;--type-caption:15px;--type-note:14px;--type-note-small:13px;--type-metadata:12px;color:var(--ink);background:var(--paper);font-family:var(--font-body);font-synthesis:none}
/* Resolve app materials at the palette owner, including nested product scopes. */
:root,[data-product],body[data-active-app]{--app-canvas:color-mix(in srgb,var(--tint) 50%,var(--paper));--control-surface:#fff;--control-hover:color-mix(in srgb,var(--accent) 5%,#fff);--control-selected:var(--accent);--control-selected-ink:#fff;--line-app:color-mix(in srgb,var(--accent) 18%,#fff)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 16px);scroll-padding-bottom:calc(var(--dock-height) + 16px)}
body{margin:0;background:var(--paper);min-height:100svh}
a{color:inherit;text-decoration:none}
button,audio,video{font:inherit}
button{cursor:pointer;color:inherit}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button[hidden],[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
img,video,canvas{max-width:100%}
img{height:auto;display:block}
figure,blockquote{margin:0}
h1,h2,h3,p{margin:0}
p{line-height:1.5}
h1,h2{font-family:var(--font-display);font-weight:var(--weight-medium);letter-spacing:-.04em;line-height:1.08}
h3{font-size:24px;line-height:1.15;letter-spacing:-.025em}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;z-index:30;top:-90px;left:16px;padding:14px 18px;background:white;border-radius:8px}
.skip:focus{top:12px}
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;min-height:var(--header-height);padding:16px 28px;background:#ffffffeb;backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:20px;max-width:100%;font-family:var(--font-display);font-size:32px;font-weight:var(--weight-strong);line-height:1;letter-spacing:-.04em}
.brand-name{display:block}
.brand-symbol{display:block;flex:none;width:84px;height:auto;aspect-ratio:930/680;overflow:hidden}
.site-header nav{display:flex;align-items:center;gap:28px;font-size:16px;font-weight:500}
.site-header nav>a{display:flex;align-items:center;min-height:44px;min-width:44px;border-bottom:2px solid transparent}
.site-header nav>a[aria-current]{border-bottom-color:var(--brand)}
.motion-control{padding:12px 0;border:0;background:transparent;display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px}
.motion-control i{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px #6031df13}
.motion-paused .motion-control i{background:#88818f;box-shadow:none}
.eyebrow{font-size:var(--type-metadata);letter-spacing:.09em;font-weight:var(--weight-strong);text-transform:uppercase}
.text-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:var(--type-control-large);font-weight:var(--weight-strong)}
.text-link:hover{color:var(--accent)}
.button{min-height:52px;padding:14px 20px;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;font-size:18px;font-weight:700;border-radius:12px;border:0}
.primary{background:var(--control-selected);color:var(--control-selected-ink)}
.primary:hover{filter:brightness(.94)}
[data-product="comfy"],body[data-active-app="comfy"]{--accent:#6131d7;--tint:#ebe0ff}
[data-product="aftertone"],body[data-active-app="aftertone"]{--accent:#af187f;--tint:#ffe0f3}
[data-product="iosamp"],body[data-active-app="iosamp"]{--accent:#086ac2;--tint:#daf1ff}
[data-product="edge"],body[data-active-app="edge"]{--accent:#007352;--tint:#d7f7e9}
[data-product="image"],body[data-active-app="image"]{--accent:#b4480f;--tint:#ffe6d0}
.app-icon{position:relative;width:100%;aspect-ratio:1;border-radius:23%;overflow:hidden}
.app-icon img,.app-icon canvas{position:absolute;inset:0;width:100%;height:100%}
.app-icon canvas{pointer-events:none}
.depth-reactive{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--press-scale,1));transform-origin:center}
.depth-active{will-change:transform}
.motion-paused .depth-reactive{transform:none}
.logo-scene{position:relative;width:100%;aspect-ratio:930/680;overflow:hidden;clip-path:polygon(0 7.353%,92.473% 7.353%,92.473% 0,100% 0,100% 100%,0 100%)}
.logo-scene img,.logo-scene canvas{position:absolute;left:-19.3548%;top:-58.8235%;width:129.0323%;height:176.4706%;max-width:none}
.logo-scene canvas{pointer-events:none}
summary{padding:19px 0;display:flex;justify-content:space-between;align-items:center;gap:18px;cursor:pointer;font-weight:700;list-style:none;font-size:18px;line-height:1.3}
summary::-webkit-details-marker{display:none}
summary span{font-size:24px;color:var(--accent)}
details{border-bottom:1px solid var(--line)}
details[open] summary span{transform:rotate(45deg)}
details p{padding:0 0 20px;color:var(--muted);font-size:17px}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding:20px 28px calc(var(--dock-height) + 24px + env(safe-area-inset-bottom));color:var(--muted);font-size:13px}
footer a{min-height:44px;display:flex;align-items:center;gap:12px}
footer a:hover{color:var(--accent)}
.back{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:16px;margin-top:10px}
.information{width:min(100% - 48px,940px);margin:24px auto 60px}
.information>.eyebrow{margin-top:24px}
.information h1{font-size:clamp(32px,5vw,56px);margin:18px 0}
.information-intro{font-size:22px;color:var(--muted);max-width:700px}
.information section{margin-top:32px;border-top:1px solid var(--line);padding-top:24px}
.information h2{font-size:28px;margin-bottom:16px}
.information section p,.information dd{font-size:18px;color:var(--muted);line-height:1.5}
.information section p+p{margin-top:16px}
.information section a{text-decoration:underline;text-underline-offset:4px}
.information dt{font-size:21px;font-weight:700;margin:20px 0 7px}
.information dd{margin:0}
/* Navigation becomes a compact native disclosure on phones. */
.header-menu{position:relative;border:0}
.header-menu>summary{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px 14px;border:1px solid #d7cbe5;border-radius:10px;font-size:16px;line-height:1}
@media(min-width:768px){.motion-ready .header-menu>summary{display:none}}
.header-menu nav{padding:0}
@media(max-width:1099px){:root{--header-height:89px}.brand{font-size:28px;gap:16px}.brand-symbol{width:76px}.site-header nav{gap:24px}}
@media(width <768px){
 :root{--header-height:84px;--dock-height:104px}
 .site-header{min-height:84px;padding:12px 16px;gap:8px;flex-wrap:nowrap}
 .brand{font-size:18px;gap:10px}.brand-symbol{width:58px}
 .header-menu{flex:none;align-self:center}
 .header-menu>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #d7cbe5;border-radius:10px;font-size:14px;font-weight:700;line-height:1;letter-spacing:0}
 .header-menu[open]>summary{color:var(--brand);background:#ede4ff}
 .header-menu nav{position:absolute;z-index:25;right:0;top:54px;display:grid;gap:0;min-width:180px;padding:8px 14px;border:1px solid #d7cbe5;border-radius:12px;background:#fff;box-shadow:0 12px 32px #22103920;font-size:18px}
 .site-header nav>a{min-height:48px;border:0}
 .site-header nav>a[aria-current]{color:var(--brand)}
 .motion-control{font-size:16px;min-height:48px;padding:8px 0}
 footer{padding-inline:20px;font-size:13px}
 .information{width:calc(100% - 40px);margin-top:12px}.information h1{font-size:34px}.information-intro{font-size:20px}
}
@media(width <390px){.site-header{padding-inline:12px}.brand{font-size:18px;gap:8px}.brand-symbol{width:48px}}
@media(max-width:359px){:root{--header-height:76px}.site-header{min-height:76px;padding:10px 12px}.brand{font-size:18px;gap:6px}.brand-symbol{width:48px}.information{width:calc(100% - 32px)}}
/* Size the phone wordmark against the space actually available to the header,
   including browsers with a visible scrollbar. Keep the brain and Apps target. */
@supports (font-size:1cqw){
 @media(width <768px){.site-header{container-type:inline-size}.brand{font-size:clamp(18px,calc(9.4cqw - 11.5px),23px)}}
}
@media(width <360px){.site-header{padding-inline:8px;gap:4px}.brand{font-size:18px;gap:2px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.depth-reactive{transform:none}}
html:has(body.motion-paused){scroll-behavior:auto}

/* The unchanged waveform bars fill only as their native recording advances. */
.sample-wave-shape{position:relative;display:block}
.audio-sample .sample-wave .sample-wave-shape>svg{opacity:.45}
.sample-wave-progress{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--sample-progress)) 0 0);pointer-events:none}
.audio-sample .sample-wave .sample-wave-progress>svg{opacity:1}