/* LuxAI login, sample C: "Market aurora". A 3D field of candles under an aurora; the PIN form sits on top. */
@font-face {
  font-family: "Archivo";
  src: url("/static/brand/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/static/brand/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --polar: #0B1424;
  --deep: #060A12;
  --dusk: #15213A;
  --frost: #F1F5F7;
  --ice: #9EE3F7;
  --aurora: #46E0A0;
  --flare: #FF6E5F;
  --gold: #F5C04A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--deep); color: var(--frost); }
body {
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 450;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the CSS picture (shown when WebGL is missing, and under the 3D scene while it loads) ---------- */
.fallback {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260' preserveAspectRatio='xMidYMax slice'%3E%3Crect x='10.2' y='137.0' width='1.6' height='15.9' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='6.0' y='146.8' width='10' height='3.2' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='26.2' y='138.4' width='1.6' height='18.6' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='22.0' y='146.8' width='10' height='3.8' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='42.2' y='148.2' width='1.6' height='18.7' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='38.0' y='150.6' width='10' height='9.1' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='58.2' y='156.9' width='1.6' height='8.5' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='54.0' y='159.7' width='10' height='3.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='74.2' y='142.4' width='1.6' height='24.5' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='70.0' y='145.9' width='10' height='16.4' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='90.2' y='136.3' width='1.6' height='29.9' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='86.0' y='145.9' width='10' height='7.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='106.2' y='130.1' width='1.6' height='25.3' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='102.0' y='143.8' width='10' height='9.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='122.2' y='126.6' width='1.6' height='22.6' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='118.0' y='138.9' width='10' height='4.9' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='138.2' y='133.2' width='1.6' height='19.8' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='134.0' y='138.9' width='10' height='3.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='154.2' y='137.1' width='1.6' height='16.1' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='150.0' y='141.3' width='10' height='3.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='170.2' y='129.4' width='1.6' height='17.6' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='166.0' y='138.0' width='10' height='6.3' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='186.2' y='128.2' width='1.6' height='14.3' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='182.0' y='130.9' width='10' height='7.1' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='202.2' y='121.0' width='1.6' height='19.0' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='198.0' y='126.8' width='10' height='4.2' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='218.2' y='110.7' width='1.6' height='21.6' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='214.0' y='118.2' width='10' height='8.6' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='234.2' y='113.2' width='1.6' height='18.0' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='230.0' y='118.2' width='10' height='4.2' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='250.2' y='100.9' width='1.6' height='34.0' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='246.0' y='109.2' width='10' height='13.2' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='266.2' y='95.2' width='1.6' height='17.4' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='262.0' y='109.0' width='10' height='3.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='282.2' y='95.3' width='1.6' height='24.7' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='278.0' y='102.3' width='10' height='6.6' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='298.2' y='99.9' width='1.6' height='19.5' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='294.0' y='102.3' width='10' height='7.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='314.2' y='98.2' width='1.6' height='29.3' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='310.0' y='109.4' width='10' height='9.2' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='330.2' y='108.3' width='1.6' height='25.4' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='326.0' y='118.6' width='10' height='5.9' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='346.2' y='110.2' width='1.6' height='21.8' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='342.0' y='119.1' width='10' height='5.4' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='362.2' y='111.4' width='1.6' height='29.6' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='358.0' y='119.1' width='10' height='11.9' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='378.2' y='109.9' width='1.6' height='31.6' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='374.0' y='112.6' width='10' height='18.4' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='394.2' y='84.3' width='1.6' height='33.8' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='390.0' y='96.1' width='10' height='16.5' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='410.2' y='68.1' width='1.6' height='38.1' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='406.0' y='74.7' width='10' height='21.4' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='426.2' y='70.7' width='1.6' height='19.4' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='422.0' y='74.7' width='10' height='12.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='442.2' y='84.0' width='1.6' height='17.0' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='438.0' y='86.7' width='10' height='3.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='458.2' y='83.1' width='1.6' height='25.3' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='454.0' y='89.8' width='10' height='6.2' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='474.2' y='93.0' width='1.6' height='16.5' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='470.0' y='96.0' width='10' height='6.2' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='490.2' y='73.6' width='1.6' height='41.0' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='486.0' y='85.4' width='10' height='16.8' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='506.2' y='76.0' width='1.6' height='16.3' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='502.0' y='81.4' width='10' height='4.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='522.2' y='57.9' width='1.6' height='27.3' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='518.0' y='71.4' width='10' height='10.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='538.2' y='67.3' width='1.6' height='25.6' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='534.0' y='71.4' width='10' height='16.7' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='554.2' y='79.1' width='1.6' height='16.9' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='550.0' y='88.2' width='10' height='3.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='570.2' y='88.8' width='1.6' height='20.9' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='566.0' y='90.8' width='10' height='11.8' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='586.2' y='82.2' width='1.6' height='30.7' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='582.0' y='95.7' width='10' height='6.9' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='602.2' y='87.5' width='1.6' height='27.4' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='598.0' y='95.7' width='10' height='9.8' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='618.2' y='92.2' width='1.6' height='24.6' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='614.0' y='105.0' width='10' height='3.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='634.2' y='90.7' width='1.6' height='25.9' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='630.0' y='103.2' width='10' height='3.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='650.2' y='93.9' width='1.6' height='19.0' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='646.0' y='97.1' width='10' height='6.1' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='666.2' y='94.4' width='1.6' height='12.5' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='662.0' y='97.1' width='10' height='6.9' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='682.2' y='97.9' width='1.6' height='11.0' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='678.0' y='104.0' width='10' height='3.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='698.2' y='104.3' width='1.6' height='11.8' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='694.0' y='106.3' width='10' height='6.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='714.2' y='110.0' width='1.6' height='22.3' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='710.0' y='112.3' width='10' height='7.5' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='730.2' y='110.5' width='1.6' height='18.6' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='726.0' y='119.8' width='10' height='5.4' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='746.2' y='118.8' width='1.6' height='9.9' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='742.0' y='125.2' width='10' height='3.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='762.2' y='113.0' width='1.6' height='34.5' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='758.0' y='125.2' width='10' height='8.4' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='778.2' y='120.2' width='1.6' height='16.6' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='774.0' y='123.2' width='10' height='10.4' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='794.2' y='117.1' width='1.6' height='13.7' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='790.0' y='123.2' width='10' height='3.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='810.2' y='123.3' width='1.6' height='18.3' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='806.0' y='125.6' width='10' height='3.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='826.2' y='115.2' width='1.6' height='16.8' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='822.0' y='123.5' width='10' height='4.7' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='842.2' y='113.3' width='1.6' height='23.9' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='838.0' y='121.6' width='10' height='3.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='858.2' y='108.9' width='1.6' height='23.0' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='854.0' y='121.3' width='10' height='3.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='874.2' y='116.9' width='1.6' height='15.6' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='870.0' y='120.9' width='10' height='3.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='890.2' y='112.6' width='1.6' height='28.6' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='886.0' y='120.9' width='10' height='8.8' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='906.2' y='114.9' width='1.6' height='28.7' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='902.0' y='126.6' width='10' height='3.2' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='922.2' y='114.4' width='1.6' height='29.5' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='918.0' y='126.6' width='10' height='5.6' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='938.2' y='127.6' width='1.6' height='18.9' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='934.0' y='132.3' width='10' height='6.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='954.2' y='118.1' width='1.6' height='22.5' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='950.0' y='124.4' width='10' height='13.9' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='970.2' y='119.3' width='1.6' height='22.7' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='966.0' y='124.4' width='10' height='7.3' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='986.2' y='118.2' width='1.6' height='22.0' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='982.0' y='131.7' width='10' height='3.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='1002.2' y='119.3' width='1.6' height='44.3' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='998.0' y='132.8' width='10' height='24.5' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='1018.2' y='141.1' width='1.6' height='20.9' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='1014.0' y='145.8' width='10' height='11.5' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='1034.2' y='136.3' width='1.6' height='23.6' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='1030.0' y='145.8' width='10' height='3.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='1050.2' y='134.9' width='1.6' height='24.8' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='1046.0' y='147.0' width='10' height='5.0' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='1066.2' y='138.8' width='1.6' height='23.2' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='1062.0' y='141.8' width='10' height='10.2' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='1082.2' y='115.1' width='1.6' height='38.1' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='1078.0' y='128.0' width='10' height='13.8' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='1098.2' y='123.8' width='1.6' height='15.6' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='1094.0' y='128.0' width='10' height='3.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='1114.2' y='111.7' width='1.6' height='27.9' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='1110.0' y='117.7' width='10' height='10.3' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='1130.2' y='110.9' width='1.6' height='29.5' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='1126.0' y='117.7' width='10' height='9.3' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='1146.2' y='114.7' width='1.6' height='16.3' fill='%2346E0A0' opacity='.45'/%3E%3Crect x='1142.0' y='125.4' width='10' height='3.0' rx='1.5' fill='%2346E0A0' opacity='.55'/%3E%3Crect x='1162.2' y='112.5' width='1.6' height='28.2' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='1158.0' y='125.4' width='10' height='3.7' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='1178.2' y='125.3' width='1.6' height='19.3' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='1174.0' y='129.1' width='10' height='3.6' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3Crect x='1194.2' y='126.5' width='1.6' height='27.7' fill='%23FF6E5F' opacity='.45'/%3E%3Crect x='1190.0' y='132.7' width='10' height='12.9' rx='1.5' fill='%23FF6E5F' opacity='.55'/%3E%3C/svg%3E") center bottom 18% / auto 34% repeat-x,
    radial-gradient(60% 14% at 50% 58%, rgba(245, 192, 74, .16), rgba(245, 192, 74, 0) 70%),
    linear-gradient(to bottom, var(--deep) 0%, var(--polar) 38%, var(--dusk) 58%, var(--deep) 59%, var(--deep) 100%);
  transition: opacity 1.4s ease;
}
.fallback::before, .fallback::after {
  content: ""; position: absolute; left: -20%; right: -20%; pointer-events: none;
  border-radius: 50%;
}
.fallback::before { /* the aurora curtain */
  top: 22%; height: 26%;
  background:
    radial-gradient(50% 60% at 35% 60%, rgba(70, 224, 160, .30), rgba(70, 224, 160, 0) 70%),
    radial-gradient(45% 55% at 68% 45%, rgba(158, 227, 247, .22), rgba(158, 227, 247, 0) 70%);
  filter: blur(18px);
  animation: aurora-drift 14s ease-in-out infinite alternate;
}
.fallback::after { /* floor fade */
  top: 59%; bottom: -10%; border-radius: 0;
  background: linear-gradient(to bottom, rgba(21, 33, 58, .5), rgba(6, 10, 18, 0) 40%);
}
@keyframes aurora-drift {
  from { transform: translateX(-4%) scaleY(1); opacity: .8; }
  to   { transform: translateX(4%) scaleY(1.15); opacity: 1; }
}
.gl .fallback { opacity: 0; }

#scene {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.4s ease;
  touch-action: manipulation;
}
.gl #scene { opacity: 1; }

/* darken the bottom so the form reads over the candles */
.scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 10, 18, .94) 0%, rgba(6, 10, 18, .72) 24%, rgba(6, 10, 18, 0) 50%),
    linear-gradient(to bottom, rgba(6, 10, 18, .55) 0%, rgba(6, 10, 18, 0) 18%);
}

/* the success moment: everything goes to light */
.flash {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background:
    linear-gradient(to bottom, rgba(11, 20, 36, .92) 0%, rgba(11, 20, 36, .55) 16%, rgba(11, 20, 36, 0) 30%),
    radial-gradient(120% 70% at 50% 34%, rgba(241, 245, 247, .96) 0%, rgba(158, 227, 247, .9) 38%, rgba(70, 224, 160, .75) 70%, rgba(11, 20, 36, .9) 100%);
  transition: opacity .4s ease;
}
.success .flash { opacity: 1; transition: opacity .42s ease .68s; }

/* ---------- layout ---------- */
.login {
  position: relative; z-index: 3;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding:
    calc(env(safe-area-inset-top) + 30px)
    calc(env(safe-area-inset-right) + 16px)
    calc(env(safe-area-inset-bottom) + 22px)
    calc(env(safe-area-inset-left) + 16px);
}
.brand { padding: 12px; transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.brand img { display: block; width: 168px; height: auto; }
.success .brand { transform: translateY(-6px); }

.panel {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity .5s ease .2s, transform .7s cubic-bezier(.2, .8, .2, 1) .1s;
}
.success .panel { opacity: 0; transform: translateY(18px); }

.pin-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.label {
  align-self: center;
  font-family: "Archivo", system-ui, sans-serif; font-stretch: 125%; font-weight: 650;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(241, 245, 247, .72);
}

.field { position: relative; }
#pin {
  display: block; width: 100%; height: 60px;
  border-radius: 16px; border: 1px solid rgba(158, 227, 247, .22);
  background: rgba(11, 20, 36, .74);
  color: var(--frost); caret-color: var(--ice);
  font: 600 26px/1 "Hanken Grotesk", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center; letter-spacing: .42em; padding: 0 0 6px .42em;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, box-shadow .25s ease, background .25s ease;
}
#pin::placeholder {
  font-size: 15px; font-weight: 450; letter-spacing: .06em; color: rgba(241, 245, 247, .38);
}
#pin:focus { border-color: rgba(158, 227, 247, .85); box-shadow: 0 0 0 4px rgba(158, 227, 247, .14); background: rgba(11, 20, 36, .86); }
.bad-pin #pin { border-color: var(--flare); box-shadow: 0 0 0 4px rgba(255, 110, 95, .16); }

/* 12 little bars under the box: a tiny rally that grows with each digit */
.ticks {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 4px; height: 9px; pointer-events: none;
}
.ticks i {
  display: block; width: 5px; border-radius: 1.5px;
  height: 3px; background: rgba(241, 245, 247, .14);
  transition: height .35s cubic-bezier(.3, 1.6, .5, 1), background .25s ease;
}
.ticks i.on { background: var(--aurora); }
.ticks i.on:nth-child(1)  { height: 3px; }
.ticks i.on:nth-child(2)  { height: 4px; }
.ticks i.on:nth-child(3)  { height: 3.5px; }
.ticks i.on:nth-child(4)  { height: 5px; }
.ticks i.on:nth-child(5)  { height: 4.5px; }
.ticks i.on:nth-child(6)  { height: 6px; }
.ticks i.on:nth-child(7)  { height: 5.5px; }
.ticks i.on:nth-child(8)  { height: 7px; }
.ticks i.on:nth-child(9)  { height: 6.5px; }
.ticks i.on:nth-child(10) { height: 8px; }
.ticks i.on:nth-child(11) { height: 7.5px; }
.ticks i.on:nth-child(12) { height: 9px; }
.bad-pin .ticks i { background: rgba(255, 110, 95, .55); }

#go {
  position: relative; overflow: hidden;
  width: 100%; height: 54px; border: 0; border-radius: 16px;
  background: var(--ice); color: var(--deep);
  font-family: "Archivo", system-ui, sans-serif; font-stretch: 125%; font-weight: 700;
  font-size: 15px; letter-spacing: .05em;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform .12s ease, filter .2s ease;
}
#go:active { transform: scale(.985); }
#go:focus-visible { outline: 2px solid var(--frost); outline-offset: 3px; }
#go:disabled { cursor: default; }
#go::after { /* a light sweep while the PIN is checked */
  content: ""; position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 70%);
}
.checking #go::after { animation: sweep .9s ease-in-out infinite; }
@keyframes sweep { to { transform: translateX(110%); } }

.msg {
  margin: 4px 0 0; min-height: 1.4em; text-align: center;
  font-size: 15px; font-weight: 550; color: rgba(241, 245, 247, .86);
  font-variant-numeric: tabular-nums;
}
.msg.bad { color: var(--flare); }
.msg.ok { color: var(--aurora); }
.hint { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.45; color: rgba(241, 245, 247, .5); }

/* wrong PIN: the box shakes */
.shake .field { animation: shake .48s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

@media (min-width: 700px) and (min-height: 560px) {
  .brand img { width: 196px; }
  .login { padding-top: 7vh; padding-bottom: 7vh; }
  .panel { max-width: 380px; }
}
@media (max-height: 620px) {
  .login { padding-top: calc(env(safe-area-inset-top) + 14px); }
  .brand img { width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .fallback::before { animation: none; }
  .checking #go::after { animation: none; }
  .shake .field { animation: none; }
  #scene, .fallback, .flash, .panel, .brand { transition-duration: .2s; transition-delay: 0s; }
  .success .flash { transition: opacity .2s ease; }
}
/* owner 2026-11-04: logo lower, in the middle of the sky above the aurora (less empty space under it) */
.login { justify-content: flex-start; }
.brand { margin-top: clamp(8px, 16vh, 200px); }
.panel { margin-top: auto; }
@media (max-height: 700px) { .brand { margin-top: clamp(4px, 9vh, 70px); } }

/* name mode (friends: /f/<code>/join): a name reads normally, not spaced like PIN dots */
:root[data-mode="name"] #pin { letter-spacing: .02em; padding-left: 12px; text-transform: none; }

/* phone (owner 2026-11-04: "logo too high, the keyboard covers the PIN, make it fit"): logo and PIN box sit together in
   the middle of what is visible; when the keyboard opens the visible part shrinks (--vvh from C.js) and they move up
   with it, the logo gets smaller and the hint hides. */
@media (max-width: 699px) {
  .login { min-height: 0; height: var(--vvh, 100dvh); justify-content: center; gap: clamp(28px, 9vh, 96px);
    padding-top: calc(env(safe-area-inset-top) + 12px); padding-bottom: calc(env(safe-area-inset-bottom) + 44px);
    transition: height .18s ease; }
  .brand { margin-top: 0; }
  .panel { margin-top: 0; }
  .hint { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 14px); margin: 0; text-align: center; }
  :root.kb .login { gap: 14px; padding-top: 10px; padding-bottom: 12px; }
  :root.kb .brand img { width: 120px; }
  :root.kb .brand { padding: 4px; }
  :root.kb .hint { display: none; }
  :root.kb .label { display: none; }
}

/* the PIN / name box over busy candles: a darker frosted back so the text reads */
#pin { background-color: rgba(6, 10, 18, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }