:root {
  color-scheme: dark;
  font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif;
  background: #10122b;
  color: #fbf7f1;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(118, 93, 164, .25), transparent 26rem),
    radial-gradient(circle at 15% 88%, rgba(36, 112, 137, .22), transparent 30rem),
    linear-gradient(150deg, #0e1028 0%, #171333 58%, #0b2334 100%);
}

main { min-height: 100vh; }

.view {
  width: min(100% - 2.5rem, 38rem);
  min-height: 100vh;
  margin: auto;
  padding: 3rem 0 2.5rem;
  text-align: center;
}

.view[hidden] { display: none; }

.login-view {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.1rem;
}

.eyebrow {
  margin: 0;
  color: #e6c98f;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 9vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .98;
}

.intro { margin: 0 0 1.5rem; color: #b9bbd1; }

.login-form { display: grid; width: min(100%, 21rem); gap: .65rem; text-align: left; }
.login-form label { color: #d6d2d0; font-size: .9rem; }

input, .login-form button {
  min-height: 3.2rem;
  border-radius: 1rem;
  font: inherit;
}

input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 0 1rem;
  outline: none;
  background: rgba(7, 9, 29, .45);
  color: #fff;
}

input:focus { border-color: #e6c98f; box-shadow: 0 0 0 4px rgba(230, 201, 143, .16); }

.login-form button {
  margin-top: .45rem;
  border: 0;
  cursor: pointer;
  background: linear-gradient(120deg, #f3d594, #dcae5d);
  color: #382512;
  font-weight: 700;
}

button:focus-visible { outline: 3px solid #f6d98f; outline-offset: 4px; }
button:disabled { cursor: wait; opacity: .7; }

.message {
  min-height: 1.5rem;
  margin: .25rem 0 0;
  color: #f4c9bb;
  font-size: .9rem;
  line-height: 1.4;
  text-align: center;
}

.light-view { position: relative; display: flex; flex-direction: column; align-items: center; }
.light-view .eyebrow { margin-top: 1.5rem; }
.state-label { margin: auto 0 .3rem; color: #cbc6d6; }

.quiet-button {
  position: absolute;
  top: 2rem;
  right: 0;
  border: 0;
  padding: .5rem;
  background: transparent;
  color: #aaa8bf;
  cursor: pointer;
}

.light-control {
  position: relative;
  display: grid;
  width: min(66vw, 20rem);
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
}

.halo {
  position: absolute;
  border-radius: inherit;
  opacity: 0;
  transform: scale(.68);
  transition: opacity .8s ease, transform 1.2s ease;
}
.halo-one { inset: 3%; background: radial-gradient(circle, rgba(255, 216, 128, .2), rgba(230, 176, 80, .04) 54%, transparent 70%); }
.halo-two { inset: -20%; background: radial-gradient(circle, rgba(255, 214, 126, .12), transparent 62%); }
.light-control.is-on .halo { opacity: 1; transform: scale(1); }

.lamp { position: relative; z-index: 1; display: grid; place-items: center; filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)); }
.shade {
  width: 9rem;
  height: 6.2rem;
  clip-path: polygon(18% 100%, 31% 8%, 69% 8%, 82% 100%);
  border-radius: 50% 50% 10% 10%;
  background: linear-gradient(105deg, #5c5669, #9990a0 48%, #4a465a);
  box-shadow: inset 0 -8px 15px rgba(0,0,0,.25);
  transition: background .7s ease, box-shadow .7s ease;
}
.is-on .shade { background: linear-gradient(105deg, #d7903b, #fff0bc 48%, #d58830); box-shadow: 0 0 44px rgba(255, 198, 91, .65), inset 0 -8px 15px rgba(132,65,11,.18); }
.stem { width: 1rem; height: 4.3rem; margin-top: -.1rem; border-radius: 0 0 .5rem .5rem; background: linear-gradient(90deg, #4c4858, #9b94a3, #4b4657); }
.base { width: 5.4rem; height: .85rem; margin-top: -.1rem; border-radius: 50%; background: linear-gradient(180deg, #aaa1ac, #423f4e); }

.action-label { min-height: 1.5rem; margin: .35rem 0 0; color: #d8d2df; }
.light-message { min-height: 2.8rem; max-width: 19rem; color: #f4daaa; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}