/* (c) 2026 Bhavani Shankar Ajith. All rights reserved. See /LICENSE. */
/* black, white, one blue. IBM Plex Mono body, IBM Plex Sans headings. */

:root {
  --mono-blue: #008fff;
  --mono-tile: #121217;
  --mono-tile-alt: #0e0e0e;
  --mono-gray: #797979;
  --mono-line-height: 1.65em;
  --mono-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* nothing pokes sideways on small screens */
  color: #fff;
  background: #000;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 62em) {
  html,
  body {
    font-size: 20px;
  }
}

/* custom cursor */
@media (hover: hover) and (pointer: fine) {
  body,
  a,
  button,
  textarea {
    cursor: none !important;
  }

  /* one cursor, three shapes: orb over nothing, a grey rounded rect
     wrapping tiles/buttons, a text caret over copy. JS lerps the
     geometry every frame, so no transitions here. */
  #cursor {
    pointer-events: none;
    z-index: 99999;
    width: 36px;
    height: 36px;
    background: #c8c8d733;
    border-radius: 100%;
    position: fixed;
    top: 0;
    left: -1000px;
    transform: translate(-50%, -50%);
    transition: background 0.2s ease;
  }

  /* text caret turns blue over copy, like a live insertion point */
  #cursor.is-caret {
    background: var(--mono-blue);
  }
}

@media not ((hover: hover) and (pointer: fine)) {
  #cursor {
    display: none;
  }

  /* no hover on touch: project names sit as captions on the tiles */
  .workgrid__item__title {
    opacity: 1;
    background: linear-gradient(transparent 30%, rgba(0, 0, 0, 0.88));
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    font-size: 0.72rem;
    padding: 0.9em;
  }
}

/* ============ intro animation ============ */
.intro {
  max-width: none;
  height: 100vh;
  height: 100svh; /* stable under mobile URL bars */
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.intro::before {
  display: none;
}

.intro__anim {
  width: min(720px, 86vw);
  will-change: opacity, transform;
  transition: opacity 0.9s var(--mono-ease), transform 0.9s var(--mono-ease);
}

.intro__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.intro__guides {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  opacity: 0;
  animation: guidesIn 0.9s ease 0.15s forwards;
}

@keyframes guidesIn {
  to {
    opacity: 1;
  }
}

.intro__letter {
  mix-blend-mode: screen; /* overlapping strokes glow lighter, flat color elsewhere */
  fill: none;
  stroke: #ffffff; /* written in white; JS swaps to data-color on completion */
  stroke-width: 46;
  stroke-linecap: round;
  stroke-linejoin: round;
  visibility: hidden; /* shown by JS once dash lengths are measured */
  transition: stroke 0.55s ease;
}

.intro__ball {
  opacity: 0; /* revealed when the JS choreography starts */
}

.intro--done .intro__anim {
  opacity: 0;
  transform: translateY(-60px) scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .intro__guides {
    animation: none;
    opacity: 1;
  }
  .intro__letter {
    visibility: visible;
  }
  .intro__ball {
    opacity: 1;
    transform: translate(560px, 236px);
  }
}

/* sections: centered content column with faint vertical grid lines */
section {
  max-width: 64rem;
  line-height: var(--mono-line-height);
  margin: 0 auto;
  padding: 3.3em 1rem 3em;
  font-size: 1.1rem;
  position: relative;
}

section::before {
  content: "";
  position: absolute;
  inset: 0 1rem;
  /* each column boundary is a pair of hairlines around a narrow gutter —
     dull enough to sit behind the text, never on it */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.035) 0,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 9px,
    rgba(255, 255, 255, 0.035) 9px,
    rgba(255, 255, 255, 0.035) 10px,
    transparent 10px,
    transparent 16.6666%
  );
  pointer-events: none;
  z-index: 0;
}

/* content always paints above the guide lines */
section > * {
  position: relative;
  z-index: 1;
}

/* headings: mono throughout, modest scale */
h1 {
  margin-top: 0;
  margin-bottom: 0.4em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 2em;
  font-weight: 500;
  line-height: 1.15em;
}

h2 {
  margin: 0 0 0.15em;
  font-size: 1em;
  font-weight: 500;
  line-height: var(--mono-line-height);
}

p {
  font-weight: 400;
  line-height: var(--mono-line-height);
}

a {
  color: #fff;
  text-decoration: none;
}

p a {
  text-decoration: underline;
}

a:hover {
  animation: 10s infinite hueRotate;
  color: var(--mono-blue);
}

@keyframes hueRotate {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

/* about */
.about {
  min-height: 86vh;
  min-height: 86svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about__title {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 3em;
  font-weight: 400;
  margin-bottom: 0.5em;
  transition: all 0.65s var(--mono-ease);
}

.about__introText {
  max-width: 30em;
  transition: all 0.65s var(--mono-ease);
}

.is-writing .about__title,
.is-writing .about__introText {
  opacity: 0;
  transform: translateY(-44px);
  pointer-events: none;
}

/* message textarea */
#message {
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  height: 55%;
  width: 100%;
  color: #fff;
  background: none;
  border: none;
  outline: none;
  resize: none;
  padding: 1.65em 1rem 1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1em;
  font-weight: normal;
  line-height: 1.55em;
  position: absolute;
  top: 6%;
  left: 0;
  transform: translateY(44px);
  transition: all 0.8s var(--mono-ease);
}

.is-writing #message {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* buttons */
.about__buttons {
  margin-top: 2.6em;
  display: flex;
  gap: 0.75em;
}

.btn {
  border: 1.5px solid #fff;
  border-radius: 3em;
  padding: 1.1em 1.4em;
  line-height: 1em;
  display: inline-block;
  color: #fff;
  background: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  transition: transform 0.2s var(--mono-ease), background 0.2s ease, color 0.2s ease;
  will-change: transform;
}

.btn:hover {
  background: #fff;
  color: #000;
  animation: none;
  filter: none;
}

.btn--margin {
  margin-top: 1.6em;
}

.btn__icon {
  display: inline-block;
  margin-right: 0.4em;
  transition: transform 0.3s var(--mono-ease);
}

.is-writing .btn--hi .btn__icon {
  transform: rotate(180deg);
}

.btn__text__sub {
  display: none;
}

.is-writing .btn__text__main {
  display: none;
}

.is-writing .btn__text__sub {
  display: inline;
}

.btn--snd {
  pointer-events: none;
  opacity: 0;
  transform: translateY(48px);
  background: var(--mono-blue);
  border-color: var(--mono-blue);
  transition: all 0.65s var(--mono-ease);
}

.is-writing .btn--snd {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

/* sent: the pill itself says thank you */
.btn__text__done {
  display: none;
}

.is-sent .btn--hi .btn__text__main,
.is-sent .btn--hi .btn__text__sub,
.is-sent .btn--hi .btn__icon {
  display: none;
}

.is-sent .btn--hi .btn__text__done {
  display: inline;
}

.is-sent .btn--hi {
  background: none;
  border-color: #fff;
  pointer-events: none; /* said and done */
}

.is-sent .btn--snd,
.is-sent #message {
  opacity: 0;
  pointer-events: none;
}

/* confetti burst */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99997;
  overflow: hidden;
}

.confetti span {
  position: absolute;
  width: 7px;
  height: 11px;
  border-radius: 2px;
}

/* ============ work grid (full bleed) ============ */
.workgrid {
  grid-gap: 0.3rem;
  display: grid;
  width: 100%;
  grid-template-areas:
    "area-1 area-1"
    "area-2 area-5"
    "area-3 area-5"
    "area-4 area-6"
    "area-7 area-6"
    "area-8 area-8"
    "area-9 area-10"
    "area-11 area-12";
  grid-auto-rows: minmax(180px, auto);
}

@media (min-width: 48em) {
  .workgrid {
    grid-template-areas:
      "area-1 area-1 area-2 area-3"
      "area-5 area-8 area-8 area-4"
      "area-6 area-8 area-8 area-7"
      "area-9 area-10 area-11 area-12";
    grid-auto-rows: minmax(210px, auto);
  }
}

@media (min-width: 75em) {
  .workgrid {
    grid-template-areas:
      "area-1 area-1 area-2 area-3 area-4 area-5"
      "area-6 area-7 area-8 area-8 area-9 area-5"
      "area-6 area-10 area-8 area-8 area-11 area-12";
    grid-auto-rows: minmax(240px, auto);
  }
}

.workgrid__item {
  position: relative;
  overflow: hidden;
  background: var(--mono-tile-alt);
  min-height: 180px;
}

.workgrid__item--1 { grid-area: area-1; }
.workgrid__item--2 { grid-area: area-2; }
.workgrid__item--3 { grid-area: area-3; }
.workgrid__item--4 { grid-area: area-4; }
.workgrid__item--5 { grid-area: area-5; }
.workgrid__item--6 { grid-area: area-6; }
.workgrid__item--7 { grid-area: area-7; }
.workgrid__item--8 { grid-area: area-8; }
.workgrid__item--9 { grid-area: area-9; }
.workgrid__item--10 { grid-area: area-10; }
.workgrid__item--11 { grid-area: area-11; }
.workgrid__item--12 { grid-area: area-12; }

.workgrid__item > a,
.workgrid__item > div {
  position: absolute;
  inset: 0;
  display: block;
}

.workgrid__item a:hover {
  animation: none;
  filter: none;
}

.workgrid__item__container {
  height: 100%;
  width: 100%;
  position: relative;
}

.workgrid__item__title {
  line-height: var(--mono-line-height);
  pointer-events: none;
  text-align: center;
  color: #fff;
  z-index: 10;
  opacity: 0;
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
  padding: 1em;
  font-size: 0.85rem;
  transition: opacity 0.3s ease;
}

.workgrid__item:hover .workgrid__item__title {
  opacity: 1;
}

.workgrid__item__content {
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  transition: filter 0.5s var(--mono-ease), transform 0.5s var(--mono-ease);
}

.workgrid__item a:hover .workgrid__item__content {
  filter: blur(24px);
  transform: scale(1.5);
}

.workgrid__item__content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.workgrid__item__content--center {
  justify-content: center;
}

/* typographic tiles */
.tile-wordmark,
.tile-stat {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  padding: 0 0.4em;
}

.tile-wordmark--paper {
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  background-image: linear-gradient(90deg, #ff7ab8, #ffe07a, #7ad7ff, #b48aff, #ff7ab8);
  background-size: 250% 100%;
  animation: wordShimmer 7s ease-in-out infinite alternate;
}

@keyframes wordShimmer {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.tile-stat--k {
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  background-image: linear-gradient(45deg, #7d3ff0, #f03f9d, #b0c4de);
}

.tile-stat--pub {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  background-image: linear-gradient(90deg, #ffffff, #8ea1b8);
}

.tile-stat--link {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  background-image: linear-gradient(90deg, #ff005c, #e5e5e5);
}

/* type-spec measurement tile */
.tile-spec {
  display: flex;
  align-items: center;
  gap: 0.9em;
}

.tile-spec__num {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  color: #b9bec7;
  line-height: 1;
}

.tile-spec__num small {
  font-size: 0.55em;
  color: #797979;
}

.tile-spec__guide {
  width: 1px;
  height: 2.4em;
  background: #2f8fff;
  position: relative;
}

.tile-spec__guide::before,
.tile-spec__guide::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 9px;
  height: 1px;
  background: #2f8fff;
}

.tile-spec__guide::before {
  top: 0;
}

.tile-spec__guide::after {
  bottom: 0;
}

/* obsidian-style node graph tile */
.tile-nodegraph {
  height: 88%;
  max-height: 360px;
}

.tile-nodegraph__labels text {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  fill: #9aa0a8;
}

.tile-nodegraph__labels text:last-child {
  fill: #cfd3da;
}

/* blueprint flowchart tile */
.tile-flow {
  height: 88%;
  max-height: 360px;
}

.tile-flow__boxes rect {
  fill: #16161c;
  stroke: #7e838c;
  stroke-width: 1;
  rx: 3;
}

.tile-flow__arrows path {
  fill: none;
  stroke: #7e838c;
  stroke-width: 1;
}

.tile-flow__labels text {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  fill: #cfd3da;
}

/* assistant strip tile */
.tile-assist {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-assist p {
  margin: 0;
  font-size: 0.8rem;
  color: #cfd3da;
}

.tile-assist__bar {
  position: absolute;
  bottom: 1.4em;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
}

.tile-assist__bar span {
  flex: 1;
}

.tile-assist__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-100%);
  animation: barSweep 2.8s ease-in-out infinite;
}

@keyframes barSweep {
  to { transform: translateX(100%); }
}

.tile-assist__bar span:nth-child(1) { background: #1c86ff; }
.tile-assist__bar span:nth-child(2) { background: #ff4757; }
.tile-assist__bar span:nth-child(3) { background: #ffe07a; }
.tile-assist__bar span:nth-child(4) { background: #2ee6a8; }

.tile-shapes {
  position: relative;
  width: 90px;
  height: 110px;
}

.tile-shapes__circle {
  position: absolute;
  left: 0;
  top: 30px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f0326e;
}

.tile-shapes__rect {
  position: absolute;
  left: 24px;
  top: 0;
  width: 26px;
  height: 110px;
  border: 3px solid #f5f06e;
}

.tile-more {
  font-size: 2.4rem;
  color: #fff;
  animation: nudge 1.8s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .tile-wordmark--paper,
  .tile-assist__bar::after,
  .tile-more {
    animation: none;
  }
}

/* ============ write ============ */
.section__lead {
  max-width: 30em;
  margin-bottom: 3em;
}

.words__samples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* thirds = every 2nd background column */
  gap: 0;
}

.words__samples__item {
  padding: 0 0.45em; /* the box fills its columns, lines just visible */
}

.words__samples__item a {
  display: block;
}

.tile {
  background: var(--mono-tile);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease-in-out;
}

.tile--4to3 {
  aspect-ratio: 4 / 3;
}

.tile svg {
  width: 34%;
  max-width: 72px;
}

.tile {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.2s ease-in-out,
              box-shadow 0.3s ease;
}

.words__samples__item a:hover .tile,
.engagement-list__item a:hover .tile {
  background-color: #17171e;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 14px 34px -18px rgba(0, 143, 255, 0.45);
}

.words__samples__item a:active .tile,
.engagement-list__item a:active .tile {
  transform: translateY(-2px) scale(0.99); /* press-in on click */
  transition-duration: 0.1s;
}

.words__samples__item p {
  font-size: 0.85rem;
  margin-top: 1em;
  color: #fff;
}

.words__drawer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.6s var(--mono-ease);
}

.words__drawer.is-open {
  max-height: 30em;
}

.words__extended {
  list-style: none;
  margin: 2em 0 0;
  padding: 0;
}

.words__extended li {
  padding: 0.55em 0;
  font-size: 0.9rem;
}

.words__extended a {
  text-decoration: underline;
  text-decoration-color: #3a3a48;
}

.fab {
  background: var(--mono-tile);
  border: none;
  color: #fff;
  width: 72px;
  height: 72px;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  margin: 2.5em auto 0;
  font-size: 1.8rem;
  font-weight: 300;
  transition: background 0.3s ease;
}

.fab:hover {
  background: #1c1c24;
}

.fab__icon {
  display: inline-block;
  transition: transform 0.5s var(--mono-ease);
  line-height: 1;
}

.fab.is-toggled .fab__icon {
  transform: rotate(45deg);
}

/* ============ play ============ */
.play {
  max-width: 64rem;
}

.play::before {
  display: none;
}

.play__container {
  display: flex;
  align-items: center;
  gap: 2em;
  flex-wrap: wrap;
}

.play__content {
  flex: 1 1 24em;
  max-width: 30em;
}

.play__visual {
  flex: 1 1 20em;
  order: 2;
  display: flex;
  justify-content: center;
}

.play__orb {
  width: min(420px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(70% 70% at 30% 35%, #baffc9 0%, transparent 55%),
    radial-gradient(80% 80% at 70% 60%, #2ee6a8 0%, transparent 60%),
    radial-gradient(100% 100% at 50% 90%, #0a4d3c 0%, transparent 75%),
    #020a07;
  filter: blur(2px) saturate(1.2);
  box-shadow: 0 0 120px 10px rgba(46, 230, 168, 0.15);
}

/* ============ speak-style work list ============ */
.speaking {
  max-width: 64rem; /* the list needs the wide column to breathe */
}

.engagement-list {
  list-style: none;
  margin: 3em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4em 0; /* items span 3 background columns each */
}

.engagement-list__item a {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.engagement-list__item .tile {
  /* one column slot, filled nearly edge to edge — the hairline pair
     is the separation, like the reference */
  flex: 0 0 calc(33.3333% - 0.9em);
  margin: 0 0.45em;
  max-width: none;
}

.engagement-list__text {
  padding-left: 0.9em;
  padding-right: 1.4em;
  flex: 1;
}

.engagement-list__text h2 {
  font-size: 1.05rem;
  font-weight: 500;
  margin-top: 0.1em;
}

.engagement-list__text p {
  margin: 0;
  color: var(--mono-gray);
  font-size: 1rem;
}

/* ============ footer ============ */
.footer {
  padding-top: 1.5em;
  padding-bottom: 2.5em;
}

.footer::before {
  display: none;
}

.footer__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
}

.footer__links {
  display: flex;
  flex-wrap: wrap; /* the row folds gracefully on small screens */
  gap: 0.7em;
  align-items: center;
}

.footer__links span {
  color: var(--mono-gray);
}

.footer__home {
  font-size: 1.2em;
}

.footer__content p {
  margin: 0;
  font-size: 0.95rem;
}

/* reveal on scroll */
.reveal-init {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.8s var(--mono-ease), transform 0.8s var(--mono-ease);
}

.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* small screens */
@media (max-width: 47.99em) {
  .about {
    min-height: 76vh;
  }
  .about__title {
    font-size: 2.4em;
  }
  .words__samples {
    grid-template-columns: 1fr;
  }
  .engagement-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1;
    transform: none;
    transition: none;
  }
  a:hover {
    animation: none;
  }
}

/* ============ lab / experiments page ============ */
.xp-nav {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.4em 1rem 0;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.xp-nav__name {
  color: #fff;
}

.xp-nav a {
  color: var(--mono-gray);
}

.xp-nav a:hover {
  color: var(--mono-blue);
}

.xp {
  padding-bottom: 4.5em;
}

.xp__kicker {
  margin: 0 0 0.3em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--mono-gray);
}

.xp h1 {
  margin-bottom: 0.35em;
}

.xp .section__lead {
  margin-bottom: 0;
}

.xp-diagram {
  margin: 2.4em 0 0;
  max-width: 640px;
}

.xp-diagram--wide {
  max-width: 100%;
}

.diag {
  width: 100%;
  height: auto;
  display: block;
}

.diag-box rect {
  fill: #16161c;
  stroke: #7e838c;
  stroke-width: 1;
  rx: 3;
}

.diag-arrow path {
  fill: none;
  stroke: #7e838c;
  stroke-width: 1;
}

.diag-label text {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  fill: #cfd3da;
}

.diag-label .diag-dim {
  fill: var(--mono-gray);
  font-size: 10px;
}

.xp-reqs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em 3em;
  margin-top: 2.2em;
  max-width: 52em;
}

.xp-reqs h4 {
  margin: 0 0 0.5em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--mono-gray);
  letter-spacing: 0.04em;
}

.xp-reqs ul {
  margin: 0;
  padding-left: 1.1em;
}

.xp-reqs li {
  margin: 0.35em 0;
  color: #9aa0a8;
  font-size: 0.85rem;
  font-weight: 300;
}

.xp-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: 2em;
}

.xp-specs span {
  border: 1px solid #26262e;
  border-radius: 2em;
  padding: 0.35em 0.85em;
  font-size: 0.75rem;
  color: #9aa0a8;
}

@media (max-width: 47.99em) {
  .xp-reqs {
    grid-template-columns: 1fr;
  }

  /* diagrams keep readable text and pan sideways instead */
  .xp-diagram {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .xp-diagram .diag {
    min-width: 600px;
  }
}

/* ============ interactive cards (lab) ============ */
.card-hint {
  margin: 1em 0 0;
  color: var(--mono-gray);
  font-size: 0.8rem;
}

/* tilt card: the case graph follows the cursor */
.tiltcard {
  margin-top: 2.4em;
  max-width: 640px;
  background: var(--mono-tile);
  border-radius: 0.5rem;
  padding: 1.5em;
  perspective: 900px;
}

.tiltcard__svg {
  width: 100%;
  height: auto;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  will-change: transform;
}

.tilt-far,
.tilt-near {
  transition: transform 0.25s ease-out;
  will-change: transform;
}

.tilt-pulse {
  animation: nodePulse 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes nodePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.75; }
}

/* display mockup: thin bezel, stand, live screen */
.device {
  margin: 3em auto 0; /* the display takes the stage, centered */
  max-width: 960px;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.device__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #050507;
  border: 12px solid #060608; /* thin black glass border */
  border-radius: 16px;
  box-shadow:
    0 0 0 2.5px #55555c,           /* machined silver rim */
    0 0 0 3.5px #1c1c20,
    0 44px 110px -42px rgba(0, 143, 255, 0.22);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device__stand {
  width: 19%;
  height: 150px;
  margin: 0 auto;
  background: linear-gradient(180deg, #e6e6ea 0%, #d3d3d8 55%, #ababb2 100%);
}

.device__foot {
  width: 19%;
  height: 12px;
  margin: 0 auto;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #f4f4f6, #97979e);
}

/* the conversation on the screen */
.chatdemo {
  width: 82%;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.chatdemo__bubble {
  border-radius: 12px;
  padding: 0.7em 1em;
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 85%;
}

.chatdemo__bubble--q {
  align-self: flex-end;
  background: var(--mono-blue);
  color: #fff;
  min-height: 2.4em;
  min-width: 6em;
}

.chatdemo__bubble--a {
  align-self: flex-start;
  background: #17171d;
  color: #cfd3da;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.chatdemo__bubble--a.is-in {
  opacity: 1;
  transform: translateY(0);
}

.chatdemo__bubble--a p {
  margin: 0;
  font-size: inherit;
}

.chatdemo__caret {
  display: inline-block;
  width: 1px;
  height: 1em;
  background: #fff;
  margin-left: 2px;
  vertical-align: -0.15em;
  animation: 1s step-end infinite caretBlink;
}

@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.chatdemo__cites {
  display: flex;
  gap: 0.5em;
  margin-top: 0.6em;
}

.chatdemo__cites span {
  border: 1px solid #2a2a33;
  border-radius: 2em;
  padding: 0.15em 0.6em;
  font-size: 0.65rem;
  color: #8f949c;
}

/* hover-to-zoom card */
.zoomcard {
  margin-top: 2.4em;
  max-width: 640px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--mono-tile);
}

.zoomcard img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.zoomcard.is-zoomed img {
  transform: scale(1.9);
}

/* replay */
.replay {
  margin-top: 1em;
  width: 52px;
  height: 52px;
  border-radius: 100%;
  border: none;
  background: var(--mono-tile);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.3s var(--mono-ease);
}

.replay:hover {
  background: #1c1c24;
}

.replay:active {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .tilt-pulse,
  .chatdemo__caret {
    animation: none;
  }
  .chatdemo__bubble--a {
    opacity: 1;
    transform: none;
  }
}

/* ============ workgrid art tiles ============ */
.tile-art {
  height: 72%;
  max-height: 240px;
  width: auto;
}

.tile-art--big {
  height: 88%;
  max-height: 300px;
}

.tile-art--chart {
  height: 82%;
  width: 90%;
  max-height: none;
}

/* the tick line draws itself, holds, and redraws */
.tile-chart__line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: chartDraw 7s ease-in-out infinite;
}

@keyframes chartDraw {
  0% { stroke-dashoffset: 100; }
  35% { stroke-dashoffset: 0; }
  90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}

/* lab anchors land with breathing room */
.xp[id] {
  scroll-margin-top: 1.5em;
}

@media (prefers-reduced-motion: reduce) {
  .tile-chart__line {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* restore the intro word without a visible transition */
.intro__anim--notrans {
  transition: none !important;
}

/* ============ resume peek overlay ============ */
.peek {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.peek[hidden] {
  display: none;
}

.peek__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}

.peek__panel {
  position: relative;
  margin: 0;
  max-width: min(880px, 94vw);
  background: #fff;
  border-radius: 10px;
  padding: 0.6rem;
  animation: peekIn 0.35s var(--mono-ease);
}

.peek__panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.peek__panel figcaption {
  text-align: center;
  padding: 0.55em 0 0.3em;
  font-size: 0.85rem;
}

.peek__panel figcaption a {
  color: #000;
  text-decoration: underline;
}

.peek__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 100%;
  background: var(--mono-tile);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.peek__close:hover {
  background: #1c1c24;
}

@keyframes peekIn {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============ lab spec cards ============ */
.spec-row {
  display: flex;
  gap: 0.9em;
  align-items: stretch;
  margin-top: 2.4em;
  max-width: 640px;
  min-height: 250px;
}

.spec-card {
  flex: 1 1 auto;
  color: #1a1a1a;
  border-radius: 2px;
  padding: 1.1em 1.2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.spec-card h4 {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.spec-card p {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  line-height: 1.8;
  color: #3a3a3a;
}

.spec-strip {
  width: 54px;
  border-radius: 2px;
}

@media (max-width: 47.99em) {
  .spec-strip {
    width: 28px;
  }
}

/* the composed screen: artwork behind, conversation in front */
.screencontent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform-origin: 50% 50%;
}

.screencontent .chatdemo {
  position: relative;
  z-index: 1;
}

.screencontent .chatdemo__bubble {
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.65);
}

.screencontent .chatdemo__bubble--a {
  background: rgba(16, 16, 21, 0.88);
  backdrop-filter: blur(6px);
}

/* the flashy screen: layered iridescent gradients, drifting hue */
.screenart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 90% at 15% 20%, rgba(255, 92, 138, 0.95), transparent 55%),
    radial-gradient(100% 80% at 85% 12%, rgba(255, 236, 150, 0.95), transparent 50%),
    radial-gradient(130% 100% at 78% 85%, rgba(124, 92, 255, 0.95), transparent 58%),
    radial-gradient(110% 90% at 22% 82%, rgba(46, 230, 168, 0.9), transparent 55%),
    conic-gradient(from 210deg at 55% 45%, #00e0ff, #b48aff, #ff4fa0, #ffe07a, #7ad7a0, #00e0ff);
  filter: saturate(1.4) blur(16px);
  transform: scale(1.15);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: artDrift 14s ease-in-out infinite alternate;
}

@keyframes artDrift {
  to {
    filter: saturate(1.4) blur(16px) hue-rotate(70deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screenart {
    animation: none;
  }
}

/* ============ blue load streak ============ */
.loadbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--mono-blue);
  box-shadow: 0 0 14px 1px rgba(0, 143, 255, 0.85);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
}

.loadbar.is-loading {
  animation: loadSweep 1.1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes loadSweep {
  0% {
    width: 0;
    opacity: 1;
  }
  60% {
    width: 72%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}


/* ── live demos ────────────────────────────────────────────────────────────
   Each card shows a screenshot immediately and only then offers the link, so
   the first impression never waits on a server waking up. */
.demos {
  max-width: 64rem;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.demo-card {
  background: var(--mono-tile);
  border-radius: 0.6rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--mono-ease), box-shadow 0.2s ease;
}

.demo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px -18px rgba(0, 143, 255, 0.45);
}

/* The screenshots are captured at the card's own aspect ratio, so they are
   shown whole. Cropping here would cut the headline figure out of the very
   image that is meant to show it. */
.demo-card__shot {
  display: block;
  width: 100%;
  height: auto;
  background: var(--mono-tile-alt);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.demo-card__body {
  padding: 1.2rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.demo-card__body h2 {
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.3;
}

.demo-card__body p {
  margin: 0;
  color: var(--mono-gray);
  font-size: 0.9rem;
  line-height: 1.55;
}

.demo-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.demo-card__tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--mono-gray);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2em;
  padding: 0.25em 0.7em;
}

.demo-card__actions {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.btn--sm {
  padding: 0.7em 1.1em;
  font-size: 0.85rem;
}

.demo-card__src {
  color: var(--mono-gray);
  font-size: 0.85rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.demo-card__src:hover {
  color: #fff;
  border-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .demo-card,
  .demo-card:hover {
    transform: none;
    transition: none;
  }
}