html,body{margin:0;height:100%;overflow:hidden;background:#fff;transition:background-color .5s ease}
body{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#view{position:fixed;inset:0;overflow:hidden}
#stage.snap>.slide{transition:none!important}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:0 0}
#stage>.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s;break-after:auto}
#stage>.slide.on{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s;z-index:2}
/* entrance: fade + slight rise (uses independent translate/scale so existing transforms survive) */
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes fadeX{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;scale:.6}60%{opacity:1;scale:1.08}100%{opacity:1;scale:1}}
@keyframes tick{0%{opacity:0;scale:.3;rotate:-25deg}60%{opacity:1;scale:1.15;rotate:0deg}100%{opacity:1;scale:1}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes marquee{from{translate:0 0}to{translate:-50% 0}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -6px}}
.rv,.rf,.rp,.rt{opacity:0}
.slide.go .rv{animation:rise .8s cubic-bezier(.16,.84,.3,1) var(--d,0s) both}
.slide.go .rf{animation:fadeX .6s ease var(--d,0s) both}
.slide.go .rp{animation:pop .55s cubic-bezier(.3,1.4,.5,1) var(--d,0s) both}
.slide.go .rt{animation:tick .5s cubic-bezier(.3,1.4,.5,1) var(--d,0s) both}
.slide.go .dr{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s cubic-bezier(.45,0,.2,1) var(--d,0s) forwards}
.slide.go .fl{animation:floaty 5s ease-in-out var(--d,0s) infinite}
.ren-live{overflow:visible}
.s18 .appline{justify-content:flex-start!important;overflow:hidden}
.s18 .appline .track{display:flex;gap:56px;flex:none;animation:marquee 70s linear infinite;padding-right:56px}
.s18 .appline .track>div{display:flex;gap:56px;flex:none}
/* chrome */
#ui{position:fixed;inset:0;pointer-events:none;z-index:10;font-family:'Instrument Sans',sans-serif}
#ui>*{pointer-events:auto}
#back{position:absolute;top:16px;left:16px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 18px -6px rgba(15,60,55,.25),0 0 16px -6px rgba(94,230,201,.5);display:grid;place-items:center;cursor:pointer;color:#0E3B37;opacity:.75;transition:opacity .3s,transform .2s}
#back:hover{opacity:1;transform:translateX(-2px)}
#back.hide{opacity:0;pointer-events:none}
#dl{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#0B0E14;color:#fff;text-decoration:none;font:600 14px 'Instrument Sans',sans-serif;box-shadow:0 8px 24px -8px rgba(15,60,55,.45),0 0 22px -6px rgba(94,230,201,.6);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .4s,transform .4s}
#dl.show{opacity:1;pointer-events:auto;transform:none}
#prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(94,230,201,.12);pointer-events:none}
#prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(94,230,201,.2),#2BB9A0);border-radius:0 3px 3px 0;box-shadow:0 0 10px rgba(94,230,201,.7);transition:width .5s cubic-bezier(.16,.84,.3,1)}
@media (prefers-reduced-motion:reduce){
 #stage>.slide{transition:none}
 .slide.go .rv,.slide.go .rp,.slide.go .rt,.slide.go .rf{animation:fadeX .2s ease both}
 .slide.go .dr{animation:none;stroke-dashoffset:0}
 .s18 .appline .track,.slide.go .fl{animation:none}
}