:root {
  --on: 0;
  --shade-hue: 47;
  --spring-curve: cubic-bezier(.16, 1.32, .38, 1);
  --lamp-color: hsl(var(--shade-hue) 92% 62%);
  --lamp-soft: hsl(var(--shade-hue) 96% 72% / calc(.12 + var(--on) * .58));
  --lamp-border: hsl(var(--shade-hue) 96% 70% / calc(.18 + var(--on) * .64));
  --panel-bg: hsl(212 28% 10% / .84);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #121921;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #edf5ff;
}

button,
input {
  font: inherit;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(24px, 6vw, 72px);
  background:
    radial-gradient(circle at 43% 36%, hsl(var(--shade-hue) 94% 60% / calc(var(--on) * .2)), transparent 31rem),
    radial-gradient(circle at 72% 74%, hsl(196 54% 34% / .14), transparent 24rem),
    #121921;
  transition: background 520ms ease;
}

.login-stage {
  width: min(1080px, 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 8vw, 96px);
}

.lamp-scene {
  width: min(390px, 90vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 24px 38px rgb(0 0 0 / .28));
}

.desk-lamp {
  width: 100%;
  height: auto;
  overflow: visible;
  user-select: none;
}

.lamp-glow {
  fill: var(--lamp-color);
  filter: url(#softLampGlow);
  opacity: calc(var(--on) * .34);
  transition: opacity 480ms ease, fill 480ms ease;
}

.light-beam {
  fill: url(#lightGradient);
  filter: url(#hazeBlur);
  opacity: calc(var(--on) * .72);
  mix-blend-mode: screen;
  transition: opacity 520ms ease;
}

.ambient-haze {
  fill: hsl(var(--shade-hue) 94% 64% / calc(var(--on) * .12));
  filter: url(#hazeBlur);
  mix-blend-mode: screen;
  transition: fill 520ms ease, opacity 520ms ease;
}

.haze-wide {
  opacity: calc(var(--on) * .78);
}

.water-ripple {
  fill: none;
  stroke: hsl(var(--shade-hue) 94% 72% / calc(var(--on) * .18));
  stroke-linecap: round;
  stroke-width: 1;
  filter: url(#hazeBlur);
  mix-blend-mode: screen;
  opacity: calc(var(--on) * .8);
  transition: stroke 520ms ease, opacity 520ms ease;
}

.ripple-two {
  opacity: calc(var(--on) * .42);
}

.ripple-three {
  opacity: calc(var(--on) * .28);
}

.floor-shadow {
  fill: rgb(0 0 0 / calc(.22 + var(--on) * .12));
  filter: blur(1px);
}

.hanging-wire {
  fill: none;
  stroke: rgb(229 239 249 / .56);
  stroke-linecap: round;
  stroke-width: 1.7;
}

.wire-cap {
  fill: rgb(225 235 243 / .72);
  stroke: rgb(9 14 21 / .42);
  stroke-width: .8;
}

.wire-pin {
  fill: rgb(229 239 249 / .8);
}

.shade-shadow {
  fill: rgb(3 7 12 / .46);
  transform: translateY(3px);
}

.minimal-shade {
  fill: url(#shadeGradient);
  stroke: hsl(var(--shade-hue) 90% 78% / calc(.22 + var(--on) * .44));
  stroke-width: 1.4;
  filter: drop-shadow(0 16px 26px rgb(0 0 0 / .32));
  transition: stroke 480ms ease, filter 480ms ease;
}

.shade-highlight {
  fill: none;
  stroke: rgb(255 248 213 / .44);
  stroke-linecap: round;
  stroke-width: 1.5;
  filter: url(#fineGlow);
}

.shade-side {
  fill: rgb(0 0 0 / .12);
}

.shade-side-right {
  fill: rgb(255 255 255 / .07);
}

.shade-rim {
  fill: none;
  stroke: rgb(255 249 220 / .86);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.minimal-lip {
  fill: none;
  stroke: hsl(var(--shade-hue) 70% 18% / .72);
  stroke-width: 1.5;
  transition: stroke 480ms ease;
}

.eye-white {
  fill: #f6fbff;
  stroke: rgb(18 25 33 / .58);
  stroke-width: .9;
}

.eye-pupil {
  fill: #1d2530;
  stroke: none;
}

.pull-cord {
  fill: none;
  stroke: rgb(216 231 247 / .82);
  stroke-linecap: round;
  stroke-width: 2.3;
  filter: drop-shadow(0 0 calc(var(--on) * 5px) hsl(var(--shade-hue) 96% 68% / .36));
}

.pull-cord-shadow {
  stroke: rgb(0 0 0 / .3);
  stroke-width: 5;
}

.pull-cord-handle {
  cursor: grab;
  transform-box: fill-box;
  transform-origin: center;
}

.pull-cord-handle:active {
  cursor: grabbing;
}

.pull-tab {
  fill: hsl(var(--shade-hue) 92% 52%);
  stroke: rgb(246 251 255 / .78);
  stroke-width: 1.5;
  filter:
    drop-shadow(0 8px 14px rgb(0 0 0 / .3))
    drop-shadow(0 0 calc(var(--on) * 14px) hsl(var(--shade-hue) 96% 64% / .62));
}

.cord-bead {
  fill: #121921;
  opacity: .72;
}

.login-card {
  width: min(390px, 92vw);
  opacity: 0;
  transform: translateY(20px) scale(.86);
  pointer-events: none;
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--lamp-border);
  border-radius: 8px;
  background:
    linear-gradient(145deg, hsl(var(--shade-hue) 70% 24% / calc(var(--on) * .18)), transparent 48%),
    linear-gradient(180deg, rgb(255 255 255 / .045), transparent 28%),
    var(--panel-bg);
  box-shadow:
    0 0 calc(var(--on) * 44px) hsl(var(--shade-hue) 94% 62% / calc(var(--on) * .42)),
    0 24px 60px rgb(0 0 0 / .42);
  backdrop-filter: blur(18px);
  transition:
    opacity 520ms var(--spring-curve),
    transform 620ms var(--spring-curve),
    border-color 420ms ease,
    box-shadow 420ms ease,
    background 420ms ease;
}

.is-lamp-on .login-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.form-kicker {
  margin: 0 0 8px;
  color: hsl(var(--shade-hue) 94% 74% / calc(.52 + var(--on) * .32));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.login-card h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0;
}

.form-subtitle {
  margin: 9px 0 26px;
  color: rgb(224 234 245 / .56);
  font-size: 13px;
  line-height: 1.6;
}

.field {
  display: grid;
  gap: 9px;
  margin-bottom: 18px;
  color: rgb(221 234 247 / .78);
  font-size: 14px;
}

.field input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgb(193 211 230 / .16);
  border-radius: 8px;
  outline: none;
  padding: 0 15px;
  color: #f4f9ff;
  background: rgb(7 14 24 / .72);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.field input::placeholder {
  color: rgb(204 218 236 / .38);
}

.field input:focus {
  border-color: hsl(var(--shade-hue) 94% 66%);
  background: rgb(8 15 25 / .9);
  box-shadow:
    0 0 0 3px hsl(var(--shade-hue) 92% 62% / .18),
    0 0 24px hsl(var(--shade-hue) 92% 62% / .22);
}

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 18px;
  color: rgb(221 234 247 / .7);
  font-size: 13px;
}

.remember-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.remember-option input {
  width: 13px;
  height: 13px;
  accent-color: hsl(var(--shade-hue) 92% 58%);
}

.login-button {
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  border: 0;
  border-radius: 8px;
  color: #0c131c;
  font-weight: 800;
  background: linear-gradient(135deg, hsl(var(--shade-hue) 96% 76%), hsl(var(--shade-hue) 86% 54%));
  box-shadow: 0 14px 30px hsl(var(--shade-hue) 86% 48% / calc(.18 + var(--on) * .22));
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

.login-status {
  min-height: 20px;
  margin: 2px 0 8px;
  color: rgba(236, 244, 255, .72);
  font-size: 13px;
  line-height: 1.45;
}

.login-status.is-error {
  color: #ffb6a8;
}

.login-button[disabled] {
  cursor: progress;
  opacity: .72;
}

.login-divider {
  width: 100%;
  height: 1px;
  margin-top: 22px;
  background: linear-gradient(90deg, transparent, hsl(var(--shade-hue) 94% 72% / calc(.16 + var(--on) * .24)), transparent);
}

.login-button:hover {
  filter: brightness(1.06);
}

.login-button:active {
  transform: translateY(1px);
}

.forgot-link {
  display: inline-flex;
  color: hsl(var(--shade-hue) 92% 72%);
  text-decoration: none;
  text-shadow: 0 0 18px hsl(var(--shade-hue) 92% 62% / calc(var(--on) * .5));
  white-space: nowrap;
}

.forgot-link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .login-page {
    padding: 22px;
    overflow: auto;
  }

  .login-stage {
    gap: 16px;
  }

  .lamp-scene {
    width: min(320px, 88vw);
  }
}