/* ---------- fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/fira-code-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/fira-code-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;
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/saira-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/saira-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;
}

/* ---------- tokens ---------- */
:root {
  --font-main: 'Saira', system-ui, sans-serif;
  --font-code: 'Fira Code', ui-monospace, monospace;

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 5vh, 3rem);

  --fz-s: 0.875rem;
  --fz-m: clamp(1rem, .9rem + .4vw, 1.25rem);
  --fz-l: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --fz-xl: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);

  --radius: 10px;
  --max-w: 87.5rem; /* ~1400px */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

:root,
:root[data-theme='dark'] {
  --bg: #1c1c1c;
  --surface: #262627;
  --border: #38383b;
  --text: #e3e6e8;
  --text-muted: #8a949c;
  --comment: hsl(207, 10%, 40%);
  --hl: #f92472;
  --orange: #fd9621;
  --green: #b0ec36;
  --t-str: hsl(54, 70%, 68%);
  --t-num: hsl(261, 100%, 75%);
  --on-hl: #fff;
  --shadow: 0 2px 4px hsl(0 0% 0% / .2), 0 12px 24px hsl(0 0% 0% / .25);
}

:root[data-theme='light'] {
  --bg: #fafafa;
  --surface: #f0f0f1;
  --border: #dcdcdf;
  --text: #383a42;
  --text-muted: #6b6d75;
  --comment: hsl(230, 4%, 64%);
  --hl: #3a6fe0;
  --orange: #986801;
  --green: #3f8a3e;
  --t-str: hsl(119, 34%, 38%);
  --t-num: hsl(261, 60%, 52%);
  --on-hl: #fff;
  --shadow: 0 2px 4px hsl(0 0% 0% / .04), 0 12px 24px hsl(0 0% 0% / .06);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* one screen: header / content / footer; only scrolls if the viewport is too small to fit it */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  line-height: 1.6;
  transition: background-color .25s ease, color .25s ease;
}

h1, p, ul, pre { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--hl); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--hl); color: var(--on-hl); }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 700px) { .container { padding-inline: 2rem; } }

.c-hl { color: var(--hl); }
.c-orange { color: var(--orange); }

.icon {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- header ---------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-s);
}

.logo {
  font-family: var(--font-code);
  font-size: var(--fz-m);
  font-weight: 500;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--text-muted);
  transition: color .15s ease, background-color .15s ease;
}
.theme-toggle:hover { color: var(--text); background: var(--surface); }
.theme-toggle .icon { grid-area: 1 / 1; transition: transform .35s var(--ease), opacity .2s ease; }
[data-theme='dark'] .icon--moon,
[data-theme='light'] .icon--sun { opacity: 0; transform: rotate(-90deg) scale(.5); }

/* ---------- hero ---------- */
.hero {
  flex: 1;
  display: grid;
  align-content: center;
  align-items: center;
  gap: var(--space-l);
  padding-block: var(--space-m);
}
.hero > * { min-width: 0; }
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.hero__nick {
  font-family: var(--font-code);
  font-size: var(--fz-m);
  color: var(--text-muted);
}
.hero__nick::before { content: '@'; color: var(--hl); }

.hero__name {
  margin-block: .1em .15em;
  font-size: var(--fz-xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--hl);
}

.hero__role {
  font-size: var(--fz-l);
  letter-spacing: .02em;
}

.hero__bio {
  max-width: 30rem;
  margin-top: var(--space-s);
  font-size: var(--fz-m);
  color: var(--text-muted);
}

/* ---------- socials ---------- */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-l);
}
.socials a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em 1em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-code);
  font-size: var(--fz-s);
  color: var(--text-muted);
  transition: color .15s ease, border-color .15s ease, transform .15s var(--ease);
}
.socials a:hover { color: var(--text); border-color: var(--text); }
.socials a:active { transform: translateY(1px); }

/* ---------- terminal (Apple Terminal window, AI-CLI chat inside) ---------- */
.term {
  --term-bg: #1e1e1f;
  --term-bar: #323234;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--term-bg);
  box-shadow: var(--shadow);
  font-family: var(--font-code);
  font-size: clamp(.68rem, .58rem + .4vw, .9rem);
  line-height: 1.7;
}
[data-theme='light'] .term {
  --term-bg: #ffffff;
  --term-bar: #ececec;
}

.term__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.1rem;
  padding-inline: .8rem;
  background: var(--term-bar);
  border-bottom: 1px solid var(--border);
}
.term__dots {
  width: 3.25rem;
  height: .75rem;
  background:
    radial-gradient(circle at 6px 50%, #ff5f57 5.5px, transparent 6px),
    radial-gradient(circle at 26px 50%, #febc2e 5.5px, transparent 6px),
    radial-gradient(circle at 46px 50%, #28c840 5.5px, transparent 6px);
}
.term__title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--text-muted);
  pointer-events: none;
}

/* history grows upward; the input box stays pinned to the bottom like a chat CLI */
.term__body {
  flex: 1;
  display: grid;
  align-content: end;
  gap: .9em;
  padding: 1.1em 1.25em 1em;
}

.term__user { color: var(--text-muted); }

.term__reply {
  display: grid;
  grid-template-columns: 1.4em 1fr;
}
.term__bullet {
  width: .55em;
  height: .55em;
  margin-top: .6em;
  border-radius: 50%;
  background: var(--text);
}
.term__code {
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  font: inherit;
  scrollbar-width: none;
}

.term__status { color: var(--orange); }
.term__status .js-status-text { color: var(--text-muted); }
.term__spinner { display: inline-block; width: 1em; }
.term__spinner.is-spinning { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

.term__input {
  padding: .35em .8em;
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: pre;
  overflow: hidden;
}
.term__chevron { color: var(--text-muted); }

.term__hint {
  margin-top: -.6em;
  padding-left: .9em;
  font-size: .85em;
  color: var(--comment);
}

.term [hidden] { display: none; }

/* set in <head> before first paint, removed by main.js once the replay starts.
   visibility keeps the layout (the script measures it); the delayed reveal is a failsafe if JS never runs */
.term-pending .term :is(.js-user, .js-reply, .js-status) {
  visibility: hidden;
  animation: term-reveal 0s 3s forwards;
}
@keyframes term-reveal { to { visibility: visible; } }

@media (max-width: 479px) {
  .term { font-size: .64rem; }
  .term__body { padding: 1em .85em .9em; }
  .term__reply { grid-template-columns: 1.2em 1fr; }
}

.t-var { color: var(--text); }
.t-prop,
.t-punc { color: var(--orange); }
.t-op { color: var(--hl); }
.t-fn { color: var(--green); }
.t-str { color: var(--t-str); }
.t-num { color: var(--t-num); }
.term a.t-str:hover { text-decoration: underline; }

.caret {
  display: inline-block;
  width: .55em;
  height: 1em;
  margin-left: .2em;
  vertical-align: -.135em; /* centered on the letters (baseline to ascender), not hanging into the descender */
  background: var(--hl);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- footer ---------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-block: var(--space-s);
  font-size: var(--fz-s);
  color: var(--text-muted);
}
.footer__note { font-family: var(--font-code); color: var(--comment); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}