[hidden] { display: none !important; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --ink: #0f1630; --starlight: #eef0f8; --rose: #e8a49c; --haze: #9aa3c2; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05081a; color: var(--starlight); font: 400 16px/1.5 "Hanken Grotesk", system-ui, sans-serif;
  overflow: hidden; overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; }
#cam, #overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; }
#cam { object-fit: cover; }
#cam.off { display: none; }
body.red #overlay { filter: sepia(1) saturate(6) hue-rotate(-40deg) brightness(0.75); }
body.red #cam { filter: brightness(0.5) sepia(1) saturate(4) hue-rotate(-40deg); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

#hud .top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: calc(env(safe-area-inset-top) + 0.7rem) 1rem 0.7rem; background: linear-gradient(rgba(5, 8, 26, 0.75), transparent); }
.wordmark { font: 600 1.1rem "Bodoni Moda", Georgia, serif; color: var(--starlight); text-decoration: none; }
.status { font-size: 0.8rem; color: var(--haze); text-align: right; }
#hud .bottom { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 1rem 1rem calc(env(safe-area-inset-bottom) + 1rem); background: linear-gradient(transparent, rgba(5, 8, 26, 0.75)); }
.pill { font: 500 0.9rem "Hanken Grotesk", system-ui, sans-serif; color: var(--starlight); background: rgba(15, 22, 48, 0.72);
  border: 1px solid rgba(238, 240, 248, 0.25); border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pill[aria-pressed="true"] { border-color: var(--rose); color: var(--rose); }
.target { position: fixed; top: calc(env(safe-area-inset-top) + 3.4rem); left: 50%; transform: translateX(-50%); font-size: 0.9rem; text-align: center;
  background: rgba(15, 22, 48, 0.72); border: 1px solid rgba(232, 164, 156, 0.5); color: var(--rose); padding: 0.4rem 0.9rem; border-radius: 999px; max-width: calc(100% - 2rem); }
.sheet { position: fixed; left: 1rem; right: 1rem; bottom: calc(env(safe-area-inset-bottom) + 4.5rem); background: rgba(15, 22, 48, 0.92); border-radius: 14px;
  padding: 1rem 1.1rem; font-size: 0.9rem; max-width: 26rem; margin: 0 auto; }
.sheet p { margin: 0 0 0.7rem; color: #c9cee3; }
.sheet label { display: flex; justify-content: space-between; font-weight: 600; margin-top: 0.6rem; }
.sheet input[type=range] { width: 100%; accent-color: var(--rose); }
.sheet .pill { margin-top: 0.8rem; }

.start { position: fixed; inset: 0; display: grid; place-items: end center; padding: 2rem 1.25rem calc(env(safe-area-inset-bottom) + 2.5rem);
  background: radial-gradient(120% 80% at 70% 100%, #2a3566 0%, var(--ink) 60%); z-index: 5; }
.start-inner { max-width: 26rem; }
.brand { font: 600 1.1rem "Bodoni Moda", Georgia, serif; color: var(--rose); margin: 0 0 1.5rem; }
.start h1 { font: 500 clamp(2.4rem, 11vw, 3.4rem)/1.05 "Bodoni Moda", Georgia, serif; margin: 0 0 1rem; }
.start p { color: #c9cee3; }
.go { width: 100%; margin: 1rem 0; padding: 1rem; border: 0; border-radius: 999px; background: var(--rose); color: var(--ink); font: 600 1.05rem "Hanken Grotesk", system-ui, sans-serif; cursor: pointer; }
.small { font-size: 0.82rem; color: var(--haze) !important; }
.error { color: var(--rose); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; }
.wordmark .mark { height: 1.45em; width: auto; flex: none; }
.brand .mark { height: 1.4em; width: auto; vertical-align: -0.35em; margin-right: 0.5rem; color: var(--starlight); }