:root { --bg:#edf1f5; --panel:#fdfefe; --text:#2c2f36; --muted:#666c78; --accent:#2d89c9; --accent-2:#00b8a9; --border:#d1d6dc; --code-bg:#f4f7fa; --maxw:1100px; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial; color:var(--text); background:transparent; }
body::before { content:''; position:fixed; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(45,137,201,.10) 0%, rgba(45,137,201,0) 70%),linear-gradient(to bottom, rgba(0,184,169,.08) 10%, rgba(0,184,169,0) 85%),var(--bg); background-repeat:no-repeat; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
header { position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid var(--border); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; }
.brand .avatar { width:40px; height:40px; border-radius:50%; border:2px solid var(--border); background: var(--panel) center/cover no-repeat; }
.brand-name { color: var(--text); }
nav ul { list-style:none; display:flex; gap:18px; margin:0; padding:0; }
nav a { font-weight:600; color:var(--text); opacity:.9; } nav a:hover { opacity:1; color:var(--accent); }
.menu-btn { display:none; }
.hero { padding:48px 0 24px; }
.hero .grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:center; }
.hero .card { background: var(--panel); border:1px solid var(--border); border-radius:18px; padding:28px; }
h1 { font-size:34px; line-height:1.15; margin:0 0 8px; }
.gradient { background: linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.subtitle { color:var(--muted); margin:0 0 14px; }
.tags { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }
.tag { font-size:13px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 86%, transparent), color-mix(in oklab, var(--panel) 92%, transparent)); }
.cta { display:flex; gap:12px; margin-top:18px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; font-weight:700; border:1px solid var(--border); background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 86%, transparent), color-mix(in oklab, var(--panel) 92%, transparent)); }
.btn.primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color:#fff; border:none; }
section { padding:30px 0; }
section h2 { font-size:22px; margin:0 0 16px; }
.cards { display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap:16px; }
.card { grid-column: span 12; background: var(--panel); border:1px solid var(--border); border-radius:18px; padding:20px; }
.list { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.item { display:grid; gap:6px; border-left:3px solid color-mix(in oklab, var(--accent) 45%, var(--accent-2) 55%); padding-left:12px; }
.meta { color:var(--muted); font-size:14px; }
.span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-4 { grid-column: span 4; }
.card, .list, .item, .meta, p, li, h1, h2, h3, h4, h5, h6 { overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
.card { min-width: 0; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; }
pre { background: var(--code-bg); padding:12px; border-radius:12px; overflow-x:auto; border:1px solid var(--border); }
pre, code { overflow-wrap: normal; word-break: normal; }
img, video, canvas, svg { max-width:100%; height:auto; }
footer { padding:28px 0 60px; color:var(--muted); }
@media (max-width:900px){
  h1 { font-size:26px; }
  .subtitle { font-size:15px; }
  .container { padding: 0 16px; }
  .hero .grid { grid-template-columns:1fr; gap:18px; }
  .span-6, .span-8, .span-4 { grid-column: span 12; }
  nav ul { display:none; }
  .menu-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background: var(--panel); color:var(--text); }
  nav.open ul { display:flex; flex-direction:column; gap:10px; position:absolute; top:56px; right:16px; background: var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px; width:min(260px, calc(100% - 32px)); }
}