/* Shared additions for the new screens. Built only from the prototype's tokens (kit/app.css :root).
   Every class starts with nx- so it can never collide with the prototype's own. */

/* the review bar: not part of the product, it switches a design page between its states */
.nx-review{position:fixed;z-index:90;left:50%;top:14px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;max-width:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none;padding:5px;border-radius:15px;background:rgba(18,14,34,.78);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px -18px rgba(0,0,0,.6);font-size:12.5px;font-weight:600;color:rgba(236,232,255,.72)}
.nx-review::-webkit-scrollbar{display:none}
.nx-review a,.nx-review button{flex:none;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:10px;color:inherit;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.nx-review a svg{width:14px;height:14px}
.nx-review a:hover,.nx-review button:hover{background:rgba(255,255,255,.08);color:#fff}
.nx-review button.on{background:#fff;color:#1A1433;box-shadow:0 4px 14px -6px rgba(0,0,0,.5)}
.nx-sep{flex:none;width:1px;height:18px;background:rgba(255,255,255,.14);margin:0 4px}

/* a block that rises in with the prototype's staggered entrance */
.view.enter .nx-rise{animation:rise .55s var(--ease) backwards;animation-delay:calc(var(--i,0) * 45ms)}

@media (max-width:800px){.nx-review{top:auto;bottom:14px}}

/* The sample logo (gails-mask.png) only loads on clipmagic.tech itself, so on these local design pages
   the GAIL's wordmark is set in type instead. A stand-in for the sample business only. */
.ws .lg i,.kitlogo i,.pv-av i,.poster .wm,.upframe .brandmark,.ppv-media .wm,.nx-logo-gails{-webkit-mask:none!important;mask:none!important;background:none!important;display:grid!important;place-items:center;overflow:visible}
.ws .lg i::after,.kitlogo i::after,.pv-av i::after,.poster .wm::after,.upframe .brandmark::after,.ppv-media .wm::after,.nx-logo-gails::after{content:"GAIL\2019s";font:500 1em/1 Inter,sans-serif;letter-spacing:.14em;color:#C8102E;white-space:nowrap}
.ws .lg i{font-size:8px}.kitlogo i{font-size:30px}.pv-av i{font-size:6.5px}.poster .wm,.ppv-media .wm,.upframe .brandmark{font-size:13px}
.poster .wm::after,.ppv-media .wm::after,.upframe .brandmark::after{color:#fff}