*{box-sizing:border-box;margin:0}body{font-family:PingFang SC,Microsoft YaHei,sans-serif;background:#f4f5fb;color:#333}.demo-page{max-width:960px;margin:0 auto;padding:0 20px 60px}.topbar{display:flex;align-items:center;gap:12px;background:#6c5ce7;color:#fff;padding:14px 20px;margin:0 -20px 30px}.logo{font-size:20px;font-weight:700}.sub{opacity:.85;font-size:14px}h1{font-size:24px;margin-bottom:20px;text-align:center}.num{display:inline-block;width:20px;height:20px;border-radius:50%;background:currentColor;color:#fff;text-align:center;line-height:20px;margin-right:6px;font-size:12px}.card{background:#fff;border-radius:14px;padding:28px;box-shadow:0 4px 16px #6c5ce714;margin-bottom:20px}.card h2{font-size:18px;margin-bottom:12px;color:#6c5ce7}.card h3{font-size:15px;margin-bottom:8px}.hint{color:#888;font-size:13px;margin-bottom:12px}.form{display:flex;flex-direction:column;gap:14px;max-width:380px}.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#555}.form input,.form select{padding:10px 12px;border:1px solid #d5d5e2;border-radius:8px;font-size:14px;width:100%}button,.btn{padding:10px 24px;background:#6c5ce7;color:#fff;border:0;border-radius:8px;cursor:pointer;font-size:15px;text-decoration:none;display:inline-block;transition:background .2s}button:hover,.btn:hover{background:#5a4bd1}button:disabled{background:#b8b3e8;cursor:wait}button.ghost{background:transparent;color:#6c5ce7;border:1px solid #6c5ce7}pre{background:#1e1e2e;color:#a6e3a1;padding:16px;border-radius:10px;overflow:auto;font-size:12.5px;line-height:1.6;margin:12px 0}.svg-source{max-height:220px}.two-col{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin:16px 0}.two-col>div{min-width:0}table{border-collapse:collapse;width:100%}th,td{border:1px solid #e4e4ef;padding:6px 12px;font-size:13px;text-align:left}th{background:#f4f3fc}.param-block{margin:24px 0}.param-block h3{margin-bottom:10px}.aspect{padding:2px 8px;border-radius:4px;font-size:12px}.aspect.conjunction{background:#f5f0ff;color:#6c5ce7}.aspect.trine,.aspect.sextile{background:#e8f8f0;color:#27ae60}.aspect.square,.aspect.opposition{background:#fdeaea;color:#c0392b}.agrid-wrap{display:flex;justify-content:center}.agrid{border-collapse:collapse;margin:8px 0}.acell{min-width:26px;width:26px;height:26px;text-align:center;vertical-align:middle;border:1px solid #e4e4ef;font-size:12px;padding:0;white-space:nowrap}.acell.diag,.acell.aside{background:#6c5ce7;color:#fff;font-weight:700}.acell.asp.soft{color:#27ae60;background:#e8f8f0;font-weight:700}.acell.asp.hard{color:#c0392b;background:#fdeaea;font-weight:700}.acell.asp.conj{color:#6c5ce7;background:#f5f0ff;font-weight:700}.green{color:#27ae60}.red{color:#c0392b}.ruler{color:#6c5ce7;font-weight:700}.chart-wrap{display:flex;justify-content:center;margin:20px 0}.svg-container{max-width:480px;width:100%}.svg-container svg{width:100%;height:auto}.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.download{background:#2ecc71}.download:hover{background:#27ae60}.error{color:#c0392b;text-align:center;padding:12px}.footer{text-align:center;color:#aaa;font-size:12px;margin-top:40px}details{margin:8px 0}summary{cursor:pointer;color:#6c5ce7;font-size:13px}.src pre{background:#1e1e2e;color:#cdd6f4}.src summary{padding:6px 0;font-weight:700}