*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--background);color:var(--text-primary);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}img{display:block;max-width:100%}h1,h2,p,figure{margin:0}h1,h2{font-weight:750;letter-spacing:-.055em;line-height:1.08;text-wrap:balance}h2{font-size:clamp(36px,4.3vw,62px)}.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.mono,.eyebrow{font-family:var(--mono)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:12px;left:12px;z-index:10;padding:12px 20px;background:var(--accent);color:var(--accentOn);transform:translateY(-200%)}.skip:focus{transform:none}.header{height:100px;display:flex;align-items:center;gap:48px;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:12px;font-size:25px;font-weight:780;letter-spacing:-.035em;white-space:nowrap}.header nav{display:flex;align-items:center;gap:30px;font-size:14px}.header nav a{padding:12px 0;color:var(--text-secondary)}.header nav a:hover,.header nav a:first-child{color:var(--accent)}.languages{margin-left:auto;display:flex;align-items:center;gap:8px;font:11px var(--mono);color:var(--text-muted)}.languages button{background:none;border:0;color:var(--text-secondary);padding:12px 3px;min-height:44px}.languages button[aria-pressed=true]{color:var(--accent);text-decoration:underline;text-underline-offset:8px}.languages select{width:27px;border:0;background:var(--background);color:var(--text-secondary);padding:12px 0;cursor:pointer}.languages select:focus{width:auto}.hero{position:relative;min-height:740px;isolation:isolate;display:flex;align-items:flex-start;padding-top:75px;padding-bottom:110px}.hero-art{position:absolute;z-index:-2;right:-48px;top:-100px;width:calc(100% + 96px);height:calc(100% + 100px);max-width:none;object-fit:cover;object-position:center}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--background) 0%,transparent 35%),linear-gradient(0deg,var(--background),transparent 12%);pointer-events:none}.hero-copy{width:52%;max-width:680px}.eyebrow{display:flex;align-items:center;gap:28px;font-size:11px;letter-spacing:2.5px;line-height:1.6;color:var(--accent);margin-bottom:26px}.index{display:flex;gap:22px;align-items:center;color:var(--text-muted);letter-spacing:1px}i{display:inline-block;width:44px;height:1px;background:var(--text-muted);font-style:normal}h1{font-size:clamp(52px,5.5vw,78px);max-width:660px}.lead{font-size:17px;line-height:1.65;color:var(--text-secondary);max-width:580px;margin-top:26px}.platforms{display:flex;gap:8px;align-items:stretch;margin-top:28px;flex-wrap:wrap}.store{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:13px 18px;min-height:60px;background:var(--accent);color:var(--accentOn);border-radius:var(--radius-lg);line-height:1.2;transition:transform var(--press-duration) var(--ease-out),filter var(--press-duration)}.store:hover{filter:brightness(1.12)}.store:active{transform:scale(.985)}.store small{display:block;font-size:10px;font-weight:600}.store strong{font-size:18px;letter-spacing:-.02em}.download-icon{font-size:28px;font-weight:500}.pending{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;border:1px solid var(--card-stroke);border-radius:var(--radius-lg);padding:12px 15px;background:var(--glass);color:var(--text-secondary);font-size:12px;cursor:not-allowed}.pending small{font-size:10px;color:var(--text-muted)}.hero-foot{position:absolute;bottom:36px;left:0;display:flex;gap:20px;align-items:center;color:var(--text-muted);font-size:10px;letter-spacing:1px}.hero-foot span:first-child{color:var(--accent)}.hero-foot b{font-weight:400}.story{display:grid;grid-template-columns:1fr 1fr;column-gap:8%;border-top:1px solid var(--separator);position:relative;padding:100px 18px 50px;min-height:760px;align-items:center;overflow:hidden}.section-label{position:absolute;left:18px;top:30px;display:flex;align-items:center;gap:24px;font-size:11px;letter-spacing:1.7px;color:var(--accent)}.section-label span:first-child{color:var(--text-muted)}.story-copy{max-width:510px;padding-bottom:25px}.story-copy>p:not(.eyebrow){margin-top:25px;color:var(--text-secondary);font-size:17px;line-height:1.7}.story-copy .eyebrow{font-size:10px;letter-spacing:1.6px}.visual{align-self:end;position:relative;min-width:0;padding:20px 15px 0}.visual:before{content:"";position:absolute;inset:15% -10% 0;z-index:-1;background:radial-gradient(ellipse,var(--ocean,var(--secondaryAccent)),transparent 65%);opacity:.17}.screen-crop{position:relative;width:min(100%,410px);height:610px;margin:auto;border-radius:var(--radius-xxl) var(--radius-xxl) 0 0;overflow:hidden;background:var(--surface);box-shadow:0 20px 40px rgb(0 0 0 / 50%)}.screen-crop img{position:absolute;width:120%;max-width:none;left:-10%;top:-35%;height:auto}.screen-crop.playing img{top:-28%}.playing{transform:rotate(-5deg);transform-origin:bottom center}.library{transform:rotate(4deg);transform-origin:bottom center}.visual figcaption{font-size:9px;color:var(--text-muted);margin-top:28px;text-align:center;letter-spacing:.6px}.track{margin-top:32px;padding-top:22px;border-top:1px solid var(--separator);font-size:11px}.track div{display:flex;gap:20px;margin:8px 0}.track dt{width:88px;flex-shrink:0;color:var(--text-secondary)}.track dd{margin:0;color:var(--text-secondary)}.inline-spec{display:flex;gap:18px;flex-wrap:wrap;padding-top:24px;margin-top:30px;border-top:1px solid var(--separator);font-size:11px;color:var(--accent);letter-spacing:.8px}.story-copy p.caveat{font-size:13px;border-left:2px solid var(--accent);padding-left:18px;line-height:1.6}.story-copy p.small-note,.small-note{font-size:12px;color:var(--text-muted)}.story-lab{min-height:670px}.story-lab .screen-crop{height:530px}.story-lab .screen-crop img{top:-40%}.faq{border-top:1px solid var(--separator);display:grid;grid-template-columns:1fr 1.25fr;gap:10%;padding:85px 18px}.faq h2{font-size:40px;max-width:330px}.faq .eyebrow{font-size:10px;letter-spacing:1.5px}.questions details{border-bottom:1px solid var(--separator);padding:20px 0}.questions details:first-child{padding-top:0}.questions summary{cursor:pointer;font-size:17px;font-weight:550;list-style:none;display:flex;justify-content:space-between;gap:20px}.questions summary::-webkit-details-marker{display:none}.questions summary:after{content:"+";color:var(--accent);font-size:22px;line-height:1.3}.questions details[open] summary:after{content:"−"}.questions p{color:var(--text-secondary);font-size:14px;margin-top:16px;max-width:600px}.closing{border-top:1px solid var(--separator);text-align:center;padding:100px 0 90px}.closing .eyebrow{justify-content:center;font-size:10px;letter-spacing:2px}.closing h2{max-width:770px;margin:auto;font-size:clamp(40px,5.2vw,70px)}.closing .store{margin-top:32px;font-size:15px;font-weight:650;gap:26px}.closing .small-note{margin-top:20px}.footer{display:flex;gap:30px;align-items:center;border-top:1px solid var(--separator);padding:28px 0 35px}.footer .brand{font-size:20px}.footer>p{font-size:10px;color:var(--text-muted)}.footer nav{display:flex;gap:22px;margin-left:auto;font-size:12px;color:var(--text-secondary)}.footer nav a:hover{color:var(--accent)}
@media(min-width:1600px){.hero-art{right:-70px;width:calc(100% + 140px)}.hero-copy{width:49%}}
@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.header{gap:26px}.header nav{gap:18px}.hero{padding-top:50px;min-height:680px}.hero-art{right:-28px;width:calc(100% + 56px)}.hero-copy{width:57%}h1{font-size:60px}.lead{max-width:470px;font-size:15px}.pending{padding:10px 12px}.story{column-gap:6%;padding-inline:0}.section-label{left:0}.screen-crop{height:560px}.story-copy>p:not(.eyebrow){font-size:16px}.footer{flex-wrap:wrap}.footer nav{gap:18px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:auto;min-height:118px;flex-wrap:wrap;column-gap:20px;row-gap:0;padding-block:18px}.brand{font-size:23px}.header .brand img{width:34px;height:34px}.header nav{order:3;width:100%;gap:22px;font-size:12px;overflow-x:auto;white-space:nowrap}.languages{gap:6px}.hero{padding-top:28px;display:block;min-height:0;padding-bottom:28px}.hero-copy{width:100%;max-width:100%}h1{font-size:clamp(44px,9.4vw,66px);max-width:580px}.eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:18px;gap:22px}.lead{max-width:540px;font-size:15px;margin-top:22px}.platforms{gap:7px;margin-top:24px}.store{min-height:55px;padding:11px 16px}.pending{padding:10px 12px;font-size:11px}.pending small{font-size:9px}.hero-art{position:relative;top:auto;right:auto;margin:12px -20px 0;width:calc(100% + 40px);height:470px;object-fit:cover;object-position:right center;z-index:-1}.hero:after{display:none}.hero-foot{position:static;margin-top:18px;gap:12px;font-size:8px;letter-spacing:.25px;flex-wrap:wrap}.story{grid-template-columns:1fr;padding:82px 0 36px;gap:36px;min-height:0}.story-copy{max-width:600px;padding-bottom:0}.story-copy h2{max-width:540px;font-size:clamp(38px,8.5vw,58px)}.story-copy>p:not(.eyebrow){font-size:15px;margin-top:22px}.story .visual{order:2;max-width:470px;justify-self:center;width:100%;padding:12px 22px 0}.screen-crop{width:min(100%,360px);height:550px}.screen-crop img{top:-37%}.screen-crop.playing img{top:-29%}.visual figcaption{margin-top:22px;font-size:8px}.track{font-size:10px;margin-top:24px}.track dt{width:82px}.story-lab .screen-crop{height:490px}.story-lab .screen-crop img{top:-41%}.faq{grid-template-columns:1fr;gap:32px;padding:60px 0}.faq h2{font-size:38px;max-width:500px}.questions summary{font-size:16px}.closing{padding:65px 0}.closing .eyebrow{font-size:8px;letter-spacing:1.2px}.closing h2{font-size:44px;max-width:540px}.footer{gap:18px;padding-block:25px}.footer>p{margin-left:auto}.footer nav{width:100%;margin:0;gap:18px;flex-wrap:wrap;font-size:11px}}
@media(max-width:380px){.wrap{width:calc(100% - 32px)}.hero-art{margin-inline:-16px;width:calc(100% + 32px);height:430px}.header nav{gap:18px}.platforms .store{width:100%}.pending{flex:1;align-items:center}.hero-foot{font-size:7px;gap:8px}.screen-crop{height:490px}.story-lab .screen-crop{height:440px}.screen-crop img{top:-36%}.screen-crop.playing img{top:-28%}.closing h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.store:active{transform:none}}
/* Approved mockup proportions and source-relative screenshot crops. */
.platform-icon{width:25px;height:25px;flex-shrink:0}.pending{flex-direction:row;align-items:center;gap:8px;padding-inline:12px}.pending .platform-icon{width:20px;height:20px}.pending-text{display:flex;flex-direction:column;gap:3px;text-align:left}.screen-crop img{top:0;transform:translateY(-25.84%)}.screen-crop.playing img{top:0;transform:translateY(-20.79%)}.story-lab .screen-crop img{top:0;transform:translateY(-25.84%)}
@media(min-width:761px) and (max-width:1100px){.wrap{width:calc(100% - 112px)}.header{height:80px;gap:28px}.header nav{gap:20px;font-size:12px}.hero{min-height:590px;padding-top:36px;padding-bottom:95px}.hero-art{top:-80px;right:-56px;width:calc(100% + 112px);height:calc(100% + 80px)}.hero-copy{width:58%}h1{font-size:clamp(58px,7.15vw,78px);max-width:600px}.hero .eyebrow{margin-bottom:21px}.lead{font-size:15px;margin-top:20px}.platforms{gap:7px}.pending{padding:11px 9px}.pending .platform-icon{width:18px;height:18px}.store{padding-inline:13px}.store strong{font-size:16px}.hero-foot{bottom:26px;font-size:8px;gap:17px}.story{min-height:575px;padding-top:78px;padding-bottom:28px;column-gap:7%}.story-copy h2{font-size:56px;max-width:430px}.visual{padding-inline:0}.screen-crop{height:445px;width:310px}.story-lab .screen-crop{height:430px}.story-copy>p:not(.eyebrow){font-size:15px;margin-top:23px}.track{font-size:10px;margin-top:24px}.section-label{top:26px}.visual figcaption{margin-top:22px}.story-copy .eyebrow{font-size:9px;letter-spacing:1.2px}.footer nav{gap:15px}}
@media(max-width:760px){.pending{align-items:center;padding:10px}.pending .platform-icon{width:18px;height:18px}.pending-text{text-align:left}.screen-crop img,.story-lab .screen-crop img{top:0}.screen-crop.playing img{top:0}}
.device-art{width:min(100%,440px);height:610px;margin:auto;overflow:hidden}.device-art img{width:100%;height:100%;object-fit:contain}.device-art.playing,.device-art.library{transform:none}.story-library .device-art{width:100%}
.device-art{position:relative}.device-art img{position:absolute;top:0;left:50%;width:100%;max-width:none;height:auto;transform:translateX(-50%);object-fit:initial}
@media(min-width:761px) and (max-width:1100px){.device-art{height:500px;width:100%}}
@media(max-width:760px){.hero{display:flex;flex-direction:column;align-items:stretch}.hero-copy{order:1}.hero-art{order:2;flex-shrink:0}.hero-foot{order:3}.device-art{width:100%;height:550px}}
@media(max-width:380px){.device-art{height:490px}}
/* The supplied Library capture stays complete, including its player and tabs. */
.library-shot{width:min(100%,320px);margin-inline:auto;overflow:hidden;border-radius:var(--radius-xxl)}
.library-shot img{display:block;width:100%;height:auto}
/* The sticky shell reserves expanded height while its visible menu compacts. */
.nav-shell{position:sticky;top:0;z-index:20;height:100px;pointer-events:none}
html{scroll-padding-top:calc(var(--header-height,100px) + 20px)}
.skip{z-index:30}
.header{position:relative;top:0;z-index:20;width:100%;pointer-events:auto;padding-inline:max(48px,calc((100% - 1280px)/2));background:transparent;border-bottom:1px solid transparent;transition:height .24s var(--ease-out),padding .24s var(--ease-out),background-color .45s var(--ease-out),border-color .45s var(--ease-out)}
.header.is-scrolled{height:64px;background:var(--glass);border-bottom-color:var(--separator);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header .brand{transition:font-size .24s var(--ease-out)}
.header.is-scrolled .brand{font-size:22px}
.header .brand img{transition:transform .45s var(--ease-out)}
.header.is-scrolled .brand img{transform:scale(.94)}
.header nav a{position:relative;transition:color .16s var(--ease-out)}
.header nav a:not([aria-current]):not(:hover){color:var(--text-secondary)}
.header nav a[aria-current]{color:var(--accent)}
.header nav a:after{content:"";position:absolute;bottom:6px;left:0;right:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .16s var(--ease-out)}
.header nav a[aria-current]:after{transform:scaleX(1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.header.is-scrolled{background:var(--surface)}}
@media(min-width:761px) and (max-width:1100px){.nav-shell{height:80px}.header{padding-inline:56px}}
@media(max-width:760px){.nav-shell{height:125px}.header{padding-inline:20px}.header.is-scrolled{height:88px;min-height:88px;padding-block:8px}.header.is-scrolled .brand{font-size:20px}.header.is-scrolled nav a{padding-block:8px}}
@media(max-width:380px){.header{padding-inline:16px}}
.offline-note{margin-top:26px;padding-left:18px;border-left:2px solid var(--accent)}
.offline-note h3{font-size:14px;font-weight:600}.offline-note p{font-size:13px;line-height:1.7;color:var(--text-secondary);margin-top:8px}
.hero-foot a{color:inherit;text-decoration:none}.hero-foot a:hover{color:var(--text-primary)}
.story-lab .story-copy h2{font-size:clamp(36px,3.8vw,54px)}
.pro-section{padding:82px 18px;border-block:1px solid var(--separator)}
.pro-header h2{max-width:790px;font-size:clamp(38px,4.5vw,64px);line-height:1.08;letter-spacing:-.045em;margin-top:24px}
.pro-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px;margin:52px 0 32px}
.pro-benefits article{border-top:1px solid var(--separator);padding-top:22px}
.pro-number{font-size:11px;color:var(--accent)}.pro-benefits h3{font-size:23px;line-height:1.25;margin:18px 0 16px}
.pro-benefits p{font-size:15px;line-height:1.8;color:var(--text-secondary)}
.pro-link{display:inline-flex;gap:20px;color:var(--accent);font-size:14px;margin-right:30px}
.pro-download{display:inline-flex;gap:24px;vertical-align:middle;font-size:14px}
.dsd-detail .small-note{font-size:12px!important;margin-top:20px;line-height:1.75}
@media(max-width:760px){.pro-section{padding:58px 0}.pro-benefits{grid-template-columns:1fr;gap:24px;margin-top:34px}.pro-benefits h3{font-size:22px;margin-block:12px}.pro-header h2{font-size:40px}.pro-link{margin-bottom:22px}.story-lab .story-copy h2{font-size:38px}.pro-download{max-width:100%}}
.source-list,.lab-tools{margin:28px 0 0}.source-list>div,.lab-tools>div{padding:15px 0;border-bottom:1px solid var(--separator)}
.source-list dt,.lab-tools dt{font-size:14px;font-weight:600;color:var(--text-primary)}
.source-list dd,.lab-tools dd{margin:6px 0 0;font-size:13px;line-height:1.65;color:var(--text-secondary)}
.formats{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;padding:82px 18px;border-block:1px solid var(--separator)}
.formats h2{font-size:clamp(38px,4vw,58px);letter-spacing:-.045em;line-height:1.07;margin:20px 0 26px}
.formats p:not(.eyebrow){font-size:15px;line-height:1.8;color:var(--text-secondary)}
.format-types{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;font-size:12px;color:var(--accent)}
.format-display{display:block;font-size:80px;line-height:1;color:var(--text-primary);letter-spacing:-.06em}
.format-display span{display:block;font-size:28px;letter-spacing:-.03em;color:var(--accent);margin:12px 0 30px}
.dsd-detail h3{font-size:20px;margin-bottom:16px}
@media(max-width:760px){.formats{grid-template-columns:1fr;gap:38px;padding:58px 0}.format-display{font-size:64px}.source-list,.lab-tools{margin-top:22px}.source-list>div,.lab-tools>div{padding-block:13px}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.library-shot,.device-art,.screen-crop{transition:transform .45s cubic-bezier(0,0,.58,1)}
.visual:hover .library-shot,.visual:hover .device-art,.visual:hover .screen-crop{transform:translateY(-6px)}
.store{transition:transform .16s ease-out,filter .16s ease-out}
.store:hover{transform:translateY(-2px)}
}
/* Keep the complete Now Playing device visible at every breakpoint. */
.device-art.playing{height:auto;aspect-ratio:2/3}
.device-art.playing img{position:static;width:100%;height:auto;transform:none}
/* Real screenshots inside a shared photographic hardware frame. The percentages
register the supplied frame's transparent display aperture, not app UI tokens. */
.studio-phone{position:relative;width:min(100%,560px);aspect-ratio:2/3;margin-inline:auto;--phone-yaw:0deg;--phone-roll:0deg;transform:perspective(1400px) rotateY(var(--phone-yaw)) rotate(var(--phone-roll));transform-origin:center;isolation:isolate}
.studio-phone .phone-display{position:absolute;left:20.5%;top:5.1%;width:59%;height:88.5%;background:var(--background);clip-path:inset(0 round 13% / 6%)}
.studio-phone .phone-display img{width:100%;height:100%;object-fit:contain}
.studio-phone .phone-hardware{position:relative;z-index:1;width:100%;height:auto;pointer-events:none}
.phone-library{--phone-yaw:-4deg;--phone-roll:-1deg}
.phone-lab{--phone-yaw:7deg;--phone-roll:2deg}
.story-library .visual,.story-lab .visual,.story-signal .visual{align-self:center}
@media(max-width:760px){.studio-phone{width:min(100%,500px);--phone-yaw:0deg;--phone-roll:0deg}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.studio-phone{transition:transform .45s var(--ease-out)}.visual:hover .studio-phone{transform:perspective(1400px) rotateY(var(--phone-yaw)) rotate(var(--phone-roll)) translateY(-6px)}}
/* Crop only the frame asset's empty outer margin on narrow viewports. */
@media(max-width:760px){.studio-phone{width:130%;max-width:none;margin-left:-15%;margin-right:0}}
/* Pro capture: fill the display, trimming only the screenshot side gutters. */
.phone-lab{--phone-yaw:3deg;--phone-roll:1deg}
.phone-lab .phone-display img{object-fit:cover}
@media(max-width:760px){.phone-lab{--phone-yaw:0deg;--phone-roll:0deg}}