*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--fg:#e0e0e0;--fg-dim:gray;--border:#333;--accent:#fff;--font:"SF Mono","Menlo","Monaco","Consolas","Liberation Mono",monospace}html,body{background:var(--bg);color:var(--fg);font-family:var(--font);height:100%;font-size:12px;line-height:1.5}#app{display:flex;flex-direction:column;gap:16px;height:100%;padding:16px}header{display:flex;border-bottom:1px solid var(--border);align-items:baseline;gap:8px;padding-bottom:8px}header h1{letter-spacing:-.5px;font-size:14px;font-weight:600}header .version{color:var(--fg-dim);font-size:10px}main{display:flex;flex:1;gap:16px;min-height:0}.player-container{display:flex;flex-direction:column;flex:1;gap:8px;min-width:0}.video-wrapper{position:relative;background:var(--canvas-bg,transparent);background-image:var(--canvas-pattern,repeating-conic-gradient(#1a1a1a 0% 25%,#0f0f0f 0% 50%));border:1px solid var(--border);display:flex;overflow:hidden;background-size:16px 16px;flex:1;justify-content:center;align-items: center}.video-wrapper.has-video{background:#000}#video{display:block;max-width:100%;max-height:100%}#video:not([src]),#video[src=""]{display:none}#subtitle-canvas-2d,#subtitle-canvas-webgl,#subtitle-canvas-webgpu{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0}.controls{display:flex;border:1px solid var(--border);background:var(--bg);flex-wrap:wrap;align-items: center;gap:8px;padding:8px}#play-pause{background:var(--bg);border:1px solid var(--border);color:var(--fg);cursor:pointer;display:flex;justify-content:center;align-items: center;width:32px;height:24px;font-size:10px}#play-pause:hover{border-color:var(--accent)}#timeline{-webkit-appearance:none;appearance:none;background:var(--border);cursor:pointer;flex:1;height:4px}#timeline::-webkit-slider-thumb{-webkit-appearance:none;background:var(--fg);cursor:pointer;width:12px;height:12px}#timeline::-moz-range-thumb{background:var(--fg);cursor:pointer;border:none;width:12px;height:12px}#time-display{color:var(--fg-dim);white-space:nowrap;text-align:right;min-width:140px;font-size:10px}.toggle{display:flex;color:var(--fg-dim);white-space:nowrap;align-items: center;gap:6px;margin-left:auto;font-size:10px}.toggle input{accent-color:var(--fg)}.select{display:flex;color:var(--fg-dim);white-space:nowrap;align-items: center;gap:6px;font-size:10px}.controls .select select{background:var(--bg);border:1px solid var(--border);color:var(--fg);font-family:var(--font);height:24px;padding:4px 6px;font-size:10px}.panel{display:flex;overflow-y:auto;flex-direction:column;gap:16px;width:280px}.panel section{border:1px solid var(--border);padding:12px}.panel h2{text-transform:uppercase;letter-spacing:1px;color:var(--fg-dim);margin-bottom:12px;font-size:10px;font-weight:600}.file-inputs{display:flex;flex-direction:column;gap:8px}.file-btn,#local-fonts-btn{display:flex;background:var(--bg);border:1px solid var(--border);color:var(--fg);cursor:pointer;font-family:var(--font);justify-content:center;align-items: center;padding:8px 12px;transition:border-color .15s;font-size:11px}.file-btn:hover,#local-fonts-btn:hover{border-color:var(--accent)}.file-btn input{display:none}.status-row{display:flex;border-bottom:1px solid var(--border);gap:8px;padding:4px 0}.status-row:last-child{border-bottom:none}.status-row .label{color:var(--fg-dim);min-width:60px}.status-row .value{word-break:break-all;flex:1}.bg-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bg-controls label{display:flex;color:var(--fg-dim);flex-direction:column;gap:6px;font-size:10px}.bg-controls select,.bg-controls input[type=color]{background:var(--bg);border:1px solid var(--border);color:var(--fg);font-family:var(--font);height:28px;padding:6px;font-size:11px}.bg-controls input[type=color]{cursor:pointer;padding:2px}.perf-graphs{display:flex;flex-direction:column;gap:8px;margin-top:12px}.graph{display:flex;flex-direction:column;gap:6px}.graph-label{color:var(--fg-dim);text-transform:uppercase;letter-spacing:.8px;font-size:9px}.graph canvas{border:1px solid var(--border);background:#0f0f0f;width:100%;height:60px}#font-list{list-style:none;overflow-y:auto;max-height:200px}#font-list li{border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:4px 0;font-size:11px}#font-list li:last-child{border-bottom:none}#font-list .font-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}#font-list .font-source{color:var(--fg-dim);margin-left:8px;font-size:9px}#log-container{border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;max-height:150px;padding:12px}#log-container h2{text-transform:uppercase;letter-spacing:1px;color:var(--fg-dim);margin-bottom:8px;font-size:10px;font-weight:600}#log{overflow-y:auto;color:var(--fg-dim);flex:1;font-size:10px;line-height:1.6}#log .error{color:#ff6b6b}#log .info{color:var(--fg)}#log .warn{color:#ffd93d}@media (max-width:900px){main{flex-direction:column}.panel{flex-flow:wrap;width:100%}.panel section{flex:1;min-width:200px}}