:root {
  color-scheme: dark;
  --abyss: #04120c;
  --forest: #123c28;
  --mint: #b2efc7;
  --silver: #e4f4e9;
  --white: #f1fff4;
  --edge: #558668;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { min-width: 280px; background: var(--abyss); }
body {
  margin: 0;
  color: var(--silver);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
main {
  min-height: 500px;
  height: 100vh;
  height: 100svh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--abyss);
}
.atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at 50% 45%, rgb(35 100 58 / 30%), transparent 85%),
    radial-gradient(ellipse 80% 65% at 75% 90%, rgb(12 65 36 / 32%), transparent 75%);
}
.stage { position: absolute; inset: 0; opacity: 0; transition: opacity 800ms ease; }
#scene { display: block; width: 100%; height: 100%; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
.fallback {
  margin: 0;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 30vw, 310px);
  max-height: 45svh;
  line-height: 1;
  filter: drop-shadow(0 9px 0 #033e2c) drop-shadow(0 22px 28px rgb(0 0 0 / 40%));
}
.fallback img { display: block; width: 100%; height: auto; max-height: 45svh; object-fit: contain; }
/* Hide the flat fallback when the 3D logo is ready; forced colors can restore it. */
[data-renderer="webgl"] .fallback {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-renderer="webgl"] .stage { opacity: 1; }
.entrance {
  position: absolute;
  left: 0;
  right: 0;
  top: 72%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-width: 194px;
  min-height: 62px;
  padding: 9px 10px 9px 29px;
  border: 1px solid #669c77;
  border-radius: 100px;
  color: var(--white);
  background: linear-gradient(165deg, #659c76 0%, #2a6440 24%, #153e29 56%, #245435 100%);
  box-shadow:
    inset 0 1px 1px rgb(230 255 235 / 55%),
    inset 0 -2px 3px rgb(1 19 9 / 65%),
    0 1px 0 #183523,
    0 2px 0 #173723,
    0 3px 0 #143320,
    0 4px 0 #12301e,
    0 5px 0 #102b1b,
    0 6px 0 #0c2517,
    0 7px 0 #234632,
    0 20px 24px -10px rgb(0 0 0 / 75%),
    0 0 40px rgb(105 215 140 / 8%);
  transform: translateY(0);
  transform-style: preserve-3d;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 300ms var(--ease), box-shadow 300ms ease, filter 300ms ease;
}
.enter__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid rgb(158 216 174 / 42%);
  border-radius: 50%;
  background: linear-gradient(145deg, #417c54, #123520);
  box-shadow: inset 0 1px 1px rgb(220 255 230 / 25%), 0 2px 2px rgb(0 15 5 / 50%);
}
.enter svg { width: 19px; height: 19px; transition: transform 300ms var(--ease); }
.enter:focus-visible, .motion:focus-visible { outline: 2px solid var(--mint); outline-offset: 9px; }
@media (hover: hover) and (pointer: fine) {
  .enter:hover { transform: translateY(-3px); filter: brightness(1.15); }
  .enter:hover svg { transform: translateX(3px); }
  .motion:hover { color: var(--white); background: rgb(255 255 255 / 7%); }
}
.enter:active {
  transform: translateY(5px);
  box-shadow: inset 0 1px 2px rgb(220 255 235 / 30%), inset 0 -1px 2px rgb(1 19 9 / 70%), 0 2px 0 #234632, 0 9px 18px -8px rgb(0 0 0 / 75%);
  transition-duration: 80ms;
}
.motion {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(178 239 199 / 16%);
  border-radius: 50%;
  color: #9dbca8;
  background: transparent;
  cursor: pointer;
}
.motion[hidden] { display: none; }
.motion svg { width: 22px; height: 22px; }
.play-icon, [aria-pressed="true"] .pause-icon { display: none; }
[aria-pressed="true"] .play-icon { display: block; }
.login-dialog {
  width: min(410px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 28px 30px 24px;
  overflow-y: auto;
  border: 1px solid #466f50;
  border-radius: 26px;
  color: var(--silver);
  background: linear-gradient(150deg, #193d27, #0a2015 70%);
  box-shadow: inset 0 1px 0 rgb(208 250 220 / 17%), 0 7px 0 #061a0f, 0 8px 0 #284831, 0 35px 90px rgb(0 0 0 / 65%);
}
.login-dialog[open] { animation: login-appear 260ms var(--ease); }
.login-dialog::backdrop { background: rgb(0 8 3 / 65%); backdrop-filter: blur(10px); }
.login-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.login-heading h2 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.login-close {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; margin-right: -10px;
  border: 0; border-radius: 50%; color: #b3ceb9; background: transparent; cursor: pointer;
}
.login-close:hover { color: var(--white); background: rgb(200 250 215 / 8%); }
.login-close svg { width: 22px; height: 22px; }
.login-close:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.login-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.login-fields label { font-size: 13px; color: #b4cebb; }
.login-fields input {
  min-width: 0; width: 100%; height: 54px;
  margin: 0 0 13px; padding: 0 16px;
  border: 1px solid #385e44; border-radius: 12px;
  background: #071b10; color: var(--white);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%);
  font: inherit; font-size: 16px;
}
.login-fields input:focus-visible { border-color: #8dc49d; outline: 2px solid rgb(178 239 199 / 35%); outline-offset: 2px; }
.login-submit {
  width: 100%; min-height: 52px; margin-top: 13px;
  border: 1px solid #4b7958; border-radius: 14px;
  color: #d5e8db; background: linear-gradient(165deg, #3b6848, #1d422b);
  box-shadow: inset 0 1px 0 rgb(216 250 226 / 18%), 0 4px 0 #092112;
  font: inherit; font-size: 15px; cursor: pointer;
}
.login-submit:disabled { cursor: wait; opacity: .7; }
.login-submit:not(:disabled):hover { filter: brightness(1.15); }
.login-submit:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
#login-note { margin: 18px 0 0; text-align: center; color: #97b7a2; font-size: 12px; }
#login-note:empty { margin-top: 0; }
#login-note[data-error="true"] { color: #ffb6a8; }
@keyframes login-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .entrance { top: 67%; }
  .motion { right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (max-height: 500px) and (min-width: 601px) {
  main { min-height: 320px; }
  .entrance { top: 75%; }
  .enter { min-height: 50px; padding-top: 5px; padding-bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-dialog[open] { animation: none; }
  .stage, .enter, .enter svg { transition: none; }
  .enter, .enter:hover, .enter:active, .enter:hover svg { transform: none; }
}
@media (forced-colors: active) {
  .login-dialog { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  .login-fields input { color: FieldText; background: Field; }
  .stage, .atmosphere { display: none; }
  .fallback, [data-renderer="webgl"] .fallback {
    width: clamp(150px, 30vw, 310px); height: auto; clip-path: none; background: none;
    -webkit-text-fill-color: CanvasText; color: CanvasText;
  }
  .enter { color: LinkText; background: Canvas; border-color: LinkText; box-shadow: none; }
}