@layer reset, base, layout, content, syntax;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
}
@layer base {
  :root { color-scheme: dark; --bg: #11151a; --surface: #171d23; --text: #e8ecee; --muted: #a0aab3; --accent: #71e0c1; --border: #2c343c; --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
  html { scroll-padding-top: 2rem; }
  body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
  ::selection { background: #71e0c1; color: #11151a; }
  a { text-decoration-thickness: 1px; text-underline-offset: .22em; }
  a:hover { color: var(--accent); }
  a:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 2px; }
  h1, h2, h3 { line-height: 1.18; letter-spacing: -.035em; font-weight: 650; }
  .wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
  .accent { color: var(--accent); } .muted { color: var(--muted); }
  .eyebrow { display: flex; flex-wrap: wrap; gap: .55rem; font-family: var(--mono); font-size: .7rem; line-height: 1.6; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  .eyebrow a { text-decoration: none; color: var(--accent); }
  .eyebrow > span:not(.accent) { color: var(--muted); }
  .text-link { font-family: var(--mono); font-size: .76rem; text-decoration: none; color: var(--accent); }
  .skip-link { position: fixed; top: -100px; left: 16px; padding: .7rem 1rem; background: var(--accent); color: var(--bg); z-index: 10; }
  .skip-link:focus { top: 16px; color: var(--bg); }
  #main:focus { outline: none; }
}
@layer layout {
  .site-header { border-bottom: 1px solid var(--border); }
  .header-top { display: flex; align-items: center; justify-content: space-between; padding-block: 27px 25px; }
  .brand { display: flex; align-items: center; gap: 13px; font-family: var(--mono); font-size: 1.12rem; letter-spacing: -.06em; text-decoration: none; }
  .brand strong { font-weight: 600; }
  .brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #365248; border-radius: 7px; color: var(--accent); font-weight: bold; letter-spacing: -.1em; background: #182821; }
  .header-note { display: flex; align-items: center; gap: 15px; font: .68rem var(--mono); color: var(--muted); }
  .status-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
  .site-nav { display: flex; flex-wrap: wrap; gap: 6px 28px; }
  .site-nav a { padding-block: 11px 17px; font-size: .75rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
  .site-nav a:hover, .site-nav a[aria-current] { color: var(--text); border-bottom-color: var(--accent); }
  .hero { display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: 60px; padding: 76px 0 72px; border-bottom: 1px solid var(--border); }
  .hero .eyebrow { font-size: .65rem; letter-spacing: .045em; }
  .hero h1 { margin-block: 22px 23px; font-size: clamp(2.8rem, 4.8vw, 4rem); line-height: 1.06; letter-spacing: -.055em; }
  .hero h1 > span { color: var(--accent); }
  .hero .cursor { color: #3d7d6c; }
  .hero-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.8; font-size: .92rem; }
  .hero .text-link { display: inline-block; margin-top: 26px; }
  .hero .text-link span { margin-left: 8px; }
  .terminal { border: 1px solid #35413e; border-radius: 9px; background: #141b1d; overflow: hidden; box-shadow: 0 15px 50px #0002; transform: rotate(1deg); }
  .terminal-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 17px; border-bottom: 1px solid var(--border); color: #86968e; font: .63rem var(--mono); }
  .terminal-bar > span:first-child { color: #657d70; font-size: .7rem; letter-spacing: .25em; }
  .terminal-body { padding: 23px; font: .72rem/1.8 var(--mono); }
  .terminal-comment { color: #82988e; margin-block: 20px; }
  .terminal dl { margin-bottom: 22px; }
  .terminal dl > div { display: flex; justify-content: space-between; padding-block: 2px; }
  .terminal dt { color: var(--muted); } .terminal dd { color: #d1e1d9; }
  .terminal-cursor { color: var(--accent); }
  .journal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 72px; padding-block: 45px 80px; }
  .section-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; }
  .section-heading h2 { font: 500 .69rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
  .section-heading > span { font: .65rem var(--mono); color: var(--muted); }
  .entry { padding: 30px 0; border-bottom: 1px solid var(--border); }
  .entry-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 17px; font: .65rem/1.6 var(--mono); color: var(--muted); }
  .entry-meta a { text-decoration: none; color: #8ac8b8; }
  .entry-meta a::before { content: "/"; color: #68747d; margin-right: 17px; }
  .entry h3 { margin-block: 10px 12px; font-size: 1.35rem; line-height: 1.4; letter-spacing: -.025em; }
  .entry h3 a { display: block; position: relative; padding-right: 30px; text-decoration: none; }
  .entry-arrow { position: absolute; right: 0; top: 1px; color: #8da39c; font-size: 1.1rem; font-weight: 400; }
  .entry > p { font-size: .86rem; color: var(--muted); line-height: 1.8; }
  .read-link { display: inline-block; margin-top: 15px; font: .68rem var(--mono); text-decoration: none; color: #c7d5d1; }
  .read-link span { margin-left: 8px; color: var(--accent); }
  .sidebar section { margin-bottom: 35px; }
  .sidebar .eyebrow { margin-bottom: 18px; font-size: .65rem; }
  .topic-list { list-style: none; padding: 0; }
  .topic-list li + li { border-top: 1px solid #252e35; }
  .topic-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; padding: 12px 0; font-size: .78rem; text-transform: capitalize; }
  .topic-count { min-width: 24px; text-align: right; color: #8d9b9f; font: .64rem var(--mono); }
  .about-note { margin-top: 36px; padding: 23px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; }
  .mini-prompt { display: block; color: var(--accent); font: 1.2rem var(--mono); margin-bottom: 14px; }
  .about-note h2 { font-size: 1.1rem; margin-bottom: 10px; }
  .about-note p { color: var(--muted); font-size: .78rem; line-height: 1.8; margin-bottom: 17px; }
  .about-note .text-link { font-size: .65rem; }
  .year-list { display: flex; flex-wrap: wrap; gap: 9px; }
  .year-list a { color: var(--muted); text-decoration: none; border: 1px solid var(--border); padding: 5px 10px; border-radius: 3px; font: .65rem var(--mono); }
  .year-list a:hover { color: var(--accent); border-color: #527d70; }
  .rss-link { display: block; padding-top: 22px; border-top: 1px solid var(--border); text-decoration: none; font: .69rem var(--mono); color: var(--muted); }
  .rss-link span { color: var(--accent); margin-right: 9px; }
  .pagination { display: flex; gap: 8px; margin-top: 30px; }
  .pagination a { display: grid; place-items: center; width: 38px; min-height: 38px; font: .75rem var(--mono); text-decoration: none; border: 1px solid var(--border); border-radius: 4px; }
  .pagination a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
  .archive-header { padding: 54px 0 40px; border-bottom: 1px solid var(--border); }
  .archive-header .eyebrow { margin: 27px 0 14px; }
  .archive-header h1 { font-size: clamp(2rem, 5vw, 3.5rem); text-transform: capitalize; }
  .back-link { font: .72rem var(--mono); color: var(--muted); text-decoration: none; }
  .site-footer { padding-block: 30px 35px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; }
  .footer-brand { font: .77rem var(--mono); text-decoration: none; }
  .site-footer p { font-size: .69rem; color: var(--muted); grid-row: 2; }
  .site-footer > div { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 23px; }
  .site-footer > div a { font-size: .69rem; text-decoration: none; color: var(--muted); }
  .not-found { padding-block: 95px 120px; max-width: 750px; }
  .not-found h1 { margin: 22px 0; font-size: clamp(2.5rem, 5vw, 4rem); }
  .not-found > p:not(.eyebrow) { color: var(--muted); }
  .button { display: inline-block; margin-top: 30px; padding: 10px 17px; border: 1px solid var(--accent); color: var(--accent); border-radius: 4px; text-decoration: none; }
  @media (max-width: 1000px) {
    .wrap { width: calc(100% - 64px); }
    .hero { gap: 35px; grid-template-columns: 1.4fr 1fr; }
    .hero h1 { font-size: 3.1rem; }
    .journal-layout { gap: 40px; grid-template-columns: minmax(0, 1fr) 225px; }
    .site-nav { column-gap: 23px; }
    .terminal-body { font-size: .65rem; padding: 19px; }
  }
  @media (max-width: 760px) {
    .wrap { width: calc(100% - 40px); }
    .header-top { padding-block: 22px 17px; } .header-note { display: none; }
    .site-nav { gap: 0 20px; padding-bottom: 10px; }
    .site-nav a { padding-block: 8px; font-size: .69rem; }
    .hero { grid-template-columns: 1fr; padding-block: 45px; gap: 33px; }
    .hero h1 { font-size: clamp(2.8rem, 9vw, 4rem); }
    .hero-copy > p:not(.eyebrow) { font-size: .85rem; }
    .hero-copy > p br { display: none; }
    .terminal { max-width: 440px; width: 100%; transform: none; }
    .terminal-body { font-size: .72rem; padding: 20px; }
    .journal-layout { grid-template-columns: 1fr; padding-block: 32px 45px; gap: 45px; }
    .entry h3 { font-size: 1.21rem; } .entry { padding-block: 25px; }
    .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .sidebar section { margin: 0; } .sidebar .about-note { padding: 19px; }
    .rss-link { align-self: start; }
    .site-footer { grid-template-columns: 1fr; }
    .site-footer > div { grid-column: 1; grid-row: 3; margin-top: 12px; }
  }
  @media (max-width: 420px) { .sidebar { grid-template-columns: 1fr; gap: 27px; } .brand { font-size: 1.05rem; } }
}
@layer content {
  .article { max-width: 800px; margin-inline: auto; padding-block: 50px 75px; }
  .article-header { padding-bottom: 30px; margin-bottom: 36px; border-bottom: 1px solid var(--border); }
  .article-header .eyebrow { margin-top: 35px; }
  .article-header h1 { font-size: clamp(2.1rem, 4.1vw, 3.4rem); line-height: 1.13; margin: 17px 0 22px; overflow-wrap: anywhere; }
  .article-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; font: .7rem/1.8 var(--mono); color: var(--muted); }
  .article-meta a { text-decoration: none; }
  .featured-image { margin: 0 auto 32px; border-radius: 5px; max-height: 420px; object-fit: contain; }
  .prose { font-size: 1.02rem; line-height: 1.85; color: #cdd4d9; overflow-wrap: anywhere; }
  .prose > * + * { margin-top: 1.4rem; }
  .prose h2 { font-size: 1.7rem; color: var(--text); margin-top: 2.5rem; }
  .prose h3 { font-size: 1.3rem; color: var(--text); margin-top: 2rem; }
  .prose h4 { font-size: 1.1rem; color: var(--text); }
  .prose ul, .prose ol { padding-left: 1.5rem; }
  .prose li + li { margin-top: .45rem; }
  .prose li > p + p { margin-top: 1rem; }
  .prose a { color: var(--accent); }
  .prose strong { color: var(--text); font-weight: 650; }
  .prose img { margin-inline: auto; border-radius: 4px; }
  .prose blockquote { margin-inline: 0; padding: 12px 22px; border-left: 2px solid #639e8d; background: #17221f; color: #c3d4ce; }
  .prose blockquote p + p { margin-top: 1rem; }
  .prose :not(pre) > code { font: .84em var(--mono); background: #222c31; color: #b8e5d8; padding: .18em .3em; border-radius: 3px; }
  .prose pre { max-width: 100%; overflow: auto; padding: 23px; border: 1px solid #35433f; border-radius: 6px; background: #0d1215; font: .78rem/1.8 var(--mono); tab-size: 2; white-space: pre; overflow-wrap: normal; }
  .prose pre code { font: inherit; }
  .table-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: 5px; }
  .prose table { width: 100%; border-collapse: collapse; font-size: .83rem; line-height: 1.6; }
  .prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 15px; border-bottom: 1px solid var(--border); min-width: 90px; }
  .prose th { background: #1c252a; color: var(--text); font-weight: 600; }
  .prose tr:last-child td { border: 0; }
  .prose .video { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
  .article-tags { margin-top: 45px; padding-top: 25px; border-top: 1px solid var(--border); }
  .article-tags > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .article-tags a { font: .65rem var(--mono); padding: 6px 9px; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); text-decoration: none; }
  .article-end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 44px; font: .7rem var(--mono); }
  .article-end span { color: var(--muted); } .article-end a { color: var(--accent); text-decoration: none; }
  @media (max-width: 760px) { .article { padding-block: 32px 50px; } .prose { font-size: .96rem; } .prose pre { padding: 17px; font-size: .72rem; } }
}
@layer syntax {
  code[class*="language-"], pre[class*="language-"] { color: #d6e1df; }
  .token.comment { color: #91a398; }
  .token.keyword, .token.atrule { color: #c7a7e8; }
  .token.string, .token.attr-value { color: #b7d58e; }
  .token.function, .token.class-name { color: #71e0c1; }
  .token.variable, .token.parameter { color: #91bff0; }
  .token.number, .token.boolean { color: #efc087; }
  .token.operator, .token.punctuation { color: #a9bab6; }
  .token.tag, .token.attr-name { color: #92c9e3; }
}