:root{--font-body:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;--font-display:"Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;--bg:#f6efe5;--surface:#fffaf5bd;--surface-strong:#fff7ef;--text:#21160f;--muted:#6e5648;--line:#21160f1f;--primary:#c85d2d;--primary-dark:#8f3f1d;--highlight:#184b46;--success:#14804a;--warning:#d98b17;--danger:#b4433f;--shadow:0 24px 60px #5d2f1624}body[data-theme=night]{--bg:#101820;--surface:#11202bcc;--surface-strong:#162734;--text:#f4efe7;--muted:#abc0c8;--line:#f4efe71f;--primary:#ff9f5a;--primary-dark:#ffbf8a;--highlight:#90f4d7;--success:#6ce0a0;--warning:#f3c267;--danger:#ff8f88;--shadow:0 24px 60px #00000047}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;color:var(--text);background:radial-gradient(circle at top left, #ffd58cb3, transparent 30%), radial-gradient(circle at 85% 15%, #184b462e, transparent 22%), linear-gradient(135deg, var(--bg) 0%, #fffdfa 100%);font-family:var(--font-body);margin:0;transition:background .24s,color .24s}body[data-theme=night]{background:radial-gradient(circle at top left, #ff9f5a2e, transparent 28%), radial-gradient(circle at 85% 15%, #90f4d72e, transparent 24%), linear-gradient(135deg, var(--bg) 0%, #17242d 100%)}button,input,textarea,select{font:inherit}button,input,textarea{outline:none}pre{white-space:pre-wrap}.page-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:28px 0 56px}.hero{border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:linear-gradient(#ffffff59,#ffffff14);border-radius:32px;padding:28px;position:relative;overflow:hidden}.hero:after{content:"";filter:blur(10px);background:linear-gradient(135deg,#c85d2d2e,#ffd58c2e);border-radius:50%;width:220px;height:220px;position:absolute;inset:auto -60px -60px auto}.topbar,.button-row,.hero-actions{gap:12px;display:flex}.topbar{justify-content:space-between;align-items:center;gap:16px}.brand{align-items:center;gap:14px;display:flex}.brand-mark{color:#fff;width:48px;height:48px;font-weight:700;font-family:var(--font-display);background:linear-gradient(135deg, var(--primary), var(--highlight));border-radius:16px;place-items:center;display:grid}.eyebrow,.section-label,.pill,.metric-title{letter-spacing:.08em;text-transform:uppercase}.eyebrow,.section-label,.metric-title{color:var(--muted);margin:0;font-size:.74rem}.topbar h1,.hero-copy h2,.glass-card h3,.deploy-section h3{font-family:var(--font-display);margin:0}.topbar h1{font-size:1.2rem}.hero-grid{grid-template-columns:1.4fr .95fr;gap:24px;margin-top:36px;display:grid}.hero-copy h2{max-width:13ch;font-size:clamp(2.1rem,3.9vw,4.4rem);line-height:.96}.pill{border:1px solid var(--line);color:var(--highlight);background:#ffffff8c;border-radius:999px;margin:0 0 16px;padding:8px 14px;font-size:.76rem;font-weight:700;display:inline-flex}.hero-text,.card-text{color:var(--muted);line-height:1.75}.hero-text{max-width:55ch;margin:18px 0 0;font-size:1rem}.hero-actions{flex-wrap:wrap;margin-top:28px}.primary-button,.secondary-button,.ghost-button{cursor:pointer;border:0;border-radius:999px;transition:transform .18s,opacity .18s,background .18s}.primary-button:hover,.secondary-button:hover,.ghost-button:hover{transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled,.ghost-button:disabled{cursor:wait;opacity:.7}.primary-button{color:#fff;background:linear-gradient(135deg, var(--primary), var(--primary-dark));padding:13px 20px}.secondary-button,.ghost-button{color:var(--text);border:1px solid var(--line);background:#ffffff8c;padding:13px 18px}.status-panel,.glass-card,.deploy-section{border:1px solid var(--line);background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);border-radius:28px}.status-panel{align-self:stretch;padding:20px}.panel-top{align-items:center;gap:10px;margin-bottom:18px;font-weight:700;display:flex}.status-dot{background:var(--warning);border-radius:50%;width:12px;height:12px;box-shadow:0 0 0 6px #d98b172e}.status-dot.success{background:var(--success);box-shadow:0 0 0 6px #14804a29}.status-dot.error{background:var(--danger);box-shadow:0 0 0 6px #b4433f29}.metric-list,.test-form{gap:14px;display:grid}.metric-card,.records-box,.result-box,.field input,.field textarea{background:var(--surface-strong);border:1px solid var(--line);border-radius:20px}.metric-card{padding:16px}.metric-card strong{margin-top:8px;font-size:1.15rem;display:block}.content-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px;display:grid}.database-grid{align-items:start}.glass-card,.deploy-section{padding:24px}.feature-list{color:var(--muted);margin:18px 0 0;padding-left:18px;line-height:1.9}.accent-card{position:relative;overflow:hidden}.accent-card:before{content:"";filter:blur(8px);background:#c85d2d1f;border-radius:50%;width:120px;height:120px;position:absolute;top:-40px;right:-10px}.button-row{flex-wrap:wrap;margin-top:18px}.result-box,.records-box{min-height:120px;color:var(--text);margin-top:18px;padding:18px;line-height:1.8}.records-box.empty{color:var(--muted)}.record-item+.record-item{border-top:1px dashed var(--line);margin-top:16px;padding-top:16px}.record-item p{margin:0}.test-form{margin-top:18px}.field{color:var(--muted);gap:8px;display:grid}.field input,.field textarea{width:100%;color:var(--text);padding:14px 16px}.field textarea{resize:vertical;min-height:120px}.deploy-section{grid-template-columns:.9fr 1.1fr;gap:20px;margin-top:20px;display:grid}.code-block{color:#f4f0ea;white-space:pre;background:#1c1f24;border-radius:22px;margin:0;padding:20px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.92rem;line-height:1.7;overflow-x:auto}@media (width<=960px){.hero-grid,.content-grid,.deploy-section{grid-template-columns:1fr}.hero-copy h2{max-width:100%}}@media (width<=640px){.page-shell{width:min(100% - 20px,1180px);padding-top:12px}.hero,.glass-card,.deploy-section{border-radius:24px}.topbar{flex-direction:column;align-items:flex-start}.hero{padding:22px}.hero-copy h2{font-size:clamp(2rem,13vw,3.2rem)}.hero-actions,.button-row{flex-direction:column}.primary-button,.secondary-button,.ghost-button{width:100%}}