:root { color-scheme: dark; background: #000; color: #fff; }
* { box-sizing: border-box; }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #000; font-family: system-ui, sans-serif; }
main { position: relative; min-height: 100svh; }
canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.controls {
  position: absolute; z-index: 2; bottom: calc(46px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); width: min(320px, calc(100% - 32px)); padding: 12px;
  border: 1px solid #2b2b31; border-radius: 22px; background: #0b0b0ef5;
}
.face-label { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; color: #dddde5; font-size: 13px; }
.face-label output { color: #fff; font-variant-numeric: tabular-nums; }
.face-control input { display: block; width: 100%; height: 44px; margin: 0 0 8px; accent-color: #ededf3; cursor: pointer; color: #fff; background: #24242b; }
.face-control input:focus-visible { outline: 2px solid #d4b2ff; outline-offset: 2px; border-radius: 6px; }
.face-control input:disabled { accent-color: #898993; cursor: default; }
.liquid-styles { display: flex; gap: 4px; }
.liquid-styles button {
  appearance: none; flex: 1; min-height: 44px; min-width: 0; padding: 0 12px;
  border: 1px solid transparent; border-radius: 999px; background: #111115;
  color: #b9b9c2; font: 500 13px/1 system-ui, sans-serif; cursor: pointer; white-space: nowrap;
  transition: background 160ms, color 160ms;
}
.liquid-styles button:hover { background: #25252c; color: #fff; }
.liquid-styles button[aria-pressed="true"] { background: #ededf3; color: #101014; }
.liquid-styles button:focus-visible { outline: 2px solid #d4b2ff; outline-offset: 3px; }
.liquid-styles button:disabled { background: #151518; color: #898993; cursor: default; }
@media (max-height: 520px) and (min-width: 580px) {
  .controls { display: flex; gap: 20px; align-items: center; width: 560px; }
  .face-control { width: 200px; }
  .face-control input { margin-bottom: 0; }
  .liquid-styles { flex: 1; }
}
#error, noscript {
  position: absolute; z-index: 3; top: calc(20px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); padding: 10px 14px;
  border: 1px solid #39333f; border-radius: 8px; background: #14121f; color: #f1eaff;
  font: 13px/1.5 system-ui, sans-serif; text-align: center;
}
[hidden] { display: none !important; }