/* FLUX WEAR, the demo hub's brand layer. Loaded last, so it only re-tints the hub-core house style.
   DIRECTION  A streetwear studio: concrete paper, black ink, one signal orange for what matters.
   SIGNATURE  The block FLUX wordmark in the rail and the orange square that follows it. */
:root{ --bg:#ebeae7; --line:#dddbd6; --hoverbg:#e4e2de; --rowline:#e6e4e0;
  --red:#ff5a1f; --red-hover:#e64a12; --neg:#e5484d; --red-tint:rgba(255,90,31,.12); --red-tint-line:rgba(255,90,31,.32);
  --at-paper:#f7f6f4; --at-rule:#e2e0dc; --at-rule-2:#d3d0ca; --at-img-bg:#e6e4e0; --at-mono-bg:#e8e6e2;
  --at-topbar-glass:rgba(235,234,231,.86); --at-rail-on-fg:#ff5a1f;
  --at-bar:color-mix(in srgb, #ff5a1f 38%, #fff); }
html[data-theme="dark"]{ --bg:#0a0a0a; --paper:#121212; --card:#121212; --surface:#121212;
  --red:#ff6a33; --red-hover:#ff5a1f; --red-tint:rgba(255,106,51,.14); --red-tint-line:rgba(255,106,51,.3);
  --at-paper:#121212; --at-raised:#171717; --at-hero-bg:#171717; --at-rule:#222; --at-rule-2:#2e2e2e;
  --at-topbar-glass:rgba(10,10,10,.78); --at-rail-on-fg:#ff6a33;
  --at-bar:color-mix(in srgb, #ff6a33 46%, #121212); --at-img-bg:#1a1a1a; --at-mono-bg:#1a1a1a; }
#rail .rail-logo{ filter:none; width:112px; max-height:none; }
.brand-night{ display:none; }
html[data-theme="dark"] .brand-day{ display:none; }
html[data-theme="dark"] .brand-night{ display:block; }
/* the rail's glass: neutral concrete, with a faint orange light drifting behind it */
html:not([data-theme="dark"]) #rail{ background:linear-gradient(180deg, rgba(244,243,240,.84), rgba(234,232,228,.78) 45%, rgba(228,226,222,.8));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 1px rgba(0,0,0,.08), 0 18px 44px -24px rgba(0,0,0,.35); }
html:not([data-theme="dark"]) #rail::before{ background:radial-gradient(46% 24% at 30% 56%, rgba(120,120,120,.22), transparent 72%), radial-gradient(40% 20% at 72% 22%, rgba(255,255,255,.85), transparent 72%); }
#rail::after{ background:radial-gradient(44% 20% at 68% 76%, rgba(255,90,31,.2), transparent 72%), radial-gradient(34% 16% at 26% 26%, rgba(255,160,110,.14), transparent 72%) !important; }
.topbar-me .me-label{ font-weight:500; }
/* a demo has no account to switch */
.switch-acct{ display:none !important; }

.demo-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%, 12px); z-index:9999; max-width:min(92vw, 440px);
  padding:11px 16px; border-radius:12px; background:#111; color:#f2f0ec; font-size:13px; line-height:1.4; text-align:center;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s cubic-bezier(.22,1,.36,1); }
.demo-toast.on{ opacity:1; transform:translate(-50%, 0); }
/* The rail closed: the wordmark gives way to the square F mark. */
.brand-mini{ display:none; width:36px; height:36px; }
body.rail-min #rail .brand-day, body.rail-min #rail .brand-night{ display:none; }
body.rail-min #rail .brand-mini{ display:block; margin:0 auto; border-radius:9px; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 6px 14px -8px rgba(0,0,0,.6); }