:root{--bg:#f6f8fb;--sf:#fff;--ink:#0f172a;--mute:#475569;--line:#e2e8f0;--acc:#0d9488;--acc2:#2563eb}
@media(prefers-color-scheme:dark){:root{--bg:#0b1220;--sf:#111a2e;--ink:#e8eef9;--mute:#9fb0c9;--line:#1f2b45;--acc:#2dd4bf;--acc2:#60a5fa}}
*{box-sizing:border-box;margin:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
a{color:var(--acc2);text-decoration:none}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.2}
.wrap{max-width:820px;margin:auto;padding:0 22px}
nav{border-bottom:1px solid var(--line);background:var(--bg)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:60px;max-width:1080px}
.logo{font-family:Fraunces,serif;font-weight:600;font-size:1.15rem;color:var(--ink)}.logo span{color:var(--acc)}
nav a.l{color:var(--mute);font-size:.9rem;font-weight:500;margin-left:20px}
.head{padding:56px 0 24px}
.eyebrow{color:var(--acc);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.head h1{font-size:clamp(2rem,5vw,2.8rem);margin:8px 0 10px}
.head p{color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chip{font-size:.78rem;padding:4px 12px;border-radius:99px;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc);font-weight:500;border:0;cursor:pointer;font-family:inherit}
.chip.on{background:var(--acc);color:var(--bg)}
.post{display:block;background:var(--sf);border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:16px;color:var(--ink);transition:.2s}
.post:hover{border-color:var(--acc);transform:translateY(-2px)}
.post h2{font-size:1.3rem;margin:6px 0 8px}
.post p{color:var(--mute);font-size:.95rem}
.meta{font-size:.82rem;color:var(--mute)}
.art{padding:48px 0 30px}
.art h1{font-size:clamp(1.8rem,4.5vw,2.6rem);margin:8px 0 12px}
.art .body p{margin-bottom:18px;font-size:1.04rem}
.btn{display:inline-block;padding:11px 22px;border-radius:10px;font-weight:600;font-size:.92rem;background:linear-gradient(90deg,#2dd4bf,#60a5fa);color:#06101f;margin:8px 10px 0 0}
.btn.o{background:none;border:1px solid var(--line);color:var(--ink)}
.empty{color:var(--mute);padding:30px 0}
footer{padding:28px 0;text-align:center;color:var(--mute);font-size:.85rem;border-top:1px solid var(--line);margin-top:40px}
.embed{display:flex;justify-content:center;margin:24px 0;background:#fff;border-radius:12px;padding:6px}.embed iframe{max-width:100%;border:0}