html,body{height:100%;margin:0;overflow:hidden;background:#0a0a0a;color:#e7e7e7;font:12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial}
  #app{position:fixed;inset:0;touch-action:none;cursor:grab;overflow:hidden}
  #app.dragging{cursor:grabbing}
  #app::after{content:"";position:absolute;inset:0;background:#0a0a0a;transition:opacity .25s;pointer-events:none}
  #app.loaded::after{opacity:0}
  .panel{position:fixed;right:12px;bottom:12px;z-index:998;display:grid;gap:8px;min-width:300px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px) saturate(1.1);padding:12px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
  .panel.isHidden{display:none!important}
  .row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
  .row input[type="range"]{width:180px}
  .sub{opacity:.7}
  .hr{height:1px;background:rgba(255,255,255,.15);margin:2px 0}
  .muted{opacity:.8}
  .kbd{padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.12);font-family:ui-monospace, Menlo, monospace}
  .num{width:64px}
  #showBtn{position:fixed;right:12px;bottom:12px;z-index:999;padding:8px 10px;border:none;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35);backdrop-filter:blur(8px) saturate(1.1)}
  canvas{position:absolute;inset:0;margin:auto;transform-origin:center center}
  .btn{padding:6px 10px;border:none;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.14);color:#fff}
  .files-note{font-size:11px;opacity:.8}