body.standalone{display:flex; flex-direction:column; min-height:100%;}

.bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.bg::before{content:""; position:absolute; inset:0;
  background:radial-gradient(90% 60% at 50% -10%, var(--surface-panel-low) 0%, var(--surface) 48%, var(--surface-rail) 100%);}
.bg::after{content:""; position:absolute; top:-10rem; left:50%; transform:translateX(-50%);
  width:var(--stage-w); height:var(--stage-h);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--brand-red) 16%, transparent), transparent 72%);
  opacity:.55;}
.grid{position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%, var(--mask-opaque) 0%, transparent 70%);
          mask-image:radial-gradient(80% 60% at 50% 0%, var(--mask-opaque) 0%, transparent 70%);}

.chrome-top{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-20); height:var(--size-52); flex:0 0 auto;
  border-bottom:1px solid var(--line-divider); background:color-mix(in srgb, var(--surface-panel) 55%, transparent); backdrop-filter:blur(8px);}
.brand-mark{display:flex; align-items:center; gap:var(--space-10);}
.brand-mark .logo{height:var(--size-24); width:auto; display:block;}
.top-right{display:flex; align-items:center; gap:var(--space-16); font-size:var(--fs-body-sm);}
.env{display:inline-flex; align-items:center; gap:var(--space-6); height:var(--size-28); padding:0 var(--space-10); border:1px solid var(--line-strong); border-radius:var(--radius-6); color:var(--text-dim); font-size:var(--fs-body-sm); letter-spacing:.017em;}
.env .dot{width:var(--size-6); height:var(--size-6); border-radius:var(--radius-full); background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);}

.lang-menu{position:relative;}
.lang-menu > summary{display:inline-flex; align-items:center; gap:var(--space-6); height:var(--size-28); padding:0 var(--space-8); cursor:pointer;
  list-style:none; font-size:var(--fs-body); font-weight:600; letter-spacing:.025em; color:var(--text-dim);
  border:1px solid var(--line-strong); border-radius:var(--radius-6); background:var(--surface-panel-low);}
.lang-menu > summary::-webkit-details-marker{display:none;}
.lang-menu > summary:hover{color:var(--text); border-color:var(--text-muted);}
.lang-menu > summary svg{width:var(--ic-14); height:var(--ic-14);}
.lang-menu > summary .caret{width:var(--size-12); height:var(--size-12); opacity:.7;}
.lang-menu[open] > summary{color:var(--text-bright); background:var(--surface-hover);}
.lang-pop{position:absolute; top:calc(100% + var(--space-6)); right:0; min-width:var(--langmenu-w); padding:var(--space-6); z-index:5;
  background:var(--surface-overlay); border:1px solid var(--line-strong); border-radius:var(--radius-8);
  box-shadow:var(--shadow-panel);}
.lang-pop a{display:flex; align-items:center; gap:var(--space-8); padding:var(--space-6) var(--space-8); border-radius:var(--radius-6);
  color:var(--text); text-decoration:none; font-size:var(--fs-body);}
.lang-pop a:hover{background:var(--surface-hover); color:var(--text-bright);}
.lang-pop a .tick{width:var(--size-14); height:var(--size-14); flex-shrink:0; color:var(--success); opacity:0;}
.lang-pop a[aria-current="true"] .tick{opacity:1;}
.lang-pop .code{margin-left:auto; font-size:var(--fs-label); font-weight:600; letter-spacing:.057em; color:var(--text-muted);}

.stage{position:relative; z-index:1; flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:var(--space-40) var(--space-24);}

.hero{text-align:center; margin-bottom:var(--space-40);}
.hero .name{position:relative; display:inline-block; font-family:var(--font-display);
  font-size:var(--fs-mark-xl); font-weight:700; line-height:var(--line-height-none); white-space:nowrap;}
.hero .name .mark{letter-spacing:-.02em; background:linear-gradient(180deg,var(--logo-grad-top) 0%,var(--logo-grad-bottom) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.hero .name .x{position:relative; color:var(--brand-red);
  -webkit-text-fill-color:var(--brand-red);}
.hero .name .erp{position:absolute; left:55%; top:49%; transform:translateY(-50%); font-size:.22em; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  color:var(--logo-text); -webkit-text-fill-color:var(--logo-text);}
.hero .claim{margin-top:var(--space-14); color:var(--text-dim); font-size:var(--fs-body-sm); font-weight:500; letter-spacing:.091em; text-transform:uppercase;}

@media (max-width:560px){
  .chrome-top .env{display:none;}
  .hero .name{font-size:var(--fs-mark-lg); letter-spacing:-.017em;}
  .hero .claim{font-size:var(--fs-label); letter-spacing:.1em;}
}