:root{font:16px 'Segoe UI',Arial,sans-serif;color:#14263f;background:#e8edf4}*{box-sizing:border-box}body{margin:0}header{background:#08264a;color:#fff;display:flex;align-items:baseline;gap:22px;padding:22px 4vw}h1{font:700 34px Consolas,'Courier New',monospace;margin:0;letter-spacing:-2px}h1 span{color:#6fceff}header p{margin:0}header a{color:#b9e9ff;margin-left:auto;font-size:14px}a{color:#075cc6}main{display:grid;grid-template-columns:290px minmax(0,1fr);gap:26px;max-width:1450px;margin:26px auto;padding:0 24px}.controls{background:white;padding:20px;border-radius:6px;align-self:start}.controls section+section{border-top:1px solid #d3dce7;margin-top:22px;padding-top:18px}h2{font-size:17px;margin:0 0 14px}label{display:grid;gap:7px;font-size:14px;margin:12px 0}select,input[type=text]{width:100%;padding:9px;border:1px solid #b5c2d2;border-radius:3px;background:#fff;font:inherit}input[type=range]{width:100%;accent-color:#075cc6;margin:4px 0}button,.file-button{font:600 14px 'Segoe UI',sans-serif;background:#edf3fb;border:1px solid #aebed2;padding:10px 12px;border-radius:4px;color:#14263f;cursor:pointer;text-align:center}button:disabled{opacity:.48;cursor:default}.primary,.file-button{background:#075cc6;color:#fff;border-color:#075cc6}.file-button{display:block;margin:0 0 8px}.file-button input{display:none}.file-button.secondary{background:#edf3fb;color:#14263f;border-color:#aebed2}.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}.wrap{flex-wrap:wrap}.text-button{border:0;background:transparent;color:#075cc6;padding:10px 0}.hint{font-size:12px;line-height:1.5;color:#52667e;margin:6px 0 10px}.check{display:flex;align-items:center;gap:8px}.check input{accent-color:#075cc6}.stage{min-width:0}.status{background:#fff;padding:13px 16px;display:flex;gap:16px;justify-content:space-between;border-radius:4px;margin-bottom:15px;font-size:14px}#stats{white-space:nowrap;color:#52667e;font-size:12px}#qr{display:block;width:min(100%,920px);height:auto;background:#fff;image-rendering:pixelated;touch-action:none;margin:auto;border:1px solid #c8d2e0}#qr:focus-visible{outline:4px solid #075cc6;outline-offset:3px}.destination{font-size:13px;line-height:1.5;text-align:center;margin:16px 0 22px}details{background:#fff;border-radius:4px;margin:12px 0;padding:14px 16px}summary{cursor:pointer;font-weight:600;font-size:14px}#original{display:block;width:min(100%,640px);height:auto;image-rendering:pixelated;aspect-ratio:4/3;margin:16px auto 0;background:#000}.key-grid{display:flex;flex-wrap:wrap;gap:7px;padding:18px 0}.key-grid button{min-width:42px;touch-action:none;padding:13px 8px}.key-grid button.held{background:#075cc6;color:white}.text-entry{flex:3}.text-entry input{min-width:0}pre{max-height:180px;overflow:auto;white-space:pre-wrap;font:12px Consolas,monospace;background:#08264a;color:#d4edff;padding:12px}footer{font-size:13px;line-height:1.5;color:#52667e;text-align:center;padding:18px 24px 30px}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #42a5ff;outline-offset:3px}button:not(:disabled):hover{filter:brightness(.95)}@media(max-width:850px){header{padding:18px}header p{display:none}main{grid-template-columns:1fr;padding:0 12px;margin-top:16px;gap:18px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px}.controls section+section{border:0;margin:0;padding:0}.stage{grid-row:1}.status{font-size:12px;flex-wrap:wrap}#qr{max-width:650px}.keyboard{display:block}}@media(max-width:480px){.controls{grid-template-columns:1fr}.row button{padding:10px 7px}header a{font-size:12px}h1{font-size:29px}}
.featured{width:100%;margin-bottom:8px}.file-button{position:relative}.file-button input{display:block;position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}.file-button:focus-within{outline:3px solid #42a5ff;outline-offset:3px}
/* Main controls stay visible; optional expanded tools may grow the page. */
@media(min-width:1200px){
  header{padding:14px 32px}h1{font-size:30px}
  main{max-width:1880px;grid-template-columns:460px minmax(0,1fr);gap:24px;margin:16px auto;padding:0 28px}
  .controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'program display' 'sound files';gap:12px;padding:14px;min-width:0}
  .controls section{min-width:0}.controls section+section{border:0;margin:0;padding:0}
  .controls section:nth-child(1){grid-area:program}.controls section:nth-child(2){grid-area:display}.controls section:nth-child(3){grid-area:sound}.controls section:nth-child(4){grid-area:files}
  .controls section:nth-child(n+3){border-top:1px solid #d3dce7;padding-top:12px}
  h2{font-size:16px;margin-bottom:10px}
  label{font-size:12px;gap:5px;margin:9px 0}
  select,input[type=text]{padding:7px;min-width:0}
  button,.file-button{font-size:12px;padding:9px 7px;min-height:36px}
  .row{gap:6px}.row>*{min-width:0}
  .hint{font-size:11px;line-height:1.35;margin:5px 0 9px}
  .text-button{padding:7px 0}
  .status{font-size:12px;gap:10px;padding:10px 12px;margin-bottom:10px}
  #stats{font-size:11px}
  .screen-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  #qr{width:min(100%,calc(100dvh - 310px));max-width:none}
  .destination{font-size:11px;margin:10px 0;line-height:1.4}
  .advanced-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start;margin-top:12px}
  .advanced-panels details{margin:0;padding:12px 10px;min-width:0}
  .advanced-panels summary{font-size:12px}
  .advanced-panels details[open]{grid-column:1/-1}
  footer{font-size:11px;padding:8px 24px 14px}
}
@media(min-width:1200px) and (max-height:800px){
  .controls{padding:12px;gap:12px}.controls h2{margin-bottom:8px}
  .controls label{margin:7px 0}.hint{margin:3px 0 6px;line-height:1.3}
  .controls section:nth-child(4){padding-top:8px}
}
.view-switches{display:flex;flex-wrap:wrap;gap:0 16px}
.screen-pair{display:grid;gap:18px}.screen-pair>section{min-width:0}
.screen-pair:not(.show-original){grid-template-columns:minmax(0,1fr)}.original-pane[hidden]{display:none}
#original{width:100%;max-width:none;aspect-ratio:8/5;margin:0;background:#000}
@media(min-width:1200px){
  .controls label:has(output){grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .controls label:has(output)>input{grid-column:1/-1}
  .controls label:has(output)>output{font-size:11px;white-space:nowrap}
}
.local-game-row{display:flex;align-items:flex-end;gap:8px}.local-game-row label{min-width:0;flex:1;margin:0}.local-game-row button{flex:0 0 auto}.local-game-row select{width:100%} [hidden]{display:none!important}