/* Orchestra Studio — a lit score page on a rosewood desk, a harmonium at the
   foot of it. The page is paper and ink because a tune is written. The room
   around it is dark so that the writing is the brightest thing in sight. */

:root {
  --desk: #17100c; --desk2: #21170f; --desk3: #2e2017; --edge: #4b3726; --edge2: #3a2a1d;
  --brass: #d9a84e; --brass2: #f1d291; --dim: #a58f76; --dim2: #7c6854;
  --paper: #f8f1e2; --paper2: #fffaf0; --rule: #dccdb0; --rule2: #ebe0c9;
  --ink: #1d1510; --ink2: #5a4938; --ink3: #8f7c67;
  --indigo: #1d3c78; --sindoor: #c32d1a; --peacock: #0b6a64;
  --serif: 'Literata', 'Noto Serif Malayalam', 'Noto Serif Devanagari', 'Noto Serif Tamil', 'Noto Serif Telugu', 'Noto Serif Kannada', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --display: 'Bodoni Moda', 'Literata', Georgia, serif;
  --bw: 44px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--desk); }
body { font-family: var(--sans); color: var(--brass2); -webkit-tap-highlight-color: transparent; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
[hidden] { display: none !important; }

.app { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }

/* ---- top bar ---- */
.top { display: flex; align-items: center; gap: 12px; padding: 7px 14px; background: var(--desk); border-bottom: 1px solid var(--edge2); min-height: 44px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--brass2); font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.brand img { filter: sepia(1) saturate(1.4) brightness(1.1); }
.brand em { color: var(--brass); }
.saved { font-size: 12px; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topacts { margin-left: auto; display: flex; gap: 3px; flex: none; }
.tb { padding: 6px 11px; font-size: 13px; font-weight: 600; color: var(--dim); border-radius: 7px; position: relative; }
.tb:hover:not(:disabled) { color: var(--brass2); background: var(--desk3); }
.tb.nar { display: none; }
a.tb { text-decoration: none; }
a.tb.nolink { display: inline-flex; align-items: center; }
.pip { position: absolute; top: 5px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--sindoor); }

/* ---- console ---- */
.console { display: flex; align-items: stretch; gap: 6px; padding: 8px 14px; background: linear-gradient(#2a1c13, #1f150e); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 #4d3926; overflow-x: auto; scrollbar-width: none; }
.console::-webkit-scrollbar { display: none; }
.play { width: 54px; min-height: 52px; flex: none; border-radius: 10px; font-size: 21px; color: #2a1a08; background: linear-gradient(#f3d690, #c9953a); box-shadow: 0 1px 0 #fff3 inset, 0 2px 8px #0008; transition: transform .08s; }
.play:hover { filter: brightness(1.08); }
.play:active { transform: translateY(1px); }
.play.on { background: linear-gradient(#e2594a, #a8210f); color: #fff; }
.tog { flex: none; width: 66px; min-height: 52px; border-radius: 9px; border: 1px solid var(--edge2); color: var(--brass); font-size: 17px; line-height: 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tog small { font: 600 10.5px/1 var(--sans); color: var(--dim); white-space: nowrap; }
.tog:hover { background: var(--desk3); }
.tog[aria-pressed=true] { background: #3b2a15; border-color: var(--brass); }
.tog.rec { color: var(--sindoor); }
.tog.live { background: var(--sindoor); color: #fff; border-color: #ff8a7a; animation: pulse 1s infinite; }
.tog.live small { color: #fff; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px #c32d1a55; } }
.orchbtn { flex: none; min-width: 112px; min-height: 52px; padding: 5px 13px; border-radius: 9px; border: 1px solid var(--brass); background: linear-gradient(#3e2a14, #271908); color: var(--brass2); text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.orchbtn b { font: italic 600 17px/1.1 var(--display); }
.orchbtn small { font: 600 10.5px/1 var(--sans); color: var(--dim); white-space: nowrap; }
.orchbtn:hover { filter: brightness(1.15); }
.orchbtn[aria-expanded=true] { background: var(--brass); color: #231507; }
.orchbtn[aria-expanded=true] small { color: #4d3613; }
.sep { width: 1px; background: var(--edge2); margin: 3px 3px; flex: none; }
.dial { flex: none; min-width: 92px; min-height: 52px; padding: 6px 12px; border-radius: 9px; background: #120b07; border: 1px solid var(--edge2); box-shadow: inset 0 1px 5px #000; text-align: left; display: grid; grid-template-columns: 1fr; align-content: center; gap: 1px; position: relative; }
button.dial:hover { border-color: var(--brass); }
.dial small { font: 700 9.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--dim2); }
.dial b { font: 600 17px/1.2 var(--serif); color: var(--brass2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.dial i { font: 500 11px/1.1 var(--sans); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.dial.grow { flex: 1 0 150px; }
.laya { grid-template-columns: auto auto; gap: 2px 8px; align-items: center; }
.laya small { grid-column: 1 / 3; }
.stepper { display: inline-flex; align-items: center; }
.stepper button { width: 25px; height: 26px; font-size: 16px; color: var(--brass); border-radius: 6px; }
.stepper button:hover { background: var(--desk3); }
.stepper input { width: 42px; height: 26px; border: 0; background: transparent; text-align: center; font: 600 17px var(--serif); color: var(--brass2); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button { display: none; }
.taptempo { font: 700 10.5px var(--sans); color: var(--dim); border: 1px solid var(--edge2); border-radius: 5px; padding: 3px 6px; }
.taptempo:hover { color: var(--brass2); }

/* ---- stage ---- */
.stage { display: grid; grid-template-columns: 216px minmax(0, 1fr) 268px; min-height: 0; background: radial-gradient(90% 70% at 50% 0, #33231a, var(--desk) 75%); }
.side { overflow-y: auto; padding: 14px 12px 24px; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
.side h2 { font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dim2); margin: 0 0 8px; }
.desk { overflow-y: auto; padding: 16px 12px 28px; min-height: 0; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
.paper { position: relative; color: var(--ink); max-width: 1060px; margin: 0 auto; padding: 26px 34px 30px; min-height: calc(100% - 4px); border-radius: 3px;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1px #0006, 0 18px 50px #000a, 0 0 90px #e9b76b1c; }
.head { border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 14px; }
.songtitle { width: 100%; border: 0; background: transparent; font: italic 600 clamp(25px, 3.6vw, 36px)/1.15 var(--display); color: var(--ink); padding: 0; }
.songby { width: 100%; border: 0; background: transparent; font: 500 13px/1.4 var(--sans); color: var(--ink2); padding: 2px 0 0; }
.songtitle::placeholder, .songby::placeholder, .lyric::placeholder { color: var(--ink3); opacity: .75; }
.songtitle:focus, .songby:focus, .lyric:focus { outline: none; }
.sig { margin: 7px 0 0; font: 700 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.sig b { color: var(--sindoor); font-weight: 700; }

/* ---- first screen ---- */
.start { padding: 10px 0 20px; max-width: 620px; animation: rise .5s ease both; }
.start h1 { font: italic 500 clamp(30px, 5vw, 46px)/1.08 var(--display); margin: 8px 0 12px; }
.start h1 em { color: var(--sindoor); }
.start p { font-size: 15px; line-height: 1.55; color: var(--ink2); margin: 0 0 14px; }
.start textarea { width: 100%; resize: vertical; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper2); padding: 12px 14px; font: 16px/1.7 var(--serif); color: var(--ink); }
.start textarea::placeholder { color: var(--ink3); }
.startacts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 12px; }
.bigbtn { padding: 11px 20px; border-radius: 7px; background: var(--ink); color: var(--brass2); font-weight: 700; font-size: 15px; }
.bigbtn:hover { background: #33241a; }
.linkbtn { font-weight: 600; font-size: 14px; color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---- sections ---- */
.sec { margin-bottom: 10px; }
.sh { display: flex; align-items: center; gap: 4px; margin: 14px 0 4px; }
.kind { border: 0; background: transparent; font: 700 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sindoor); padding: 3px 2px; cursor: pointer; max-width: 150px; }
.rule { flex: 1; height: 1px; background: var(--rule); margin: 0 6px; }
.tx { font-size: 12px; font-weight: 600; color: var(--ink3); padding: 3px 6px; border-radius: 4px; }
.tx:hover:not(:disabled) { color: var(--ink); background: var(--rule2); }
.addln, .addsec { display: block; font-size: 13px; font-weight: 600; color: var(--ink3); padding: 6px 2px; }
.addln:hover, .addsec:hover { color: var(--indigo); }
.addsec { margin-top: 8px; border-top: 1px dashed var(--rule); padding-top: 12px; width: 100%; text-align: left; }

/* ---- a line ---- */
.ln { position: relative; padding: 5px 8px 8px; margin: 0 -8px; border-radius: 4px; transition: background .15s; }
.ln:hover { background: #fffaf066; }
.ln.on { background: var(--paper2); box-shadow: 0 0 0 1px var(--rule), 0 6px 18px #6a4a2022; }
.ln.on::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; background: var(--brass); border-radius: 2px; }
.ln.play-now { background: #fff7e2; }
.lh { display: flex; align-items: center; gap: 6px; }
.num { font: 600 11px var(--sans); color: var(--ink3); width: 15px; flex: none; text-align: right; }
.lyric { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 17px/1.5 var(--serif); color: var(--ink); padding: 1px 0; }
.singer { border: 1px solid var(--rule); background: transparent; border-radius: 4px; font-size: 12px; max-width: 96px; }
.ic { width: 26px; height: 26px; border-radius: 5px; font-size: 11px; color: var(--ink3); flex: none; }
.ic:hover { color: var(--ink); background: var(--rule2); }
.bars { position: relative; display: flex; flex-wrap: wrap; margin-left: 21px; row-gap: 5px; }
.vib { position: relative; width: calc(var(--bw) * var(--beats)); flex: none; }
.tk { display: grid; grid-template-columns: repeat(var(--n), 1fr); position: absolute; inset: 0; pointer-events: none; }
.bt { position: relative; border-left: 1px solid var(--rule2); }
.bt.first { border-left: 1px solid var(--rule); }
.vib.cy .bt.first { border-left: 2px solid var(--ink2); }
.bt em { position: absolute; left: 3px; top: -1px; font: 700 10px/1 var(--sans); font-style: normal; color: var(--ink3); }
.bt em.sam { color: var(--sindoor); font-size: 13px; }
.lane { position: relative; display: block; width: 100%; height: 34px; overflow: visible; clip-path: inset(-8px -3px); }
.ln.on .lane { height: 128px; touch-action: none; cursor: crosshair; }
.ink { fill: none; stroke: var(--indigo); stroke-width: 1.9px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ln:not(.on) .ink { stroke-width: 1.5px; opacity: .85; }
.nd { fill: none; stroke: var(--indigo); stroke-width: 6px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ln:not(.on) .nd { stroke-width: 3.5px; }
.nd.off { stroke: var(--sindoor); }
.nd.slot { stroke: var(--rule); }
.rl { stroke: var(--rule2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.rl.sa { stroke: #e0b9a6; }
.lbs { position: absolute; left: -22px; top: 0; width: 20px; height: 128px; pointer-events: none; }
.lb { position: absolute; right: 2px; transform: translateY(-50%); font: 600 10px/1 var(--serif); color: var(--ink3); }
.lb.sa { color: var(--sindoor); }
.row { position: relative; display: grid; align-items: end; min-height: 22px; }
.row > * { grid-row: 1; }
.row.ch { min-height: 19px; align-items: center; }
.chd { font: 700 11.5px/1.2 var(--sans); color: var(--peacock); text-align: left; padding: 0 0 0 3px; white-space: nowrap; }
.chd:hover { color: var(--sindoor); text-decoration: underline; }
.row.sw { font: 600 15px/1.25 var(--serif); }
.row.sy { font: 400 13.5px/1.3 var(--serif); color: var(--ink2); min-height: 20px; }
.n { position: relative; font-weight: 600; padding-left: 3px; white-space: nowrap; cursor: pointer; border-radius: 3px; min-width: 0; }
.n.off .sv { color: var(--sindoor); }
.n.sel { background: #f6dfae; box-shadow: 0 0 0 1px var(--brass); }
.n.slot i { display: inline-block; width: 9px; height: 9px; border: 1.5px solid var(--ink3); border-radius: 50%; }
.n.sel.slot i { border-color: var(--sindoor); }
.n sub { font: 600 9px var(--sans); color: var(--ink3); vertical-align: -1px; }
.cm { font: 600 14px/1 var(--serif); color: var(--ink3); padding-left: 4px; font-style: normal; align-self: end; }
.gm { position: absolute; left: 2px; top: -9px; font: 700 10px/1 var(--sans); color: var(--peacock); text-decoration: none; }
.s { padding-left: 3px; white-space: nowrap; cursor: pointer; min-width: 0; }
.s.hold { color: var(--ink3); }
.s.extra { color: var(--ink3); }
.left { margin: 3px 0 0 21px; font-size: 12px; color: var(--sindoor); }
.left span { font-family: var(--serif); }

/* swara marks */
.sv { position: relative; display: inline-block; }
.sv.up1::before, .sv.up2::before, .sv.dn1::after, .sv.dn2::after { content: ''; position: absolute; left: 50%; width: 3.5px; height: 3.5px; margin-left: -1.75px; border-radius: 50%; background: currentColor; }
.sv.up1::before, .sv.up2::before { top: -1px; }
.sv.dn1::after, .sv.dn2::after { bottom: -2px; }
.sv.up2::before { box-shadow: 5px 0 0 currentColor; margin-left: -4px; }
.sv.dn2::after { box-shadow: 5px 0 0 currentColor; margin-left: -4px; }
.sv.komal { text-decoration: underline; text-underline-offset: 2px; }
.sv.tivra { border-top: 1.5px solid currentColor; }

.caret { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sindoor); margin-left: -1px; pointer-events: none; animation: blink 1.1s steps(2) infinite; z-index: 3; }
@keyframes blink { 50% { opacity: .25; } }
.ph { position: absolute; width: 2px; background: var(--sindoor); box-shadow: 0 0 8px #c32d1a99; pointer-events: none; z-index: 4; left: 0; top: 0; will-change: transform; }

/* ---- song map ---- */
.runlist { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: run; }
.runlist li { counter-increment: run; display: flex; align-items: center; gap: 4px; border-left: 2px solid var(--brass); padding: 1px 0 1px 7px; margin-bottom: 2px; }
.runlist li.inst { border-left-color: #58a87d; }
.runname { flex: 1; min-width: 0; text-align: left; font: 500 13px/1.5 var(--serif); color: var(--brass2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runname::before { content: counter(run) ' '; color: var(--dim2); font: 600 10.5px var(--sans); }
.runname small { color: var(--dim); font: 500 10.5px var(--sans); }
.runname:hover { color: #fff; }
.runlist li span { display: inline-flex; flex: none; }
.runlist li span button { width: 18px; height: 20px; font-size: 11px; color: var(--dim2); }
.runlist li span button:hover:not(:disabled) { color: var(--brass2); }
.leadbtn { font: italic 600 13.5px/1.2 var(--display); color: var(--peacock); padding: 2px 8px; border: 1px solid var(--rule); border-radius: 12px; white-space: nowrap; }
.leadbtn:hover { border-color: var(--peacock); }
.mapsec { margin-bottom: 12px; }
.mapsec > button { display: block; width: 100%; text-align: left; font: 700 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--brass); padding: 4px 6px; }
.mapln { display: flex; gap: 7px; align-items: baseline; width: 100%; text-align: left; padding: 4px 6px; border-radius: 5px; font: 400 13px/1.35 var(--serif); color: var(--dim); }
.mapln span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mapln i { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--edge); align-self: center; }
.mapln i.part { background: linear-gradient(90deg, var(--brass) 50%, transparent 50%); border-color: var(--brass); }
.mapln i.full { background: var(--brass); border-color: var(--brass); }
.mapln:hover { background: var(--desk3); color: var(--brass2); }
.mapln.on { background: var(--desk3); color: var(--brass2); box-shadow: inset 2px 0 0 var(--brass); }

/* ---- checks ---- */
.card { background: #120b0799; border: 1px solid var(--edge2); border-radius: 9px; padding: 11px 12px; margin-bottom: 10px; }
.card h3 { margin: 0 0 7px; font: 700 10.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--dim2); }
.say { margin: 0 0 8px; font-size: 13px; line-height: 1.42; color: var(--brass2); }
.say.good::before { content: '✓ '; color: #79c7a8; font-weight: 800; }
.say.warn::before { content: '! '; color: #ff8d7c; font-weight: 800; }
.say small { color: var(--dim); font-size: 12px; }
.singname { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--edge2); padding: 2px 0 4px; margin-bottom: 7px; font-weight: 600; font-size: 13.5px; color: var(--brass2); }
.rangebar { position: relative; height: 34px; margin: 8px 0 5px; border-radius: 4px; background: #0a0604; overflow: hidden; }
.rangebar .voice { position: absolute; top: 0; bottom: 0; background: #d9a84e26; border-left: 1px solid var(--brass); border-right: 1px solid var(--brass); }
.rangebar .bar { position: absolute; bottom: 0; background: var(--brass); width: 2.1%; border-radius: 1px 1px 0 0; }
.rangebar .bar.out { background: #f0604d; }
.rangebar .sa { position: absolute; top: 0; bottom: 0; width: 1px; background: #f0604d77; }
.rangeends { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 12px; color: var(--dim); }
.mini { display: inline-flex; align-items: center; gap: 2px; }
.mini button { width: 22px; height: 22px; border-radius: 4px; color: var(--brass); background: var(--desk3); }
.mini b { min-width: 30px; text-align: center; font-weight: 600; color: var(--brass2); font-size: 12.5px; }
.cardsel { width: 100%; background: var(--desk2); color: var(--brass2); border: 1px solid var(--edge2); border-radius: 5px; padding: 4px 6px; font-size: 12.5px; margin-top: 7px; }
.cardbtn { display: block; width: 100%; margin-top: 8px; padding: 7px 8px; border-radius: 6px; background: var(--desk3); color: var(--brass2); font-size: 13px; font-weight: 600; border: 1px solid var(--edge); }
.cardbtn:hover { border-color: var(--brass); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { padding: 3px 8px; border-radius: 20px; border: 1px solid var(--edge); font-size: 12.5px; color: var(--brass2); }
.chip:hover { border-color: var(--brass); }
.jump { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

/* ---- dock ---- */
.dock { background: linear-gradient(#2a1b12, #150d08); border-top: 1px solid #000; box-shadow: 0 -8px 26px #0009, inset 0 1px 0 #55402c; padding: 7px 14px calc(5px + env(safe-area-inset-bottom)); }
.tools { display: flex; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.tools::-webkit-scrollbar { display: none; }
.seg { display: inline-flex; flex: none; background: #0f0906; border: 1px solid var(--edge2); border-radius: 7px; padding: 2px; gap: 1px; }
.seg.right { margin-left: auto; }
.seg button { padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--dim); border-radius: 5px; white-space: nowrap; min-height: 28px; }
.seg button:hover:not(:disabled) { color: var(--brass2); background: var(--desk3); }
.seg button.on, .seg button[aria-pressed=true] { background: var(--brass); color: #231507; }
.seg button.lit { color: #7fe0b7; }
.keys { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.keys::-webkit-scrollbar { display: none; }
.piano { position: relative; display: flex; height: 104px; min-width: calc(var(--whites) * 33px); }
.key { touch-action: none; user-select: none; -webkit-user-select: none; }
.wh { flex: 1 1 0; min-width: 0; border-radius: 0 0 5px 5px; background: linear-gradient(#efe6d3 75%, #f9f3e6); box-shadow: inset 0 -3px 0 #d6c8ae, 1px 0 0 #0005; color: #4a3a2b; font: 600 12.5px var(--serif); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; }
.wh.out { color: #a3937f; background: linear-gradient(#cfc4ae 75%, #dbd1bd); }
.wh.sa { color: var(--sindoor); }
.wh.locked, .bk.locked { pointer-events: none; opacity: .45; }
.bk { position: absolute; top: 0; left: calc((100% / var(--whites)) * var(--x)); width: calc((100% / var(--whites)) * .62); margin-left: calc((100% / var(--whites)) * -.31); height: 62%; background: linear-gradient(#2b2019, #0e0805); border-radius: 0 0 4px 4px; box-shadow: 1px 2px 4px #000a, inset 0 -2px 0 #4b3a2c; color: var(--brass2); font: 600 10.5px var(--serif); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; z-index: 2; }
.bk.out { color: #8d7b68; }
.key.down, .wh:active { filter: brightness(.82); box-shadow: inset 0 2px 7px #0007; }
.bk.down { background: linear-gradient(#6b4a23, #3c2710); }
.pad { display: grid; gap: 4px; }
.padrow { display: flex; gap: 4px; align-items: stretch; }
.padrow .oct { flex: none; width: 46px; font: 700 9.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--dim2); align-self: center; }
.pk { flex: 1 1 0; min-width: 0; height: 40px; border-radius: 7px; background: linear-gradient(#f4ecdb, #dfd2b9); color: #2c1f14; font: 600 16px var(--serif); box-shadow: inset 0 -2px 0 #bfae90; }
.pk.sa { color: var(--sindoor); }
.pk.down { filter: brightness(.78); }
.hint { margin: 5px 0 0; font-size: 12px; line-height: 1.3; color: var(--dim); min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hint kbd { font: 600 11px var(--sans); color: var(--brass2); background: var(--desk3); border-radius: 3px; padding: 0 4px; }
.dock.small .keys, .dock.small .hint { display: none; }
.dock.small .tools { padding-bottom: 0; }

/* ---- the pit ---- */
.dock.pitopen .tools, .dock.pitopen .keys, .dock.pitopen .hint { display: none; }
.pit { max-height: min(56dvh, 470px); overflow-y: auto; padding: 2px 2px 8px; position: relative; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
.styles { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.styles::-webkit-scrollbar { display: none; }
.stylebtn { flex: none; width: 164px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--edge2); background: #120b07; text-align: left; }
.stylebtn b { display: block; font: italic 600 15px/1.2 var(--display); color: var(--brass2); }
.stylebtn small { display: block; font-size: 11px; line-height: 1.25; color: var(--dim); margin-top: 2px; white-space: normal; }
.stylebtn:hover { border-color: var(--brass); }
.stylebtn.on { background: #3b2a15; border-color: var(--brass); }
.striphead, .strip { display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(120px, 1fr) minmax(90px, 1fr) 72px auto; gap: 8px; align-items: center; }
.striphead { padding: 2px 8px; font: 700 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim2); }
.strip { padding: 4px 8px; border-left: 3px solid var(--edge); border-bottom: 1px solid #0007; }
.strip.muted { opacity: .5; }
.strip.lead { border-left-color: var(--sindoor); background: #1f140c; }
.strip.fam-strings { border-left-color: #c9953a; } .strip.fam-wood { border-left-color: #58a87d; } .strip.fam-brass { border-left-color: #e6c15a; }
.strip.fam-keys { border-left-color: #8fa6d8; } .strip.fam-pluck { border-left-color: #c58a5e; } .strip.fam-indian { border-left-color: #e0705c; }
.strip.fam-voices { border-left-color: #d7a8d0; } .strip.fam-drums, .strip.fam-hand, .strip.fam-orch { border-left-color: #9a8b7b; } .strip.fam-synth { border-left-color: #6fc8d8; }
.stname { font: 600 14px/1.25 var(--serif); color: var(--brass2); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stname:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.strole { background: #0f0906; color: var(--brass2); border: 1px solid var(--edge2); border-radius: 5px; padding: 3px 4px; font-size: 12px; min-width: 0; }
.strole.fixed { border: 0; background: none; color: var(--dim); }
.stvol, .stpan { width: 100%; accent-color: var(--brass); min-width: 0; }
.stbtns { display: inline-flex; gap: 2px; }
.stbtns button { width: 26px; height: 26px; border-radius: 5px; font: 700 11px var(--sans); color: var(--dim); background: var(--desk3); }
.stbtns button:hover { color: var(--brass2); }
.stbtns button.on { background: var(--brass); color: #231507; }
.pitacts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pitclose { margin-top: 6px; width: 100%; }
.prep { position: relative; height: 22px; margin-bottom: 5px; background: #0a0604; border-radius: 4px; overflow: hidden; }
.prep i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #7a5420, var(--brass)); transition: width .15s; }
.prep span { position: absolute; left: 8px; top: 3px; font: 600 11.5px var(--sans); color: #fff; text-shadow: 0 1px 2px #000; }
.ilist h3 { margin: 12px 0 4px; }
.irow { display: flex; align-items: center; gap: 4px; border-radius: 6px; }
.irow.on { background: #3b2a15; }
.ipick { flex: 1; text-align: left; padding: 6px 8px; font: 500 14.5px var(--serif); border-radius: 6px; }
.ipick:hover { background: var(--desk3); }
.rectag { font: 700 9.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--brass); border: 1px solid var(--edge); border-radius: 3px; padding: 1px 4px; margin-left: 5px; vertical-align: 2px; }
.credit { margin-top: 14px !important; font-size: 11.5px !important; }
.ihear { width: 32px; height: 30px; border-radius: 6px; color: var(--brass); font-size: 11px; }
.ihear:hover { background: var(--desk3); }

/* ---- editing a part ---- */
.roll { padding: 2px; }
.rollhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rollhead b { font: italic 600 17px var(--display); color: var(--brass2); }
.rollhead span { font-size: 12.5px; color: var(--dim); margin-right: auto; }
.rollhead .popbtn { padding: 4px 9px; font-size: 12.5px; }
.rollhelp { margin: 5px 0 6px; font-size: 12px; color: var(--dim); }
.rollwrap { display: flex; max-height: min(38dvh, 320px); overflow-y: auto; border: 1px solid var(--edge2); border-radius: 6px; background: #0f0906; }
.rlabels { flex: none; width: 66px; position: sticky; left: 0; background: #17100b; border-right: 1px solid var(--edge2); }
.rlabels span { display: block; height: 16px; line-height: 16px; padding-right: 6px; text-align: right; font: 600 10.5px/16px var(--serif); color: var(--dim); white-space: nowrap; overflow: hidden; }
.rlabels span.sa { color: #ff9d8d; }
.rollscroll { overflow-x: auto; flex: 1; min-width: 0; }
.rollgrid { position: relative; touch-action: none; cursor: crosshair; background-image: repeating-linear-gradient(90deg, #4b3726 0 1px, transparent 1px var(--cycle)), repeating-linear-gradient(90deg, #2e2017 0 1px, transparent 1px var(--bar)); }
.rrow { height: 16px; border-bottom: 1px solid #1d130c; background: #ffffff0a; }
.rrow.off { background: none; }
.rrow.sa { background: #c32d1a22; }
.rn { position: absolute; height: 14px; margin-top: 1px; background: linear-gradient(#f1d291, #c9953a); border-radius: 3px; box-shadow: 0 0 0 1px #0007; pointer-events: none; }

/* ---- popovers ---- */
.veil { position: fixed; inset: 0; background: #0006; z-index: 20; }
.pop { position: fixed; z-index: 21; background: #1d130c; color: var(--brass2); border: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 20px 50px #000b; width: min(360px, calc(100vw - 24px)); max-height: min(70dvh, 560px); overflow: auto; padding: 14px; animation: rise .14s ease both; }
.pop.wide { width: min(560px, calc(100vw - 24px)); }
.pop h2 { margin: 0 0 10px; font: italic 600 21px/1.2 var(--display); }
.pop h3 { margin: 13px 0 6px; font: 700 10.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--dim2); }
.pop p { font-size: 13px; line-height: 1.45; color: var(--dim); margin: 0 0 8px; }
.shrutis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.shrutis button { padding: 7px 0 5px; border-radius: 6px; background: var(--desk3); text-align: center; font: 600 15px/1.1 var(--serif); }
.shrutis button small { display: block; font: 600 10px/1.2 var(--sans); color: var(--dim); }
.shrutis button.on { background: var(--brass); color: #231507; }
.shrutis button.on small { color: #4d3613; }
.rowb { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.popbtn { padding: 7px 11px; border-radius: 6px; background: var(--desk3); border: 1px solid var(--edge); font-size: 13px; font-weight: 600; }
.popbtn:hover { border-color: var(--brass); }
.popbtn.on { background: var(--brass); color: #231507; border-color: var(--brass); }
.popbtn.danger { color: #ff9d8d; }
.search { width: 100%; padding: 8px 10px; border-radius: 7px; background: #0f0906; border: 1px solid var(--edge); color: var(--brass2); font-size: 15px; margin-bottom: 7px; }
.search::placeholder { color: var(--dim2); }
.rlist { max-height: 300px; overflow-y: auto; margin: 0 -4px; }
.rlist > button { display: flex; width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px; gap: 8px; align-items: baseline; justify-content: space-between; }
.rlist > button:hover { background: var(--desk3); }
.rlist > button.on { background: #3b2a15; box-shadow: inset 2px 0 0 var(--brass); }
.rlist b { font: 600 14.5px var(--serif); }
.rlist small { font-size: 11px; color: var(--dim); text-align: right; }
.rlist h3 { margin: 10px 8px 4px; }
.checkrow { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 5px 0; color: var(--brass2); }
.checkrow input { accent-color: var(--brass); width: 16px; height: 16px; }
.field { display: block; font-size: 12px; color: var(--dim); margin-bottom: 8px; }
.field select, .field textarea { display: block; width: 100%; margin-top: 3px; background: #0f0906; color: var(--brass2); border: 1px solid var(--edge); border-radius: 6px; padding: 6px 8px; font-size: 14px; }
.field textarea { font-family: var(--serif); line-height: 1.5; }
.songrow { display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-bottom: 1px solid var(--edge2); }
.songrow > button:first-child { flex: 1; min-width: 0; text-align: left; }
.songrow b { display: block; font: 600 15px var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.songrow small { font-size: 11.5px; color: var(--dim); }
.err { color: #ff9d8d; font-size: 13px; }
.menu > button { display: block; width: 100%; text-align: left; padding: 8px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; }
.menu > button:hover { background: var(--desk3); }
.menu > button.danger { color: #ff9d8d; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--brass2); color: #231507; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; z-index: 30; box-shadow: 0 8px 24px #000a; max-width: calc(100vw - 32px); text-align: center; }

/* ---- smaller screens ---- */
@media (max-width: 1180px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .tb.nar { display: inline-block; }
  .side { display: none; position: fixed; z-index: 15; top: 0; bottom: 0; width: min(310px, 86vw); background: #1a110b; box-shadow: 0 0 40px #000c; }
  .side.map { left: 0; }
  .side.checks { right: 0; }
  .side.open { display: block; }
}
@media (max-width: 640px) {
  .top { padding: 5px 8px; gap: 4px; }
  .topacts { margin-left: 0; flex: 1 1 0; min-width: 0; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; gap: 0; }
  .topacts::-webkit-scrollbar { display: none; }
  .brand span, .saved, .tb.wide, a.tb.nolink { display: none; }
  .tb { padding: 6px 6px; font-size: 12px; flex: none; }
  .console { padding: 6px 10px; }
  .play { width: 48px; min-height: 46px; }
  .tog { width: 56px; min-height: 46px; }
  .dial { min-width: 84px; min-height: 46px; padding: 5px 9px; }
  .dial b { font-size: 15.5px; }
  .desk { padding: 0; }
  .paper { padding: 14px 16px 22px; border-radius: 0; }
  .ln { margin: 0 -8px; padding: 4px 8px 7px; }
  .bars { margin-left: 16px; }
  .lbs { left: -17px; width: 16px; }
  .num { width: 10px; }
  .left { margin-left: 16px; }
  .ln.on .lane { height: 104px; }
  .lbs { height: 104px; }
  .row.sw { font-size: 14px; }
  .row.sy { font-size: 12.5px; }
  .dock { padding: 5px 8px calc(4px + env(safe-area-inset-bottom)); }
  .hint { display: none; }
  .pk { height: 38px; font-size: 15px; }
  .padrow .oct { width: 36px; font-size: 8.5px; letter-spacing: .02em; }
  .pop { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; }
  .tx[data-a=sec-up], .tx[data-a=sec-down] { display: none; }
  .orchbtn { min-height: 46px; min-width: 100px; padding: 4px 10px; }
  .pit { max-height: 62dvh; }
  .striphead { display: none; }
  .strip { grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; }
  .stvol { grid-column: 1; } .stpan { display: none; }
  .strole { grid-column: 1; } .stbtns { grid-column: 2; grid-row: 1 / span 2; flex-wrap: wrap; width: 56px; }
  .stylebtn { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.printparts { display: none; }
.menu small { display: block; font-size: 11.5px; color: var(--dim); font-weight: 400; }

/* ---- paper ---- */
@media print {
  body.printing-parts .app, body.printing-parts .pop, body.printing-parts .veil, body.printing-parts .toast { display: none !important; }
  body.printing-parts .printparts { display: block !important; }
  .printpage { break-after: page; }
  .printpage svg { width: 100%; height: auto; display: block; }
  html, body { background: #fff; overflow: visible; height: auto; }
  .app { display: block; height: auto; }
  .top, .console, .side, .dock, .veil, .pop, .toast, .ph, .caret, .ic, .tx, .addln, .addsec, .start { display: none !important; }
  .stage { display: block; background: none; }
  .desk { overflow: visible; padding: 0; }
  .paper { box-shadow: none; background: #fff; max-width: none; padding: 0; }
  .ln, .ln.on { background: none; box-shadow: none; break-inside: avoid; }
  .ln.on::before { display: none; }
  .ln.on .lane { height: 34px; }
  .lbs, .left, .rl { display: none; }
  .kind { appearance: none; }
}