body{height:100vh;margin:0;overflow-y:scroll}html{color:#e0e0e0;background:#1a1a2e;font-family:Arial,sans-serif}#preText{margin:0}pre{margin:0;font-size:10px}table,pre{font-size:10px}h1{text-align:center;color:#fff;margin:0;padding:10px 0 8px;font-size:1.4em}.controls{background:#2a2a3e;border-radius:5px;gap:10px;padding:0 5px;display:flex}button.iconButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#e0e0e0;background:0 0;border:1px solid #444;border-radius:5px;justify-content:center;align-items:center;padding:8px;display:flex;cursor:pointer!important}button.iconButton:hover{background:#3a3a4e}#container{display:flex;position:relative}.controlsContainer{box-sizing:border-box;align-items:center;width:100%;margin:auto;padding:5px}.controls{align-items:center;padding:5px}#mainContainer{margin:auto}#info{gap:12px;padding:10px 0;font-family:monospace;display:flex;position:relative}#info>div{background:#16213e;border:1px solid #2a2a4a;border-radius:8px;flex:1;min-height:400px;padding:14px}.section-heading{text-transform:uppercase;letter-spacing:.08em;color:#88a;border-bottom:1px solid #2a2a4a;margin:0 0 10px;padding-bottom:6px;font-size:11px;font-weight:600}#scoreInfo{margin-bottom:15px}#keyControls{opacity:0;display:flex;position:absolute}.key.keyLeft,.key.keyRight,.key.keyUp,.key.keyDown{font-size:1.8em}.key{color:#fff;text-align:center;background:#212121cc;border:1px solid #666;border-radius:4px;width:48px;height:48px;padding:2px}.key.pressed{background:#640000cc}.empty{visibility:hidden}table{border-spacing:0 2px}table th{text-align:left}[data-tooltip]{cursor:help;position:relative}[data-tooltip]:after{content:attr(data-tooltip);opacity:0;z-index:100;color:#e0e0e0;background:#1a1a2e;border:1px solid #444;margin-left:5px;padding:5px;transition:opacity .15s;position:absolute;top:50%;left:100%;transform:translateY(-50%);box-shadow:2px 2px 5px #00000080}[data-tooltip]:hover:after{opacity:1}#scoreInfo table,#scoreInfo th,#scoreInfo td{border-spacing:0;border:1px solid #2a2a4a}.dropzone{cursor:pointer;color:#aaa;text-align:center;border:2px dashed #444;border-radius:6px;margin-bottom:15px;padding:20px;transition:border-color .2s,background .2s}.dropzone:hover{border-color:#6a6a8a}#headerInfo{margin-bottom:5px}#exportToCsv{color:#e0e0e0;cursor:pointer;background:#2a2a3e;border:1px solid #444;border-radius:4px;margin-bottom:15px;padding:8px 12px;font-size:11px;display:block}#exportToCsv:hover{background:#3a3a4e}.dropzone.dragover{background:#4a90e21a;border-color:#4a90e2}.dropzone.error{border-color:#e74c3c}.dropzone-label{cursor:pointer}#mainContainer{width:960px}#container{min-height:360px}.iconButton{width:42px;height:42px}details{margin-top:10px}details summary{text-transform:uppercase;letter-spacing:.08em;color:#88a;cursor:pointer;-webkit-user-select:none;user-select:none;padding:4px 0;font-size:11px;font-weight:600;list-style:none}details summary:before{content:"▶ ";font-size:9px;transition:transform .15s;display:inline-block}details[open] summary:before{transform:rotate(90deg)}details summary::-webkit-details-marker{display:none}select,input[type=number],input[type=text]{color:#e0e0e0;background:#2a2a3e;border:1px solid #444;border-radius:4px;padding:3px 6px}input[type=range]{accent-color:#4a90e2}#frameInfo{color:#ccc}a{color:#6aadff}mark{color:#ff8;background:#4a4a00}