:root { color-scheme: dark; background: #000; color: #f5f5f5; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #000; }
.navigation { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 35px 4.8vw; }
a { color: inherit; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 32px; white-space: nowrap; font-size: 16px; letter-spacing: .32em; }
.brand-symbol { position: relative; display: block; width: 36px; height: 36px; border: 2px solid #eee; border-radius: 50%; }
.brand-symbol::after { content: ''; position: absolute; width: 2px; height: 47px; background: #eee; left: 16px; top: -7px; transform: rotate(40deg); }
nav { display: flex; gap: clamp(20px, 2.5vw, 42px); }
nav a { font-size: 11px; text-transform: uppercase; letter-spacing: .2em; }
.outline { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #b3b3b3; border-radius: 99px; background: transparent; color: #f5f5f5; font: inherit; opacity: 1; }
.outline:disabled { cursor: default; }
.team { padding: 11px 21px; font-size: 14px; }
.content { position: absolute; z-index: 2; left: 4.8vw; top: 37%; width: 42%; }
h1 { font-size: clamp(64px, 7.6vw, 136px); font-weight: 400; line-height: .99; letter-spacing: .035em; margin: 0; }
h1 span { display: block; transform: scaleX(1.1); transform-origin: left; }
.content p { margin: 30px 0 52px; font-size: clamp(17px, 1.6vw, 28px); letter-spacing: .25em; white-space: nowrap; }
.connect { min-width: 245px; padding: 17px 32px; font-size: 14px; letter-spacing: .2em; }
.scene { position: absolute; right: 0; top: 10%; width: 55%; height: 87%; overflow: hidden; z-index: 1; }
.scene canvas { display: block; width: 100%; height: 100%; }
.render-error { position: absolute; right: 5%; bottom: 5%; max-width: 40%; color: #aaa; font-size: 13px; }
a:focus-visible { outline: 1px solid white; outline-offset: 8px; }
@media (max-width: 900px) and (min-width: 701px) { .brand { gap: 15px; font-size: 12px; } nav { gap: 16px; } .team { font-size: 12px; } }
@media (max-width: 700px) {
  .hero { min-height: 844px; min-height: max(780px, 100svh); }
  .navigation { padding: 25px 6vw; flex-wrap: wrap; gap: 26px 12px; }
  .brand { font-size: 11px; gap: 15px; letter-spacing: .25em; }
  .brand-symbol { width: 26px; height: 26px; }
  .brand-symbol::after { left: 11px; height: 36px; top: -6px; }
  .team { font-size: 10px; padding: 10px 12px; gap: 8px; }
  nav { width: 100%; justify-content: space-between; gap: 12px; }
  nav a { font-size: 9px; }
  .content { left: 6vw; top: 155px; width: 88%; }
  h1 { font-size: clamp(56px, 16vw, 100px); line-height: 1; }
  .content p { font-size: 14px; letter-spacing: .18em; margin: 20px 0 26px; }
  .connect { min-width: 210px; font-size: 11px; padding: 13px 25px; }
  .scene { top: 420px; width: 100%; height: calc(100% - 430px); min-height: 340px; }
  .render-error { max-width: 88%; bottom: 20px; }
}