@font-face{font-family:Manrope;src:url('/fonts/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap} :root{--navy:#0d1626;--ink:#172133;--paper:#fafaf8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #d9ac66;outline-offset:5px}a{color:inherit}svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.symbols{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;left:16px;top:-100px;z-index:20;background:white;padding:12px}.skip-link:focus{top:12px}.site-header{position:relative;z-index:5;padding:8px 16px 0}.nav-bar{max-width:1536px;margin:auto;height:78px;padding:0 16px;display:flex;align-items:center;gap:10px;color:white;background:rgba(15,22,37,.94);border:1px solid rgba(15,22,37,.3);border-radius:12px;box-shadow:0 0 100px #0000001a;backdrop-filter:blur(20px)}.brand{display:block;flex:none;text-decoration:none}.brand-wide{display:none;width:250px;height:auto}.brand-mobile{width:112px;height:38px;stroke:none}.reserved-nav{flex:1;min-width:0}.utilities{display:flex;align-items:center;gap:4px}.icon-button{display:grid;place-items:center;flex:none;width:38px;height:38px;border:0;border-radius:12px;background:transparent;color:inherit;padding:8px;transition:background .15s}.icon-button svg{width:21px;height:21px}.icon-button:hover{background:#ffffff18}#menu-open svg{width:23px;height:23px}.hero{text-align:center;max-width:1400px;margin:auto;padding:92px 24px 42px}.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:700;margin:0 0 20px}.hero>.eyebrow{color:#9398a1;font-size:11px;letter-spacing:.28em;margin-bottom:24px}h1{font-size:clamp(48px,10.7vw,116px);font-weight:500;line-height:1.08;letter-spacing:-.065em;margin:0}h1 span{color:#7d8591}.hero-rule{width:36px;height:1px;background:#bac0c7;margin:35px auto 0}.listening{padding:20px 20px 80px}.player{max-width:900px;margin:0 auto;background:#fff;border:1px solid #e7e8e8;border-radius:16px;padding:25px 22px 12px;box-shadow:0 8px 40px #17213304}.track-heading{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:26px}.track-heading .eyebrow{font-size:8px;color:#8b929c;letter-spacing:.17em;margin-bottom:8px}h2{font-size:20px;font-weight:600;letter-spacing:-.035em;margin:0}.track-brand{font-size:11px;color:#8b929c}.playback-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.play-button{height:46px;width:46px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;color:white;background:var(--navy)}.play-button:hover{background:#2e3e56}.play-button svg{width:19px;height:19px;stroke-width:2}.play-button use[href='#play']{fill:currentColor;stroke:none}.waveform{position:relative;flex:1;min-width:80px;height:52px;border-radius:4px}.waveform:focus-within{outline:2px solid #d9ac66;outline-offset:4px}.waveform canvas{display:block;width:100%;height:100%}.waveform input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.time{width:100%;text-align:right;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#78818d;margin-top:-8px}.time-divider{color:#b8bdc5}.player-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0f1f2;margin-top:16px;padding-top:8px;gap:8px}.player-bottom>span{font-size:8px;letter-spacing:.13em;color:#959ba4;max-width:60%;line-height:1.6}.audio-options{display:flex;align-items:center;gap:8px;color:#89919c}.audio-options .icon-button{width:30px;height:30px;padding:6px}.audio-options .icon-button svg,.volume-icon{width:16px;height:16px}.audio-options .icon-button:hover{background:#f0f2f5}.audio-options [aria-pressed=true]{color:#172133;background:#edf0f4}.audio-options input{width:58px;height:24px;margin:0;accent-color:#344156;cursor:pointer}.site-footer{background:var(--navy);color:white;padding:40px 28px}.footer-inner{max-width:1456px;margin:auto}.footer-top{display:flex;flex-wrap:wrap;align-items:center;gap:24px}.footer-top>a{display:block;width:220px;max-width:70%}.footer-top img{width:100%;height:auto;display:block}.footer-top p{font-size:12px;color:#949da9;margin:0;width:100%;order:3}.footer-top>button{margin-left:auto}.footer-bottom{margin-top:42px;padding-top:22px;border-top:1px solid #ffffff14;color:#7f8998;font-size:10px;letter-spacing:.04em}dialog{color:inherit;border:0}dialog::backdrop{background:#080e19a6;backdrop-filter:blur(5px)}body.dialog-open{overflow:hidden}.menu-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:8px 16px 0;background:#0d1626;color:white}.menu-heading{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #ffffff13;max-width:1536px;margin:auto}.menu-heading img{display:block;width:180px;height:auto;max-width:65vw}.menu-space{min-height:calc(100dvh - 100px)}.utility-dialog{width:calc(100% - 40px);max-width:420px;padding:28px;background:#fff;border-radius:16px;box-shadow:0 24px 100px #0003}.utility-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.utility-heading .icon-button:hover{background:#eef0f3}.utility-dialog p{font-size:14px;color:#78808c;margin:20px 0 10px}
@media(max-width:389px){.nav-bar{padding:0 12px;gap:6px}.brand-mobile{width:96px}.utilities{gap:2px}.utilities .icon-button{width:35px;padding:7px}.track-brand{display:none}.hero{padding-top:76px}.hero h1{font-size:clamp(43px,11.8vw,48px)}}
@media(max-width:349px){.site-header{padding-left:12px;padding-right:12px}.nav-bar{padding:0 10px;gap:4px}.brand-mobile{width:84px}.utilities .icon-button{width:30px;height:38px;padding:5px}.utilities{gap:1px}.listening{padding-left:16px;padding-right:16px}.player{padding-left:18px;padding-right:18px}.track-heading .eyebrow{font-size:7px}.audio-options{gap:5px}}
@media(min-width:600px){.brand-mobile{display:none}.brand-wide{display:block;width:230px}.nav-bar{padding:0 24px}.hero{padding-top:112px;padding-bottom:50px}.hero h1 br{display:none}h1{font-size:clamp(60px,8.7vw,116px)}.hero-rule{margin-top:42px}.player{padding:30px 32px 15px}.track-heading .eyebrow{font-size:9px}.track-heading{margin-bottom:28px}h2{font-size:24px}.time{width:auto;margin:0;font-size:11px}.playback-row{flex-wrap:nowrap;gap:22px}.player-bottom>span{font-size:9px}.audio-options input{width:76px}.listening{padding-bottom:110px}.footer-top p{width:auto;order:0;margin-left:auto}.footer-top>button{margin-left:32px}.site-footer{padding:48px 40px}.footer-bottom{margin-top:50px}}
@media(min-width:1024px){.site-header{padding:24px 32px 0}.nav-bar{height:96px;padding:0 30px;gap:24px}.brand-wide{width:270px}.utilities{gap:15px}.hero{padding-top:132px;padding-bottom:64px}.hero>.eyebrow{margin-bottom:32px}.hero-rule{margin-top:48px}.listening{padding-bottom:132px}.menu-dialog{padding:24px 32px 0}.menu-heading{height:96px;padding:0 30px}.menu-heading img{width:270px}.site-footer{padding-top:56px;padding-bottom:40px}}
@media(max-width:1023px){.reserved-nav{display:none}.utilities{margin-left:auto}.brand-mobile{max-width:104px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Use the complete Desktop website logo at its original aspect ratio. */
.brand-logo{display:block;width:128px;height:auto}@media(max-width:1023px){.utilities{gap:2px}.utilities .icon-button{width:35px}.nav-bar{gap:8px}}@media(max-width:389px){.brand-logo{width:112px}}@media(max-width:349px){.brand-logo{width:100px}.utilities .icon-button{width:30px}.nav-bar{gap:4px}}@media(min-width:600px){.brand-logo{width:230px}}@media(min-width:1024px){.brand-logo{width:270px}}

/* Reference footer: generous mobile spacing, centered links and social row. */
.site-footer{background:#0d1626;padding:148px 24px 46px;color:#fff}
.site-footer .footer-inner{max-width:1456px;margin:auto;text-align:center}
.footer-links{display:flex;flex-direction:column;align-items:center;gap:24px}
.footer-links a{font-size:18px;font-weight:500;line-height:24px;text-decoration:none;cursor:default}
.footer-links a:last-child{font-size:16px;font-weight:400}
.footer-socials{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px}
.footer-socials a{display:grid;place-items:center;width:30px;height:30px;cursor:default}
.footer-socials svg{width:27px;height:27px}
.footer-copyright{margin:24px 0 0;font-size:13px;line-height:22px;font-weight:400;letter-spacing:-.025em}
@media(min-width:768px){.site-footer{padding:88px 40px 48px}.footer-links{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:24px 32px}.footer-links a,.footer-links a:last-child{font-size:15px}.footer-socials{margin-top:48px}.footer-copyright{margin-top:28px;font-size:13px}}

/* The original header remains visible; the menu is a separate inset panel. */
@media(max-width:1023px){.site-header{position:sticky;top:0;z-index:50}.nav-bar{background:#454c5b;border-color:#3d4553}}
.menu-panel{position:fixed;inset:auto;margin:0;padding:20px;border:1px solid #3d4553;border-radius:12px;background:#454c5b;color:#fff;height:445px;overflow:auto;box-shadow:0 4px 12px #0d162612}
.menu-panel::backdrop{background:transparent;backdrop-filter:none}
.menu-panel nav{min-height:100%}
@media(max-width:1023px){body.mobile-menu-open main,body.mobile-menu-open .site-footer{filter:blur(6px)}}

/* Stacked name and original icon share the existing reference-sized logo slot. */
.brand-lockup{display:flex;align-items:center;gap:4px;width:128px;height:38px;color:#fff}
.brand-mark{flex:none;width:60px;height:36px;stroke:none}
.brand-name{display:flex;flex-direction:column;justify-content:center;font-size:12px;font-weight:500;line-height:12px;letter-spacing:-.65px;white-space:nowrap}
@media(max-width:389px){.brand-lockup{width:112px}.brand-mark{width:50px}.brand-name{font-size:11.5px;line-height:12px;letter-spacing:-.8px}}
@media(max-width:349px){.brand-lockup{width:100px}.brand-mark{width:44px}.brand-name{font-size:10.5px;line-height:11px;letter-spacing:-.75px}}
@media(min-width:600px){.brand-lockup{width:230px;height:52px;gap:10px}.brand-mark{width:100px;height:52px}.brand-name{font-size:18px;line-height:18px;letter-spacing:-.7px}}
@media(min-width:1024px){.brand-lockup{width:270px;height:58px;gap:12px}.brand-mark{width:110px;height:58px}.brand-name{font-size:20px;line-height:20px;letter-spacing:-.7px}}

/* Relax lettering; the icon fills the same top-to-bottom span as the name. */
.brand-name{font-size:11.5px;line-height:12px;letter-spacing:-.15px}
.brand-mark{height:36px}
@media(max-width:389px){.brand-name{font-size:10.5px;line-height:12px;letter-spacing:-.15px}}
@media(max-width:349px){.brand-name{font-size:9.5px;line-height:11px;letter-spacing:-.15px}.brand-mark{height:33px}}
@media(min-width:600px){.brand-name{font-size:18px;line-height:18px;letter-spacing:0}.brand-mark{height:54px}}
@media(min-width:1024px){.brand-name{font-size:20px;line-height:20px;letter-spacing:0}.brand-mark{height:60px}.brand-lockup{height:60px}}

/* Solid vector mountain, deliberately simple for small header use. */
img.brand-mark{display:block;object-fit:fill}

/* Original uploaded black-on-white artwork, shown white on the dark header. */
img.brand-mark{object-fit:contain;filter:grayscale(1) invert(1);mix-blend-mode:screen}

/* Grow artwork and type together, using the available space before Search. */
@media(max-width:599px){
 .nav-bar{padding-left:8px;padding-right:8px;gap:4px}
 .utilities{gap:0;margin-left:0}
 .brand{flex:1;min-width:0}
 .brand-lockup{width:100%;height:58px;gap:4px}
 .brand-mark{flex:1;width:0;min-width:0;height:56px;object-position:right center}
 .brand-name{flex:none;font-size:14px;line-height:15px;letter-spacing:-.1px}
}
@media(min-width:390px) and (max-width:409px){.brand-name{font-size:13px;line-height:14px}.brand-mark{height:48px}}
@media(min-width:350px) and (max-width:389px){.brand-name{font-size:11.5px;line-height:12.5px}.brand-mark{height:40px}}
@media(max-width:349px){.brand-name{font-size:10.5px;line-height:11.5px}.brand-mark{height:38px}}
@media(min-width:600px) and (max-width:1023px){.brand-lockup{height:68px}.brand-mark{width:106px;height:68px}.brand-name{font-size:20px;line-height:21px}}
@media(min-width:1024px){.brand-lockup{height:80px}.brand-mark{width:120px;height:80px}.brand-name{font-size:24px;line-height:24px}}

/* Left-aligned Polywinkle Sonic Engineers branding, with larger artwork/type. */
.brand-lockup{justify-content:flex-start;text-align:left}
img.brand-mark{object-position:left center}
@media(max-width:599px){.brand-mark{height:60px}.brand-name{font-size:15px;line-height:16px;text-align:left}}
@media(min-width:390px) and (max-width:409px){.brand-mark{height:52px}.brand-name{font-size:14px;line-height:15px}}
@media(min-width:350px) and (max-width:389px){.brand-mark{height:44px}.brand-name{font-size:12.5px;line-height:13.5px}}
@media(max-width:349px){.brand-mark{height:42px}.brand-name{font-size:11.5px;line-height:12.5px}}
@media(min-width:600px) and (max-width:1023px){.brand-mark{height:72px}.brand-name{font-size:21px;line-height:22px}.brand-lockup{height:72px}}
@media(min-width:1024px){.brand-mark{height:84px}.brand-name{font-size:25px;line-height:25px}.brand-lockup{height:84px}}

/* Eight-pixel logo gap; utility glyphs enlarged 35% within their buttons. */
.brand-lockup{gap:8px}
.utilities .icon-button svg{width:28.35px;height:28.35px;flex:none}
.utilities #menu-open svg{width:31.05px;height:31.05px}
.utilities .icon-button{padding:0}
@media(max-width:599px){.brand-lockup{justify-content:flex-start}.brand-mark{flex:none;width:90px;height:auto}.brand-name{margin-left:0}}
@media(min-width:390px) and (max-width:409px){.brand-mark{width:74px}}
@media(min-width:350px) and (max-width:389px){.brand-mark{width:58px}}
@media(max-width:349px){.brand-mark{width:56px}}

/* Smaller glyphs and more room between header utilities. */
.utilities .icon-button svg{width:25.515px;height:25.515px}
.utilities #menu-open svg{width:27.945px;height:27.945px}
.utilities{gap:19px}
@media(max-width:1023px){.utilities{gap:4px}}
@media(max-width:599px){.nav-bar{padding-left:6px;padding-right:6px;gap:4px}.utilities{gap:3px}.brand-mark{width:78px}}
@media(min-width:390px) and (max-width:409px){.brand-mark{width:62px}}
@media(min-width:350px) and (max-width:389px){.brand-mark{width:46px}}
@media(max-width:349px){.utilities{gap:2px}.brand-mark{width:50px}}

/* VSL reference: Heroicons outline at 20px, menu/close at 22px. */
.utilities .icon-button svg{width:20px;height:20px;stroke-width:1.5;shape-rendering:geometricPrecision}
.utilities #menu-open svg{width:22px;height:22px}
.nav-bar,.menu-panel{background:#0c1424;color:#fff;border-color:#182235}

/* Current branding sits immediately above the footer copyright. */
.footer-brand{display:block;width:230px;max-width:100%;margin:30px auto 0;text-decoration:none;color:#fff}
.footer-brand .brand-lockup{display:flex;justify-content:center;align-items:center;width:100%;height:68px;gap:8px;text-align:left}
.footer-brand .brand-mark{flex:none;width:100px;height:68px;object-fit:contain;object-position:center}
.footer-brand .brand-name{flex:none;font-size:20px;line-height:21px;letter-spacing:0;margin:0;text-align:left}
.footer-copyright{margin-top:22px}

.footer-copyright{margin-top:6px}

/* Neutral-gray shell around the imported product page and its starfield. */
body{background:#141416;color:#f3f3f3;isolation:isolate}
.hero-starfield{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:#141416}
.nav-bar,.menu-panel{background:#242528;color:#fff;border-color:#3a3b3e}.site-footer{background:#1b1c1f}.site-header{position:sticky;top:0;z-index:60}main#main{min-width:0}
atlas-product{display:block}

/* Feature navigation belongs to the hamburger menu, with no visible scrollbars. */
html,body,*{scrollbar-width:none}*::-webkit-scrollbar{display:none;width:0;height:0}
.menu-panel{height:auto;min-height:112px;overscroll-behavior:contain;padding:20px}
.menu-panel nav{min-height:0}.shell-features,.shell-atlas-features{min-width:0}
.shell-features summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:8px 0;font-size:19px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.shell-features summary::-webkit-details-marker{display:none}
.shell-features summary:after{content:'';width:8px;height:8px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg);flex:none;margin:0 4px 4px 0}
.shell-features details[open]>summary:after,.shell-features[open]>summary:after{transform:rotate(225deg);margin-top:6px}
.shell-atlas-features{margin-top:8px;border-top:1px solid #ffffff20;padding-top:8px}
.shell-atlas-features>summary{font-size:16px}
.shell-feature-links{padding:12px 0 4px}.shell-feature-links .feature-list-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.shell-feature-links h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#bcbcbc;margin:8px 0 10px}
.shell-feature-links .feature-section-links,.shell-feature-links .feature-tool-links{display:flex;flex-direction:column;gap:2px}
.shell-feature-links a{display:block;text-decoration:none;color:#fff;font-size:15px;line-height:1.4;min-height:42px;padding:10px 8px;border-radius:6px;overflow-wrap:anywhere}
.shell-feature-links a:hover{background:#ffffff10}.shell-feature-links .feature-tool-group{border-top:1px solid #ffffff18;padding:4px 0}.shell-feature-links .feature-tool-group>summary{font-size:15px;min-height:44px}.shell-feature-links .feature-tool-links{padding-left:8px}
.menu-space .shell-features{max-width:960px;margin:24px auto;padding:0 16px}
@media(min-width:768px){.shell-feature-links .feature-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Header artwork enlarged 20%; footer branding retains its own dimensions. */
@media(max-width:599px){.site-header .brand-mark{width:93.6px}}
@media(min-width:390px) and (max-width:409px){.site-header .brand-mark{width:74.4px}}
@media(min-width:350px) and (max-width:389px){.site-header .brand-mark{width:55.2px}}
@media(max-width:349px){.site-header .brand-mark{width:60px}}
@media(min-width:600px) and (max-width:1023px){.site-header .brand-mark{width:127.2px;height:86.4px}.site-header .nav-bar{height:104px}}
@media(min-width:1024px){.site-header .brand-mark{width:144px;height:100.8px}.site-header .nav-bar{min-height:118px}}

/* Additional 15% on header artwork only; name typography stays unchanged. */
@media(max-width:599px){.site-header .brand-mark{width:107.64px}}
@media(min-width:390px) and (max-width:409px){.site-header .brand-mark{width:85.56px}}
@media(min-width:350px) and (max-width:389px){.site-header .brand-mark{width:63.48px}}
@media(max-width:349px){.site-header .brand-mark{width:69px}}
@media(min-width:600px) and (max-width:1023px){.site-header .brand-mark{width:146.28px;height:99.36px}.site-header .nav-bar{height:116px}}
@media(min-width:1024px){.site-header .brand-mark{width:165.6px;height:115.92px}.site-header .nav-bar{min-height:132px}}

@media(max-width:349px){.site-header .utilities .icon-button{width:26px;padding:2px}.site-header .utilities{gap:1px}}

@media(min-width:350px) and (max-width:599px){.site-header .utilities .icon-button{width:32px;padding:4px}}

/* Additional 10% artwork enlargement, retaining name typography. */
@media(max-width:599px){.site-header .brand-mark{width:118.404px}}
@media(min-width:390px) and (max-width:409px){.site-header .brand-mark{width:94.116px}}
@media(min-width:350px) and (max-width:389px){.site-header .brand-mark{width:69.828px}}
@media(max-width:349px){.site-header .brand-mark{width:75.9px}}
@media(min-width:600px) and (max-width:1023px){.site-header .brand-mark{width:160.908px;height:109.296px}.site-header .nav-bar{height:126px}}
@media(min-width:1024px){.site-header .brand-mark{width:182.16px;height:127.512px}.site-header .nav-bar{min-height:144px}}

@media(max-width:599px){.site-header .nav-bar{min-height:88px}}
@media(min-width:350px) and (max-width:599px){.site-header .utilities .icon-button{width:30px}}

.plugin-page-links{display:flex;flex-direction:column;gap:16px;padding:16px 0}.plugin-page-links a{color:inherit;text-decoration:none}

.currency-control{margin:26px auto 20px;text-align:center;max-width:420px}.currency-control label{font-size:13px;margin-right:8px}.currency-control select{background:#242528;color:white;border:1px solid #555;border-radius:6px;padding:8px;font:inherit;font-size:13px}.currency-control p{font-size:12px;margin:8px 0}.currency-control small{display:block;font-size:10px;line-height:1.5;opacity:.65;padding:0 12px}.currency-control a{color:inherit}

.menu-products .product-groups{padding:4px 0 12px}.menu-products .product-type{border-top:1px solid #ffffff20}.menu-products .product-type>summary{font-size:18px}.menu-products .product-subtype{margin-left:10px}.menu-products .product-subtype>summary{font-size:14px;min-height:42px}.menu-products .product-links{display:grid;gap:2px;padding:0 0 10px 8px}.menu-products a{display:block;padding:10px 8px;min-height:40px;font-size:14px;color:inherit;text-decoration:none;border-radius:6px;overflow-wrap:anywhere}.menu-products a:hover{background:#ffffff12}.menu-products .product-atlas{font-size:16px;font-weight:700;margin-left:10px}

/* Stable screen layer: canvas is absolute inside a fixed, pixel-sized frame. */
.starfield-frame{position:fixed;top:0;left:0;right:auto;bottom:auto;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;background:#141416;transform:translateZ(0)}.starfield-frame>.hero-starfield{position:absolute;inset:0;width:100%;height:100%;z-index:0}

/* Chrome Android top-toolbar collapse moves the top edge, not the bottom edge. */
.starfield-frame{top:auto;bottom:0}