@layer reset, tokens, base, layout, components, utilities, motion;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  img, picture { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; }
  button { border: 0; }
}
@layer tokens {
  :root {
    color-scheme: dark; --bg: #080b0d; --bg-deep: #030506; --surface: #101518; --surface-2: #151c20;
    --surface-glass: rgb(15 21 24 / 78%); --text: #eef4ef; --muted: #94a29b; --faint: #65716b; --border: #27312d;
    --accent: #79f2a0; --accent-rgb: 121 242 160; --accent-ink: #06150b; --danger: #ff7a82; --warning: #ffc46b;
    --success: #79f2a0; --shadow: 0 24px 80px rgb(0 0 0 / 34%); --radius-sm: .45rem; --radius: .9rem; --radius-lg: 1.4rem;
    --container: min(1180px, calc(100% - 2rem)); --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", "Noto Sans Mono", monospace;
    --sans: Inter, "Noto Sans", "Noto Sans Arabic", Tahoma, system-ui, sans-serif; --ease: cubic-bezier(.2, .75, .2, 1);
  }
  [data-accent="blue"] { --accent: #69c9ff; --accent-rgb: 105 201 255; --accent-ink: #03141e; }
  [data-accent="amber"] { --accent: #ffbd62; --accent-rgb: 255 189 98; --accent-ink: #1e0f02; }
  [data-accent="purple"] { --accent: #c29aff; --accent-rgb: 194 154 255; --accent-ink: #130823; }
  [data-theme="light"] {
    color-scheme: light; --bg: #eeeae0; --bg-deep: #ded8ca; --surface: #faf7f0; --surface-2: #fffdf8;
    --surface-glass: rgb(250 247 240 / 84%); --text: #171c1a; --muted: #55605b; --faint: #707a75; --border: #c9cec7;
    --shadow: 0 24px 70px rgb(46 50 47 / 12%);
  }
}
@layer base {
  html { background: var(--bg); }
  body {
    min-height: 100vh; background: radial-gradient(circle at 12% -10%, rgb(var(--accent-rgb) / 10%), transparent 28rem), linear-gradient(180deg, var(--bg-deep), var(--bg) 26rem);
    color: var(--text); font-family: var(--sans); font-size: clamp(.96rem, .9rem + .18vw, 1.075rem); line-height: 1.7; text-rendering: optimizeLegibility; overflow-x: hidden;
  }
  body::before { position: fixed; z-index: 100; inset: 0; content: ""; pointer-events: none; opacity: .035; background: repeating-linear-gradient(180deg, transparent 0 3px, #fff 4px); }
  a { color: inherit; text-decoration-color: rgb(var(--accent-rgb) / 55%); text-underline-offset: .22em; }
  a:hover { text-decoration-color: var(--accent); }
  ::selection { background: rgb(var(--accent-rgb) / 30%); color: var(--text); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: .2rem; }
  h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
  h1 { font-size: clamp(2.75rem, 8vw, 7.4rem); } h2 { font-size: clamp(2rem, 5vw, 4.8rem); } h3 { font-size: clamp(1.18rem, 2vw, 1.55rem); }
  p { text-wrap: pretty; } code, kbd, pre { font-family: var(--mono); }
  kbd { padding: .12rem .4rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: .3rem; background: var(--surface-2); }
  [hidden] { display: none !important; }
}
@layer layout {
  .container { width: var(--container); margin-inline: auto; }
  .section { padding-block: clamp(5rem, 10vw, 9rem); } .section--tight { padding-block: clamp(3rem, 7vw, 5.5rem); }
  .section-head { display: grid; gap: 1rem; max-width: 52rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
  .section-head p { max-width: 44rem; color: var(--muted); font-size: 1.08em; }
  .grid { display: grid; gap: 1rem; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; } .stack { display: grid; gap: 1rem; } .stack--lg { display: grid; gap: 2rem; }
  .page-hero { padding-block: clamp(8rem, 14vw, 12rem) clamp(4rem, 8vw, 7rem); }
  .page-hero h1 { max-width: 14ch; } .page-hero p { max-width: 45rem; margin-top: 1.5rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); }
  .split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
  @media (max-width: 850px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split { grid-template-columns: 1fr; } }
  @media (max-width: 620px) { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } .section { padding-block: 4.5rem; } }
}
@layer components {
  .skip-link { position: fixed; z-index: 200; inset-block-start: .6rem; inset-inline-start: .6rem; translate: 0 -180%; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 800; }
  .skip-link:focus { translate: 0; }
  .site-header { position: fixed; z-index: 80; inset: .7rem 0 auto; width: var(--container); margin-inline: auto; border: 1px solid rgb(var(--accent-rgb) / 12%); border-radius: 1rem; background: var(--surface-glass); box-shadow: 0 12px 50px rgb(0 0 0 / 15%); backdrop-filter: blur(18px) saturate(130%); }
  .nav { min-height: 4rem; display: flex; align-items: center; gap: 1rem; padding: .55rem .65rem .55rem 1rem; }
  [dir="rtl"] .nav { padding: .55rem 1rem .55rem .65rem; }
  .wordmark { margin-inline-end: auto; font: 900 1rem/1 var(--mono); letter-spacing: .18em; text-decoration: none; }
  .wordmark::before { content: "[ "; color: var(--accent); } .wordmark::after { content: " ]"; color: var(--accent); }
  .nav__links { display: flex; align-items: center; gap: .2rem; list-style: none; }
  .nav__links a { display: block; padding: .52rem .7rem; border-radius: .5rem; color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 700; }
  .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); background: rgb(var(--accent-rgb) / 9%); }
  .nav__links a[aria-current="page"]::after { display: block; height: 2px; margin-top: .16rem; background: var(--accent); content: ""; }
  .icon-button { display: inline-grid; place-items: center; min-width: 2.8rem; min-height: 2.8rem; padding: .55rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface-2); color: var(--text); cursor: pointer; }
  .icon-button:hover { border-color: rgb(var(--accent-rgb) / 55%); color: var(--accent); } .menu-button { display: none; }
  @media (max-width: 900px) {
    .menu-button { display: inline-grid; }
    .nav__links { position: absolute; inset: calc(100% + .5rem) 0 auto; display: none; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
    .nav__links[data-open="true"] { display: grid; } .nav__links a { padding: .8rem 1rem; }
  }
  .eyebrow, .kicker { color: var(--accent); font: 750 .74rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
  .eyebrow::before { content: "●"; margin-inline-end: .55rem; animation: pulse 2.4s ease-in-out infinite; }
  .hero { min-height: 100svh; display: grid; align-items: center; padding-block: 8rem 5rem; }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
  .hero h1 { max-width: 10.5ch; margin-block: 1.4rem; } .hero h1 em { color: var(--accent); font-style: normal; }
  .hero__lede { max-width: 42rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.32rem); }
  .hero__actions { margin-top: 2rem; } .role-line { min-height: 2rem; margin-top: 1.2rem; font: 700 1rem/1.5 var(--mono); color: var(--accent); }
  .role-line::before { content: "> "; color: var(--faint); } .role-line::after { content: "█"; animation: blink 1s steps(1) infinite; }
  .profile-terminal { position: relative; min-height: 29rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgb(var(--accent-rgb) / 8%), transparent 45%), var(--surface); box-shadow: var(--shadow), inset 0 0 40px rgb(var(--accent-rgb) / 4%); overflow: hidden; }
  .profile-terminal::before { position: absolute; inset: 3rem 1rem 1rem; border: 1px solid rgb(var(--accent-rgb) / 12%); content: ""; }
  .terminal-bar { display: flex; align-items: center; gap: .4rem; min-height: 2rem; font: .7rem/1 var(--mono); color: var(--faint); }
  .terminal-bar i { width: .55rem; aspect-ratio: 1; border-radius: 50%; background: var(--border); }
  .avatar { position: absolute; inset: 4.2rem 2.2rem 4.2rem; display: grid; place-items: center; border: 1px dashed rgb(var(--accent-rgb) / 25%); background: linear-gradient(90deg, transparent 49.5%, rgb(var(--accent-rgb) / 10%) 50%, transparent 50.5%), linear-gradient(transparent 49.5%, rgb(var(--accent-rgb) / 10%) 50%, transparent 50.5%); }
  .avatar__mark { font: 900 clamp(4rem, 10vw, 7rem)/1 var(--mono); color: var(--accent); text-shadow: 0 0 30px rgb(var(--accent-rgb) / 28%); }
  .avatar__label { position: absolute; inset: auto 1rem 1rem; font: .72rem/1.5 var(--mono); color: var(--muted); }
  .status-row { position: absolute; inset: auto 1.4rem 1.2rem; display: flex; justify-content: space-between; width: calc(100% - 2.8rem); font: .7rem/1 var(--mono); }
  .status-dot { color: var(--success); } .status-dot::before { content: "●"; margin-inline-end: .4rem; }
  @media (max-width: 850px) { .hero { min-height: auto; } .hero__grid { grid-template-columns: 1fr; } .profile-terminal { min-height: 23rem; } }
  .button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.05rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface-2); color: var(--text); font-weight: 800; text-decoration: none; cursor: pointer; transition: translate .2s var(--ease), border-color .2s, background .2s; }
  .button:hover { translate: 0 -2px; border-color: rgb(var(--accent-rgb) / 55%); } .button--primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); } .button--ghost { background: transparent; } .button--danger { border-color: rgb(255 122 130 / 40%); color: var(--danger); }
  .button[disabled] { opacity: .48; cursor: not-allowed; translate: 0; }
  .card { position: relative; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, rgb(var(--accent-rgb) / 3%), transparent 50%), var(--surface); box-shadow: 0 16px 50px rgb(0 0 0 / 8%); overflow: clip; }
  .card::before { position: absolute; inset: 0 auto auto 0; width: 2.3rem; height: 2px; background: var(--accent); content: ""; }
  .card--interactive { transition: translate .3s var(--ease), border-color .3s, box-shadow .3s; } .card--interactive:hover { translate: 0 -.35rem; border-color: rgb(var(--accent-rgb) / 40%); box-shadow: 0 22px 65px rgb(0 0 0 / 18%); }
  .card p { color: var(--muted); } .card h3 + p { margin-top: .8rem; } .card .button { margin-top: 1.25rem; }
  .card ul, .card ol, .article-prose ul, .article-prose ol { padding-inline-start: 1.25rem; }
  .card__meta { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-bottom: 1rem; color: var(--faint); font: .72rem/1.4 var(--mono); }
  .card__visual { display: grid; place-items: center; min-height: 11rem; margin: -2rem -2rem 1.4rem; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgb(var(--accent-rgb) / 13%), transparent), repeating-linear-gradient(90deg, transparent 0 18px, rgb(var(--accent-rgb) / 5%) 19px); color: var(--accent); font: 900 2rem/1 var(--mono); }
  .tag { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .28rem .55rem; border: 1px solid var(--border); border-radius: 99rem; background: rgb(var(--accent-rgb) / 5%); color: var(--muted); font: 650 .68rem/1 var(--mono); }
  .tag--accent { border-color: rgb(var(--accent-rgb) / 35%); color: var(--accent); }
  .notice { padding: 1rem 1.2rem; border-inline-start: 3px solid var(--warning); background: rgb(255 196 107 / 8%); color: var(--muted); }
  .placeholder { border: 1px dashed rgb(var(--accent-rgb) / 38%); color: var(--muted); }
  .stats { margin-top: -2rem; position: relative; z-index: 2; } .stat { min-height: 10rem; display: flex; flex-direction: column; justify-content: space-between; }
  .stat__value { color: var(--accent); font: 900 clamp(2.3rem, 4vw, 4rem)/1 var(--mono); } .stat__label { color: var(--muted); font-size: .9rem; }
  .about-card .kicker { margin-bottom: 2rem; } .about-card h3 { margin-bottom: .85rem; }
  .filters { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: .75rem; padding: .8rem; margin-bottom: 2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .field { display: grid; gap: .42rem; } .field label { color: var(--muted); font: 700 .72rem/1.3 var(--mono); }
  .input, .select, .textarea { width: 100%; min-height: 3rem; padding: .72rem .85rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--bg); color: var(--text); caret-color: var(--accent); }
  .textarea { min-height: 9rem; resize: vertical; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 10%); }
  @media (max-width: 850px) { .filters { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .filters { grid-template-columns: 1fr; } }
  .terminal { border: 1px solid rgb(var(--accent-rgb) / 25%); border-radius: var(--radius); background: #050807; color: #d9e5dc; box-shadow: inset 0 0 50px rgb(var(--accent-rgb) / 4%), var(--shadow); overflow: hidden; }
  .terminal__bar { display: flex; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid #243029; color: #839087; font: .72rem/1 var(--mono); }
  .terminal__output { height: 18rem; padding: 1rem; overflow: auto; white-space: pre-wrap; font: .8rem/1.7 var(--mono); }
  .terminal__line { margin-bottom: .5rem; } .terminal__line--command { color: var(--accent); } .terminal__line--error { color: var(--danger); }
  .terminal__form { display: flex; align-items: center; border-top: 1px solid #243029; } .terminal__prompt { padding-inline-start: 1rem; color: var(--accent); font: 800 .9rem/1 var(--mono); }
  .terminal__input { flex: 1; min-width: 0; padding: 1rem .65rem; border: 0; outline: 0; background: transparent; color: #f0f7f2; font: .86rem/1 var(--mono); } .terminal__run { margin-inline-end: .5rem; }
  .timeline { position: relative; padding-inline-start: 2rem; list-style: none; } [dir="rtl"] .timeline { padding-inline: 2rem 0; }
  .timeline::before { position: absolute; inset: .5rem auto 0 .4rem; width: 1px; background: var(--border); content: ""; } [dir="rtl"] .timeline::before { inset-inline: .4rem auto; }
  .timeline li { position: relative; padding-bottom: 2.2rem; } .timeline li::before { position: absolute; inset-block-start: .35rem; inset-inline-start: -1.95rem; width: .75rem; aspect-ratio: 1; border: 2px solid var(--bg); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); content: ""; }
  .timeline time { display: block; margin-bottom: .35rem; color: var(--accent); font: .72rem/1 var(--mono); }
  .meter { display: grid; grid-template-columns: minmax(7rem, .4fr) 1fr; align-items: center; gap: 1rem; } .meter__track { height: .45rem; border-radius: 1rem; background: var(--border); overflow: hidden; } .meter__fill { display: block; height: 100%; width: var(--level); background: var(--accent); }
  .article-header { max-width: 58rem; } .article-header h1 { max-width: 13ch; margin-block: 1.2rem; font-size: clamp(2.6rem, 7vw, 6.3rem); }
  .article-prose { max-width: 47rem; } .article-prose p { margin-block: 1.45rem; color: color-mix(in srgb, var(--text) 88%, var(--muted)); font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.85; } .article-prose h2 { margin-block: 3rem 1rem; font-size: 2rem; } .article-aside { position: sticky; top: 7rem; }
  .modal, .settings { width: min(34rem, calc(100% - 2rem)); max-height: min(42rem, calc(100dvh - 2rem)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
  .modal::backdrop, .settings::backdrop { background: rgb(0 0 0 / 68%); backdrop-filter: blur(4px); }
  .modal__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--surface); }
  .modal__body { display: grid; gap: 1rem; padding: 1.2rem; overflow: auto; } .choice-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .choice { position: relative; } .choice input { position: absolute; opacity: 0; } .choice label { display: grid; place-items: center; min-height: 2.8rem; border: 1px solid var(--border); border-radius: .55rem; cursor: pointer; } .choice input:checked + label { border-color: var(--accent); background: rgb(var(--accent-rgb) / 9%); color: var(--accent); }
  .boot { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 1rem; background: #020403; color: #dff9e7; font-family: var(--mono); }
  .boot__inner { width: min(46rem, 100%); } .boot__brand { margin-bottom: 2rem; color: var(--accent); font-size: clamp(2rem, 9vw, 5rem); font-weight: 900; letter-spacing: .12em; } .boot__log { min-height: 12rem; color: #9faf9f; } .boot__line { animation: reveal .25s both; } .boot .button { margin-top: 2rem; }
  .site-footer { margin-top: 6rem; border-top: 1px solid var(--border); background: var(--bg-deep); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 3rem; padding-block: 4rem; } .footer-grid p { max-width: 28rem; color: var(--muted); } .footer-nav { display: grid; align-content: start; gap: .55rem; list-style: none; } .footer-nav a { color: var(--muted); }
  .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; border-top: 1px solid var(--border); color: var(--faint); font: .72rem/1.5 var(--mono); } @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
  .toast { position: fixed; z-index: 180; inset: auto 1rem 1rem auto; max-width: min(24rem, calc(100% - 2rem)); padding: .85rem 1rem; border: 1px solid rgb(var(--accent-rgb) / 35%); border-radius: .6rem; background: var(--surface-2); box-shadow: var(--shadow); }
  .cursor-dot, .cursor-ring { position: fixed; z-index: 190; inset: 0 auto auto 0; pointer-events: none; translate: -100px -100px; border-radius: 50%; }
  .cursor-dot { width: 5px; height: 5px; margin: -2px; background: var(--accent); }
  .cursor-ring { width: 26px; height: 26px; margin: -13px; border: 1px solid rgb(var(--accent-rgb) / 55%); }
  [dir="rtl"] .toast { inset: auto auto 1rem 1rem; }
  .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
  .empty-state { grid-column: 1 / -1; padding: 4rem 1rem; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); }
}
@layer utilities { .muted { color: var(--muted); } .accent { color: var(--accent); } .mono { font-family: var(--mono); } .measure { max-width: 44rem; } .text-center { text-align: center; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } }
@layer motion {
  @keyframes blink { 50% { opacity: 0; } } @keyframes pulse { 50% { opacity: .35; } } @keyframes reveal { from { opacity: 0; translate: 0 .4rem; } }
  .reveal { opacity: 0; translate: 0 1rem; transition: opacity .7s var(--ease), translate .7s var(--ease); } .reveal.is-visible { opacity: 1; translate: 0; } html[data-motion="low"] .reveal { transition-duration: .2s; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; translate: none; } }
}
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } }
@media print {
  :root { color-scheme: light; --bg: #fff; --surface: #fff; --surface-2: #fff; --text: #111; --muted: #444; --border: #bbb; --accent: #111; }
  body::before, .site-header, .site-footer, .no-print, .settings, .boot { display: none !important; }
  body { background: #fff; font-size: 10pt; } .section, .page-hero { padding-block: 1.5rem; } .container { width: 100%; } .card { break-inside: avoid; box-shadow: none; } a { text-decoration: none; }
}