:root[data-theme="tech"] .th { position: relative; padding: 0; color: var(--t-ink); }
:root[data-theme="tech"] .th-stage {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 560px;
  background: var(--t-night);
}
:root[data-theme="tech"] .th-layer { position: absolute; will-change: transform; }

:root[data-theme="tech"] .th-sky {
  left: 0; right: 0; top: -75%; bottom: 0;
  background:
    radial-gradient(ellipse 34% 11% at 50% 88%, color-mix(in srgb, var(--t-ember) 38%, transparent), transparent 100%),
    radial-gradient(ellipse 62% 24% at 50% 90%, color-mix(in srgb, var(--t-ember) 20%, var(--t-plum)), transparent 100%),
    radial-gradient(ellipse 130% 70% at 50% 100%, transparent 38%, color-mix(in srgb, var(--t-night) 70%, transparent) 100%),
    linear-gradient(180deg, var(--t-sky) 0, var(--t-sky) 44%, color-mix(in srgb, var(--t-plum) 70%, var(--t-sky)) 62%, var(--t-plum) 80%, color-mix(in srgb, var(--t-ember) 10%, var(--t-plum)) 100%);
}
:root[data-theme="tech"] .th-stars { display: block; position: absolute; left: 0; top: 0; pointer-events: none; }
:root[data-theme="tech"] .th-stage { touch-action: pan-y pinch-zoom; }
:root[data-theme="tech"] .th-sun canvas,
:root[data-theme="tech"] .th-planet canvas { display: block; position: absolute; left: 0; top: 0; }

:root[data-theme="tech"] .th-lock {
  left: 0; right: 0; top: 34%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 16px; pointer-events: none;
}
:root[data-theme="tech"] .th-mark { display: block; width: 78vw; max-width: 440px; height: auto; overflow: visible; }
:root[data-theme="tech"] .th-rf, :root[data-theme="tech"] .th-l { fill: var(--t-ink); }
:root[data-theme="tech"] .th-rl {
  fill: none; stroke: var(--t-ink); stroke-width: 1.1; stroke-linejoin: miter;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
}
:root[data-theme="tech"] .th-motto {
  margin: clamp(14px, 2.4vh, 26px) 0 0;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(30px, 8.4vw, 36px); line-height: 1.15; letter-spacing: -0.005em;
  color: var(--t-ink);
}
:root[data-theme="tech"] .th-place {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  margin: clamp(12px, 2vh, 20px) 0 0;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.02em;
  color: var(--t-ink);
}
@media (min-width: 700px) {
  :root[data-theme="tech"] .th-lock { top: 31%; }
  :root[data-theme="tech"] .th-mark { width: clamp(300px, 34vw, 700px); max-width: none; }
  :root[data-theme="tech"] .th-motto { font-size: clamp(34px, 3.5vw, 60px); }
  :root[data-theme="tech"] .th-place { font-size: 14px; gap: 4px 36px; }
}

@keyframes th-fade  { from { opacity: 0; } }
@keyframes th-rimin { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes th-draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes th-gone  { to { opacity: 0; } }
@keyframes th-rise  { from { transform: translateY(130px); } }
@keyframes th-up    { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
:root[data-theme="tech"] .th-go .th-sky  { animation: th-fade 650ms ease-out both; }
:root[data-theme="tech"] .th-go .th-rim  { animation: th-rimin 800ms var(--t-ease) 150ms both; }
:root[data-theme="tech"] .th-go .th-rl   { opacity: 1; animation: th-draw 480ms cubic-bezier(0.65, 0, 0.35, 1) 150ms both, th-gone 120ms linear 600ms forwards; }
:root[data-theme="tech"] .th-go .th-rf   { animation: th-fade 140ms ease-out 600ms both; }
:root[data-theme="tech"] .th-go .th-l    { animation: th-rise 620ms cubic-bezier(0.3, 1.25, 0.5, 1) calc(280ms + var(--i) * 35ms) both; }
:root[data-theme="tech"] .th-go .th-motto { animation: th-up 480ms var(--t-ease) 380ms both; }
:root[data-theme="tech"] .th-go .th-place { animation: th-up 480ms var(--t-ease) 480ms both; }
:root[data-theme="tech"] .th-hold .th-sky,
:root[data-theme="tech"] .th-hold .th-rim,
:root[data-theme="tech"] .th-hold .th-rf,
:root[data-theme="tech"] .th-hold .th-rl,
:root[data-theme="tech"] .th-hold .th-motto,
:root[data-theme="tech"] .th-hold .th-place { opacity: 0; }
:root[data-theme="tech"] .th-hold .th-l { transform: translateY(130px); }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="tech"] .th-go .th-sky, :root[data-theme="tech"] .th-go .th-rim,
  :root[data-theme="tech"] .th-go .th-rl, :root[data-theme="tech"] .th-go .th-rf,
  :root[data-theme="tech"] .th-go .th-l, :root[data-theme="tech"] .th-go .th-motto,
  :root[data-theme="tech"] .th-go .th-place { animation: none; }
  :root[data-theme="tech"] .th-rl { display: none; }
  :root[data-theme="tech"] .th-layer { will-change: auto; }
}

:root[data-theme="tech"] .th-arrival { padding-block: clamp(72px, 11vw, 150px) clamp(40px, 6vw, 88px); }
:root[data-theme="tech"] .th-arrival .statement {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2rem, 4.7vw, 4rem); line-height: 1.08; letter-spacing: -0.012em;
  color: var(--t-ink); max-width: 19ch; margin: 0 0 24px; text-wrap: balance;
}
:root[data-theme="tech"] .th-arrival .lede {
  font-family: var(--font-mono); font-size: 14px; line-height: 1.7; letter-spacing: 0;
  color: var(--t-mute); max-width: 46ch; margin: 0 0 36px;
}

:root[data-theme="tech"] .homecoming { display: none !important; }

:root[data-theme="tech"] .ventures h2 {
  font-size: clamp(2.2rem, 4.8vw, 3.8rem); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--t-ink); margin-bottom: 14px; text-wrap: balance;
}
:root[data-theme="tech"] .th-prompt {
  margin: 0 0 clamp(24px, 3.4vw, 40px);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: var(--t-mute);
  white-space: nowrap; overflow: hidden; min-height: 1.5em;
}
:root[data-theme="tech"] .th-prompt.is-typing::after {
  content: ""; display: inline-block; width: 0.58em; height: 1.05em; margin-left: 1px;
  vertical-align: -0.2em; background: var(--t-ember);
}

:root[data-theme="tech"] .ventures { display: flex; flex-direction: column; --vt-p: 14px; }
:root[data-theme="tech"] .vt-head {
  order: 4; margin: 0; padding: 0 0 7px var(--vt-p);
  font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--t-mute);
}
:root[data-theme="tech"] .vt-caret {
  display: inline-block; width: 0; height: 0; margin-right: 10px; vertical-align: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--t-mute);
}
:root[data-theme="tech"] .v-index { order: 5; border-top: 0; }
:root[data-theme="tech"] .v-index li { border-bottom: 0; }

:root[data-theme="tech"] .vp-panel {
  order: 3; position: sticky; top: 84px; z-index: 2;
  width: 100%; margin: 0 0 14px;
  display: flex; flex-direction: column;
  background: var(--t-surface); border: 1px solid var(--t-line-hi); border-radius: var(--t-r);
  overflow: hidden;
}
:root[data-theme="tech"] .vp-bar,
:root[data-theme="tech"] .vp-status {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: 34px; padding: 0 12px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1; color: var(--t-mute);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
:root[data-theme="tech"] .vp-bar { border-bottom: 1px solid var(--t-line); }
:root[data-theme="tech"] .vp-status { border-top: 1px solid var(--t-line); }
:root[data-theme="tech"] .vp-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--t-ink); }
:root[data-theme="tech"] .vp-status b { font-weight: 400; color: var(--t-ink); }
:root[data-theme="tech"] .vp-view {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--t-night);
}
:root[data-theme="tech"] .vp-view::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(240, 232, 220, 0.04) 0 2px, transparent 2px 4px);
}
:root[data-theme="tech"] .vp-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; opacity: 0;
}
:root[data-theme="tech"] .vp-img.pixel { image-rendering: pixelated; }
:root[data-theme="tech"] .vp-dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
:root[data-theme="tech"] .vp-panel.vp-still .vp-dots,
:root[data-theme="tech"] .vp-panel.vp-still .vp-status { display: none; }
@media (max-width: 899px) {
  :root[data-theme="tech"] .vp-view { aspect-ratio: auto; height: clamp(84px, 24vw, 120px); }
  :root[data-theme="tech"] .vp-bar { height: 30px; }
  :root[data-theme="tech"] .vp-status { display: none; }
}

:root[data-theme="tech"] .v-row {
  --vt-pt: 14px; --vt-y: 24px;
  position: relative;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  grid-template-areas: "path path arrow" ". name arrow" ". what arrow" ". when arrow";
  align-items: center; gap: 3px 0;
  padding: var(--vt-pt) 14px 15px var(--vt-p);
  color: var(--t-ink);
  transition: background-color 160ms var(--t-ease), box-shadow 160ms var(--t-ease);
}
:root[data-theme="tech"] .v-row::before,
:root[data-theme="tech"] .v-row::after { content: ""; position: absolute; background: var(--t-faint); pointer-events: none; }
:root[data-theme="tech"] .v-row::before { left: calc(var(--vt-p) + 3px); width: 1px; top: 0; bottom: 0; }
:root[data-theme="tech"] .v-index li:last-child .v-row::before { bottom: auto; height: var(--vt-y); }
:root[data-theme="tech"] .v-row::after { left: calc(var(--vt-p) + 3px); top: var(--vt-y); width: 15px; height: 1px; }
:root[data-theme="tech"] .v-path {
  grid-area: path; position: relative; white-space: nowrap;
  font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--t-mute);
}
:root[data-theme="tech"] .vt-g { display: inline-block; width: 4ch; }
:root[data-theme="tech"] .v-name {
  position: relative; transform: none !important;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 19px; line-height: 24px; letter-spacing: -0.02em; white-space: nowrap;
  color: var(--t-ink);
  transition: color 160ms var(--t-ease);
}
:root[data-theme="tech"] .v-name::before {
  content: ""; position: absolute; left: -0.78em; top: 50%; margin-top: -0.37em;
  width: 0.46em; height: 0.74em; background: var(--t-ember); opacity: 0;
}
:root[data-theme="tech"] .v-what,
:root[data-theme="tech"] .v-when { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; text-align: left; color: var(--t-mute); }
:root[data-theme="tech"] .v-arrow {
  grid-area: arrow; align-self: center;
  width: 20px; height: 20px; margin-left: 18px; color: var(--t-mute);
  transition: color 160ms var(--t-ease), transform 260ms var(--t-ease);
}
:root[data-theme="tech"] .v-index:hover .v-row { opacity: 1; }
:root[data-theme="tech"] .v-row:focus-visible { outline-offset: -2px; }

:root[data-theme="tech"] .vp-live .v-row:not(.on) .v-name { color: var(--t-mute); }
:root[data-theme="tech"] .vp-live .v-row.on { background: var(--t-raise); box-shadow: inset 2px 0 0 var(--t-ember); }
:root[data-theme="tech"] .vp-live .v-row.on .v-name::before { opacity: 1; }
:root[data-theme="tech"] .vp-live .v-row.on .v-arrow { color: var(--t-ember); transform: translate3d(2px, -2px, 0); }
:root[data-theme="tech"] .vp-live .v-index:hover .v-row.on .v-name::before,
:root[data-theme="tech"] .vp-live .v-index:focus-within .v-row.on .v-name::before { animation: th-blink 1.1s steps(1, end) infinite; }
@keyframes th-blink { 55% { opacity: 0.25; } }

@media (min-width: 600px) {
  :root[data-theme="tech"] .ventures { --vt-p: 18px; }
  :root[data-theme="tech"] .v-row {
    --vt-pt: 17px; --vt-y: 31px;
    grid-template-columns: 140px auto minmax(0, 1fr) auto;
    grid-template-areas: "path name name arrow" ". what when arrow";
    padding: var(--vt-pt) 18px 19px var(--vt-p);
  }
  :root[data-theme="tech"] .v-name { font-size: 22px; line-height: 28px; }
  :root[data-theme="tech"] .v-path { width: 110px; }
  :root[data-theme="tech"] .v-when { margin-left: 18px; }
}
@media (min-width: 900px) {
  :root[data-theme="tech"] .ventures {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px); align-items: start;
    grid-template-rows: auto auto auto 1fr;
  }
  :root[data-theme="tech"] .ventures > h2,
  :root[data-theme="tech"] .ventures > .th-prompt { grid-column: 1 / -1; }
  :root[data-theme="tech"] .vt-head { grid-column: 1; grid-row: 3; }
  :root[data-theme="tech"] .v-index { grid-column: 1; grid-row: 4; }
  :root[data-theme="tech"] .vp-panel { grid-column: 2; grid-row: 3 / span 2; top: 112px; margin: 0; }
  :root[data-theme="tech"] .vp-view { aspect-ratio: 4 / 3; }
}

:root[data-theme="tech"] .v-preview { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="tech"] .v-row, :root[data-theme="tech"] .v-name, :root[data-theme="tech"] .v-arrow { transition: none; }
  :root[data-theme="tech"] .vp-live .v-index:hover .v-row.on .v-name::before,
  :root[data-theme="tech"] .vp-live .v-index:focus-within .v-row.on .v-name::before { animation: none; }
}

:root[data-theme="tech"] .th-json {
  width: 100%; max-width: 760px;
  background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-r);
}
:root[data-theme="tech"] .th-file {
  margin: 0; padding: 11px 18px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.3; color: var(--t-mute);
  border-bottom: 1px solid var(--t-line);
}
:root[data-theme="tech"] .th-code {
  padding: 20px 0 22px;
  font-family: var(--font-mono); font-size: clamp(11px, 3.4vw, 22px); line-height: 1.95;
  overflow-x: auto; scrollbar-width: thin;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="tech"] .jl { display: flex; gap: 1.2em; padding: 0 16px; white-space: nowrap; }
:root[data-theme="tech"] .jl i { flex: none; width: 1.2ch; font-style: normal; text-align: right; color: var(--t-faint); }
:root[data-theme="tech"] .jl .k { color: var(--t-mute); }
:root[data-theme="tech"] .jl .p { color: var(--t-faint); white-space: pre; }
:root[data-theme="tech"] .jl .num { font-weight: 400; color: var(--t-sun); letter-spacing: 0; }
:root[data-theme="tech"] .jl[role="img"] > span { padding-left: 2ch; }
:root[data-theme="tech"] .proof-band { padding-block-end: clamp(40px, 5vw, 72px); }

:root[data-theme="tech"] .quotes { margin-top: clamp(44px, 5vw, 72px); gap: 40px; }
:root[data-theme="tech"] .quote { display: flex; flex-direction: column; border-top-color: var(--t-line); padding-top: 18px; }
:root[data-theme="tech"] .quote figcaption {
  order: -1; margin: 0 0 16px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--t-mute);
}
:root[data-theme="tech"] .quote figcaption::before {
  content: "\2605\2605\2605\2605\2605"; content: "\2605\2605\2605\2605\2605" / "Five stars, ";
  margin-right: 12px; letter-spacing: 0.12em; color: var(--t-ember);
}
:root[data-theme="tech"] .quote blockquote {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 18px; line-height: 1.55; color: var(--t-ink);
}
@media (min-width: 900px) {
  :root[data-theme="tech"] .quote blockquote { font-size: 19px; }
}

:root[data-theme="tech"] .works .gal-head h2 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); letter-spacing: -0.015em; color: var(--t-ink); text-wrap: balance; }
:root[data-theme="tech"] .ww-face { background: var(--t-surface); border-radius: var(--t-r); }
:root[data-theme="tech"] .ww-face::after { box-shadow: inset 0 0 0 1px var(--t-line); }
:root[data-theme="tech"] .ww-cap { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--t-ink); }
:root[data-theme="tech"] .ww-cap small { font-size: 12px; color: var(--t-mute); }
:root[data-theme="tech"] .ww-hint { font-family: var(--font-mono); font-size: 12px; color: var(--t-mute); }
:root[data-theme="tech"] .ww-card:focus-visible,
:root[data-theme="tech"] .ww-live .ww-card:focus-visible .ww-face { outline: 2px solid var(--t-ember); }

:root[data-theme="tech"] .about-bleed .big-quote {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.012em; line-height: 1.14;
  color: var(--t-ink); font-size: clamp(2rem, 3.4vw, 3.1rem);
}
:root[data-theme="tech"] .about-bleed .big-quote b { font-weight: 600; color: var(--t-ink); }
:root[data-theme="tech"] .about-copy .who-line:first-of-type,
:root[data-theme="tech"] .who-line {
  font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--t-mute);
}
:root[data-theme="tech"] .about-bleed .portrait { border-radius: 0; }