:root { color-scheme: light dark; --bg:#fff; --fg:#1d1d1f; --muted:#62626b; --card:#f5f5f7; --border:#dedee3; --accent:#0068ce; }
@media(prefers-color-scheme:dark) { :root { --bg:#161618; --fg:#f5f5f7; --muted:#b0b0b8; --card:#222225; --border:#3a3a40; --accent:#76baff; } }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow-wrap:anywhere; }
a { color:var(--accent); text-underline-offset:3px; } a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.skip { position:absolute; left:16px; top:-100px; padding:8px; background:var(--bg); } .skip:focus { top:8px; }
.layout { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; }
aside { padding:32px 24px; background:var(--card); border-right:1px solid var(--border); }
.brand { margin:0; font-size:21px; font-weight:700; } .subtitle { font-size:13px; color:var(--muted); margin:4px 0 24px; }
nav a { display:block; padding:10px 12px; margin:6px -12px; border-radius:10px; text-decoration:none; color:var(--fg); }
nav a[aria-current=page] { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); font-weight:600; }
.language { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); font-size:14px; }
main { width:100%; max-width:920px; padding:48px 56px; } h1 { font-size:clamp(26px,4vw,34px); line-height:1.3; margin:0 0 12px; letter-spacing:-.02em; }
h2 { margin:34px 0 12px; font-size:21px; line-height:1.5; } p { margin:12px 0; } .meta,footer { color:var(--muted); font-size:14px; }
.notice { padding:18px 22px; margin:24px 0; background:var(--card); border-radius:16px; } .button { display:inline-block; padding:10px 20px; border-radius:12px; background:var(--accent); color:var(--bg); font-weight:600; text-decoration:none; }
footer { margin-top:44px; padding-top:20px; border-top:1px solid var(--border); } ul { padding-left:24px; } li { margin:8px 0; }
@media(max-width:760px) { .layout { grid-template-columns:1fr; } aside { border-right:0; border-bottom:1px solid var(--border); padding:20px 24px; } nav { display:flex; gap:20px; flex-wrap:wrap; } nav a { margin:0; padding:8px 0; } .subtitle { margin-bottom:12px; } .language { margin-top:12px; padding-top:12px; } main { padding:32px 24px; } }
@media print { aside,.skip { display:none; } .layout { display:block; } main { max-width:none; padding:0; } }