/* THE TEAM WALK-THROUGHS' STAGE (site-team-walk.js): the Hub's or the review page's captured screen, drawn at its own width and scaled to
   the stage, with the Hub's own cursor (the dot and its ring). The screens' styles are site-team-walk-states.css, as captured. */
.tw-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--eden-r-14,14px);border:var(--eden-edge-1,1px) solid var(--eden-line,rgba(255,255,255,.08));background:#121214}
.tw-view{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tw-screen{position:absolute;left:0;top:0;transform-origin:0 0;transition:opacity .22s ease}
.tw-screen.is-swap{opacity:0;transition:none}
.tw-hub{box-sizing:border-box;padding:56px 120px 0;background:#121214;min-height:100%}
.tw-hub.tw-railed{padding-left:56px;padding-right:404px}   /* as the Hub's body.ix-has-rail: the 380px rail and its 24px of room */
.tw-rv{width:1440px;height:810px;background:var(--eden-black,#121214)}
.tw-rv .rv-root{position:relative;width:1440px;height:810px;overflow:hidden}
/* the client's intake page (apps/studio/intake.html), at 1440×810; its rail is fixed to the page's edge, here the screen's own */
.tw-ix{width:1440px;height:810px;background:#121214;overflow:hidden}
.tw-ix .ix-root{position:relative;width:1440px;min-height:810px;box-sizing:border-box}
/* a comment pin as the review page draws it (rv-pin.css, captured); a new one arrives as it is placed */
.tw-rv .rv-pin.new{animation:tw-pin .28s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes tw-pin{from{opacity:0;transform:translate(-50%,-100%) scale(.4)}to{opacity:1;transform:translate(-50%,-100%)}}
/* the role menu the browser draws for the Hub's role <select>: its options, ink on surface-2 as the Hub sets them, the select's edge */
.tw-menu{position:absolute;box-sizing:border-box;z-index:4;padding:4px 0;background:var(--eden-surface-2,#16181B);border:1px solid var(--eden-line-2,rgba(247,248,248,.14));border-radius:var(--eden-r-6,6px);font-size:13px;line-height:20px;color:var(--eden-ink,#F7F8F8);animation:tw-menu .14s ease-out both}
.tw-opt{padding:4px 30px 4px 11px;white-space:nowrap}
.tw-opt.is-hi{background:var(--eden-fill-on,rgba(247,248,248,.10))}
@keyframes tw-menu{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* the page's own bare .sel (site-demos.css: a selection box, opacity 0) would hide a selected comment and its pin: inside a screen, .sel is
   only what the captured surface says it is. At a class's weight, so every captured .sel rule still wins. */
.tw-screen :where(.sel){position:static;z-index:auto;pointer-events:auto;border:0;opacity:1;transition:none}
.tw-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.tw-lit{box-shadow:inset 0 0 0 1px rgba(201,183,255,.7);border-radius:8px;transition:box-shadow .3s}
/* the Hub's own cursor (apps/studio/auth/eden-cursor.js): an 8px iridescent dot, turning; near a control a 30px ring shows and the dot shrinks */
.tw-cur{position:absolute;z-index:3;left:86%;top:88%;width:0;height:0;pointer-events:none;transition:left .7s cubic-bezier(.5,0,.2,1),top .7s cubic-bezier(.5,0,.2,1)}
.tw-cur::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:conic-gradient(#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff);animation:tw-turn 4s linear infinite;transition:transform .2s ease}
.tw-cur::after{content:"";position:absolute;left:-15px;top:-15px;width:30px;height:30px;box-sizing:border-box;border-radius:50%;padding:1px;opacity:0;transform:scale(.4);background:conic-gradient(#9ee7ff,#c9b7ff,#f6c7e7,#fff4c2,#9ee7ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:tw-turn 4s linear infinite;transition:opacity .25s ease,transform .25s ease}
.tw-cur.is-near::before{transform:scale(.5)} .tw-cur.is-near::after{opacity:1;transform:none}
.tw-cur.is-press::before{transform:scale(.6)}
@keyframes tw-turn{to{rotate:1turn}}
@media (prefers-reduced-motion:reduce){.tw-cur,.tw-screen{transition:none}.tw-rv .rv-pin.new,.tw-menu{animation:none}}