:root{
    --acc:#f08a24; --uni:#2f80ed; --dec:#9b51e0;
    --ink:#1f2937; --sub:#64748b; --line:#e2e8f0; --bg:#eef4f9; --card:#fff; --rail:#1f8a53;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;}
  body{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;background:var(--bg);color:var(--ink);overflow:hidden;}
  .app{height:100vh;padding:10px;display:grid;gap:10px;grid-template-columns:minmax(440px,44%) 1fr;grid-template-rows:auto 1fr;}
  .topbar{grid-column:1/3;display:flex;align-items:center;gap:12px;background:var(--card);
    border:1px solid var(--line);border-radius:12px;padding:8px 14px;box-shadow:0 1px 3px rgba(15,40,70,.06);}
  .topbar h1{font-size:18.5px;margin:0;letter-spacing:.4px;}
  .chip{font-size:13px;color:#fff;background:var(--rail);padding:2px 9px;border-radius:6px;}
  .topbar .hint{font-size:13px;color:var(--sub);margin-left:auto;}
  #sndBtn{font-family:inherit;font-size:13px;font-weight:700;padding:5px 12px;border-radius:8px;
    border:1px solid #cbd5e1;background:#f1f5f9;color:#334155;cursor:pointer;}

  .left{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;}
  .right{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;}
  .cardx{background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 1px 3px rgba(15,40,70,.06);padding:10px 12px;}
  .cardx h2{font-size:15px;margin:0 0 8px;font-weight:700;display:flex;align-items:center;gap:8px;}
  .cardx h2::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--rail);}

  /* ---- 3D 舞台 ---- */
  .stage{position:relative;border-radius:10px;overflow:hidden;background:#b9dcf6;}
  .stageRatio{width:100%;padding-top:56.25%;}   /* 固定 16:9 占位，不依赖 aspect-ratio 支持 */
  .stage canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;cursor:default;}
  .stage.armed canvas{cursor:pointer;}
  .errbox{display:none;position:absolute;left:10px;right:10px;top:10px;z-index:9;background:#fee2e2;
    border:1px solid #ef4444;color:#991b1b;font-size:12.5px;font-weight:700;padding:8px 10px;
    border-radius:8px;white-space:pre-wrap;word-break:break-all;}
  .badge{position:absolute;top:10px;right:12px;font-size:14px;font-weight:700;color:#fff;
    padding:4px 12px;border-radius:20px;background:#94a3b8;transition:background .2s;}
  .bubble{position:absolute;left:12px;top:12px;max-width:62%;background:rgba(255,255,255,.94);
    border:2px solid var(--rail);border-radius:12px;padding:6px 11px;font-size:13.5px;font-weight:700;
    color:#14532d;box-shadow:0 2px 8px rgba(0,0,0,.14);transition:opacity .3s;}
  .bubble::after{content:"";position:absolute;left:22px;bottom:-9px;border:6px solid transparent;border-top-color:var(--rail);}
  .bubble.hide{opacity:0;}
  .tap{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(15,23,42,.78);
    color:#fff;font-size:13.5px;font-weight:700;padding:6px 16px;border-radius:20px;
    animation:pulse 1.4s ease-in-out infinite;white-space:nowrap;}
  .tap.hide{display:none;}
  @keyframes pulse{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.05);}}
  .arrived{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);background:rgba(31,138,83,.94);
    color:#fff;font-size:22px;font-weight:800;padding:12px 30px;border-radius:14px;letter-spacing:2px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .45s;pointer-events:none;}
  .arrived.show{opacity:1;}

  /* ---- 进度条 ---- */
  .bar-wrap{margin-top:9px;}
  .bar{position:relative;height:16px;border-radius:8px;overflow:hidden;display:flex;
    border:1px solid #cbd5e1;background:#f1f5f9;}
  .bar .seg{height:100%;}
  .s-acc{background:var(--acc);opacity:.85;} .s-uni{background:var(--uni);opacity:.85;} .s-dec{background:var(--dec);opacity:.85;}
  .bar .dot{position:absolute;top:-5px;width:12px;height:24px;border-radius:6px;background:#0f172a;
    box-shadow:0 0 0 2px #fff;transform:translateX(-50%);}
  .bar-labels{display:flex;font-size:12px;color:var(--sub);margin-top:4px;}
  .bar-labels span{text-align:center;}

  /* ---- 控件 ---- */
  .ctrls{display:flex;flex-direction:column;gap:9px;}
  .ctrl-row{display:grid;grid-template-columns:148px 1fr 112px;align-items:center;gap:10px;}
  .ctrl-row label{font-size:13.5px;font-weight:600;}
  .ctrl-row label small{display:block;font-weight:400;color:var(--sub);font-size:11.5px;}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:#dbe4ee;outline:none;}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
    background:var(--rail);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:pointer;}
  .valbox{font-size:13px;text-align:right;font-variant-numeric:tabular-nums;}
  .valbox b{font-size:16px;color:#0f172a;}
  .valbox span{display:block;font-size:11.5px;color:var(--sub);}
  .btn-row{display:flex;gap:10px;align-items:center;margin-top:4px;flex-wrap:wrap;}
  button.act{font-family:inherit;font-size:14.5px;font-weight:700;padding:8px 20px;border-radius:9px;border:none;cursor:pointer;}
  #play{background:var(--rail);color:#fff;}
  #reset{background:#e2e8f0;color:#334155;}
  button.act:active{transform:translateY(1px);}
  .note{font-size:12px;color:var(--sub);line-height:1.6;}
  .readout{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .rbox{background:#f7fafc;border:1px solid var(--line);border-radius:9px;padding:7px 9px;text-align:center;}
  .rbox .k{font-size:11.5px;color:var(--sub);}
  .rbox .v2{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25;}
  .rbox .u{font-size:11.5px;color:var(--sub);font-weight:400;}

  /* ---- 图表 ---- */
  .chart-card{display:flex;flex-direction:column;min-height:196px;flex:1 1 210px;}
  .chart-card .head{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
  .chart-card .head h2{margin:0;font-size:15px;}
  .chart-card .head h2::before{background:var(--uni);}
  .legend{display:flex;gap:6px;margin-left:auto;font-size:11.5px;color:var(--sub);}
  .legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:3px;}
  .cv-wrap{position:relative;flex:1;min-height:120px;}
  .cv-wrap canvas{width:100%;height:100%;display:block;}
  .fitems{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .fitem{border:1px solid var(--line);border-left:5px solid #cbd5e1;border-radius:9px;padding:7px 10px;
    background:#fafcfd;transition:background .2s,box-shadow .2s;}
  .fitem .t{font-size:12.5px;font-weight:700;margin-bottom:3px;}
  .fitem .e{font-size:13.5px;line-height:1.65;font-variant-numeric:tabular-nums;}
  .tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:4px;color:#fff;vertical-align:1px;}
  .tag.once{background:#ea580c;} .tag.quad{background:#0e7490;}
  .fitem.acc{border-left-color:var(--acc);} .fitem.uni{border-left-color:var(--uni);} .fitem.dec{border-left-color:var(--dec);}
  .fitem.active{background:#eefbf4;box-shadow:0 0 0 2px rgba(31,138,83,.25);}
  .concl{font-size:13px;color:#334155;line-height:1.75;margin-top:9px;background:#f7fafc;border-radius:9px;
    padding:8px 12px;border:1px dashed #cbd5e1;}
  .concl b{color:var(--rail);}
  @media (max-width:1040px){
    body{overflow:auto;}
    .app{height:auto;grid-template-columns:1fr;grid-template-rows:auto auto auto;}
    .topbar{grid-column:1/2;} .left,.right{overflow:visible;} .chart-card{min-height:230px;}
  }