:root{--bg:#eef1f7;--panel:#fff;--panel2:#f6f8fb;--text:#23272f;--muted:#6b7686;--line:#e4e8f0;--accent:#5b5bd6;--accent2:#0ea5e9;--good:#16a34a;--bad:#dc2626;--warn:#d97706;--u:44px;--radius:14px;--keypress:#4f46e5}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:linear-gradient(180deg,#f2f5fb,var(--bg) 40%);color:var(--text);min-height:100vh}a{color:inherit;text-decoration:none}header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.nav{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px}.logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:#fff;font-size:20px;box-shadow:0 4px 12px rgba(91,91,214,.35)}.lang-switch{margin-left:0;display:inline-flex;align-items:center;gap:2px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px}.lang-switch a{display:inline-flex;align-items:center;gap:4px;padding:5px 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .15s,background .15s}.lang-switch a:hover{color:var(--text);background:rgba(0,0,0,.04)}.lang-switch a.active{background:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(91,91,214,.35)}.lang-switch a .globe{font-size:14px;opacity:.85}.nav-links{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}.nav-links a{padding:8px 14px;border-radius:9px;font-size:14px;color:var(--muted);font-weight:600;transition:.15s}.nav-links a:hover,.nav-links a.active{color:var(--accent);background:#eef0fb}.wrap{max-width:1200px;margin:0 auto;padding:28px 20px 60px}.hero{text-align:center;padding:8px 0 24px}.hero h1{font-size:34px;font-weight:800;letter-spacing:-.5px}.hero p{color:var(--muted);margin-top:10px;font-size:16px}.hero .pill{display:inline-block;margin-top:16px;padding:6px 14px;border-radius:999px;background:#eef2ff;color:var(--accent);font-size:13px;font-weight:600}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:10px 0 22px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:0 6px 18px rgba(40,50,70,.04)}.stat.hero-stat{background:linear-gradient(135deg,#4f46e5,#0ea5e9);border:none;color:#fff}.stat .s-label{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.3px}.stat .s-value{font-size:30px;font-weight:800;margin-top:6px;line-height:1;font-variant-numeric:tabular-nums}.stat .s-sub{font-size:12px;color:var(--muted);margin-top:6px}.stat.hero-stat .s-label,.stat.hero-stat .s-sub{color:rgba(255,255,255,.8)}.stat .mini{font-size:12px;font-weight:600;margin-top:6px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(40,50,70,.05);margin-bottom:22px;overflow:hidden}.panel-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}.panel-head h2{font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px}.panel-head .desc{color:var(--muted);font-size:13px}.panel-body{padding:22px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}.btn{border:1px solid var(--line);background:#fff;color:var(--text);padding:9px 16px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}.btn:hover{border-color:#c7cbe6;background:#f8f8ff}.btn.on{background:var(--accent);border-color:var(--accent);color:#fff}.kb-scroll{overflow-x:auto;padding-bottom:6px}.kb{display:inline-flex;flex-direction:column;gap:6px;min-width:min-content;padding:4px}.kb-row{display:flex;gap:6px}.keycap{height:var(--u);min-width:calc(var(--u) * var(--w,1));flex:0 0 auto;width:calc(var(--u) * var(--w,1));border-radius:9px;position:relative;user-select:none;background:linear-gradient(180deg,#fff,#eef1f7);border:1px solid #d2d8e3;border-bottom-width:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);display:grid;place-items:center;font-weight:700;color:#3b4351;font-size:14px;transition:transform .05s,background .05s,color .05s,box-shadow .05s}.keycap .sub{position:absolute;top:3px;left:5px;font-size:10px;font-weight:600;color:#98a1af}.keycap .wide{font-size:12px;letter-spacing:.5px}.keycap.pressed{background:linear-gradient(180deg,var(--keypress),#4338ca);color:#fff;border-color:var(--keypress);border-bottom-width:1px;box-shadow:0 0 0 2px rgba(79,70,229,.28),0 0 18px rgba(79,70,229,.45);transform:translateY(2px)}.keycap.pressed .sub{color:rgba(255,255,255,.7)}.kb-extra{display:flex;gap:18px;flex-wrap:wrap;margin-top:3px}.kb-col{display:flex;flex-direction:column;gap:6px}.kb-extra-label{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:2px}.numpad{display:grid;grid-template-columns:repeat(4,var(--u));gap:6px}.numpad .keycap{width:100%;min-width:0}.numpad .sp2{grid-column:span 2;width:auto;min-width:0}.numpad .sp2x2{grid-row:span 2;height:auto}.nav-cluster{display:grid;grid-template-columns:repeat(3,var(--u));gap:6px;align-content:start}.nav-cluster .keycap{width:100%;min-width:0}.blk{visibility:hidden}.log-wrap{max-height:260px;overflow-y:auto}.log-table{width:100%;border-collapse:collapse;font-size:13px}.log-table th,.log-table td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}.log-table th{color:var(--muted);font-weight:600;font-size:12px;position:sticky;top:0;background:var(--panel2)}.log-table td:first-child{width:130px;color:var(--muted)}.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700}.tag.down{background:#e6f7ee;color:var(--good)}.tag.up{background:#ffe9ec;color:var(--bad)}.tag.rep{background:#fff4e5;color:var(--warn)}.two-col{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}.side{position:sticky;top:78px;display:flex;flex-direction:column;gap:16px}.hint{background:#fff;border:1px dashed var(--line);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--muted);margin-bottom:14px}.hint b{color:var(--accent)}.react-area{min-height:220px;display:grid;place-items:center;text-align:center;border-radius:12px;background:var(--panel2);border:2px dashed var(--line);transition:.2s;padding:30px}.react-area.armed{background:#fff7ed;border-color:#fdba74}.react-area.ready{background:#eafcf0;border-color:#4ade80}.react-area.result{background:#eef2ff;border-color:#a5b4fc}.react-area.early{background:#fef2f2;border-color:#fca5a5}.react-big{font-size:40px;font-weight:800}.react-note{color:var(--muted);margin-top:8px;font-size:14px}.react-results{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;justify-content:center}.r-item{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 14px;font-size:13px;font-weight:700}.r-item small{display:block;color:var(--muted);font-weight:600}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:18px}.info-card h3{font-size:15px;font-weight:800;margin-bottom:8px;display:flex;gap:8px;align-items:center}.info-card p{font-size:13.5px;color:#4a5568;line-height:1.65}.held-list{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;font-weight:700}.held-list span{background:var(--accent);color:#fff;padding:5px 10px;border-radius:7px}footer{background:#fff;border-top:1px solid var(--line)}.foot{max-width:1200px;margin:0 auto;padding:24px 20px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7}@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.info-grid{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}.side{position:static}}@media (max-width:560px){.hero h1{font-size:26px}.stat .s-value{font-size:24px}:root{--u:40px}}