#comparePanel{
  display:none;
}
    
    :root{
      --bg:#f4f7fb;
      --card:#ffffff;
      --ink:#1f2a44;
      --muted:#667085;
      --accent:#4f46e5;
      --accent-2:#0ea5e9;
      --good:#16a34a;
      --warn:#d97706;
      --bad:#dc2626;
      --shadow:0 12px 28px rgba(31,42,68,.10);
      --radius:18px;
      --wood-light:#d7ab6d;
      --wood:#a8733e;
      --wood-dark:#704521;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at top left, rgba(79,70,229,.10), transparent 22%),
        radial-gradient(circle at top right, rgba(14,165,233,.12), transparent 18%),
        linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
      min-height:100vh;
    }
    .app{
      max-width:1400px;
      margin:0 auto;
      padding:14px;
    }
    .hero{
      background:linear-gradient(135deg, rgba(79,70,229,.95), rgba(14,165,233,.92));
      color:#fff;
      border-radius:22px;
      padding:14px 22px;
      box-shadow:var(--shadow);
    }
    .hero h1{
      margin:0;
      font-size:28px;
      letter-spacing:.5px;
    }
    .grid{
      display:grid;
      grid-template-columns:300px 1fr 350px;
      gap:16px;
      margin-top:16px;
      align-items:start;
    }
    .card{
      background:var(--card);
      border:1px solid rgba(215,222,234,.7);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .card h2{ margin:0; font-size:18px; }
    .card-head{
      padding:14px 16px;
      border-bottom:1px solid #eef2f8;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .card-body{ padding:14px 16px 16px; }
    .sidebar .card-body{ padding-top:16px; }
    .control-group{
      margin-bottom:12px;
      padding:12px;
      border:1px solid #edf1f7;
      border-radius:16px;
      background:#fafcff;
    }
    .control-group h3{
      margin:0 0 10px;
      font-size:14px;
    }
    label{
      display:block;
      font-size:14px;
      margin-bottom:10px;
      color:#2a3551;
    }
    select,input[type="range"],input[type="number"]{ width:100%; margin-top:6px; }
    input[type="range"]{ accent-color:var(--accent); }
    select,input[type="number"]{
      padding:9px 11px;
      border-radius:12px;
      border:1px solid #cfd7e6;
      background:#fff;
      font-size:14px;
    }
    .inline{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .limit-row{ grid-template-columns:minmax(132px, 1.3fr) minmax(98px, 1fr); }
    .limit-row label{ white-space:normal; }
    .limit-row .limit-label{ display:block; white-space:nowrap; }
    .limit-row input[type="number"]{ display:block; }
    .btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
    .mode-row{
      display:grid;
      grid-template-columns:48px 1fr;
      align-items:center;
      gap:10px;
      margin-bottom:10px;
    }
    .mode-row .mode-label{
      font-size:14px;
      color:#2a3551;
      font-weight:600;
    }
    .tight-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .small-label{
      font-size:13px;
      color:var(--muted);
      margin-bottom:4px;
    }
    button{
      border:none;
      background:#eef2ff;
      color:#2a2f76;
      padding:10px 12px;
      border-radius:14px;
      font-size:14px;
      font-weight:600;
      cursor:pointer;
      transition:.18s ease;
      box-shadow:0 6px 14px rgba(79,70,229,.07);
    }
    button:hover{ transform:translateY(-1px); }
    button.primary{ background:linear-gradient(135deg, var(--accent), #6366f1); color:#fff; }
    button.secondary{ background:linear-gradient(135deg, #0ea5e9, #38bdf8); color:#fff; }
    button.good{ background:linear-gradient(135deg, #16a34a, #22c55e); color:#fff; }
    button.warn{ background:linear-gradient(135deg, #f59e0b, #fb923c); color:#fff; }
    button.ghost{
      background:#f4f7fb;
      color:#31405f;
      box-shadow:none;
      border:1px solid #dbe3ef;
    }
    button:disabled{
      opacity:.55;
      cursor:not-allowed;
      transform:none !important;
    }
    .board-card .card-body{ padding-top:10px; }
    .status-strip{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:10px;
      margin-top:12px;
    }
    .status-area{
      margin-top:14px;
    }
    .stats-toggle-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .is-hidden{ display:none !important; }
    .stat{
      background:#f8fbff;
      border:1px solid #e5edf9;
      border-radius:15px;
      padding:12px;
    }
    .stat .k{ font-size:12px; color:var(--muted); margin-bottom:6px; }
    .stat .v{ font-size:24px; font-weight:700; }
    .banner{
      min-height:56px;
      display:flex;
      align-items:center;
      gap:12px;
      background:linear-gradient(180deg, #fff, #f8fbff);
      border:1px solid #e7ecf5;
      padding:12px 14px;
      border-radius:16px;
      margin-bottom:14px;
      font-size:15px;
      line-height:1.5;
    }
    .banner b{ color:#19233b; }
    .board{
      position:relative;
      min-height:470px;
      border-radius:20px;
      border:1px solid #dbe4ef;
      background:
        radial-gradient(ellipse at 50% 104%, rgba(72,92,119,.10) 0%, transparent 56%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 72%, #edf1f6 100%);
      overflow:hidden;
      padding:20px 16px 16px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -24px 48px rgba(92,113,139,.08),
        0 12px 28px rgba(31,42,68,.06);
      isolation:isolate;
    }
    .board::after{
      content:"";
      position:absolute;
      left:6%; right:6%; bottom:104px;
      height:20px;
      background:linear-gradient(180deg, #d8b076 0%, #bc864b 28%, #986333 100%);
      border:1px solid rgba(104,65,30,.34);
      border-radius:8px 8px 10px 10px;
      box-shadow:
        inset 0 3px 0 rgba(255,255,255,.23),
        inset 0 -3px 4px rgba(70,39,15,.14),
        0 9px 14px rgba(65,50,38,.16);
      z-index:0;
    }
    .pegs{
      position:relative;
      height:390px;
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:18px;
      margin-top:6px;
      z-index:1;
    }
    .peg{
      position:relative;
      border-radius:18px;
      padding-top:20px;
      cursor:pointer;
      user-select:none;
      transition:.18s ease;
      border:2px solid transparent;
      background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(79,70,229,.018));
    }
    .peg:hover{ background:linear-gradient(180deg, rgba(79,70,229,.05), rgba(14,165,233,.03)); }
    .peg.selected{
      border-color:rgba(79,70,229,.75);
      box-shadow: inset 0 0 0 4px rgba(79,70,229,.08);
    }
    .peg.legal{
      border-color:rgba(22,163,74,.55);
      box-shadow: inset 0 0 0 4px rgba(22,163,74,.08);
    }
    .pole{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      bottom:69px;
      width:16px;
      height:266px;
      border-radius:999px;
      background:
        linear-gradient(90deg, #704720 0%, #ba8448 24%, #e0b979 48%, #ad7540 72%, #69401d 100%);
      border:1px solid rgba(88,50,19,.42);
      box-shadow:
        inset 2px 0 2px rgba(255,255,255,.18),
        3px 6px 8px rgba(64,45,29,.14);
      z-index:1;
    }
    .pole::before{
      content:"";
      position:absolute;
      left:50%;
      top:-3px;
      width:14px;
      height:6px;
      transform:translateX(-50%);
      border-radius:50%;
      background:linear-gradient(180deg, #e5c38e, #a8733e);
      border:1px solid rgba(88,50,19,.28);
    }
    .base-slot{
      display:none;
    }
    .peg-name{
      position:absolute;
      top:0;
      left:50%;
      transform:translateX(-50%);
      background:linear-gradient(180deg, #fff, #f4f7fb);
      border:1px solid #d5dfec;
      border-radius:999px;
      padding:6px 14px;
      font-weight:700;
      font-size:20px;
      box-shadow:0 7px 16px rgba(31,42,68,.08), inset 0 1px 0 #fff;
      z-index:8;
    }
    .disc{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      height:30px;
      border-radius:13px 13px 10px 10px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      background:
        linear-gradient(90deg, rgba(0,0,0,.10), transparent 13% 84%, rgba(0,0,0,.12)),
        linear-gradient(180deg, var(--disc-light) 0%, var(--disc-color) 30%, var(--disc-color) 62%, var(--disc-dark) 100%);
      box-shadow:
        0 5px 8px rgba(31,42,68,.18),
        inset 0 1px 1px rgba(255,255,255,.38),
        inset 0 -3px 3px rgba(0,0,0,.14);
      border:1px solid rgba(44,55,78,.18);
      transition:opacity .18s ease, transform .2s cubic-bezier(.2,.8,.2,1), filter .2s ease;
      will-change: transform, left, bottom, width, opacity;
      z-index:4;
    }
    .disc::before{
      content:"";
      position:absolute;
      left:7px;
      right:7px;
      top:1px;
      height:9px;
      border-radius:50%;
      background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.05));
      border-top:1px solid rgba(255,255,255,.36);
      pointer-events:none;
    }
    .disc-label{
      position:absolute;
      right:11px;
      top:50%;
      transform:translateY(-50%);
      z-index:2;
      min-width:14px;
      height:16px;
      padding:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color:rgba(255,255,255,.96);
      background:transparent;
      border:0;
      font-size:12px;
      font-weight:800;
      line-height:1;
      text-shadow:0 1px 2px rgba(0,0,0,.36);
    }
    .peg.selected .disc.top-disc{
      transform:translate(-50%, -8px);
      filter:brightness(1.08) saturate(1.08);
    }
    .disc.final-hidden{ opacity:0; }
    .flying-disc{
      position:absolute;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      border-radius:13px 13px 10px 10px;
      box-shadow:0 16px 22px rgba(31,42,68,.24), inset 0 1px 1px rgba(255,255,255,.38), inset 0 -3px 3px rgba(0,0,0,.14);
      z-index:40;
      pointer-events:none;
      will-change:transform, top, left;
    }
    .board.error-shake{ animation:boardShake .4s ease; }
    .peg.error-mark{
      border-color:rgba(220,38,38,.75) !important;
      box-shadow: inset 0 0 0 5px rgba(220,38,38,.10), 0 0 0 4px rgba(220,38,38,.12);
      background:linear-gradient(180deg, rgba(254,226,226,.95), rgba(255,255,255,.92));
    }
    @keyframes boardShake{
      0%,100% { transform:translateX(0); }
      20% { transform:translateX(-6px); }
      40% { transform:translateX(6px); }
      60% { transform:translateX(-4px); }
      80% { transform:translateX(4px); }
    }
    .peg-footer{
      position:absolute;
      bottom:18px;
      left:0; right:0;
      text-align:center;
      color:#4b5565;
      font-size:18px;
      font-weight:600;
    }
    .panel{
      border:1px solid #edf1f7;
      border-radius:16px;
      padding:14px;
      background:#fafcff;
      margin-bottom:12px;
    }
    .mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .mini{
      background:#fff;
      border:1px solid #e6edf7;
      border-radius:14px;
      padding:12px;
    }
    .mini .key{ color:var(--muted); font-size:12px; margin-bottom:6px; }
    .mini .val{ font-size:20px; font-weight:700; }
    .history{
      max-height:260px;
      overflow:auto;
      padding-right:4px;
    }
    .right-panels .card-body{
      padding:14px;
      height:100%;
    }
    .right-panels .log-panel{
      display:flex;
      flex-direction:column;
      margin-bottom:0;
      min-height:560px;
    }
    .right-panels .log-panel .history{
      flex:1;
      max-height:none;
    }
    .bottom-teaching{
      margin-top:14px;
    }
    .bottom-teaching .card-body{
      padding:14px;
    }
    .bottom-teaching-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }
    .bottom-teaching-head h3{
      margin:0;
      font-size:16px;
    }
    .bottom-teaching-content{
      display:grid;
      grid-template-columns:1.1fr 1fr 1.6fr;
      gap:10px;
      align-items:stretch;
    }
    .bottom-teaching .panel,
    .bottom-teaching .formula{
      margin-bottom:0;
      height:100%;
    }
    .history-item{
      display:flex;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius:12px;
      background:#fff;
      border:1px solid #e9eff8;
      margin-bottom:8px;
      font-size:14px;
    }
    .history-item strong{ color:#23304d; }
    .tip{
      padding:12px 14px;
      border-radius:14px;
      background:#fff7ed;
      border:1px solid #fed7aa;
      color:#9a3412;
      font-size:14px;
      line-height:1.6;
    }
    .formula{
      background:#f5f3ff;
      border:1px solid #ddd6fe;
      color:#4338ca;
      padding:12px 14px;
      border-radius:14px;
      font-size:14px;
      line-height:1.7;
    }
    .legend{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .chip{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      background:#fff;
      border:1px solid #e4ebf7;
    }
    .toast{
      position:fixed;
      right:18px;
      bottom:18px;
      min-width:250px;
      max-width:380px;
      background:#fff;
      border:1px solid #dce6f5;
      border-left:6px solid var(--accent);
      box-shadow:var(--shadow);
      border-radius:18px;
      padding:12px 14px;
      z-index:200;
      opacity:0;
      pointer-events:none;
      transform:translateY(10px);
      transition:.22s ease;
    }
    .toast.show{ opacity:1; transform:translateY(0); }
    .toast.good{ border-left-color:var(--good); }
    .toast.bad{ border-left-color:var(--bad); }
    .toast.warn{ border-left-color:var(--warn); }
    .alert-overlay{
      position:fixed;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      background:rgba(15,23,42,.24);
      backdrop-filter:blur(3px);
      z-index:260;
      opacity:0;
      pointer-events:none;
      transition:opacity .16s ease;
    }
    .alert-overlay.show{
      opacity:1;
      pointer-events:auto;
    }
    .alert-panel{
      width:min(820px, 92vw);
      background:linear-gradient(180deg, #fff, #fff8f8);
      border:2px solid rgba(220,38,38,.22);
      border-left:12px solid var(--bad);
      border-radius:28px;
      box-shadow:0 24px 60px rgba(15,23,42,.28);
      padding:24px 28px;
      display:flex;
      align-items:center;
      gap:18px;
      transform:scale(.96);
      transition:transform .16s ease;
    }
    .alert-overlay.show .alert-panel{ transform:scale(1); }
    .alert-icon{
      width:76px;
      height:76px;
      border-radius:22px;
      background:linear-gradient(135deg, #ef4444, #b91c1c);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:38px;
      flex:0 0 auto;
      box-shadow:0 16px 30px rgba(220,38,38,.28);
    }
    .alert-main{ flex:1; min-width:0; }
    .alert-title{
      font-size:28px;
      font-weight:800;
      color:#7f1d1d;
      margin-bottom:6px;
      letter-spacing:.5px;
    }
    .alert-text{
      font-size:20px;
      line-height:1.5;
      color:#1f2937;
      font-weight:700;
    }
    .alert-hint{
      margin-top:10px;
      font-size:13px;
      color:#7c2d12;
      opacity:.9;
    }
    .footer-note{
      margin-top:12px;
      color:#667085;
      font-size:13px;
      line-height:1.7;
    }
    .kbd{
      display:inline-block;
      padding:2px 8px;
      border-radius:8px;
      border:1px solid #d6deec;
      background:#fff;
      font-size:12px;
      font-weight:700;
    }
    @media (max-width:1180px){
      .grid{ grid-template-columns:1fr; }
      .bottom-teaching-content{ grid-template-columns:1fr; }
      .right-panels .log-panel{ min-height:320px; }
    }
    @media (max-width:760px){
      .status-strip{ grid-template-columns:1fr 1fr; }
      .btn-row,.inline,.mini-grid,.tight-row{ grid-template-columns:1fr; }
      .hero h1{ font-size:24px; }
      .pegs{ gap:8px; }
      .mode-row{ grid-template-columns:1fr; gap:6px; }
      .limit-row{ grid-template-columns:1fr; }
      .alert-panel{ padding:18px 16px; gap:12px; }
      .alert-icon{ width:60px; height:60px; font-size:28px; border-radius:18px; }
      .alert-title{ font-size:22px; }
      .alert-text{ font-size:17px; }
    }
    .home-nav-bar{
      position:sticky;top:0;z-index:999;
      display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
      padding:10px 16px;
      background:rgba(255,255,255,.88);
      border-bottom:1px solid rgba(148,163,184,.35);
      backdrop-filter:blur(6px);
    }
    .home-nav-link{
      text-decoration:none;
      color:#1d4ed8;
      font-weight:800;
      font-size:14px;
      padding:6px 10px;
      border-radius:999px;
      background:#edf3ff;
      border:1px solid #c7d8ff;
    }
    .home-nav-meta{font-size:13px;color:#334155;font-weight:650;}
    .theme-toggle{
      border:1px solid #c7d8ff;
      background:#edf3ff;
      color:#1d4ed8;
      font-weight:800;
      font-size:13px;
      padding:6px 10px;
      border-radius:999px;
      cursor:pointer;
    }
    body[data-theme="dark"]{
      --bg:#0b1325;
      --card:#111b2f;
      --ink:#e9f0ff;
      --muted:#b2bfd8;
      --shadow:0 12px 28px rgba(0,0,0,.32);
      background:
        radial-gradient(circle at top left, rgba(99,102,241,.22), transparent 30%),
        radial-gradient(circle at top right, rgba(14,165,233,.22), transparent 28%),
        linear-gradient(180deg, #0a1020 0%, var(--bg) 100%);
    }
    body[data-theme="dark"] .home-nav-bar{
      background:rgba(10,16,35,.78);
      border-bottom-color:rgba(122,167,255,.35);
    }
    body[data-theme="dark"] .home-nav-link{
      color:#dce9ff;
      background:rgba(122,167,255,.18);
      border-color:rgba(122,167,255,.45);
    }
    body[data-theme="dark"] .home-nav-meta{ color:#c3d4fb; }
    body[data-theme="dark"] .theme-toggle{
      color:#dce9ff;
      background:#1a2a48;
      border-color:#3f5b86;
    }
    body[data-theme="dark"] .card,
    body[data-theme="dark"] .panel,
    body[data-theme="dark"] .mini,
    body[data-theme="dark"] .control-group,
    body[data-theme="dark"] .stat,
    body[data-theme="dark"] .banner,
    body[data-theme="dark"] .board,
    body[data-theme="dark"] .peg-name,
    body[data-theme="dark"] .history-item,
    body[data-theme="dark"] .formula,
    body[data-theme="dark"] .toast{
      background:#111b2f;
      border-color:#2d3c58;
      color:var(--ink);
    }
    body[data-theme="dark"] .chip{
      background:#16233c;
      border-color:#344867;
      color:#dce8ff;
    }
    body[data-theme="dark"] .tip{
      background:#3a2718;
      border-color:#8a5a33;
      color:#ffe7cc;
    }
    body[data-theme="dark"] .formula{
      background:#1a2440;
      border-color:#3d4e77;
      color:#d8e2ff;
    }
    body[data-theme="dark"] .card-head{
      border-bottom-color:#2d3c58;
    }
    body[data-theme="dark"] select,
    body[data-theme="dark"] input[type="number"]{
      background:#0f172a;
      border-color:#344867;
      color:var(--ink);
    }
    body[data-theme="dark"] button.ghost{
      background:#16233c;
      border-color:#344867;
      color:#d7e5ff;
    }
    body[data-theme="dark"] label,
    body[data-theme="dark"] .mode-row .mode-label,
    body[data-theme="dark"] .small-label,
    body[data-theme="dark"] .stat .k,
    body[data-theme="dark"] .footer-note,
    body[data-theme="dark"] .history-item,
    body[data-theme="dark"] .tip{
      color:#d3e0fb;
    }
    body[data-theme="dark"] .peg-footer{
      color:#dbe8ff;
      text-shadow:0 1px 2px rgba(0,0,0,.35);
    }
    body[data-theme="dark"] .banner b,
    body[data-theme="dark"] .history-item strong{
      color:#f4f8ff;
    }
    body[data-theme="dark"] .board{
      background:
        radial-gradient(ellipse at 50% 112%, rgba(169,112,56,.22) 0%, rgba(169,112,56,.08) 35%, transparent 62%),
        linear-gradient(180deg, #101d34 0%, #0d1729 74%, #111827 100%);
      border-color:#344867;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -24px 48px rgba(0,0,0,.22);
    }