:root{
  --bg:#0b0d10; --card:#12161b; --text:#e8eef2; --muted:#bac6d1; --accent:#ffffff;
  --border:#27313a; --focus:#ffd166;
  --radius:16px; --space:14px; --max:1080px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f9fb; --card:#ffffff; --text:#101418; --muted:#364554; --accent:#0b0d10; --border:#e3e9ee; --focus:#8a2be2; }
}
*{box-sizing:border-box} html,body{margin:0}
body{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--text);}
a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
a:focus,button:focus,input:focus{outline:3px solid var(--focus); outline-offset:2px;}
.wrap{max-width:var(--max); margin:auto; padding:24px;}
header{position:sticky; top:0; backdrop-filter:saturate(120%) blur(6px); background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid var(--border); z-index:10;}
.brand{display:flex; align-items:center; gap:12px; padding:12px 0;}
.logo{width:36px; height:36px; border-radius:8px; background:var(--accent); color:var(--bg); display:grid; place-items:center; font-weight:800;}
nav{display:flex; gap:10px; flex-wrap:wrap}
nav a{display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:999px; text-decoration:none; background:var(--card);}
nav a:hover{transform:translateY(-1px)}
.hero{display:grid; gap:14px; padding:28px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-top:18px;}
.hero h1{font-size:clamp(22px,4vw,36px); line-height:1.2; margin:0}
.hero p{margin:0; color:var(--muted)}
.grid{display:grid; gap:14px; margin-top:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px;}
.card h2{font-size:18px; margin:0}
.links{display:grid; gap:8px}
.links a{display:flex; align-items:center; justify-content:space-between; text-decoration:none; border:1px solid var(--border); padding:10px 12px; border-radius:10px; background:transparent}
.links a span{font-weight:600}
.links a kbd{font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; background:var(--bg); color:var(--text); border:1px solid var(--border); padding:2px 6px; border-radius:6px;}
.notice{margin-top:18px; font-size:14px; color:var(--muted)}
footer{border-top:1px solid var(--border); margin-top:24px}
.foot{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:16px 0; color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.search{margin-top:14px; display:flex; gap:8px}
.search input{flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text)}
.search button{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer}

:root { --gap: 1rem; --radius: 14px; --maxw: 980px; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 system-ui, Segoe UI, Roboto, Arial, sans-serif; }
main { max-width: var(--maxw); margin: 2rem auto; padding: 0 1rem; }
.site-nav { position: sticky; top: 0; background:#fff; border-bottom:1px solid #e5e5e5; }
.site-nav { display:flex; align-items:center; gap: var(--gap); padding: .75rem 1rem; }
.site-nav .brand { font-weight: 700; text-decoration: none; color: #111; }
.site-nav ul { list-style: none; display:flex; gap: .75rem; margin:0; padding:0; }
.site-nav a { text-decoration: none; color:#111; }
.site-nav a:focus, .site-nav a:hover { outline: 2px solid #111; outline-offset: 2px; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position: static; width:auto; height:auto; padding:.5rem; background:#000; color:#fff; }
a { text-decoration: underline; text-underline-offset: 2px; }
img { max-width:100%; height:auto; }
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { padding: .75rem; border:1px solid #e5e5e5; border-radius: var(--radius); overflow:auto; }