:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #1b2027; color: #dce1e8; }
header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #232b36; border-bottom: 1px solid #3a4a5e; flex-wrap: wrap; }
header h1 { font-size: 16px; margin: 0 14px 0 0; white-space: nowrap; }
header h1 small { font-size: 11px; color: #9fb2c8; font-weight: 400; }
select, button, textarea { background: #2a3441; color: #e6ecf4; border: 1px solid #435269; border-radius: 5px; font: inherit; }
select { padding: 4px 6px; max-width: 260px; }
button { padding: 5px 14px; cursor: pointer; }
button.small { padding: 2px 10px; font-size: 12px; }
button:disabled { opacity: .5; cursor: default; }
#status { margin-left: auto; font-size: 13px; color: #9fb2c8; }
#ideLink { color: #7ec3ff; text-decoration: none; font-size: 13px; border: 1px solid #435269; border-radius: 5px; padding: 4px 10px; }
#ideLink:hover { background: #2a3441; }
main { display: grid; grid-template-columns: 52% 1fr; gap: 14px; padding: 14px; height: calc(100vh - 56px); }
section.col { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.panel { display: flex; flex-direction: column; background: #232b36; border: 1px solid #38445a; border-radius: 8px; padding: 8px; min-height: 0; }
.panel.grow { flex: 1; }
#msgpanel { flex: 0 0 22%; }
h2 { font-size: 13px; margin: 0; color: #9fb2c8; }
h3 { font-size: 12px; margin: 0 0 6px; color: #9fb2c8; font-weight: 600; }
.row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.small { font-size: 12px; color: #9fb2c8; }
.spacer { flex: 1; }
.hidden { display: none !important; }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; flex: 1; overflow: auto; }
#log { color: #c9d4e2; }
#msg { color: #ffb3a5; }
#banner { padding: 8px 12px; border-radius: 6px; font-weight: 700; }
#banner.pass { background: #1d3b2a; color: #6fe39a; border: 1px solid #2e7d4c; }
#banner.fail { background: #46241f; color: #ff9b8a; border: 1px solid #a03a2b; }
#tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
#tabs button { padding: 2px 10px; font-size: 12px; border-radius: 11px; color: #9fb2c8; background: #242e3a; }
#tabs button.cur { background: #3d6ea0; border-color: #6aa1d4; color: #fff; }
#tabs button.dirty::after { content: " ●"; color: #ffd479; }
#edwrap { flex: 1; display: flex; min-height: 0; border: 1px solid #435269; border-radius: 5px; background: #1d232e; overflow: hidden; }
#gutter { flex: 0 0 auto; margin: 0; padding: 6px 6px 6px 8px; text-align: right; color: #5a6b80; background: #1a2029; font-size: 12px; line-height: 1.45; overflow: hidden; white-space: pre; user-select: none; }
#editor { flex: 1; border: none; border-radius: 0; resize: none; padding: 6px; font-size: 12px; line-height: 1.45; background: transparent; outline: none; white-space: pre; tab-size: 4; }
.err-line { color: #ff9b8a; }
#msg a { color: #7ec3ff; text-decoration: underline; }

/* synthesis overlay */
#synOverlay { position: fixed; inset: 0; background: #1b2027; z-index: 60; display: flex; flex-direction: column; }
#synBar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #232b36; border-bottom: 1px solid #3a4a5e; flex-wrap: wrap; }
#synBar h1 { font-size: 14px; margin: 0; }
#synStats { display: flex; gap: 8px; font-size: 12px; flex-wrap: wrap; align-items: center; }
#synStats b { color: #ffd479; font-weight: 600; }
#synStats .sep { color: #435269; }
label.inl { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; color: #9fb2c8; display: flex; }
#synPipe { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: #1c232c; border-bottom: 1px solid #34435a; font-size: 12px; flex-wrap: wrap; }
#synChips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#synChips .arrow { color: #435269; }
#synPipe button { padding: 3px 10px; font-size: 12px; border-radius: 11px; border: 1px solid #435269; background: #242e3a; color: #9fb2c8; }
#synPipe button.cur { background: #3d6ea0; border-color: #6aa1d4; color: #fff; font-weight: 600; }
#synPipe button.tagf { border-color: #2b6b8f; color: #7ec3ff; }
#synPipe button.taga { border-color: #8f6b2b; color: #e0b87e; }
#synPipe button.cur.tagf, #synPipe button.cur.taga { color: #fff; }
#synPipe button:disabled { opacity: .3; cursor: default; }
#synInfo { padding: 6px 16px 8px; font-size: 12px; color: #c9d4e2; background: #1c232c; border-bottom: 1px solid #232b36; white-space: pre-wrap; max-height: 170px; overflow: auto; }
#synBody { flex: 1; display: flex; min-height: 0; }
#synCanvasWrap { flex: 3; position: relative; overflow: hidden; background: #171c24; }
#synCanvas { display: block; position: absolute; inset: 0; cursor: grab; touch-action: none; }
#synZoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
#synZoom button { width: 32px; height: 32px; padding: 0; }
#synSide { flex: 1; min-width: 280px; max-width: 400px; overflow: auto; background: #232b36; border-left: 1px solid #3a4a5e; padding: 10px 12px; font-size: 12px; }
#synSide h3 { font-size: 13px; margin: 12px 0 4px; color: #9fb2c8; }
#synSide table { border-collapse: collapse; width: 100%; font-size: 12px; }
#synSide th, #synSide td { border: 1px solid #3a4a5e; padding: 2px 6px; text-align: left; white-space: nowrap; }
#synSide th { background: #2c3547; }
#synSide .sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
#synSide .hint { color: #9fb2c8; margin: 0; }
#synSide .cmpw td { white-space: normal; vertical-align: top; }
#synSide .cmpw td:first-child { white-space: nowrap; color: #9fb2c8; }
.clist { max-height: 320px; overflow: auto; border: 1px solid #3a4a5e; border-radius: 4px; }
.clist div { padding: 1px 6px; cursor: pointer; white-space: nowrap; }
.clist div:hover { background: #2c3e55; }
.clist .more { color: #9fb2c8; cursor: default; }
#synFoot { padding: 4px 14px; font-size: 11px; color: #9fb2c8; background: #1c232c; border-top: 1px solid #34435a; }
#synOverlay { overflow: auto; }
#synBody { min-height: 60vh; }
@media (max-width: 1000px) {
  #synBody { flex-direction: column; min-height: 0; }
  #synCanvasWrap { flex: 0 0 70vh; }
  #synSide { max-width: none; flex: 0 0 auto; border-left: none; border-top: 1px solid #3a4a5e; }
  #synInfo { max-height: 110px; }
}

.rtabs { display: flex; gap: 4px; align-items: center; margin-bottom: 6px; }
.rtabs button { padding: 2px 10px; font-size: 12px; border-radius: 11px; color: #9fb2c8; background: #242e3a; }
.rtabs button.cur { background: #3d6ea0; border-color: #6aa1d4; color: #fff; }
#wavePane { flex: 1; display: flex; min-height: 0; gap: 6px; }
#waveSide { flex: 0 0 170px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
#waveFilter { background: #2a3441; color: #e6ecf4; border: 1px solid #435269; border-radius: 5px; font: inherit; font-size: 12px; padding: 3px 6px; }
#wavePick { flex: 1; overflow: auto; font-size: 11px; color: #c9d4e2; }
#wavePick label { display: block; white-space: nowrap; flex-direction: row; color: #c9d4e2; font-size: 11px; }
#waveWrap { flex: 1; overflow: auto; min-width: 0; border: 1px solid #38445a; border-radius: 5px; }
#waveCanvas { display: block; cursor: crosshair; }