:root { --paper:#f6f7f4; --ink:#16191f; --muted:#687181; --rule:#d8dce3; --blue:#175cd3; --bluewash:#eaf1ff; --panel:#fff; --cyan:#168d96; --orange:#c65d22; }
[data-theme="dark"] { --paper:#0d1117; --ink:#e6edf3; --muted:#97a3b3; --rule:#2d3745; --blue:#78a9ff; --bluewash:#14243e; --panel:#131922; --cyan:#45c4b0; --orange:#ffad68; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif; line-height:1.65; transition:background .2s,color .2s; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
::selection { background:var(--blue); color:#fff; }
.shell { max-width:1080px; margin:auto; padding:0 24px; }
.header { min-height:68px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--rule); gap:16px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.04em; }
.brand img { width:26px; height:26px; }
.brand small { color:var(--muted); font:500 11px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.05em; margin-left:6px; }
.nav-actions { display:flex; gap:9px; align-items:center; }
.icon-button { cursor:pointer; color:var(--ink); background:transparent; border:1px solid var(--rule); width:34px; height:34px; line-height:1; }
.top-link { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--blue); color:var(--blue); padding:7px 12px; font-size:13px; font-weight:700; background:transparent; }
.top-link:hover { background:var(--blue); color:#fff; }
.page-head { padding:46px 0 26px; max-width:720px; }
.kicker { font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.kicker .blue { color:var(--blue); }
.page-head h1 { margin:12px 0 12px; font-size:clamp(30px,4.2vw,46px); letter-spacing:-.06em; line-height:1.08; }
.page-head p { margin:0; color:var(--muted); font-size:15px; max-width:620px; }
.panel { background:var(--panel); border:1px solid var(--rule); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--rule); background:var(--panel); color:var(--ink); padding:8px 14px; font-size:13px; font-weight:700; transition:background .15s,border-color .15s,color .15s; }
.btn:hover { border-color:var(--blue); color:var(--blue); }
.btn.primary { border-color:var(--blue); color:var(--blue); background:transparent; }
.btn.primary:hover { background:var(--blue); color:#fff; }
.btn[disabled] { opacity:.45; pointer-events:none; }
.back-link { display:inline-block; margin:22px 0 0; font:600 12px ui-monospace,monospace; color:var(--blue); }
.back-link:hover { text-decoration:underline; }
.footer { padding:30px 0; margin-top:48px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:13px; }
.footer a { color:var(--ink); }
.footer a:hover { color:var(--blue); }
.hint { color:var(--muted); font-size:13px; }
kbd { border:1px solid var(--rule); border-bottom-width:2px; border-radius:3px; padding:0 5px; font:11px ui-monospace,monospace; background:var(--panel); }
@media (max-width:780px) { .page-head { padding:32px 0 20px; } .footer { display:block; } .footer div+div { margin-top:8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }