:root { --ink:#17202a; --muted:#66717d; --line:#dfe5ea; --paper:#f5f7f9; --blue:#2164e8; --blue-dark:#174ab1; --green:#16845b; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(28px,calc((100vw - 1160px)/2)); background:#fff; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; gap:10px; align-items:center; color:var(--ink); font-size:18px; font-weight:700; text-decoration:none; letter-spacing:-.02em; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; color:#fff; background:var(--ink); border-radius:9px; font-size:15px; }
.security-pill { display:inline-flex; align-items:center; gap:8px; color:var(--green); font-size:12px; font-weight:600; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#27a36e; box-shadow:0 0 0 4px #dff3e9; }
.shell { width:min(1060px,calc(100% - 40px)); margin:0 auto; padding:78px 0 80px; }
.hero { max-width:650px; margin-bottom:44px; }
.eyebrow,.section-label { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.16em; }
h1 { margin:15px 0 18px; font-size:clamp(43px,7vw,76px); line-height:.98; letter-spacing:-.06em; }
h1 em { color:var(--blue); font-style:normal; }
.lede { max-width:600px; margin:0; color:var(--muted); font-size:17px; line-height:1.7; }
.demo-card { padding:32px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 50px rgba(20,42,68,.08); }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:29px; }
h2 { margin:9px 0 0; font-size:27px; letter-spacing:-.04em; }
.version-badge { padding:6px 10px; color:var(--blue); background:#edf3ff; border-radius:9px; font:700 12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:13px; font-weight:600; }
select,input { width:100%; height:46px; padding:0 13px; color:var(--ink); background:#fff; border:1px solid #cfd7df; border-radius:10px; font:inherit; outline:none; }
select:focus,input:focus { border-color:var(--blue); box-shadow:0 0 0 3px #e8efff; }
.action-row { display:flex; align-items:center; gap:12px; margin-top:23px; }
button { height:45px; padding:0 18px; border:0; border-radius:10px; font:700 14px inherit; cursor:pointer; transition:transform .15s,background .15s; }
button:active { transform:translateY(1px); } button:disabled { cursor:not-allowed; opacity:.52; }
.primary-button { color:#fff; background:var(--blue); box-shadow:0 8px 18px rgba(33,100,232,.2); } .primary-button:hover:not(:disabled) { background:var(--blue-dark); }
.secondary-button { color:var(--ink); background:#eef1f4; } .secondary-button:hover:not(:disabled) { background:#e4e8ed; }
.status { margin-left:4px; color:var(--muted); font-size:13px; } .status--loading{color:#9a6a00}.status--ready{color:var(--blue)}.status--success{color:var(--green)}.status--error{color:#bd3c3c}
.result-panel { margin-top:22px; padding:17px 18px; background:#f5fbf8; border:1px solid #cbe9dc; border-radius:12px; }
.result-head { display:flex; align-items:center; gap:9px; color:var(--green); font-size:14px; } .result-head time { margin-left:auto; color:#6e9a87; font-size:12px; }
.success-icon { width:21px; height:21px; display:grid; place-items:center; color:#fff; background:#22a56e; border-radius:50%; font-size:13px; }
pre { margin:13px 0 0; padding:13px; max-height:190px; overflow:auto; color:#275342; background:#eaf7f0; border-radius:8px; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; word-break:break-all; }
.implementation-note { display:flex; gap:10px; margin-top:23px; padding-top:20px; border-top:1px solid #edf0f2; color:var(--muted); font-size:12px; line-height:1.65; }
.implementation-note p { margin:0; } code { color:#405161; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.note-icon { width:18px; height:18px; flex:none; display:grid; place-items:center; color:#fff; background:#96a4b1; border-radius:50%; font:700 11px Georgia,serif; }
.strict-test { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 16px; margin-top:23px; padding:17px 18px; background:#fff8e8; border:1px solid #ead8a7; border-radius:12px; }
.strict-test strong { font-size:14px; } .strict-test p { margin:5px 0 0; color:var(--muted); font-size:12px; } .strict-test .status { grid-column:1/-1; margin:0; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; } .facts article { padding:21px; background:#fff; border:1px solid var(--line); border-radius:15px; }
.fact-number { color:#8d9aa6; font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace; } .facts h3 { margin:13px 0 7px; font-size:15px; } .facts p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.footer { display:flex; justify-content:space-between; width:min(1060px,calc(100% - 40px)); margin:0 auto; padding:0 0 30px; color:#87929c; font-size:11px; }
@media (max-width:700px) { .topbar{padding:0 20px}.security-pill{font-size:0}.security-pill .status-dot{font-size:initial}.shell{width:calc(100% - 28px);padding-top:50px}.demo-card{padding:22px 18px;border-radius:16px}.form-grid,.facts{grid-template-columns:1fr}.action-row{flex-wrap:wrap}.status{width:100%;margin:0}.footer{width:calc(100% - 28px);gap:12px;flex-direction:column} }