/* Adapted from phj2001/Desk-Lamp-Login-Page (MIT declared in its README).
   See desk-lamp-NOTICE.txt. All scene styles are isolated from the gallery. */
@property --dl-on { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --dl-shade-hue { syntax: '<number>'; inherits: true; initial-value: 38; }
.desk-lamp-case {
  --dl-on: 0;
  --dl-shade-hue: 38;

  --dl-bg: #0b0f16;
  --dl-ink: #eaedf3;
  --dl-ink-dim: #7d879c;
  --dl-line: #1c2433;
  --dl-danger: #ff7a6b;

  --dl-font-body: 'Noto Sans SC', ui-rounded, system-ui, sans-serif;
  --dl-font-display: 'Noto Serif SC', 'Songti SC', serif;
  --dl-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --dl-lamp-light: oklch(83% 0.17 var(--dl-shade-hue));
  --dl-lamp-glow:  oklch(72% 0.19 var(--dl-shade-hue));
  --dl-lamp-deep:  oklch(48% 0.13 var(--dl-shade-hue));

  --dl-accent:      color-mix(in oklab, var(--dl-lamp-light) calc(var(--dl-on) * 100%), #38414f);
  --dl-accent-glow: color-mix(in oklab, var(--dl-lamp-glow)  calc(var(--dl-on) * 100%), #232b38);
  --dl-accent-deep: color-mix(in oklab, var(--dl-lamp-deep)  calc(var(--dl-on) * 100%), #1b212c);
  --dl-card-bg:     color-mix(in oklab, var(--dl-accent-deep) 20%, #0d1320);
  position: relative; isolation: isolate; color: var(--dl-ink);
  font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  transition: --dl-on .9s ease, --dl-shade-hue 1.4s ease;
  background: radial-gradient(ellipse 62% 55% at 50% 34%, color-mix(in oklab, var(--dl-accent-glow) calc(var(--dl-on) * 20%), transparent), transparent 72%), radial-gradient(circle at 50% 125%, #070b11, var(--dl-bg) 62%);
}
.desk-lamp-case.dl-dozing { transition: --dl-on 3.2s ease, --dl-shade-hue 1.4s ease; }
.desk-lamp-case.dl-snap { transition: --dl-on .08s ease-out, --dl-shade-hue 1.4s ease; }
.desk-lamp-case.dl-flash { transition: --dl-on .9s ease, --dl-shade-hue .35s ease; }

.dl-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 90px;
}

.dl-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1100px;
}

/* ---- 品牌角标 ---- */
.dl-brand {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 5;
  font-family: var(--dl-font-mono);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--dl-ink-dim);
  writing-mode: vertical-rl;
  user-select: none;
  opacity: 0.8;
}
.dl-brand-no {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--dl-line);
  color: color-mix(in oklab, var(--dl-accent) 70%, var(--dl-ink-dim));
  transition: color 0.6s;
}

/* ---- 语言切换 ---- */
.dl-lang-switch {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 6;
  padding: 7px 12px;
  border: 1px solid var(--dl-line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--dl-card-bg) 70%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--dl-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--dl-ink-dim);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.3s, color 0.3s;
}
.dl-lang-switch:hover { border-color: var(--dl-accent); }
.dl-lang-switch i {
  font-style: normal;
  margin: 0 5px;
  opacity: 0.4;
}
.dl-lang-switch span { transition: color 0.3s, text-shadow 0.3s; }
.dl-lang-switch span.dl-on {
  color: var(--dl-accent);
  text-shadow: 0 0 10px var(--dl-accent-glow);
}

/* ---- 氛围层：星空 ---- */
.dl-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 22% 28%, #dfe6f6 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 14%, #b9c4dd 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 42%, #eef2fb 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 66%, #aab6d0 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 52%, #d4dcef 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 82%, #c8d2e8 50%, transparent 51%);
  background-size: 560px 560px, 440px 440px, 700px 700px, 520px 520px, 620px 620px, 480px 480px;
  opacity: calc(0.55 - var(--dl-on) * 0.32);
  animation: dl-twinkle 8s ease-in-out infinite;
  transition: opacity 1.2s ease;
}
/* 灯泡烧掉时，星空反而亮起来 */
.desk-lamp-case[data-burnout] .dl-stars {
  opacity: 0.95;
  animation-duration: 4s;
}
@keyframes dl-twinkle {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(0.55); }
}

/* ---- 萤火虫 ---- */
.dl-fireflies {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.dl-fireflies span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e4f8b0;
  box-shadow: 0 0 12px 3px rgba(196, 240, 130, 0.75);
  animation: dl-firefly ease-in-out infinite alternate;
}
@keyframes dl-firefly {
  0%   { transform: translate(0, 0) scale(var(--dl-s)); opacity: 0; }
  15%  { opacity: 1; }
  45%  { opacity: 0.25; }
  70%  { opacity: 0.95; }
  100% { transform: translate(var(--dl-dx), var(--dl-dy)) scale(var(--dl-s)); opacity: 0.1; }
}
.dl-fade-enter-active, .dl-fade-leave-active { transition: opacity 0.8s ease; }
.dl-fade-enter-from, .dl-fade-leave-to { opacity: 0; }

/* ---- 谢幕横幅 ---- */
.dl-finale-banner {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}
.dl-banner-cn {
  margin: 0 0 14px;
  font-family: var(--dl-font-display);
  font-weight: 900;
  font-size: clamp(34px, 6vw, 52px);
  letter-spacing: 6px;
  color: var(--dl-ink);
  text-shadow:
    0 0 34px var(--dl-accent-glow),
    0 0 90px color-mix(in oklab, var(--dl-accent-glow) 60%, transparent);
}
.dl-banner-en {
  margin: 0;
  font-family: var(--dl-font-mono);
  font-size: 12px;
  letter-spacing: 6px;
  color: color-mix(in oklab, var(--dl-accent) 65%, var(--dl-ink-dim));
}
.dl-banner-enter-active { transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.dl-banner-leave-active { transition: opacity 0.6s ease, transform 0.6s ease; }
.dl-banner-enter-from { opacity: 0; transform: translateY(22px) scale(0.96); }
.dl-banner-leave-to   { opacity: 0; transform: translateY(-14px); }

/* ---- 氛围层：暗角 + 颗粒 ---- */
.dl-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
}
.dl-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.dl-w3.dl-org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}

/* ---- 提示条 ---- */
.dl-toast {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translate(-50%, -20px);
  z-index: 100;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--dl-ink);
  background: color-mix(in oklab, var(--dl-card-bg) 88%, var(--dl-danger) 12%);
  border: 1.5px solid var(--dl-danger);
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(6px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dl-toast.dl-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.dl-toast.dl-success {
  background: color-mix(in oklab, var(--dl-card-bg) 85%, var(--dl-accent) 15%);
  border-color: var(--dl-accent);
  box-shadow:
    0 10px 30px -6px color-mix(in oklab, var(--dl-accent-glow) 50%, #000),
    0 0 30px -4px var(--dl-accent-glow);
}
.dl-toast-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--dl-danger);
  color: #0a0f17;
  font-weight: 800;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  vertical-align: middle;
}
.dl-toast.dl-success .dl-toast-icon { background: var(--dl-accent); }

/* ---- 页脚 ---- */
.dl-footer {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 5;
  text-align: center;
  font-size: 12px;
  color: var(--dl-ink-dim);
  letter-spacing: 0.5px;
  opacity: 0.8;
  user-select: none;
}
.dl-footer .dl-mono { font-family: var(--dl-font-mono); }
.dl-footer kbd {
  font-family: var(--dl-font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--dl-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: color-mix(in oklab, var(--dl-accent) 75%, var(--dl-ink-dim));
  transition: color 0.6s, border-color 0.6s;
}
.dl-footer .dl-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dl-accent);
  margin: 0 12px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--dl-accent-glow);
  transition: background 0.6s, box-shadow 0.6s;
}

@media (max-width: 820px) {
  .dl-wrap { padding: 24px 16px 80px; }
  .dl-stage { gap: 8px; }
  .dl-brand { display: none; }
  .dl-lang-switch { top: 14px; right: 14px; }
}


.dl-lamp-area {
  position: relative;
  width: 360px;
  height: 470px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}
.dl-lamp-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  user-select: none;
}

/* ---- 灯罩 ---- */
.dl-shade {
  fill: var(--dl-accent);
  stroke: #0a0f17;
  stroke-width: 3;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
  transition: fill 0.6s ease;
  cursor: pointer;
}
.dl-shade-hl {
  fill: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.dl-shade-inner {
  fill: var(--dl-accent-deep);
  transition: fill 0.6s ease;
}

/* ---- 光 ---- */
.dl-bulb-glow-group {
  opacity: var(--dl-on);
  mix-blend-mode: screen;
  color: var(--dl-accent-glow);
  pointer-events: none;
}
.dl-bulb-soft-outer { fill: currentColor; opacity: 0.35; filter: blur(6px); }
.dl-bulb-soft-inner { fill: currentColor; opacity: 0.7;  filter: blur(2px); }
.dl-bulb-hotspot {
  fill: color-mix(in oklab, #fff calc(var(--dl-on) * 90%), currentColor);
  opacity: calc(var(--dl-on) * 0.95);
}
.dl-cone {
  opacity: var(--dl-on);
  mix-blend-mode: screen;
  color: var(--dl-accent-glow);
  pointer-events: none;
}
.dl-cone-shape { animation: dl-cone-flicker 5s ease-in-out infinite; }
.dl-halo-shape { animation: dl-halo-pulse 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dl-pool-shape { animation: dl-pool-pulse 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dl-cone-flicker {
  0%, 100% { opacity: var(--dl-on); }
  45%      { opacity: calc(var(--dl-on) * 0.86); }
  70%      { opacity: var(--dl-on); }
}
@keyframes dl-halo-pulse {
  0%, 100% { transform: scale(1);    opacity: var(--dl-on); }
  50%      { transform: scale(1.08); opacity: calc(var(--dl-on) * 0.9); }
}
@keyframes dl-pool-pulse {
  0%, 100% { transform: scaleX(1);    opacity: var(--dl-on); }
  50%      { transform: scaleX(1.05); opacity: calc(var(--dl-on) * 0.88); }
}

/* 钨丝点亮闪烁：开灯瞬间覆盖基础透明度 */
.dl-ignite .dl-cone,
.dl-ignite .dl-bulb-glow-group {
  animation: dl-ignite 0.9s ease-out;
}
@keyframes dl-ignite {
  0%   { opacity: 0; }
  16%  { opacity: 0.9; }
  26%  { opacity: 0.12; }
  40%  { opacity: 0.95; }
  54%  { opacity: 0.3; }
  70%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ---- 浮尘 ---- */
.dl-mote {
  fill: var(--dl-accent-glow);
  mix-blend-mode: screen;
  opacity: 0;
  animation: dl-mote-drift 7s linear infinite;
  animation-delay: var(--dl-d);
  pointer-events: none;
}
@keyframes dl-mote-drift {
  0%   { transform: translate(0, 0);       opacity: 0; }
  18%  { opacity: calc(var(--dl-on) * 0.7); }
  50%  { transform: translate(5px, -46px); opacity: calc(var(--dl-on) * 0.45); }
  82%  { opacity: calc(var(--dl-on) * 0.6); }
  100% { transform: translate(-4px, -92px); opacity: 0; }
}

/* ---- 青烟（仅烧毁时） ---- */
.dl-smoke circle {
  fill: #8b93a5;
  opacity: 0;
  pointer-events: none;
}
.dl-burnt .dl-smoke circle {
  animation: dl-smoke-rise 1.9s ease-out infinite;
}
.dl-burnt .dl-smoke circle:nth-child(2) { animation-delay: 0.55s; }
.dl-burnt .dl-smoke circle:nth-child(3) { animation-delay: 1.1s; }
@keyframes dl-smoke-rise {
  0%   { transform: translate(0, 0) scale(0.6);   opacity: 0; }
  20%  { opacity: 0.5; }
  100% { transform: translate(7px, -36px) scale(1.8); opacity: 0; }
}

/* ---- Zzz（仅打瞌睡时） ---- */
.dl-z {
  font-family: var(--dl-font-mono);
  font-weight: 600;
  fill: #cfd8ea;
  opacity: 0;
  pointer-events: none;
}
.dl-z1 { font-size: 12px; }
.dl-z2 { font-size: 15px; }
.dl-z3 { font-size: 19px; }
.dl-sleeping .dl-z { animation: dl-z-float 2.8s ease-in-out infinite; }
.dl-sleeping .dl-z2 { animation-delay: 0.5s; }
.dl-sleeping .dl-z3 { animation-delay: 1s; }
@keyframes dl-z-float {
  0%   { transform: translate(0, 4px);  opacity: 0; }
  30%  { opacity: 0.85; }
  100% { transform: translate(5px, -12px); opacity: 0; }
}

/* ---- 结构 ---- */
.dl-base { fill: #1a2230; stroke: #0a0f17; stroke-width: 3; }
.dl-arm  { stroke: #2a3240; stroke-width: 6; stroke-linecap: round; fill: none; }

/* ---- 表情 ---- */
.dl-eye       { fill: #0a0f17; }
.dl-eye-white { fill: #f5f0e8; stroke: #0a0f17; stroke-width: 1.5; }
.dl-eye-gleam {
  fill: color-mix(in oklab, #fff calc(var(--dl-on) * 100%), transparent);
}
.dl-eyelid { stroke: #0a0f17; stroke-width: 3; fill: none; stroke-linecap: round; }
.dl-eyelid-flat { stroke: #0a0f17; stroke-width: 3; stroke-linecap: round; }
.dl-happy-eye { stroke: #0a0f17; stroke-width: 3.5; fill: none; stroke-linecap: round; }
.dl-blush { fill: color-mix(in oklab, #ff8d7a 55%, var(--dl-accent)); opacity: 0.55; }
.dl-mouth { stroke: #0a0f17; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.dl-sweat { fill: #9fc9ee; opacity: 0.85; animation: dl-sweat-slide 1.7s ease-in infinite; }
@keyframes dl-sweat-slide {
  0%   { transform: translateY(0);   opacity: 0; }
  25%  { opacity: 0.85; }
  100% { transform: translateY(9px); opacity: 0; }
}
/* 烧毁时房间全黑，五官改用浅色描边 */
.dl-dizzy line { stroke: #cfd8ea; stroke-width: 3; stroke-linecap: round; }
.dl-burnt .dl-mouth { stroke: #cfd8ea; }

/* ---- 灯绳 ---- */
.dl-cord-path {
  stroke: color-mix(in oklab, var(--dl-accent) calc(var(--dl-on) * 30% + 40%), #4a5464);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
}
.dl-knob-group {
  cursor: grab;
  touch-action: none;
  outline: none;
}
.dl-knob-group:active { cursor: grabbing; }
.dl-knob-group:focus-visible .dl-cord-knob {
  stroke: #eaedf3;
  stroke-width: 2.5;
}
.dl-cord-knob {
  fill: var(--dl-accent);
  stroke: #0a0f17;
  stroke-width: 2;
  filter: drop-shadow(0 0 calc(var(--dl-on) * 10px) var(--dl-accent-glow));
}
/* 关灯时的呼吸光环，引导视线到灯绳 */
.dl-knob-ring {
  fill: none;
  stroke: #97a2b8;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: dl-ring-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes dl-ring-pulse {
  0%   { transform: scale(0.7); opacity: calc((1 - var(--dl-on)) * 0.9); }
  70%  { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.dl-cord-hint {
  font-family: var(--dl-font-mono);
  font-size: 10px;
  fill: var(--dl-ink-dim);
  opacity: calc(0.85 - var(--dl-on) * 0.55);
  pointer-events: none;
  animation: dl-hint-bob 2.4s ease-in-out infinite;
}
@keyframes dl-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@media (max-width: 820px) {
  .dl-lamp-area { width: 300px; height: 390px; }
}


.dl-card-wrap {
  position: relative;
  width: 384px;
  transform-origin: left center;
  transition:
    opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
/* 关灯：卡片没入黑暗，只剩轮廓 */
.dl-card-wrap.dl-off {
  opacity: 0.6;
  transform: scale(0.985);
  cursor: pointer;
  touch-action: none;
  transition-delay: 0s;
}
.dl-card-wrap.dl-off .dl-card {
  pointer-events: none;
  border-color: #1c2433;
  background: #0b101a;
  box-shadow: none;
  filter: saturate(0.15) brightness(0.55) blur(0.7px);
}
/* 登录成功：谢幕退场 */
.dl-card-wrap.dl-finale {
  opacity: 0;
  transform: translateY(-26px) scale(0.95);
  pointer-events: none;
}

/* 黑暗中的手电筒：跟随鼠标的一小圈微光 */
.dl-torch {
  position: absolute;
  inset: -14px;
  z-index: 2;
  border-radius: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
  background: radial-gradient(
    circle 110px at var(--dl-tx, 50%) var(--dl-ty, 42%),
    transparent 0%,
    rgba(4, 7, 12, 0.55) 45%,
    rgba(4, 7, 12, 0.92) 72%
  );
}
.dl-card-wrap.dl-off .dl-torch { opacity: 1; }

.dl-card {
  background: var(--dl-card-bg);
  border: 1.5px solid var(--dl-accent);
  border-radius: 18px;
  padding: 30px 30px 22px;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--dl-accent) 25%, transparent),
    0 18px 50px -8px color-mix(in oklab, var(--dl-accent-glow) 40%, #000),
    0 0 60px -10px var(--dl-accent-glow),
    inset 0 1px 0 color-mix(in oklab, var(--dl-accent) 20%, transparent);
  backdrop-filter: blur(6px);
  transition: border-color 0.7s ease, background 0.7s ease, box-shadow 0.7s ease, filter 0.7s ease;
}
.dl-card.dl-shake { animation: dl-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes dl-shake {
  10%, 90%      { transform: translateX(-1px); }
  20%, 80%      { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60%      { transform: translateX(4px); }
}

.dl-eyebrow {
  margin: 0 0 10px;
  font-family: var(--dl-font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: color-mix(in oklab, var(--dl-accent) 80%, var(--dl-ink-dim));
  transition: color 0.6s;
}
.dl-card h2 {
  margin: 0 0 6px;
  font-family: var(--dl-font-display);
  font-weight: 900;
  font-size: 27px;
  letter-spacing: 1px;
  color: var(--dl-ink);
}
.dl-card .dl-sub {
  margin: 0 0 22px;
  font-size: 12.5px;
  color: var(--dl-ink-dim);
  letter-spacing: 0.3px;
}

.dl-field { margin-bottom: 14px; }
.dl-field label {
  display: block;
  font-size: 12px;
  color: var(--dl-ink-dim);
  margin-bottom: 6px;
  letter-spacing: 0.4px;
}
.dl-field input {
  width: 100%;
  background: #0e1420;
  border: 1.5px solid #232b38;
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--dl-ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.dl-field input::placeholder { color: #4a5364; }
.dl-field input:disabled { opacity: 0.6; }
.dl-field input:focus {
  border-color: var(--dl-accent);
  background: #121a28;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--dl-accent) 20%, transparent),
    0 0 18px color-mix(in oklab, var(--dl-accent-glow) 35%, transparent),
    inset 0 0 14px color-mix(in oklab, var(--dl-accent-glow) 10%, transparent);
}

.dl-pass-box { position: relative; }
.dl-pass-box input { padding-right: 44px; }
.dl-eye-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 8px;
  color: var(--dl-ink-dim);
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  transition: color 0.25s;
}
.dl-eye-toggle:hover { color: var(--dl-accent); }

.dl-error {
  margin: 0 0 4px;
  min-height: 16px;
  font-size: 12px;
  color: var(--dl-danger);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.25s, transform 0.25s;
}
.dl-error.dl-show { opacity: 1; transform: none; }

.dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dl-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--dl-ink-dim);
  cursor: pointer;
  user-select: none;
}
.dl-remember input {
  appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1.5px solid #2c3646;
  border-radius: 4px;
  background: #0e1420;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color 0.25s, background 0.25s;
}
.dl-remember input::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #0a0f17;
  transform: scale(0);
  transition: transform 0.15s;
}
.dl-remember input:checked {
  border-color: var(--dl-accent);
  background: var(--dl-accent);
}
.dl-remember input:checked::before { transform: scale(1); }

.dl-forget {
  font-size: 12px;
  color: var(--dl-ink-dim);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.25s;
}
.dl-forget:hover { color: var(--dl-accent); }

.dl-btn {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--dl-accent) 90%, #fff 10%),
    var(--dl-accent) 60%,
    color-mix(in oklab, var(--dl-accent) 85%, #000 15%));
  color: #0a0f17;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow:
    0 8px 20px -6px var(--dl-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: filter 0.2s, transform 0.1s, box-shadow 0.3s;
}
.dl-btn:hover:not(:disabled)  { filter: brightness(1.08); }
.dl-btn:active:not(:disabled) { transform: translateY(1px); }
.dl-btn:disabled { cursor: default; filter: saturate(0.85); }

.dl-demo {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11px;
  color: color-mix(in oklab, var(--dl-ink-dim) 75%, transparent);
  letter-spacing: 0.3px;
}
.dl-demo code {
  font-family: var(--dl-font-mono);
  color: var(--dl-ink-dim);
  background: #0e1420;
  border: 1px solid #1e2735;
  border-radius: 5px;
  padding: 1px 6px;
}

@media (max-width: 820px) {
  .dl-card-wrap { width: min(384px, 100%); }
}

/* Gallery integration and native controls. The scene owns all positioning. */
.dl-scene { position:relative; overflow:hidden; min-height:calc(100svh - 108px); }
.dl-wrap { min-height:calc(100svh - 108px); }
.dl-stage { flex-wrap:nowrap; }
.dl-card fieldset { margin:0; padding:0; border:0; min-width:0; }
.dl-card h2 { line-height:1.5; }
.dl-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.dl-forget { border:0; padding:8px 0; background:none; min-height:36px; }
.dl-eye-toggle { width:40px; height:40px; align-items:center; justify-content:center; }
.dl-remember { min-height:36px; }
.dl-row { margin-bottom:10px; }
.dl-card-wrap.dl-off { touch-action:auto; }
.dl-card-wrap.dl-off .dl-card { pointer-events:none; }
.dl-card input { line-height:1.4; }
.dl-card-wrap .dl-sub { line-height:1.7; }
.dl-card .dl-demo { line-height:1.6; }
.dl-face { transform-origin:180px 160px; opacity:0; transform:scale(0); transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
.dl-face.dl-visible { opacity:1; transform:scale(1); }
[data-lamp="swingEl"] { transform-origin:180px 6px; }
[data-lamp="normalEyesEl"] { transform-origin:180px 150px; }
.dl-cord-path { transform-origin:230px 195px; pointer-events:none; }
.dl-cone-shape { filter:url(#dl-coneBlur); }
.dl-knob-group { touch-action:none; }
.dl-lang-switch { min-width:74px; min-height:40px; }
.desk-lamp-case button:focus-visible, .desk-lamp-case a:focus-visible, .dl-shade:focus-visible { outline:2px solid #e9edf5; outline-offset:4px; }
.dl-gallery-footer { position:relative; z-index:6; flex-wrap:wrap; padding-block:4px; }
.dl-gallery-footer #dl-demo-note { font-size:10px; line-height:1.6; color:#aeb5a2; }
.dl-tools { display:flex; gap:16px; align-items:center; }
.dl-tools button, .dl-tools a { border:0; padding:0; min-height:44px; background:none; font-size:10px; color:#c8cfb7; display:inline-flex; align-items:center; }
.dl-toast { max-width:calc(100% - 32px); width:max-content; text-align:center; line-height:1.6; }
.dl-finale-banner { padding:24px; background:#0b0f161c; }
.dl-finale-banner:not([hidden]) { animation:dl-finale-in .8s ease both; }
.dl-no-script { padding:16px; color:#d6dce8; text-align:center; }
@keyframes dl-finale-in { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }
@media (max-width:900px) and (min-width:821px) { .dl-stage { gap:24px; } .dl-brand { left:14px; } }
@media (max-width:820px) {
  .dl-stage { flex-direction:column; gap:8px; }
  .dl-wrap { padding:52px 20px 98px; }
  .dl-lamp-area { width:260px; height:340px; }
  .dl-card-wrap { width:min(384px,100%); }
  .dl-footer { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:0 14px; font-size:10px; line-height:1.7; }
  .dl-footer .dl-dot { margin:0 3px; align-self:center; }
  .dl-footer .dl-dot:nth-of-type(2) { display:none; }
  .dl-footer [data-dl-instruction] { flex-basis:100%; }
  .dl-gallery-footer { gap:0 12px; }
  .dl-gallery-footer #dl-demo-note { order:3; flex-basis:100%; padding-bottom:8px; font-size:9px; }
  .dl-gallery-footer .dl-tools { margin-left:auto; gap:12px; }
  .dl-gallery-footer .case-caption { display:none; }
  .dl-card .dl-field input { font-size:16px; }
}
@media (max-width:360px) {
  .dl-wrap { padding-inline:16px; }
  .dl-card { padding:25px 22px 20px; }
  .dl-card h2 { font-size:24px; }
  .dl-gallery-footer { padding-inline:12px; }
  .dl-tools { gap:9px; }
  .dl-tools button,.dl-tools a { font-size:9px; }
  .gallery-title { display:none; }
}
.desk-lamp-case.motion-paused *, .desk-lamp-case.motion-paused *::before, .desk-lamp-case.motion-paused *::after { animation:none!important; transition:none!important; }
.desk-lamp-case.case-offscreen *, .page-hidden .desk-lamp-case * { animation-play-state:paused!important; }
@media (prefers-reduced-motion:reduce) { .desk-lamp-case, .desk-lamp-case *, .desk-lamp-case *::before, .desk-lamp-case *::after { animation:none!important; transition:none!important; } }
/* SVG groups do not provide a reliable touch-action region on mobile browsers.
   A real button covers only the cord handle, leaving the scene scrollable. */
.dl-cord-control { position:absolute; left:63.8889%; top:68.0851%; transform:translate(-50%,-50%); width:52px; height:52px; border:0; border-radius:50%; padding:0; background:transparent; z-index:4; touch-action:none; cursor:grab; }
.dl-cord-control:active { cursor:grabbing; }
.desk-lamp-case .dl-cord-control:focus-visible { outline:2px solid #eaedf3; outline-offset:1px; }