:root {
  --page: #0f0c09; --stage: #000; --card: #17120d; --raise: #1f1810; --rule: #30261a; --rule2: #4a3c2a;
  --ivory: #f3e9d3; --mute: #a29480; --gold: #f2a533; --gold-hi: #ffc15e; --gold-ink: #1b1206; --err: #ff8a6b;
  --dev: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Kohinoor Devanagari', 'Mukta', 'Nirmala UI', serif;
  --ui: 'Hind', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--ivory); font: 400 16px/1.5 var(--ui); overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
a { color: inherit; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.boot { padding: 3rem 1rem; color: var(--mute); text-align: center; }
code { font: 0.9em ui-monospace, Menlo, monospace; color: var(--gold-hi); }

/* ---------- buttons & controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--rule2); border-radius: 999px; background: transparent; color: var(--ivory); font: 500 .95rem var(--ui); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--gold); }
.btn.sm { min-height: 36px; padding: 0 .8rem; font-size: .85rem; }
.btn.quiet { border-color: transparent; color: var(--mute); }
.btn.quiet:hover { color: var(--ivory); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 600; }
.btn.icon { width: 48px; padding: 0; font-size: 1.1rem; }
.btn svg { display: block; }
.btn.play { width: 64px; height: 64px; padding: 0; border-radius: 50%; background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-size: 1.35rem; }
.btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-hi); }
.btn:disabled { opacity: .4; cursor: default; }
.seg { display: inline-flex; border: 1px solid var(--rule2); border-radius: 999px; overflow: hidden; }
.seg button { min-height: 40px; padding: 0 .95rem; border: 0; background: transparent; color: var(--mute); font: 500 .9rem var(--ui); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule2); }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }
select, input[type=number] { min-height: 40px; background: var(--raise); color: var(--ivory); border: 1px solid var(--rule2); border-radius: 8px; padding: 0 .6rem; font: 400 .95rem var(--ui); }
input.n { width: 5.2em; min-height: 34px; }
input[type=range] { accent-color: var(--gold); min-height: 32px; }
.chk { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; }
.chk input { width: 20px; height: 20px; accent-color: var(--gold); }
.grow { flex: 1; }
.hint { color: var(--mute); font-size: .92rem; }
.notice { padding: .8rem 1rem; border: 1px solid var(--rule2); border-radius: 8px; background: var(--card); }
.notice.inline { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.untimed { margin: 0 1rem .6rem; }
.notice.err { border-color: var(--err); }
.notice.wide { max-width: 34rem; margin: 20vh auto; display: grid; gap: 1rem; justify-items: start; }
.why { color: var(--mute); font-size: .85rem; }
.empty { color: var(--mute); padding: 2rem 0; }

/* ---------- home ---------- */
.home { max-width: 62rem; margin: 0 auto; padding: clamp(2rem, 8vw, 5rem) 1rem 2rem; }
.hero { display: grid; gap: 1.1rem; margin-bottom: clamp(2rem, 6vw, 4rem); }
.mark { font: 400 clamp(5rem, 20vw, 11rem)/1.15 var(--dev); letter-spacing: .01em; padding: .22em .05em .28em; margin: -.22em 0 -.28em; width: fit-content;
  background-image: linear-gradient(90deg, var(--gold) 0 55%, var(--ivory) 66% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lede { max-width: 30rem; color: var(--mute); font-size: 1.1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.2rem; }
.card { display: flex; gap: 1.4rem; align-items: center; padding: 1.4rem; background: var(--card); border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; }
.card:hover { border-color: var(--gold); }
.disc { flex: none; width: clamp(84px, 22vw, 124px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: repeating-radial-gradient(circle, #0a0806 0 2px, #1c1610 2px 3px); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--rule); }
.disc .label { width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--gold); display: grid; place-items: center; overflow: hidden; position: relative; }
.disc .label img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.disc .yr { position: relative; font: 400 clamp(.7rem, 2vw, .9rem) var(--dev); color: var(--gold-ink); }
.disc .label img + .yr { display: none; }
.meta { display: grid; gap: .25rem; min-width: 0; }
.t-dev { font: 400 clamp(1.7rem, 5vw, 2.2rem)/1.35 var(--dev); }
.t-rom { font: italic 400 1.1rem var(--dev); color: var(--gold-hi); }
.film { color: var(--mute); margin-bottom: .4rem; }
.people { display: grid; gap: .1rem; font-size: .92rem; }
.people i { color: var(--mute); font-style: italic; margin-right: .4em; }
.credit { padding: 2rem 1rem; color: var(--mute); font-size: .85rem; display: grid; gap: .3rem; }
.home .credit { padding-left: 0; }

/* ---------- song view ---------- */
.song { display: flex; flex-direction: column; min-height: 100vh; }
.bar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; }
.back { text-decoration: none; color: var(--mute); padding: .5rem .2rem; min-height: 44px; display: inline-flex; align-items: center; }
.back::before { content: '‹'; margin-right: .4em; font-size: 1.3em; }
.ttl { min-width: 0; flex: 1; }
.ttl h1 { font: 400 1.5rem/1.3 var(--dev); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttl p { color: var(--mute); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-r { display: flex; gap: .2rem; }
.stage-x { display: none; }
.stagebox { position: relative; background: var(--stage); border-block: 1px solid var(--rule); height: clamp(300px, 56vh, 660px); }
.stagebox > .stage { position: absolute; inset: 0; }
.ytbox { position: absolute; top: .6rem; right: .6rem; z-index: 4; width: 240px; aspect-ratio: 16/9; background: #000; border: 1px solid var(--rule2); }
.yt-host, .yt-host iframe { width: 100%; height: 100%; display: block; border: 0; }
.countin { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; font: 400 min(40vh, 14rem)/1 var(--dev); color: var(--gold); pointer-events: none; }
.dock { background: var(--page); padding: .8rem 1rem 1rem; display: grid; gap: .7rem; max-width: 62rem; width: 100%; margin: 0 auto; }
.seek { display: flex; align-items: center; gap: .7rem; }
.seek input { flex: 1; }
.tm { font: 500 .85rem ui-monospace, Menlo, monospace; color: var(--mute); min-width: 4.4em; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.loopnote { color: var(--mute); font-size: .9rem; }
.src { gap: .2rem 1.2rem; border-bottom: 1px solid var(--rule); }
.tab { min-height: 44px; padding: 0 .1rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--mute); font: 500 1rem var(--ui); cursor: pointer; }
.tab[aria-selected="true"] { color: var(--ivory); border-bottom-color: var(--gold); }
.status { color: var(--mute); font-size: .9rem; margin-left: auto; }
.detail { min-height: 0; gap: .6rem 1.2rem; }
.detail:empty { display: none; }
.fld { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.fld > span:first-child { color: var(--mute); min-width: 7.5rem; font-size: .92rem; }
.fld.inl > span:first-child { min-width: 0; }
.fld output { font: 500 .9rem ui-monospace, Menlo, monospace; min-width: 5ch; }
.nudge { display: inline-flex; align-items: center; gap: .5rem; }
.tune summary { cursor: pointer; color: var(--mute); min-height: 44px; display: flex; align-items: center; }
.tune-grid { display: grid; gap: .5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); padding: .3rem 0 .6rem; }
.song .credit { margin-top: auto; padding-left: 1rem; max-width: 62rem; }

/* stage (fullscreen teleprompter) */
.song.is-stage .stagebox { position: fixed; inset: 0; height: auto; z-index: 50; border: 0; }
.song.is-stage .bar, .song.is-stage .dock { position: fixed; left: 0; right: 0; z-index: 60; background: rgba(0,0,0,.9); max-width: none; transition: opacity .35s; }
.song.is-stage .bar { top: 0; }
.song.is-stage .dock { bottom: 0; max-height: 70vh; overflow: auto; }
.song.is-stage .credit, .song.is-stage .back, .song.is-stage .bar-r .btn:not(.stage-x) { display: none; }
.song.is-stage .stage-x { display: inline-flex; }
.song.is-stage.idle .bar, .song.is-stage.idle .dock { opacity: 0; pointer-events: none; }
.song.is-stage.idle { cursor: none; }
.song.is-stage .ytbox { position: fixed; z-index: 55; top: auto; bottom: .8rem; right: .8rem; width: 200px; opacity: .9; }
.song.is-stage.idle .ytbox { opacity: .55; }

/* ---------- lyric view (shared by stage and editor preview) ---------- */
.lv { position: relative; overflow: hidden; background: var(--stage); --fs: 44px; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.lv-mirror { position: absolute; inset: 0; }
.lv.mirrored .lv-mirror { transform: scaleX(-1); }
.lv-reel { position: absolute; left: 0; right: 0; top: 0; padding: 0 3%; will-change: transform; }
.ln { position: relative; margin: 0 auto .5em; padding: .08em 0; max-width: 100%; text-align: center; font-size: var(--fs); line-height: 1.4; cursor: pointer;
  transform: scale(var(--sc, .8)); transition: opacity .4s, transform .4s; }
.r { text-wrap: balance; }
.r.dev { font-family: var(--dev); line-height: 1.5; }
.r.rom { font-family: var(--dev); font-style: italic; line-height: 1.4; font-size: .5em; }
.lv[data-script="rom"] .r.rom { font-size: 1em; }
.lv[data-script="rom"] .r.dev, .lv[data-script="dev"] .r.rom { display: none; }
.lv[data-script="both"] .r.rom { margin-top: .1em; }
.lv[data-script="rom"] .ln.no-rom .r.dev { display: block; }
.lv[data-script="dev"] .ln.no-dev .r.rom { display: block; font-size: 1em; }
.r.en { display: none; font: italic 400 .36em/1.4 var(--ui); color: #b4a68d; margin-top: .45em; }
.lv.show-en .r.en { display: block; }
.w { display: inline-block; --p: 0; padding: .22em .06em .3em; margin: -.22em 0 -.3em;
  color: var(--ivory);
  background-image: linear-gradient(90deg, var(--gold) calc(var(--p) * 1.12% - 12%), var(--ivory) calc(var(--p) * 1.12%));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ln.past .w { --p: 100; }
.ln.fut .w { --p: 0; }
.ln.inloop::before { content: ''; position: absolute; left: 0; top: .15em; bottom: .15em; width: 3px; background: var(--gold); opacity: .6; }
.lv-badge { position: absolute; top: .8rem; left: 1rem; font: italic 400 1rem var(--dev); color: var(--mute); }
.lv-meas { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; font-size: 100px; font-family: var(--dev); pointer-events: none; }
.lv-meas.rom { font-style: italic; }
.cue { position: absolute; left: 0; right: 0; font-size: var(--fs); text-align: center; opacity: 0; pointer-events: none; display: grid; justify-items: center; gap: .3em; }
.cue.on { opacity: 1; transition: opacity .3s; }
.cue-lab { font: italic 400 .4em var(--dev); color: var(--mute); }
.cue-bar { width: min(70%, 9em); height: max(4px, .07em); background: #2a2116; overflow: hidden; }
.cue-bar i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.cue-dots { display: flex; gap: .3em; height: .3em; }
.cue-dots b { width: .26em; height: .26em; border-radius: 50%; background: #2a2116; }
.cue-dots b.lit { background: var(--gold-hi); }

/* ---------- help ---------- */
.help { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.8); display: grid; place-items: center; padding: 1rem; }
.help-card { background: var(--card); border: 1px solid var(--rule2); border-radius: 8px; padding: 1.4rem; max-width: 30rem; width: 100%; display: grid; gap: 1rem; max-height: 90vh; overflow: auto; }
.help-card h2 { font: 400 1.4rem var(--dev); }
.help-card dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.help-card dt { font: 600 .9rem ui-monospace, Menlo, monospace; color: var(--gold-hi); }
.help-card dd { margin: 0; }
.help-foot { color: var(--mute); font-size: .9rem; }

/* ---------- editor ---------- */
.edit { max-width: 80rem; margin: 0 auto; padding-bottom: 3rem; }
.edit .notice { margin: 0 1rem .8rem; }
.ed-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem 1.5rem; padding: 0 1rem; }
.stage.prev { height: clamp(200px, 30vh, 300px); border: 1px solid var(--rule); }
.ed-left { display: grid; gap: .7rem; align-content: start; }
.ed-tr { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ed-tr input[type=range] { flex: 1; min-width: 8rem; }
.ed-right { display: grid; gap: .8rem; align-content: start; }
.tapbox { display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch; }
.tap { flex: 1 1 14rem; min-height: 8rem; border: 2px solid var(--gold); border-radius: 12px; background: var(--raise); color: var(--ivory); display: grid; place-content: center; gap: .3rem; font: 400 1rem var(--ui); cursor: pointer; touch-action: manipulation; }
.tap b { font: 400 2.4rem var(--dev); color: var(--gold-hi); }
.tap:active { background: var(--gold); color: var(--gold-ink); }
.tap:active b { color: var(--gold-ink); }
.tap-side { display: grid; gap: .5rem; align-content: start; }
.export { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.toast { color: var(--gold-hi); font-size: .9rem; min-height: 1.4em; }
.tl-wrap { margin: 1.2rem 1rem 0; border: 1px solid var(--rule); background: var(--card); }
.tl-head { display: flex; justify-content: space-between; align-items: center; padding: .3rem .8rem; color: var(--mute); font-size: .9rem; }
.tl { overflow-x: auto; overflow-y: hidden; }
.tl-in { position: relative; height: 108px; }
.tl-ruler { position: relative; height: 22px; border-bottom: 1px solid var(--rule); }
.tl-ruler i { position: absolute; top: 3px; padding-left: 4px; border-left: 1px solid var(--rule2); font: normal 400 .72rem ui-monospace, monospace; color: var(--mute); height: 18px; }
.tl-track { position: relative; height: 84px; }
.blk { position: absolute; top: 12px; height: 56px; background: #3b2a10; border: 1px solid var(--gold); border-radius: 3px; overflow: hidden; cursor: grab; touch-action: none; }
.blk.sel { background: #7a5416; }
.blk span { position: absolute; left: 10px; top: 3px; font-size: .8rem; font-weight: 600; pointer-events: none; }
.blk u { position: absolute; bottom: 0; width: 1px; height: 14px; background: var(--gold-hi); pointer-events: none; }
.blk s { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; background: rgba(255,255,255,.12); }
.blk s[data-h="l"] { left: 0; } .blk s[data-h="r"] { right: 0; }
.tl-head-line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; pointer-events: none; }
.lt-wrap { margin: 1.2rem 1rem 0; overflow-x: auto; }
.lt { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lt th { text-align: left; font-weight: 500; color: var(--mute); padding: .4rem .5rem; border-bottom: 1px solid var(--rule); }
.lt td { padding: .35rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.lt tr.sel td { background: var(--raise); }
.lt tr.next td:first-child { box-shadow: inset 3px 0 var(--gold); }
.lt td.n { color: var(--mute); white-space: nowrap; }
.lt td.n small { display: block; font-size: .72rem; }
.lt .tx span { font: 400 1.15rem/1.4 var(--dev); display: block; }
.lt .tx em { color: var(--mute); font-size: .85rem; }
.lt tr.wr.off { display: none; }
.wchip { display: inline-flex; flex-direction: column; gap: .2rem; margin: .2rem .6rem .4rem 0; align-items: flex-start; }
.wchip b { font: 400 1rem var(--dev); }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .ed-grid { grid-template-columns: minmax(0, 1fr); }
  .ytbox { width: 168px; }
  .bar-r .quiet:not([data-k=help]) { display: none; }
  .song.is-stage .dock { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .fld > span:first-child { min-width: 6.5rem; }
  .tune-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .btn { padding: 0 .85rem; }
  .row.main { gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}