:root{
      --bg:#05060a;
      --panel: rgba(7,10,12,.78);
      --border: rgba(59,130,246,.16);
      --text: rgba(245,255,250,.92);
      --muted: rgba(245,255,250,.62);
      --neon: #3b82f6;
      --neon2:#93c5fd;
      --warn:#60a5fa;
      --shadow: rgba(0,0,0,.55);
    }
    *{box-sizing:border-box}
    html,body{height:100%; margin:0; overflow:hidden; background:var(--bg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;}
    canvas{display:block; width:100%; height:100%;}
    .bg{
      position:fixed; inset:0; pointer-events:none;
      background:
        radial-gradient(1200px 700px at 55% 45%, rgba(59,130,246,.10), transparent 55%),
        radial-gradient(900px 600px at 15% 75%, rgba(147,197,253,.08), transparent 60%),
        radial-gradient(700px 500px at 85% 85%, rgba(96,165,250,.06), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.72));
      filter: saturate(1.1);
    }
    .bg::after{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(rgba(147,197,253,.8) 1px, transparent 1.6px),
        radial-gradient(rgba(96,165,250,.6) 1px, transparent 1.6px),
        radial-gradient(rgba(59,130,246,.5) 1px, transparent 1.6px);
      background-size: 120px 120px, 180px 180px, 260px 260px;
      background-position: 0 0, 40px 90px, -60px 140px;
      opacity: .35;
      mix-blend-mode: screen;
    }

    /* Top bar */
    .topbar{
      position:fixed; top:14px; left:14px; right:14px;
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      z-index:10;
      pointer-events:none;
    }
    .brand{
      pointer-events:auto;
      display:flex; flex-direction:column; align-items:center; gap:6px;
      padding:14px 18px;
      border:1px solid var(--border);
      border-radius:16px;
      background: rgba(6,10,12,.35);
      backdrop-filter: blur(10px);
      box-shadow: 0 20px 60px var(--shadow);
    }
    .logo{
      height:44px; width:auto;
      display:block;
      filter: drop-shadow(0 0 10px rgba(59,130,246,.45));
    }
    .brand b{color:var(--text); letter-spacing:.6px; font-size:14px; text-align:center;}
    .brand small{display:block; color:var(--muted); margin-top:2px; font-size:12px;}

    .actions{
      pointer-events:auto;
      display:flex; gap:10px; align-items:center;
      margin-top:4px;
    }
    .mobile-panel-toggle{
      position:fixed;
      left:14px;
      right:14px;
      top:86px;
      z-index:10;
      display:none;
      pointer-events:auto;
      justify-content:flex-end;
    }
    .panel-toggle{
      width:auto;
      justify-content:space-between;
    }
    .panel-toggle-left{
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .arrow-icon{
      transition: transform .16s ease;
    }
    .panel-toggle.open .arrow-icon{
      transform: rotate(180deg);
    }
    .pill{
      border:1px solid var(--border);
      background: rgba(6,10,12,.35);
      color: var(--text);
      padding:10px 12px;
      border-radius:999px;
      cursor:pointer;
      backdrop-filter: blur(10px);
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
      box-shadow: 0 16px 50px rgba(0,0,0,.35);
      user-select:none;
      white-space:nowrap;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .menu-icon{width:16px; height:16px; color: currentColor;}
    .pill:hover{transform: translateY(-1px); border-color: rgba(59,130,246,.30); background: rgba(8,14,16,.45);}
    .pill:active{transform: translateY(0px) scale(.99);}
    .pill.on{
      background: rgba(59,130,246,.10);
      border-color: rgba(59,130,246,.40);
      box-shadow: 0 0 0 1px rgba(59,130,246,.10), 0 18px 55px rgba(0,0,0,.35);
    }
    #btnCluster{display:none;}

    /* Right panel */
    .panel{
      position:fixed; top:70px; right:14px; bottom:14px;
      width:min(420px, calc(100vw - 28px));
      border:1px solid var(--border);
      border-radius:18px;
      background: var(--panel);
      backdrop-filter: blur(14px);
      box-shadow: 0 24px 80px var(--shadow);
      z-index:10;
      overflow:hidden;
      display:flex; flex-direction:column;
    }
    .panel header{
      padding:14px 14px 10px;
      border-bottom: 1px solid rgba(59,130,246,.12);
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    }
    .panel h3{margin:0; color:var(--text); font-size:14px; letter-spacing:.35px;}
    .panel-title{display:flex; align-items:center; gap:8px;}
    .artifact-icon{width:15px; height:15px; fill: currentColor;}
    .panel .sub{color:var(--muted); font-size:12px; margin-top:4px;}
    .panel .count{
      color: rgba(59,130,246,.92);
      font-size:12px;
      border:1px solid rgba(59,130,246,.22);
      background: rgba(59,130,246,.08);
      padding:6px 10px; border-radius:999px;
      white-space:nowrap;
    }

    .filters{
      padding:10px 10px 2px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:8px;
    }
    .filters .full{ grid-column: 1 / -1; }
    .panel-actions{
      padding:8px 10px 6px;
      display:flex;
      gap:8px;
      align-items:center;
    }
    .toggle-icon{
      width:34px; height:34px;
      border-radius:10px;
      border:1px solid rgba(59,130,246,.18);
      background: rgba(255,255,255,.03);
      color: var(--text);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      backdrop-filter: blur(8px);
      transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
    }
    .toggle-icon svg{ width:16px; height:16px; fill: currentColor; }
    .toggle-icon:hover{ transform: translateY(-1px); border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.06); }
    .toggle-icon.on{
      background: rgba(59,130,246,.14);
      border-color: rgba(59,130,246,.45);
      box-shadow: 0 0 0 1px rgba(59,130,246,.12), 0 10px 30px rgba(0,0,0,.25);
    }
    #btnRotate.on svg{ animation: rotateSpin 1.6s linear infinite; transform-origin: 50% 50%; }
    #btnLines.on svg{ animation: beamBlink 1.1s ease-in-out infinite; }
    @keyframes rotateSpin{
      from{ transform: rotate(0deg); }
      to{ transform: rotate(360deg); }
    }
    @keyframes beamBlink{
      0%,100%{ opacity: 1; }
      50%{ opacity: .35; }
    }
    select,input{
      width:100%;
      border:1px solid rgba(59,130,246,.14);
      background: rgba(255,255,255,.03);
      color: var(--text);
      padding:10px 10px;
      border-radius:14px;
      outline:none;
      backdrop-filter: blur(10px);
      font-size:12px;
    }
    input::placeholder{ color: rgba(245,255,250,.45); }
    select option{ background:#0b0f12; color: var(--text); }

    .list{padding:10px; overflow:auto; flex:1;}
    .item{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px;
      border:1px solid rgba(59,130,246,.10);
      background: rgba(255,255,255,.03);
      border-radius:16px;
      cursor:pointer;
      transition: border-color .12s ease, transform .12s ease, background .12s ease;
      margin-bottom:10px;
    }
    .item:hover{border-color: rgba(59,130,246,.22); transform: translateY(-1px); background: rgba(255,255,255,.04);}
    .item.active{border-color: rgba(59,130,246,.40); background: rgba(59,130,246,.06);}
    .dot{
      width:10px; height:10px; border-radius:999px;
      background: var(--neon);
      box-shadow: 0 0 18px rgba(59,130,246,.55);
      margin-top:4px;
      flex:0 0 auto;
    }
    .meta b{display:block; color:var(--text); font-size:13px; line-height:1.2;}
    .meta small{display:block; color:var(--muted); font-size:12px; margin-top:4px; line-height:1.25;}
    .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
    .tag{
      font-size:11px;
      color: rgba(245,255,250,.85);
      border:1px solid rgba(59,130,246,.16);
      background: rgba(59,130,246,.06);
      padding:4px 8px; border-radius:999px;
    }

    .detail{
      border-top: 1px solid rgba(59,130,246,.12);
      padding:12px 14px 14px;
      background: rgba(0,0,0,.10);
    }
    .detail b{color:var(--text); font-size:13px;}
    .detail p{margin:6px 0 10px; color:var(--muted); font-size:12px; line-height:1.45;}
    audio{display:none;}
    .links{display:flex; flex-wrap:wrap; gap:8px;}
    .link{
      text-decoration:none;
      color: var(--text);
      border:1px solid rgba(59,130,246,.18);
      background: rgba(255,255,255,.03);
      padding:8px 10px;
      border-radius:999px;
      font-size:12px;
    }
    .link:hover{border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.06);}

    .social-bar{
      position:fixed; left:14px; bottom:14px;
      display:flex; gap:10px; align-items:center;
      z-index:10;
    }
    .social-link{
      width:36px; height:36px;
      border-radius:12px;
      border:1px solid rgba(59,130,246,.18);
      background: rgba(6,10,12,.35);
      backdrop-filter: blur(10px);
      color: var(--text);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
    }
    .social-link svg{ width:18px; height:18px; fill: currentColor; }
    .social-link:hover{ transform: translateY(-1px); border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.08); }

    .overlay{
      position:fixed;
      left:50%;
      top:50%;
      transform: translate(-50%, -100%);
      min-width: 240px;
      max-width: 340px;
      padding:12px 12px 12px 32px;
      border:1px solid rgba(59,130,246,.22);
      border-radius:16px;
      background: rgba(6,10,12,.72);
      backdrop-filter: blur(10px);
      color: var(--text);
      z-index:12;
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
      pointer-events:auto;
    }
    .overlay::before{
      content:"";
      position:absolute;
      left:12px;
      top:12px;
      bottom:12px;
      width:6px;
      border-radius:8px;
      background: rgba(59,130,246,.14);
      box-shadow: 0 0 12px rgba(59,130,246,.25);
    }
    .overlay.hidden{ display:none; }
    .ov-head{ display:flex; gap:10px; align-items:flex-start; }
    .ov-dot{
      width:10px; height:10px; border-radius:999px;
      background: rgba(59,130,246,.9);
      box-shadow: 0 0 12px rgba(59,130,246,.45);
      margin-top:4px;
      flex:0 0 auto;
    }
    .ov-title{ font-size:13px; font-weight:700; letter-spacing:.2px; }
    .ov-meta{ font-size:11px; color: var(--muted); margin-top:3px; }
    .ov-desc{ font-size:12px; color: var(--text); margin-top:8px; line-height:1.35; }
    .ov-visibility{ margin-top:8px; }
    .ov-label{
      display:inline-flex;
      align-items:center;
      padding:3px 8px;
      border-radius:999px;
      font-size:11px;
      border:1px solid transparent;
    }
    .ov-label.success{
      border-color: rgba(34,197,94,.55);
      background: rgba(34,197,94,.18);
      color: rgba(240,255,245,.95);
    }
    .ov-label.info{
      border-color: rgba(59,130,246,.55);
      background: rgba(59,130,246,.16);
      color: rgba(235,245,255,.95);
    }
    .ov-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .ov-tag{
      font-size:11px;
      color: rgba(245,255,250,.85);
      border:1px solid rgba(59,130,246,.16);
      background: rgba(59,130,246,.06);
      padding:3px 8px; border-radius:999px;
    }
    .ov-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:nowrap; align-items:center; }
    .ov-actions .ov-btn:last-child{ margin-left:auto; }
    .ov-btn{
      display:inline-flex;
      align-items:center;
      text-decoration:none;
      border:1px solid rgba(59,130,246,.18);
      background: rgba(255,255,255,.03);
      color: var(--text);
      padding:6px 10px;
      border-radius:999px;
      font-size:11px;
      cursor:pointer;
      user-select:none;
      gap:6px;
    }
    .ov-btn svg{ width:12px; height:12px; fill: currentColor; }
    .ov-btn:hover{ border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.06); }
    .ov-btn.ghost{ background: rgba(59,130,246,.08); }
    .ov-btn.danger{
      border-color: rgba(239,68,68,.55);
      background: rgba(239,68,68,.16);
      color: rgba(255,245,245,.98);
    }
    .ov-btn.danger:hover{
      border-color: rgba(239,68,68,.85);
      background: rgba(239,68,68,.24);
    }
    .ov-btn.warn{
      border-color: rgba(245,158,11,.55);
      background: rgba(245,158,11,.16);
      color: rgba(255,250,235,.98);
    }
    .ov-btn.warn:hover{
      border-color: rgba(245,158,11,.85);
      background: rgba(245,158,11,.24);
    }

    @media (max-width: 920px){
      .panel{ width:min(380px, calc(100vw - 28px)); }
      .hint{ display:none; }
      .mobile-panel-toggle{ display:flex; justify-content:flex-end; }
      .panel{
        top:126px;
        left:14px;
        right:14px;
        width:auto;
        transform: translateY(120%);
        opacity: 0;
        pointer-events: none;
        transition: transform .22s ease, opacity .22s ease;
      }
      .panel.mobile-open{
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }
      .social-bar{
        left:50%;
        right:auto;
        transform: translateX(-50%);
      }
    }