@font-face{font-family:"Oxanium";src:url("fonts/Oxanium-Variable.ttf?v=20260903") format("truetype");font-style:normal;font-weight:200 800;font-display:swap}
:root{color-scheme:dark;font-family:"Oxanium",sans-serif;background:#070b14;color:#e8f4ff}*{box-sizing:border-box}html{min-height:100%;background:#070b14}body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:radial-gradient(circle at 20% 10%,#123750 0,transparent 38%),radial-gradient(circle at 90% 90%,#211a38 0,transparent 42%),#070b14}main{width:min(100%,430px);margin:auto}section{padding:38px;border:1px solid #324967;border-radius:18px;background:rgba(15,21,37,.96);box-shadow:0 24px 70px #0009}.eyebrow{font-size:11px;letter-spacing:.18em;color:#72e7ff}h1{margin:8px 0;font-size:34px}.intro{margin:0 0 28px;color:#9fb3c6}label{display:block;margin:16px 0 7px;font-size:11px;letter-spacing:.12em;color:#a9bdd0}input{display:block;width:100%;margin-top:7px;padding:13px 14px;border:1px solid #3d6390;border-radius:8px;background:#0b1120;color:#f5fbff;font:inherit;outline:none}input:focus{border-color:#72e7ff;box-shadow:0 0 12px #36d6ff44}button{width:100%;margin-top:22px;padding:13px;border:1px solid #72e7ff;border-radius:8px;background:#123750;color:#f5fbff;font:600 15px "Oxanium",sans-serif;cursor:pointer;box-shadow:0 0 14px #36d6ff44}button:disabled{opacity:.6}#error{min-height:20px;margin:14px 0 0;color:#ff8ba5;font-size:13px;text-align:center}@supports(height:100dvh){body{min-height:100dvh}}

@property --login-blue-x{syntax:"<percentage>";inherits:false;initial-value:-8%}
@property --login-blue-y{syntax:"<percentage>";inherits:false;initial-value:-8%}
@property --login-purple-x{syntax:"<percentage>";inherits:false;initial-value:108%}
@property --login-purple-y{syntax:"<percentage>";inherits:false;initial-value:108%}
body{
  --login-blue-x:-8%;--login-blue-y:-8%;--login-purple-x:108%;--login-purple-y:108%;
  background-color:#070b14;
  background-image:radial-gradient(ellipse 68% 64% at var(--login-blue-x) var(--login-blue-y),#1b2944 0,rgba(27,41,68,.78) 30%,transparent 76%),radial-gradient(ellipse 68% 64% at var(--login-purple-x) var(--login-purple-y),#241d48 0,rgba(36,29,72,.78) 30%,transparent 76%);
  background-size:100% 100%;
  background-attachment:fixed;
  animation:login-vignette-drift 16s ease-in-out infinite alternate;
}
@keyframes login-vignette-drift{
  0%{--login-blue-x:-8%;--login-blue-y:-8%;--login-purple-x:108%;--login-purple-y:108%}
  20%{--login-blue-x:-15%;--login-blue-y:55%;--login-purple-x:115%;--login-purple-y:30%}
  40%{--login-blue-x:12%;--login-blue-y:110%;--login-purple-x:90%;--login-purple-y:-10%}
  60%{--login-blue-x:105%;--login-blue-y:82%;--login-purple-x:-5%;--login-purple-y:5%}
  80%{--login-blue-x:85%;--login-blue-y:-8%;--login-purple-x:-15%;--login-purple-y:75%}
  100%{--login-blue-x:-8%;--login-blue-y:-8%;--login-purple-x:108%;--login-purple-y:108%}
}
button{
  --tap-x:50%;--tap-y:50%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transform:translateY(0) scale(1);
  transition:transform .075s ease-out,filter .11s ease-out,box-shadow .14s ease-out;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
button::before{
  content:"";
  position:absolute;
  z-index:0;
  left:var(--tap-x);
  top:var(--tap-y);
  width:34px;
  height:24px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(ellipse,rgba(238,254,255,.78) 0,rgba(117,231,250,.34) 30%,rgba(54,176,214,.13) 58%,transparent 80%);
  filter:blur(7px);
  transform:translate(-50%,-50%) rotate(-3deg) scale(.18,.14);
}
button::after{
  content:none;
}
button.is-pressed:not(:disabled),button:active:not(:disabled){
  transform:translateY(1px) scale(.994);
  filter:brightness(.96);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.36),inset 0 0 17px rgba(54,214,255,.2),0 0 7px rgba(54,214,255,.2);
}
button.tap-highlight::before{animation:tap-highlight-bloom .52s cubic-bezier(.16,.7,.2,1)}
@keyframes tap-highlight-bloom{
  0%{opacity:.72;transform:translate(-50%,-50%) rotate(-3deg) scale(.18,.14)}
  32%{opacity:.48;transform:translate(-50%,-50%) rotate(2deg) scale(2.2,1.65)}
  68%{opacity:.22;transform:translate(-50%,-50%) rotate(-1deg) scale(4.25,3.1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(3deg) scale(6.4,4.8)}
}
.tap-ripple{
  position:absolute;
  z-index:0;
  left:var(--tap-x);
  top:var(--tap-y);
  width:22px;
  height:22px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,transparent 32%,rgba(173,244,255,.2) 48%,rgba(75,207,235,.12) 59%,transparent 74%);
  filter:blur(3.5px);
  transform:translate(-50%,-50%) scale(.3);
  animation:diffused-water-ripple .56s cubic-bezier(.14,.68,.2,1) forwards;
  animation-delay:var(--ripple-delay,0ms);
}
@keyframes diffused-water-ripple{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  18%{opacity:.72}
  62%{opacity:.28}
  100%{opacity:0;transform:translate(-50%,-50%) scale(6.6)}
}
@media(max-width:700px){
  body{
    background-image:radial-gradient(ellipse 76% 60% at var(--login-blue-x) var(--login-blue-y),#31558e 0,rgba(34,72,132,.72) 30%,transparent 76%),radial-gradient(ellipse 76% 60% at var(--login-purple-x) var(--login-purple-y),#4a2f82 0,rgba(63,39,114,.72) 30%,transparent 76%);
    animation-duration:11s;
    animation-direction:normal;
  }
}
@media(prefers-reduced-motion:reduce){body{animation:none}button{transition:none}button.tap-highlight::before,.tap-ripple{animation-duration:.01ms}}

/* Password visibility stays opt-in; the toggle lives inside the field. */
.password-field{position:relative;display:block;margin-top:7px}
.password-field input{margin-top:0;padding-right:48px}
.password-field #password-toggle{position:absolute;z-index:2;top:50%;right:6px;display:grid;place-items:center;width:36px;height:36px;min-height:36px;margin:0;padding:7px;transform:translateY(-50%);border:0;border-radius:7px;background:transparent;color:#8fa7bd;box-shadow:none;-webkit-tap-highlight-color:transparent}
.password-field #password-toggle:hover,.password-field #password-toggle:focus-visible{color:#72e7ff;background:transparent;outline:none;box-shadow:none}
.password-field #password-toggle:active{transform:translateY(calc(-50% + 1px)) scale(.96)}
.password-field #password-toggle svg{position:absolute;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .14s ease,transform .14s ease}
.password-field #password-toggle .eye-open{opacity:0;transform:scale(.82)}
.password-field #password-toggle .eye-closed{opacity:1;transform:scale(1)}
.password-field #password-toggle[aria-pressed="false"],
.password-field #password-toggle[aria-pressed="false"]:hover,
.password-field #password-toggle[aria-pressed="false"]:focus-visible,
.password-field #password-toggle[aria-pressed="false"]:active{color:#8fa7bd!important}
.password-field #password-toggle[aria-pressed="true"]{color:#72e7ff!important}
.password-field #password-toggle[aria-pressed="true"] .eye-open{opacity:1;transform:scale(1)}
.password-field #password-toggle[aria-pressed="true"] .eye-closed{opacity:0;transform:scale(.82)}
.password-field #password-toggle::before,.password-field #password-toggle::after{content:none}

/* Layered interior drift gives the backdrop a soft lava-lamp character rather
   than sending two distinct spots around the viewport perimeter. */
body{
  isolation:isolate;
  overflow:hidden;
  background:#070b14;
  animation:none;
}
body>main{position:relative;z-index:1}
body::before,body::after{
  content:"";
  position:fixed;
  z-index:0;
  inset:-22%;
  pointer-events:none;
  background-repeat:no-repeat;
  will-change:transform,background-position,border-radius;
}
body::before{
  opacity:.68;
  background-image:
    radial-gradient(ellipse at center,rgba(48,110,190,.82) 0,rgba(36,82,158,.52) 34%,transparent 72%),
    radial-gradient(ellipse at center,rgba(67,48,142,.78) 0,rgba(55,37,119,.48) 36%,transparent 74%),
    radial-gradient(ellipse at center,rgba(33,151,187,.48) 0,rgba(27,91,145,.27) 38%,transparent 73%),
    radial-gradient(ellipse at center,rgba(108,55,156,.46) 0,rgba(75,36,126,.24) 40%,transparent 75%);
  background-size:58% 66%,62% 58%,48% 54%,52% 64%;
  filter:blur(60px) saturate(92%);
  animation:lava-field-a 26s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
body::after{
  opacity:.46;
  background-image:
    radial-gradient(ellipse at center,rgba(66,209,235,.5) 0,rgba(40,124,187,.28) 38%,transparent 74%),
    radial-gradient(ellipse at center,rgba(132,86,210,.58) 0,rgba(83,48,153,.3) 38%,transparent 75%),
    radial-gradient(ellipse at center,rgba(32,75,145,.55) 0,rgba(25,53,111,.3) 42%,transparent 76%);
  background-size:46% 58%,55% 64%,66% 54%;
  filter:blur(72px) saturate(90%);
  animation:lava-field-b 36s cubic-bezier(.45,.05,.55,.95) infinite alternate-reverse;
}
@keyframes lava-field-a{
  0%{background-position:-8% 4%,72% -10%,12% 88%,102% 76%;transform:rotate(-2deg) scale(1.02);border-radius:42% 58% 54% 46%}
  28%{background-position:18% 28%,52% 16%,62% 74%,78% 38%;transform:rotate(1deg) scale(1.05,1.02);border-radius:56% 44% 38% 62%}
  56%{background-position:58% 12%,10% 58%,74% 36%,26% 82%;transform:rotate(3deg) scale(1.01,1.06);border-radius:38% 62% 57% 43%}
  78%{background-position:42% 68%,70% 52%,18% 20%,54% 8%;transform:rotate(-1deg) scale(1.06,1.03);border-radius:61% 39% 45% 55%}
  100%{background-position:84% 38%,24% 6%,48% 92%,-4% 48%;transform:rotate(-3deg) scale(1.03,1.05);border-radius:47% 53% 63% 37%}
}
@keyframes lava-field-b{
  0%{background-position:8% 70%,82% 18%,44% 46%;transform:rotate(2deg) scale(1.05,1);border-radius:54% 46% 40% 60%}
  34%{background-position:58% 82%,18% 26%,76% 52%;transform:rotate(-2deg) scale(1,1.06);border-radius:39% 61% 58% 42%}
  67%{background-position:76% 24%,50% 62%,4% 34%;transform:rotate(1deg) scale(1.06,1.03);border-radius:63% 37% 46% 54%}
  100%{background-position:20% 8%,86% 74%,48% 90%;transform:rotate(3deg) scale(1.02,1.06);border-radius:45% 55% 62% 38%}
}
@media(max-width:700px){
  body::before{inset:-28%;filter:blur(46px) saturate(95%);animation-duration:20s;background-size:72% 68%,74% 64%,60% 58%,66% 70%}
  body::after{inset:-30%;filter:blur(56px) saturate(92%);animation-duration:27s;background-size:62% 62%,70% 72%,78% 60%}
}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none}}

/* Independent morphing shapes produce a quicker, less geometric lava flow. */
body::before,body::after{content:none}
.lava-field{position:fixed;z-index:0;inset:-8%;overflow:hidden;pointer-events:none;filter:saturate(92%)}
.lava-blob{position:absolute;display:block;opacity:.48;filter:blur(54px);will-change:transform,border-radius}
.lava-blob:nth-child(1){left:-12%;top:-10%;width:48vmax;height:32vmax;background:rgba(42,99,180,.7);animation:organic-flow-a 13s ease-in-out infinite alternate}
.lava-blob:nth-child(2){left:62%;top:-16%;width:36vmax;height:49vmax;background:rgba(87,55,160,.62);animation:organic-flow-b 17s ease-in-out infinite alternate-reverse}
.lava-blob:nth-child(3){left:4%;top:64%;width:43vmax;height:29vmax;background:rgba(37,142,177,.45);animation:organic-flow-c 14s ease-in-out infinite alternate}
.lava-blob:nth-child(4){left:62%;top:58%;width:45vmax;height:34vmax;background:rgba(112,61,158,.48);animation:organic-flow-a 16s ease-in-out -5s infinite alternate-reverse}
.lava-blob:nth-child(5){left:28%;top:18%;width:27vmax;height:43vmax;background:rgba(31,72,145,.5);animation:organic-flow-b 11s ease-in-out -3s infinite alternate}
.lava-blob:nth-child(6){left:48%;top:34%;width:38vmax;height:25vmax;background:rgba(47,164,194,.36);animation:organic-flow-c 15s ease-in-out -7s infinite alternate-reverse}
@keyframes organic-flow-a{
  0%{transform:translate(-8vw,-5vh) rotate(-9deg) scale(1,.78);border-radius:38% 62% 47% 53%/56% 37% 63% 44%}
  35%{transform:translate(28vw,16vh) rotate(7deg) scale(.82,1.12);border-radius:61% 39% 64% 36%/41% 58% 42% 59%}
  68%{transform:translate(9vw,48vh) rotate(-3deg) scale(1.15,.86);border-radius:46% 54% 34% 66%/67% 43% 57% 33%}
  100%{transform:translate(52vw,28vh) rotate(11deg) scale(.9,1.08);border-radius:67% 33% 55% 45%/35% 64% 36% 65%}
}
@keyframes organic-flow-b{
  0%{transform:translate(8vw,-6vh) rotate(8deg) scale(.8,1.1);border-radius:65% 35% 42% 58%/38% 62% 47% 53%}
  32%{transform:translate(-34vw,22vh) rotate(-6deg) scale(1.12,.83);border-radius:43% 57% 68% 32%/63% 39% 61% 37%}
  70%{transform:translate(-12vw,49vh) rotate(4deg) scale(.88,1.16);border-radius:34% 66% 51% 49%/45% 67% 33% 55%}
  100%{transform:translate(-55vw,31vh) rotate(-10deg) scale(1.1,.78);border-radius:58% 42% 36% 64%/69% 34% 66% 31%}
}
@keyframes organic-flow-c{
  0%{transform:translate(-5vw,9vh) rotate(-5deg) scale(1.14,.82);border-radius:47% 53% 65% 35%/62% 44% 56% 38%}
  38%{transform:translate(38vw,-28vh) rotate(9deg) scale(.84,1.17);border-radius:69% 31% 45% 55%/36% 66% 34% 64%}
  72%{transform:translate(57vw,5vh) rotate(-7deg) scale(1.08,.88);border-radius:39% 61% 32% 68%/58% 37% 63% 42%}
  100%{transform:translate(18vw,-53vh) rotate(6deg) scale(.91,1.13);border-radius:63% 37% 57% 43%/33% 59% 41% 67%}
}
@media(max-width:700px){
  .lava-field{inset:-12%}
  .lava-blob{filter:blur(42px);opacity:.46}
  .lava-blob:nth-child(1){animation-duration:10s}.lava-blob:nth-child(2){animation-duration:13s}.lava-blob:nth-child(3){animation-duration:11s}.lava-blob:nth-child(4){animation-duration:12s}.lava-blob:nth-child(5){animation-duration:9s}.lava-blob:nth-child(6){animation-duration:11.5s}
}
@media(prefers-reduced-motion:reduce){.lava-blob{animation:none}}

/* Metaballs share a softened alpha field, so nearby forms genuinely fuse and
   separate instead of merely passing circular gradients over one another. */
.lava-filter{position:absolute;width:0;height:0;overflow:hidden}
.lava-field{inset:-8%;filter:url("#lava-goo") saturate(84%);opacity:.88}
.lava-field .lava-blob{
  left:50%;top:50%;
  width:var(--blob-width,32vmax);height:var(--blob-height,32vmax);
  opacity:var(--blob-opacity,.48);filter:none;
  background:var(--blob-color,rgba(46,103,181,.58));
  animation-name:metaball-flow!important;
  animation-duration:var(--blob-speed,26s)!important;
  animation-delay:var(--blob-delay,0s)!important;
  animation-timing-function:cubic-bezier(.45,.08,.55,.92)!important;
  animation-iteration-count:infinite!important;
  animation-direction:alternate!important;
}
.lava-field .lava-blob:nth-child(1){--blob-width:42vmax;--blob-height:25vmax;--blob-color:rgba(43,99,178,.52);--blob-speed:27s;--x0:-40vw;--y0:-30vh;--x1:-8vw;--y1:-4vh;--x2:5vw;--y2:8vh;--x3:28vw;--y3:35vh}
.lava-field .lava-blob:nth-child(2){--blob-width:27vmax;--blob-height:39vmax;--blob-color:rgba(86,55,153,.46);--blob-speed:27s;--x0:38vw;--y0:-26vh;--x1:7vw;--y1:3vh;--x2:-4vw;--y2:10vh;--x3:-31vw;--y3:37vh}
.lava-field .lava-blob:nth-child(3){--blob-width:38vmax;--blob-height:21vmax;--blob-color:rgba(38,137,171,.37);--blob-speed:31s;--blob-delay:-12s;--x0:-28vw;--y0:44vh;--x1:-13vw;--y1:9vh;--x2:-3vw;--y2:-8vh;--x3:24vw;--y3:-43vh}
.lava-field .lava-blob:nth-child(4){--blob-width:24vmax;--blob-height:41vmax;--blob-color:rgba(105,59,153,.39);--blob-speed:31s;--blob-delay:-12s;--x0:31vw;--y0:-44vh;--x1:14vw;--y1:-11vh;--x2:3vw;--y2:7vh;--x3:-23vw;--y3:44vh}
.lava-field .lava-blob:nth-child(5){--blob-width:24vmax;--blob-height:34vmax;--blob-color:rgba(30,71,139,.42);--blob-speed:24s;--blob-delay:-6s;--x0:-37vw;--y0:18vh;--x1:-7vw;--y1:2vh;--x2:6vw;--y2:-5vh;--x3:34vw;--y3:-25vh}
.lava-field .lava-blob:nth-child(6){--blob-width:33vmax;--blob-height:18vmax;--blob-color:rgba(46,154,183,.31);--blob-speed:24s;--blob-delay:-6s;--x0:38vw;--y0:22vh;--x1:8vw;--y1:4vh;--x2:-5vw;--y2:-4vh;--x3:-36vw;--y3:-27vh}
.lava-field .lava-blob:nth-child(7){--blob-width:18vmax;--blob-height:29vmax;--blob-color:rgba(75,53,142,.35);--blob-speed:29s;--blob-delay:-18s;--x0:-17vw;--y0:-46vh;--x1:-4vw;--y1:-8vh;--x2:2vw;--y2:8vh;--x3:19vw;--y3:45vh}
.lava-field .lava-blob:nth-child(8){--blob-width:29vmax;--blob-height:16vmax;--blob-color:rgba(37,112,170,.31);--blob-speed:29s;--blob-delay:-18s;--x0:18vw;--y0:45vh;--x1:5vw;--y1:9vh;--x2:-2vw;--y2:-7vh;--x3:-20vw;--y3:-45vh}
@keyframes metaball-flow{
  0%{transform:translate(calc(-50% + var(--x0)),calc(-50% + var(--y0))) rotate(-13deg) scale(1.62,.48);border-radius:29% 71% 38% 62%/68% 27% 73% 32%}
  18%{transform:translate(calc(-50% + var(--x1)),calc(-50% + var(--y1))) rotate(-4deg) scale(.72,1.46);border-radius:71% 29% 64% 36%/31% 72% 28% 69%}
  38%{transform:translate(calc(-50% + var(--x1)),calc(-50% + var(--y1))) rotate(7deg) scale(1.48,.53);border-radius:35% 65% 23% 77%/74% 38% 62% 26%}
  59%{transform:translate(calc(-50% + var(--x2)),calc(-50% + var(--y2))) rotate(-8deg) scale(.55,1.68);border-radius:76% 24% 69% 31%/26% 66% 34% 74%}
  80%{transform:translate(calc(-50% + var(--x2)),calc(-50% + var(--y2))) rotate(5deg) scale(1.55,.5);border-radius:25% 75% 42% 58%/72% 22% 78% 28%}
  100%{transform:translate(calc(-50% + var(--x3)),calc(-50% + var(--y3))) rotate(14deg) scale(.62,1.56);border-radius:68% 32% 78% 22%/24% 71% 29% 76%}
}
@media(max-width:700px){
  .lava-field{inset:-12%;filter:url("#lava-goo") saturate(84%);opacity:.9}
  .lava-field .lava-blob:nth-child(1),.lava-field .lava-blob:nth-child(2){animation-duration:25s!important}
  .lava-field .lava-blob:nth-child(3),.lava-field .lava-blob:nth-child(4){animation-duration:29s!important}
  .lava-field .lava-blob:nth-child(5),.lava-field .lava-blob:nth-child(6){animation-duration:23s!important}
  .lava-field .lava-blob:nth-child(7),.lava-field .lava-blob:nth-child(8){animation-duration:27s!important}
}
@media(prefers-reduced-motion:reduce){.lava-field .lava-blob{animation:none!important}}

/* JavaScript supplies a fresh wandering route after every slow lava cycle.
   Keeping the forms fuller makes them feel molten without becoming geometric. */
.lava-field{
  inset:-16%;
  filter:url("#lava-goo") blur(18px) saturate(110%);
  opacity:.96;
}
.lava-field.lava-js .lava-blob{animation:none!important}
.lava-field .lava-blob{
  width:var(--blob-width,38vmax);
  height:var(--blob-height,35vmax);
  border-radius:50%;
  background:radial-gradient(ellipse at center,var(--blob-color) 0 26%,transparent 78%);
  filter:blur(18px);
  opacity:var(--blob-opacity,.64);
}
.lava-field .lava-blob:nth-child(1){--blob-width:47vw;--blob-height:39vh;--blob-color:rgba(45,125,238,.76)}
.lava-field .lava-blob:nth-child(2){--blob-width:39vw;--blob-height:47vh;--blob-color:rgba(124,69,222,.72)}
.lava-field .lava-blob:nth-child(3){--blob-width:43vw;--blob-height:36vh;--blob-color:rgba(35,176,220,.68)}
.lava-field .lava-blob:nth-child(4){--blob-width:36vw;--blob-height:44vh;--blob-color:rgba(154,72,215,.68)}
.lava-field .lava-blob:nth-child(5){--blob-width:35vw;--blob-height:41vh;--blob-color:rgba(42,101,220,.72)}
.lava-field .lava-blob:nth-child(6){--blob-width:42vw;--blob-height:34vh;--blob-color:rgba(35,189,220,.62)}
.lava-field .lava-blob:nth-child(7){--blob-width:32vw;--blob-height:38vh;--blob-color:rgba(103,68,210,.7)}
.lava-field .lava-blob:nth-child(8){--blob-width:39vw;--blob-height:31vh;--blob-color:rgba(36,145,225,.68)}
.lava-field .lava-blob:nth-child(9){--blob-width:27vw;--blob-height:25vh;--blob-color:rgba(36,186,230,.72)}
.lava-field .lava-blob:nth-child(10){--blob-width:24vw;--blob-height:30vh;--blob-color:rgba(116,67,230,.72)}
.lava-field .lava-blob:nth-child(11){--blob-width:30vw;--blob-height:23vh;--blob-color:rgba(49,119,241,.74)}
.lava-field .lava-blob:nth-child(12){--blob-width:23vw;--blob-height:29vh;--blob-color:rgba(164,72,220,.68)}
body{overflow-x:hidden;overflow-y:auto}
@media(max-width:700px){
  .lava-field{inset:-16%;filter:blur(28px) saturate(110%);opacity:.96}
  .lava-field .lava-blob{filter:blur(24px)}
  main{width:min(100%,430px)}
}
.lava-field::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:min(90vw,90vh);height:min(90vw,90vh);
  transform:translate(-50%,-50%);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  background:radial-gradient(circle at center,rgba(78,116,222,.72) 0 28%,rgba(39,174,225,.54) 62%,rgba(126,68,211,.32) 82%,transparent 100%);
  opacity:.68;
  animation:lava-star-release 11s cubic-bezier(.45,.08,.55,.92) forwards;
}
@keyframes lava-star-release{
  0%,42%{opacity:.68;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:.16;transform:translate(-50%,-50%) scale(1.13)}
}
@media(prefers-reduced-motion:reduce){.lava-field::before{animation:none}}
@media(max-width:700px){input{font-size:16px}}

/* Mobile login performance: keep the same soft lava composition while moving
   continuous animation off large blur repaints. This isolates input painting,
   so updating text no longer competes with twelve filtered viewport layers. */
@media (pointer:coarse) and (max-width:999px){
  .lava-field{inset:-12%!important;filter:none!important;contain:strict!important;transform:translateZ(0)!important;backface-visibility:hidden!important}
  .lava-field .lava-blob{
    filter:blur(16px) saturate(112%)!important;
    background:radial-gradient(ellipse at center,var(--blob-color) 0 10%,color-mix(in srgb,var(--blob-color) 68%,transparent) 30%,color-mix(in srgb,var(--blob-color) 24%,transparent) 62%,transparent 100%)!important;
    will-change:transform,opacity!important;
    transform-style:preserve-3d!important;
    backface-visibility:hidden!important;
  }
  .lava-field .lava-blob:nth-child(3n+1){border-radius:54% 46% 52% 48% / 47% 55% 45% 53%!important}
  .lava-field .lava-blob:nth-child(3n+2){border-radius:47% 53% 45% 55% / 54% 46% 52% 48%!important}
  .lava-field .lava-blob:nth-child(3n){border-radius:51% 49% 56% 44% / 45% 52% 48% 55%!important}
  .lava-field::before{
    width:min(104vw,104vh)!important;
    height:min(104vw,104vh)!important;
    clip-path:none!important;
    border-radius:50%!important;
    filter:blur(38px) saturate(106%)!important;
    background:
      radial-gradient(ellipse 18% 72% at 50% 50%,rgba(64,145,244,.68) 0 16%,rgba(64,145,244,.28) 48%,transparent 92%),
      radial-gradient(ellipse 72% 18% at 50% 50%,rgba(133,82,231,.66) 0 16%,rgba(133,82,231,.27) 48%,transparent 92%),
      radial-gradient(circle at 50% 50%,rgba(55,177,232,.48) 0 14%,rgba(72,113,222,.2) 42%,transparent 76%)!important;
    animation:monitor-mobile-star-release 12s cubic-bezier(.45,.08,.55,.92) forwards!important;
    will-change:transform,opacity!important;
  }
  main{isolation:isolate;contain:layout paint;transform:translateZ(0);backface-visibility:hidden}
  section{isolation:isolate;transform:translateZ(0);backface-visibility:hidden}
  input{contain:strict;transform:translateZ(0);backface-visibility:hidden;will-change:auto}
}

@keyframes monitor-mobile-star-release{
  0%,28%{opacity:.72;transform:translate3d(-50%,-50%,0) scale(.94)}
  52%{opacity:.6;transform:translate3d(-50%,-50%,0) scale(1.03)}
  76%{opacity:.3;transform:translate3d(-50%,-50%,0) scale(1.13)}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(1.22)}
}

/* Keep the mobile opening composition deterministic: the star owns the first
   paint, then the already-moving blobs fade through it into the lava field. */
@media (pointer:coarse) and (max-width:999px){
  body .lava-field{isolation:isolate!important}
  body .lava-field::before{content:""!important;display:block!important;z-index:2!important}
  body .lava-field .lava-blob{z-index:1!important}
  h1{font-size:clamp(15px,5.2vw,21px)!important;letter-spacing:-.015em;white-space:nowrap}
}

.brand-neon{color:#78efff;text-shadow:0 0 5px rgba(48,226,255,.66),0 0 11px rgba(117,78,255,.36)}
h1{font-size:25px;letter-spacing:-.015em;white-space:nowrap}
.lava-field::before{content:none!important}
.lava-field.lava-awaiting .lava-blob{opacity:0!important}
.lava-star{
  display:block;
  position:fixed;
  z-index:1;
  left:50%;
  top:50%;
  width:min(82vw,82vh);
  height:min(82vw,82vh);
  pointer-events:none;
  transform:translate3d(-50%,-50%,0) scale(.94);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(63,185,250,.96) 0 22%,rgba(65,126,235,.64) 52%,rgba(65,126,235,.16) 78%,transparent 94%) center/28% 96% no-repeat,
    radial-gradient(ellipse at center,rgba(145,82,239,.9) 0 22%,rgba(107,80,224,.6) 52%,rgba(107,80,224,.15) 78%,transparent 94%) center/96% 28% no-repeat,
    radial-gradient(circle at center,rgba(55,190,240,.72) 0 24%,rgba(81,103,224,.42) 54%,rgba(81,103,224,.12) 76%,transparent 90%) center/54% 54% no-repeat;
  filter:blur(36px) saturate(112%);
  opacity:.9;
  will-change:transform,opacity,background-size;
  animation:login-star-seamless 8.2s cubic-bezier(.45,.08,.55,.92) forwards;
}
body>main{position:relative;z-index:2}
@keyframes login-star-seamless{
  0%,18%{opacity:.86;transform:translate3d(-50%,-50%,0) rotate(0) scale(.94);filter:blur(38px) saturate(112%);background-size:28% 96%,96% 28%,54% 54%;border-radius:50%}
  42%{opacity:.8;transform:translate3d(-50%,-50%,0) rotate(-1deg) scale(1.01,.97);filter:blur(39px) saturate(112%);background-size:52% 94%,94% 54%,72% 76%;border-radius:52% 48% 51% 49% / 49% 53% 47% 51%}
  63%{opacity:.68;transform:translate3d(-50%,-50%,0) rotate(4deg) scale(1.12,.86);filter:blur(42px) saturate(111%);background-size:88% 100%,100% 80%,93% 90%;border-radius:58% 42% 53% 47% / 46% 59% 41% 54%}
  82%{opacity:.34;transform:translate3d(-50%,-50%,0) rotate(-3deg) scale(1.36,.67);filter:blur(49px) saturate(108%);background-size:80% 98%,98% 70%,87% 82%;border-radius:54% 46% 61% 39% / 43% 57% 47% 53%}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) rotate(3deg) scale(1.58,.5);filter:blur(58px) saturate(104%);background-size:68% 92%,92% 62%,78% 72%;border-radius:61% 39% 48% 52% / 56% 44% 59% 41%}
}

/* Width alone identifies the mobile composition, avoiding browsers that report
   an unexpected pointer capability and previously skipped the opening star. */
@media (max-width:999px){
  body>.lava-star{
    width:min(108vw,108vh)!important;
    height:min(108vw,108vh)!important;
  }
  h1{font-size:clamp(15px,5.2vw,21px)!important;letter-spacing:-.015em;white-space:nowrap}
}

/* WebGL-only login aurora. The previous CSS curtain design was removed. */
body.aurora-theme{background:#020713!important}
body.aurora-theme .lava-filter,
body.aurora-theme .lava-field,
body.aurora-theme>.lava-star{display:none!important}
body.aurora-theme>.aurora-field{position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none;contain:strict;isolation:isolate;background:#020713}
body.aurora-theme .aurora-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* Match the monitor's cyan-slate surfaces without lifting the dark contrast. */
body.aurora-theme main>section{
  background:rgba(7,24,33,.96)!important;
  border-color:#2b5b72!important;
  box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 22px rgba(54,214,255,.08)!important;
}
body.aurora-theme input{
  background:#061720!important;
  border-color:#2a5368!important;
}
body.aurora-theme #error{color:#b69aff!important}

@media (max-width:700px) and (pointer:coarse){
  body.aurora-theme main{width:min(86vw,370px)}
  body.aurora-theme main>section{padding:28px 25px}
}

/* Chrome can resolve auto margins on a centered grid item against the layout
   viewport instead of the visible viewport. Use an explicit viewport-sized
   flex shell on desktop so the card's top and bottom gaps stay identical. */
@media (min-width:701px) and (min-height:520px){
  html{height:100%}
  body.aurora-theme{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    min-height:0;
    overflow:hidden;
  }
  @supports(height:100dvh){body.aurora-theme{height:100dvh}}
  body.aurora-theme>main{flex:0 1 430px;width:min(100%,430px);margin:0}
}