@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#160b10;--text:#fff3ed;--muted:#bc9fa8;--accent:#ff657d;--line:#fbc7d71c}body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:radial-gradient(ellipse at 76% 34%,#74253d44,transparent 49%),var(--bg)}.wrap{width:min(1180px,calc(100% - 96px))}.header{height:100px}.brand{font-size:24px;letter-spacing:-1.2px}.brand-icon{background:var(--accent);color:#340f1c;border-radius:50% 50% 45% 45%;font-family:Georgia,serif;font-style:italic}.header-right{gap:24px}.iphone-label{border:1px solid #fa8fa738;color:#f0bdc7;padding:8px 12px;border-radius:20px}.hero{min-height:730px;grid-template-columns:1.08fr 1fr;gap:70px;padding:76px 0 90px}.intro{position:relative;z-index:1}.eyebrow{letter-spacing:2px;color:#ff99a9;font-size:10px}h1{font-size:clamp(66px,7.2vw,98px);font-weight:800;line-height:.99;letter-spacing:-6px;margin:25px 0}h1 em{font-family:inherit;font-style:normal;font-weight:800;letter-spacing:-6px;color:#ff7a90;background:linear-gradient(110deg,#ffb49d,#ff557d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.lede{font-size:15px;max-width:340px;line-height:1.9;color:#c3a4af;margin:26px 0 30px}.store-button{background:#fff0e9;border-radius:40px;padding:13px 24px;min-width:225px;box-shadow:0 12px 40px #fd476519}.store-button:hover{background:#ffc9d1}.download-note{color:#a68090;margin-top:17px}.mini-rule{background:#ff7c954d;margin-top:36px;margin-bottom:20px}.chapter>span{border:1px solid #b67d8b66;border-radius:5px;padding:4px;font-size:10px;color:#e7b6c5}.chapter{color:#aa8291}.chapter p{max-width:255px}.showcase{width:100%;max-width:460px;padding:0 0 0 65px;isolation:isolate}.showcase:before{content:'';position:absolute;inset:0 -60px 40px -30px;border:1px solid #ff8caa18;border-radius:50%;z-index:-2;transform:rotate(-28deg)}.showcase:after{content:'✦';position:absolute;top:-28px;right:5px;color:#ff9baf;font-size:45px;transform:rotate(15deg)}.video-card{width:300px;aspect-ratio:9/15.8;border-radius:140px 140px 24px 24px;box-shadow:0 25px 65px #08010580,0 0 0 6px #fff0ea08;border:1px solid #ffd0d429;transform:rotate(3deg)}.video-card video{object-position:50% 40%}.video-top{top:86px;left:20px;right:20px}.preview-pill{border-color:#ffdbdf55;background:#34111a44;border-radius:20px;font-size:8px;padding:7px 10px}.video-shade{background:linear-gradient(180deg,#36112211,transparent 35%,#26091050 55%,#1b070ff2)}.video-caption{bottom:24px;left:23px;right:23px}.video-caption h2{font-family:inherit;font-size:34px;font-weight:700;letter-spacing:-1.8px;white-space:pre-line}.video-caption p{color:#efd1dbcc}.category{color:#ffb4c5;letter-spacing:1.5px}.play-button{background:#ffffff26;width:73px;height:73px;top:43%;box-shadow:0 0 0 13px #ffffff08}.orbit-label{right:-5px;top:112px;color:#d8a3b5;font-size:8px}.under-video{margin:24px 0 0 -25px;color:#bd8f9f;font-size:9px;gap:8px}.portrait-back{position:absolute;left:-8px;top:38px;width:165px;height:250px;border-radius:95px 95px 16px 16px;overflow:hidden;transform:rotate(-12deg);z-index:-1;box-shadow:0 15px 35px #0005;border:4px solid #351824}.portrait-back img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}.portrait-back:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#240914cc)}.portrait-back>span{position:absolute;bottom:18px;left:14px;right:10px;font-size:9px;color:#ffe1e8;z-index:1}.floating-note{position:absolute;left:-32px;bottom:95px;display:flex;align-items:center;gap:10px;background:#4b2536ce;backdrop-filter:blur(18px);border:1px solid #ffa8c039;border-radius:14px;padding:12px 18px;box-shadow:0 15px 35px #0004;transform:rotate(-5deg)}.floating-note>span{color:#ff9bb4;font-size:30px}.floating-note p{font-size:11px;line-height:1.7;max-width:130px;margin:0;color:#ffe1e8;white-space:pre-line}.details{padding:31px 0 40px}.section-label{color:#d8a3b5}.details-grid{gap:50px;margin-top:26px}.details article{border-left:1px solid #ffa4bd25;padding-left:24px}.detail-number{color:#fa94ac}.details h3{font-size:17px;font-weight:600;letter-spacing:-.3px}.details p{color:#ac8595;font-size:12px}.footer{color:#9e7888}.footer>span:nth-child(2){max-width:560px;line-height:1.7}dialog{background:radial-gradient(at 50% 0,#6c273c,#26121c 65%);border-color:#fd98b140;border-radius:24px;padding-top:40px}.modal-art{background:linear-gradient(135deg,#ffadbc,#b12b50);color:#fff1ed;border-radius:50%;box-shadow:0 0 55px #ff507d33}dialog h2{font-family:inherit;font-weight:700;letter-spacing:-1px;white-space:pre-line}dialog p{color:#d6afbf}.modal-download{background:#ff7994;border-radius:30px;padding:18px 22px}.replay{color:#d6a6b7}dialog small{color:#b9879c}.mobile-bar{background:#25121eec}.mobile-bar small{color:#c49aaa}.mobile-bar button{background:#ff7c98;border-radius:30px;padding:13px 23px}.video-error{background:#2b0b1eee}.toast{background:#ffe5e9}.video-caption h2{overflow-wrap:anywhere}html[lang=zh] h1,html[lang=ja] h1{font-size:74px;letter-spacing:-3px}html[lang=de] h1,html[lang=pt] h1{font-size:75px;letter-spacing:-4px}@media(max-width:950px){.hero{gap:25px}.showcase{padding-left:42px}.video-card{width:270px}.portrait-back{width:140px;left:-8px}.floating-note{left:-12px}.wrap{width:calc(100% - 64px)}h1{font-size:72px;letter-spacing:-4px}h1 em{letter-spacing:-4px}}@media(max-width:600px){.wrap{width:calc(100% - 40px)}.header{height:78px}.brand{font-size:22px}.hero{padding:33px 0 35px;gap:33px;min-height:0;overflow:hidden;width:100%}.intro{padding:0 20px}.eyebrow{font-size:8px;letter-spacing:2px}h1{font-size:67px;letter-spacing:-4px;margin:19px 0 17px;line-height:1.02}h1 em{letter-spacing:-4px}.lede{max-width:295px;font-size:12px;line-height:1.85;margin:0 auto 23px}.store-button{padding:10px 22px;min-width:211px}.store-button strong{font-size:20px}.download-note{font-size:9px;margin-top:13px}.showcase{padding:0 0 0 34px;width:315px;max-width:calc(100vw - 50px)}.video-card{width:250px;max-width:100%;aspect-ratio:9/14.5;border-radius:125px 125px 20px 20px;transform:rotate(3deg)}.portrait-back{width:123px;height:195px;left:-9px;top:31px;border-width:3px}.portrait-back>span{font-size:8px;left:9px}.video-top{top:64px;left:17px;right:17px}.video-caption{left:19px;right:19px;bottom:18px}.video-caption h2{font-size:29px;margin:9px 0}.video-caption p{font-size:9px}.category{font-size:7px}.timeline{margin-top:14px}.video-meta{font-size:7px}.play-button{width:62px;height:62px}.floating-note{left:-12px;bottom:78px;padding:8px 12px;gap:7px}.floating-note p{font-size:9px;max-width:105px}.floating-note>span{font-size:25px}.orbit-label{right:1px;top:95px;font-size:7px}.showcase:after{right:5px;top:-20px;font-size:32px}.under-video{font-size:8px;margin-left:-27px;gap:5px}.spark{font-size:16px}.details{padding-top:25px}.details-grid{gap:0;margin-top:14px}.details article{border-left:0;padding:17px 0 17px 32px}.details h3{font-size:15px}.details p{font-size:11px}.footer{font-size:9px}html[lang=zh] h1,html[lang=ja] h1{font-size:53px;letter-spacing:-2px}html[lang=de] h1,html[lang=pt] h1{font-size:57px;letter-spacing:-3px}}@media(max-width:350px){h1{font-size:57px}.header-right{gap:8px}.brand{font-size:19px}.language select{max-width:88px}.showcase{padding-left:30px}.floating-note{left:0}}
/* Video first, copy and App Store CTA directly underneath on all screen sizes. */
.hero{display:flex;flex-direction:column;gap:42px;min-height:0;padding:46px 0 52px;overflow:hidden}
.hero .showcase{flex:none;align-self:center;margin:0 auto;width:400px;max-width:calc(100vw - 64px);padding-left:65px}
.hero .intro{width:100%;max-width:680px;padding:0 22px;text-align:center}
.hero .intro .eyebrow{justify-content:center}
.hero h1{font-size:clamp(38px,5.5vw,62px);line-height:1.13;letter-spacing:-2.7px;margin:16px 0 18px;overflow-wrap:anywhere}
.hero h1 em{letter-spacing:inherit}
.hero .lede{max-width:460px;margin:0 auto 24px;font-size:14px}
.hero .store-button{margin-inline:auto;max-width:100%}
.hero .download-note{line-height:1.7}
.hero .mini-rule,.hero .chapter{display:none}
.hero .showcase{max-width:calc(100vw - 64px)}
html[lang=zh] .hero h1,html[lang=zh-Hant] .hero h1,html[lang=ja] .hero h1,html[lang=ko] .hero h1{font-size:clamp(35px,5.5vw,54px);letter-spacing:-1.8px}
html[lang=de] .hero h1,html[lang=pt] .hero h1{font-size:clamp(36px,5vw,56px);letter-spacing:-2px}
html[dir=rtl] .header,html[dir=rtl] .footer,html[dir=rtl] .details,html[dir=rtl] .intro,html[dir=rtl] dialog,html[dir=rtl] .mobile-bar{direction:rtl}
html[dir=rtl] .showcase{direction:ltr}
html[dir=rtl] .video-caption{text-align:right;direction:rtl}
html[dir=rtl] .details article{border-left:0;border-right:1px solid #ffa4bd25;padding-left:0;padding-right:24px}
html[dir=rtl] .store-button span{text-align:right}
html[dir=rtl] .store-button .arrow{margin-left:0;margin-right:18px}
html[dir=rtl] .hero h1,html[dir=rtl] .hero h1 em{letter-spacing:0}
html[lang=th] .hero h1,html[lang=hi] .hero h1{letter-spacing:0;line-height:1.4}
html[lang=th] .hero h1 em,html[lang=hi] .hero h1 em{letter-spacing:0}
html[lang=th] .video-caption h2,html[lang=hi] .video-caption h2{font-size:26px;letter-spacing:0;line-height:1.4}
@media(max-width:600px){
 .hero{padding:30px 0 34px;gap:30px}
 .hero .showcase{width:315px;padding-left:34px;max-width:calc(100vw - 50px)}
 .hero .intro{padding:0 23px}
 .hero h1{font-size:43px;letter-spacing:-1.8px;margin:14px 0}
 .hero .lede{font-size:12px;max-width:310px;margin-bottom:21px}
 .hero .download-note{font-size:9px}
 html[lang=zh] .hero h1,html[lang=zh-Hant] .hero h1,html[lang=ja] .hero h1,html[lang=ko] .hero h1{font-size:39px;letter-spacing:-1.3px}
 html[lang=de] .hero h1,html[lang=pt] .hero h1{font-size:38px;letter-spacing:-1.5px}
 html[dir=rtl] .details article{border-right:0;padding:17px 32px 17px 0}
 html[dir=rtl] .detail-number{left:auto;right:0}
 .language select{max-width:116px}
 .mobile-bar>span{min-width:0;max-width:52%}
 .mobile-bar small{line-height:1.5}
 .mobile-bar button{max-width:45%;white-space:normal}
}
@media(max-width:350px){.hero h1{font-size:36px}.hero .intro{padding:0 18px}.header-right{gap:5px}.language select{max-width:85px}}
/* Landscape HLS player: full frame, no portrait crop, no tilted overlays. */
.hero .showcase{width:920px;max-width:calc(100% - 40px);padding:0;margin:0 auto;isolation:auto}
.hero .showcase:before,.hero .showcase:after,.hero .portrait-back,.hero .floating-note,.hero .orbit-label{display:none}
.hero .video-card{width:100%;max-width:100%;aspect-ratio:16/9;border-radius:18px;transform:none;box-shadow:0 20px 65px #08010565,0 0 0 1px #ffd0d422;border:0;background:#080609}
.hero .video-card video{object-fit:contain;object-position:center;background:#080609}
.hero .video-shade{background:linear-gradient(#0004,transparent 25%,transparent 75%,#0008)}
.hero .video-top{top:15px;left:16px;right:16px}
.hero .video-caption{bottom:14px;left:16px;right:16px}
.hero .video-caption .category,.hero .video-caption h2,.hero .video-caption p{display:none}
.hero .timeline{margin-top:0}
.hero .video-meta{margin-top:8px;font-size:9px}
.hero .play-button{top:50%;width:66px;height:66px;box-shadow:0 0 0 8px #ffffff08}
.hero .under-video{margin:17px 0 0;font-size:10px;text-align:center}
.hero .video-error{inset:48px 14px 40px;padding:10px;font-size:12px}
.hero .video-error p{margin:0 0 10px}
.redirect-status{font-variant-numeric:tabular-nums;min-height:22px;margin:17px 0 4px;font-size:12px;color:#f7bacb}
@media(max-width:600px){
 .hero{padding-top:20px;gap:25px}
 .hero .showcase{max-width:calc(100% - 24px);width:920px;padding:0}
 .hero .video-card{border-radius:12px;aspect-ratio:16/9}
 .hero .video-top{top:10px;left:12px;right:12px}
 .hero .video-caption{bottom:9px;left:12px;right:12px}
 .hero .preview-pill{font-size:7px;padding:5px 8px}
 .hero .play-button{width:49px;height:49px}
 .hero .sound{height:27px;width:27px}
 .hero .under-video{font-size:9px;margin-top:13px}
 .hero .video-meta{font-size:8px;margin-top:5px}
 .hero .video-error{inset:44px 9px 31px;font-size:10px}
 .hero .video-error button{padding:5px 13px;font-size:10px}
 .hero .video-error p{margin-bottom:5px}
}