@import url("fonts/fonts.css");
:root { --bg:#faf9f6; --card:#fff; --ink:#14201c; --ink-2:#3d4a45; --muted:#6c7772; --line:#e4e1d9; --accent:#1f6f5c; --spark:#ffd166; --mark:#fff1b8; --mark-ink:#5c4400; }
@media (prefers-color-scheme: dark) { :root { --bg:#0e1412; --card:#161e1b; --ink:#eef3f0; --ink-2:#c3ccc8; --muted:#8d9894; --line:#26302c; --accent:#4fb79a; --mark:#4a3d10; --mark-ink:#ffe08a; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.75 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
.wrap { max-width:780px; margin:0 auto; padding:0 24px 80px; }
@media (max-width:600px) { .wrap { padding:0 16px 64px; } }
header { position:sticky; top:0; z-index:5; padding:16px 0; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); margin:0 -24px; padding-left:24px; padding-right:24px; }
@media (max-width:600px) { header { margin:0 -16px; padding-left:16px; padding-right:16px; } }
.logo { display:inline-flex; align-items:center; gap:10px; font-weight:750; font-size:18px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.logo::before { content:""; width:30px; height:30px; border-radius:9px; background:linear-gradient(145deg,#2a8a72,#134a3d) no-repeat; box-shadow:0 4px 12px -4px rgba(31,111,92,.7); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2 5 14h5.5L9 22l9.5-13H13z' fill='%23ffd166'/%3E%3C/svg%3E"), linear-gradient(145deg,#2a8a72,#134a3d); background-size:17px, cover; background-position:center; background-repeat:no-repeat; }
.logo span { color:inherit; }
h1 { font-size:clamp(32px,5vw,46px); line-height:1.08; letter-spacing:-.035em; font-weight:800; margin:56px 0 8px; }
.updated { color:var(--muted); margin:0 0 40px; font-size:15px; }
h2 { font-size:20px; letter-spacing:-.015em; margin:44px 0 10px; padding-top:20px; border-top:1px solid var(--line); }
p, li { color:var(--ink-2); }
b { color:var(--ink); }
a { color:var(--accent); text-underline-offset:3px; }
ul { padding-left:22px; }
li { margin:6px 0; }
mark { background:var(--mark); color:var(--mark-ink); padding:1px 6px; border-radius:5px; font-weight:600; font-size:.94em; }
.box { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:8px 24px; box-shadow:0 1px 2px rgba(20,32,28,.05); }
footer { margin-top:64px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
footer a { color:var(--muted); margin-right:20px; text-decoration:none; }
footer a:hover { color:var(--ink); }