html, body { min-height: 100%; }
body.hf-body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.start-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4vw; border-bottom: 1px solid var(--hf-glass-border); }
.start-topbar p { margin: 0; font: 500 var(--hf-text-xs) var(--hf-font); color: var(--hf-ink-soft); }
.start-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr); min-height: calc(100svh - 91px); }
.scene-side { --scene-ink: #ecf3f8; position: relative; display: flex; flex-direction: column; overflow: hidden; background: #142637; color: var(--scene-ink); padding: 40px 5vw 24px; isolation: isolate; }
.scene-side::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#95afc00b 1px, transparent 1px), linear-gradient(90deg, #95afc00b 1px, transparent 1px); background-size: 48px 48px; }
.scene-heading { position: relative; z-index: 1; margin: 0; max-width: 430px; font: 500 clamp(1.8rem, 3.1vw, 3rem)/1.12 var(--hf-font); letter-spacing: -0.045em; }
.scene-intro { margin: 14px 0 0; max-width: 38ch; font: 400 var(--hf-text-sm)/1.6 var(--hf-font); color: #b3c9d7; }
.building-scene { position: relative; width: 100%; flex: 1; min-height: 400px; margin: -8px 0 0; }
.building-scene canvas, .scene-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.building-scene.ready .scene-fallback { visibility: hidden; }
.scene-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 400 var(--hf-text-xs)/1.6 var(--hf-font); color: #b3c9d7; }
.scene-caption { margin: 0; }
.scene-caption strong { display: block; color: #ecf3f8; font-weight: 600; }
.scene-control { padding: 9px 13px; border: 1px solid #718b9c; color: #ecf3f8; background: #142637; border-radius: 6px; cursor: pointer; font: 500 var(--hf-text-xs) var(--hf-font); }
.scene-control:hover { background: #274358; }
.scene-control:focus-visible { outline: 3px solid #ffb347; outline-offset: 4px; }
.powered { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #ffffff24; font: 400 var(--hf-text-xs) var(--hf-font); color: #b3c9d7; }
.powered img { width: 48px; height: 48px; padding: 7px; box-sizing: content-box; }
.signin-side { align-self: center; width: min(390px, calc(100% - 64px)); justify-self: center; padding: 56px 0; display: grid; gap: 22px; }
.signin-title { margin: 0 0 7px; font: 600 1.8rem/1.2 var(--hf-font); letter-spacing: -.035em; }
.lede { margin: 0; font: 400 var(--hf-text-sm)/1.6 var(--hf-font); color: var(--hf-ink-soft); }
.lede strong { color: var(--hf-ink); font-weight: 600; }
form { display: grid; gap: 16px; margin: 0; }
label { font: 600 var(--hf-text-xs) var(--hf-font); color: var(--hf-ink-soft); display: grid; gap: 8px; }
.signin-side .hf-input { min-height: 46px; width: 100%; box-sizing: border-box; }
.signin-side .hf-btn-primary { width: 100%; min-height: 46px; margin-top: 4px; }
.msg { min-height: 1.3em; margin: 0; font: 500 var(--hf-text-sm)/1.5 var(--hf-font); overflow-wrap: anywhere; }
.msg.error { color: var(--hf-unresolved); } .msg.ok { color: var(--hf-proven); }
.notice { margin: 0; font: 400 var(--hf-text-xs)/1.5 var(--hf-font); color: var(--hf-ink-soft); }
.links { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; padding: 6px 0; cursor: pointer; font: 500 var(--hf-text-sm) var(--hf-font); color: var(--hf-ink-soft); text-decoration: underline; text-underline-offset: 4px; }
.linkbtn:hover { color: var(--hf-accent); }
.foot { margin: 0; padding-top: 20px; border-top: 1px solid var(--hf-glass-border); font: 400 var(--hf-text-xs)/1.6 var(--hf-font); color: var(--hf-ink-soft); }
@media (min-width: 1600px) { .building-scene { min-height: 540px; } }
@media (max-width: 880px) {
  .start-layout { grid-template-columns: 1fr; }
  .signin-side { grid-row: 1; padding: 40px 0; width: min(420px, calc(100% - 40px)); }
  .scene-side { padding: 28px 24px 20px; }
  .scene-heading { font-size: 1.8rem; }
  .building-scene { min-height: 350px; }
  .start-topbar { padding: 18px 20px; }
  .start-topbar p { display: none; }
}
@media (max-width: 420px) { .scene-bottom { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }