:root {
  color-scheme: light;
  --text: #505b49;
  --muted: #69715f;
  --accent: #697c59;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  padding: 36px 24px 28px;
  background: #f8f5ef;
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
.app { width: min(100%, 960px); margin: auto; text-align: center; }
.heading { margin-bottom: 24px; }
.eyebrow { margin: 0; font-size: 15px; letter-spacing: .15em; color: var(--muted); }
h1 {
  position: relative;
  width: fit-content;
  margin: 10px auto;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 500;
  letter-spacing: .13em;
}
h1 span { position: absolute; right: -30px; top: -8px; color: #a18c56; font-size: 26px; }
.intro { margin: 0; font-size: 17px; letter-spacing: .12em; }
.scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 330px;
  max-height: 600px;
  background: #f5f2e4;
  border: 1px solid #e5e3d3;
  border-radius: 100px 100px 28px 28px;
}
.scene-art { position: absolute; width: 100%; height: auto; bottom: 0; left: 0; pointer-events: none; }
.hourglass {
  position: absolute;
  z-index: 1;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  max-width: 330px;
  padding: 0;
  border: 0;
  border-radius: 45%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hourglass::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: 3%; height: 4%; background: #786b4930; border-radius: 50%; filter: blur(6px); }
canvas { display: block; width: 100%; height: auto; }
.hourglass:hover { filter: brightness(1.035); }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #697c59; outline-offset: 5px; }
.flip-hint { margin: 18px 0 0; font-size: 16px; color: #5c6b4b; }
.flip-hint span { margin-right: 7px; font-size: 24px; vertical-align: -2px; }
.controls { max-width: 500px; margin: 22px auto 0; }
.control-row { display: flex; align-items: center; gap: 18px; font-size: 17px; }
input[type="range"] { flex: 1; min-width: 0; min-height: 32px; margin: 0; accent-color: var(--accent); cursor: pointer; }
#particleCountValue { min-width: 44px; font-variant-numeric: tabular-nums; }
.buttons { display: flex; gap: 14px; margin-top: 18px; }
.buttons button { flex: 1; min-height: 52px; padding: 12px 8px; border: 1px solid #cfd4c4; border-radius: 30px; background: #fcfaf5; color: var(--text); font: inherit; font-size: 17px; cursor: pointer; }
.buttons button:last-child { background: var(--accent); border-color: var(--accent); color: #fffdf6; }
.buttons button:hover { filter: brightness(.95); }
.buttons span { margin-left: 6px; font-size: 21px; }
.settings-note { margin: 12px 0; color: var(--muted); font-size: 15px; }
.diagnostics { margin-top: 16px; font-size: 15px; color: var(--muted); }
.diagnostics summary { cursor: pointer; padding: 4px; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 12px 0; }
footer { margin-top: 26px; font-size: 15px; color: var(--muted); letter-spacing: .06em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  body { padding: 28px 16px 24px; }
  .scene { border-radius: 70px 70px 24px 24px; }
  .scene-art { mask-image: linear-gradient(transparent, #000 15%); }
  .hourglass { width: 43%; bottom: 3%; }
  .intro { font-size: 16px; }
  .buttons { gap: 10px; }
  .buttons button { font-size: 16px; }
  .control-row { gap: 12px; }
}

.neck-control { margin-top: 16px; }
#neckWidthValue { min-width: 44px; font-variant-numeric: tabular-nums; }