:root {
  --bg: #08060a;
  --ink: #f4efe9;
  --dim: rgba(244, 239, 233, 0.55);
  --hot: #ff4d2e;
  --t: clamp(44px, 14vw, 220px); /* size of the big title; the tagline is placed relative to it */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 500 16px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: lowercase;
  overflow: hidden;
  touch-action: none; /* fingers fly and shape the sound; the browser must not scroll or zoom the page */
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* Two layers: the screams as fog (blurred), and the fine lines that surface when one sounds (sharp). */
canvas.fog, canvas.sharp { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas.fog { filter: blur(var(--fog, 30px)); }
canvas.sharp, #grain { pointer-events: none; }
/* The scope floats over whichever picture is showing; scope.js sizes it and seats it above the controls. */
#scope { position: fixed; left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; background: rgba(8, 6, 10, 0.35); transition: opacity 0.6s ease; /* the same fade as the controls */ }
#grain {
  position: fixed; inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#intro {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: clamp(28px, 7vh, 72px);
  padding: 24px clamp(20px, 5vw, 96px);
}
.title { width: fit-content; }
.invite { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
/* When the buttons do not fit on one line, the wrapped rows stay centred too. */
.invite .actions { justify-content: center; }
.invite, .rules { transition: opacity 0.9s ease; }
#intro h1 { transition: filter 1.2s ease, opacity 1.2s ease; }

/* Once you are listening the title steps out of the picture entirely. */
#intro.gone { pointer-events: none; }
#intro.gone .invite, #intro.gone .rules { opacity: 0; }
#intro.gone h1 { opacity: 0; }
/* Behind the booth it comes back at full strength; the booth's own blur turns it into a glow. */
body.in-booth #intro h1 { filter: none; opacity: 1; }

h1 {
  margin: 0;
  font-size: var(--t);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.06em;
  mix-blend-mode: difference;
}

h2 { margin: 0 0 12px; font-size: clamp(32px, 6vw, 56px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }

p { margin: 0; max-width: 34em; }
#count { font-size: clamp(17px, 2.2vw, 24px); max-width: 26em; text-wrap: balance; color: var(--dim); }
.note { color: var(--dim); font-size: 14px; }

/* The tagline sits in the notch the p's descender leaves under the rest of the word. */
.rules {
  margin: calc(var(--t) * 0.035) 0 0 calc(var(--t) * 0.27);
  max-width: calc(var(--t) * 5.3);
  font-size: clamp(16px, calc(var(--t) * 0.15), 34px);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

button, a.btn {
  font: inherit; text-transform: inherit; color: var(--ink);
  background: rgba(8, 6, 10, 0.6);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
button:hover, a.btn:hover { background: var(--ink); color: var(--bg); }
a.btn { display: inline-block; text-decoration: none; }
button:active { transform: scale(0.97); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
button.primary, a.btn.primary { background: var(--hot); border-color: var(--hot); color: var(--bg); font-weight: 700; }
button.primary:hover, a.btn.primary:hover { background: var(--ink); border-color: var(--ink); }
button.quiet { border-color: transparent; background: none; color: var(--dim); padding: 11px 8px; }
button.quiet:hover { color: var(--ink); background: none; }
button:disabled { opacity: 0.5; cursor: default; }

#bar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 16px 20px;
}
/* The name, top left, is also the way to the about screen. */
#bar .mark, #bar .mark:hover { font-weight: 900; letter-spacing: -0.03em; font-size: 16px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); cursor: pointer; }
#title { cursor: pointer; }

/* The readout: three small instrument labels, each of which explains itself on hover or tap. */
/* Explanations hang below the whole group of labels, never over any of them. */
.hud { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.chip {
  display: flex; gap: 8px;
  padding: 6px 9px;
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: rgba(8, 6, 10, 0.55);
  border: 1px solid rgba(244, 239, 233, 0.22);
  border-radius: 2px;
}
.chip:hover, .chip:focus { background: rgba(8, 6, 10, 0.55); color: var(--ink); border-color: var(--ink); }
.chip:active { transform: none; }
.chip .k { color: var(--dim); }
.chip .tip {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(270px, 80vw);
  padding: 10px 12px;
  font: 500 13px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: lowercase; letter-spacing: 0; text-align: left;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid rgba(244, 239, 233, 0.35);
  border-radius: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s;
}
.chip:hover .tip, .chip:focus .tip { opacity: 1; visibility: visible; }

#panel {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  font-size: 13px; color: var(--dim);
  background: linear-gradient(transparent, rgba(8, 6, 10, 0.85));
}
#panel, .hud { transition: opacity 0.6s ease; }
/* Left alone for a few seconds, the controls sink back; any movement or tap brings them up. */
body.quiet #panel, body.quiet .hud { opacity: 0.12; }

/* Dials: the same instrument labels as the readout, but you drag them. Right or up is more. */
.dials { display: flex; flex-wrap: wrap; gap: 6px; }
.dial, .switch {
  position: relative; overflow: hidden;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  min-width: 118px; padding: 10px 11px;
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink);
  background: rgba(8, 6, 10, 0.55);
  border: 1px solid rgba(244, 239, 233, 0.22);
  border-radius: 2px;
  cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none;
}
.dial::before, .switch::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 50%);
  background: rgba(244, 239, 233, 0.13);
  border-right: 1px solid var(--ink);
}
.dial > *, .switch > * { position: relative; pointer-events: none; }
.dial .k, .switch .k { color: var(--dim); }
.dial input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; }
.dial:hover, .dial:focus-within { border-color: var(--ink); }
/* A switch looks like a dial but is pressed, not dragged: filled when on, empty when off. */
button.switch, button.switch:hover { cursor: pointer; color: var(--ink); background: rgba(8, 6, 10, 0.55); }
button.switch:hover { border-color: var(--ink); }
button.switch:active { transform: none; }
.dial:focus-within { outline: 2px solid var(--hot); outline-offset: 2px; }
/* The picture slider runs the full width of the screen: terminal at one end, tunnel at the other. */
.dial.wide { flex-basis: 100%; order: 9; padding: 9px 11px; }
#panel #invite { margin-left: auto; }

#mine { position: relative; }
#sheet {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: min(300px, 86vw);
  padding: 16px;
  font-size: 14px; color: var(--ink);
  background: var(--bg);
  border: 1px solid rgba(244, 239, 233, 0.35);
  border-radius: 14px;
}
#sheet > div { display: flex; flex-wrap: wrap; gap: 10px; }
#sheet #sheet-hide { position: absolute; top: 6px; right: 8px; padding: 6px 8px; font-size: 13px; }
#sheet h3 { padding-right: 48px; } /* room for the hide button */
/* Once you have found your scream, its button says so quietly instead of opening anything. */
#mine-toggle.found { border-color: var(--hot); }
#mine-toggle.found::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--hot); vertical-align: 1px; }
#sheet h3 { margin: 0; flex-basis: 100%; font-size: 20px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
#sheet p { flex-basis: 100%; color: var(--dim); }
#sheet button { padding: 8px 14px; font-size: 14px; }


/* The first-visit walk-through: one part of the screen stays lit, a card beside it says what it is. */
#tour { position: fixed; inset: 0; pointer-events: none; }
/* A step with nothing left to point at just dims the whole screen. */
#tour-hole.none { border-color: transparent; }
#tour-hole {
  position: fixed;
  border: 1px solid rgba(244, 239, 233, 0.7);
  border-radius: 6px;
  box-shadow: 0 0 0 200vmax rgba(8, 6, 10, 0.74);
  transition: left 0.4s ease, top 0.4s ease, width 0.4s ease, height 0.4s ease;
}
#tour-card {
  position: fixed;
  width: min(330px, calc(100vw - 32px));
  display: grid; gap: 10px;
  padding: 16px;
  background: rgba(8, 6, 10, 0.97);
  border: 1px solid rgba(244, 239, 233, 0.3);
  border-radius: 14px;
  pointer-events: auto;
  transition: left 0.4s ease, top 0.4s ease;
}
#tour-card h3 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; }
#tour-card .note { font: 500 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
#tour-card button { padding: 9px 18px; }
/* A list of gestures: what your hand does on the left, what happens on the right. */
#tour-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: baseline; }
#tour-list dt { font: 500 10px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hot); white-space: nowrap; }
#tour-list dd { margin: 0; font-size: 13.5px; line-height: 1.3; }
/* While being shown around, the controls do not sink back. */
body.touring #panel, body.touring .hud { opacity: 1; }

#booth, #about, #colophon {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(8, 6, 10, 0.88);
  backdrop-filter: blur(14px);
}
.card { position: relative; width: min(100%, 520px); padding-top: 40px; }
.card > div { display: none; flex-direction: column; align-items: flex-start; gap: 16px; }
.card[data-step="ready"] [data-step="ready"],
.card[data-step="recording"] [data-step="recording"],
.card[data-step="review"] [data-step="review"],
.card[data-step="problem"] [data-step="problem"] { display: flex; }
#close { position: absolute; top: 0; right: 0; }

.card[data-step="countdown"] [data-step="countdown"] { display: flex; }

/* The three things about to happen, one line each, arriving one after another. */
.plan { margin: 0; padding: 0; list-style: none; }
.plan li {
  font-size: clamp(22px, 5.6vw, 36px); font-weight: 900; letter-spacing: -0.035em; line-height: 1.12;
  white-space: nowrap;
  color: var(--dim);
  animation: arrive 0.5s ease both;
}
.plan li:nth-child(2) { animation-delay: 0.45s; }
.plan li:nth-child(3) { animation-delay: 0.9s; }
.plan b { color: var(--ink); font-weight: inherit; }
.plan li:last-child b { color: var(--hot); }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } }

.huge { font-size: clamp(120px, 30vw, 220px); font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; }

/* While recording, --level (0 to 1) follows the microphone: the word and the room react to you. */
/* The about screen: the name, its version, and where to find the person who made it. */
.colophon-card { display: grid; justify-items: center; gap: 14px; text-align: center; }
.colophon-card h2 { margin: 0; font-size: clamp(40px, 11vw, 96px); letter-spacing: -0.05em; }
.colophon-card .readout { margin-bottom: 14px; font: 500 11px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }

/* The about text is long, so on a small screen the panel scrolls instead of being cut off. */
#about { display: block; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.about-card { width: min(100%, 560px); margin: max(28px, 9vh) auto; display: grid; gap: 16px; justify-items: start; }
.about-card p { color: var(--dim); max-width: none; }
.about-card .lead { color: var(--ink); font-size: clamp(19px, 2.6vw, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }

#booth { box-shadow: inset 0 0 calc(var(--level, 0) * 260px) rgba(255, 77, 46, 0.55); }
.shout {
  font-size: clamp(64px, 19vw, 124px);
  color: var(--hot);
  transform-origin: left center;
  transform: scale(calc(1 + var(--level, 0) * 0.18));
}
.live::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--hot); }
.timebar { width: 100%; height: 6px; border-radius: 999px; background: rgba(244, 239, 233, 0.18); overflow: hidden; }
.timebar i { display: block; height: 100%; width: 100%; background: var(--ink); }

#wave { width: 100%; height: 72px; display: block; }

@media (max-width: 560px) {
  #panel #invite { margin-left: 0; }
  .dials { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .dial { min-width: 0; }
  /* On a phone the "my scream" card spans the screen and sits above all the controls,
     instead of hanging off its button and running out of the left edge. */
  #mine { position: static; }
  #sheet { left: 16px; right: 16px; width: auto; bottom: calc(100% - 4px); }
}

@media (prefers-reduced-motion: reduce) {
  #intro h1, .invite, .rules, button, #tour-hole, #tour-card { transition: none; }
  .plan li { animation: none; }
}

/* The cloud is the third stop on the picture bar; picture.js fades it in and the other two out. */
.cloud-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }