@property --bg { syntax: '<color>'; inherits: true; initial-value: #070708; }
@property --fg { syntax: '<color>'; inherits: true; initial-value: #d4b36a; }

:root {
  --lacquer: #070708;
  --gold: #d4b36a;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --sans: "Jost", "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --gut: clamp(10px, 2.2vmin, 22px);
  --ft: max(var(--gut), env(safe-area-inset-top));
  --fs: max(var(--gut), env(safe-area-inset-left), env(safe-area-inset-right));
  --fb: max(calc(var(--gut) + 18px), calc(env(safe-area-inset-bottom) + 22px));

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  --bg: var(--lacquer);
  --fg: var(--gold);
  background: var(--bg);
  color: var(--fg);
  transition: --bg .2s ease-out, --fg .2s ease-out;
  font-family: var(--sans);
  font-size: 16px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- The label: frame, wordmark, lacquer shine ---------- */

.frame {
  position: fixed;
  inset: var(--ft) var(--fs) var(--fb);
  border: 5px double currentColor;
  border-radius: 4px;
  opacity: .5;
  pointer-events: none;
}

.gloss {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(118deg,
    transparent 0 31%,
    rgb(255 255 255 / .028) 31% 44%,
    transparent 44% 57%,
    rgb(255 255 255 / .02) 57% 59.5%,
    transparent 59.5%);
}

.mark {
  position: fixed;
  top: var(--ft);
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  padding: 0 .7em;
  background: var(--bg);
  font: italic 500 clamp(1.35rem, 3.4vmin, 2rem)/1 var(--serif);
  font-variation-settings: "opsz" 14;
  letter-spacing: .01em;
  white-space: nowrap;
  z-index: 2;
}
.mark::before, .mark::after {
  content: "";
  display: inline-block;
  width: .26em;
  height: .26em;
  background: currentColor;
  rotate: 45deg;
  vertical-align: .2em;
  margin: 0 .55em;
}

/* ---------- Layout ---------- */

.stage {
  position: fixed;
  inset: var(--ft) var(--fs) var(--fb);
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(1.4rem, 4vmin, 2.4rem) clamp(1rem, 3vmin, 2rem) 2.6rem;
}

.settings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: .95rem;
}
.ref, .opts { display: flex; align-items: center; gap: .35rem; }

.nudge {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, currentColor 45%, transparent);
  font-size: 1.05rem;
  line-height: 1;
}
.refval, .opt {
  padding: .3rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
}
.refval b, .opt b {
  font: italic 500 1.35em/1 var(--serif);
  font-variation-settings: "opsz" 8;
  font-variant-numeric: lining-nums;
}
.refval .eq { opacity: .6; }
.opt { opacity: .85; }
.opt svg { width: .62em; height: 1.4em; fill: currentColor; vertical-align: -.35em; }

@media (hover: hover) {
  .nudge:hover, .refval:hover, .opt:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
}

.readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 0;
}
.readout[hidden] { display: none; }

/* ---------- The big glyph ---------- */

.big {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: "opsz" 16;
  font-size: clamp(7rem, 36vmin, 22rem);
  line-height: .9;
  font-variant-numeric: lining-nums;
  transition: scale .25s cubic-bezier(.3, 1.6, .5, 1);
}
body.locked .big { scale: 1.04; }

.note {
  display: inline-flex;
  align-items: flex-start;
}
.note .acc {
  width: .2em;
  height: .5em;
  fill: currentColor;
  margin: .02em 0 0 .05em;
}
.note sub {
  align-self: flex-end;
  font: 400 .16em/1 var(--sans);
  margin: 0 0 .5em .12em;
  vertical-align: baseline;
}
.acc-i {
  width: .42em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.12em;
  margin-left: .04em;
}

.note.inline { font-size: 1.35em; font-family: var(--serif); font-style: italic; }
.note.inline sub { font-size: .55em; margin-bottom: .1em; }
.note.inline .acc { height: .7em; }

.hz {
  font-style: italic;
  font-size: min(1em, 21vw);
  letter-spacing: -.02em;
}
.big .dash { opacity: .5; }
.unit {
  font: 400 .14em/1 var(--sans);
  margin-left: .3em;
  vertical-align: .2em;
}

.sub {
  margin: .9rem 0 0;
  font-size: clamp(1rem, 2.6vmin, 1.35rem);
  min-height: 1.6em;
}
.sub b {
  font: italic 500 1.5em/1 var(--serif);
  font-variation-settings: "opsz" 10;
  font-variant-numeric: lining-nums;
  margin-right: .2em;
}
.sub .sgn { font: 400 .8em/1 var(--sans); margin-right: .06em; vertical-align: .12em; }
.sub .word { margin-left: .5em; }
.sub .hint { display: block; margin-top: .35em; font-size: .8em; opacity: .75; }

.foot {
  margin: .4rem 0 0;
  font-size: .95rem;
  opacity: .75;
  min-height: 1.5em;
}

.reading { width: 100%; transition: opacity .35s; }
body[data-state="hold"] .reading { opacity: .38; }

/* ---------- Cent ruler ---------- */

.ruler {
  --c: 0;
  --tol: 5;
  position: relative;
  width: min(34rem, calc(100% - 4.5rem));
  height: 3.4rem;
  margin: 1.5rem auto .4rem;
}
.ticks { position: absolute; inset: 0; }
.tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 28%;
  background: currentColor;
  opacity: .55;
  translate: -50% -50%;
}
.tick.major { height: 56%; opacity: .85; }
.tick.zero { width: 2px; height: 86%; opacity: 1; }
.band {
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 50%;
  width: calc(var(--tol) * 2%);
  translate: -50% 0;
  background: currentColor;
  opacity: .16;
  border-radius: 2px;
}
.needle {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: calc(50% + var(--c) * 1%);
  width: 3px;
  translate: -50% 0;
  background: currentColor;
  transition: left .09s linear;
  opacity: 0;
}
.needle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: .7rem;
  height: .7rem;
  background: currentColor;
  translate: -50% -50%;
  rotate: 45deg;
}
body[data-state="live"] .needle,
body[data-state="hold"] .needle { opacity: 1; }
.needle.over::before { width: .9rem; height: .9rem; }

.end {
  position: absolute;
  top: 50%;
  width: .8rem;
  height: 2rem;
  translate: 0 -50%;
  fill: currentColor;
  opacity: .8;
}
.end-l { left: -2rem; }
.end-r { right: -2rem; }

/* ---------- Mic gate ---------- */

.gate { display: none; margin-top: 1.8rem; }
body.needs-mic .gate { display: block; }
body.needs-mic .ruler, body.needs-mic .foot { display: none; }

.mic, .play {
  padding: .95rem 2.2rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 1.05rem;
  font-weight: 500;
}
.gate-msg {
  margin: 1rem auto 0;
  max-width: 26em;
  font-size: .92rem;
  line-height: 1.6;
  opacity: .8;
  user-select: text;
}

/* ---------- Tone mode ---------- */

.fork {
  width: clamp(1.4rem, 5vmin, 2.6rem);
  height: auto;
  fill: currentColor;
  margin-bottom: clamp(.6rem, 2vmin, 1.4rem);
  transform-origin: 50% 95%;
}
body.playing .fork { animation: hum .05s linear infinite alternate; }
@keyframes hum {
  from { translate: -.6px 0; }
  to   { translate: .6px 0; }
}

.hzbig { line-height: .9; }

.tone-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 1.4rem;
  margin: 1.6rem 0 1.8rem;
}

.seg, .modes { display: flex; gap: .15rem; }
.seg button, .modes button {
  padding: .5rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 500;
}
.seg button[aria-checked="true"],
.modes button[aria-selected="true"] {
  background: var(--fg);
  color: var(--bg);
}
@media (hover: hover) {
  .seg button:not([aria-checked="true"]):hover,
  .modes button:not([aria-selected="true"]):hover {
    background: color-mix(in oklab, currentColor 12%, transparent);
  }
}

/* ---------- Mode tabs, sitting on the bottom rule ---------- */

.modes {
  position: fixed;
  bottom: var(--fb);
  left: 50%;
  translate: -50% 50%;
  padding: 0 .5rem;
  background: var(--bg);
  z-index: 2;
}

/* ---------- Mode visibility ---------- */

body[data-mode="tone"] #tolBtn,
body:not([data-mode="chroma"]) #accBtn { display: none; }

/* ---------- Small screens ---------- */

@media (max-width: 520px) {
  .settings { font-size: .88rem; }
  .nudge { width: 1.7rem; height: 1.7rem; }
  .seg button, .modes button { padding: .5rem .8rem; }
  .modes { padding: 0 .25rem; }
}
@media (max-width: 380px) {
  .modes button { padding: .45rem .6rem; font-size: .9rem; }
}
@media (max-height: 560px) {
  .big { font-size: clamp(5rem, 30vmin, 12rem); }
  .ruler { margin-top: .8rem; height: 2.6rem; }
  .fork { display: none; }
  .tone-controls { margin: .8rem 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  body, .needle, .big, .reading { transition: none; }
  body.playing .fork { animation: none; }
}