@font-face{font-family:Cabinet;src:url('/fonts/cabinet-grotesk-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:light;--paper:#f6f8fa;--silver:#e5ebf0;--ink:#17232e;--muted:#5d6873;--blue:#245cdb;--cyan:#008cae;--amber:#b56905}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button,select{cursor:pointer}button{color:inherit}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.symbol-library{position:absolute;width:0;height:0;overflow:hidden}button{border:0}a,button,input,select,summary{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid #008cae;outline-offset:5px}.wrap{width:min(1100px,calc(100% - 64px));margin-inline:auto}.skip-link{position:fixed;top:12px;left:12px;z-index:10;transform:translateY(-160%);padding:12px;background:white}.skip-link:focus{transform:none}.hero-backdrop{position:relative;isolation:isolate;overflow:hidden;background:transparent}.hero-waves{position:absolute;z-index:-2;pointer-events:none;top:280px;left:0;width:100%;height:calc(100% - 280px);fill:none;stroke:none;opacity:.72;mask-image:linear-gradient(transparent,black 20%,black 78%,transparent)}.hero-backdrop:after{content:'';position:absolute;inset:auto 0 0;height:100px;background:linear-gradient(transparent,var(--paper));z-index:-1;pointer-events:none}.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-family:Cabinet,sans-serif;font-weight:650;font-size:18px;letter-spacing:-.4px}.brand img{border-radius:9px}.site-header nav{display:flex;align-items:center;gap:30px;font-size:16px;color:#4c5964}.site-header nav a:hover{color:var(--blue)}.hero{text-align:center;padding:140px 0 70px}.hero h1{font-family:Cabinet,sans-serif;font-size:clamp(46px,5.6vw,76px);font-weight:700;line-height:1.04;letter-spacing:-3.2px;margin:0 0 28px}.hero-copy>p:not(.compatibility){margin:0 0 36px;color:var(--muted);font-size:18px;line-height:1.6}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:13px;font-size:16px;font-weight:600;position:relative;isolation:isolate;overflow:hidden}.button.primary{color:white;background:var(--ink);box-shadow:inset 0 1px 0 #ffffff25,0 3px 5px #17232e15}.button:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/button-waves.svg?v=gradient-2') 0 center / 360px 100% repeat-x;opacity:0;transition:opacity .35s ease;animation:button-waves-flow 4.8s linear infinite paused}.button:is(:hover,:focus-visible):before{opacity:.45;animation-play-state:running}@keyframes button-waves-flow{to{background-position:-360px center}}.button svg{width:17px;height:17px}.compatibility{font-size:15px;color:#65717c;line-height:1.7;margin:12px 0 0}
figure{margin:0}figure img{display:block;width:100%;height:auto}
.app-shot{width:min(930px,100%);margin:130px auto 0;border-radius:17px;overflow:hidden;box-shadow:0 40px 65px -22px #2b4b6955,0 6px 18px #182f4728,0 0 0 5px #ffffff30}
.hero-copy>p:not(.compatibility){max-width:480px;margin-inline:auto}
.feature-section{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:90px;padding-block:100px}
.feature-copy h2,.download-section h2{font-family:Cabinet,sans-serif;font-weight:650;font-size:46px;line-height:1.08;letter-spacing:-1.6px;margin:0 0 22px}
.feature-copy p{font-size:19px;line-height:1.65;color:var(--muted);margin:0;max-width:410px}
.product-scene{padding:38px 26px;border-radius:22px;background:linear-gradient(135deg,#e1ebf2,#cfdfed 55%,#e9eef2)}
.product-scene img{border-radius:17px;box-shadow:0 18px 35px #34445b26}
.eq-section{grid-template-columns:1.15fr .85fr;padding-top:20px}
.equalizer-scene{background:linear-gradient(160deg,#e8edf3,#e1e5ef)}
.equalizer-scene img{border-radius:12px}
.remember-section{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding:65px 0 105px}
.remember-section h2{font-size:36px;letter-spacing:-1px}.remember-section p{max-width:430px;font-size:18px}
.settings-shot{padding:16px;background:#1e1e24;border-radius:17px;box-shadow:0 12px 25px #182f4710}
.site-footer{position:relative;isolation:isolate;overflow:hidden;background:#eaf0f6;color:#4b5e70;font-size:16px}
.download-section{position:relative;padding-block:100px 110px;text-align:center}
.download-section h2{color:var(--ink);font-size:44px;letter-spacing:-1.6px;margin:0 0 26px}
.download-section .compatibility{color:#4b5e70;margin-top:15px}
.footer-inner{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:25px 29px}
.footer-author span{color:var(--ink)}.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px}.site-footer a{padding-block:8px}.site-footer .button{padding-block:14px}.site-footer a:hover{color:var(--blue)}.site-footer .button:hover{color:white}
html{scroll-padding-top:110px}.skip-link{z-index:100}
.floating-header{position:fixed;z-index:80;top:14px;left:50%;width:min(1060px,calc(100% - 28px));min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 12px 10px 18px;border:1px solid #fff9;border-radius:17px;background:#edf3f8dd;box-shadow:0 12px 40px #18384e18;backdrop-filter:blur(26px) saturate(1.2);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-135%);transition:opacity .2s,visibility .2s,transform .3s ease}
.floating-header.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.floating-header .brand{font-size:18px}.floating-header nav{display:flex;align-items:center;gap:28px;font-size:16px}.floating-header .button{font-size:16px;padding:12px 18px;min-height:42px}
@media(min-width:1600px){.hero{padding-top:160px}.hero h1{font-size:80px}.app-shot{margin-top:150px}}
@media(max-width:900px){.wrap{width:calc(100% - 44px)}.hero{padding-top:110px}.hero h1{font-size:64px}.feature-section{gap:40px;padding-block:75px}.feature-copy h2{font-size:38px}.feature-copy p{font-size:18px}.remember-section{gap:40px;padding-bottom:75px}.remember-section h2{font-size:32px}.product-scene{padding:24px 18px}}
@media(max-width:650px){.wrap{width:calc(100% - 36px)}.site-header{height:72px;gap:12px}.brand{font-size:16px;gap:7px}.brand img{width:30px;height:30px}.site-header nav{gap:18px;font-size:16px}.site-header nav a:first-child{display:none}.hero-backdrop .site-header nav a:first-child{display:inline}.hero-backdrop .site-header nav a:last-child{display:none}.hero{padding-top:90px;padding-bottom:44px}.hero h1{font-size:52px;letter-spacing:-2px}.hero-copy>p:not(.compatibility){font-size:18px;max-width:340px;margin:0 auto 32px}.app-shot{margin-top:90px;border-radius:7px;box-shadow:0 18px 30px -12px #2b4b6940}.feature-section{grid-template-columns:1fr;gap:30px;padding-block:60px}.feature-copy{max-width:390px}.feature-copy h2{font-size:40px;margin-bottom:17px}.feature-copy p{max-width:360px}.eq-section{padding-top:15px}.eq-section .feature-copy{grid-row:1}.product-scene{padding:24px 20px}.remember-section{grid-template-columns:1fr;gap:26px;padding-block:45px 65px}.remember-section h2{font-size:34px}.download-section{padding-block:74px 88px}.download-section h2{max-width:300px;margin-inline:auto;font-size:36px;letter-spacing:-1.1px}.site-footer{background-position:55% bottom}.footer-inner{flex-direction:column;gap:8px;padding-block:18px 24px}.site-footer nav{gap:24px}.hero-waves{top:330px;height:calc(100% - 330px);opacity:.6}.floating-header{top:9px;padding:8px 9px 8px 12px;gap:8px}.floating-header .brand{font-size:16px;gap:6px}.floating-header .brand img{width:28px;height:28px}.floating-header nav{gap:0}.floating-header nav>a:first-child{display:none}.floating-header .button{font-size:16px;padding:10px 12px;gap:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

@media(max-width:380px){.floating-header .brand span{max-width:100px;line-height:1.15}.floating-header .button{padding-inline:10px}}

.footer-waves{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;fill:none;stroke:none}

.feature-section>.feature-copy,.feature-section>figure,.remember-section>.feature-copy,.remember-section>figure{transform:translate3d(0,var(--section-offset,0px),0)}
@media(max-width:420px){.site-header .button .button-platform,.floating-header .button .button-platform{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.brand span{max-width:160px;line-height:1.2}.floating-header .button{white-space:nowrap}}
@media(max-width:380px){.hero-backdrop .site-header .brand span{max-width:120px}}
@media(prefers-reduced-motion:reduce){.feature-section>.feature-copy,.feature-section>figure,.remember-section>.feature-copy,.remember-section>figure{transform:none}}

/* A quiet halftone texture across the light surfaces, fading near the copy. */
body{position:relative;isolation:isolate}
body:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#617fa94a 1px,transparent 1.45px);background-size:12px 12px;mask-size:100% 1000px;mask-repeat:repeat-y;mask-image:radial-gradient(ellipse at 2% 68%,#000b,transparent 52%),radial-gradient(ellipse at 98% 16%,#0009,transparent 48%),radial-gradient(ellipse at 85% 100%,#0006,transparent 45%);animation:ambient-dots-drift 16s ease-in-out infinite alternate}
@keyframes ambient-dots-drift{0%{background-position:-6px -4px}100%{background-position:6px 8px}}
@media(max-width:650px){body:before{background-size:11px 11px;opacity:.7}}
@media(prefers-reduced-motion:reduce){body:before{animation:none;transform:none}}

.github-link{display:inline-flex;align-items:center;gap:8px}.github-icon{width:18px;height:18px;fill:currentColor;stroke:none}
.download-section .kofi-support{margin-top:24px;background:var(--blue);color:#fff;box-shadow:inset 0 1px 0 #ffffff25,0 3px 5px #17232e15}
.kofi-support img{width:28px;height:23px;object-fit:contain;flex-shrink:0}

/* 0.4.0: new device features use the existing screenshot-and-copy rhythm. */
.routing-section{padding-top:20px}.routing-scene{background:linear-gradient(145deg,#e1eaf3,#dce7ed 55%,#eaeef2)}
.devices-scene{background:linear-gradient(150deg,#e3edf1,#d7e8ee 55%,#e9eef2)}
.feature-copy .feature-note{font-size:16px;line-height:1.65;margin-top:18px}
.release-disclosure{font-size:14px;line-height:1.6;color:#4b5e70;margin:10px auto 0;max-width:440px}
.release-disclosure a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:650px){.routing-section{padding-top:15px}.release-disclosure{max-width:320px}}

/* The arrow travels through the icon; its tray stays in place. */
.download-icon{overflow:hidden}
.button:is(:hover,:focus-visible) .download-arrow{animation:download-arrow-cycle .6s cubic-bezier(.4,0,.2,1)}
@keyframes download-arrow-cycle{
  0%{transform:translateY(0);opacity:1}
  42%{transform:translateY(15px);opacity:0}
  43%{transform:translateY(-15px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@media(prefers-reduced-motion:reduce){.button:is(:hover,:focus-visible) .download-arrow{animation:none}}

@media(max-width:650px){
  .footer-waves{inset:auto 0 0;height:min(100%,300px);mask-image:linear-gradient(transparent,#000 25%)}
  .feature-section>.feature-copy,.feature-section>figure,.remember-section>.feature-copy,.remember-section>figure{transform:none}
}