:root{--bg: #0e1116;--panel: rgba(20, 25, 33, .92);--panel-border: rgba(255, 255, 255, .08);--text: #e8ecf1;--text-dim: #9aa6b2;--accent: #d4a24e;--accent2: #4ea1d4;--ok: #4caf78;--err: #e06a5e;--math: #7fd1ff}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Microsoft YaHei,PingFang SC,system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}#app{position:fixed;top:0;right:0;bottom:0;left:0}#viewer{position:absolute;top:0;right:0;bottom:0;left:0}#viewer canvas{display:block}.portal{position:relative;z-index:2;height:100%;overflow-y:auto;padding:32px 28px;background:radial-gradient(1200px 600px at 70% -10%,#1b2735,#0e1116 55%)}.portal h1{font-size:28px;margin:0 0 6px;letter-spacing:1px}.portal .sub{color:var(--text-dim);line-height:1.7;max-width:980px;font-size:14px}.portal .sub b{color:var(--accent)}.portal .badges{margin:10px 0 22px;display:flex;gap:8px;flex-wrap:wrap}.badge{font-size:12px;border:1px solid var(--panel-border);border-radius:999px;padding:3px 12px;color:var(--text-dim);background:#ffffff08}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;max-width:1200px}.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:18px;cursor:pointer;transition:transform .15s,border-color .15s;text-decoration:none;color:var(--text);display:block}.card:hover{transform:translateY(-3px);border-color:var(--accent)}.card .tag{font-size:12px;color:#0e1116;background:var(--accent);border-radius:6px;padding:2px 8px;display:inline-block;margin-bottom:10px;font-weight:700}.card .tag.blue{background:var(--accent2)}.card h3{margin:0 0 8px;font-size:17px}.card p{margin:0;font-size:13px;color:var(--text-dim);line-height:1.65}.card .meta{margin-top:12px;font-size:12px;color:var(--math)}.section-title{font-size:16px;margin:26px 0 12px;color:var(--accent);letter-spacing:1px}#hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.hud-block{pointer-events:auto}#topbar{position:absolute;top:14px;left:14px;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:10px 14px;max-width:42%}#topbar .t{font-weight:700;font-size:15px}#topbar .s{font-size:12px;color:var(--text-dim);margin-top:3px}#back{position:absolute;top:14px;right:14px;background:var(--panel);border:1px solid var(--panel-border);color:var(--text);border-radius:10px;padding:8px 14px;cursor:pointer;font-size:13px}#back:hover{border-color:var(--accent)}#panel{position:absolute;right:14px;top:58px;bottom:14px;width:360px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}#panel .ph{padding:12px 16px;border-bottom:1px solid var(--panel-border);font-weight:700;font-size:14px;background:#ffffff08}#panel .pb{overflow-y:auto;padding:12px 16px;flex:1}#panel .pb::-webkit-scrollbar{width:6px}#panel .pb::-webkit-scrollbar-thumb{background:#333d4a;border-radius:3px}.block{margin-bottom:16px}.block h4{margin:0 0 6px;font-size:13px;color:var(--accent);letter-spacing:.5px}.block p,.block li{font-size:13px;line-height:1.7;color:#cfd7df;margin:4px 0}.block ul{margin:4px 0;padding-left:18px}.controls{display:flex;flex-direction:column;gap:8px}.ctl-row{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}.ctl-row label{min-width:92px;color:var(--text-dim)}button.btn{background:#26303d;color:var(--text);border:1px solid var(--panel-border);border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer}button.btn:hover{border-color:var(--accent)}button.btn.primary{background:var(--accent);color:#14100a;font-weight:700;border-color:var(--accent)}button.btn.blue{background:var(--accent2);color:#06121b;font-weight:700;border-color:var(--accent2)}input[type=range]{flex:1;accent-color:var(--accent)}input[type=number],input[type=text]{background:#141a22;border:1px solid var(--panel-border);color:var(--text);border-radius:6px;padding:5px 8px;width:64px;font-size:13px}input.matrix-cell{width:48px;text-align:center}select{background:#141a22;color:var(--text);border:1px solid var(--panel-border);border-radius:6px;padding:5px;font-size:13px}.val{color:var(--math);font-family:Consolas,monospace}.quiz{background:#7fd1ff0f;border:1px solid rgba(127,209,255,.18);border-radius:10px;padding:10px 12px;margin-bottom:12px}.quiz .q{font-size:13px;line-height:1.65;margin-bottom:8px}.quiz .ans-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.feedback{font-size:12px;margin-top:6px;min-height:16px}.feedback.ok{color:var(--ok)}.feedback.err{color:var(--err)}.sol{font-size:12px;color:var(--text-dim);background:#ffffff08;border-radius:8px;padding:8px 10px;margin-top:8px;line-height:1.6;display:none}.sol.show{display:block}#statusbar{position:absolute;left:14px;bottom:14px;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:8px 14px;font-size:12px;color:var(--text-dim);font-family:Consolas,monospace;max-width:50%}#labels{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.label3d{position:absolute;transform:translate(-50%,-100%);background:#0e1116d9;border:1px solid var(--accent);color:var(--text);font-size:12px;padding:2px 8px;border-radius:6px;white-space:nowrap;font-family:Consolas,monospace}.label3d:after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:var(--accent);transform:translate(-50%) rotate(45deg);border-right:1px solid var(--accent);border-bottom:1px solid var(--accent)}.label3d.blue{border-color:var(--accent2)}.label3d.blue:after{background:var(--accent2);border-color:var(--accent2)}#loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0e1116b3;font-size:15px;z-index:20}.spinner{width:34px;height:34px;border:3px solid #333d4a;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin-right:12px}@keyframes spin{to{transform:rotate(360deg)}}.hint{font-size:12px;color:var(--text-dim)}table.cmp{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}table.cmp th,table.cmp td{border:1px solid var(--panel-border);padding:4px 6px;text-align:center}table.cmp th{background:#ffffff0a;color:var(--text-dim);font-weight:400}.matrix-grid{display:inline-grid;grid-template-columns:repeat(3,auto);gap:4px;vertical-align:middle}.flex-between{display:flex;justify-content:space-between;align-items:center;gap:8px}