:root { color-scheme: light; --ink:#17202a; --muted:#667085; --line:#e5e7eb; --canvas:#f6f7f9; --surface:#fff; --blue:#0b67d1; --green:#198754; --red:#c53b3b; --shadow:0 10px 28px rgba(15,23,42,.06); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:3; border-bottom:1px solid var(--line); background:rgba(246,247,249,.9); backdrop-filter:blur(14px); }
.nav { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:760; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:#fff; background:#111827; font-size:14px; }
.nav-links { display:flex; gap:26px; color:var(--muted); font-size:14px; }
.nav-links a:hover,.nav-links .active { color:var(--blue); }
.page { padding:70px 0 40px; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; padding-bottom:42px; }
.eyebrow,.kicker { margin:0 0 10px; color:var(--blue); font-size:12px; font-weight:760; letter-spacing:.08em; text-transform:uppercase; }
.live-dot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#1baa64; box-shadow:0 0 0 4px rgba(27,170,100,.12); }
h1,h2 { margin:0; letter-spacing:-.045em; line-height:1.1; }
h1 { font-size:clamp(42px,7vw,78px); }
h2 { font-size:clamp(26px,4vw,40px); }
.lead { max-width:690px; margin:18px 0 0; color:var(--muted); font-size:17px; line-height:1.65; }
.status-panel { min-width:190px; padding:16px 18px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
.status-panel strong,.status-panel span { display:block; }
.status-panel span { margin-top:5px; color:var(--muted); font-size:13px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
.metrics div { min-height:105px; padding:20px; border-right:1px solid var(--line); }
.metrics div:last-child { border-right:0; }
.metrics span { display:block; color:var(--muted); font-size:13px; }
.metrics strong { display:block; margin-top:10px; font-size:25px; font-variant-numeric:tabular-nums; }
.section { padding:64px 0 0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:20px; }
.section-note { max-width:360px; margin:0; color:var(--muted); font-size:14px; line-height:1.6; text-align:right; }
.section-note.left { max-width:none; margin:0 0 14px; text-align:left; }
.table-wrap { overflow:auto; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
table { width:100%; min-width:760px; border-collapse:collapse; font-size:14px; }
th,td { padding:13px 15px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { color:var(--muted); background:#fafbfc; font-size:12px; font-weight:700; }
tr:last-child td { border-bottom:0; }
.positive { color:var(--red); } .negative { color:var(--green); }
.empty { padding:34px; color:var(--muted); text-align:center; }
.button { min-height:40px; padding:0 16px; border:0; border-radius:7px; font-weight:700; cursor:pointer; }
.button.primary { color:#fff; background:var(--blue); } .button.secondary { color:var(--blue); background:#e8f1fc; }
.inline-controls,.backtest-form { display:flex; align-items:center; gap:10px; }
label { color:var(--muted); font-size:13px; } input { min-height:40px; margin-left:6px; padding:0 10px; border:1px solid #d1d5db; border-radius:6px; color:var(--ink); background:#fff; font:inherit; }
.backtest-form { align-items:end; padding:20px; border:1px solid var(--line); background:var(--surface); }
.backtest-form label { display:flex; flex-direction:column; gap:6px; } .backtest-form input { margin-left:0; }
.result { max-height:360px; overflow:auto; margin:16px 0 0; padding:16px; color:#dbeafe; background:#111827; font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; }
.backtest-results { margin-top:16px; }
.cell-note { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.footer { display:flex; justify-content:space-between; gap:20px; padding:60px 0 35px; color:var(--muted); font-size:12px; }
@media (max-width:760px) { .shell{width:min(100% - 28px,680px)} .page{padding-top:42px} .page-heading{align-items:start; flex-direction:column} .status-panel{width:100%} .metrics{grid-template-columns:repeat(2,1fr)} .metrics div:nth-child(2){border-right:0} .metrics div:nth-child(-n+2){border-bottom:1px solid var(--line)} .section-heading{align-items:start; flex-direction:column}.section-note{text-align:left}.inline-controls{width:100%; flex-wrap:wrap}.backtest-form{align-items:stretch; flex-direction:column}.backtest-form .button{width:100%}.footer{align-items:start; flex-direction:column}.nav-links{gap:12px}.nav-links a{display:none}.nav-links a.active{display:block} }