:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #202020;
  background: #bdbdbd;
  font-synthesis: none;
  --focus: #246bfe;
  --dark-face: radial-gradient(53% 128% at 36.4% -18.1%, #6f6f6f 0%, #080808 95.85%);
  --dark-hover: radial-gradient(83% 128% at 37.3% -36.6%, #939393 0%, #151515 95.85%);
  --dark-pressed: radial-gradient(53% 128% at 36.4% -18.1%, #313131 0%, #0c0c0c 95.85%);
  --dark-shadow: 0 0.557px 0.557px -0.375px #0e0e0e17,
    0 1.69px 1.69px -0.75px #0e0e0e1a,
    0 4.468px 4.468px -1.125px #0e0e0e1f,
    0 14px 14px -1.5px #0e0e0e33,
    inset 0 2px 10px 1px #fafafa33,
    inset 0 0 2px 1px #f8f8f833,
    inset 0 2px 0.5px #fff3;
}

* { box-sizing: border-box; }

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body { overflow: hidden; }

main {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  isolation: isolate;
}

#scene {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pinch-zoom;
}

button, input { font: inherit; }

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 17px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

button:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

button:active { background: #00000012; }

.controls {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  padding: 7px;
  transform: translateX(-50%);
}

.controls, .finish-palette {
  border: 1px solid #ffffff8f;
  border-radius: 999px;
  background: linear-gradient(160deg, #ffffffa6, #f0f0f08c 42%, #ffffffa8);
  box-shadow: 0 1px 2px #00000014,
    0 5px 12px #00000014,
    0 18px 40px -6px #00000026,
    inset 0 1px 1px #fffffff2,
    inset 0 -1px 1px #0000001c;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.controls::before, .finish-palette::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from -75deg, #ffffffea, #ffffff33 15%, #00000026 45%, #ffffffbb 65%, #ffffff22 85%, #ffffffea);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.finish-palette {
  position: absolute;
  z-index: 2;
  top: calc(24px + env(safe-area-inset-top, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
}

.finish-button {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
}

.finish-button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #252525;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #ffffff80;
  pointer-events: none;
}

.finish-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid #00000021;
  border-radius: 50%;
  box-shadow: 0 1px 2px #00000026, inset 0 1px 1px #ffffffb3;
}

.silver-swatch {
  background: conic-gradient(from -35deg, #b5b5b5, #e9e9e9 18%, #a1a1a1 38%, #dedede 63%, #ababab 80%, #b5b5b5);
}

.graphite-swatch {
  background: radial-gradient(100% 110% at 30% 5%, #666, #333 55%, #1b1b1b);
}

.porcelain-swatch {
  background: radial-gradient(100% 110% at 30% 5%, #fff 20%, #f3f3f3 65%, #dcdcdc);
}

.finish-button:active .finish-swatch { box-shadow: inset 0 1px 4px #0000004d; }
.finish-name { display: none; }

.view-control {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: #00000007;
  box-shadow: inset 0 1px 3px #00000013, 0 1px 0 #ffffff80;
}

.view-control button[aria-pressed="true"],
.live-control[aria-pressed="true"],
.fallback button {
  color: #fff;
  background: var(--dark-face);
  box-shadow: var(--dark-shadow);
}

.view-control button[aria-pressed="true"]:active,
.live-control[aria-pressed="true"]:active,
.fallback button:active {
  background: var(--dark-pressed);
}

.live-control { gap: 7px; padding-inline: 13px; }

.live-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.live-control[aria-pressed="true"] .live-dot { background: currentColor; }

.divider {
  width: 1px;
  height: 18px;
  margin-inline: 2px;
  background: #00000016;
  box-shadow: 1px 0 0 #ffffff60;
  flex: 0 0 1px;
}

.light-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 44px;
  padding-left: 4px;
}

.icon {
  display: block;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sun-icon { width: 17px; height: 17px; }

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 96px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #202020;
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: #77777752;
  box-shadow: inset 0 1px 1px #0000001f, 0 1px 0 #ffffff80;
}

input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: #77777752;
  box-shadow: inset 0 1px 1px #0000001f, 0 1px 0 #ffffff80;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7.5px;
  border: 1px solid #ffffffb3;
  border-radius: 50%;
  background: linear-gradient(155deg, #fff 18%, #ededed 70%, #d4d4d4);
  box-shadow: 0 1px 2px #00000030, 0 3px 5px #00000015, inset 0 1px 1px #fff;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 1px solid #ffffffb3;
  border-radius: 50%;
  background: linear-gradient(155deg, #fff 18%, #ededed 70%, #d4d4d4);
  box-shadow: 0 1px 2px #00000030, 0 3px 5px #00000015, inset 0 1px 1px #fff;
}

input[type="range"]:active::-webkit-slider-thumb { background: #dcdcdc; }
input[type="range"]:active::-moz-range-thumb { background: #dcdcdc; }

.icon-control { width: 44px; flex: 0 0 44px; padding: 0; }

.fallback {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 14px 14px 14px 24px;
  border: 1px solid #ffffffb3;
  border-radius: 28px;
  background: #f6f6f6;
  box-shadow: 0 2px 4px #00000014, 0 12px 40px #0000001a;
  font-size: 14px;
  line-height: 1.5;
  transform: translate(-50%, -50%);
}

.fallback p { margin: 0; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  button:hover { background: #ffffff48; }
  .view-control button[aria-pressed="true"]:hover,
  .live-control[aria-pressed="true"]:hover,
  .fallback button:hover { background: var(--dark-hover); }
  button:active { background: #00000012; }
  .view-control button[aria-pressed="true"]:active,
  .live-control[aria-pressed="true"]:active,
  .fallback button:active { background: var(--dark-pressed); }
}

@media (max-width: 520px) {
  .controls { gap: 5px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .finish-palette {
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .view-control button { padding-inline: 13px; }
  .live-control { padding-inline: 11px; }
  .light-control { gap: 7px; }
  input[type="range"] { width: 64px; }
  .divider { margin-inline: 0; }
}

@media (max-width: 390px) {
  .controls { gap: 3px; padding: 5px; max-width: calc(100% - 24px); }
  .view-control { gap: 0; }
  .view-control button { padding-inline: 11px; }
  .live-control { gap: 5px; padding-inline: 8px; }
  .divider { display: none; }
  .light-control { gap: 5px; padding-left: 0; }
  input[type="range"] { width: 46px; }
  .fallback { gap: 12px; padding-left: 18px; }
}

@media (prefers-reduced-transparency: reduce) {
  .controls, .finish-palette {
    background: #e8e8e8;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .controls, .finish-palette { background: #e8e8e8; }
}

@media (forced-colors: active) {
  .controls, .finish-palette, .fallback { border: 1px solid CanvasText; background: Canvas; box-shadow: none; }
  .controls::before, .finish-palette::before { display: none; }
  button { border: 1px solid ButtonText; }
  .view-control { box-shadow: none; }
  .view-control button[aria-pressed="true"], .live-control[aria-pressed="true"] {
    color: HighlightText;
    background: Highlight;
    box-shadow: none;
  }
  input[type="range"] { appearance: auto; -webkit-appearance: auto; }
  .divider { background: CanvasText; }
  .finish-button { width: auto; flex-basis: auto; padding-inline: 10px; }
  .finish-swatch, .finish-button[aria-pressed="true"]::after { display: none; }
  .finish-name { display: inline; }
  .finish-button[aria-pressed="true"] { color: HighlightText; background: Highlight; }
}

#scene { cursor: grab; }
#scene.dragging { cursor: grabbing; }
#scene:focus-visible { outline: 2px solid #246bfe; outline-offset: -4px; }