#menuBtn{
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 20;
        width: auto;
        padding: 12px 18px;
        border: none;
        border-radius: 14px;
        background: rgba(20,40,80,0.85);
        color: #d8ecff;
        font-size: 15px;
        cursor: pointer;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(120,180,255,0.25);
        box-shadow:
            0 0 18px rgba(0,140,255,0.25);
        transition: 0.25s;
    }
    #menuBtn:hover{
        transform: translateY(-2px);
        background: rgba(40,80,140,0.95);
        box-shadow:
            0 0 24px rgba(80,180,255,0.45);
    }


  :root{
    --bg:#0e1013;
    --panel:#15171c;
    --panel2:#1b1e24;
    --line:rgba(255,255,255,.08);
    --txt:#d7dae0;
    --dim:#868e99;
    --acc:#3fd8e0;
    --acc-dim:rgba(63,216,224,.14);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    display:flex;height:100vh;overflow:hidden;background:var(--bg);color:var(--txt);
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  /* ---------- 左侧 3D 展示区 ---------- */
  #viewport{
    flex:1;position:relative;min-width:0;
    background:
      radial-gradient(900px 520px at 46% 42%, rgba(63,216,224,.07), transparent 62%),
      radial-gradient(1200px 760px at 46% 46%, #1b2027 0%, #12151a 55%, #0b0d10 100%);
  }
  #viewport::before{ /* 细网格科技感纹理 */
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(75% 75% at 50% 50%, #000 40%, transparent 100%);
    -webkit-mask-image:radial-gradient(75% 75% at 50% 50%, #000 40%, transparent 100%);
  }
  #viewport canvas{display:block;position:relative;z-index:1}
  .hud{position:absolute;z-index:2;pointer-events:none;font-size:11px;letter-spacing:.18em;color:var(--dim)}
  .hud.tl{top:18px;right:22px;display:flex;align-items:center;gap:8px}
  .hud.tl .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .hud.bl{bottom:18px;left:22px}
  /* ---------- 右侧控制面板 ---------- */
  #panel{
    width:356px;flex:none;height:100%;overflow-y:auto;z-index:3;
    background:linear-gradient(180deg,#191c22 0%,#14161b 100%);
    border-left:1px solid var(--line);
    padding:30px 26px 40px;
  }
  #panel::-webkit-scrollbar{width:6px}
  #panel::-webkit-scrollbar-thumb{background:#2a2e36;border-radius:3px}
  .brand .sub{font-size:10.5px;letter-spacing:.34em;color:var(--acc);font-family:"SF Mono",Consolas,Menlo,monospace}
  .brand h1{font-size:23px;font-weight:650;margin-top:10px;letter-spacing:.04em;color:#f2f4f7}
  .brand p{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--dim)}
  .section{margin-top:28px}
  .section>h2{
    font-size:11px;font-weight:600;letter-spacing:.28em;color:var(--dim);
    padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:14px;
  }
  .row{display:flex;gap:9px}
  .row+.row{margin-top:9px}
  .btn{
    flex:1;padding:11px 8px;border-radius:10px;cursor:pointer;user-select:none;
    background:var(--panel2);border:1px solid var(--line);color:var(--txt);
    font-size:13.5px;font-family:inherit;letter-spacing:.06em;text-align:center;
    transition:all .18s ease;
  }
  .btn:hover{border-color:rgba(63,216,224,.55);color:#fff;box-shadow:0 0 20px rgba(63,216,224,.10)}
  .btn:active{transform:translateY(1px)}
  .btn.active{
    background:linear-gradient(180deg,rgba(63,216,224,.22),rgba(63,216,224,.08));
    border-color:var(--acc);color:#c9fbff;
  }
  .btn.accent{
    background:linear-gradient(180deg,rgba(63,216,224,.26),rgba(63,216,224,.10));
    border-color:rgba(63,216,224,.6);color:#d6fcff;font-weight:600;
  }
  .btn:disabled{opacity:.38;cursor:not-allowed;box-shadow:none;transform:none}
  .status{
    margin-top:2px;padding:10px 13px;border-radius:10px;border:1px solid var(--line);
    background:rgba(0,0,0,.22);font-size:12px;color:var(--dim);line-height:1.8;
    font-family:"SF Mono",Consolas,Menlo,monospace;
  }
  .status b{color:var(--acc);font-weight:600}
  .chk{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--txt);cursor:pointer;padding:4px 2px;user-select:none}
  .chk input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}
  .note{margin-top:10px;font-size:11.5px;line-height:1.7;color:var(--dim)}
  .progressWrap{margin-top:12px;display:none}
  .progressWrap .bar{height:5px;border-radius:3px;background:#242832;overflow:hidden}
  .progressWrap .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2bb7c0,var(--acc));transition:width .1s}
  .progressWrap .ptext{margin-top:7px;font-size:11px;color:var(--dim);font-family:Consolas,Menlo,monospace}
  .theory{font-size:12.5px;line-height:1.9;color:#b6bcc6}
  .theory em{color:var(--acc);font-style:normal;font-weight:600}
  @media (max-width:860px){
    body{flex-direction:column}
    #panel{width:100%;height:44%;border-left:none;border-top:1px solid var(--line)}
    #viewport{height:56%}
  }