/* css.slopped.site exhibit: The lamp, drawn. From css/exhibits/lamp.mjs. */
.x-lamp .bench { position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: 24px 48px; padding: 30px 10px 0; border-radius: 12px; background: linear-gradient(to top, #4a3424 0 44px, #6b4a2e 44px 58px, transparent 58px); }
.x-lamp .lamp-switch { position: absolute; opacity: 0; width: 1px; height: 1px; }
.x-lamp .lamp-side { align-self: center; padding-bottom: 70px; }
.x-lamp .toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; cursor: pointer; }
.x-lamp .knob { width: 22px; height: 38px; border: 2px solid var(--ink); border-radius: 6px; background: linear-gradient(var(--ink) 0 50%, var(--acid) 50%); }
.x-lamp .lamp-switch:checked ~ .lamp-side .knob { background: linear-gradient(var(--acid) 0 50%, var(--ink) 50%); }
.x-lamp .lamp-switch:focus-visible ~ .lamp-side .toggle { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.x-lamp .caption { max-width: 28ch; margin: 8px 0 0; }
.x-lamp .off, .x-lamp .lamp-switch:checked ~ .lamp-side .on { display: none; }
.x-lamp .lamp-switch:checked ~ .lamp-side .off { display: block; }
/* key */
.x-lamp .lamp {
  position: relative; width: 200px; height: 330px; margin-bottom: 46px;
  background:
    /* the flame: an ellipse that goes from white to orange to nothing */
    radial-gradient(ellipse 13px 34px at 50% 41%, #fffbe8 0 25%, #ffd54a 45%, #ff8a1f 75%, transparent 78%),
    /* the wick */
    linear-gradient(#2b2117, #2b2117) 50% 52% / 6px 16px no-repeat,
    /* the burner collar and the brass font, as stacked ellipses and a rounded band */
    radial-gradient(ellipse 46px 12px at 50% 59%, #f3d27a, #a77a24 70%, transparent 72%),
    radial-gradient(ellipse 90px 62px at 50% 78%, #f6d987 0 20%, #c8952f 50%, #7c5512 88%, transparent 90%),
    radial-gradient(ellipse 70px 12px at 50% 97%, #a77a24 0 80%, transparent 82%);
}
/* the glass chimney: a bulb with a neck, drawn with a border and an eight-value radius */
.x-lamp .lamp::before {
  content: ""; position: absolute; left: 50%; top: 14%; width: 92px; height: 46%; translate: -50% 0;
  border: 2px solid rgb(255 255 255 / .75); border-radius: 30% 30% 46% 46% / 22% 22% 60% 60%;
  background: linear-gradient(100deg, rgb(255 255 255 / .55) 8%, transparent 22% 78%, rgb(255 255 255 / .25) 92%), rgb(200 225 240 / .18);
}
/* the glow, which flickers */
.x-lamp .lamp::after {
  content: ""; position: absolute; left: 50%; top: 41%; width: 340px; height: 340px; translate: -50% -50%; z-index: -1;
  border-radius: 50%; background: radial-gradient(circle, rgb(255 214 110 / .75), rgb(255 190 80 / .25) 40%, transparent 68%);
  animation: flicker 2.4s ease-in-out infinite alternate;
}
@keyframes flicker { 0% { opacity: .85; scale: 1; } 40% { opacity: 1; scale: 1.04; } 70% { opacity: .9; scale: .98; } 100% { opacity: 1; scale: 1.02; } }
@media (prefers-reduced-motion: reduce) { .x-lamp .lamp::after { animation: none; } }

/* off: no flame, no glow */
.x-lamp .lamp-switch:checked ~ .lamp { background-size: 0 0, 6px 16px, auto, auto, auto; }
.x-lamp .lamp-switch:checked ~ .lamp::after { opacity: 0; animation: none; }
/* /key */
.x-lamp .lamp-switch:checked ~ .lamp { background-repeat: no-repeat; }
.x-lamp .bench { isolation: isolate; }

/* live support notes (built from css/exhibits.js) */
.sup-gradients .sup-no { display: none; }
@supports not (background: conic-gradient(red, blue)) { .sup-gradients .sup-yes { display: none; } .sup-gradients .sup-no { display: inline; } .sup-gradients { --sup: var(--no); } }
.sup-checkbox-hack .sup-no { display: none; }
@supports not selector(:checked) { .sup-checkbox-hack .sup-yes { display: none; } .sup-checkbox-hack .sup-no { display: inline; } .sup-checkbox-hack { --sup: var(--no); } }