/* index.css — extracted from inline <style> blocks. Generated by scripts/h1-extract.mjs */
*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#06060c;font-family:'Segoe UI',system-ui,sans-serif;color:#e0e0e0;user-select:none;-webkit-user-select:none}
canvas{display:block;position:fixed;top:0;left:0}

.panel{position:fixed;background:rgba(12,12,28,0.92);border:1px solid rgba(80,80,180,0.18);border-radius:14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

#particle-picker{left:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px;padding:8px 6px;z-index:10}
.p-btn{width:42px;height:42px;border-radius:10px;border:2px solid transparent;background:rgba(255,255,255,0.04);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative}
.p-btn:hover{background:rgba(255,255,255,0.1);transform:scale(1.12)}
.p-btn.active{border-color:var(--pc);background:rgba(255,255,255,0.08);box-shadow:0 0 14px color-mix(in srgb,var(--pc) 50%,transparent)}
.p-btn .dot{width:16px;height:16px;border-radius:50%;background:var(--pc);box-shadow:0 0 8px var(--pc)}
.p-btn .key{position:absolute;top:2px;right:4px;font-size:9px;color:rgba(255,255,255,0.3);font-weight:600}
.p-btn .lbl{position:absolute;left:50px;background:rgba(12,12,28,0.96);padding:5px 12px;border-radius:8px;font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;border:1px solid rgba(80,80,180,0.25);z-index:100}
.p-btn:hover .lbl{opacity:1}

#toolbar{bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:5px;padding:8px 10px;z-index:10}
.t-btn{width:46px;height:46px;border-radius:12px;border:2px solid transparent;background:rgba(255,255,255,0.04);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .15s;position:relative}
.t-btn:hover{background:rgba(255,255,255,0.1);transform:scale(1.08)}
.t-btn.active{border-color:rgba(100,140,255,0.6);background:rgba(100,130,255,0.12);box-shadow:0 0 14px rgba(100,130,255,0.25)}
.t-btn .tip{position:absolute;bottom:54px;background:rgba(12,12,28,0.96);padding:4px 10px;border-radius:7px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;border:1px solid rgba(80,80,180,0.25)}
.t-btn:hover .tip{opacity:1}

.sep{width:1px;height:30px;background:rgba(255,255,255,0.08);align-self:center;margin:0 4px}

#hud{top:14px;right:14px;font-size:12px;padding:10px 14px;min-width:150px;z-index:10}
#hud div{padding:2px 0;display:flex;justify-content:space-between;gap:14px}
#hud .v{color:#7799ee;font-variant-numeric:tabular-nums;font-weight:500}

#toast-box{position:fixed;top:80px;right:14px;display:flex;flex-direction:column;gap:8px;z-index:100;pointer-events:none}
.toast{background:rgba(12,12,28,0.96);border:1px solid rgba(255,200,50,0.35);border-radius:11px;padding:10px 16px;animation:tIn .4s cubic-bezier(.34,1.56,.64,1),tOut .3s 3.7s forwards;max-width:280px;box-shadow:0 0 24px rgba(255,200,50,0.12)}
.toast-t{color:#ffcc33;font-weight:600;font-size:13px;margin-bottom:2px}
.toast-d{color:#999;font-size:11px}
@keyframes tIn{from{transform:translateX(120px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes tOut{to{transform:translateX(120px);opacity:0}}

#disc-btn{position:fixed;top:14px;left:14px;background:rgba(12,12,28,0.92);border:1px solid rgba(255,200,50,0.2);border-radius:10px;padding:8px 14px;cursor:pointer;font-size:13px;color:#ffcc33;transition:all .15s;z-index:20}
#disc-btn:hover{background:rgba(255,200,50,0.08);transform:scale(1.04)}
#disc-log{position:fixed;top:52px;left:14px;width:280px;max-height:420px;overflow-y:auto;background:rgba(12,12,28,0.96);border:1px solid rgba(255,200,50,0.2);border-radius:14px;padding:14px;font-size:12px;display:none;z-index:20}
#disc-log.open{display:block}
#disc-log h3{color:#ffcc33;margin-bottom:10px;font-size:14px}
.di{padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.di .dn{color:#ddd}.di .dd{color:#666;font-size:11px;margin-top:2px}
.und{color:#333;font-style:italic}

#help{position:fixed;bottom:74px;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,0.25);pointer-events:none;transition:opacity 3s;text-align:center;z-index:5}

#info-tip{position:fixed;display:none;background:rgba(12,12,28,0.96);border:1px solid rgba(80,80,180,0.3);border-radius:10px;padding:8px 14px;font-size:11px;pointer-events:none;z-index:50;max-width:200px}
#info-tip .it-name{font-weight:600;font-size:13px;margin-bottom:4px}
#info-tip .it-row{display:flex;justify-content:space-between;gap:12px;padding:1px 0}
#info-tip .it-v{color:#7799ee}

::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:2px}

@media (max-width: 600px) {
  .t-btn { min-height: 44px; }
  .p-btn { min-height: 44px; }
}

@media (max-width: 420px) {
  #particle-picker {
    left: 6px;
    gap: 2px;
    padding: 5px 4px;
  }
  .p-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
  }
  .p-btn .dot {
    width: 14px;
    height: 14px;
  }
  #toolbar {
    gap: 3px;
    padding: 6px 6px;
    bottom: 8px;
  }
  .t-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  #hud {
    right: 6px;
    top: 6px;
    font-size: 10px;
    padding: 6px 10px;
    min-width: 120px;
  }
  #disc-btn {
    top: 6px;
    left: 6px;
    padding: 6px 10px;
    font-size: 11px;
  }
  #disc-log {
    top: 42px;
    left: 6px;
    width: 220px;
    max-height: 320px;
    font-size: 11px;
    padding: 10px;
  }
  #help {
    font-size: 10px;
    bottom: 60px;
  }
}