:root {
  color-scheme: light;
  --paper: #eff3ff;
  --ink: #20213a;
  --accent: #c22a32;
  --muted: #5a6077;
  --line: #d9dded;
  --pale: #fff0f0;
  --surface: #ffffff;
  --blue: #3437c8;
  --yellow: #ffda54;
  --pink: #ffa7ce;
  --font-body: "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-display: Impact, "Arial Narrow", sans-serif;
  font-family: var(--font-body);
  font-size: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.5; }
a { color: inherit; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
[hidden] { display: none !important; }
::selection { color: var(--surface); background: var(--blue); }
.brand { padding-block:8px; }
.brand .brand-logo { display:block; width:220px; height:auto; }
@media(max-width:540px) { .brand .brand-logo { width:180px; } }
.chant { width:min(360px,100%); margin:16px auto 12px; text-align:center; }
.chant .chant-audio { display:block; width:100%; height:44px; border-radius:22px; }
.chant-controls { display:grid; grid-template-columns:44px minmax(0,1fr) auto 44px; grid-template-rows:20px 28px; column-gap:8px; align-items:center; padding:10px; border:1px solid var(--ink); border-radius:10px; background:var(--surface); box-shadow:3px 3px 0 var(--ink); }
.chant .chant-button { display:grid; place-items:center; width:44px; height:44px; min-width:44px; padding:10px; border:0; border-radius:7px; color:var(--blue); background:transparent; }
.chant .chant-button svg { display:block; width:24px; height:24px; }
.chant .chant-toggle { grid-column:1; grid-row:1 / 3; border:1px solid var(--ink); color:var(--ink); background:var(--yellow); }
.chant .chant-toggle:hover:not(:disabled) { background:#ffe77c; }
.chant .chant-button:disabled { opacity:.45; }
.chant-title { grid-column:2 / 4; grid-row:1; min-width:0; overflow:hidden; color:var(--ink); font-size:12px; font-weight:750; line-height:20px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.chant-seek { grid-column:2; grid-row:2; display:block; width:100%; min-width:0; height:28px; margin:0; accent-color:var(--blue); cursor:pointer; }
.chant-seek:disabled { cursor:default; opacity:.45; }
.chant-time { grid-column:3; grid-row:2; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; line-height:28px; white-space:nowrap; }
.chant .chant-mute { grid-column:4; grid-row:1 / 3; }
.chant .chant-mute:hover { background:var(--paper); }
.chant .chant-mute[aria-pressed="true"] { color:var(--muted); background:var(--paper); }
.chant-muted-mark { display:none; }
.chant-mute[aria-pressed="true"] .chant-muted-mark { display:block; }
.chant-mute[aria-pressed="true"] .chant-sound-wave { display:none; }
.chant .chant-status { margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
.chant-source { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 10px; color:var(--blue); font-size:11px; text-decoration:underline; text-underline-offset:4px; }

.chant-volume { display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; }
.chant-volume input { width:130px; height:44px; accent-color:var(--blue); }