:root {
  color-scheme: light;
  --bg: #f4efc9;
  --bg-elevated: rgba(252, 249, 233, 0.82);
  --surface: rgba(255, 252, 238, 0.92);
  --surface-strong: rgba(255, 253, 244, 0.98);
  --surface-soft: rgba(250, 246, 225, 0.78);
  --text: #14333d;
  --text-soft: #537077;
  --heading: #003b4b;
  --accent: #0c5867;
  --accent-strong: #003b4b;
  --accent-soft: rgba(12, 88, 103, 0.1);
  --border: rgba(0, 59, 75, 0.12);
  --paper-beige: linear-gradient(180deg, rgba(255, 248, 220, 0.98), rgba(239, 230, 185, 0.94));
  --paper-border: color-mix(in srgb, var(--border) 65%, rgba(0, 59, 75, 0.08));
  --shadow: 0 1px 2px rgba(0, 34, 45, 0.06);
  --shadow-hover: 0 8px 24px rgba(0, 34, 45, 0.1);
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --container: min(1040px, calc(100vw - 2.5rem));
  --header-height: 78px;
  --transition: 180ms ease;
  --button-primary-text: #f8f7f3;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07151b;
  --bg-elevated: rgba(8, 20, 26, 0.9);
  --surface: rgba(10, 22, 28, 0.94);
  --surface-strong: rgba(13, 28, 36, 0.98);
  --surface-soft: rgba(11, 23, 29, 0.86);
  --text: #e8f1ef;
  --text-soft: #97adb1;
  --heading: #f9f5de;
  --accent: #6faab0;
  --accent-strong: #b8d8da;
  --accent-soft: rgba(111, 170, 176, 0.14);
  --border: rgba(184, 216, 218, 0.16);
  --shadow: 0 1px 2px rgba(1, 8, 11, 0.32);
  --shadow-hover: 0 10px 28px rgba(1, 8, 11, 0.4);
  --button-primary-text: #07151b;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(12, 88, 103, 0.18) 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--text);
  font-family: "Instrument Sans", sans-serif;
  line-height: 1.6;
  transition: background-color var(--transition), color var(--transition);
}

[data-theme="dark"] body {
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(111, 170, 176, 0.15) 1px, transparent 1px);
  background-size: 18px 18px;
}

body.mobile-nav-open {
  overflow: hidden;
}

body.brand-intro-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--heading);
  line-height: 1.08;
}

h1 {
  font-size: clamp(2.7rem, 2rem + 2.6vw, 4.4rem);
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.6rem);
  letter-spacing: -0.035em;
}

h3 {
  font-size: clamp(1.08rem, 1rem + 0.3vw, 1.28rem);
  letter-spacing: -0.02em;
}

.site-shell {
  position: relative;
  overflow: clip;
}

.container {
  width: var(--container);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg-elevated) 97%, var(--bg));
  border-bottom: 1px solid var(--border);
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--heading);
}

.brand-mark {
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  padding: 0.32rem;
  border-radius: 0.9rem;
  background: var(--paper-beige);
  border: 1px solid var(--paper-border);
  box-shadow: var(--shadow);
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name-group {
  display: grid;
  gap: 0.12rem;
}

.brand-name {
  font-size: 1rem;
  font-weight: 800;
}

.brand-tag,
.section-label,
.footer-heading,
.timeline-dates,
.metric-label,
.contact-method__label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.brand-tag {
  font-size: 0.66rem;
}

.site-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mobile-nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible {
  outline: none;
  background: var(--surface-strong);
}

.mobile-nav-toggle__icon {
  position: relative;
  width: 1rem;
  height: 0.8rem;
  display: inline-block;
  border-top: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
}

.mobile-nav-toggle__icon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.9px);
  border-top: 1.8px solid currentColor;
}

.mobile-nav-toggle__label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
}

.nav-link {
  padding: 0.62rem 0.84rem;
  border-radius: 0.8rem;
  color: var(--text-soft);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  background: var(--surface-strong);
  color: var(--heading);
  outline: none;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.48rem 0.72rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
  box-shadow: none;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.theme-toggle__track {
  width: 3.2rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  padding: 0.18rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
}

.theme-toggle__thumb {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface-strong), color-mix(in srgb, var(--accent) 24%, white));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition);
}

[data-theme="dark"] .theme-toggle__thumb {
  transform: translateX(1.35rem);
}

.theme-toggle__label {
  font-size: 0.88rem;
  font-weight: 800;
}

.section {
  padding: 4.1rem 0;
}

.section-tight {
  padding-top: 1.5rem;
}

.page-hero {
  padding-bottom: 2rem;
}

.page-hero__content,
.section-heading {
  display: grid;
  gap: 0.6rem;
  max-width: 42rem;
}

.section-description,
.hero-summary,
.hero-tagline,
.detail-copy,
.project-summary,
.snapshot-copy,
.metric-copy,
.feature-card p,
#footer-note,
#footer-meta {
  color: var(--text-soft);
}

.home-document__column {
  max-width: 47rem;
  display: grid;
  gap: 2.35rem;
}

[hidden] {
  display: none !important;
}

.home-section {
  display: grid;
  gap: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.home-section--hero,
.home-section--callout,
.home-section--cta {
  padding-top: 0;
  border-top: 0;
}

.home-accordion {
  display: grid;
  gap: 0.9rem;
}

.home-accordion__button {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.home-accordion__heading {
  display: grid;
  gap: 0.45rem;
}

.home-accordion__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-soft);
  font-size: 0.9rem;
  white-space: nowrap;
}

.home-accordion__caret {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition);
}

.home-accordion__panel {
  display: grid;
  gap: 0.9rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 280ms ease, opacity 220ms ease, padding-top 220ms ease;
}

.home-accordion.is-open .home-accordion__panel {
  max-height: 120rem;
  opacity: 1;
  padding-top: 0.2rem;
}

.home-accordion.is-open .home-accordion__caret {
  transform: rotate(90deg);
}

.home-accordion__button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 6px;
  border-radius: 0.5rem;
}

.editorial-heading,
.editorial-entry__body,
.editorial-record,
.editorial-note,
.editorial-callout,
.editorial-projects,
.editorial-list {
  display: grid;
  gap: 0.85rem;
}

.editorial-paragraph {
  max-width: 40rem;
  color: var(--text-soft);
  font-size: 1.03rem;
}

.editorial-kicker-row {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.editorial-kicker-sep {
  width: 1.65rem;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.editorial-kicker-name {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--heading);
}

.home-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
}

.home-choice-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.9rem;
  min-height: 12rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--heading);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.home-choice-card:hover,
.home-choice-card:focus-visible,
.home-choice-card.is-active {
  background: var(--surface-strong);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  outline: none;
}

.home-choice-card__icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem;
  border-radius: 1rem;
  background: var(--paper-beige);
  border: 1px solid var(--paper-border);
  color: var(--accent-strong);
}

.home-choice-card__icon svg {
  width: 100%;
  height: 100%;
}

.home-choice-card__label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.home-selected-summary {
  display: grid;
  gap: 1.15rem;
}

.home-selected-summary__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.home-selected-summary__tagline {
  max-width: 36rem;
}

.home-selected-summary__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.home-mode-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.55rem 0.82rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.home-mode-pill:hover,
.home-mode-pill:focus-visible,
.home-mode-pill.is-active {
  color: var(--heading);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  outline: none;
}

.text-link--button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.editorial-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  color: var(--text-soft);
  font-size: 0.94rem;
}

.editorial-meta span {
  position: relative;
}

.editorial-meta span:not(:last-child)::after {
  content: "•";
  margin-left: 1rem;
  color: color-mix(in srgb, var(--text-soft) 60%, transparent);
}

.editorial-metrics,
.editorial-projects,
.editorial-records {
  display: grid;
  gap: 0.9rem;
}

.editorial-list {
  gap: 0;
  border-top: 1px solid var(--border);
}

.editorial-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.editorial-note,
.editorial-record,
.project-card--editorial {
  padding: 1rem 0 0;
  border-top: 1px solid var(--border);
}

.home-document:not(.home-document--chooser) .home-document__column {
  gap: 3rem;
}

.home-document:not(.home-document--chooser) .home-section {
  gap: 0;
  padding-top: 0;
  border-top: 0;
}

.home-stack-section,
.home-connect,
.home-project-list,
.home-record-list {
  display: grid;
}

.home-stack-section {
  gap: 1.2rem;
}

.home-stack-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.home-stack-heading h2,
.home-connect h2 {
  font-size: clamp(1.4rem, 1.18rem + 0.75vw, 2rem);
}

.home-stack-meta {
  color: var(--text-soft);
  font-size: 0.92rem;
  white-space: nowrap;
}

.home-project-list,
.home-record-list {
  gap: 1rem;
}

.home-project-item,
.editorial-note--inline,
.editorial-record {
  display: grid;
  gap: 0.72rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.home-project-item h3,
.editorial-note--inline h3,
.editorial-record h3 {
  font-size: 1.16rem;
}

.home-connect {
  gap: 1rem;
}

.panel-brand--compact {
  padding-bottom: 0;
  border-bottom: 0;
}

.panel-logo-shell--compact {
  width: 4.2rem;
  height: 4.2rem;
  padding: 0.42rem;
}

.editorial-records {
  gap: 0;
}

.editorial-callout {
  padding: 1.2rem 1.25rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.editorial-callout--outcomes {
  gap: 1.1rem;
}

.hero-layout,
.two-up-grid,
.split-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#services-fit {
  grid-template-columns: minmax(0, 1fr);
}

#services-fit .detail-card {
  width: 100%;
  margin: 0 auto;
}

.split-layout {
  align-items: start;
}

.hero-copy,
.hero-panel,
.feature-card,
.project-card,
.snapshot-card,
.detail-card,
.metric-card,
.cta-band,
.contact-method,
.timeline-item,
.achievement-card,
.flow-step,
.lens-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
}

.hero-copy,
.hero-panel,
.detail-card,
.snapshot-card,
.cta-band {
  padding: clamp(1.45rem, 1.1rem + 1vw, 2rem);
}

.hero-copy {
  display: grid;
  gap: 1.1rem;
  min-height: 22rem;
  align-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hero--document {
  padding-bottom: 3.25rem;
}

h1,
.hero-copy h1 {
  font-size: clamp(2.2rem, 1.85rem + 1.45vw, 3.3rem);
}

.hero-wordmark-shell {
  width: fit-content;
  max-width: min(100%, 22rem);
  padding: 0.72rem 0.9rem;
  border-radius: 1rem;
  background: var(--paper-beige);
  border: 1px solid var(--paper-border);
  box-shadow: none;
}

.hero-wordmark {
  width: auto;
  max-width: 100%;
  height: 4rem;
  object-fit: contain;
}

.hero-panel {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  background: var(--surface-soft);
}

.hero-role {
  font-size: clamp(1.12rem, 1rem + 0.55vw, 1.42rem);
  font-weight: 800;
}

.hero-tagline {
  max-width: 38rem;
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.26rem);
}

.hero-summary {
  max-width: 36rem;
  font-size: 1rem;
}

.hero-signals,
.hero-meta,
.chip-list,
.project-metrics,
.cta-actions,
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.signal-pill,
.tag,
.metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.74rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--heading);
  font-size: 0.88rem;
  font-weight: 600;
}

.signal-pill {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.8rem 1.02rem;
  border-radius: 0.85rem;
  border: 1px solid transparent;
  font-weight: 700;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
}

.button:hover,
.button:focus-visible,
.text-link:hover,
.text-link:focus-visible,
.contact-method:hover,
.contact-method:focus-visible,
.footer-resume-link:hover,
.footer-resume-link:focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.button--primary {
  background: var(--heading);
  color: var(--button-primary-text);
  box-shadow: none;
}

.button--secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--heading);
}

.panel-brand,
.card-topline,
.timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.panel-brand {
  justify-content: flex-start;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.panel-logo-shell {
  width: 5.2rem;
  height: 5.2rem;
  padding: 0.56rem;
  border-radius: 1rem;
  background: var(--paper-beige);
  border: 1px solid var(--paper-border);
  box-shadow: none;
  flex-shrink: 0;
}

.panel-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.metric-card,
.feature-card,
.project-card,
.snapshot-card,
.timeline-item,
.contact-method,
.achievement-card,
.flow-step,
.lens-card {
  padding: 1.3rem;
}

.metric-card,
.feature-card,
.project-card {
  border-top: 1px solid var(--border);
}

.metric-value {
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--heading);
}

.metric-copy {
  max-width: 18rem;
}

.card-grid {
  display: grid;
  gap: 1.2rem;
}

.card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lens-card {
  display: grid;
  gap: 1rem;
}

.lens-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.lens-button {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 0.58rem 0.9rem;
  cursor: pointer;
  font-weight: 700;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.lens-button:hover,
.lens-button:focus-visible,
.lens-button.is-active {
  color: var(--heading);
  background: var(--surface-strong);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  outline: none;
}

.lens-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.lens-panel__content {
  display: grid;
  gap: 0.7rem;
}

.metric-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
  display: grid;
  gap: 0.9rem;
}

.feature-card--link,
.feature-card--process,
.feature-card--skill,
.feature-card--service {
  align-content: start;
}

.feature-icon,
.inline-icon,
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.feature-icon {
  width: 2.45rem;
  height: 2.45rem;
  padding: 0.56rem;
  border-radius: 0.75rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.feature-icon--mode {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.9rem;
}

.inline-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.icon-badge {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.feature-icon svg,
.inline-icon svg,
.icon-badge svg {
  width: 100%;
  height: 100%;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--heading);
  font-weight: 800;
}

.text-link::after {
  content: ">";
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--accent);
}

.project-card {
  display: grid;
  gap: 0.9rem;
}

.project-card--interactive {
  align-content: start;
}

.project-card--compact .project-summary {
  max-width: 24rem;
}

.project-card--editorial {
  gap: 0.72rem;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border-right: 0;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0;
}

.project-metrics--compact .metric-pill {
  min-width: 0;
}

.metric-pill {
  flex-direction: column;
  align-items: flex-start;
  min-width: 9rem;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.filter-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  border-radius: 0.72rem;
  padding: 0.58rem 0.82rem;
  cursor: pointer;
  font-weight: 600;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.filter-chip:hover,
.filter-chip:focus-visible,
.filter-chip.is-active {
  color: var(--heading);
  background: var(--surface-strong);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  outline: none;
}

.project-toggle {
  width: fit-content;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--heading);
  border-radius: 0.72rem;
  padding: 0.56rem 0.84rem;
  cursor: pointer;
  font-weight: 600;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.project-toggle:hover,
.project-toggle:focus-visible {
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  outline: none;
}

.project-detail {
  display: grid;
  gap: 0.8rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 280ms ease, opacity 220ms ease, padding-top 220ms ease;
}

.project-card.is-expanded .project-detail {
  max-height: 18rem;
  opacity: 1;
  padding-top: 0.4rem;
}

.project-card.is-hidden {
  display: none;
}

.snapshot-meta,
.timeline-company {
  color: var(--text-soft);
  font-weight: 700;
}

.timeline-location {
  color: var(--text-soft);
  font-size: 0.95rem;
}

.timeline-wrap,
.achievement-stack {
  display: grid;
  gap: 1rem;
}

.timeline-item {
  padding-left: 1.2rem;
  border-left: 1px solid color-mix(in srgb, var(--text-soft) 28%, transparent);
  min-height: 6.8rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 1.45rem;
  width: 0.76rem;
  height: 0.76rem;
  border-radius: 50%;
  background: var(--accent);
}

.timeline-head {
  align-items: start;
}

.achievement-year {
  white-space: nowrap;
}

.achievement-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.achievement-card {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.facts-list {
  display: grid;
  gap: 0.9rem;
}

.fact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--heading);
  font-weight: 700;
}

.cta-band {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  background: var(--surface-soft);
}

#home-cta {
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.flow-grid {
  position: relative;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.flow-step__badge {
  position: relative;
  z-index: 1;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  margin-top: 0;
  border-radius: 999px;
  background: var(--paper-beige);
  border: 1px solid var(--paper-border);
}

.flow-step__count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.flow-step__content {
  display: grid;
  gap: 0.95rem;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  transition: border-color var(--transition), background-color var(--transition);
}

.flow-step__header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.flow-step__heading {
  display: grid;
  gap: 0.18rem;
}

.flow-step__label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.feature-icon--flow {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.9rem;
  background: var(--surface-soft);
}

.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.3rem;
  left: calc(2.6rem + 0.4rem);
  width: calc(100% - 2rem);
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--text-soft) 22%, transparent));
}

.flow-step:hover,
.flow-step:focus-within {
  background: transparent;
  border-color: transparent;
}

.flow-step:hover .flow-step__content,
.flow-step:focus-within .flow-step__content {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: var(--surface-strong);
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-method__meta {
  display: grid;
  gap: 0.16rem;
}

.footer-wordmark-shell {
  width: fit-content;
  max-width: 100%;
  padding: 0.88rem 1rem;
  border-radius: 1rem;
  background: var(--paper-beige);
  border: 1px solid var(--paper-border);
  box-shadow: none;
}

.outcome-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.outcome-row {
  display: grid;
  grid-template-columns: minmax(4.75rem, auto) 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--border);
}

.outcome-value {
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--heading);
}

.outcome-label {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.98rem;
}

.footer-wordmark {
  width: auto;
  max-width: min(100%, 14rem);
  height: 4.4rem;
  object-fit: contain;
}

.site-footer {
  padding: 2.5rem 0 1.75rem;
  border-top: 1px solid var(--border);
}

.home-document--chooser .hero--document {
  min-height: calc(100vh - var(--header-height));
  display: grid;
  align-items: center;
}

.home-document--chooser .home-document__column {
  min-height: calc(100vh - var(--header-height) - 7rem);
  align-content: center;
}

.home-document--chooser #home-hero {
  justify-items: center;
  text-align: center;
  gap: 1.6rem;
}

.home-document--chooser .home-choice-grid {
  margin-top: 0.35rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.95fr;
  gap: 1.2rem;
  padding-bottom: 1.5rem;
}

.footer-branding,
.footer-links-group {
  display: grid;
  gap: 0.8rem;
}

.footer-resume-link,
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.72rem 0.88rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
  font-weight: 600;
}

.footer-bottom {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--text-soft);
  font-size: 0.92rem;
}

[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 520ms ease, transform 520ms ease;
  transition-delay: var(--delay, 0s);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.feature-card:hover,
.project-card:hover,
.snapshot-card:hover,
.metric-card:hover,
.contact-method:hover,
.timeline-item:hover,
.achievement-card:hover,
.flow-step:hover,
.lens-card:hover {
  transform: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: var(--surface-strong);
}

@media (max-width: 1080px) {
  .hero-layout,
  .two-up-grid,
  .split-layout,
  .footer-grid,
  .card-grid--three,
  .flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  :root {
    --header-height: 78px;
  }

  .header-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0.85rem 0;
  }

  .brand {
    width: auto;
    justify-content: flex-start;
  }

  .mobile-nav-toggle {
    display: inline-flex;
  }

  .site-nav,
  .header-actions {
    display: none;
  }

  .site-header.is-open .header-inner {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .site-header.is-open .site-nav {
    order: 3;
    width: 100%;
    display: grid;
    gap: 0.35rem;
    padding-top: 0.4rem;
  }

  .site-header.is-open .header-actions {
    order: 4;
    width: 100%;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0.25rem;
  }

  .site-header.is-open .nav-link {
    padding: 0.85rem 0.95rem;
    border-radius: 0.85rem;
    background: var(--surface);
  }

  .site-header.is-open .nav-link--anchor {
    justify-content: flex-start;
    padding: 0.9rem 0.95rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }

  .site-header.is-open .theme-toggle {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
  }

  body[data-page="home"] .site-header.is-open .header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="home"] .site-header.is-open .theme-toggle {
    grid-column: 1 / -1;
    border-radius: 0.85rem;
    padding: 0.48rem 0.72rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }

  body[data-page="home"] .site-header.is-open .theme-toggle__label {
    display: inline;
  }

  .hero-layout,
  .two-up-grid,
  .split-layout,
  .card-grid--two,
  .card-grid--three,
  .card-grid--four,
  .metric-grid,
  .footer-grid,
  .flow-grid,
  .achievement-stack {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: auto;
  }

  .home-document__column {
    gap: 2rem;
  }

  .home-stack-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .editorial-entry {
    grid-template-columns: 1fr;
  }

  .outcome-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .home-accordion__button {
    flex-direction: column;
  }

  .home-accordion__meta {
    white-space: normal;
  }

  .cta-band {
    flex-direction: column;
    align-items: flex-start;
  }

  .editor-home__experience-grid {
    gap: 1.25rem;
  }

  .editor-home__tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    align-content: stretch;
    border-left: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.45rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .editor-home__tabs::-webkit-scrollbar {
    display: none;
  }

  .editor-home__tab {
    min-height: auto;
    margin-left: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 0.7rem 0.9rem;
    white-space: nowrap;
  }

  .editor-home__tab:hover,
  .editor-home__tab:focus-visible,
  .editor-home__tab.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }
}

@media (max-width: 640px) {
  .section {
    padding: 4.25rem 0;
  }

  .hero-meta,
  .hero-actions,
  .hero-signals,
  .cta-actions,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .achievement-card,
  .timeline-head {
    flex-direction: column;
  }

  .home-choice-grid {
    grid-template-columns: 1fr;
  }

  .home-choice-card {
    min-height: auto;
  }

  .home-selected-summary__topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-selected-summary__modes {
    gap: 0.5rem;
  }

  .home-mode-pill {
    width: 100%;
    justify-content: center;
  }

  .flow-step {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .flow-step__badge {
    margin-top: 0;
  }

  .flow-step::after {
    display: none;
  }

  .lens-panel {
    grid-template-columns: 1fr;
  }

  .home-document__column {
    max-width: 100%;
  }

  .nav-link,
  .button,
  .theme-toggle,
  .footer-resume-link,
  .footer-links a {
    min-height: 2.9rem;
  }

  .brand-tag {
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  [data-animate] {
    opacity: 1;
    transform: none;
  }
}

body[data-page="home"] {
  background-color: var(--bg);
}

body.mode-launch-open {
  overflow: hidden;
}

body[data-page="home"] .site-shell {
  overflow: visible;
}

.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--accent) 16%, transparent), transparent 40%),
    color-mix(in srgb, var(--bg) 98%, black 2%);
  transition: opacity 260ms ease, visibility 260ms ease;
}

.brand-intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.brand-intro__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.brand-intro__halo {
  position: absolute;
  inset: auto;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
  filter: blur(4px);
  opacity: 0;
}

.brand-intro__mark {
  position: relative;
  z-index: 1;
  width: 5.8rem;
  height: 5.8rem;
  display: grid;
  place-items: center;
  padding: 0.9rem;
  border-radius: 1.5rem;
  background: var(--paper-beige);
  border: 1px solid var(--paper-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(14px) scale(0.92);
}

.brand-intro__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-intro.is-active .brand-intro__halo {
  animation: brandIntroHalo 1.25s ease forwards;
}

.brand-intro.is-active .brand-intro__mark {
  animation: brandIntroMark 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.brand-intro.is-exiting .brand-intro__inner {
  animation: brandIntroExit 0.4s ease forwards;
}

@keyframes brandIntroMark {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.92) rotate(-8deg);
  }

  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.03) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes brandIntroHalo {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  35% {
    opacity: 0.85;
  }

  100% {
    opacity: 0.1;
    transform: scale(1.28);
  }
}

@keyframes brandIntroExit {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(10px);
  }
}

.mode-launch {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--accent) 12%, transparent), transparent 36%),
    color-mix(in srgb, var(--bg) 98%, black 2%);
  transition: opacity 220ms ease, visibility 220ms ease;
}

.mode-launch.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mode-launch__inner {
  width: min(920px, 100%);
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin: auto 0;
}

.mode-launch__brand {
  margin-bottom: 0.5rem;
}

.mode-launch__eyebrow,
.mode-launch__default {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.mode-launch__title {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing: -0.05em;
}

.mode-launch__grid {
  width: 100%;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.25rem;
}

.mode-launch__card {
  min-height: 13rem;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.9rem;
  padding: 1.35rem 1rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--heading);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background-color var(--transition);
}

.mode-launch__card:hover,
.mode-launch__card:focus-visible,
.mode-launch__card.is-active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  outline: none;
  transform: translateY(-2px);
}

.mode-launch__icon {
  width: 3.15rem;
  height: 3.15rem;
  display: inline-flex;
  padding: 0.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: var(--paper-beige);
  border: 1px solid var(--paper-border);
  color: var(--accent-strong);
}

.mode-launch__icon svg {
  width: 100%;
  height: 100%;
}

.mode-launch__label {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body[data-page="home"] .site-header {
  position: fixed;
  width: 100%;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 0;
  backdrop-filter: blur(16px);
}

.header-inner--home {
  min-height: 5.8rem;
}

body[data-page="home"] .header-inner--home .brand-name-group {
  display: none;
}

body[data-page="home"] .header-inner--home .brand-mark {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.38rem;
  border-radius: 1.05rem;
}

.site-nav--home {
  gap: 0.55rem;
}

.nav-link--anchor {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.52rem 0.35rem;
  border-radius: 0;
  background: transparent;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  font-weight: 500;
}

.nav-link--anchor span {
  color: var(--accent);
}

body[data-page="home"] .nav-link--anchor:hover,
body[data-page="home"] .nav-link--anchor:focus-visible {
  background: transparent;
  color: var(--heading);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.mode-button {
  min-height: 2.9rem;
  padding: 0.72rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--accent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  cursor: pointer;
  transition: transform var(--transition), background-color var(--transition), border-color var(--transition);
}

.mode-button:hover,
.mode-button:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  outline: none;
  transform: translateY(-1px);
}

body[data-page="home"] .theme-toggle {
  padding: 0.25rem;
  border-radius: 999px;
  background: transparent;
}

body[data-page="home"] .theme-toggle__label {
  display: none;
}

.resume-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.78rem 1.18rem;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  border-radius: 0.5rem;
  color: var(--accent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  transition: transform var(--transition), background-color var(--transition), color var(--transition);
}

.resume-button:hover,
.resume-button:focus-visible,
.ghost-button:hover,
.ghost-button:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--heading);
  outline: none;
  transform: translateY(-1px);
}

.ghost-button--filled {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.editor-home {
  position: relative;
  padding-top: 6rem;
}

.editor-home__container {
  width: min(1080px, calc(100vw - 12rem));
  margin: 0 auto;
}

.editor-home__container--narrow {
  width: min(760px, calc(100vw - 12rem));
}

.editor-home__hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.editor-home__hero::before {
  content: "";
  position: absolute;
  inset: -10% -10%;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.28;
  animation: heroGridDrift 50s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.editor-home__hero-copy {
  position: relative;
  z-index: 1;
  max-width: 58rem;
  display: grid;
  gap: 1rem;
}

@keyframes heroGridDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-30px, -30px, 0);
  }
}

.editor-home__intro,
.editor-home__eyebrow,
.editor-home__contact-eyebrow,
.editor-home__number {
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.editor-home__hero-copy h1 {
  font-size: clamp(3.2rem, 7vw, 5.7rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.editor-home__statement {
  max-width: 58rem;
  font-size: clamp(2.4rem, 5.6vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: color-mix(in srgb, var(--heading) 58%, var(--text-soft));
}

.editor-home__summary {
  max-width: 34rem;
  color: var(--text-soft);
  font-size: 1.04rem;
}

.editor-home__meta,
.editor-home__hero-actions,
.editor-home__feature-tools,
.editor-home__mini-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
}

.editor-home__meta {
  max-width: 40rem;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.editor-home__meta span {
  position: relative;
}

.editor-home__meta span:not(:last-child)::after {
  content: "•";
  margin-left: 1rem;
  color: color-mix(in srgb, var(--text-soft) 65%, transparent);
}

.editor-home__section {
  padding: 0 0 7.5rem;
}

.editor-home__heading {
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr);
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 3rem;
}

.editor-home__heading h2 {
  font-size: clamp(1.75rem, 1.45rem + 1vw, 2.2rem);
}

.editor-home__line {
  height: 1px;
  background: var(--border);
}

.editor-home__about-grid,
.editor-home__experience-grid {
  display: grid;
  gap: 3.5rem;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, 0.72fr);
}

.editor-home__about-main {
  display: grid;
  gap: 2rem;
  align-content: start;
}

.editor-home__copy {
  display: grid;
  gap: 1.2rem;
  max-width: 42rem;
  color: var(--text-soft);
  font-size: 1.03rem;
}

.home-aside-card {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.home-aside-card__portrait {
  width: min(100%, 17rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  background: color-mix(in srgb, var(--surface) 84%, #f4efc9);
}

.home-aside-card__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.home-aside-card__rows {
  display: grid;
  gap: 1rem;
}

.home-aside-card__rows div {
  display: grid;
  gap: 0.2rem;
}

.home-aside-card__rows strong {
  color: var(--heading);
  font-size: 1rem;
}

.editor-home__tech {
  display: grid;
  gap: 0.95rem;
  max-width: 42rem;
}

.editor-home__tech-list {
  display: grid;
  gap: 0.8rem 1.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-home__tech-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
}

.editor-home__tech-bullet {
  width: 0.8rem;
  height: 0.8rem;
  display: inline-flex;
  color: var(--accent);
}

.editor-home__tech-bullet svg {
  width: 100%;
  height: 100%;
}

.editor-home__experience-grid {
  grid-template-columns: 180px minmax(0, 1fr);
}

.editor-home__education-list {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editor-home__tabs {
  display: grid;
  align-content: start;
  border-left: 2px solid var(--border);
}

.editor-home__tab {
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-left: 2px solid transparent;
  margin-left: -2px;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.92rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.editor-home__tab:hover,
.editor-home__tab:focus-visible,
.editor-home__tab.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: none;
}

.editor-home__experience-card {
  display: grid;
  gap: 0.9rem;
  max-width: 38rem;
}

.editor-home__experience-card h3 {
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.9rem);
}

.editor-home__experience-card h3 span {
  color: var(--accent);
}

.editor-home__experience-meta {
  font-family: "IBM Plex Mono", monospace;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.editor-home__experience-notes {
  display: grid;
  gap: 0.8rem;
}

.editor-home__experience-notes p {
  margin: 0;
  padding-left: 1rem;
  border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text-soft);
}

.editor-home__featured-work {
  display: grid;
  gap: 5.5rem;
}

.editor-home__feature {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  align-items: center;
  gap: 1rem;
}

.editor-home__feature.is-reversed .editor-home__feature-visual {
  order: 2;
}

.editor-home__feature.is-reversed .editor-home__feature-copy {
  order: 1;
  text-align: left;
  margin-right: -3rem;
  margin-left: 0;
}

.editor-home__feature-visual {
  position: relative;
  z-index: 1;
}

.editor-home__feature-screen {
  min-height: 22rem;
  padding: 1.8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 0.35rem;
  background:
    linear-gradient(180deg, rgba(18, 75, 89, 0.55), rgba(11, 33, 42, 0.72)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%);
  overflow: hidden;
}

.editor-home__feature-kicker {
  margin-bottom: 1.4rem;
  color: var(--accent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
}

.editor-home__feature-screen h3 {
  max-width: 16rem;
  font-size: clamp(2rem, 1.7rem + 1.2vw, 3rem);
  line-height: 0.95;
}

.editor-home__feature-bars {
  display: grid;
  gap: 0.8rem;
  margin-top: 2.5rem;
}

.editor-home__feature-bar {
  width: var(--bar-width);
  display: grid;
  gap: 0.18rem;
  padding: 0.78rem 0.85rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.editor-home__feature-bar span {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
}

.editor-home__feature-bar small {
  color: var(--text-soft);
  font-size: 0.78rem;
}

.editor-home__feature-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.95rem;
  text-align: right;
  margin-left: -3rem;
}

.editor-home__feature-copy h3 {
  font-size: clamp(1.65rem, 1.45rem + 0.75vw, 2.15rem);
}

.editor-home__feature-card {
  padding: 1.25rem 1.35rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--surface) 84%, var(--bg));
  color: var(--text-soft);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.editor-home__feature-tools {
  justify-content: flex-end;
  color: var(--text-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.86rem;
}

.editor-home__feature-actions {
  display: flex;
  justify-content: flex-end;
}

.editor-home__feature.is-reversed .editor-home__feature-tools {
  justify-content: flex-start;
}

.editor-home__feature.is-reversed .editor-home__feature-actions {
  justify-content: flex-start;
}

.editor-home__more-work {
  margin-top: 2.5rem;
}

.editor-home__more-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editor-home__mini-project {
  display: grid;
  gap: 0.75rem;
  padding: 1.15rem;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}

.editor-home__mini-project p {
  color: var(--text-soft);
}

.editor-home__mini-metrics {
  gap: 0.5rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.77rem;
  color: var(--accent);
}

.editor-home__actions {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.editor-home__achievements {
  display: grid;
  gap: 0;
  max-width: 48rem;
  border-top: 1px solid var(--border);
}

.editor-home__experience-card--compact {
  display: grid;
  gap: 0.9rem;
  max-width: 38rem;
}

.editor-home__education-card h3,
.editor-home__experience-card--compact h3 {
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.9rem);
}

.editor-home__education-card {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding-top: 0;
  min-height: 100%;
}

.editor-home__education-meta,
.editor-home__achievement-year {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.88rem;
  color: var(--accent);
}

.editor-home__year-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
}

.editor-home__year-pill {
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  padding: 0.35rem 0.75rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.editor-home__year-pill:hover,
.editor-home__year-pill:focus-visible,
.editor-home__year-pill.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: none;
}

.interactive-desk {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 2rem;
  align-items: center;
}

.interactive-desk__surface {
  position: relative;
  min-height: 28rem;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 0.8rem;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 28%),
    radial-gradient(circle at 78% 72%, rgba(244, 239, 201, 0.24), transparent 30%),
    color-mix(in srgb, var(--surface) 70%, transparent);
  overflow: hidden;
}

.interactive-desk__surface::before,
.interactive-desk__surface::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.interactive-desk__surface::before {
  left: 1.25rem;
  right: 1.25rem;
  bottom: 5.5rem;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 18%, var(--border));
}

.interactive-desk__surface::after {
  width: 15rem;
  height: 15rem;
  right: -6rem;
  top: -6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px;
}

.interactive-desk__topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.interactive-desk__shuffle {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
  color: var(--accent);
  padding: 0.42rem 0.78rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background-color var(--transition);
}

.interactive-desk__shuffle:hover,
.interactive-desk__shuffle:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  outline: none;
}

.interactive-desk__objects {
  position: relative;
  z-index: 2;
  min-height: 23rem;
}

.interactive-desk__object {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  width: 6.5rem;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  animation: deskFloatIn 420ms ease both;
  animation-delay: var(--desk-delay);
  transition: color var(--transition), transform var(--transition);
}

.interactive-desk__object:hover,
.interactive-desk__object:focus-visible,
.interactive-desk__object.is-active {
  color: var(--heading);
  transform: translateY(-5px);
  outline: none;
}

.interactive-desk__object-icon {
  width: 4.4rem;
  height: 4.4rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 1.15rem;
  background: var(--paper-beige);
  color: var(--accent);
  box-shadow: 0 14px 30px rgba(0, 34, 45, 0.08);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.interactive-desk__object-icon svg {
  width: 1.65rem;
  height: 1.65rem;
}

.interactive-desk__object:hover .interactive-desk__object-icon,
.interactive-desk__object:focus-visible .interactive-desk__object-icon,
.interactive-desk__object.is-active .interactive-desk__object-icon {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  box-shadow: 0 18px 38px rgba(0, 34, 45, 0.14);
}

.interactive-desk__object.is-active .interactive-desk__object-icon {
  transform: rotate(-2deg);
}

.interactive-desk__object-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}

.interactive-desk__object--laptop {
  left: 9%;
  top: 32%;
}

.interactive-desk__object--notebook {
  left: 36%;
  top: 20%;
}

.interactive-desk__object--folder {
  right: 10%;
  top: 34%;
}

.interactive-desk__object--resume {
  left: 20%;
  bottom: 6%;
}

.interactive-desk__object--map {
  left: 49%;
  bottom: 13%;
}

.interactive-desk__object--mug {
  right: 8%;
  bottom: 4%;
}

.interactive-desk__detail {
  min-height: 16rem;
}

.interactive-desk__panel {
  display: grid;
  gap: 1rem;
  padding: 1.45rem;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.interactive-desk__panel h3 {
  font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.35rem);
}

.interactive-desk__panel p:not(.editor-home__eyebrow) {
  max-width: 31rem;
  color: var(--text-soft);
}

@keyframes deskFloatIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.editor-home__section--contact {
  padding-top: 4rem;
  padding-bottom: 5rem;
}

.editor-home__contact {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
}

.editor-home__contact h2 {
  font-size: clamp(2.8rem, 2.3rem + 1.7vw, 4.4rem);
}

.editor-home__contact-summary {
  max-width: 34rem;
  color: var(--text-soft);
  font-size: 1.02rem;
}

.edge-rail {
  position: fixed;
  bottom: 0;
  z-index: 8;
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.edge-rail--left {
  left: 2.8rem;
}

.edge-rail--right {
  right: 2.8rem;
}

.edge-rail__links {
  display: grid;
  gap: 1.15rem;
}

.edge-rail__links a,
.edge-rail__email {
  color: var(--text-soft);
  transition: color var(--transition), transform var(--transition);
}

.edge-rail__links a:hover,
.edge-rail__links a:focus-visible,
.edge-rail__email:hover,
.edge-rail__email:focus-visible {
  color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}

.edge-rail__links a {
  width: 1.15rem;
  height: 1.15rem;
}

.edge-rail__links svg {
  width: 100%;
  height: 100%;
}

.edge-rail__email {
  writing-mode: vertical-rl;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.edge-rail__line {
  width: 1px;
  height: 6rem;
  background: var(--border);
}

.site-footer--minimal {
  padding: 0 0 2rem;
  border-top: 0;
}

.site-footer--minimal__inner {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  color: var(--text-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
}

.site-footer--minimal__subline {
  font-size: 0.7rem;
  opacity: 0.88;
}

@media (max-width: 1180px) {
  .editor-home__container,
  .editor-home__container--narrow {
    width: min(960px, calc(100vw - 7rem));
  }

  .edge-rail--left {
    left: 1.25rem;
  }

  .edge-rail--right {
    right: 1.25rem;
  }
}

@media (max-width: 980px) {
  body[data-page="home"] .header-inner--home {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }

  body[data-page="home"] .mobile-nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  body[data-page="home"] .site-nav--home,
  body[data-page="home"] .header-actions {
    display: none;
  }

  body[data-page="home"] .site-header.is-open .header-inner--home {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  body[data-page="home"] .site-header.is-open .site-nav--home {
    order: 3;
    width: 100%;
    display: grid;
    gap: 0.35rem;
    padding-top: 0.4rem;
  }

  body[data-page="home"] .site-header.is-open .header-actions {
    order: 4;
    width: 100%;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0.25rem;
  }

  body[data-page="home"] .site-header.is-open .nav-link--anchor {
    justify-content: flex-start;
    padding: 0.9rem 0.95rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }

  body[data-page="home"] .site-header.is-open .theme-toggle {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
    border-radius: 0.85rem;
    padding: 0.48rem 0.72rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }

  body[data-page="home"] .site-header.is-open .theme-toggle__label {
    display: inline;
  }

  .editor-home {
    padding-top: 6.25rem;
  }

  .editor-home__container,
  .editor-home__container--narrow {
    width: min(100%, calc(100vw - 3rem));
  }

  .mode-launch__grid,
  .editor-home__about-grid,
  .editor-home__about-main,
  .editor-home__experience-grid,
  .editor-home__education-list,
  .editor-home__feature,
  .editor-home__more-grid,
  .interactive-desk {
    grid-template-columns: 1fr;
  }

  .interactive-desk {
    align-items: stretch;
  }

  .editor-home__feature-copy,
  .editor-home__feature.is-reversed .editor-home__feature-copy {
    text-align: left;
    margin: 0.9rem 0 0;
  }

  .editor-home__feature-tools,
  .editor-home__feature.is-reversed .editor-home__feature-tools {
    justify-content: flex-start;
  }

  .editor-home__feature-actions,
  .editor-home__feature.is-reversed .editor-home__feature-actions {
    justify-content: flex-start;
  }

  .editor-home__feature.is-reversed .editor-home__feature-visual {
    order: 1;
  }

  .editor-home__feature.is-reversed .editor-home__feature-copy {
    order: 2;
  }

  .interactive-desk__surface {
    min-height: auto;
  }

  .interactive-desk__surface::before {
    display: none;
  }

  .interactive-desk__objects {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.5rem;
  }

  .interactive-desk__object {
    position: static;
    width: 100%;
    min-height: 7.5rem;
    padding: 0.85rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--surface-strong) 62%, transparent);
  }

  .edge-rail {
    display: none;
  }
}

@media (max-width: 640px) {
  .brand-intro {
    padding: 1.5rem;
  }

  .brand-intro__mark {
    width: 5rem;
    height: 5rem;
    border-radius: 1.3rem;
  }

  .mode-launch {
    display: block;
    padding: max(1rem, env(safe-area-inset-top)) 1rem 1.5rem;
  }

  .mode-launch__title {
    text-align: center;
  }

  .mode-launch__inner {
    min-height: 100%;
    align-content: start;
    justify-items: stretch;
    padding-top: 0.5rem;
  }

  .mode-launch__brand,
  .mode-launch__eyebrow,
  .mode-launch__title {
    justify-self: center;
  }

  .mode-launch__grid {
    grid-template-columns: 1fr;
  }

  .mode-launch__card {
    min-height: auto;
    justify-items: flex-start;
    text-align: left;
    gap: 0.75rem;
    padding: 1rem;
  }

  body[data-page="home"] .header-inner--home {
    gap: 0.75rem;
  }

  .mobile-nav-toggle {
    min-width: 2.9rem;
    justify-content: center;
    padding-inline: 0.8rem;
  }

  .mobile-nav-toggle__label {
    display: none;
  }

  .ghost-button {
    width: 100%;
  }

  .editor-home {
    padding-top: 7rem;
  }

  .editor-home__hero {
    min-height: auto;
    padding: 3rem 0 5rem;
  }

  .editor-home__hero-copy h1 {
    font-size: clamp(2.6rem, 16vw, 4rem);
  }

  .editor-home__statement {
    font-size: clamp(2.1rem, 13vw, 3.3rem);
  }

  .editor-home__summary,
  .editor-home__meta {
    max-width: 100%;
  }

  .editor-home__heading {
    grid-template-columns: auto 1fr;
  }

  .editor-home__heading h2 {
    grid-column: 2;
  }

  .editor-home__line {
    display: none;
  }

  .editor-home__tech-list {
    grid-template-columns: 1fr;
  }

  .editor-home__meta {
    display: grid;
    gap: 0.25rem;
  }

  .editor-home__meta span:not(:last-child)::after {
    display: none;
  }

  .editor-home__hero-actions,
  .editor-home__actions,
  .editor-home__feature-actions,
  .editor-home__year-pills {
    width: 100%;
  }

  .editor-home__feature-screen {
    min-height: 18rem;
    padding: 1.35rem;
  }

  .editor-home__feature-copy,
  .editor-home__feature.is-reversed .editor-home__feature-copy {
    margin-top: 1rem;
    gap: 0.8rem;
  }

  .editor-home__feature-tools,
  .editor-home__feature-actions {
    gap: 0.55rem;
  }

  .editor-home__feature-card {
    padding: 1rem 1.05rem;
    background: color-mix(in srgb, var(--surface-strong) 94%, var(--bg));
  }

  .interactive-desk__surface,
  .interactive-desk__panel {
    padding: 1rem;
  }

  .interactive-desk__topline {
    align-items: flex-start;
  }

  .interactive-desk__objects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .interactive-desk__object {
    min-height: 6.8rem;
  }

  .interactive-desk__object-icon {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 1rem;
  }

  .interactive-desk__object-icon svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .interactive-desk__panel {
    border-left: 0;
    border-top: 2px solid var(--accent);
  }

  .editor-home__year-pill {
    flex: 1 1 auto;
    text-align: center;
  }

  .editor-home__contact h2 {
    font-size: clamp(2.35rem, 14vw, 3.4rem);
  }
}

/* ─── Terminal popup ─────────────────────────────────────── */
.terminal-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #0d1117;
  color: #79c0ff;
  border: 1px solid #30363d;
  border-radius: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.terminal-fab:hover {
  border-color: #58a6ff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.terminal-popup {
  position: fixed;
  bottom: 72px;
  right: 24px;
  z-index: 199;
  width: min(480px, calc(100vw - 48px));
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.terminal {
  background: #0d1117;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #30363d;
}

.terminal__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
}

.terminal__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.terminal__dot--red    { background: #ff5f57; }
.terminal__dot--yellow { background: #febc2e; }
.terminal__dot--green  { background: #28c840; }

.terminal__title {
  margin-left: 8px;
  color: #484f58;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  flex: 1;
}

.terminal__close {
  margin-left: auto;
  background: none;
  border: none;
  color: #484f58;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1;
  padding: 0 2px;
  font-family: 'IBM Plex Mono', monospace;
}

.terminal__close:hover { color: #c9d1d9; }

.terminal__body {
  padding: 16px 20px;
  min-height: 160px;
  max-height: 300px;
  overflow-y: auto;
  cursor: text;
  scroll-behavior: smooth;
}

.terminal__body::-webkit-scrollbar { width: 4px; }
.terminal__body::-webkit-scrollbar-track { background: transparent; }
.terminal__body::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }

.terminal__output { margin-bottom: 6px; }

.terminal__line {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #c9d1d9;
  white-space: pre-wrap;
  word-break: break-all;
}

.terminal__line--muted { color: #484f58; }

.terminal__line--cmd {
  color: #79c0ff;
  margin-top: 10px;
}

.terminal__kbd {
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.78rem;
  color: #8b949e;
  font-family: 'IBM Plex Mono', monospace;
}

.terminal__input-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.terminal__prompt {
  color: #79c0ff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  flex-shrink: 0;
  user-select: none;
}

.terminal__input {
  background: transparent;
  border: none;
  outline: none;
  color: #c9d1d9;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  width: 100%;
  caret-color: #79c0ff;
  padding: 0;
}

.terminal__input::placeholder { color: #30363d; }