.demo-scene::before{background:linear-gradient(180deg,#14483318,transparent 35%,transparent 58%,#193b2761);z-index:0}
.demo-sun{position:absolute;inset:0;background:radial-gradient(ellipse at 56% 25%,#fff3b62a,transparent 63%);pointer-events:none}
.demo-belt,.demo-props{position:absolute;inset:0;pointer-events:none}
.demo-rail{position:absolute;bottom:2%;left:-1%;width:102%;height:13%;z-index:1;border-top:2px solid #e3d29b63;border-bottom:2px solid #143227a6;background:repeating-linear-gradient(90deg,#546147ca 0 9px,#9f9567bf 10px 12px,#454735b3 13px 16px);box-shadow:0 3px 8px #1d29287b}
.demo-crate{position:absolute;left:0;top:0;isolation:isolate;z-index:3;transform-origin:50% 88%;will-change:transform}
.demo-crate[data-slot="current"]{z-index:4}
.demo-crate[data-slot="retired"],.demo-crate[data-slot="waiting"],.demo-crate[data-slot="next"]{filter:brightness(.83)}
.demo-back,.demo-front{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;pointer-events:none}
.demo-back{z-index:1;filter:drop-shadow(0 5px 3px #1a2c1780)}
.demo-packed{position:absolute;inset:0;z-index:2}
.demo-in-box,.demo-object{position:absolute;top:0;left:0;max-width:none;object-fit:contain;transform-origin:50% 50%}
.demo-in-box{filter:drop-shadow(1px 2px 2px #18331966)}
.demo-front{z-index:3;clip-path:polygon(0 25%,4% 33%,9% 33.5%,91% 33.5%,96% 33%,100% 25%,100% 100%,0 100%)}
.demo-logo{position:absolute;z-index:4;width:41%;height:24%;left:30%;top:60%;object-fit:contain;filter:brightness(0) invert(1);opacity:.94}
.demo-crate-glow{position:absolute;z-index:0;inset:-16% -11% 15%;background:radial-gradient(ellipse,#d8ff85aa,transparent 66%);opacity:var(--demo-glow,0);pointer-events:none}
.demo-lid{opacity:0;position:absolute;z-index:7;inset:-2% -1% auto;height:43%;border-radius:15px;clip-path:polygon(9% 0,91% 0,100% 74%,99% 96%,1% 96%,0 74%);background:linear-gradient(180deg,#64b54d,#337c2b 68%,#62b648 74%,#348d29 80%,#278124 95%);box-shadow:inset 0 3px 3px #bbed6fab,inset 0 -4px 3px #15521d99}
.demo-lid::before{content:"";position:absolute;inset:14% 7% 29%;border-radius:14px;border:2px solid #b3da7d7d;box-shadow:inset 0 1px 4px #2255227d}
.demo-object{z-index:5;filter:drop-shadow(0 4px 4px #2f231d50);will-change:transform,opacity}
.demo-object.inside{z-index:2}
.demo-hand,.demo-ripple{position:absolute;top:0;left:0;opacity:0;pointer-events:none;z-index:7;will-change:transform,opacity}
.demo-hand svg{display:block;width:100%;height:100%;overflow:visible;fill:#fffdf5;stroke:#08484a;stroke-width:2.2;filter:drop-shadow(1px 3px 1px #10272156)}
.demo-ripple{width:20px;height:20px;border-radius:50%;border:2px solid #f5ffe6;box-shadow:0 0 0 2px #84bc5995;z-index:6}
.demo-progress{position:absolute;bottom:1.2%;left:50%;transform:translateX(-50%);z-index:8;display:flex;gap:5px;align-items:center;padding:3px 6px;background:#17392877;border-radius:10px}
.demo-progress i{width:5px;height:5px;border-radius:2px;border:1px solid #f4f7c4be}
.demo-progress i.packed{background:#d8f270;border-color:#f4ffd7}
.demo-label{direction:rtl;position:absolute;left:12px;top:14px;z-index:8;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;color:#fffdf0;background:#08484ade;font-weight:700;font-size:10px;letter-spacing:.025em}
.demo-label i{display:block;width:5px;height:5px;border-radius:50%;background:#bfd739}
.demo-scene .hero-sticker{direction:rtl;right:12px;top:13px}

/* AVIA home composition. Keep the demo a single panel, with a clear next action. */
.home{width:min(100%,1320px);padding-inline:clamp(24px,5.3vw,74px)}
.home .mast{height:calc(70px + var(--safe-t));border-color:#08484a18}
.home .mast .brand{width:150px}
.home .mast .icon-btn{background:#fffef7;border-radius:50%;width:43px;height:43px}
.home .welcome{
 display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
 gap:clamp(25px,5.6vw,79px);min-height:calc(100dvh - 70px - var(--safe-t));
 align-items:center;padding:clamp(20px,5.4vh,58px) 0 calc(30px + var(--safe-b));
}
.home .welcome-copy{position:relative;min-width:0}
.home-kicker{color:var(--deep);font-weight:700;line-height:1.22;font-size:clamp(20px,2.5vw,32px);margin:0 0 14px}
.home h1{
 font-family:var(--brand-font);font-weight:800;font-size:clamp(63px,9.4vw,128px);
 letter-spacing:0;word-spacing:.006em;line-height:.94;margin:0;display:block;
}
.home h1 em{
 display:inline-block;color:var(--forest);background:none;box-shadow:none;transform:none;
 font-weight:800;font-style:normal;letter-spacing:0;line-height:1.04;padding:0;margin:0;
}
.home .lead{font-size:clamp(18px,2vw,27px);line-height:1.22;letter-spacing:0;font-weight:600;color:#34564c;margin:20px 0 20px}
.home .welcome-best{font-size:15px;gap:6px;color:#436353;margin:0 0 15px;font-weight:600}
.home .welcome-best b{font-weight:800;color:var(--deep)}
.home .actions{display:flex;gap:10px;flex-wrap:wrap}
.home .actions .button{min-height:56px;font-size:18px;border-radius:16px;font-weight:700}
.home .actions .primary{padding-inline:25px;box-shadow:0 6px 16px #005e462d;background:#00654d}
.home .actions .quiet{background:#ffffff54;padding-inline:17px;border-color:#08484a2c}
.home .demo-scene{
 height:clamp(320px,42vw,555px);max-height:70dvh;min-height:300px;pointer-events:none;direction:ltr;
 background-position:center 58%;border-radius:clamp(23px,3vw,38px);box-shadow:0 20px 46px #2d422521;border-color:#32462d28;position:relative;
}
@media(min-width:741px) and (max-height:620px){
 .home .welcome{padding-block:14px 21px}
 .home h1{font-size:clamp(63px,7.6vw,104px)}
 .home .demo-scene{height:min(68dvh,450px)}
}
@media(max-width:740px){
 .home{width:min(100%,568px);padding-inline:clamp(15px,4.5vw,25px)}
 .home .mast{height:calc(58px + var(--safe-t))}
 .home .mast .brand{width:127px}
 .home .mast .icon-btn{width:40px;height:40px}
 .home .welcome{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:calc(100dvh - 58px - var(--safe-t));padding:14px 0 calc(16px + var(--safe-b));
 }
 .home .welcome-copy{display:contents;text-align:center}
 .home-kicker{order:1;font-size:clamp(19px,5.65vw,28px);margin:0;max-width:100%;text-wrap:balance}
 .home .welcome-copy h1{order:2;font-size:clamp(48px,14.85vw,80px);line-height:1;white-space:nowrap;margin:0;letter-spacing:0}
 .home .welcome-copy h1 em{margin:0}
 .home .lead{order:3;font-size:clamp(16px,4.9vw,23px);margin:0 0 2px}
 .home .preview-wrap{order:4;width:100%}
 .home .demo-scene{height:clamp(220px,45dvh,439px);min-height:0;max-height:none;border-radius:24px}
 .home .welcome-best{order:5;font-size:14px;margin:0}
 .home .actions{order:6;width:100%;margin-top:2px;flex-wrap:nowrap;gap:8px}
 .home .actions .button{min-height:48px;font-size:16px;border-radius:13px}
 .home .actions .primary{flex:1.48;padding-inline:9px}
 .home .actions .quiet{flex:1;padding-inline:6px}
 .demo-label{left:9px;top:11px}
 .demo-scene .hero-sticker{right:9px;top:10px}
}
@media(max-height:620px) and (max-width:740px){
 .home .welcome{gap:8px}
 .home .demo-scene{height:clamp(153px,39dvh,236px)}
}
@media(max-width:360px){
 .home .welcome-copy h1{font-size:13.85vw}
 .home-kicker{font-size:5.75vw}
}
.game-nav{display:flex;gap:8px;align-items:center}
.site-back{color:inherit;text-decoration:none}
.site-back:focus-visible{outline:2px solid #088963;outline-offset:3px}
.pause-site-back{display:grid;place-items:center;min-height:44px;margin-top:6px;font-weight:700}
.pause-site-back:hover{text-decoration:underline;text-underline-offset:4px}