/* Cinema stage. Decorative film and devices use separate, flat layers. */
:root {
  --hero-progress: 0; --scroll-progress: 0; --story-progress: 0;
  --pointer-x: 0; --pointer-y: 0;
  --bg: #09090f; --lime: #eee9ff; --violet: #b8a0f7;
}
body { background: var(--bg); }
#atmosphere { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .38; }
.reading-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(var(--scroll-progress)); transform-origin: left; background: linear-gradient(90deg,#8e75e5,#e5cbff); z-index: 100; }
.nav { position: relative; z-index: 10; height: 94px; border-color: #ffffff0e; }
.nav-controls { display: flex; align-items: center; gap: 18px; }
.nav nav { gap: 23px; }
#language-select { max-width: 145px; background: #14121c; color: #c6bdd7; border: 1px solid #332c40; border-radius: 9px; font: inherit; font-size: 11px; padding: 9px 7px; cursor: pointer; }
.motion-toggle { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid #332c40; border-radius: 50%; background: #14121c; color: #c6bdd7; }
.motion-toggle span { display: block; width: 9px; height: 10px; border-inline: 2px solid currentColor; }
.motion-off .motion-toggle span { border: 0; width: 9px; height: 11px; clip-path: polygon(0 0,100% 50%,0 100%); background: currentColor; }
.hero { position: relative; isolation: isolate; grid-template-columns: 1fr 1.06fr; min-height: 640px; padding-block: 58px 78px; gap: 30px; }
.hero-copy { min-width: 0; transform: none; }
.hero .eyebrow { font-size: 10px; letter-spacing: 1.6px; color: #a39ab7; margin-bottom: 24px; }
.dot { background: #c3adff; box-shadow: 0 0 12px #ae87ff50; }
.hero h1 { font-size: clamp(56px,5.8vw,82px); font-weight: 650; letter-spacing: -.062em; line-height: 1.06; margin-bottom: 24px; overflow-wrap: anywhere; }
.title-line { display: block; }
.hero h1 .title-line:first-child { color: #f6f3fa; }
.chromatic { background: linear-gradient(110deg,#b79af7 5%,#e5baff 65%,#cbd4ff); background-clip: text; -webkit-background-clip: text; color: transparent !important; }
.intro { font-size: 17px; line-height: 1.75; max-width: 425px; color: #aca4b9; margin-bottom: 28px; }
.hero-actions { gap: 22px; flex-wrap: nowrap; }
.hero-actions .primary { display: grid; grid-template-columns: minmax(0,1fr) 25px; gap: 16px; min-height: 54px; padding: 13px 16px 13px 22px; background: #eee9ff; color: #221436; border: 1px solid #ffffff40; border-radius: 12px; box-shadow: 0 8px 28px #8971ca17; transition: background .2s,transform .2s; }
.hero-actions .primary>span:last-child { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #d7caf3; font-size: 16px; }
.hero-actions .primary:hover { background: #fff; transform: translateY(-2px); }
.primary { color: #221436; }
.primary:hover { background: #fff; }
.hero-facts { margin-top: 25px; font-size: 10px; color: #8d859d; gap: 16px; flex-wrap: wrap; }
.hero-facts li+li:before { margin-right: 16px; color: #62576f; }
.device-scene { position: relative; display: grid; grid-template-columns: minmax(0,1fr); place-items: center; justify-content: stretch; width: 100%; aspect-ratio: 1.35; min-height: 0; margin: 0; padding: 42px 10px 54px; isolation: isolate; transform: none; transform-style: flat; perspective: none; }
.scene-glow { position: absolute; inset: 12% 0 9%; z-index: -1; background: radial-gradient(ellipse,#47216b40,transparent 67%); pointer-events: none; }
.film-ribbon-field { position: absolute; inset: -8% -5% 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cinema-film { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .85; transform: translateY(calc(var(--hero-progress)*-8px)); }
.screen-assembly { position: relative; width: 93%; padding-bottom: 27px; z-index: 2; isolation: isolate; }
.device-scene .tv { position: relative; top: auto; width: 100%; max-width: none; aspect-ratio: 16/9; padding: 7px; border-radius: 12px; border: 1px solid #776b893b; border-top-color: #cbbce095; background: linear-gradient(135deg,#3b3447,#14111d 40%,#26202e); box-shadow: 0 28px 45px #0009,0 0 0 1px #09080d; transform: perspective(1000px) rotateY(calc(-7deg + var(--pointer-x)*9deg)) rotateX(calc(var(--pointer-y)*-5deg)) rotateZ(-1deg); transition: transform .45s ease; }
.tv-screen { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; justify-items: center; justify-content: stretch; align-items: center; gap: 3px; height: 100%; min-height: 0; border-radius: 6px; padding: 5% 6% 4%; background: radial-gradient(ellipse at 53% 22%,#68119155,transparent 74%),linear-gradient(110deg,#060b24 0%,#1c0b36 48%,#120c2d 76%,#060b24 100%); }
.screen-logo { display: block; width: auto; height: 100%; min-height: 0; max-height: 100%; max-width: 65%; aspect-ratio: 1; mix-blend-mode: lighten; object-fit: contain; filter: none; mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent); mask-composite: intersect; }
.screen-bottom { position: static; max-width: 100%; justify-content: center; gap: 8px; margin: 0; font-size: 9px; line-height: 1.4; text-align: center; color: #b9a6d0; }
.screen-play { width: 17px; height: 17px; flex: 0 0 17px; line-height: 16px; font-size: 6px; border-color: #8c739b60; }
.tv-light { bottom: 2px; height: 1px; width: 4px; background: #a99ab6; }
.tv-neck { position: absolute; bottom: 8px; left: 47%; width: 6%; height: 22px; background: linear-gradient(90deg,#17121c,#342a3c,#151019); z-index: -1; }
.device-scene .tv-foot { bottom: 0; left: 31%; width: 38%; height: 10px; background: linear-gradient(#4b3a55,#17121c); border-radius: 50%; clip-path: none; box-shadow: 0 6px 10px #0009; }
.remote { width: 49px; height: 170px; bottom: 22%; right: 0; z-index: 3; border: 1px solid #65596d; border-radius: 24px; background: linear-gradient(110deg,#29232f,#141018 65%); box-shadow: 5px 14px 24px #000b; transform: rotate(9deg); }
.remote-power { margin: 12px 0; color: #b5a4c5; }
.remote-ring { width: 33px; height: 33px; border-width: 6px; border-color: #3c3246; }
.remote-back { margin: 12px 0; }
.remote-line { width: 24px; margin-top: 9px; height: 2px; }
.device-scene figcaption { display: flex; align-items: center; gap: 8px; left: 9%; right: 6%; bottom: 10px; color: #8e819e; font-size: 9px; text-align: left; }
.device-scene figcaption .dot { flex: 0 0 4px; }
.scroll-cue { display: flex; align-items: center; gap: 10px; position: absolute; bottom: 18px; left: 0; color: #746981; font-size: 8px; letter-spacing: 1.6px; }
.scroll-cue>span:first-child { width: 14px; height: 24px; border: 1px solid #68566f; border-radius: 10px; position: relative; }
.scroll-cue>span:first-child:after { content: ''; position: absolute; width: 2px; height: 6px; left: 5px; top: 5px; border-radius: 2px; background: #c2a7e2; animation: scroll-dot 2s ease infinite; }
.platform-strip { background: #13101b; border-color: #ffffff0d; }
.platform-strip .wrap { padding-block: 23px; }
.platform-strip strong { color: #c9c0d5; font-weight: 500; }
.platform-strip .wrap i { color: #9b83b8; }
.platform-strip>div>span { color: #82718f; }
.experience{height:185svh;position:relative;background:radial-gradient(ellipse at 75% 48%,#48236c3a,transparent 60%);border-bottom:1px solid #43304f55}.experience-sticky{position:sticky;top:0;height:100svh;min-height:650px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:70px;padding-block:65px}.experience h2{font-size:clamp(38px,4.2vw,58px);max-width:510px;color:#eee3fa;overflow-wrap:anywhere;letter-spacing:-2.5px}.experience .eyebrow{color:#b195cc}.story-chapters{margin-top:35px}.story-chapter{display:flex;align-items:start;gap:18px;margin-top:22px;opacity:.35;transform:translateX(0);transition:opacity .5s,transform .5s;color:#c2aecf}.story-chapter.active{opacity:1;transform:translateX(10px)}.story-chapter>span{font-size:10px;letter-spacing:1px;border-top:1px solid #8a6aa8;width:30px;flex:0 0 30px;padding-top:8px}.story-chapter h3{font-size:22px;margin:0 0 6px;color:#e6d9f4}.story-chapter p{font-size:12px;margin:0;max-width:280px;color:#b1a3bd}.story-art{height:450px;position:relative;perspective:900px}.story-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse,#b55cf42c,transparent 64%);filter:blur(20px);transform:scale(calc(.8 + var(--story-progress)*.4))}.story-frame{position:absolute;width:88%;height:65%;border:1px solid #b392c9;top:10%;left:0;border-radius:14px;background:linear-gradient(130deg,#1c102c,#100d1a);transform:rotateY(calc(-22deg + var(--story-progress)*35deg)) rotateX(7deg) rotateZ(-5deg);box-shadow:0 40px 80px #0007;transition:transform .2s linear}.frame-back{background:none;border-color:#6d4386;transform:translate(25px,-25px) rotateY(-22deg) rotateZ(-5deg);opacity:.5}.story-play{position:absolute;top:37%;left:42%;font-family:"DejaVu Sans",sans-serif;color:#edc4ff;display:grid;place-items:center;border:1px solid #b388cc66;border-radius:50%;width:60px;height:60px;background:#a75ec318;box-shadow:0 0 45px #cf5fff30;font-size:19px}.story-playbar{position:absolute;bottom:28px;left:25px;right:25px;height:2px;background:#5a4164}.story-playbar>span{display:block;height:100%;width:calc(8% + var(--story-progress)*88%);background:#ddc0ef;box-shadow:0 0 12px #d091ff}.story-time{position:absolute;bottom:10px;left:25px;font-family:monospace;font-size:8px;color:#a993b7}.story-time b{font-weight:400}.story-equalizer{position:absolute;top:28px;left:24px;display:flex;gap:5px;align-items:center;height:18px}.story-equalizer i{height:12px;width:2px;background:#c7a3e2;border-radius:2px;animation:equalizer 1.1s ease-in-out infinite alternate}.story-equalizer i:nth-child(2n){animation-delay:-.6s;height:5px}.story-equalizer i:nth-child(3n){animation-delay:-.2s;height:18px}.story-phone{position:absolute;right:0;bottom:5%;height:225px;width:110px;border:1px solid #a18ab4;border-radius:20px;background:#16101f;transform:translateY(calc((1 - var(--story-progress))*50px)) rotate(calc(12deg - var(--story-progress)*14deg));box-shadow:5px 15px 35px #0008;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:15px}.story-phone>span{font-size:9px;letter-spacing:1px;color:#b5a4c8}.story-phone>img{margin:8px 0 0;mix-blend-mode:screen}.story-phone>div{width:65px;height:3px;background:#6c4a81;border-radius:2px}.story-phone>div:last-child{width:40px}.story-watermark{position:absolute;bottom:-25px;left:-10px;font-size:110px;font-weight:700;letter-spacing:-9px;color:#ad79d115;z-index:-1}.story-track{position:absolute;bottom:25px;left:0;right:0;height:1px;background:#4a34584d}.story-track>span{display:block;height:1px;width:calc(var(--story-progress)*100%);background:#bd95dc;box-shadow:0 0 15px #c180ff}.downloads{position:relative;z-index:1}.download-card{background:radial-gradient(ellipse at var(--spot-x,50%) var(--spot-y,0%),#8548a223,transparent 80%),linear-gradient(140deg,#1d132b,#121019);transition:border-color .3s,transform .3s;position:relative}.download-card:hover{border-color:#8c62ad;transform:translateY(-4px)}.tabs button{transition:background .3s,color .3s}.tabs button[aria-selected=true]{background:#5e3e78;box-shadow:0 0 22px #a16bce20}.all-files,.install-section,.feature-row,.closing,.faq-list details{border-color:#47314f66}.install-section{background:#170e2099}.step-num{border-color:#89629e;color:#d9bbef}.feature-icon{color:#cfa4ee}.closing{background:radial-gradient(ellipse at 0 100%,#8c47c625,transparent 70%)}.closing p{font-size:34px;color:#e8daf6}.reveal-item{transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.motion-ready .reveal-item:not(.revealed){opacity:0;transform:translateY(25px)}.motion-ready .reveal-item:focus-within{opacity:1;transform:none}.footer{position:relative}#platform-panel{animation:panel-enter .35s ease}.section-heading h2,.install-section h2,.faq-heading h2{overflow-wrap:anywhere}.nav-controls nav .nav-download>span:first-child{font-family:inherit}
/* Motion controls leave all content and controls available. */
.story-halo { transform: scale(calc(.65 + var(--story-progress)*.35)); }
.motion-off *,body.motion-off *:before,body.motion-off *:after { animation: none !important; transition: none !important; }
.motion-off .hero-copy,.motion-off .device-scene,.motion-off .tv,.motion-off .remote { transform: none !important; }
.motion-off .cinema-film { transform: none; }
.motion-off .experience { height: auto; }
.motion-off .experience-sticky { position: relative; height: auto; min-height: 650px; }
.motion-off .story-chapter { opacity: 1; transform: none; }
.motion-off .reveal-item { opacity: 1 !important; transform: none !important; }
@keyframes scroll-dot { to { transform: translateY(8px); opacity: 0; } }
@keyframes equalizer { to { transform: scaleY(.3); } }
@keyframes panel-enter { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media(max-width:1080px) {
  .nav nav>a:not(.nav-download) { display: none; }
  .nav-controls { gap: 12px; }
  .hero { min-height: 560px; gap: 18px; padding-block: 48px 65px; }
  .hero h1 { font-size: clamp(49px,6.1vw,67px); }
  .hero-actions { flex-wrap: wrap; gap: 16px; }
  .device-scene { aspect-ratio: 1.2; }
  .experience-sticky { gap: 30px; }
  .story-art { height: 380px; }
  .story-phone { width: 95px; height: 190px; }
  .story-frame { height: 65%; }
}
@media(max-width:740px) {
.experience{height:150vh;height:150svh}.experience-sticky{height:100svh;min-height:650px;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding-block:40px 35px;gap:10px}.experience h2{font-size:34px;letter-spacing:-1.7px;max-width:350px}.experience .eyebrow{font-size:8px;margin-bottom:14px}.story-chapters{position:relative;min-height:100px;margin-top:24px}.story-chapter{position:absolute;inset:0;opacity:0;transform:translateY(15px);pointer-events:none;margin:0;transition:opacity .4s,transform .4s}.story-chapter.active{opacity:1;transform:translateY(0)}.story-chapter h3{font-size:21px}.story-chapter p{font-size:12px;max-width:260px}.story-chapter>span{width:24px;flex:0 0 24px}.story-art{height:290px;width:100%;max-width:420px;margin:0 auto}.story-frame{height:67%;width:90%;top:8%;border-radius:9px}.story-play{width:42px;height:42px;font-size:13px;top:32%;left:43%}.story-equalizer{top:18px;left:18px;transform:scale(.75);transform-origin:left}.story-phone{height:153px;width:79px;right:0;bottom:3%;border-radius:15px;gap:7px;padding-top:10px}.story-phone>img{width:55px;height:55px}.story-phone>div{width:45px;height:2px}.story-phone>div:last-child{width:30px}.story-phone>span{font-size:7px}.story-watermark{font-size:75px;bottom:-5px;left:0;letter-spacing:-6px}.story-playbar{bottom:25px;left:18px;right:18px}.story-time{left:18px;bottom:9px;font-size:7px}.story-track{bottom:17px}.closing p{font-size:28px}.motion-off .experience-sticky{min-height:0;padding-block:45px}.motion-off .story-chapters{min-height:0}.motion-off .story-chapter{position:relative;opacity:1;margin-top:20px}.motion-off .story-art{margin-top:20px}#atmosphere{opacity:.65}.version{font-size:9px}.section-heading h2{font-size:34px}.hero h1,.section-heading h2,.experience h2,.faq-heading h2{hyphens:auto}.hero-facts{gap:12px;font-size:10px}.hero-facts li+li:before{margin-right:12px}
}
/* FAQ: the native summary remains the control; only its dedicated icon changes. */
.faq-list{display:grid;gap:12px;align-content:start}
.faq-list details{border:1px solid #392d47;border-radius:15px;background:#15101de8;overflow:hidden;transition:border-color .2s,background .2s,box-shadow .2s}
.faq-list details:hover{border-color:#71518e}
.faq-list details[open]{background:#1b1326;border-color:#8c66ad;box-shadow:0 10px 35px #0003}
.faq-list summary{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:18px;padding:21px 23px;margin:0;line-height:1.5}
.faq-list .faq-question{min-width:0;font-size:16px;line-height:1.55;font-weight:550;color:#dfd6eb;transform:none;overflow-wrap:anywhere}
.faq-list details[open] .faq-question{color:#faf5ff}
.faq-list .faq-indicator{display:block;position:relative;width:34px;height:34px;border:1px solid #554163;border-radius:10px;background:#36243e66;transform:none}
.faq-indicator::before,.faq-indicator::after{content:"";position:absolute;top:50%;left:50%;background:#d8b8ef;border-radius:1px;transform:translate(-50%,-50%);transition:transform .2s}
.faq-indicator::before{width:11px;height:1px}
.faq-indicator::after{width:1px;height:11px}
.faq-list details[open] .faq-indicator{background:#523464;border-color:#9570b0}
.faq-list details[open] .faq-indicator::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-list details p{position:relative;margin:12px 23px 23px;padding:0 0 0 15px;border-left:2px solid #9a72b8;font-size:14px;line-height:1.85;color:#bfb2ce;overflow-wrap:anywhere}
.faq-list details[open] p{animation:faq-answer-in .25s ease-out}
.faq-list summary:focus-visible{outline-offset:-5px;border-radius:14px}
@keyframes faq-answer-in{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:740px){
  .faq-section{gap:28px}
  .faq-list{gap:10px}
  .faq-list summary{padding:17px 18px;grid-template-columns:minmax(0,1fr) 30px;gap:12px}
  .faq-list .faq-question{font-size:15px;line-height:1.6}
  .faq-list .faq-indicator{width:30px;height:30px;border-radius:9px}
  .faq-list details p{font-size:14px;line-height:1.85;margin:12px 18px 20px;padding-left:13px}
}


/* Mobile composition is independent of the desktop perspective. */
@media(max-width:740px) {
  .wrap { width: calc(100% - 40px); }
  .nav { height: 72px; }
  .nav nav { display: none; }
  .nav .brand { font-size: 20px; gap: 8px; }
  .nav .brand-light { display: none; }
  .nav-controls { gap: 9px; }
  #language-select { width: 116px; max-width: 116px; padding: 8px 6px; }
  .hero { grid-template-columns: 1fr; padding-block: 36px 46px; gap: 12px; min-height: auto; }
  .hero-copy { text-align: left; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.3px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(40px,12.2vw,64px); letter-spacing: -.055em; line-height: 1.07; margin-bottom: 20px; }
  .intro { font-size: 15px; line-height: 1.7; max-width: 420px; margin: 0 0 23px; }
  .hero-actions { flex-wrap: nowrap; justify-content: flex-start; gap: 16px; }
  .hero-actions .primary { width: 215px; max-width: 100%; min-width: 0; min-height: 50px; font-size: 12px; padding: 11px 12px 11px 16px; gap: 11px; }
  .hero-facts { justify-content: flex-start; gap: 12px; font-size: 10px; margin-top: 21px; }
  .hero-facts li+li:before { margin-right: 12px; }
  .device-scene { width: 100%; max-width: 450px; aspect-ratio: 1.28; min-height: 0; padding: 28px 2px 36px; margin-inline: auto; }
  .screen-assembly { width: 92%; padding-bottom: 20px; }
  .device-scene .tv { width: 100%; max-width: none; padding: 5px; border-radius: 9px; transform: perspective(1000px) rotateY(calc(var(--pointer-x)*5deg)) rotateZ(-1deg); }
  .tv-screen { border-radius: 4px; }
  .screen-logo { width: auto; max-height: 100%; }
  .screen-bottom { font-size: 8px; gap: 6px; }
  .screen-play { width: 15px; height: 15px; flex-basis: 15px; line-height: 14px; font-size: 5px; }
  .film-ribbon-field { inset: -4% -4% 0; }
  .cinema-film { opacity: .7; }
  .tv-neck { height: 16px; bottom: 6px; }
  .device-scene .tv-foot { height: 7px; }
  .remote { width: 37px; height: 125px; border-radius: 18px; right: 0; bottom: 24%; }
  .remote-power { margin: 9px 0; font-size: 10px; }
  .remote-ring { width: 25px; height: 25px; border-width: 5px; }
  .remote-ring span { font-size: 5px; }
  .remote-back { font-size: 8px; margin: 9px 0; }
  .remote-line { width: 18px; margin-top: 7px; }
  .device-scene figcaption { left: 5%; right: 5%; bottom: 0; max-width: none; font-size: 8px; }
  .scroll-cue { left: 0; bottom: 12px; font-size: 7px; letter-spacing: 1.1px; gap: 8px; }
  .scroll-cue>span:first-child { height: 18px; width: 11px; }
  .scroll-cue>span:first-child:after { left: 4px; top: 4px; height: 4px; }
  .platform-strip .wrap { padding-block: 18px; }
  .platform-strip strong { font-size: 10px; }
  .platform-strip i { font-size: 12px; }
  .footer p { margin: 0; }
}
@media(max-width:350px) {
  .wrap { width: calc(100% - 32px); }
  .nav .brand { font-size: 18px; }
  #language-select { width: 100px; max-width: 100px; }
  .motion-toggle { width: 29px; height: 29px; flex-basis: 29px; }
  .hero { padding-top: 30px; }
  .hero h1 { font-size: 40px; }
  .intro { font-size: 14px; }
  .hero-actions { gap: 12px; }
  .hero-actions .primary { font-size: 11px; padding-left: 12px; gap: 8px; }
  .hero-facts { gap: 10px; font-size: 9px; }
  .hero-facts li+li:before { margin-right: 10px; }
  .screen-bottom { font-size: 7px; }
  .remote { height: 113px; width: 34px; }
  .remote-power { margin: 8px 0; }
  .remote-back { margin: 7px 0; }
  .story-art { height: 250px; }
  .story-phone { height: 135px; width: 70px; }
  .story-phone>img { width: 45px; height: 45px; }
}
.screen-assembly { animation: stage-float 8s ease-in-out infinite; }
.device-scene .tv::after { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(120deg,transparent 20%,#d9baff35 34%,#f4e4ff 48%,#b595f44d 56%,transparent 72%); background-size:250% 250%; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:rim-travel 7s linear infinite; }
.tv-screen { position:relative; overflow:hidden; background-size:150% 150%,140% 140%; animation:screen-arrival 1.4s cubic-bezier(.2,.8,.2,1) both,screen-color-drift 12s ease-in-out infinite alternate; }
.screen-logo { position:relative; z-index:1; transform-origin:center; animation:logo-arrival 1.7s cubic-bezier(.16,1,.3,1) both,logo-presence 7s 1.7s ease-in-out infinite; }
.screen-bottom { position:relative; z-index:1; animation:caption-arrival 1.8s ease both; }
.tv-screen::before { content:''; position:absolute; inset:4% 10% 14%; background:radial-gradient(ellipse,#b934e82b,transparent 64%); pointer-events:none; transform:scale(.9); animation:screen-aura 7s ease-in-out infinite alternate; }
.scene-glow { animation:stage-aura 9s ease-in-out infinite alternate; }
.cinema-film { animation:film-drift 11s ease-in-out infinite alternate; }
.remote { animation:remote-float 8s 1s ease-in-out infinite; }
.hero-idle .hero *,.hero-idle .hero *::before,.hero-idle .hero *::after,.page-hidden .hero *,.page-hidden .hero *::before,.page-hidden .hero *::after { animation-play-state:paused !important; }
.motion-off .screen-assembly,.motion-off .screen-logo { transform:none !important; }
.feedback-toggle { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; padding:0; border:1px solid #332c40; border-radius:50%; background:#14121c; color:#c6bdd7; cursor:pointer; transition:color .2s,border-color .2s,background .2s; }
.feedback-toggle:hover { color:#f1e7ff; border-color:#9374bd; background:#21162e; }
.feedback-toggle:focus-visible,.feedback-close:focus-visible { outline:2px solid #b89af0; outline-offset:4px; }
.feedback-dialog { width:calc(100% - 32px); max-width:520px; max-height:calc(100dvh - 32px); padding:0; text-align:left; border:1px solid #604773; border-radius:20px; background:radial-gradient(ellipse at 0 0,#8c47c622,transparent 65%),#14101c; color:#f0e9f8; overflow:auto; box-shadow:0 28px 100px #000b; }
.feedback-dialog::backdrop { background:#07050dbd; backdrop-filter:blur(8px); }
.feedback-dialog-body { padding:35px; position:relative; }
.feedback-close { position:absolute; top:12px; right:13px; display:grid; place-items:center; width:30px; height:30px; border:1px solid #4b3a59; border-radius:50%; padding:0; background:#211729; color:#c6bdd7; font:22px/1 sans-serif; cursor:pointer; }
.feedback-heading .eyebrow { padding-right:20px; margin-bottom:18px; font-size:9px; }
.feedback-heading h2 { font-size:34px; letter-spacing:-1.4px; padding-right:8px; overflow-wrap:anywhere; }
.feedback-heading>p:last-child { color:#aca4b9; font-size:13px; line-height:1.8; margin:17px 0 23px; }
.feedback-card { padding:28px; border:1px solid #493655; border-radius:18px; background:radial-gradient(ellipse at 0 0,#8c47c61a,transparent 70%),#14101c; }
.feedback-card label { display:block; font-size:13px; color:#e1d5ed; margin-bottom:12px; }
.feedback-card textarea { display:block; width:100%; min-height:145px; max-height:500px; resize:vertical; border:1px solid #4b3b5b; border-radius:10px; background:#0e0c14; color:#f0e9f8; padding:15px; font:inherit; font-size:14px; line-height:1.7; }
.feedback-card textarea:focus-visible { outline:2px solid #b89af0; outline-offset:3px; border-color:transparent; }
.feedback-hint { color:#aca0b9; font-size:11px; line-height:1.7; margin:12px 0 20px; }
.feedback-card .button { width:auto; min-width:160px; max-width:100%; white-space:normal; }
.feedback-card :disabled { cursor:wait; opacity:.65; }
.feedback-status { font-size:12px; line-height:1.7; min-height:1.7em; margin:16px 0 0; overflow-wrap:anywhere; }
.feedback-status[data-state=success] { color:#b8e2c8; }
.feedback-status[data-state=error] { color:#f1becb; }
.feedback-status[data-state=sending] { color:#c8b6e2; }
.feedback-dialog .feedback-card { padding:0; border:0; border-radius:0; background:none; }
@keyframes stage-float { 0%,100% { transform:translateY(0) rotate(.15deg); } 50% { transform:translateY(-7px) rotate(-.35deg); } }
@keyframes rim-travel { 0% { background-position:0% 20%; } 100% { background-position:200% 100%; } }
@keyframes screen-arrival { from { opacity:0; } to { opacity:1; } }
@keyframes screen-color-drift { from { background-position:20% 20%,0% 50%; } to { background-position:80% 80%,100% 50%; } }
@keyframes logo-arrival { 0% { opacity:0; transform:translateY(-8px) scale(.86); } 35% { opacity:0; } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes logo-presence { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-2px) scale(1.018); } }
@keyframes caption-arrival { 0%,55% { opacity:0; } 100% { opacity:1; } }
@keyframes screen-aura { from { opacity:.4; transform:scale(.85); } to { opacity:1; transform:scale(1.12); } }
@keyframes stage-aura { from { opacity:.45; } to { opacity:.95; } }
@keyframes film-drift { from { transform:translateY(calc(var(--hero-progress)*-8px + 2px)) rotate(-1deg); opacity:.65; } to { transform:translateY(calc(var(--hero-progress)*-8px - 4px)) rotate(1deg); opacity:.9; } }
@keyframes remote-float { 0%,100% { transform:translateY(0) rotate(9deg); } 50% { transform:translateY(-4px) rotate(7deg); } }
@media(max-width:740px) { .feedback-dialog-body { padding:30px 23px 24px; } .feedback-heading h2 { font-size:30px; } .feedback-card .button { width:100%; } }
@media(max-width:350px) { .feedback-toggle { width:29px; height:29px; flex-basis:29px; } .feedback-dialog-body { padding:29px 19px 20px; } .feedback-heading h2 { font-size:28px; } }
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation: none !important; transition: none !important; }
  .experience { height: auto; }
  .experience-sticky { position: relative; height: auto; }
  .story-chapter { opacity: 1; transform: none; }
  #atmosphere { opacity: .2; }
}