:root {
  --ink: #eef1f5;
  --muted: #9aa3b0;
  --line: rgba(238, 241, 245, .22);
  --go: #c0201d;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #14161a; color: var(--ink);
  font-family: "Helvetica Neue", "Hiragino Sans", "Yu Gothic", sans-serif;
  letter-spacing: .04em; overflow: hidden;
}
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#fallback { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; }
#fallback[hidden] { display: none; }

.head { position: fixed; top: 0; left: 0; padding: 26px 24px; max-width: 26rem; pointer-events: none; }
@media (min-width: 768px) { .head { padding: 40px 44px; } }
.eyebrow { margin: 0; font-size: .66rem; letter-spacing: .3em; color: var(--muted); }
h1 { margin: 12px 0 0; font-size: clamp(1.3rem, 4.4vw, 2rem); font-weight: 500; line-height: 1.5; }
.note { margin: 12px 0 0; font-size: .8rem; line-height: 1.8; color: var(--muted); max-width: 22rem; }

.ui {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(20,22,26,.94) 40%, rgba(20,22,26,0));
}
@media (min-width: 900px) {
  .ui { right: auto; bottom: 34px; left: 44px; width: auto; background: none; padding: 0; gap: 14px; }
}
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions { gap: 10px; }

.chip, .btn {
  appearance: none; font: inherit; cursor: pointer; color: var(--ink);
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  min-height: 46px; padding: 0 18px; border-radius: 2px;
  font-size: .84rem; letter-spacing: .08em;
  transition: background-color .25s ease, border-color .25s ease;
}
.chip { min-height: 40px; padding: 0 14px; font-size: .78rem; }
.chip:hover, .btn:hover { background: rgba(255,255,255,.13); }
.chip[aria-pressed="true"] { background: var(--ink); color: #14161a; border-color: var(--ink); }
.btn[aria-pressed="true"] { border-color: var(--ink); background: rgba(255,255,255,.18); }
.btn--go[aria-pressed="true"] { background: var(--go); border-color: var(--go); }
.chip:focus-visible, .btn:focus-visible, .swatch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.swatch {
  appearance: none; cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28); padding: 0;
}
.swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }

.hint { margin: 2px 0 0; font-size: .68rem; color: var(--muted); }
@media (max-width: 899px) { .hint { display: none; } }

.disclaimer {
  position: fixed; right: 16px; bottom: 190px; max-width: 17rem; margin: 0;
  font-size: .6rem; line-height: 1.75; color: rgba(154,163,176,.8); text-align: right; pointer-events: none;
}
@media (min-width: 900px) { .disclaimer { bottom: 20px; right: 24px; } }

body:not(.is-ready) .ui, body:not(.is-ready) .head { opacity: 0; }
.ui, .head { transition: opacity .6s ease; }