.hub-page {
  --hub-muted:#c4d0cb;
  --hub-quiet:#a8b6b0;
}

.hub-frame {
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

.hub-header,.hub-footer,.home-hero,.rooms-main,.privacy-main,.not-found-main {
  position:relative;
  z-index:1;
}

.hub-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px 6.7% 0;
}

.hub-header .wordmark { flex:none; }
.hub-header nav .button { padding:0 22px; }

.hub-footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
  padding:0 6.7% 22px;
  color:var(--hub-quiet);
  font-size:14px;
  font-weight:500;
}

.hub-footer a {
  color:inherit;
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

.home-hero {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:30px;
  padding:58px 6.7% 72px;
  width:60%;
  max-width:1000px;
}

.home-hero h1 {
  font-size:clamp(64px,6.4vw,112px);
  line-height:.98;
  letter-spacing:-.05em;
}

.home-lead {
  max-width:34ch;
  font-size:22px;
  line-height:1.45;
  color:var(--hub-muted);
}

.home-actions,.room-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.home-actions .button {
  min-height:58px;
  padding:0 30px;
  font-size:19px;
}

.home-note {
  max-width:54ch;
  font-size:15px;
  line-height:1.5;
  font-weight:500;
  color:var(--hub-quiet);
}

.home-note strong { color:var(--hub-muted); font-weight:600; }

.door-scene {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.door-halo {
  position:absolute;
  right:4%;
  top:8%;
  width:50%;
  height:92%;
  background:radial-gradient(ellipse 60% 55% at 58% 48%,#3df59b29 0%,#19b8d612 45%,transparent 75%);
}

.door-frame {
  position:absolute;
  right:16%;
  bottom:0;
  width:330px;
  height:62%;
  max-height:650px;
  border:2px solid #ffffff1a;
  border-bottom:0;
  border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,#3df59b0d,#04070699);
}

.door-panel {
  position:absolute;
  inset:26px 20px 0;
  border-radius:6px 6px 0 0;
  background:linear-gradient(#0a1511,#060b09);
  box-shadow:inset 0 0 0 1px #ffffff0f;
}

.door-light {
  position:absolute;
  top:26px;
  right:20px;
  bottom:0;
  width:34px;
  background:linear-gradient(90deg,#3df59bd9,#3df59b40 40%,transparent);
}

.door-handle {
  position:absolute;
  left:43px;
  top:54%;
  height:7px;
  width:30px;
  border-radius:4px;
  background:#71897c;
}

.door-floor {
  position:absolute;
  right:calc(16% - 120px);
  bottom:-60px;
  width:560px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(ellipse at 70% 30%,#3df59b38,transparent 65%);
}

.exit-sign {
  position:absolute;
  right:calc(16% + 85px);
  bottom:min(calc(62% + 40px),690px);
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:8px;
  background:#0bbf6a;
  color:#04140b;
  box-shadow:0 0 60px #3df59b73;
  font-weight:800;
  font-size:22px;
  line-height:1;
  letter-spacing:.08em;
}

.sound-toggle {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  background:none;
  color:var(--text);
  font-size:14px;
  font-weight:600;
  min-height:44px;
}

.sound-circle {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:50%;
}

.sound-circle svg { width:21px; height:21px; }
.sound-toggle:hover .sound-circle { border-color:var(--accent); }
.sound-toggle[data-sound="off"] .sound-on-icon,
.sound-toggle[data-sound="on"] .sound-off-icon { display:none; }

.rooms-main {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:34px;
  padding:64px 6.7% 72px;
}

.hub-page-lead { display:flex; flex-direction:column; gap:14px; }
.hub-page-lead h1 { font-size:72px; line-height:1; }
.hub-page-lead > p { font-size:20px; line-height:1.45; color:var(--hub-muted); }
.room-list { display:flex; flex-direction:column; gap:30px; }

.room-card {
  display:flex;
  border-radius:26px;
  border:1px solid #ffffff1f;
  background:var(--surface);
  overflow:hidden;
  max-width:1320px;
}

.deck-art {
  flex:1 1 420px;
  min-width:0;
  min-height:340px;
  position:relative;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,#5fd4e829,transparent 70%),#0f1a24;
  border-right:1px solid #ffffff14;
  overflow:hidden;
  color:#9fb4c4;
  font:600 13px/1 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.14em;
}

.deck-label { position:absolute; left:9%; top:18%; }
.deck-consoles { position:absolute; left:9%; right:9%; top:38%; display:flex; gap:6px; }
.deck-console { flex:1; height:72px; border:2px solid #4a6a83; border-radius:4px; }
.deck-console.repaired { border-color:#5fd4e8; background:#5fd4e82e; }
.deck-pod { flex:1.4; height:72px; border:2px solid #f2b84b; border-radius:36px 8px 8px 36px; }
.deck-caption { position:absolute; left:9%; top:calc(38% + 92px); }
.deck-beacon { position:absolute; right:8%; bottom:12%; width:74px; height:74px; border:3px solid #5fd4e8; border-radius:50%; display:grid; place-items:center; }
.deck-beacon span { width:30px; height:30px; border-radius:50%; background:#5fd4e8; }

.room-copy { flex:1.15 1 440px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:40px 44px; }
.room-module { font-size:14px; font-weight:600; line-height:1.4; color:var(--accent); border:1px solid #3df59b73; border-radius:999px; padding:6px 12px; }
.room-copy h2 { font-size:40px; line-height:1.05; }
.room-description { font-size:18px; line-height:1.5; color:var(--hub-muted); max-width:52ch; }
.room-facts { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:16px; font-weight:600; line-height:1.4; }
.room-topics { color:var(--hub-quiet); font-size:15px; line-height:1.5; }
.room-actions { padding-top:6px; gap:12px; }
.room-actions .button { min-height:52px; padding:0 26px; font-size:17px; }

.privacy-main { width:min(100%,1040px); margin:0 auto; padding:64px 6.7% 72px; flex:1; }
.draft-notice { display:inline-block; padding:8px 14px; border:1px solid var(--warn); background:var(--warn-bg); border-radius:999px; color:var(--warn); font-size:14px; font-weight:600; margin-bottom:24px; }
.privacy-copy { display:flex; flex-direction:column; gap:32px; margin:44px 0; }
.privacy-copy section { display:flex; flex-direction:column; gap:12px; }
.privacy-copy h2 { font-size:25px; }
.privacy-copy p { color:var(--hub-muted); font-size:17px; line-height:1.7; max-width:70ch; }
.privacy-copy a { overflow-wrap:anywhere; }

.not-found-main { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:24px; padding:64px 6.7% 88px; }
.error-number { color:var(--accent); letter-spacing:.12em; font-size:18px; font-weight:700; }
.not-found-main h1 { font-size:clamp(50px,5.5vw,84px); }
.not-found-main > p:not(.error-number) { max-width:44ch; color:var(--hub-muted); font-size:20px; line-height:1.5; }

@media (min-width:1700px) {
  .home-hero { padding-top:80px; padding-bottom:100px; }
  .home-lead { font-size:24px; }
  .home-note { font-size:16px; }
  .door-frame { width:380px; right:18%; }
  .exit-sign { right:calc(18% + 110px); }
  .door-floor { right:calc(18% - 90px); }
  .room-card { max-width:1450px; }
  .room-copy { padding:44px 48px; }
}

@media (max-width:1100px) {
  .home-hero { width:66%; }
  .door-frame { right:5%; width:280px; }
  .exit-sign { right:calc(5% + 60px); }
  .door-floor { right:calc(5% - 140px); }
  .home-hero h1 { font-size:72px; }
  .home-lead { font-size:20px; }
  .room-copy { padding:30px; }
  .room-copy h2 { font-size:34px; }
  .deck-art { flex-basis:340px; }
}

@media (max-width:760px) {
  .hub-header { padding:22px 24px 0; gap:14px; flex-wrap:wrap; }
  .hub-header .wordmark { font-size:25px; gap:8px; }
  .hub-header .wordmark svg { width:34px; }
  .hub-header nav .button { padding:0 16px; font-size:14px; }
  .hub-footer { padding:0 24px 22px; font-size:13px; gap:8px 20px; }
  .home-hero { width:100%; max-width:590px; padding:64px 24px 290px; gap:24px; justify-content:flex-start; }
  .home-hero h1 { font-size:64px; }
  .home-lead { max-width:30ch; }
  .home-actions { gap:12px; }
  .home-actions .button { min-height:54px; padding:0 23px; font-size:17px; }
  .home-note { max-width:40ch; font-size:14px; }
  .door-halo { top:auto; bottom:0; width:100%; height:400px; right:-10%; }
  .door-frame { right:14%; width:170px; height:225px; bottom:74px; }
  .door-panel { inset:16px 12px 0; }
  .door-light { top:16px; right:12px; width:24px; }
  .door-handle { left:26px; width:20px; height:5px; }
  .exit-sign { bottom:315px; right:calc(14% + 29px); font-size:17px; padding:7px 12px; gap:7px; box-shadow:0 0 42px #3df59b4d; }
  .exit-sign svg { width:23px; height:23px; }
  .door-floor { bottom:42px; right:calc(14% - 90px); height:110px; width:340px; }
  #sound-label { display:none; }
  .rooms-main { padding:44px 24px 50px; gap:28px; }
  .hub-page-lead h1 { font-size:52px; }
  .hub-page-lead > p { font-size:18px; }
  .room-card { flex-direction:column; }
  .deck-art { flex:none; height:250px; min-height:0; border-right:0; border-bottom:1px solid #ffffff14; }
  .deck-label { top:17%; font-size:11px; }
  .deck-consoles { top:35%; gap:4px; }
  .deck-console,.deck-pod { height:54px; }
  .deck-caption { top:calc(35% + 70px); font-size:11px; }
  .deck-beacon { width:48px; height:48px; bottom:8%; border-width:2px; }
  .deck-beacon span { width:19px; height:19px; }
  .room-copy { padding:28px 24px; gap:17px; }
  .room-copy h2 { font-size:34px; }
  .room-module { font-size:12px; }
  .room-description { font-size:17px; }
  .room-facts { font-size:15px; }
  .room-topics { font-size:14px; }
  .room-actions .button { padding:0 20px; font-size:16px; }
  .privacy-main { padding:44px 24px 50px; }
  .privacy-copy { margin:32px 0; }
  .privacy-copy p { font-size:16px; }
  .not-found-main { padding:58px 24px 64px; }
  .not-found-main h1 { font-size:48px; }
  .not-found-main > p:not(.error-number) { font-size:18px; }
}

@media (max-width:420px) {
  .hub-header { padding:20px 20px 0; }
  .hub-header .wordmark { font-size:23px; }
  .hub-header nav { margin-left:auto; }
  .home-hero { padding-left:20px; padding-right:20px; padding-top:52px; }
  .home-hero h1 { font-size:59px; }
  .home-actions .button { padding:0 21px; }
  .rooms-main,.privacy-main { padding-left:20px; padding-right:20px; }
  .hub-page-lead h1 { font-size:46px; }
  .hub-footer { padding-left:20px; padding-right:20px; }
  .room-copy { padding:26px 20px; }
  .room-copy h2 { font-size:31px; }
  .room-actions .button { padding:0 17px; }
}