:root {
  color-scheme: dark;
  --bg: #07100d;
  --bg-deep: #040806;
  --surface: rgba(17, 35, 29, .72);
  --surface-strong: #10231c;
  --surface-soft: rgba(28, 53, 43, .5);
  --line: rgba(154, 231, 191, .16);
  --line-strong: rgba(154, 231, 191, .32);
  --text: #edf8f1;
  --muted: #9bb6a7;
  --accent: #72f0ae;
  --accent-strong: #36d987;
  --accent-soft: rgba(114, 240, 174, .12);
  --danger: #ff8f8f;
  --warning: #f4ce7a;
  --shadow: 0 24px 80px rgba(0, 0, 0, .32);
  --accent-faint: rgba(114, 240, 174, .04);
  --accent-line: rgba(114, 240, 174, .16);
  --accent-line-soft: rgba(114, 240, 174, .22);
  --accent-glow: rgba(114, 240, 174, .2);
  --accent-halo: rgba(114, 240, 174, .3);
  --glow-one: rgba(61, 211, 136, .11);
  --glow-two: rgba(45, 140, 104, .08);
  --grid-line: rgba(126, 221, 171, .035);
  --scrim: rgba(2, 6, 4, .82);
  --glass: rgba(255, 255, 255, .78);
  --orb-core: rgba(114, 240, 174, .5);
  --orb-edge: rgba(22, 105, 71, .1);
  --radius: 22px;
  --container: 1180px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #edf5f0;
  --bg-deep: #e4eee8;
  --surface: rgba(255, 255, 255, .78);
  --surface-strong: #ffffff;
  --surface-soft: rgba(224, 239, 230, .78);
  --line: rgba(20, 73, 49, .14);
  --line-strong: rgba(20, 73, 49, .28);
  --text: #102219;
  --muted: #557365;
  --accent: #087c4a;
  --accent-strong: #05623a;
  --accent-soft: rgba(8, 124, 74, .1);
  --shadow: 0 24px 70px rgba(21, 67, 45, .13);
  --accent-faint: rgba(8, 124, 74, .05);
  --accent-line: rgba(20, 73, 49, .14);
  --accent-line-soft: rgba(20, 73, 49, .2);
  --accent-glow: rgba(8, 124, 74, .18);
  --accent-halo: rgba(8, 124, 74, .28);
  --glow-one: rgba(8, 124, 74, .07);
  --glow-two: rgba(120, 170, 145, .07);
  --grid-line: rgba(20, 73, 49, .03);
  --scrim: rgba(12, 26, 19, .72);
  --glass: rgba(255, 255, 255, .82);
  --orb-core: rgba(8, 124, 74, .32);
  --orb-edge: rgba(120, 170, 145, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.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; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 20; padding: 10px 16px; background: var(--accent); color: #04120b; border-radius: 10px; transition: top .2s ease; }
.skip-link:focus { top: 16px; }
.site-shell { overflow: hidden; }
.site-header { min-height: 82px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: .82rem; font-weight: 800; letter-spacing: .18em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); border-radius: 9px 9px 9px 2px; font-family: "JetBrains Mono", monospace; font-size: .8rem; box-shadow: 0 0 24px var(--accent-glow); }
.primary-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.primary-nav a, .footer-links a, .social-links a { color: var(--muted); font-size: .86rem; transition: color .2s ease; }
.primary-nav a:hover, .primary-nav a.is-active, .footer-links a:hover, .social-links a:hover { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.language-switcher { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.language-switcher a { padding: 5px 8px; color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: .67rem; border-radius: 999px; }
.language-switcher a.is-active, .language-switcher a:hover { color: var(--bg-deep); background: var(--accent); }
.icon-button, .menu-toggle { border: 1px solid var(--line); color: var(--text); background: var(--surface); }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; }
.icon-button:hover { border-color: var(--accent); color: var(--accent); }
.menu-toggle { display: none; width: 40px; height: 40px; border-radius: 12px; padding: 9px; }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--accent); border-radius: 999px; color: #04120b; background: var(--accent); font-size: .84rem; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--accent-glow); }
.button-ghost { color: var(--text); background: transparent; border-color: var(--line-strong); }
.button-ghost:hover { color: var(--accent); border-color: var(--accent); box-shadow: none; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: .82rem; font-weight: 700; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.eyebrow { display: block; color: var(--accent); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .67rem; letter-spacing: .15em; text-transform: uppercase; }
.muted { color: var(--muted); }
.glass-card, .card, .admin-panel { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.glass-card, .card { border-radius: var(--radius); }
.hero { min-height: 650px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; padding-block: 90px 110px; }
.hero h1, .page-hero h1 { max-width: 760px; margin: 18px 0 20px; font-size: clamp(3.3rem, 8vw, 7.2rem); line-height: .94; letter-spacing: -.075em; font-weight: 780; }
.hero-lead, .page-hero p { max-width: 620px; color: var(--muted); font-size: 1.08rem; }
.hero-actions, .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 42px; color: var(--muted); font-size: .74rem; }
.status-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.hero-visual { min-height: 400px; position: relative; display: grid; place-items: center; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .7; }
.orb-one { width: 250px; height: 250px; background: radial-gradient(circle at 35% 30%, var(--orb-core), var(--orb-edge) 62%, transparent 70%); filter: blur(22px); }
.orb-two { width: 360px; height: 360px; border: 1px solid var(--accent-line); box-shadow: inset 0 0 80px var(--accent-faint), 0 0 80px var(--accent-soft); }
.terminal-card { position: relative; width: min(100%, 410px); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 0 50px var(--accent-faint); transform: rotate(3deg); }
.terminal-top { display: flex; align-items: center; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font: .65rem "JetBrains Mono", monospace; }
.terminal-top span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; }
.terminal-top span:first-child { background: var(--accent); opacity: 1; }
.terminal-top small { margin-left: auto; font-size: .6rem; }
.terminal-lines { padding: 32px 28px 25px; color: #b9d7c5; font: .82rem/2 "JetBrains Mono", monospace; }
.terminal-lines p { margin: 0; }
.terminal-lines b { color: var(--accent); font-weight: 500; margin-right: 14px; }
.terminal-accent { color: var(--accent); }
.cursor { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: var(--accent); animation: blink 1.1s steps(2) infinite; }
.signal-bars { display: flex; align-items: end; gap: 5px; height: 70px; padding: 0 28px 26px; }
.signal-bars i { display: block; flex: 1; min-width: 5px; background: linear-gradient(to top, var(--accent-strong), var(--accent)); border-radius: 4px 4px 1px 1px; opacity: .8; animation: signal 2.8s ease-in-out infinite alternate; }
.signal-bars i:nth-child(1) { height: 22%; animation-delay: -.4s; }.signal-bars i:nth-child(2) { height: 45%; animation-delay: -.8s; }.signal-bars i:nth-child(3) { height: 35%; animation-delay: -1.2s; }.signal-bars i:nth-child(4) { height: 70%; animation-delay: -.2s; }.signal-bars i:nth-child(5) { height: 52%; animation-delay: -1.5s; }.signal-bars i:nth-child(6) { height: 86%; animation-delay: -.7s; }.signal-bars i:nth-child(7) { height: 40%; animation-delay: -1.1s; }.signal-bars i:nth-child(8) { height: 64%; animation-delay: -.3s; }.signal-bars i:nth-child(9) { height: 92%; animation-delay: -1.4s; }.signal-bars i:nth-child(10) { height: 58%; animation-delay: -.9s; }.signal-bars i:nth-child(11) { height: 78%; animation-delay: -.5s; }.signal-bars i:nth-child(12) { height: 48%; animation-delay: -1.7s; }
.section { padding-block: 80px 20px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.section-heading h2 { margin: 9px 0 0; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; letter-spacing: -.05em; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feature-card { min-height: 270px; padding: 30px; position: relative; overflow: hidden; }
.card-index { color: var(--accent); font: .7rem "JetBrains Mono", monospace; }
.feature-card h3 { max-width: 350px; margin: 50px 0 12px; font-size: 2rem; line-height: 1.02; letter-spacing: -.05em; }
.feature-card p { max-width: 440px; color: var(--muted); }
.signal-line { position: absolute; right: 30px; bottom: 30px; left: 30px; height: 1px; background: var(--line); }
.signal-line span { display: block; width: 28%; height: 1px; background: var(--accent); box-shadow: 0 0 15px var(--accent); }
.specialty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.specialty-card { min-height: 210px; padding: 24px; }
.specialty-card h3 { margin: 34px 0 10px; font-size: 1.25rem; }
.specialty-card p { color: var(--muted); font-size: .88rem; }
.skill-grid { display: flex; align-content: center; flex-wrap: wrap; gap: 10px; padding: 20px; }
.skill-pill, .tag-list span, .tag, .filter-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-soft); font: .72rem "JetBrains Mono", monospace; }
.skill-pill:hover, .tag-list span:hover { color: var(--accent); border-color: var(--line-strong); }
.card-grid { display: grid; gap: 18px; }
.project-grid { grid-template-columns: repeat(3, 1fr); }
.post-grid { grid-template-columns: repeat(3, 1fr); }
.card { overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 25px 70px rgba(0, 0, 0, .22), 0 0 30px var(--accent-faint); }
.card-media, .project-visual { min-height: 190px; position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--accent-soft), var(--surface-soft) 52%, var(--accent-faint)); }
.card-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.card-media-placeholder::after { content: ""; position: absolute; inset: 20%; border: 1px solid var(--accent-line); border-radius: 50%; box-shadow: 0 0 60px var(--accent-soft); }
.media-glyph { position: relative; z-index: 1; color: var(--accent); font: 2.5rem "JetBrains Mono", monospace; text-shadow: 0 0 20px var(--accent); }
.project-visual { min-height: 150px; }
.project-index { position: absolute; top: 18px; left: 20px; color: var(--muted); font: .7rem "JetBrains Mono", monospace; }
.card-body { padding: 22px; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .72rem; }
.tag { min-height: 25px; color: var(--accent); border-color: var(--accent-line-soft); background: var(--accent-soft); font-size: .64rem; }
.tag-soft { color: var(--muted); }
.card h3 { margin: 17px 0 10px; font-size: 1.2rem; line-height: 1.15; letter-spacing: -.03em; }
.card h3 a:hover { color: var(--accent); }
.card p { min-height: 50px; margin: 0 0 18px; color: var(--muted); font-size: .88rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-list span { min-height: 25px; padding-inline: 9px; font-size: .63rem; }
.empty-state { padding: 58px 30px; text-align: center; }
.empty-state h2 { margin: 18px 0 8px; font-size: 1.5rem; }
.empty-state p { color: var(--muted); }
.journey-section { padding-bottom: 90px; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.timeline > div { min-height: 150px; padding: 20px 18px 0 0; border-right: 1px solid var(--line); }
.timeline > div:not(:first-child) { padding-left: 18px; }
.timeline > div:last-child { border-right: 0; }
.timeline b { display: block; color: var(--accent); font: .68rem "JetBrains Mono", monospace; }
.timeline strong { display: block; margin-top: 30px; font-size: .95rem; }
.timeline span { display: block; color: var(--muted); font-size: .78rem; }
.timeline-large { grid-template-columns: repeat(5, 1fr); }
.timeline-large > div { min-height: 190px; }
.contact-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 100px; padding: 38px; }
.contact-cta h2 { max-width: 650px; margin: 12px 0 0; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.05em; }
.page-hero { padding-block: 105px 55px; }
.page-hero h1 { font-size: clamp(3rem, 7vw, 6.2rem); }
.page-hero p { max-width: 650px; }
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filter-pill { min-height: 28px; color: var(--muted); font-size: .65rem; }
.filter-pill.is-active, .filter-pill:hover { color: var(--bg-deep); background: var(--accent); border-color: var(--accent); }
.filter-pill small { margin-left: 4px; opacity: .7; }
.blog-aside { padding-top: 0; }
.aside-card { position: sticky; top: 24px; padding: 22px; }
.aside-card a { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.aside-card a:last-child { border-bottom: 0; }
.aside-card a:hover { color: var(--accent); }
.aside-card small { color: var(--accent); font-family: "JetBrains Mono", monospace; }
.search-form { display: flex; gap: 9px; max-width: 650px; margin-top: 30px; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--text); background: var(--surface-soft); padding: 12px 14px; }
textarea { resize: vertical; min-height: 90px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
label { display: grid; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 650; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.pagination a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: .75rem; }
.pagination a:hover, .pagination a.is-current { color: var(--bg-deep); border-color: var(--accent); background: var(--accent); }
.article { padding-bottom: 80px; }
.article-header { max-width: 850px; padding-block: 90px 55px; }
.article-header h1 { margin: 20px 0; font-size: clamp(2.8rem, 6vw, 5.8rem); line-height: .98; letter-spacing: -.07em; }
.article-lead { max-width: 720px; color: var(--muted); font-size: 1.1rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; color: var(--muted); font: .7rem "JetBrains Mono", monospace; }
.article-actions { margin-top: -35px; margin-bottom: 35px; }
.article-cover { overflow: hidden; max-height: 480px; margin-bottom: 60px; border: 1px solid var(--line); border-radius: var(--radius); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: minmax(0, 760px) 220px; justify-content: space-between; gap: 50px; }
.prose { color: #c9ddd0; font-size: 1.04rem; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--text); line-height: 1.1; letter-spacing: -.04em; }
.prose h2 { margin-top: 2.3em; font-size: 2rem; }
.prose h3 { margin-top: 1.8em; font-size: 1.45rem; }
.prose p { margin: 1.2em 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.prose strong { color: var(--text); }
.prose blockquote { margin: 25px 0; padding: 8px 20px; border-left: 2px solid var(--accent); color: var(--muted); background: var(--accent-soft); }
.prose pre { overflow-x: auto; margin: 25px 0; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #050b08; color: #c5f5da; font: .82rem/1.7 "JetBrains Mono", monospace; }
.prose code { padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--accent); background: var(--accent-soft); font: .84em "JetBrains Mono", monospace; }
.prose pre code { padding: 0; border: 0; background: transparent; }
.prose img { margin: 25px 0; border: 1px solid var(--line); border-radius: 15px; }
.prose table { width: 100%; margin: 25px 0; border-collapse: collapse; font-size: .9rem; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.prose th { color: var(--text); background: var(--surface-soft); }
.article-aside { display: grid; align-content: start; gap: 24px; }
.share-box { display: grid; gap: 11px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.share-box a { color: var(--muted); font-size: .78rem; }
.share-box a:hover { color: var(--accent); }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-block: 35px 20px; border-top: 1px solid var(--line); }
.article-nav > div { display: grid; gap: 8px; }
.article-nav > div:last-child { text-align: right; }
.article-nav a { color: var(--accent); font-size: .88rem; }
.related-section { padding-bottom: 90px; }
.project-meta { display: grid; gap: 12px; padding: 20px; }
.project-meta p { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--muted); font-size: .78rem; }
.project-meta b { color: var(--text); font-weight: 600; }
.project-meta a { color: var(--accent); font-size: .78rem; }
.contact-layout { padding-bottom: 100px; }
.contact-card { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; padding: 34px; }
.contact-channel a { display: inline-block; margin: 18px 0 12px; color: var(--accent); font-size: 1.4rem; }
.contact-channel p { color: var(--muted); font-size: .88rem; }
.stack-form { display: grid; gap: 16px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.flash { margin-top: 18px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; font-size: .82rem; }
.flash-success { color: var(--accent); border-color: var(--accent-halo); background: var(--accent-soft); }
.flash-error { color: var(--danger); border-color: rgba(255, 143, 143, .3); background: rgba(255, 143, 143, .08); }
.site-footer { display: grid; grid-template-columns: 1.3fr 1fr .7fr; gap: 28px; align-items: start; padding-block: 50px 65px; margin-top: 50px; border-top: 1px solid var(--line); }
.footer-brand { margin-bottom: 15px; }
.site-footer p, .site-footer small { color: var(--muted); font-size: .74rem; }
.site-footer small { grid-column: 1 / -1; padding-top: 25px; border-top: 1px solid var(--line); }
.footer-links, .social-links { display: grid; gap: 10px; }
.error-page { min-height: 65vh; display: grid; align-content: center; justify-items: start; gap: 18px; }
.error-page h1 { margin: 0; font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -.07em; }
.error-page p { color: var(--muted); }
.auth-page { min-height: 72vh; display: grid; place-items: center; padding-block: 80px; }
.auth-card { width: min(100%, 470px); padding: 34px; }
.auth-card h1 { margin: 15px 0 8px; font-size: 2.2rem; letter-spacing: -.05em; }
.admin-body { min-height: 100vh; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 245px 1fr; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 34px; padding: 27px 18px; border-right: 1px solid var(--line); background: var(--surface); }
.admin-sidebar .brand { padding-inline: 10px; }
.admin-nav { display: grid; gap: 4px; }
.admin-nav a { padding: 11px 12px; border-radius: 10px; color: var(--muted); font-size: .8rem; }
.admin-nav a:hover, .admin-nav a.is-active { color: var(--text); background: var(--accent-soft); }
.logout-form { margin-top: auto; }
.logout-form .button { width: 100%; }
.admin-main { min-width: 0; }
.admin-topbar { min-height: 74px; display: flex; align-items: center; gap: 15px; padding: 0 34px; border-bottom: 1px solid var(--line); }
.admin-user { margin-left: auto; color: var(--muted); font-size: .78rem; }
.admin-content { padding: 38px 34px 70px; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.admin-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.admin-page-heading h1 { margin: 8px 0 0; font-size: 2.3rem; line-height: 1; letter-spacing: -.06em; }
.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.metric-card { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.metric-card span { display: block; color: var(--muted); font-size: .7rem; }
.metric-card strong { display: block; margin-top: 12px; color: var(--accent); font-size: 1.8rem; }
.admin-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; }
.admin-panel { padding: 22px; border-radius: 16px; box-shadow: none; }
.admin-panel + .admin-panel { margin-top: 18px; }
.admin-panel h2 { margin: 0 0 18px; font-size: 1.05rem; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.panel-heading h2 { margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .78rem; }
th, td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font: .65rem "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
td small { display: block; color: var(--muted); font-size: .68rem; }
td a, td button { color: var(--accent); }
.actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.actions form { display: inline; }
.actions button, .taxonomy-list button, .message-card button { border: 0; color: var(--danger); background: transparent; font-size: .75rem; }
.status { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: var(--muted); background: var(--surface-soft); font: .62rem "JetBrains Mono", monospace; }
.status-published, .status-active, .status-completed { color: var(--accent); background: var(--accent-soft); }
.status-draft, .status-scheduled, .status-in_development { color: var(--warning); background: rgba(244, 206, 122, .1); }
.status-archived { color: var(--danger); background: rgba(255, 143, 143, .08); }
.activity-list { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.activity-list li { display: flex; align-items: start; gap: 10px; }
.activity-dot { width: 7px; height: 7px; margin-top: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.activity-list strong, .activity-list small { display: block; }
.activity-list strong { font-size: .76rem; }
.activity-list small { color: var(--muted); font-size: .68rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.editor-form { display: grid; gap: 18px; }
.editor-form .admin-panel { margin: 0; }
.check-row { display: flex; align-items: center; grid-template-columns: auto 1fr; gap: 9px; margin-top: 18px; }
.check-row input { width: auto; }
.media-picker { display: flex; align-items: center; gap: 18px; }
.media-picker img { width: 100px; height: 70px; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }
.tag-list-large { margin-top: 22px; }
.form-actions { justify-content: flex-end; }
.upload-form { display: flex; align-items: end; flex-wrap: wrap; gap: 15px; }
.upload-form label { min-width: 260px; }
.upload-form small { color: var(--muted); font-size: .7rem; }
.admin-search { max-width: 430px; margin: 20px 0 0 auto; }
.media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
.media-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.media-card img { width: 100%; aspect-ratio: 1.3; object-fit: cover; }
.media-card > div { display: grid; gap: 7px; padding: 12px; }
.media-card strong, .media-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card small { color: var(--muted); font-size: .67rem; }
.taxonomy-list { display: grid; gap: 8px; }
.taxonomy-list > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.taxonomy-list small { grid-column: 1; color: var(--muted); font-size: .68rem; }
.taxonomy-list form { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.message-list { display: grid; gap: 14px; }
.message-card { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.message-card > div { display: flex; align-items: center; gap: 12px; }
.message-card h2 { margin: 14px 0 7px; font-size: 1rem; }
.message-card h2 small { color: var(--muted); font-size: .7rem; font-weight: 400; }
.message-card p { color: var(--muted); font-size: .82rem; }
.message-card form { display: flex; align-items: center; gap: 10px; }
.message-card select { max-width: 150px; }
.analytics-chart { display: flex; align-items: end; gap: 8px; min-height: 250px; padding: 20px 5px 0; overflow-x: auto; }
.analytics-bar { display: grid; grid-template-rows: 180px auto auto; gap: 5px; min-width: 28px; flex: 1; align-items: end; text-align: center; }
.analytics-progress { width: 100%; height: 150px; appearance: none; border: 0; background: transparent; writing-mode: vertical-lr; transform: rotate(180deg); }
.analytics-progress::-webkit-progress-bar { background: var(--surface-soft); border-radius: 8px; }.analytics-progress::-webkit-progress-value { background: var(--accent); border-radius: 8px; }.analytics-progress::-moz-progress-bar { background: var(--accent); border-radius: 8px; }
.analytics-bar small { color: var(--muted); font-size: .6rem; }.analytics-bar strong { color: var(--text); font-size: .68rem; }
.content-block-list { display: grid; gap: 8px; max-height: 500px; overflow-y: auto; }.content-block-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }.content-block-list strong, .content-block-list small { display: block; }.content-block-list small { color: var(--muted); font-size: .68rem; }.content-block-list button { border: 0; color: var(--danger); background: transparent; font-size: .72rem; }
.traffic-summary { display: grid; gap: 8px; padding: 28px 0; }.traffic-summary strong { color: var(--accent); font-size: 2rem; }.traffic-summary span { color: var(--muted); font-size: .78rem; }
.admin-menu-toggle { display: none; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 20px; padding-top: 70px; }.hero-visual { min-height: 330px; }.project-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }.blog-layout { grid-template-columns: 1fr; }.blog-aside { order: -1; }.aside-card { position: static; }.article-layout { grid-template-columns: minmax(0, 1fr); }.article-aside { grid-template-columns: repeat(2, 1fr); }.metric-grid { grid-template-columns: repeat(3, 1fr); }.admin-grid { grid-template-columns: 1fr; }.media-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .container { width: min(calc(100% - 28px), var(--container)); }.site-header { min-height: 70px; gap: 12px; }.menu-toggle { display: block; margin-left: auto; }.primary-nav { position: absolute; top: 70px; right: 14px; left: 14px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-strong); box-shadow: var(--shadow); }.primary-nav.is-open { display: flex; }.primary-nav a { padding: 12px; }.header-actions { margin-left: 0; }.language-switcher { display: none; }.hero { min-height: auto; padding-block: 72px 80px; }.hero h1, .page-hero h1 { font-size: clamp(3.2rem, 17vw, 5.7rem); }.hero-visual { min-height: 280px; }.terminal-card { transform: rotate(1deg); }.section { padding-top: 62px; }.section-heading { align-items: start; flex-direction: column; }.split-grid, .contact-card { grid-template-columns: 1fr; }.project-grid, .post-grid { grid-template-columns: 1fr; }.timeline, .timeline-large { grid-template-columns: 1fr 1fr; }.timeline > div, .timeline > div:not(:first-child) { min-height: 120px; padding: 18px 14px 0 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.timeline > div:nth-child(even) { padding-left: 14px; border-right: 0; }.timeline > div:nth-last-child(-n+2) { border-bottom: 0; }.contact-cta { align-items: start; flex-direction: column; padding: 25px; }.contact-cta .button { width: 100%; }.page-hero { padding-block: 75px 35px; }.search-form { flex-direction: column; }.article-header { padding-block: 65px 35px; }.article-cover { margin-bottom: 35px; }.article-aside { grid-template-columns: 1fr; }.site-footer { grid-template-columns: 1fr 1fr; }.site-footer > div:first-child { grid-column: 1 / -1; }.admin-shell { display: block; }.admin-sidebar { position: fixed; z-index: 10; top: 0; bottom: 0; left: 0; width: 245px; transform: translateX(-100%); transition: transform .2s ease; }.admin-sidebar.is-open { transform: translateX(0); }.admin-topbar { padding: 0 18px; }.admin-menu-toggle { display: block; }.admin-content { padding: 28px 18px 60px; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.form-grid { grid-template-columns: 1fr; }.media-grid { grid-template-columns: repeat(2, 1fr); }.admin-page-heading { align-items: start; flex-direction: column; }.admin-page-heading .button { width: 100%; } }
@media (max-width: 420px) { .hero-actions .button { width: 100%; }.timeline, .timeline-large { grid-template-columns: 1fr; }.timeline > div, .timeline > div:not(:first-child), .timeline > div:nth-child(even) { min-height: auto; padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }.timeline > div:last-child { border-bottom: 0; }.timeline strong { margin-top: 10px; }.media-grid { grid-template-columns: 1fr; }.metric-grid { grid-template-columns: 1fr 1fr; }.metric-card strong { font-size: 1.4rem; }.site-footer { grid-template-columns: 1fr; }.site-footer > div:first-child { grid-column: auto; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes signal { to { transform: scaleY(.55); opacity: .45; } }
@media (max-width: 760px) { .specialty-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .article-nav { grid-template-columns: 1fr; }.article-nav > div:last-child { text-align: left; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.token-comment { color: #6c9d81; }.token-string { color: #e7c887; }.token-keyword { color: #83d7ff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Two-factor enrolment ─────────────────────────────────────────────────── */
.qr-enrolment { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; margin-top: 18px; }
.qr-frame { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; line-height: 0; }
.qr-frame svg { display: block; width: 100%; height: auto; }
.qr-fallback p { margin: 0 0 8px; font-size: .88rem; }
.secret-key code, .secret-uri code { display: inline-block; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-deep); color: var(--accent); font: .8rem/1.5 "JetBrains Mono", monospace; word-break: break-all; }
.secret-uri code { color: var(--muted); font-size: .72rem; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: recovery; }
.recovery-codes li { counter-increment: recovery; }
.recovery-codes code { display: block; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-deep); color: var(--text); font: .92rem/1.4 "JetBrains Mono", monospace; letter-spacing: .06em; text-align: center; }
.details-block { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.details-block > summary { padding: 12px 15px; color: var(--text); font-size: .86rem; font-weight: 650; cursor: pointer; list-style: none; }
.details-block > summary::-webkit-details-marker { display: none; }
.details-block > summary::before { content: "▸ "; color: var(--accent); }
.details-block[open] > summary::before { content: "▾ "; }
.details-block > *:not(summary) { padding: 0 15px 15px; }
.details-block p { margin: 0 0 10px; font-size: .84rem; }

/* ── Account security ─────────────────────────────────────────────────────── */
.detail-list { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 20px; margin: 0; font-size: .88rem; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; color: var(--text); }
.status { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.status-ok { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line-strong); }
.status-warn { color: var(--warning); background: rgba(244, 206, 122, .12); border: 1px solid rgba(244, 206, 122, .3); }

/* ── Administration tables ────────────────────────────────────────────────── */
.admin-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.admin-table th, .admin-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.admin-table tbody tr:hover { background: var(--accent-soft); }
.admin-table td small { display: block; color: var(--muted); font-size: .74rem; }
.table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.action-tag { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); color: var(--accent); font: .72rem "JetBrains Mono", monospace; }
.context-cell { max-width: 320px; }
.context-pair { display: block; font-size: .74rem; line-height: 1.5; word-break: break-word; }
.admin-page { display: grid; gap: 22px; }
.admin-notice { margin: 0 0 4px; border-radius: 0; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pagination a { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: .8rem; }
.pagination a:hover { color: var(--accent); border-color: var(--accent); }
.pagination a[aria-current="page"] { color: var(--bg-deep); background: var(--accent); border-color: var(--accent); font-weight: 700; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.filter-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 18px; }
.filter-form label { display: grid; gap: 5px; color: var(--muted); font-size: .74rem; }
.filter-form select, .filter-form input { min-width: 190px; }
.inline-form { display: inline-flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.inline-editor { display: inline-block; }
.inline-editor > summary { color: var(--accent); font-size: .78rem; cursor: pointer; list-style: none; }
.inline-editor > summary::-webkit-details-marker { display: none; }
.inline-editor > summary::after { content: " ▾"; }
.inline-editor[open] > summary::after { content: " ▴"; }
.inline-editor > form { margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); min-width: 240px; }
.checkbox { display: flex; align-items: center; gap: 8px; color: var(--text); }
.checkbox input { width: auto; min-width: 0; }
.button-danger { color: #2a0b0b; background: var(--danger); border-color: var(--danger); }
.button-danger:hover { box-shadow: 0 10px 28px rgba(255, 143, 143, .2); }
.button-small { min-height: 32px; padding: 0 11px; font-size: .74rem; }
.permission-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.permission-list code { display: block; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-deep); color: var(--muted); font-size: .72rem; }
.block-languages { display: grid; gap: 6px; margin-top: 8px; }
.block-languages .details-block { margin-top: 0; }

/* ── Long-form editors ────────────────────────────────────────────────────── */
.markdown-editor, .language-editor { min-height: 140px; font: .88rem/1.6 "JetBrains Mono", monospace; }
.language-editor { min-height: 90px; }

/* ── Public pages that had no rules of their own ──────────────────────────── */
.about-copy { display: grid; gap: 20px; max-width: 760px; color: var(--muted); font-size: 1.02rem; }
.about-grid, .profile-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.hero-copy { max-width: 640px; }
.contact-form-wrap { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }

@media (max-width: 760px) {
  .qr-enrolment { grid-template-columns: 1fr; }
  .qr-frame { max-width: 280px; }
  .detail-list { grid-template-columns: 1fr; gap: 2px 0; }
  .detail-list dd { margin-bottom: 10px; }
  .context-cell { max-width: none; }
  .filter-form { flex-direction: column; align-items: stretch; }
  .filter-form select, .filter-form input { min-width: 0; width: 100%; }
}

/* ── Post gallery ─────────────────────────────────────────────────────────── */
.article-cover img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 28px 0; }
.gallery-item { padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); cursor: zoom-in; transition: transform .2s ease, border-color .2s ease; }
.gallery-item:hover { transform: translateY(-3px); border-color: var(--accent); }
.gallery-item img { width: 100%; height: 170px; object-fit: cover; }
.gallery-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lightbox { width: min(94vw, 1100px); max-width: none; padding: 0; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--bg-deep); color: var(--text); }
.lightbox::backdrop { background: var(--scrim); backdrop-filter: blur(6px); }
.lightbox img { display: block; width: 100%; max-height: 74vh; height: auto; object-fit: contain; }
.lightbox button { position: absolute; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: rgba(4, 12, 9, .8); color: var(--text); font-size: 1.1rem; }
.lightbox button:hover { color: var(--accent); border-color: var(--accent); }
.lightbox-close { top: 12px; right: 12px; }
.lightbox-prev { top: 50%; left: 12px; transform: translateY(-50%); }
.lightbox-next { top: 50%; right: 12px; transform: translateY(-50%); }
.lightbox-caption { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; padding: 10px 16px; color: var(--muted); font-size: .78rem; text-align: center; }

/* ── Gallery editor in the admin panel ────────────────────────────────────── */
.gallery-selected { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.gallery-selected li { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.gallery-selected img { width: 100%; height: 110px; object-fit: cover; border-radius: 9px; }
.gallery-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .74rem; }
.gallery-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-remove { position: absolute; top: 15px; right: 15px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: rgba(4, 12, 9, .85); color: var(--muted); font-size: .74rem; }
.gallery-remove:hover { color: var(--danger); border-color: var(--danger); }
.gallery-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gallery-add select { flex: 1 1 240px; min-width: 0; }

/* ── Analytics breakdowns ─────────────────────────────────────────────────── */
.breakdown-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) 1fr auto; align-items: center; gap: 11px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.breakdown-row:last-child { border-bottom: 0; }
.breakdown-label { display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breakdown-bar { width: 100%; height: 7px; border: 0; border-radius: 999px; background: var(--surface-soft); appearance: none; }
.breakdown-bar::-webkit-progress-bar { border-radius: 999px; background: var(--surface-soft); }
.breakdown-bar::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.breakdown-bar::-moz-progress-bar { border-radius: 999px; background: var(--accent); }
.breakdown-value { min-width: 42px; color: var(--muted); font-size: .76rem; text-align: right; }

@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery-item img { height: 120px; }
  .breakdown-row { grid-template-columns: 1fr auto; }
  .breakdown-bar { grid-column: 1 / -1; order: 3; }
}

/* Stale machine translations, on the post form and the public article. */
.status-box { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.status-box p { margin: 0 0 10px; font-size: .84rem; line-height: 1.6; }
.status-box-warn { border-color: rgba(244, 206, 122, .35); background: rgba(244, 206, 122, .07); }
.status-box form { margin: 0; }

/* ── Default theme chooser in the settings panel ─────────────────────────── */
.theme-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; border: 0; }
.theme-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.theme-choice .theme-icon { width: 24px; height: 24px; stroke-width: 1.5; }
.theme-choice:hover { border-color: var(--line-strong); }
.theme-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.theme-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-label { display: flex; flex-direction: column; font-size: .86rem; font-weight: 600; line-height: 1.35; }
.theme-label small { font-weight: 400; font-size: .72rem; }


/* ══════════════════════════════════════════════════════════════════════════
   Visitor selectable themes.

   Each block only redefines tokens. Everything downstream reads var(--…), so a
   new theme is a palette and nothing else, and no component has to know which
   theme is active. A theme also sets a data attribute on <html> for the parts
   that genuinely need it: the sky layer and the effect engine switch on
   [data-effect].
   ══════════════════════════════════════════════════════════════════════════ */

/* Glass: blue on near black, with real translucency. The surfaces are what
   carry the theme, so they are given a backdrop blur and a brighter edge. */
[data-theme="glass"] {
  color-scheme: dark;
  --bg: #050b18;
  --bg-deep: #02060f;
  --surface: rgba(28, 58, 107, .34);
  --surface-strong: rgba(16, 36, 70, .58);
  --surface-soft: rgba(143, 196, 255, .07);
  --line: rgba(143, 196, 255, .16);
  --line-strong: rgba(143, 196, 255, .34);
  --text: #eef5ff;
  --muted: #9db4d4;
  --accent: #8fc4ff;
  --accent-strong: #5ea6f5;
  --accent-soft: rgba(143, 196, 255, .13);
  --accent-faint: rgba(143, 196, 255, .05);
  --accent-line: rgba(143, 196, 255, .18);
  --accent-line-soft: rgba(143, 196, 255, .26);
  --accent-glow: rgba(143, 196, 255, .22);
  --accent-halo: rgba(143, 196, 255, .34);
  --glow-one: rgba(64, 132, 214, .18);
  --glow-two: rgba(143, 196, 255, .07);
  --grid-line: rgba(143, 196, 255, .04);
  --scrim: rgba(2, 6, 15, .8);
  --glass: rgba(143, 196, 255, .12);
  --orb-core: rgba(143, 196, 255, .42);
  --orb-edge: rgba(64, 132, 214, .12);
  --danger: #ff9aa6;
  --warning: #ffd28a;
  --shadow: 0 28px 90px rgba(0, 0, 0, .46);
  --radius: 26px;
  --blur: 18px;
  --card-blur: saturate(150%) blur(18px);
}

[data-theme="glass"] .card,
[data-theme="glass"] .panel,
[data-theme="glass"] .terminal-card,
[data-theme="glass"] .language-switcher,
[data-theme="glass"] .icon-button {
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
}
[data-theme="glass"] .card { border-color: rgba(143, 196, 255, .2); }


/* Gaming: red on black, cut off at the corners rather than rounded. */
[data-theme="gaming"] {
  color-scheme: dark;
  --bg: #08080a;
  --bg-deep: #000;
  --surface: rgba(24, 24, 28, .84);
  --surface-strong: #16161a;
  --surface-soft: rgba(255, 59, 71, .07);
  --line: rgba(255, 59, 71, .18);
  --line-strong: rgba(255, 59, 71, .4);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --accent: #ff3b47;
  --accent-strong: #d11019;
  --accent-soft: rgba(255, 59, 71, .12);
  --accent-faint: rgba(255, 59, 71, .05);
  --accent-line: rgba(255, 59, 71, .2);
  --accent-line-soft: rgba(255, 59, 71, .3);
  --accent-glow: rgba(255, 59, 71, .26);
  --accent-halo: rgba(255, 59, 71, .45);
  --glow-one: rgba(255, 59, 71, .12);
  --glow-two: rgba(255, 140, 60, .05);
  --grid-line: rgba(255, 59, 71, .05);
  --scrim: rgba(0, 0, 0, .84);
  --glass: rgba(255, 255, 255, .06);
  --orb-core: rgba(255, 59, 71, .4);
  --orb-edge: rgba(120, 10, 16, .14);
  --danger: #ff6b6b;
  --warning: #ffc14d;
  --shadow: 0 24px 80px rgba(0, 0, 0, .6);
  --radius: 4px;
  --blur: 0px;
}

/* Sharper geometry, and a diagonal scanline texture in the background. */
[data-theme="gaming"] .card,
[data-theme="gaming"] .panel,
[data-theme="gaming"] .button,
[data-theme="gaming"] .icon-button { border-radius: 4px; }
[data-theme="gaming"] .brand-mark { border-radius: 2px; box-shadow: 0 0 22px var(--accent-glow); }
[data-theme="gaming"] .card:hover { box-shadow: 0 0 0 1px var(--accent-halo), 0 18px 44px rgba(0, 0, 0, .5); }

/* Electronic: sky blue on near black, with a lit circuit grid. */
[data-theme="electronic"] {
  color-scheme: dark;
  --bg: #020814;
  --bg-deep: #010409;
  --surface: rgba(11, 32, 66, .7);
  --surface-strong: #0a1e3c;
  --surface-soft: rgba(56, 224, 255, .07);
  --line: rgba(56, 224, 255, .2);
  --line-strong: rgba(56, 224, 255, .42);
  --text: #e6f7ff;
  --muted: #8fb4cc;
  --accent: #38e0ff;
  --accent-strong: #0aa8cc;
  --accent-soft: rgba(56, 224, 255, .12);
  --accent-faint: rgba(56, 224, 255, .05);
  --accent-line: rgba(56, 224, 255, .22);
  --accent-line-soft: rgba(56, 224, 255, .32);
  --accent-glow: rgba(56, 224, 255, .28);
  --accent-halo: rgba(56, 224, 255, .46);
  --glow-one: rgba(56, 224, 255, .14);
  --glow-two: rgba(13, 116, 188, .1);
  --grid-line: rgba(56, 224, 255, .06);
  --scrim: rgba(1, 6, 14, .82);
  --glass: rgba(56, 224, 255, .1);
  --orb-core: rgba(56, 224, 255, .44);
  --orb-edge: rgba(13, 116, 188, .14);
  --danger: #ff7a90;
  --warning: #ffd166;
  --shadow: 0 26px 86px rgba(0, 0, 0, .5);
  --radius: 14px;
  --blur: 0px;
}

[data-theme="electronic"] .card,
[data-theme="electronic"] .panel { box-shadow: inset 0 0 40px rgba(56, 224, 255, .04), var(--shadow); }
[data-theme="electronic"] .brand-mark { box-shadow: 0 0 26px var(--accent-glow), inset 0 0 14px var(--accent-soft); }

/* Cloudy: a lit overcast sky. When rain is switched on the sky darkens, which
   is what turns a calm backdrop into a storm. */
[data-theme="cloudy"] {
  color-scheme: dark;
  --bg: #1b2430;
  --bg-deep: #121924;
  --surface: rgba(38, 50, 66, .78);
  --surface-strong: #263242;
  --surface-soft: rgba(201, 214, 228, .08);
  --line: rgba(201, 214, 228, .18);
  --line-strong: rgba(201, 214, 228, .36);
  --text: #eef2f7;
  --muted: #a7b4c4;
  --accent: #c9d6e4;
  --accent-strong: #9db0c4;
  --accent-soft: rgba(201, 214, 228, .12);
  --accent-faint: rgba(201, 214, 228, .05);
  --accent-line: rgba(201, 214, 228, .22);
  --accent-line-soft: rgba(201, 214, 228, .3);
  --accent-glow: rgba(201, 214, 228, .2);
  --accent-halo: rgba(201, 214, 228, .34);
  --glow-one: rgba(190, 206, 226, .16);
  --glow-two: rgba(120, 140, 165, .12);
  --grid-line: rgba(201, 214, 228, .03);
  --scrim: rgba(10, 14, 20, .82);
  --glass: rgba(201, 214, 228, .14);
  --orb-core: rgba(201, 214, 228, .4);
  --orb-edge: rgba(120, 140, 165, .14);
  --danger: #ff9d9d;
  --warning: #ffd68a;
  --shadow: 0 26px 80px rgba(6, 10, 16, .5);
  --radius: 20px;
  --blur: 0px;
  /* The sky itself: light while calm, dark once it rains. */
  --sky-top: #46566d;
  --sky-bottom: #1b2430;
  --cloud: rgba(226, 234, 243, .5);
  --cloud-shadow: rgba(24, 32, 44, .35);
}

/* Nature: deep green, the companion to the falling drops effect. */
[data-theme="nature"] {
  color-scheme: dark;
  --bg: #0a1710;
  --bg-deep: #050d09;
  --surface: rgba(20, 45, 30, .74);
  --surface-strong: #14291c;
  --surface-soft: rgba(143, 224, 138, .07);
  --line: rgba(143, 224, 138, .17);
  --line-strong: rgba(143, 224, 138, .36);
  --text: #eef7ea;
  --muted: #9db8a0;
  --accent: #8fe08a;
  --accent-strong: #4fae62;
  --accent-soft: rgba(143, 224, 138, .12);
  --accent-faint: rgba(143, 224, 138, .05);
  --accent-line: rgba(143, 224, 138, .2);
  --accent-line-soft: rgba(143, 224, 138, .3);
  --accent-glow: rgba(143, 224, 138, .22);
  --accent-halo: rgba(143, 224, 138, .36);
  --glow-one: rgba(122, 200, 120, .13);
  --glow-two: rgba(60, 130, 90, .1);
  --grid-line: rgba(143, 224, 138, .035);
  --scrim: rgba(3, 10, 6, .82);
  --glass: rgba(143, 224, 138, .1);
  --orb-core: rgba(143, 224, 138, .4);
  --orb-edge: rgba(47, 110, 62, .14);
  --danger: #ff9d9d;
  --warning: #ffd68a;
  --shadow: 0 26px 80px rgba(0, 0, 0, .46);
  --radius: 20px;
  --blur: 0px;
}



/* ── Theme picker in the public header ────────────────────────────────────── */
.theme-picker { position: relative; }
.theme-picker .icon-button { padding: 0; overflow: hidden; }

.theme-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 30;
  width: 258px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}
.theme-panel[hidden] { display: none; }
/* Stroke only and inheriting the text colour, so a drawing takes the accent of
   whatever it sits on and never needs its own palette. */
.theme-icon { flex: 0 0 auto; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.theme-panel-title { margin: 0 0 10px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.theme-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.theme-option { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); text-align: left; font-size: .84rem; transition: background .18s ease, border-color .18s ease; }
.theme-option:hover { background: var(--surface-soft); }
.theme-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-option[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.theme-name { flex: 1 1 auto; }
.theme-option .theme-icon { width: 21px; height: 21px; }

.theme-effect { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.theme-effect[hidden] { display: none; }
.theme-effect-row { display: flex; align-items: center; gap: 10px; font-size: .84rem; cursor: pointer; }
.theme-effect-row input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.theme-effect-note { margin: 8px 0 0; font-size: .72rem; line-height: 1.5; }
.theme-reset { width: 100%; margin-top: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); font-size: .76rem; }
.theme-reset[hidden] { display: none; }
.theme-reset:hover { border-color: var(--line-strong); color: var(--text); }

/* ── Content arrival animation ────────────────────────────────────────────── */
/* The hidden state is scoped to .js-reveal, a class the inline head snippet
   adds. Without JavaScript the class is never added, so the page renders fully
   visible rather than staying blank waiting for an observer that will not run. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Staggered by position in the grid, so a row of cards arrives as a sweep
   rather than all at once. Purely decorative, hence nth-child and not an index
   baked into the markup. */
.post-grid > *:nth-child(1) { transition-delay: 0ms; }
.post-grid > *:nth-child(2) { transition-delay: 70ms; }
.post-grid > *:nth-child(3) { transition-delay: 140ms; }
.post-grid > *:nth-child(4) { transition-delay: 210ms; }
.post-grid > *:nth-child(5) { transition-delay: 280ms; }
.post-grid > *:nth-child(6) { transition-delay: 350ms; }
.post-grid > *:nth-child(n + 7) { transition-delay: 420ms; }

/* Placeholder shown while a card's real content is still arriving. */
.skeleton { position: relative; overflow: hidden; background: var(--surface-soft); border-radius: 10px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--accent-soft), transparent); animation: skeleton-sweep 1.5s ease-in-out infinite; }
.skeleton-line { height: 12px; margin-bottom: 9px; }
.skeleton-line:last-child { width: 62%; margin-bottom: 0; }
@keyframes skeleton-sweep { to { transform: translateX(100%); } }

/* A press on a button confirms that something is happening, which matters most
   on the contact form where the request can take a moment. */
.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.is-busy::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .skeleton::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   The backdrop.

   One element carries the whole background of a theme, in three layers: the
   element itself is the base wash, ::before is the atmosphere and ::after is
   the texture. Themes override the layers rather than adding elements, so
   switching theme cannot leave a layer behind from the previous one, which is
   what happened when the glow lived on a body pseudo element and the sky lived
   on a div that only two themes rendered.

   Everything here is behind the content and cannot be clicked, and the whole
   thing is fixed so it does not repaint while the page scrolls.
   ══════════════════════════════════════════════════════════════════════════ */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); }
.backdrop::before,
.backdrop::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* Atmosphere: the coloured light behind the page. */
.backdrop::before {
  background:
    radial-gradient(circle at 82% 8%, var(--glow-one), transparent 28rem),
    radial-gradient(circle at 8% 54%, var(--glow-two), transparent 26rem);
}

/* Texture: a fine grid that fades out towards the fold. */
.backdrop::after {
  opacity: .18;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

/* ── Midnight: the base, given the same treatment as the rest. A green aurora
   over a fine grid, lit from the top right and falling away to the fold. ─── */
[data-theme="dark"] .backdrop { background: linear-gradient(168deg, #0a1713 0%, var(--bg) 44%, #030806 100%); }
[data-theme="dark"] .backdrop::before {
  background:
    radial-gradient(56% 34% at 80% 6%, var(--glow-one), transparent 70%),
    radial-gradient(48% 32% at 6% 52%, var(--glow-two), transparent 72%),
    radial-gradient(70% 26% at 50% 102%, rgba(30, 84, 56, .34), transparent 72%);
}

/* ── Daylight: the same shape, opened up ─────────────────────────────────── */
[data-theme="light"] .backdrop { background: linear-gradient(170deg, #f4faf6 0%, var(--bg) 46%, #e2ede6 100%); }
[data-theme="light"] .backdrop::after { opacity: .3; background-size: 64px 64px; }

/* ── Glass: light through coloured glass, so the atmosphere is large, soft and
   offset rather than a pair of neat circles ─────────────────────────────── */
[data-theme="glass"] .backdrop { background: linear-gradient(165deg, #071022 0%, var(--bg) 40%, #02060f 100%); }
[data-theme="glass"] .backdrop::before {
  background:
    radial-gradient(60% 42% at 18% 12%, rgba(94, 166, 245, .26), transparent 68%),
    radial-gradient(46% 34% at 84% 26%, rgba(143, 196, 255, .17), transparent 70%),
    radial-gradient(70% 50% at 62% 96%, rgba(37, 99, 235, .2), transparent 72%),
    linear-gradient(112deg, transparent 32%, rgba(214, 234, 255, .07) 48%, transparent 62%);
  filter: blur(2px);
}
[data-theme="glass"] .backdrop::after {
  opacity: .12;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 40% 20%, black, transparent 78%);
}

/* ── Gaming: a hard red glow from above and below, with scanlines running
   across it. No soft grid, because nothing about this one is soft. ──────── */
[data-theme="gaming"] .backdrop { background: linear-gradient(180deg, #0d0d10 0%, var(--bg) 38%, #000 100%); }
[data-theme="gaming"] .backdrop::before {
  background:
    radial-gradient(52% 30% at 50% -6%, rgba(255, 59, 71, .24), transparent 70%),
    radial-gradient(64% 40% at 50% 108%, rgba(255, 59, 71, .16), transparent 72%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
[data-theme="gaming"] .backdrop::after {
  opacity: .55;
  background-image: repeating-linear-gradient(115deg, var(--grid-line) 0 1px, transparent 1px 7px);
  background-size: auto;
  mask-image: none;
}

/* ── Electronic: a lit board, a horizon glow at the fold and a tight grid ── */
[data-theme="electronic"] .backdrop { background: linear-gradient(180deg, #04101f 0%, var(--bg) 45%, #01050c 100%); }
[data-theme="electronic"] .backdrop::before {
  background:
    radial-gradient(58% 34% at 50% 0%, rgba(56, 224, 255, .26), transparent 68%),
    radial-gradient(90% 26% at 50% 100%, rgba(13, 116, 188, .3), transparent 70%),
    linear-gradient(180deg, transparent 62%, rgba(56, 224, 255, .09) 88%, transparent 100%);
}
[data-theme="electronic"] .backdrop::after {
  opacity: .55;
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 0%, black, transparent 72%);
}

/* ── Cloudy: an overcast sky, lit from above, with banks of cloud sitting on
   it. Turning rain on drains the light out of exactly these layers. ─────── */
[data-theme="cloudy"] .backdrop { background: linear-gradient(180deg, var(--sky-top) 0%, #33404f 46%, var(--sky-bottom) 100%); }
[data-theme="cloudy"] .backdrop::before {
  background:
    radial-gradient(58% 26% at 24% 16%, var(--cloud) 0%, transparent 72%),
    radial-gradient(44% 22% at 70% 9%, var(--cloud) 0%, transparent 74%),
    radial-gradient(66% 24% at 88% 32%, var(--cloud-shadow) 0%, transparent 72%),
    radial-gradient(40% 20% at 8% 44%, var(--cloud-shadow) 0%, transparent 74%);
  filter: blur(6px);
  transition: opacity 1.2s ease, filter 1.2s ease;
}
[data-theme="cloudy"] .backdrop::after {
  opacity: .1;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: linear-gradient(to bottom, black, transparent 60%);
}

[data-theme="cloudy"][data-effect="rain"] { --sky-top: #12161d; --sky-bottom: #070a0e; --cloud: rgba(120, 133, 150, .34); --cloud-shadow: rgba(8, 11, 15, .5); }
[data-theme="cloudy"][data-effect="rain"] .backdrop { background: linear-gradient(180deg, var(--sky-top) 0%, #0c1116 46%, var(--sky-bottom) 100%); }
[data-theme="cloudy"][data-effect="rain"] .backdrop::before { filter: blur(10px) saturate(.65); }

/* ── Nature: depth, with light coming down through it ───────────────────── */
[data-theme="nature"] .backdrop { background: linear-gradient(180deg, #14301e 0%, var(--bg) 44%, #040c07 100%); }
[data-theme="nature"] .backdrop::before {
  background:
    radial-gradient(54% 30% at 74% 6%, rgba(143, 224, 138, .16), transparent 68%),
    radial-gradient(46% 34% at 12% 34%, rgba(79, 174, 98, .13), transparent 72%),
    radial-gradient(80% 30% at 50% 104%, rgba(20, 60, 32, .5), transparent 70%);
}
[data-theme="nature"] .backdrop::after {
  opacity: .2;
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 60% 10%, black, transparent 76%);
}
[data-theme="nature"][data-effect="drops"] .backdrop { background: linear-gradient(180deg, #1a3d26 0%, var(--bg) 40%, #05110a 100%); }

/* ── The effect canvas ─────────────────────────────────────────────────────── */
.effect-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.site-shell, main, .site-footer { position: relative; z-index: 1; }

/* A shimmer that fills its host, used over card media while the image loads. */
.skeleton-fill { position: absolute; inset: 0; z-index: 1; border-radius: 0; pointer-events: none; }