
#aht-room{--rm-accent:#2ee6c8;--rm-ink:#f5f7fa;--rm-soft:rgba(245,247,250,.78);--rm-glass:rgba(12,16,22,.55);--rm-line:rgba(255,255,255,.14);position:relative;width:100vw;margin:0 0 0 calc(50% - 50vw);color:var(--rm-ink);background:#07090c;font-size:16px;line-height:1.55}
#aht-room *{box-sizing:border-box}
#aht-room h2,#aht-room h3,#aht-room p{margin:0;color:inherit}
#aht-room a{color:inherit}
#aht-room .rm-track{position:relative}
#aht-room .rm-stage{position:relative;overflow:hidden;background:#07090c}
#aht-room .rm-media{position:relative;overflow:hidden;aspect-ratio:16/9;max-height:80vh;width:100%}
#aht-room .rm-media img,#aht-room .rm-media video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;transform-origin:0 0}
#aht-room video{opacity:0;transition:opacity .6s ease}
#aht-room.rm-live video{opacity:1}
#aht-room canvas.rm-seq{position:absolute;left:0;top:0;width:1920px!important;height:1080px!important;max-width:none!important;transform-origin:0 0;opacity:0;transition:opacity .5s ease;will-change:transform;display:block}
#aht-room.rm-live canvas.rm-seq{opacity:1}
#aht-room .rm-shade,#aht-room .rm-hots,#aht-room .rm-dots,#aht-room .rm-bar,#aht-room .rm-skip,#aht-room .rm-pop,#aht-room .rm-hint{display:none}
#aht-room .rm-caps{display:grid;gap:14px;padding:22px 16px 30px;max-width:1120px;margin:0 auto}
#aht-room .rm-cap{background:var(--rm-glass);border:1px solid var(--rm-line);border-radius:16px;padding:20px 22px}
#aht-room .rm-k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--rm-accent);font-weight:700;margin-bottom:8px}
#aht-room .rm-cap h2{font-size:clamp(24px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:10px}
#aht-room .rm-cap p{color:var(--rm-soft);font-size:clamp(15px,1.4vw,18px);max-width:520px}
#aht-room .rm-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
#aht-room .rm-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--rm-line);background:rgba(255,255,255,.06);color:var(--rm-ink);transition:background .2s,border-color .2s,transform .2s}
#aht-room .rm-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);transform:translateY(-1px)}
#aht-room .rm-btn.rm-pri{background:var(--rm-accent);border-color:var(--rm-accent);color:#03201b}
#aht-room .rm-note{display:block;margin-top:14px;font-size:12px;color:rgba(245,247,250,.5)}

/* ---- scroll experience (only once the script is running) ---- */
#aht-room.rm-on .rm-track{height:calc(100vh + var(--rm-n,7) * 140vh)}
@media (pointer:coarse){#aht-room.rm-on .rm-track{height:calc(100vh + var(--rm-n,7) * 170vh)}}
#aht-room.rm-on .rm-stage{position:absolute;left:0;right:0;top:0;height:100vh;height:100svh}
#aht-room.rm-on .rm-stage.rm-fixed{position:fixed;width:100%}
#aht-room.rm-on .rm-stage.rm-after{top:auto;bottom:0}
#aht-room.rm-on .rm-media{position:absolute;left:0;top:0;width:100%;height:100%;max-height:none;aspect-ratio:auto}
#aht-room.rm-on .rm-media img,#aht-room.rm-on .rm-media video{width:1920px!important;height:1080px!important;max-width:none!important;max-height:none!important;min-width:0!important;margin:0!important;object-fit:fill;will-change:transform}
#aht-room.rm-on .rm-shade{display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,7,10,.72) 0%,rgba(5,7,10,.35) 34%,rgba(5,7,10,0) 58%),linear-gradient(0deg,rgba(5,7,10,.65) 0%,rgba(5,7,10,0) 30%);transition:opacity .5s}
#aht-room.rm-on .rm-caps{display:block;padding:0;margin:0;max-width:none;position:absolute;inset:0;pointer-events:none}
#aht-room.rm-on .rm-cap{position:absolute;left:clamp(16px,5vw,80px);bottom:clamp(70px,13vh,140px);width:min(480px,calc(100% - 32px));background:var(--rm-glass);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 20px 60px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(26px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
#aht-room.rm-on .rm-cap.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s}
#aht-room.rm-on .rm-cap.rm-hero,#aht-room.rm-on .rm-cap.rm-end{left:50%;bottom:auto;top:50%;width:min(760px,calc(100% - 32px));transform:translate(-50%,calc(-50% + 26px));text-align:center;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#aht-room.rm-on .rm-cap.rm-hero.is-on,#aht-room.rm-on .rm-cap.rm-end.is-on{transform:translate(-50%,-50%)}
#aht-room .rm-hero h2,#aht-room .rm-end h2{font-size:clamp(38px,7.5vw,96px);letter-spacing:-.035em;line-height:1;background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.62));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;margin-bottom:18px}
#aht-room .rm-hero p,#aht-room .rm-end p{margin:0 auto;max-width:620px;font-size:clamp(16px,1.8vw,21px);color:rgba(245,247,250,.85)}
#aht-room .rm-hero .rm-k,#aht-room .rm-end .rm-k{margin-bottom:16px}
#aht-room .rm-end .rm-links{justify-content:center;margin-top:26px}
#aht-room.rm-on.rm-c0 .rm-shade,#aht-room.rm-on.rm-cend .rm-shade{background:radial-gradient(ellipse at center,rgba(5,7,10,.62) 0%,rgba(5,7,10,.38) 55%,rgba(5,7,10,.7) 100%)}
#aht-room.rm-on .rm-hint{display:flex;flex-direction:column;align-items:center;gap:8px;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,247,250,.75);transition:opacity .4s;pointer-events:none}
#aht-room .rm-hint i{width:22px;height:34px;border:2px solid rgba(245,247,250,.7);border-radius:12px;position:relative}
#aht-room .rm-hint i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:#fff;animation:rmWheel 1.6s ease-in-out infinite}
@keyframes rmWheel{0%{transform:translateY(0);opacity:1}80%{transform:translateY(11px);opacity:0}100%{opacity:0}}
#aht-room.rm-on:not(.rm-c0) .rm-hint{opacity:0;visibility:hidden}

/* hotspots */
#aht-room.rm-on .rm-hots{display:block;position:absolute;inset:0;pointer-events:none}
#aht-room .rm-hot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;padding:0;background:none;cursor:pointer;pointer-events:auto;opacity:0;transform:scale(.4);transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.4,1)}
#aht-room .rm-hot.is-on{opacity:1;transform:none}
#aht-room .rm-hot:not(.is-on){pointer-events:none}
#aht-room .rm-hot::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(46,230,200,.55),0 4px 14px rgba(0,0,0,.5)}
#aht-room .rm-hot::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(255,255,255,.8);animation:rmPing 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes rmPing{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.8);opacity:0}}
#aht-room .rm-hot span{position:absolute;left:34px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;background:rgba(10,14,20,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--rm-line);color:#fff;opacity:0;transition:opacity .2s;pointer-events:none}
#aht-room .rm-hot:hover span,#aht-room .rm-hot:focus-visible span{opacity:1}
#aht-room .rm-hot:focus-visible{outline:2px solid var(--rm-accent);outline-offset:2px;border-radius:50%}

/* hotspot info card */
#aht-room.rm-on .rm-pop{display:block;position:absolute;z-index:5;width:min(320px,calc(100% - 32px));padding:18px 20px 16px;border-radius:16px;background:rgba(12,16,22,.78);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--rm-line);box-shadow:0 24px 70px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .25s}
#aht-room.rm-on .rm-pop.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
#aht-room .rm-pop h3{font-size:18px;font-weight:700;margin:0 0 6px;padding-right:26px}
#aht-room .rm-pop p{font-size:14.5px;color:var(--rm-soft);margin:0}
#aht-room .rm-pop a{display:inline-block;margin-top:12px;font-weight:600;font-size:14px;color:var(--rm-accent);text-decoration:none}
#aht-room .rm-pop a:hover{text-decoration:underline}
#aht-room .rm-x{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:16px;line-height:28px;cursor:pointer;padding:0}

/* chapter dots + progress + skip */
#aht-room.rm-on .rm-dots{display:flex;flex-direction:column;gap:12px;position:absolute;right:clamp(12px,2.4vw,34px);top:50%;transform:translateY(-50%);z-index:4}
#aht-room .rm-dot{position:relative;width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:transparent;padding:0;cursor:pointer;transition:background .3s,transform .3s,border-color .3s}
#aht-room .rm-dot.is-on{background:#fff;border-color:#fff;transform:scale(1.25)}
#aht-room .rm-dot span{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(10,14,20,.7);color:#fff;opacity:0;transition:opacity .2s;pointer-events:none}
#aht-room .rm-dot:hover span,#aht-room .rm-dot:focus-visible span{opacity:1}
#aht-room.rm-on .rm-bar{display:block;position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);z-index:4}
#aht-room .rm-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--rm-accent),#60a5fa);transform-origin:0 50%;transform:scaleX(0)}
#aht-room.rm-on .rm-skip{display:block;position:absolute;right:clamp(12px,2.4vw,34px);bottom:18px;z-index:4;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--rm-line);background:rgba(10,14,20,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer}
#aht-room .rm-skip:hover{background:rgba(10,14,20,.8)}

/* portrait phones and tablets: video on top, story card below */
@media (max-aspect-ratio:1/1){
 #aht-room.rm-on .rm-media{height:58%;transition:height .75s cubic-bezier(.2,.8,.2,1)}
 #aht-room.rm-on .rm-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(0deg,#07090c,rgba(7,9,12,0))}
 #aht-room.rm-on .rm-shade{display:none}
 #aht-room.rm-on .rm-cap{left:16px;right:16px;width:auto;bottom:auto;top:calc(58% - 18px);background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 4px}
 #aht-room.rm-on .rm-cap.rm-hero,#aht-room.rm-on .rm-cap.rm-end{top:50%;left:50%;width:calc(100% - 32px)}
 #aht-room.rm-on.rm-c0 .rm-media,#aht-room.rm-on.rm-cend .rm-media{height:100%}
 #aht-room.rm-on.rm-c0 .rm-shade,#aht-room.rm-on.rm-cend .rm-shade{display:block}
 #aht-room.rm-on .rm-dots{top:auto;bottom:62px;transform:none;flex-direction:row;right:auto;left:50%;transform:translateX(-50%);gap:10px}
 #aht-room .rm-dot span{display:none}
 #aht-room.rm-on.rm-c0 .rm-dots{opacity:0;pointer-events:none}
 #aht-room.rm-on .rm-pop{left:16px!important;right:16px;width:auto;top:auto!important;bottom:96px}
 #aht-room .rm-hot span{display:none}
}
@media (max-width:600px){#aht-room .rm-cap p{font-size:15px}#aht-room .rm-cap h2{margin-bottom:8px}#aht-room .rm-links{margin-top:12px}}
@media (prefers-reduced-motion:reduce){#aht-room *,#aht-room *::before,#aht-room *::after{animation:none!important;transition-duration:.01s!important}}
