:root{--bg:#0f1115;--panel:#181b22;--line:#2a2f3a;--fg:#e8eaf0;--muted:#9aa3b2;--accent:#4f8cff;--ok:#3ccf8a;--warn:#f0b24a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif}
a{color:var(--accent);text-decoration:none}
header{padding:20px 24px 8px;border-bottom:1px solid var(--line)}
header h1{margin:0 0 4px;font-size:20px}
header p{margin:0;color:var(--muted)}
main{padding:16px 24px 40px}
.device{margin:28px 0 8px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.device h2{margin:0;font-size:17px}
.device .meta{color:var(--muted);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px}
.card h3{margin:0;font-size:15px}
.card .desc{color:var(--muted);font-size:13px;flex:1}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tag.kind-splat{border-color:#3b6fd6;color:#8db2ff}.tag.kind-pointcloud{border-color:#2f9e6a;color:#7fe0b4}.tag.kind-mesh{border-color:#b0862f;color:#f3cf7a}.tag.kind-embed{border-color:#7a4fd6;color:#c3a7ff}
.tag.missing{border-color:#c0504f;color:#ff9a99}
.actions{display:flex;gap:8px;margin-top:6px}
.btn{display:inline-block;padding:6px 12px;border-radius:7px;background:var(--accent);color:#fff;font-size:13px}
.btn.secondary{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.empty{color:var(--muted);font-style:italic}
/* viewer */
body.viewer{overflow:hidden}
#stage{position:fixed;inset:0}
#stage canvas,#stage iframe{width:100%;height:100%;display:block;border:0}
#hud{position:fixed;top:0;left:0;right:0;display:flex;gap:10px;align-items:center;padding:8px 12px;background:linear-gradient(#000c,#0000);pointer-events:none}
#hud>*{pointer-events:auto}
#hud .title{font-weight:600}
#hud .sub{color:var(--muted);font-size:12px}
#hud .spacer{flex:1}
#hud select,#hud button{background:#1d2230;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:12px}
#status{position:fixed;left:12px;bottom:12px;background:#000a;padding:6px 10px;border-radius:6px;font-size:12px;color:var(--muted)}
#help{position:fixed;right:12px;bottom:12px;background:#000a;padding:6px 10px;border-radius:6px;font-size:12px;color:var(--muted);max-width:360px}
#progress{position:fixed;left:0;right:0;top:0;height:3px;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform .2s}

#fps{position:fixed;left:12px;bottom:40px;background:#000a;padding:4px 10px;border-radius:6px;font-size:12px;color:var(--ok);font-variant-numeric:tabular-nums}
#warn{position:fixed;top:56px;left:12px;right:12px;background:#7a2b2b;color:#fff;padding:10px 14px;border-radius:8px;font-size:13px;z-index:5}
@media (max-width:720px){
  #hud{flex-wrap:wrap;gap:6px;padding:6px 8px;background:#000c}
  #hud .sub{display:none}
  #hud .title{font-size:13px;flex-basis:100%}
  #hud select,#hud button{font-size:11px;padding:3px 6px}
  #help{max-width:60vw;font-size:11px}
  #fps{font-size:10px;max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}