:root{--bg:#0f1115;--panel:#181b22;--line:#2a2f3a;--fg:#e8eaf0;--mut:#8b93a7;--acc:#6ea8ff}@media (prefers-color-scheme:light){:root{--bg:#f4f5f8;--panel:#fff;--line:#d9dce4;--fg:#1b1e26;--mut:#5d6578;--acc:#2563eb}}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0;font:15px/1.5 system-ui,-apple-system,sans-serif}#app{gap:16px;max-width:1000px;margin:0 auto;padding:24px 16px;display:grid}h1{margin:0;font-size:28px}header p{color:var(--mut);margin:4px 0 0}#stage{aspect-ratio:4/3;background:var(--panel);border:1px solid var(--line);border-radius:12px;position:relative;overflow:hidden}#view,#viewGpu{width:100%;height:100%;display:block;position:absolute;inset:0}#drop{border:2px dashed var(--line);cursor:pointer;text-align:center;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;margin:12px;transition:all .15s;display:flex;position:absolute;inset:0}#drop span{color:var(--mut);font-size:13px}#drop.over,#drop:hover{border-color:var(--acc);background:color-mix(in srgb, var(--acc) 8%, transparent)}#drop.hidden{display:none}#status{background:color-mix(in srgb, var(--panel) 90%, transparent);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;position:absolute;bottom:12px;left:12px;right:12px}#controls{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:12px 16px;display:flex}#controls label{color:var(--mut);align-items:center;gap:8px;font-size:13px;display:flex}#controls input[type=range]{width:130px;accent-color:var(--acc)}button{font:inherit;border:1px solid var(--acc);background:var(--acc);color:#fff;cursor:pointer;border-radius:8px;padding:6px 14px}button.ghost{color:var(--fg);border-color:var(--line);background:0 0}footer{color:var(--mut);font-size:12px}footer a{color:var(--acc)}[hidden]{display:none!important}#modes{z-index:2;border:1px solid var(--line);background:var(--panel);border-radius:8px;display:flex;position:absolute;top:12px;right:12px;overflow:hidden}#modes button{color:var(--mut);background:0 0;border:0;border-radius:0;padding:4px 12px;font-size:13px}#modes button.on{background:var(--acc);color:#fff}#modes button:disabled{opacity:.4;cursor:not-allowed}#metrics{z-index:2;pointer-events:none;background:color-mix(in srgb, var(--panel) 85%, transparent);border:1px solid var(--line);white-space:pre-wrap;border-radius:8px;max-width:calc(100% - 190px);margin:0;padding:8px 10px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;top:12px;left:12px}#controls select{font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:6px;padding:2px 6px;font-size:13px}#benchResults{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;overflow-x:auto}#benchResults h2{margin:0 0 8px;font-size:16px}#benchResults small{color:var(--mut);margin-left:8px;font-weight:400}#benchResults table{border-collapse:collapse;min-width:100%;font-size:13px}#benchResults th,#benchResults td{text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;padding:4px 10px}#benchResults th:first-child,#benchResults tbody th{text-align:left}#benchResults td.win{color:#22c55e;font-weight:600}#benchResults p{color:var(--mut);margin:8px 0 0;font-size:12px}#benchResults p.warn{color:#f59e0b}