@font-face {
  font-family: "Marcellus";
  src: url("fonts/marcellus-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #160e0b;
  --ink: #f4e7d4;
  --soft: #cdb89c;
  --amber: #f0b66a;
  --line: rgb(244 231 212 / 34%);
  --pad: max(1rem, env(safe-area-inset-left));
  --pad-r: max(1rem, env(safe-area-inset-right));
  --pad-t: max(1rem, env(safe-area-inset-top));
  --pad-b: max(1rem, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.4 "Marcellus", "Iowan Old Style", Georgia, serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--bg);
  touch-action: none;
  cursor: grab;
  outline: none;
}

#scene.drag { cursor: grabbing; }

#scene:focus-visible { box-shadow: inset 0 0 0 3px var(--amber); }

.title {
  position: fixed;
  top: var(--pad-t);
  left: var(--pad);
  max-width: min(26rem, calc(100% - 2rem));
  pointer-events: none;
  z-index: 1;
}

h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: .06em;
  text-wrap: balance;
}

.title p {
  margin: .35rem 0 0;
  color: var(--soft);
  font-size: .95rem;
  letter-spacing: .02em;
  text-wrap: pretty;
}

.controls {
  position: fixed;
  left: var(--pad);
  bottom: var(--pad-b);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  z-index: 1;
}

button {
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(30 20 15 / 72%);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

button[aria-pressed]::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin: 0 .55rem .1rem 0;
  border: 1px solid var(--soft);
  border-radius: 50%;
  vertical-align: middle;
}

button[aria-pressed="true"]::before { background: var(--amber); border-color: var(--amber); }

button:active { background: rgb(240 182 106 / 22%); }

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

#ko {
  position: fixed;
  right: var(--pad-r);
  bottom: var(--pad-b);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 2.75rem;
  padding: 0 .9rem;
  border-radius: 999px;
  color: var(--soft);
  background: rgb(22 14 11 / 70%);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  z-index: 1;
}

#ko svg { width: 2.2em; height: auto; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.msg {
  position: fixed;
  inset: auto 1rem 45% 1rem;
  margin: 0 auto;
  max-width: 30rem;
  text-align: center;
  color: var(--ink);
}

.embed .title, .embed .controls, .embed #ko { display: none; }

@media (hover: hover) {
  button:hover { background: rgb(240 182 106 / 16%); border-color: var(--amber); }
  #ko:hover { color: var(--ink); }
}

@media (max-width: 34em) {
  .controls { bottom: calc(var(--pad-b) + 3.25rem); left: 50%; transform: translateX(-50%); justify-content: center; width: max-content; max-width: calc(100% - 2rem); }
  #ko { right: 50%; transform: translateX(50%); }
  .title p { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}