:root{
  --panel: rgba(4,6,16,.78);
  --panel-2: rgba(9,11,24,.62);
  --line: rgba(255,255,255,.10);
  --soft: rgba(255,255,255,.58);
  --strong: rgba(255,255,255,.92);
  --gold: #f5d46b;
  --violet: #8b5cf6;
  --cyan: #57d9ff;
  --success: #00d18f;
  --warning: #ff914d;
  --danger: #ff5d73;
  --page-accent: var(--cyan);
}
*{box-sizing:border-box}
html,body{
  width:100%; height:100%; margin:0; overflow:hidden;
  background:
    radial-gradient(circle at top, rgba(65,20,120,.22), transparent 26%),
    radial-gradient(circle at 80% 10%, rgba(8,84,164,.20), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(100,73,8,.16), transparent 28%),
    #020204;
  color:#fff;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  user-select:none;
}
body.arrival-pulse::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:58;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--page-accent) 42%, transparent), transparent 58%);
  opacity:0; animation: arrivalPulse .9s ease;
}
@keyframes arrivalPulse{
  0%{opacity:.65}
  100%{opacity:0}
}
canvas#scene-canvas, canvas#warp-canvas{
  position:fixed; inset:0; display:block;
}
#scene-canvas{z-index:1}
#warp-canvas{z-index:50; pointer-events:none; opacity:0; transition:opacity .14s ease}
#warp-canvas.warp-active{opacity:1}
#warp-flash{
  position:fixed; inset:0; background:#fff; opacity:0; z-index:61; pointer-events:none;
}
#warp-dest{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:55; pointer-events:none; opacity:0; transition:opacity .22s ease;
  font-family:'Orbitron',sans-serif; text-transform:uppercase; letter-spacing:.42em;
  text-align:center; color:var(--page-accent); text-shadow:0 0 35px color-mix(in srgb, var(--page-accent) 90%, white 10%), 0 0 70px color-mix(in srgb, var(--page-accent) 70%, transparent 30%);
}
#warp-dest.show{opacity:1}
#warp-dest .warp-line{
  font-size:.52rem; letter-spacing:.55em; opacity:.6; display:block; margin-bottom:.45rem;
}
#warp-dest-name{font-size:clamp(.72rem,1.5vw,1.05rem); font-weight:900}
.loading-screen{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at center, rgba(120,69,252,.14), rgba(0,0,0,.96) 54%), #000;
  transition:opacity .9s ease;
}
.loading-inner{text-align:center; padding:1.2rem}
.loading-kicker{
  font-family:'Orbitron',sans-serif; text-transform:uppercase; letter-spacing:.45em;
  color:rgba(255,255,255,.46); font-size:12px; margin-bottom:.9rem;
}
.loading-title{
  font-size:clamp(1.8rem,4vw,3.5rem); text-transform:uppercase; letter-spacing:.18em; font-weight:300; margin:0;
}
.loading-sub{
  margin-top:1rem; color:rgba(255,255,255,.42); font-size:11px; text-transform:uppercase; letter-spacing:.35em;
}
#loading-bar-wrap{width:280px; height:1px; background:rgba(255,255,255,.1); margin:1.7rem auto 0; overflow:hidden}
#loading-bar-fill{height:100%; background:linear-gradient(90deg,#57d9ff,#f5d46b); width:0; transition:width 1.1s ease}
.logo-float{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  height:138px; width:auto; z-index:16; pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.18)) drop-shadow(0 0 26px rgba(139,92,246,.18));
  animation:floatLogo 6s ease-in-out infinite;
}
@keyframes floatLogo{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-12px) scale(1.02)}
}
.interface-layer{
  position:fixed; inset:0; z-index:10; pointer-events:none;
  display:grid;
  grid-template-columns:310px minmax(0,1fr) 430px;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:14px; padding:14px; height:100dvh; overflow:hidden;
}
.interactive{pointer-events:auto}
.glass{
  background:linear-gradient(180deg, rgba(14,18,37,.78), rgba(5,7,18,.72));
  border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06), 0 0 40px rgba(110,63,255,.10);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.panel-soft{
  background:linear-gradient(180deg, rgba(9,12,25,.68), rgba(5,7,18,.48));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 40px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.topbar{
  grid-column:1 / 4; display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:16px; min-height:96px; padding:16px; border-radius:24px; overflow:hidden;
}
.hero-col{max-width:860px; padding-right:24px; flex:1 1 620px}
.hero-chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; align-items:center}
.small-chip{
  display:inline-flex; align-items:center; gap:8px;
  min-height:34px; padding:0 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.72); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
}
.small-dot{display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--page-accent); box-shadow:0 0 18px var(--page-accent)}
.room-subtitle{
  font-size:12px; text-transform:uppercase; letter-spacing:.28em; color:rgba(255,255,255,.46); margin-top:4px;
}
.room-title{
  font-size:clamp(30px,2.85vw,52px); line-height:.96; letter-spacing:-.04em; font-weight:800; font-style:italic; text-transform:uppercase; margin:8px 0 10px;
}
.hero-desc{
  max-width:768px; color:rgba(255,255,255,.68); font-size:14px; line-height:1.75; margin:0;
}
.topbar-actions{display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex:0 0 auto; margin-left:auto}
.contact-stack{
  color:rgba(255,255,255,.72); font-size:10px; letter-spacing:.20em; text-transform:uppercase; line-height:1.7; text-align:right
}
.contact-stack a{color:rgba(255,255,255,.86); text-decoration:none}

.header-menu-bar{
  flex:1 1 100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.header-dropdown{
  border-radius:22px;
  overflow:hidden;
  min-width:0;
  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.header-dropdown[open]{
  border-color:color-mix(in srgb, var(--page-accent) 24%, rgba(255,255,255,.18));
  box-shadow:0 18px 40px rgba(0,0,0,.34), 0 0 34px color-mix(in srgb, var(--page-accent) 16%, transparent);
}
.header-dropdown-toggle{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  cursor:pointer;
}
.header-dropdown-toggle::-webkit-details-marker{display:none}
.header-dropdown-copy{min-width:0}
.header-dropdown-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.82);
  font-size:18px;
  line-height:1;
  flex-shrink:0;
  transition:transform .22s ease, background .22s ease;
}
.header-dropdown[open] .header-dropdown-icon{
  transform:rotate(45deg);
  background:color-mix(in srgb, var(--page-accent) 14%, rgba(255,255,255,.06));
}
.header-dropdown-panel{
  padding:0 14px 14px;
}
.header-nav-list,
.header-contact-list{
  max-height:280px;
}
.header-contact-list{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
}
.left-panel{
  grid-column:1/2; border-radius:28px; padding:10px; display:flex; flex-direction:column; min-height:0; overflow:hidden; position:relative; isolation:isolate; z-index:12;
}
.left-panel-doors{grid-row:2/3}
.left-panel > .panel-shell{flex:1 1 auto; min-height:0; margin:0; display:flex; flex-direction:column}
.panel-shell{min-height:0; border-radius:22px; overflow:hidden; position:relative; z-index:1}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06)
}
.panel-head-copy{min-width:0}
.section-label{
  font-size:10px; letter-spacing:.38em; text-transform:uppercase; color:rgba(255,255,255,.36); margin-bottom:4px;
}
.section-sub{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.42)}
.panel-body{
  padding:14px; min-height:0; overflow:hidden; display:flex; flex:1 1 auto;
}
.panel-inner{
  min-height:0; border-radius:16px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
  padding:10px; width:100%; display:flex; flex-direction:column; overflow:hidden;
}
.scroll-y{min-height:0; overflow-y:auto; padding-right:6px; scrollbar-gutter:stable}
.scroll-y::-webkit-scrollbar{width:8px}
.scroll-y::-webkit-scrollbar-thumb{border-radius:999px; background:rgba(255,255,255,.12)}
.room-nav-list,.door-nav-list{display:flex; flex-direction:column; gap:8px}
.menu-link, .door-link, .action-secondary, .action-primary{
  cursor:pointer; text-decoration:none;
}
.menu-link,.door-link{
  width:100%; text-align:left; display:block; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03); color:rgba(255,255,255,.78); padding:12px 14px; transition:all .22s ease;
}
.menu-link:hover,.door-link:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; box-shadow:0 0 24px rgba(132,82,255,.10)}
.menu-link.active{
  border-color:color-mix(in srgb, var(--page-accent) 42%, white 18%);
  background:linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 14%, transparent), rgba(140,92,246,.12));
  color:#fff; box-shadow:0 0 28px color-mix(in srgb, var(--page-accent) 14%, transparent);
}
.door-link.active{
  border-color:color-mix(in srgb, var(--page-accent) 32%, white 10%);
  background:linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 12%, transparent), rgba(140,92,246,.12));
  color:#fff; box-shadow:0 0 24px color-mix(in srgb, var(--page-accent) 12%, transparent);
}
.entry-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.entry-code{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:4px}
.entry-title{font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.10em; color:rgba(255,255,255,.92)}
.entry-go{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.36)}
.contact-copy{font-size:14px; line-height:1.8; color:rgba(255,255,255,.68)}
.contact-label{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.42)}
.contact-copy a{color:#fff; text-decoration:none}
.right-panel{
  grid-column:3/4; grid-row:2/3; border-radius:28px; padding:16px; display:flex; flex-direction:column; gap:16px; min-height:0; overflow:hidden;
}
.right-panel-scroll{min-height:0; overflow-y:auto; padding-right:6px}
.card{border-radius:22px; padding:15px}
.card-title{
  font-size:30px; font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:-.02em; margin:0 0 12px;
}
.copy{font-size:14px; line-height:1.75; color:rgba(255,255,255,.66)}
.action-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}
.action-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 18px;
  border-radius:18px; border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(90deg, rgba(255,255,255,.92), rgba(245,212,107,.96)); color:#05070e;
  font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  box-shadow:0 0 26px rgba(245,212,107,.18); transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.action-primary:hover{transform:translateY(-1px); box-shadow:0 0 34px rgba(245,212,107,.28)}
.action-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 16px;
  border-radius:16px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:rgba(255,255,255,.82);
  font-size:11px; font-weight:700; letter-spacing:.20em; text-transform:uppercase; transition:all .22s ease;
}
.action-secondary:hover{background:rgba(255,255,255,.08); color:#fff}
.metric-line{
  display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(255,255,255,.06); padding:10px 0; font-size:12px;
}
.metric-line:last-child{border-bottom:0}
.metric-name{color:rgba(255,255,255,.58)}
.metric-value{color:#fff; text-align:right}
.footerbar{
  grid-column:1/4; grid-row:3/4; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 16px; border-radius:20px; min-height:58px; overflow:hidden;
}
.footer-copy{
  font-size:10px; letter-spacing:.20em; text-transform:uppercase; color:rgba(255,255,255,.42); line-height:1.6;
}
.quick-links{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px}
.quick-link{
  color:rgba(255,255,255,.70); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.20); font-size:11px;
}
.quick-link:hover{color:#fff; border-color:rgba(255,255,255,.46)}
.portal-label{
  position:fixed; transform:translate(-50%,-50%);
  background:rgba(2,4,12,.86); border:1px solid rgba(255,255,255,.12); border-left:3px solid var(--page-accent);
  border-radius:10px; padding:9px 12px; white-space:nowrap; pointer-events:none; z-index:18;
  font-size:10px; text-transform:uppercase; letter-spacing:.20em; color:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); opacity:0;
  transition:opacity .18s ease, transform .18s ease; box-shadow:0 10px 28px rgba(0,0,0,.30)
}
.canvas-warp{animation:warpChr 1.1s ease-in-out forwards}
@keyframes warpChr{
  0%{filter:none}
  20%{filter:drop-shadow(5px 0 0 rgba(255,30,80,.8)) drop-shadow(-5px 0 0 rgba(0,200,255,.8)) blur(.5px)}
  44%{filter:drop-shadow(14px 0 0 rgba(255,20,60,.55)) drop-shadow(-14px 0 0 rgba(0,180,255,.55)) blur(2.5px) brightness(2.4)}
  70%{filter:drop-shadow(6px 0 0 rgba(255,40,80,.4)) drop-shadow(-6px 0 0 rgba(0,210,255,.4)) blur(1px) brightness(1.5)}
  100%{filter:none}
}
@media (max-width:1220px){
  .interface-layer{grid-template-columns:270px minmax(0,1fr) 340px}
  .header-menu-bar{grid-template-columns:1fr}
  .logo-float{height:112px}
  .room-title{font-size:clamp(28px,2.6vw,44px)}
}
@media (max-width:980px){
  html,body{overflow:auto}
  .interface-layer{
    grid-template-columns:1fr;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    padding:12px; overflow-y:auto;
  }
  .topbar,.left-panel,.right-panel,.footerbar{grid-column:1/2}
  .topbar{flex-direction:column; min-height:unset}
  .topbar-actions{align-items:flex-start; margin-left:0}
  .header-menu-bar{grid-template-columns:1fr}
  .left-panel-doors{grid-row:2/3}
  .right-panel{grid-row:3/4}
  .footerbar{grid-row:4/5; flex-direction:column; align-items:flex-start}
  .scroll-y, .right-panel-scroll{max-height:36vh}
  .logo-float{display:none}
}
@media (max-height:860px){
  .interface-layer{gap:12px; padding:12px}
  .topbar,.left-panel,.right-panel,.footerbar{padding-left:14px; padding-right:14px}
  .topbar{min-height:88px; padding-top:14px; padding-bottom:14px}
  .header-nav-list,
  .header-contact-list,
  .scroll-y,
  .right-panel-scroll{max-height:32vh}
  .room-title{font-size:clamp(26px,2.5vw,40px)}
  .logo-float{height:104px}
}