:root { color-scheme: dark; --blue:rgb(var(--bb-d17-rgb)); --blue2:rgb(var(--bb-d36-rgb)); --yellow:rgb(var(--bb-a58-rgb)); --paper:#fff8df; }
* { box-sizing: border-box; }
html, body, #store-shell, #store-frame-host { width:100%; height:100%; height:100dvh; margin:0; overflow:hidden; }
body { background:rgb(var(--bb-d06-rgb)); color:var(--paper); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button, input { font:inherit; }
#store-frame-host { position:absolute; inset:0; }
.store-frame { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; background:rgb(var(--bb-d06-rgb)); touch-action:none; }
body.store-intro .store-frame { touch-action:pan-y; }
#x-cursor { position:fixed; left:50%; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; z-index:150;
  pointer-events:none; opacity:0; border-radius:50%; border:2px solid rgba(255,255,255,.92);
  background:rgba(255,255,255,.16); box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 5px rgba(0,0,0,.55);
  transition:opacity .16s,transform .1s,border-color .1s,background .1s; }
body.store-locked:not(.store-inspecting) #x-cursor, #x-cursor.free-show { opacity:1; }
#x-cursor.over { border-color:var(--yellow); background:rgba(var(--bb-a58-rgb),.32); transform:scale(1.4);
  box-shadow:0 0 11px rgba(var(--bb-a58-rgb),.62),0 0 0 1px rgba(0,0,0,.4); }
.skip-link { position:fixed; top:10px; left:10px; z-index:500; padding:10px 14px; border-radius:5px; color:rgb(var(--bb-d17-rgb)); background:var(--yellow); font-weight:800; transform:translateY(-160%); transition:transform .15s ease; }
.skip-link:focus { transform:none; }
.skip-link-browse { left:auto; right:10px; }
.no-script a { color:var(--yellow); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
#store-loader { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; background:radial-gradient(circle 620px at 50% 43%,rgb(var(--bb-d36-rgb)) 0,rgb(var(--bb-d17-rgb)) 50%,rgb(var(--bb-d06-rgb)) 100%); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease,visibility 0s linear .18s; }
body.store-loading #store-loader { opacity:1; visibility:visible; pointer-events:auto; transition:none; }
.loader-mark,.loader-status,.loader-track { transition:opacity .06s linear; }
#store-loader.revealing .loader-mark,#store-loader.revealing .loader-status,#store-loader.revealing .loader-track { opacity:0; }
/* Unknown startup work stays visibly active; only counted work displays a completion percentage. */
.loader-track { position:relative; width:min(390px,calc(100vw - 64px)); height:8px; overflow:hidden; border:1px solid rgba(var(--bb-a62-rgb),.72); border-radius:999px; background:rgb(var(--bb-d17-rgb)); box-shadow:inset 0 1px 3px rgba(0,0,0,.55); }
.loader-track i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,rgb(var(--bb-a47-rgb)),rgb(var(--bb-a71-rgb))); box-shadow:0 0 6px rgba(var(--bb-a62-rgb),.65); transform:scaleX(0); transform-origin:left; transition:transform .34s ease-out; }
/* Transform-only motion keeps running while the same-origin room occupies the JS thread. */
#store-loader[data-progress="activity"] .loader-percent { visibility:hidden; }
body.store-loading #store-loader[data-progress="activity"] .loader-track i { width:36%; animation:loader-activity 1.6s ease-in-out infinite; }
@keyframes loader-activity { from { transform:translateX(-100%); } to { transform:translateX(280%); } }
.loader-track::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,transparent,rgba(var(--bb-a71-rgb),.3),transparent); transform:translateX(-100%); }
body.store-loading #store-loader[data-progress="measured"] .loader-track::after { animation:loader-sheen 1.3s linear infinite; }
@keyframes loader-sheen { to { transform:translateX(100%); } }
#store-loader.revealing .loader-track::after { animation:none; }
@media (prefers-reduced-motion:reduce) { #store-loader,.loader-track i { transition:none; } .loader-track i,.loader-track::after { animation:none!important; } #store-loader[data-progress="activity"] .loader-track i { transform:translateX(90%)!important; } }
.loader-mark { color:var(--yellow); font-size:34px; line-height:1; font-weight:900; font-style:italic; letter-spacing:-1.2px; text-shadow:0 4px 0 rgb(var(--bb-d06-rgb)); }
.loader-status { display:flex; align-items:center; width:min(390px,calc(100vw - 64px)); min-width:0; gap:12px; color:rgba(255,248,223,.72); font-size:13px; letter-spacing:1px; }
.loader-copy { min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.loader-percent { flex:0 0 auto; font-variant-numeric:tabular-nums; font-feature-settings:'tnum'; }
.trailer-hit { display:none; position:fixed; z-index:120; padding:0; margin:0; border:0; background:transparent; -webkit-tap-highlight-color:transparent; }
.share-toast { position:fixed; left:50%; bottom:max(28px,env(safe-area-inset-bottom)); z-index:180; max-width:calc(100vw - 32px); padding:10px 17px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(var(--bb-d06-rgb),.9); color:#fff8df; box-shadow:0 12px 40px rgba(0,0,0,.42); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:opacity .18s ease,transform .18s ease; }
.share-toast.show { opacity:1; transform:translate(-50%,0); }
/* Trial mode is a status, so it wears the same dark-glass pill as Sign in and the gem counter (auth-ui.css) — one
   tracked-caps label, a hairline accent frame, no banner across the sign. It takes whichever corner Trial has
   emptied: the gem counter's top-left on the launch card, the services pill's top-right in the room (those logos are
   exactly what the pill explains the absence of). It hides with the loader and the inspect view like its neighbours. */
.trial-pill { position:fixed; left:max(16px,env(safe-area-inset-left)); top:max(16px,env(safe-area-inset-top)); z-index:140; display:inline-flex; align-items:center; min-height:44px; padding:0 4px 0 14px; box-sizing:border-box;
  color:rgba(var(--brand-paper-rgb,244,241,234),.96); border:1px solid rgba(var(--brand-accent-rgb,247,206,45),.5); border-radius:999px; background:rgba(12,12,14,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.3); -webkit-backdrop-filter:blur(10px) saturate(1.05); backdrop-filter:blur(10px) saturate(1.05);
  font:850 11px/1 "Helvetica Neue",Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; transition:opacity .2s ease; }
.trial-pill[hidden],html:not(.trial-mode) .trial-pill:not(.size-pill),html:not(.size-preview) .size-pill,body.roku-mode .trial-pill,body.store-dialog-open .trial-pill,body.store-drawer-open .trial-pill,body.account-open .trial-pill { display:none; }
body.store-loading .trial-pill,body.store-entry-loading .trial-pill,body.store-revealing .trial-pill,body.store-inspecting .trial-pill,body.trailer-open .trial-pill { opacity:0; visibility:hidden; pointer-events:none; }
body:not(.store-intro) .trial-pill { left:auto; right:max(16px,env(safe-area-inset-right)); cursor:none; }   /* the shell's ring reticle is the pointer in the room */
body:not(.store-intro) .trial-pill button { cursor:none; }
.trial-pill-dot { width:7px; height:7px; flex:none; margin-right:9px; border-radius:50%; background:var(--brand-accent,#f7ce2d); box-shadow:0 0 8px rgba(var(--brand-accent-rgb,247,206,45),.7); }
.trial-pill button { display:inline-flex; align-items:center; align-self:stretch; min-height:36px; margin-left:12px; padding:0 11px 0 12px; color:rgba(var(--brand-paper-rgb,244,241,234),.74); border:0; border-left:1px solid rgba(var(--brand-paper-rgb,244,241,234),.2); border-radius:0 999px 999px 0;
  background:transparent; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; transition:color .16s ease; }
.trial-pill button:hover { color:#fff; }
.trial-pill button[hidden] { display:none; }
.trial-pill button:focus-visible { color:#fff; outline:2px solid var(--brand-accent,#f7ce2d); outline-offset:-3px; }
/* The Themes pill: the launch card's "Themes ✎" control, docked under the Trial pill in the same corner. */
body:not(.store-intro) .trial-pill-themes { top:calc(max(16px,env(safe-area-inset-top)) + 52px); padding:0 14px; gap:7px; transition:color .16s ease,border-color .16s ease,opacity .2s ease; }
.trial-pill-themes svg { width:15px; height:15px; flex:none; color:var(--brand-accent,#f7ce2d); }
.trial-pill-themes:hover,.trial-pill-themes:focus-visible { color:#fff; border-color:var(--brand-accent,#f7ce2d); outline:none; }
body.store-intro .trial-pill-themes { display:none; }
@media (max-width:760px) {
  .trial-pill { min-height:46px; }
  body:not(.store-intro) .trial-pill { right:max(8px,env(safe-area-inset-right)); top:max(14px,env(safe-area-inset-top)); }
  body:not(.store-intro) .trial-pill-themes { top:calc(max(14px,env(safe-area-inset-top)) + 54px); }
}
@media (max-width:359px) { .trial-pill { padding-left:12px; letter-spacing:.06em; } .trial-pill button { margin-left:9px; padding:0 9px 0 10px; } }
.trailer-modal { position:fixed; inset:0; z-index:220; display:grid; place-items:center; padding:clamp(14px,4vw,48px); }
.trailer-modal[hidden] { display:none; }
.trailer-scrim { position:absolute; inset:0; background:rgba(var(--bb-d03-rgb),.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.trailer-card { position:relative; z-index:1; width:min(1080px,94vw,calc(177.78svh - 170.67px)); }
.trailer-frame { overflow:hidden; width:100%; aspect-ratio:16/9; border:1px solid rgba(var(--bb-a58-rgb),.5); border-radius:10px; background:#000; box-shadow:0 28px 100px #000; }
.trailer-frame iframe { width:100%; height:100%; border:0; }
.trailer-close { position:absolute; right:0; top:-48px; width:40px; height:40px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(var(--bb-d06-rgb),.8); color:#fff; font-size:27px; line-height:1; cursor:pointer; }
.trailer-close:focus-visible,.trailer-close:hover { outline:2px solid var(--yellow); outline-offset:2px; }
.no-script { position:fixed; inset:0; display:grid; place-items:center; margin:0; padding:24px; background:rgb(var(--bb-d06-rgb)); text-align:center; }
@media (pointer:coarse) { #x-cursor { display:none; } }
body.roku-mode { cursor:none; }
body.roku-mode:not(.store-loading):not(.store-revealing):not(.store-entry-loading):not(.store-intro):not(.store-inspecting) #x-cursor { display:block!important; left:50%!important; top:50%!important; opacity:1!important; }
body.roku-mode:is(.store-loading,.store-revealing,.store-entry-loading,.store-intro) #x-cursor,
body.roku-mode.store-inspecting #x-cursor { display:none!important; opacity:0!important; }
body.roku-mode #account-button,body.roku-mode #account-modal { display:none!important; pointer-events:none!important; }
body.roku-mode #trailer-hit,body.roku-mode #trailer-modal { pointer-events:none!important; }
body.roku-mode :is(button,a[href],[role="button"],[tabindex]:not([tabindex="-1"])):focus { outline:3px solid var(--yellow)!important; outline-offset:3px!important; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.001ms!important; animation-duration:.001ms!important; animation-iteration-count:1!important; } }

/* A store-size preview is the same status as a theme trial, so it shares the pill above; html.size-preview shows it. */