/* horixontal.ai shared styles. Every page loads this file, so it is fetched once and then served from cache. */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:block;src:url("/assets/fonts/JetBrainsMono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#111213;
  --ink:#D9DAD6;
  --dim:#82857F;
  --body:#A9ABA5;
  --accent:#F0B45A;
  --field:#0B0C0D;
  --line:#34373A;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.75;padding-inline:16px;padding-block:max(42px,calc(clamp(28px,8vh,88px) - 20px)) 56px}
@media (max-width:520px){body{padding-block-start:clamp(48px,8vh,88px)}}
#bg{position:fixed;inset:0;width:100%;height:100%;height:100lvh;display:block;z-index:0;pointer-events:none}
main{position:relative;z-index:1;max-width:40rem;margin-inline:auto}
p{margin:0 0 20px;color:var(--body)}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
a:hover,a:focus-visible{border-bottom-color:var(--accent);outline:none}
/* Shared chrome: identical on every page so nothing moves when navigating. The header block has a fixed height, the logo is pinned to its top-left corner, and the scrollbar gutter is always reserved. */
.hd{position:relative;height:114px}
.logo{position:absolute;left:0;top:20px;display:block;margin:0;color:var(--ink);font-weight:700;font-size:44.8px;letter-spacing:0;line-height:1;white-space:nowrap}
.logo .x{color:var(--accent)}
a.logo:hover,a.logo:focus-visible{border-bottom-color:transparent}
.tag{position:absolute;left:0;top:68.8px;margin:0;color:var(--dim)}
.tag::after{content:"";display:inline-block;width:.6em;height:1.05em;margin-left:.4em;vertical-align:-.15em;background:var(--accent);animation:blink 1.1s steps(1) infinite}
nav{position:absolute;z-index:2;top:clamp(16px,3vh,28px);left:0;right:0;width:min(40rem,calc(100% - 32px));margin-inline:auto;display:flex;justify-content:flex-end;gap:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
nav a{color:var(--dim)}
nav a:hover,nav a:focus-visible,nav a[aria-current]{color:var(--accent);border-bottom-color:transparent}
.lead{color:var(--ink);font-size:16px;font-weight:700;text-wrap:balance}
footer{margin-top:48px;font-size:12px;color:var(--dim)}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tag::after{animation:none}}
/* Page changes: keep the old page on screen until the new one is ready, then cross-fade quickly. The background field is drawn from the same clock on every page, so it reads as continuous. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}