/* The gate and the page shell follow the visitor's appearance preference.
   The 3D stage itself is a rendered scene, not a themeable surface. */
:root{
  --demo-page:#F7F6F3;
  --demo-ink:#1C1A17;
  --demo-field:#fff;
  --demo-line: rgba(28,24,20,0.12);
  --demo-error:#B42318;
  color-scheme: light;
}
html[data-theme="dark"]{
  --demo-page:#101010;
  --demo-ink:#F5F5F3;
  --demo-field:#262626;
  --demo-line: rgba(255,255,255,0.14);
  --demo-error:#F0A193;
  color-scheme: dark;
}
html, body{
  margin:0;
  background:var(--demo-page);
  color:var(--demo-ink);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
body.demo-page{
  overflow-x:hidden;
  background:var(--demo-page);
}
.demo-root{
  min-height:100%;
}
.demo-gate{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:var(--demo-page);
}
.demo-gate-card{
  width:min(280px, 86vw);
  text-align:center;
}
.demo-gate-card img{
  display:block;
  width:108px;
  height:auto;
  margin:0 auto 28px;
}
.demo-gate-card input{
  width:100%;
  height:48px;
  border:1px solid var(--demo-line);
  border-radius:12px;
  background:var(--demo-field);
  color:var(--demo-ink);
  font: 500 18px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: 0.28em;
  text-align:center;
  outline:none;
}
.demo-gate-card input:focus{
  border-color: #E3A63C;
}
.demo-gate-card p{
  min-height: 18px;
  margin: 10px 0 0;
  font-size: 12px;
  color:var(--demo-error);
}
.demo-stage{
  position:fixed;
  inset:0;
  z-index:1;
}
.demo-stage canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}
.demo-scroll{
  position:relative;
  z-index:0;
  height: 720vh;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .demo-scroll{ height: 100vh; }
}
body.demo-capture{
  overflow:hidden;
  height:100vh;
}
body.demo-capture .demo-scroll{
  height:100vh;
}