@charset "utf-8";
:root{ --bg:#C8C888; --hd:#b3b378; --ink:#1d1d1d; --dk:#3b3b3b; --lcd:#0e2f2a; --lcdf:#35e6d0; --led:#7a1f12; --on:#ff3b1f; --grn:#27c93f;
  /* theme variables (css/themes.css overrides these; js/theme.js lets the user edit them) */
  --on-dk:#fff; --dk-sh:#222; --tag:#960000; --tag2:#0e2e2a; --btn:#7a1010; --btn-fg:#fff; --btn-in:#2b0505; --hi:#f4e36a; --hi-fg:#222; --led-g:#1d4a22;
  --page:#ffffff; --key-w:#f6f6f0; --key-fg:#1d1d1d; --key-b:#1d1d1d; --key-b-fg:#fff; --knob:#2b2b2b; --knob-acc:#ff4a36; --lcd-edge:#000;
  --panel:rgba(255,255,255,.10); --row-alt:rgba(0,0,0,.035); --sub-bg:rgba(0,0,0,.06); --ch-fg:#ffd9d0; --ico-filter:none; --lcd-ico:invert(1) brightness(1.6); }
body{ margin:0; font:11px/1.3 "Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; color:var(--ink); }

/* frame (original colour #C8C888) */
#elita1{ display:grid; grid-template-columns:405px 270px 265px; grid-auto-rows:min-content; gap:5px 4px; width:960px; background:var(--bg); padding:5px; }
#title, #bottom{ grid-column:1/-1; }
#title{ padding:0 4px; line-height:2em; }
#title h1, #title h2, #title h3{ display:inline-block; }
#title .description{ width:560px; text-align:center; }
#title .version, #title .date{ padding:0 1em; background:var(--tag); color:var(--on-dk); text-align:center; }
#title .date_old{ padding:0 1em; background:var(--tag2); color:var(--on-dk); text-align:center; }
#table-cell01, #table-cell02, #table-cell03{ display:flex; flex-direction:column; gap:5px; }

/* section: dark outline + title band */
#oscillators,#lfo,#amplifier,#filter,#arpeggiator,#effect,#equalizer-pan,#tempo-delay,#chrous-flanger,#voice{ border:1px solid var(--dk); background:var(--panel); }
.h2-label{ font-size:13px; font-weight:700; padding:0 6px; background:var(--hd); border-bottom:1px solid var(--dk); }
.body{ padding:5px 6px 6px; display:flex; flex-direction:column; gap:5px; }
.row{ display:flex; align-items:flex-end; gap:4px; }
.row.top{ align-items:flex-start; }
.col{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
/* Oscillators: divider lines (as on Synth1) + parts spread evenly inside each cell */
.osc{ display:grid; grid-template-columns:1fr 176px; gap:0; margin:-5px -6px -6px; }
.osc > *{ padding:6px 8px; border-bottom:1px solid var(--dk); }
.osc > :nth-child(odd){ padding-left:6px; }
.osc > :nth-child(even){ padding-right:6px; border-left:1px solid var(--dk); }
.osc .row{ justify-content:space-around; align-items:center; }
.osc .col{ align-items:stretch; justify-content:space-around; }
.osc .span{ grid-column:1/-1; border-bottom:0; padding:6px 6px 7px; }

/* controls */
.ctl{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.ctl > span, .cap{ font-size:10px; line-height:1.1; }
.tag{ font-size:14px; font-weight:700; padding:0 6px; background:var(--dk); color:var(--on-dk); align-self:center; }
.sb{ background:var(--dk); color:var(--on-dk); font-weight:700; font-size:11px; padding:2px 7px; border-radius:3px; box-shadow:inset 0 -2px 0 var(--dk-sh); }
.sb:active{ background:var(--dk-sh); }
.tg{ display:inline-flex; align-items:center; gap:3px; }
.led, .lamp i{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--led); border:1px solid var(--dk); }
.tg.on .led, .lamp input:checked + i{ background:var(--on); box-shadow:0 0 4px var(--on); }
.tg.g .led{ background:var(--led-g); } .tg.g.on .led{ background:var(--grn); box-shadow:0 0 4px var(--grn); }
.tg.n .led{ display:none; } .tg.n.on .sb{ background:var(--hi); color:var(--hi-fg); }
.lcd{ background:var(--lcd); color:var(--lcdf); border:1px solid var(--lcd-edge); min-width:38px; height:20px; padding:0 6px; font:12px/18px monospace; text-align:center; }
.lcd img{ height:14px; vertical-align:middle; filter:var(--lcd-ico); }
.nbox{ display:flex; align-items:stretch; background:var(--lcd); border:1px solid var(--lcd-edge); height:22px; }
.nbox > span:first-child{ min-width:30px; padding:0 4px; color:var(--lcdf); font:14px/22px monospace; text-align:right; }
.nbox .ar{ display:flex; flex-direction:column; width:12px; }
.nbox .ar button{ flex:1; font-size:7px; line-height:1; background:var(--dk); color:var(--on-dk); border-top:1px solid var(--lcd-edge); }

.lamps{ display:flex; flex-direction:column; gap:1px; }
.lamps.g2{ display:grid; grid-template-columns:repeat(2,auto); gap:4px 8px; }
.lamps.h{ flex-direction:row; gap:6px; }
.lw{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.lamp{ display:flex; align-items:center; gap:3px; font-size:10px; cursor:pointer; position:relative; }
.lamp input{ -webkit-appearance:none; appearance:none; position:absolute; opacity:0; width:0; height:0; }
.lamp input:focus-visible + i{ outline:2px solid var(--on-dk); outline-offset:1px; }
.lamp img{ width:22px; height:22px; }

/* LFO 1 | shared destination labels | LFO 2 -- parts spread evenly inside each block */
.lfo7{ display:grid; grid-template-columns:1fr auto 1fr; gap:0 6px; }
.lb{ display:flex; flex-direction:column; gap:6px; }
.lc{ display:grid; grid-template-columns:auto auto auto; gap:2px 6px; align-content:start; align-items:center; font-size:10px; }
.lc > span{ text-align:center; }
.sync{ font-size:10px; display:flex; gap:4px; align-items:center; }
#lfo .lb{ align-items:stretch; justify-content:space-around; }
#lfo .lb .row{ justify-content:space-around; align-items:center; }
#lfo .sync{ align-self:center; }
#lfo .lc{ align-content:space-around; }

/* Filter / Arpeggiator: rows spread evenly across the panel */
#amplifier .row, #filter .row, #arpeggiator .row{ justify-content:space-around; align-items:center; }
#amplifier .body, #filter .body, #arpeggiator .body, #lfo .body{ padding:8px 6px 10px; gap:8px; }
#filter .lamps.h{ gap:4px; flex-wrap:nowrap; }
#filter .row.ftype{ gap:4px; }

/* Effect / Equalizer / Tempo Delay / Chorus / Voice: parts spread evenly across each panel */
#effect .row, #equalizer-pan .row, #voice .row{ justify-content:space-around; align-items:center; }
#effect .body, #equalizer-pan .body, #tempo-delay .body, #chrous-flanger .body, #voice .body{ padding:7px 6px 9px; gap:7px; }
/* Delay / Chorus: ON + indicator stacked in a left column, dials spread evenly in the space on the right */
.row.split{ align-items:center; gap:6px; }
.split .col.sw{ align-items:center; gap:5px; flex:none; }
.split .kn{ flex:1; display:flex; justify-content:space-around; align-items:center; gap:0; }

/* bottom */
#bottom{ display:flex; align-items:center; gap:8px; padding:4px 8px; border:1px solid var(--dk); background:var(--panel); }
#patchbox{ flex:1; background:var(--lcd); border:1px solid var(--lcd-edge); padding:4px 8px; color:var(--lcdf); font:15px/1.3 monospace; }
#pinfo{ font-size:12px; opacity:.8; }
.btn{ position:relative; background:var(--btn); color:var(--btn-fg); font-weight:700; padding:6px 12px; cursor:pointer; }
.btn input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.btn:focus-within{ outline:2px solid var(--on-dk); outline-offset:2px; }

/* original utility classes */
.pr5{ padding-right:5px; } .mr10{ margin-right:10px; } .mr20{ margin-right:20px; } .mb3{ margin-bottom:3px; } .fs2em{ font-size:2em; }
.bpmbox{ cursor:default; display:flex; align-items:center; gap:4px; }
.bpmbox input{ width:44px; background:var(--btn-in); color:var(--btn-fg); border:1px solid var(--lcd-edge); font:inherit; padding:1px 2px; text-align:right; }