:root {
  --color-bg: #fbfaf7;
  --color-surface: #fffefa;
  --color-surface-soft: #f2f4f8;
  --color-text: #202124;
  --color-muted: #7e8189;
  --color-accent: #ff6848;
  --color-line: rgba(78, 88, 116, 0.13);
  --color-inverse: #ffffff;
  --color-on-strong: #ffffff;
  --glass-surface: rgba(255, 255, 255, 0.58);
  --glass-surface-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(86, 94, 124, 0.16);
  --grid-line: rgba(101, 128, 176, 0.1);
  --star-color: rgba(75, 83, 108, 0.24);
  --radius-card: 12px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 50px rgba(23, 23, 23, 0.08);
  --shadow-glass: 0 18px 60px rgba(23, 23, 23, 0.1);
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-height: 76px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

[data-mode="dark"] {
  --color-bg: #0d1018;
  --color-surface: #181b28;
  --color-surface-soft: #22263a;
  --color-text: #f6f3ee;
  --color-muted: #a8a9b6;
  --color-line: rgba(219, 224, 255, 0.13);
  --color-inverse: #0d1018;
  --color-on-strong: #11131a;
  --glass-surface: rgba(26, 29, 45, 0.56);
  --glass-surface-strong: rgba(32, 36, 55, 0.74);
  --glass-border: rgba(230, 234, 255, 0.16);
  --grid-line: rgba(163, 178, 226, 0.08);
  --star-color: rgba(238, 241, 255, 0.34);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.26);
  --shadow-glass: 0 20px 70px rgba(0, 0, 0, 0.34);
}

[data-theme="tactical"] {
  --color-bg: #050505;
  --color-surface: #111111;
  --color-surface-soft: #202020;
  --color-text: #f3f3f0;
  --color-muted: #8f918a;
  --color-accent: #efff00;
  --color-line: rgba(243, 243, 240, 0.18);
  --color-inverse: #050505;
  --color-on-strong: #050505;
  --glass-surface: rgba(5, 5, 5, 0.78);
  --glass-surface-strong: rgba(5, 5, 5, 0.92);
  --glass-border: rgba(243, 243, 240, 0.24);
  --grid-line: rgba(239, 255, 0, 0.08);
  --star-color: rgba(243, 243, 240, 0.2);
  --radius-card: 0;
  --radius-pill: 2px;
  --shadow-soft: 12px 12px 0 rgba(239, 255, 0, 0.1);
  --shadow-glass: 0 0 0 1px rgba(239, 255, 0, 0.22), 20px 20px 0 rgba(0, 0, 0, 0.34);
  --motion-ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  font-family:
    "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei",
    sans-serif;
}

[data-theme="hmi"] {
  --color-bg: #0b1118;
  --color-surface: #17212d;
  --color-surface-soft: #202c39;
  --color-text: #d8f6ff;
  --color-muted: #8fa6b5;
  --color-accent: #43f0c3;
  --color-line: rgba(157, 216, 232, 0.2);
  --color-inverse: #071017;
  --color-on-strong: #071017;
  --glass-surface: rgba(23, 33, 45, 0.72);
  --glass-surface-strong: rgba(23, 33, 45, 0.9);
  --glass-border: rgba(183, 231, 244, 0.22);
  --grid-line: rgba(133, 209, 224, 0.075);
  --star-color: rgba(152, 225, 238, 0.26);
  --radius-card: 22px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.28);
  --shadow-glass: 0 0 0 1px rgba(67, 240, 195, 0.22), 0 18px 46px rgba(0, 0, 0, 0.3);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(235, 241, 255, 0.42)),
    radial-gradient(ellipse at 86% 8%, rgba(255, 104, 72, 0.12), transparent 26rem),
    radial-gradient(ellipse at 20% 0%, rgba(128, 169, 255, 0.14), transparent 30rem),
    linear-gradient(145deg, #fffdf9, var(--color-bg) 48%),
    var(--color-bg);
  background-attachment: fixed;
  color: var(--color-text);
  position: relative;
  transition:
    background 520ms var(--motion-ease),
    color 420ms var(--motion-ease);
}

body[data-mode="dark"] {
  background:
    linear-gradient(rgba(8, 10, 17, 0), rgba(92, 91, 122, 0.58)),
    radial-gradient(ellipse at 74% 8%, rgba(255, 196, 91, 0.1), transparent 24rem),
    radial-gradient(ellipse at 26% 8%, rgba(108, 135, 255, 0.16), transparent 30rem),
    linear-gradient(160deg, #0a0d14, var(--color-bg) 54%),
    var(--color-bg);
}

body[data-theme="tactical"] {
  background:
    linear-gradient(90deg, rgba(243, 243, 240, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(243, 243, 240, 0.055) 1px, transparent 1px),
    linear-gradient(116deg, transparent 0 70%, rgba(239, 255, 0, 0.92) 70.2% 83%, transparent 83.2%),
    radial-gradient(circle at 72% 24%, rgba(239, 255, 0, 0.16), transparent 22rem),
    linear-gradient(135deg, #050505 0%, #121212 48%, #050505 100%);
  background-attachment: fixed;
  background-size:
    96px 96px,
    96px 96px,
    auto,
    auto,
    auto;
}

body[data-theme="hmi"] {
  background:
    radial-gradient(ellipse at 74% 48%, rgba(50, 160, 170, 0.16), transparent 32rem),
    linear-gradient(90deg, rgba(137, 213, 225, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(137, 213, 225, 0.04) 1px, transparent 1px),
    linear-gradient(145deg, #111b25 0%, #0b1118 48%, #080d13 100%);
  background-attachment: fixed;
  background-size: auto, 80px 80px, 80px 80px, auto;
}

body::before {
  background-image:
    radial-gradient(circle, var(--star-color) 1px, transparent 1.6px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-position:
    13px 19px,
    0 0,
    0 0;
  background-size:
    96px 96px,
    32px 32px,
    32px 32px;
  content: "";
  inset: 0;
  opacity: 0.78;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

body[data-theme="tactical"]::before {
  background-image:
    linear-gradient(135deg, transparent 0 47%, rgba(239, 255, 0, 0.26) 48% 49%, transparent 50%),
    radial-gradient(circle, rgba(244, 246, 246, 0.22) 1px, transparent 1.6px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-position:
    right 8vw top 16vh,
    18px 28px,
    0 0,
    0 0;
  background-size:
    min(34vw, 420px) min(34vw, 420px),
    104px 104px,
    32px 32px,
    32px 32px;
  opacity: 0.78;
}

body[data-theme="hmi"]::before {
  background-image:
    linear-gradient(90deg, transparent 49.6%, rgba(120, 214, 226, 0.12) 50%, transparent 50.4%),
    radial-gradient(circle, rgba(126, 219, 228, 0.24) 1px, transparent 1.5px);
  background-position: center, 20px 24px;
  background-size: auto, 80px 80px;
  opacity: 0.52;
}

body[data-theme="tactical"]::after {
  border-bottom: 1px solid rgba(239, 255, 0, 0.42);
  border-left: 1px solid rgba(239, 255, 0, 0.42);
  bottom: clamp(18px, 4vw, 52px);
  content: "";
  height: min(34vw, 360px);
  pointer-events: none;
  position: fixed;
  right: clamp(18px, 4vw, 54px);
  width: min(42vw, 480px);
  z-index: 0;
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

.cursor-thought-lines {
  display: none;
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 20;
}

.cursor-thought-lines.is-active {
  display: block;
}

.theme-transition-overlay {
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(243, 243, 240, 0.14) 45%, transparent 68%);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  z-index: 90;
}

body.is-theme-shifting .theme-transition-overlay {
  animation: theme-transition-wash 700ms steps(2, end) both;
}

body.is-theme-shifting .site-header,
body.is-theme-shifting main,
body.is-theme-shifting .site-footer {
  animation: theme-content-shift 700ms steps(2, end) both;
}

body.is-opening {
  overflow: hidden;
}

body.is-opening::before {
  animation: opening-curtain 1200ms var(--motion-ease) 260ms forwards;
  background: #080a10;
  content: "";
  inset: 0;
  opacity: 1;
  position: fixed;
  transform-origin: top;
  z-index: 100;
}

body.is-opening::after {
  animation: opening-mark 1250ms var(--motion-ease) 80ms forwards;
  color: #f7f4ef;
  content: "Leo / Interaction Portfolio";
  font-size: 12px;
  font-weight: 760;
  left: 50%;
  letter-spacing: 0;
  position: fixed;
  text-transform: uppercase;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
}

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

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent), white 20%);
  outline-offset: 3px;
}

.skip-link {
  left: 16px;
  padding: 10px 14px;
  position: fixed;
  top: -60px;
  z-index: 20;
  background: var(--color-text);
  color: var(--color-inverse);
  border-radius: var(--radius-pill);
}

.skip-link:focus {
  top: 16px;
}

.site-header {
  align-items: center;
  backdrop-filter: blur(22px) saturate(1.18);
  background: var(--glass-surface);
  border-bottom: 1px solid var(--glass-border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  min-height: var(--header-height);
  padding: 0 clamp(18px, 4vw, 56px);
  position: sticky;
  top: 0;
  z-index: 10;
}

body[data-theme="tactical"] .site-header {
  background: rgba(0, 0, 0, 0.86);
  border-bottom: 1px solid rgba(244, 246, 246, 0.26);
  box-shadow: 0 1px 0 rgba(239, 255, 0, 0.54);
  text-transform: uppercase;
}

body.is-opening .site-header {
  animation: header-enter 720ms var(--motion-ease) 620ms both;
}

.brand {
  font-size: 18px;
  font-weight: 760;
}

body[data-theme="tactical"] .brand {
  color: var(--color-text);
  font-family: "Arial Narrow", "Roboto Condensed", "DIN Condensed", sans-serif;
  font-size: 20px;
  letter-spacing: 0;
  position: relative;
}

body[data-theme="tactical"] .brand::after {
  color: var(--color-accent);
  content: " / OPS";
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  margin-left: 8px;
}

.primary-nav,
.header-actions,
.mode-controls {
  align-items: center;
  display: flex;
}

.primary-nav {
  gap: 8px;
}

.primary-nav a,
.theme-cycle-button,
.icon-button,
.resume-button,
.ghost-link {
  border-radius: var(--radius-pill);
  transition:
    background 180ms var(--motion-ease),
    border-color 180ms var(--motion-ease),
    transform 180ms var(--motion-ease);
}

body[data-theme="tactical"] .primary-nav a,
body[data-theme="tactical"] .theme-cycle-button,
body[data-theme="tactical"] .icon-button,
body[data-theme="tactical"] .resume-button,
body[data-theme="tactical"] .ghost-link {
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  letter-spacing: 0;
}

.primary-nav a {
  color: var(--color-muted);
  font-size: 14px;
  padding: 9px 13px;
}

.primary-nav a[aria-current="page"],
.primary-nav a:hover {
  background: color-mix(in srgb, var(--glass-surface-strong), var(--color-text) 7%);
  color: var(--color-text);
}

body[data-theme="tactical"] .primary-nav a {
  border-bottom: 1px solid transparent;
  color: var(--color-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

body[data-theme="tactical"] .primary-nav a[aria-current="page"],
body[data-theme="tactical"] .primary-nav a:hover {
  background: rgba(239, 255, 0, 0.16);
  border-bottom-color: var(--color-accent);
  color: var(--color-text);
}

.header-actions {
  gap: 10px;
  justify-content: flex-end;
}

.mode-controls {
  gap: 10px;
  justify-content: center;
}

body[data-theme="tactical"] .theme-cycle-button,
body[data-theme="tactical"] .icon-button {
  background: rgba(8, 10, 11, 0.94);
  border-color: rgba(244, 246, 246, 0.28);
  box-shadow: none;
}

.theme-cycle-button,
.icon-button {
  cursor: pointer;
}

.theme-cycle-button {
  align-items: center;
  backdrop-filter: blur(22px) saturate(1.2);
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
}

.theme-cycle-button span:first-child {
  font-size: 15px;
  line-height: 1;
}

body[data-theme="tactical"] .theme-cycle-button {
  color: var(--color-accent);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
}

.icon-button {
  align-items: center;
  backdrop-filter: blur(22px) saturate(1.2);
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.resume-button,
.ghost-link {
  align-items: center;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
}

.resume-button {
  background: var(--color-accent);
  color: white;
  font-size: 14px;
  min-height: 36px;
  padding: 0 15px;
}

body[data-theme="tactical"] .resume-button {
  background: var(--color-accent);
  color: #050505;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.page {
  padding: clamp(28px, 5vw, 72px) clamp(18px, 4vw, 56px);
}

.home-page {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
  margin: 0 auto;
  max-width: 1320px;
  padding-top: clamp(82px, 14vh, 150px);
}

body[data-theme="tactical"] .home-page {
  column-gap: clamp(22px, 4vw, 56px);
  grid-template-columns: 72px minmax(0, 1fr);
  max-width: 1440px;
  min-height: calc(100svh - var(--header-height));
  padding-top: clamp(72px, 12vh, 132px);
  position: relative;
}

body[data-theme="tactical"] .home-page::before {
  border: 1px solid rgba(244, 246, 246, 0.22);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  content: "";
  grid-column: 2;
  height: clamp(180px, 30vw, 330px);
  opacity: 0.62;
  pointer-events: none;
  position: absolute;
  right: clamp(18px, 5vw, 72px);
  top: clamp(72px, 12vh, 140px);
  width: min(42vw, 520px);
}

.tactical-hero-stage {
  display: none;
}

body[data-theme="tactical"] .home-page {
  display: block;
  max-width: 1540px;
  padding-top: clamp(28px, 5vh, 64px);
}

body[data-theme="tactical"] .home-page::before,
body[data-theme="tactical"] .home-page > .intro-mark,
body[data-theme="tactical"] .home-page > .hero-copy {
  display: none;
}

body[data-theme="tactical"] .tactical-hero-stage {
  display: block;
  height: min(540px, calc(100svh - var(--header-height) - 240px));
  isolation: isolate;
  min-height: 430px;
  overflow: visible;
  position: relative;
}

.tactical-particle-visual,
.tactical-particle-canvas {
  inset: 0;
  position: absolute;
}

.tactical-particle-visual {
  inset: -18% -12% -16%;
  -webkit-mask-image: radial-gradient(ellipse 74% 80% at 50% 48%, #000 34%, rgba(0, 0, 0, 0.72) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 80% at 50% 48%, #000 34%, rgba(0, 0, 0, 0.72) 62%, transparent 100%);
  z-index: 0;
}

.tactical-particle-canvas {
  height: 100%;
  image-rendering: pixelated;
  width: 100%;
  z-index: 0;
}

.tactical-glass-frame {
  animation: tactical-glass-drift 3.1s steps(2, end) infinite;
  background: rgba(243, 243, 240, 0.12);
  border: 1px solid rgba(243, 243, 240, 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 28px rgba(243, 243, 240, 0.025);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.tactical-glass-frame--domain {
  height: clamp(86px, 10vw, 132px);
  left: 29%;
  top: 31%;
  width: clamp(82px, 9vw, 124px);
}

.tactical-glass-frame--principle {
  animation-delay: -1.1s;
  height: clamp(82px, 9vw, 118px);
  left: 73%;
  top: 29%;
  width: clamp(78px, 8vw, 112px);
}

.tactical-glass-frame--skill {
  animation-delay: -2.3s;
  height: clamp(92px, 11vw, 142px);
  left: 67%;
  top: 67%;
  width: clamp(88px, 10vw, 132px);
}

.tactical-guide-lines {
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.tactical-guide-line {
  animation: tactical-guide-pulse 3.1s steps(2, end) infinite;
  fill: none;
  stroke: rgba(243, 243, 240, 0.54);
  stroke-linecap: square;
  stroke-width: 1.25;
  transform-box: fill-box;
  transform-origin: center;
}

.tactical-guide-line--domain {
  animation-delay: -0.4s;
  stroke: rgba(239, 255, 0, 0.72);
}

.tactical-guide-line--principle {
  animation-delay: -1.8s;
}

.tactical-guide-line--skill {
  animation-delay: -2.6s;
}

.tactical-guide-marker {
  fill: rgba(239, 255, 0, 0.9);
  stroke: rgba(243, 243, 240, 0.88);
  stroke-width: 2;
}

.tactical-guide-marker--muted {
  fill: rgba(243, 243, 240, 0.74);
}

.tactical-word-field {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

.tactical-word {
  color: rgba(244, 246, 246, 0.68);
  font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(18px, 3vw, 48px);
  font-weight: 720;
  letter-spacing: 0.02em;
  line-height: 1;
  position: absolute;
  text-shadow: 0 0 16px rgba(244, 246, 246, 0.24), 0 0 34px rgba(126, 132, 184, 0.2);
  white-space: nowrap;
}

.tactical-word--domain-main { font-size: clamp(30px, 5vw, 82px); left: 8%; opacity: 0.72; top: 14%; }
.tactical-word--domain-cn { font-size: clamp(18px, 2.4vw, 38px); left: 19%; opacity: 0.42; top: 32%; }
.tactical-word--game { font-size: clamp(28px, 4.2vw, 72px); left: 63%; opacity: 0.6; top: 8%; }
.tactical-word--mobile { font-size: clamp(16px, 1.8vw, 28px); left: 48%; opacity: 0.36; top: 26%; }
.tactical-word--ai { color: rgba(239, 255, 0, 0.74); font-size: clamp(20px, 2.6vw, 44px); left: 78%; opacity: 0.78; top: 39%; }
.tactical-word--product { font-size: clamp(24px, 3.8vw, 64px); left: 36%; opacity: 0.48; top: 41%; }
.tactical-word--ui { font-size: clamp(22px, 3.4vw, 58px); left: 6%; opacity: 0.44; top: 61%; }
.tactical-word--game-interaction { color: rgba(239, 255, 0, 0.62); font-size: clamp(20px, 3vw, 52px); left: 63%; opacity: 0.64; top: 66%; }
.tactical-word--architecture { font-size: clamp(18px, 2.2vw, 34px); left: 4%; opacity: 0.34; top: 43%; }
.tactical-word--prototype { font-size: clamp(18px, 2.3vw, 36px); left: 57%; opacity: 0.42; top: 53%; }
.tactical-word--interaction { font-size: clamp(20px, 2.8vw, 46px); left: 22%; opacity: 0.52; top: 52%; }
.tactical-word--ux { font-size: clamp(18px, 2.1vw, 34px); left: 72%; opacity: 0.44; top: 22%; }
.tactical-word--service { font-size: clamp(17px, 2vw, 32px); left: 10%; opacity: 0.32; top: 83%; }
.tactical-word--proto-cn { font-size: clamp(19px, 2.5vw, 40px); left: 45%; opacity: 0.54; top: 16%; }
.tactical-word--frontend { font-size: clamp(16px, 1.8vw, 28px); left: 80%; opacity: 0.35; top: 79%; }

.tactical-annotation {
  background: rgba(6, 7, 7, 0.42);
  border: 1px solid rgba(243, 243, 240, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
  color: var(--color-muted);
  display: grid;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(11px, 0.9vw, 13px);
  gap: 8px;
  line-height: 1.6;
  margin: 0;
  max-width: min(31vw, 380px);
  padding: 12px 14px 13px;
  position: absolute;
  z-index: 3;
}

.tactical-annotation::before {
  background: rgba(243, 243, 240, 0.32);
  content: "";
  height: 1px;
  position: absolute;
  top: 9px;
  width: clamp(42px, 5vw, 72px);
}

.tactical-annotation span {
  color: var(--color-accent);
  letter-spacing: 0.1em;
}

.tactical-annotation strong {
  color: rgba(243, 243, 240, 0.76);
  font-size: 1em;
  font-weight: 500;
}

.tactical-annotation--domain {
  left: clamp(8px, 3vw, 44px);
  padding-left: clamp(68px, 7vw, 98px);
  top: 15%;
}

.tactical-annotation--domain::before {
  left: 0;
}

.tactical-annotation--principle {
  padding-right: clamp(68px, 7vw, 98px);
  right: clamp(8px, 3vw, 44px);
  text-align: right;
  top: 39%;
}

.tactical-annotation--principle::before {
  right: 0;
}

.tactical-annotation--skill {
  bottom: 14%;
  left: clamp(8px, 3vw, 44px);
  padding-left: clamp(68px, 7vw, 98px);
  }

.tactical-annotation--skill::before {
  left: 0;
}

body[data-theme="tactical"] .home-work {
  padding-top: clamp(28px, 4vw, 54px);
}

.hmi-home-stage {
  display: none;
}

body[data-theme="hmi"] .home-page {
  display: block;
  max-width: 1540px;
  min-height: calc(100svh - var(--header-height));
  padding-top: clamp(24px, 4vh, 56px);
}

body[data-theme="hmi"] .home-page > .intro-mark,
body[data-theme="hmi"] .home-page > .hero-copy,
body[data-theme="hmi"] .tactical-hero-stage,
body[data-theme="hmi"] .home-work {
  display: none;
}

body[data-theme="hmi"] .hmi-home-stage {
  display: grid;
  gap: clamp(24px, 3vw, 52px);
  grid-template-columns: minmax(240px, 0.25fr) minmax(0, 1fr);
  min-height: min(760px, calc(100svh - var(--header-height) - 72px));
}

.hmi-status-panel,
.hmi-coverflow {
  background: linear-gradient(145deg, rgba(29, 44, 57, 0.82), rgba(10, 17, 25, 0.72));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px rgba(216, 246, 255, 0.04), var(--shadow-soft);
  min-width: 0;
}

.hmi-status-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 32px);
}

.hmi-panel-heading,
.hmi-status-line,
.hmi-status-footer,
.hmi-coverflow-heading,
.hmi-coverflow-controls {
  align-items: center;
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  letter-spacing: 0.08em;
}

.hmi-panel-heading,
.hmi-coverflow-heading {
  color: var(--color-muted);
}

.hmi-panel-heading i {
  background: var(--color-accent);
  box-shadow: 0 0 14px rgba(67, 240, 195, 0.9);
  height: 7px;
  width: 7px;
}

.hmi-identity {
  border-bottom: 1px solid var(--color-line);
  margin-top: clamp(32px, 6vh, 70px);
  padding-bottom: 26px;
}

.hmi-identity span,
.hmi-status-line span,
.hmi-status-footer span,
.hmi-coverflow-heading span,
.hmi-project-readout > span {
  color: var(--color-muted);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.hmi-identity strong {
  color: var(--color-text);
  display: block;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 500;
  line-height: 1;
  margin: 9px 0 14px;
}

.hmi-identity p,
.hmi-project-readout p,
.hmi-coverflow-heading p {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.65;
  margin: 0;
}

.hmi-status-line {
  border-bottom: 1px solid var(--color-line);
  gap: 18px;
  padding: 20px 0;
}

.hmi-status-line strong {
  color: var(--color-accent);
  font-size: 10px;
  font-weight: 500;
  text-align: right;
}

.hmi-focus-list { margin-top: 22px; }
.hmi-focus-list div { align-items: baseline; border-bottom: 1px solid rgba(157, 216, 232, 0.1); display: flex; gap: 12px; padding: 14px 0; }
.hmi-focus-list span { color: var(--color-accent); font-size: 10px; }
.hmi-focus-list strong { color: var(--color-text); font-size: 12px; font-weight: 500; line-height: 1.4; }
.hmi-status-footer { border-top: 1px solid var(--color-line); margin-top: auto; padding-top: 20px; }
.hmi-status-footer strong { color: var(--color-text); font-weight: 500; }

.hmi-coverflow { display: grid; grid-template-rows: auto minmax(320px, 1fr) auto auto; overflow: hidden; padding: clamp(20px, 2.4vw, 34px); position: relative; }
.hmi-coverflow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.hmi-coverflow-heading strong { color: var(--color-accent); display: block; font-size: 13px; font-weight: 500; margin-top: 7px; }
.hmi-coverflow-heading p { max-width: 235px; text-align: right; }

.hmi-coverflow-stage { min-height: 350px; perspective: 1200px; position: relative; }
.hmi-project-card { color: var(--color-text); left: 50%; position: absolute; text-decoration: none; top: 50%; transform-style: preserve-3d; transition: filter 400ms var(--motion-ease), opacity 400ms var(--motion-ease), transform 520ms var(--motion-ease); width: clamp(260px, 31vw, 430px); }
.hmi-project-cover { aspect-ratio: 16 / 10; background: linear-gradient(135deg, rgba(216, 246, 255, 0.18), rgba(5, 12, 18, 0.32)), var(--cover-bg); border: 1px solid rgba(216, 246, 255, 0.28); overflow: hidden; position: relative; }
.hmi-project-cover::after { background: linear-gradient(rgba(216, 246, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(216, 246, 255, 0.08) 1px, transparent 1px); background-size: 28px 28px; content: ""; inset: 0; position: absolute; }
.hmi-project-cover img { filter: grayscale(0.55) contrast(1.05) brightness(0.76); height: 100%; mix-blend-mode: multiply; object-fit: cover; opacity: 0.65; width: 100%; }
.hmi-project-cover span { background: rgba(7, 16, 23, 0.86); bottom: 0; color: var(--color-accent); font-size: 11px; padding: 7px 9px; position: absolute; right: 0; z-index: 1; }
.hmi-project-card-label { border-bottom: 1px solid rgba(157, 216, 232, 0.2); color: var(--color-muted); font-size: 10px; letter-spacing: 0.08em; padding: 11px 0; }
.hmi-project-card[data-position="0"] { filter: none; opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 5; }
.hmi-project-card[data-position="1"] { filter: brightness(0.62); opacity: 0.68; transform: translate(calc(-50% + min(34vw, 470px)), -50%) rotateY(-48deg) scale(0.78); z-index: 4; }
.hmi-project-card[data-position="-1"] { filter: brightness(0.62); opacity: 0.68; transform: translate(calc(-50% - min(34vw, 470px)), -50%) rotateY(48deg) scale(0.78); z-index: 4; }
.hmi-project-card[data-position="2"], .hmi-project-card[data-position="-2"] { filter: brightness(0.38); opacity: 0.28; z-index: 2; }
.hmi-project-card[data-position="2"] { transform: translate(calc(-50% + min(54vw, 690px)), -50%) rotateY(-60deg) scale(0.62); }
.hmi-project-card[data-position="-2"] { transform: translate(calc(-50% - min(54vw, 690px)), -50%) rotateY(60deg) scale(0.62); }
.hmi-project-card[data-position="3"], .hmi-project-card[data-position="-3"] { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.4); }
.hmi-project-card.is-current:hover .hmi-project-cover, .hmi-project-card.is-current:focus-visible .hmi-project-cover { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 0 28px rgba(67, 240, 195, 0.18); }
.hmi-project-readout { border-top: 1px solid var(--color-line); padding-top: 18px; }
.hmi-project-readout h1 { color: var(--color-text); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: clamp(22px, 2.4vw, 36px); font-weight: 520; line-height: 1.18; margin: 8px 0 10px; max-width: 780px; }
.hmi-project-readout p { max-width: 690px; }
.hmi-coverflow-controls { border-top: 1px solid var(--color-line); margin-top: 18px; padding-top: 14px; }
.hmi-coverflow-controls button { background: transparent; border: 1px solid var(--glass-border); color: var(--color-text); cursor: pointer; font: inherit; font-size: 18px; height: 36px; width: 48px; }
.hmi-coverflow-controls button:hover, .hmi-coverflow-controls button:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-strong); }
.hmi-coverflow-controls > span { color: var(--color-muted); font-size: 11px; }

/* HMI home: a bright cockpit glass composition with one continuous project rail. */
body[data-theme="hmi"] {
  background:
    linear-gradient(118deg, transparent 8%, rgba(48, 247, 188, 0.18) 28%, rgba(103, 224, 255, 0.34) 42%, rgba(42, 128, 255, 0.12) 55%, transparent 72%),
    radial-gradient(ellipse at 76% 30%, rgba(71, 236, 211, 0.34), transparent 34rem),
    radial-gradient(ellipse at 18% 76%, rgba(39, 122, 180, 0.36), transparent 34rem),
    linear-gradient(135deg, #071d2b 0%, #081923 42%, #03121d 100%);
  background-attachment: fixed;
  background-size: 160% 120%, auto, auto, auto;
}

body[data-theme="hmi"]::before {
  background-image:
    linear-gradient(104deg, transparent 16%, rgba(65, 255, 198, 0.16) 31%, rgba(214, 255, 255, 0.32) 39%, rgba(79, 191, 255, 0.16) 52%, transparent 70%),
    radial-gradient(circle, rgba(230, 255, 255, 0.5) 1px, transparent 1.7px),
    linear-gradient(90deg, transparent 49.5%, rgba(203, 244, 255, 0.12) 50%, transparent 50.5%);
  background-position: center top, 18px 26px, center;
  background-size: 150% 90%, 72px 72px, auto;
  filter: blur(0.2px);
  opacity: 0.62;
}

body[data-theme="hmi"]::after {
  background:
    linear-gradient(102deg, transparent 21%, rgba(42, 255, 188, 0.08) 33%, rgba(186, 255, 255, 0.28) 45%, rgba(56, 175, 255, 0.13) 58%, transparent 75%);
  content: "";
  filter: blur(34px);
  inset: -24svh -16vw auto -16vw;
  height: 72svh;
  opacity: 0.78;
  pointer-events: none;
  position: fixed;
  transform: rotate(-7deg);
  z-index: 0;
}

body[data-theme="hmi"] .home-page {
  max-width: 1440px;
  padding-bottom: clamp(40px, 6vw, 80px);
}

body[data-theme="hmi"] .home-work {
  display: block;
  padding-top: clamp(48px, 7vw, 86px);
}

body[data-theme="hmi"] .hmi-home-stage {
  align-items: stretch;
  gap: clamp(18px, 2.8vw, 44px);
  grid-template-columns: minmax(210px, 0.64fr) minmax(360px, 1.5fr) minmax(230px, 0.72fr);
  margin: 0 auto;
  max-width: 1360px;
  min-height: min(660px, calc(100svh - var(--header-height) - 56px));
  overflow: hidden;
  position: relative;
}

.hmi-light-field {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(226, 244, 255, 0.24), transparent 18%),
    radial-gradient(ellipse at 53% 58%, rgba(65, 255, 210, 0.2), transparent 30%),
    linear-gradient(112deg, transparent 9%, rgba(95, 113, 214, 0.18) 26%, rgba(81, 232, 225, 0.5) 43%, rgba(182, 217, 255, 0.3) 55%, transparent 76%);
  filter: blur(26px) saturate(1.22);
  inset: -28% -18%;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transform: rotate(-8deg);
  z-index: 0;
}

.hmi-light-field::before,
.hmi-light-field::after {
  content: "";
  inset: 0;
  position: absolute;
}

.hmi-light-field::before {
  animation: hmi-aurora-drift 18s ease-in-out infinite alternate;
  background: linear-gradient(104deg, transparent 15%, rgba(117, 99, 255, 0.16) 30%, rgba(116, 242, 255, 0.52) 47%, rgba(45, 143, 224, 0.2) 63%, transparent 82%);
  filter: blur(42px);
}

.hmi-light-field::after {
  animation: hmi-aurora-wave 24s ease-in-out infinite alternate;
  background: radial-gradient(ellipse at 50% 55%, rgba(243, 250, 255, 0.34), rgba(115, 132, 255, 0.18) 29%, transparent 54%);
  filter: blur(32px);
}

.hmi-left-rail,
.hmi-center-scene,
.hmi-right-rail { min-width: 0; position: relative; z-index: 1; }

.hmi-left-rail,
.hmi-right-rail {
  align-content: center;
  display: grid;
  gap: clamp(12px, 1.5vw, 18px);
}

.hmi-cockpit-card {
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
  backdrop-filter: blur(24px) saturate(1.22);
  background: linear-gradient(145deg, rgba(236, 249, 255, 0.22), rgba(104, 125, 182, 0.13));
  border: 1px solid rgba(238, 248, 255, 0.24);
  border-radius: 18px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.28), 0 18px 42px rgba(4, 15, 34, 0.24);
  color: #f7fbff;
  padding: clamp(16px, 2vw, 24px);
}

.hmi-cockpit-card > span,
.hmi-flip-card span,
.hmi-greeting strong {
  color: rgba(232, 242, 255, 0.72);
  font-size: 11px;
  letter-spacing: 0;
}

.hmi-time-card strong {
  display: block;
  font-size: clamp(34px, 4.1vw, 58px);
  font-weight: 660;
  line-height: 0.95;
}

.hmi-profile-card h1 {
  color: #fbfdff;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 420;
  line-height: 1.08;
  margin: 18px 0 14px;
}

.hmi-profile-card h1 strong { font-weight: 780; }
.hmi-profile-card p { color: rgba(240, 248, 255, 0.84); font-size: 13px; line-height: 1.72; margin: 0; }
.hmi-skill-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.hmi-skill-tags b { background: rgba(233, 247, 255, 0.16); border: 1px solid rgba(238, 248, 255, 0.28); border-radius: 8px; color: #f5fbff; font-size: 11px; font-weight: 520; padding: 8px 10px; }

.hmi-center-scene {
  align-self: center;
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto;
  min-height: min(560px, calc(100svh - var(--header-height) - 110px));
  padding: clamp(22px, 3vw, 40px) 0;
}

.hmi-greeting {
  margin-left: clamp(8px, 3vw, 48px);
}

.hmi-greeting span {
  color: #f8fbff;
  display: block;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(24px, 2.8vw, 42px);
  font-weight: 680;
  line-height: 1.1;
}

.hmi-greeting strong {
  display: block;
  font-weight: 520;
  margin-top: 10px;
}

.hmi-vehicle-ghost {
  align-self: center;
  height: clamp(210px, 28vw, 360px);
  justify-self: center;
  position: relative;
  width: min(92%, 620px);
}

.hmi-vehicle-ghost::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(235, 246, 255, 0.35), transparent 35%),
    repeating-radial-gradient(ellipse at 50% 54%, rgba(237, 247, 255, 0.24) 0 1px, transparent 1px 14px);
  border-radius: 50%;
  content: "";
  filter: blur(0.4px);
  inset: 0 4% 8%;
  opacity: 0.72;
  position: absolute;
  transform: perspective(460px) rotateX(66deg);
}

.hmi-vehicle-body {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(151, 171, 210, 0.58) 48%, rgba(30, 45, 76, 0.36) 49%),
    linear-gradient(90deg, transparent 9%, rgba(246, 250, 255, 0.9) 10% 80%, transparent 82%);
  border-radius: 58% 42% 44% 38% / 56% 46% 46% 36%;
  box-shadow: 0 18px 34px rgba(8, 18, 39, 0.38), 0 0 44px rgba(220, 246, 255, 0.22);
  height: 34%;
  left: 16%;
  position: absolute;
  top: 36%;
  transform: skewX(-8deg);
  width: 68%;
}

.hmi-vehicle-body::before {
  background: linear-gradient(110deg, rgba(24, 39, 68, 0.88), rgba(95, 116, 158, 0.52));
  border-radius: 56% 44% 28% 20% / 78% 70% 28% 22%;
  content: "";
  height: 42%;
  left: 25%;
  position: absolute;
  top: 8%;
  width: 34%;
}

.hmi-vehicle-ghost > span {
  background: radial-gradient(circle, #10192a 0 40%, rgba(240, 248, 255, 0.82) 43% 50%, rgba(20, 29, 48, 0.78) 54%);
  border-radius: 50%;
  bottom: 24%;
  height: clamp(34px, 4.2vw, 58px);
  position: absolute;
  width: clamp(34px, 4.2vw, 58px);
}

.hmi-vehicle-ghost > span:nth-of-type(1) { left: 28%; }
.hmi-vehicle-ghost > span:nth-of-type(2) { right: 22%; }

.hmi-mode-strip {
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  align-self: end;
  background: rgba(236, 246, 255, 0.14);
  border: 1px solid rgba(238, 248, 255, 0.22);
  border-radius: 16px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: center;
  padding: 9px;
  width: min(90%, 520px);
}

.hmi-mode-strip span {
  background: rgba(246, 251, 255, 0.1);
  border-radius: 12px;
  color: rgba(247, 251, 255, 0.86);
  font-size: 11px;
  padding: 12px 8px;
  text-align: center;
}

.hmi-right-rail {
  grid-template-rows: auto minmax(300px, 1fr);
}

.hmi-signal-card strong {
  color: #fbfdff;
  display: block;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 680;
  line-height: 1.05;
  margin-top: 10px;
}

.hmi-flipdeck {
  min-height: clamp(300px, 42vw, 430px);
  perspective: 1200px;
  position: relative;
}

.hmi-flip-card {
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  backdrop-filter: blur(24px) saturate(1.18);
  background: linear-gradient(145deg, rgba(8, 10, 16, 0.74), rgba(35, 42, 68, 0.66));
  border: 1px solid rgba(242, 246, 255, 0.26);
  border-radius: 28px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), 0 16px 38px rgba(4, 12, 26, 0.34);
  color: #f8fbff;
  display: grid;
  gap: 14px;
  left: 50%;
  min-height: 128px;
  overflow: hidden;
  padding: 14px;
  position: absolute;
  text-decoration: none;
  top: 0;
  transform: translateX(-50%);
  transform-origin: center top;
  transition: opacity 520ms var(--motion-ease), transform 620ms var(--motion-ease), width 620ms var(--motion-ease);
  width: min(100%, 330px);
}

.hmi-flip-card[data-flip-position="0"] { opacity: 1; transform: translate(-50%, 0) rotateX(0) scale(1); z-index: 4; }
.hmi-flip-card[data-flip-position="1"] { opacity: 0.82; transform: translate(-50%, 155px) rotateX(-5deg) scale(0.88); width: 88%; z-index: 3; }
.hmi-flip-card[data-flip-position="2"] { opacity: 0.64; transform: translate(-50%, 272px) rotateX(-8deg) scale(0.68); width: 68%; z-index: 2; }
.hmi-flip-card[data-flip-position="3"],
.hmi-flip-card[data-flip-position="hidden"] { opacity: 0; pointer-events: none; transform: translate(-50%, 340px) rotateX(-14deg) scale(0.52); width: 54%; z-index: 1; }

.hmi-flip-card.is-active:hover,
.hmi-flip-card.is-active:focus-visible {
  border-color: rgba(144, 245, 255, 0.72);
  transform: translate(-50%, -4px) rotateX(0) scale(1.01);
}

.hmi-flip-cover {
  aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(96, 88, 180, 0.2)), var(--cover-bg);
  border-radius: 20px;
  overflow: hidden;
}

.hmi-flip-cover img {
  filter: saturate(0.72) contrast(1.06) brightness(0.76);
  height: 100%;
  mix-blend-mode: multiply;
  object-fit: cover;
  width: 100%;
}

body[data-theme="tactical"] .hmi-flip-cover img {
  filter: saturate(1.04) contrast(1.02) brightness(0.96);
  mix-blend-mode: normal;
  opacity: 1;
}

.hmi-flip-card h2 {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 620;
  line-height: 1.18;
  margin: 6px 0 2px;
}

.hero-copy {
  align-self: start;
  max-width: 1380px;
}

.eyebrow,
.meta,
.card-meta,
.section-kicker {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.eyebrow,
.section-kicker {
  text-transform: uppercase;
}

.intro-mark {
  align-items: center;
  background: var(--color-text);
  border-radius: 8px;
  color: var(--color-inverse);
  display: inline-flex;
  font-size: 22px;
  height: 34px;
  justify-content: center;
  margin-top: 10px;
  width: 34px;
}

body[data-theme="tactical"] .intro-mark {
  align-self: start;
  background: var(--color-accent);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  color: #050505;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.intro-statement {
  color: color-mix(in srgb, var(--color-text), transparent 16%);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 340;
  line-height: 1.34;
  margin: 0;
  max-width: 1080px;
}

body[data-theme="tactical"] .intro-statement {
  color: rgba(244, 246, 246, 0.88);
  font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(28px, 4.1vw, 56px);
  font-weight: 820;
  line-height: 1.12;
  max-width: 980px;
  text-transform: uppercase;
}

body[data-theme="tactical"] .intro-statement::before {
  color: var(--color-accent);
  content: "TACTICAL PORTFOLIO / INTERACTION DOSSIER";
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  margin-bottom: 18px;
}

.intro-statement strong {
  color: var(--color-text);
  font-weight: 820;
}

.intro-type-content {
  white-space: normal;
}

.intro-type-character {
  display: none;
  will-change: filter, opacity, transform;
}

.intro-type-character.is-visible {
  animation: intro-character-enter 360ms var(--motion-ease) both;
  display: inline-block;
}

.intro-type-character.is-name {
  color: var(--color-text);
  font-weight: 820;
}

.intro-type-cursor {
  animation: intro-cursor-blink 300ms steps(1, end) infinite;
  display: inline-block;
  background: currentColor;
  height: 0.12em;
  margin-left: 0.12em;
  position: relative;
  top: 0.08em;
  vertical-align: baseline;
  width: 0.72em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.primary-link,
.secondary-link {
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-weight: 760;
  padding: 14px 18px;
}

.primary-link {
  background: var(--color-text);
  color: var(--color-inverse);
}

.secondary-link {
  border: 1px solid var(--color-line);
  color: var(--color-text);
}

.home-work {
  grid-column: 1 / -1;
  padding-top: clamp(40px, 6vw, 72px);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.section-heading {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.section-heading h2 {
  font-size: clamp(23px, 2.8vw, 34px);
  font-weight: 560;
  line-height: 1.12;
  margin: 0;
}

body[data-theme="tactical"] .section-heading {
  align-items: center;
  border-bottom: 1px solid rgba(244, 246, 246, 0.22);
  padding-bottom: 14px;
}

body[data-theme="tactical"] .section-heading h2,
body[data-theme="tactical"] .case-hero h1,
body[data-theme="tactical"] .page-title h1,
body[data-theme="tactical"] .content-section h2 {
  font-family: "Arial Narrow", "Roboto Condensed", "DIN Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-theme="tactical"] .section-kicker,
body[data-theme="tactical"] .eyebrow,
body[data-theme="tactical"] .card-meta,
body[data-theme="tactical"] .project-meta-grid span,
body[data-theme="tactical"] .site-footer span {
  color: var(--color-accent);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.12em;
}

.section-heading p {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  max-width: 460px;
}

.home-work-list {
  column-count: 2;
  column-gap: clamp(18px, 3vw, 36px);
  padding-top: 8px;
}

.reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition:
    clip-path 720ms var(--motion-ease),
    opacity 720ms var(--motion-ease),
    transform 720ms var(--motion-ease);
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-copy.reveal-item {
  clip-path: inset(0 0 100% 0);
  transition-duration: 920ms;
}

.hero-copy.reveal-item.is-visible {
  clip-path: inset(0 0 0 0);
}

.home-work-card {
  backdrop-filter: blur(20px) saturate(1.14);
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  break-inside: avoid;
  display: inline-grid;
  grid-template-rows: auto 1fr;
  margin: 0 0 clamp(18px, 3vw, 34px);
  overflow: hidden;
  position: relative;
  transition:
    border-color 220ms var(--motion-ease),
    box-shadow 220ms var(--motion-ease),
    transform 220ms var(--motion-ease);
  width: 100%;
}

body[data-theme="tactical"] .home-work-card,
body[data-theme="tactical"] .all-work-card,
body[data-theme="tactical"] .profile-card {
  background: rgba(8, 10, 11, 0.86);
  border-color: rgba(244, 246, 246, 0.26);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

body[data-theme="tactical"] .home-work-card::before,
body[data-theme="tactical"] .all-work-card::before,
body[data-theme="tactical"] .profile-card::before {
  background: var(--color-accent);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 240ms var(--motion-ease);
  width: 100%;
  z-index: 2;
}

.home-work-card:nth-child(2) {
  margin-top: clamp(34px, 8vw, 92px);
}

.home-work-card:nth-child(3) .work-cover-slot {
  aspect-ratio: 4 / 4.7;
}

.home-work-card:nth-child(4) .work-cover-slot {
  aspect-ratio: 4 / 3.35;
}

.home-work-card:hover,
.home-work-card:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent), var(--color-line) 28%);
  box-shadow: var(--shadow-glass);
  transform: translateY(-5px);
  z-index: 2;
}

body[data-theme="tactical"] .home-work-card:hover,
body[data-theme="tactical"] .home-work-card:focus-visible,
body[data-theme="tactical"] .all-work-card:hover,
body[data-theme="tactical"] .all-work-card:focus-visible {
  border-color: rgba(239, 255, 0, 0.84);
  box-shadow: var(--shadow-glass);
}

body[data-theme="tactical"] .home-work-card:hover::before,
body[data-theme="tactical"] .home-work-card:focus-visible::before,
body[data-theme="tactical"] .all-work-card:hover::before,
body[data-theme="tactical"] .all-work-card:focus-visible::before,
body[data-theme="tactical"] .profile-card:hover::before {
  transform: scaleX(1);
}

.home-work-card.is-pressing {
  transform: translateY(-1px) scale(0.992);
}

.work-cover-slot {
  align-items: center;
  aspect-ratio: 4 / 3.8;
  background: #edf0f2;
  color: color-mix(in srgb, var(--color-text), transparent 42%);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

body[data-theme="tactical"] .work-cover-slot,
body[data-theme="tactical"] .all-work-cover-slot,
body[data-theme="tactical"] .portrait {
  background:
    linear-gradient(135deg, rgba(239, 255, 0, 0.18), transparent 42%),
    #111518;
  border-bottom: 1px solid rgba(244, 246, 246, 0.18);
}

body[data-theme="tactical"] .work-cover-slot::before,
body[data-theme="tactical"] .all-work-cover-slot::before,
body[data-theme="tactical"] .portrait::before {
  background:
    linear-gradient(rgba(8, 10, 11, 0.58), rgba(8, 10, 11, 0.58)),
    linear-gradient(rgba(244, 246, 246, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 246, 246, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  content: "";
  inset: 0;
  opacity: 0.72;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

body[data-theme="tactical"] .work-cover-slot img,
body[data-theme="tactical"] .all-work-cover-slot img {
  filter: saturate(1.02) contrast(1.02) brightness(0.96);
}

.work-cover-slot img,
.all-work-cover-slot img {
  display: block;
  height: 100%;
  object-fit: cover;
  transform: scale(1.025);
  transition: transform 760ms var(--motion-ease);
  width: 100%;
}

.work-cover-slot::after,
.all-work-cover-slot::after {
  content: none;
}

.home-work-card.is-visible .work-cover-slot img,
.all-work-card.is-visible .all-work-cover-slot img {
  transform: scale(1);
}

.work-copy {
  display: grid;
  gap: 9px;
  padding: 16px;
}

.work-copy h3 {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 560;
  line-height: 1.18;
  margin: 0;
}

.work-copy p {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.62;
  margin: 0;
}

.read-more {
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 620;
}

body[data-theme="tactical"] .read-more {
  border-left: 3px solid var(--color-accent);
  color: var(--color-text);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  padding-left: 9px;
  text-transform: uppercase;
}

.home-work-list {
  column-count: unset;
  display: grid;
  gap: clamp(28px, 4vw, 54px);
  padding-top: 4px;
}

.home-work-card,
.home-work-card:nth-child(2) {
  background: transparent;
  border: 0;
  border-radius: 0;
  break-inside: unset;
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  grid-template-columns: minmax(300px, 44%) minmax(0, 1fr);
  grid-template-rows: minmax(210px, 1fr);
  margin: 0;
  min-height: clamp(220px, 23vw, 330px);
  overflow: visible;
}

.home-work-card:nth-child(3) .work-cover-slot,
.home-work-card:nth-child(4) .work-cover-slot,
.work-cover-slot {
  aspect-ratio: auto;
  height: 100%;
}

.home-work-card:hover,
.home-work-card:focus-visible {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.home-work-card.reveal-item {
  filter: blur(6px);
  opacity: 0;
  transform: translateY(26px) scale(0.96);
  transition:
    filter 480ms ease-out,
    opacity 380ms ease-out,
    transform 560ms cubic-bezier(0.16, 1.24, 0.3, 1);
  transition-delay: 60ms;
}

.home-work-card.reveal-item.is-scroll-active {
  filter: blur(0);
  opacity: 1;
  transform: none;
}

.work-copy {
  align-content: center;
  gap: 11px;
  padding: clamp(8px, 1.2vw, 18px) 0;
}

.work-copy h3 {
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.12;
  max-width: 720px;
}

.work-copy p {
  font-size: 14px;
  max-width: 620px;
}

.read-more {
  margin-top: 4px;
}

body[data-theme="tactical"] .home-work-card {
  background: transparent;
  border: 0;
  clip-path: none;
}

body[data-theme="tactical"] .home-work-card::before {
  content: none;
}

body[data-theme="tactical"] .work-cover-slot {
  border: 1px solid rgba(244, 246, 246, 0.24);
}

body[data-theme="tactical"] .home-work-card:hover .work-cover-slot,
body[data-theme="tactical"] .home-work-card:focus-visible .work-cover-slot {
  border-color: var(--color-accent);
}

.all-work-section {
  border-top: 1px solid var(--color-line);
  margin-top: clamp(34px, 6vw, 68px);
  padding-top: clamp(24px, 4vw, 42px);
}

.all-work-carousel {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.carousel-button {
  align-items: center;
  background: var(--color-text);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-pill);
  color: var(--color-inverse);
  cursor: pointer;
  display: inline-flex;
  font-size: 30px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  transition:
    background 180ms var(--motion-ease),
    color 180ms var(--motion-ease),
    transform 180ms var(--motion-ease);
  width: 44px;
}

.carousel-button:hover,
.carousel-button:focus-visible {
  background: var(--color-accent);
  color: var(--color-on-strong);
  transform: translateY(-2px);
}

.all-work-grid {
  align-items: stretch;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 22px 2px 34px;
  scroll-padding-inline: 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.all-work-card {
  backdrop-filter: blur(20px) saturate(1.12);
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  display: grid;
  flex: 0 0 clamp(220px, 24vw, 292px);
  grid-template-rows: auto 1fr;
  min-height: 420px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  transition:
    border-color 220ms var(--motion-ease),
    box-shadow 220ms var(--motion-ease),
    transform 220ms var(--motion-ease);
}

.all-work-card.reveal-item {
  opacity: 0;
  transform: translateY(22px);
}

.all-work-card.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.all-work-card:hover,
.all-work-card:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent), var(--color-line) 35%);
  box-shadow: var(--shadow-soft);
  transform: translateY(-8px);
}

.all-work-card.is-pressing {
  transform: translateY(-3px) scale(0.99);
}

.all-work-cover-slot {
  align-items: center;
  aspect-ratio: 4 / 5.15;
  background: #edf0f2;
  color: color-mix(in srgb, var(--color-text), transparent 48%);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.all-work-copy {
  display: grid;
  gap: 8px;
  padding: 13px;
}

.all-work-copy h3,
.all-work-copy p {
  margin: 0;
}

.all-work-copy h3 {
  font-size: 15px;
  font-weight: 560;
  line-height: 1.22;
}

.all-work-copy p {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.55;
}

body:not([data-theme="tactical"]) .carousel-button {
  display: none;
}

body:not([data-theme="tactical"]) .all-work-carousel {
  display: block;
}

body:not([data-theme="tactical"]) .all-work-grid {
  gap: 0;
  justify-content: center;
  overflow: visible;
  padding: 22px clamp(70px, 10vw, 150px) 34px;
  scroll-snap-type: none;
}

body:not([data-theme="tactical"]) .all-work-card {
  --stack-rotate: 0deg;
  --stack-scale: 1;
  --stack-x: 0px;
  --stack-y: 0px;
  --stack-z: 1;
  flex: 0 0 clamp(158px, 15vw, 206px);
  margin-left: clamp(-92px, -6.4vw, -58px);
  min-height: 248px;
  scroll-snap-align: none;
  transform: translateX(var(--stack-x)) translateY(var(--stack-y)) rotate(var(--stack-rotate)) scale(var(--stack-scale));
  transition:
    border-color 220ms var(--motion-ease),
    box-shadow 220ms var(--motion-ease),
    opacity 220ms var(--motion-ease),
    transform 420ms var(--motion-ease);
  z-index: var(--stack-z);
}

body:not([data-theme="tactical"]) .all-work-card:first-child {
  margin-left: 0;
}

body:not([data-theme="tactical"]) .all-work-card:nth-child(1) {
  --stack-rotate: -3.4deg;
  --stack-y: 6px;
  --stack-z: 1;
}

body:not([data-theme="tactical"]) .all-work-card:nth-child(2) {
  --stack-rotate: 1.1deg;
  --stack-y: -2px;
  --stack-z: 2;
}

body:not([data-theme="tactical"]) .all-work-card:nth-child(3) {
  --stack-rotate: -1.2deg;
  --stack-y: 5px;
  --stack-z: 3;
}

body:not([data-theme="tactical"]) .all-work-card:nth-child(4) {
  --stack-rotate: 2.5deg;
  --stack-y: -4px;
  --stack-z: 4;
}

body:not([data-theme="tactical"]) .all-work-card:nth-child(5) {
  --stack-rotate: -0.8deg;
  --stack-y: 3px;
  --stack-z: 5;
}

body:not([data-theme="tactical"]) .all-work-card:nth-child(6) {
  --stack-rotate: 1.8deg;
  --stack-y: -1px;
  --stack-z: 6;
}

body:not([data-theme="tactical"]) .all-work-card.reveal-item {
  opacity: 0;
  transform: translateX(var(--stack-x)) translateY(calc(var(--stack-y) + 22px)) rotate(var(--stack-rotate)) scale(var(--stack-scale));
}

body:not([data-theme="tactical"]) .all-work-card.reveal-item.is-visible {
  opacity: 1;
  transform: translateX(var(--stack-x)) translateY(var(--stack-y)) rotate(var(--stack-rotate)) scale(var(--stack-scale));
}

body:not([data-theme="tactical"]) .all-work-card:hover,
body:not([data-theme="tactical"]) .all-work-card:focus-visible {
  --stack-rotate: 0deg;
  --stack-scale: 1.02;
  --stack-y: -14px;
  --stack-z: 12;
  transform: translateX(var(--stack-x)) translateY(var(--stack-y)) rotate(var(--stack-rotate)) scale(var(--stack-scale));
}

body:not([data-theme="tactical"]) .all-work-card.is-pressing {
  --stack-rotate: 0deg;
  --stack-scale: 0.985;
  --stack-y: -4px;
  transform: translateX(var(--stack-x)) translateY(var(--stack-y)) rotate(var(--stack-rotate)) scale(var(--stack-scale));
}

body:not([data-theme="tactical"]) .all-work-grid.is-stack-active .all-work-card {
  opacity: 0.94;
}

body:not([data-theme="tactical"]) .all-work-grid.is-stack-active .all-work-card.is-before-active {
  --stack-x: clamp(-84px, -5.4vw, -48px);
  --stack-scale: 0.98;
}

body:not([data-theme="tactical"]) .all-work-grid.is-stack-active .all-work-card.is-after-active {
  --stack-x: clamp(76px, 5.8vw, 102px);
  --stack-scale: 0.98;
}

body:not([data-theme="tactical"]) .all-work-grid.is-stack-active .all-work-card.is-active-card {
  --stack-rotate: 0deg;
  --stack-scale: 1.16;
  --stack-y: -18px;
  --stack-z: 20;
  border-color: color-mix(in srgb, var(--color-accent), var(--color-line) 30%);
  box-shadow: 0 22px 60px rgba(23, 23, 23, 0.12);
  opacity: 1;
}

body:not([data-theme="tactical"]) .all-work-cover-slot {
  aspect-ratio: 4 / 3;
}

body[data-theme="tactical"] .all-work-section {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(243, 243, 240, 0.22);
  color: var(--color-text);
  margin-left: 0;
  margin-right: 0;
  padding: clamp(24px, 4vw, 42px) 0 0;
  position: relative;
}

body[data-theme="tactical"] .all-work-section::before {
  content: none;
}

body[data-theme="tactical"] .all-work-section::after {
  content: none;
}

body[data-theme="tactical"] .all-work-section .section-heading {
  border-bottom: 1px solid rgba(243, 243, 240, 0.22);
  color: var(--color-text);
  margin-bottom: 18px;
  padding: 0 0 14px;
}

body[data-theme="tactical"] .all-work-section .section-heading::after {
  content: none;
}

body[data-theme="tactical"] .all-work-section .section-kicker {
  color: var(--color-accent);
}

body[data-theme="tactical"] .all-work-section h2 {
  color: var(--color-text);
  font-size: clamp(23px, 2.8vw, 34px);
  letter-spacing: 0;
  line-height: 1.12;
}

body[data-theme="tactical"] .all-work-section h2::after {
  content: none;
}

body[data-theme="tactical"] .all-work-section .section-heading p {
  color: var(--color-muted);
  font-weight: 400;
}

body[data-theme="tactical"] .all-work-carousel {
  align-items: center;
  display: grid;
  gap: 4px;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
}

body[data-theme="tactical"] .carousel-button {
  position: absolute;
  background:
    center / contain no-repeat url("assets/carousel-arrow.png"),
    transparent;
  border: 0;
  border-radius: 0;
  clip-path: none;
  color: transparent;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  height: 64px;
  position: static;
  transform: none;
  width: 64px;
  z-index: 2;
}

body[data-theme="tactical"] .carousel-button[data-carousel-direction="-1"] {
  left: auto;
  transform: translateX(46px) rotate(180deg);
}

body[data-theme="tactical"] .carousel-button[data-carousel-direction="1"] {
  right: auto;
  transform: translateX(-46px);
}

body[data-theme="tactical"] .carousel-button:hover,
body[data-theme="tactical"] .carousel-button:focus-visible {
  background:
    center / contain no-repeat url("assets/carousel-arrow.png"),
    transparent;
  color: transparent;
  transform: translate(-46px, -2px);
}

body[data-theme="tactical"] .carousel-button[data-carousel-direction="-1"]:hover,
body[data-theme="tactical"] .carousel-button[data-carousel-direction="-1"]:focus-visible {
  transform: translate(46px, -2px) rotate(180deg);
}

body[data-theme="tactical"] .all-work-grid {
  gap: 10px;
  padding-left: 4px;
  padding-bottom: 20px;
  padding-right: 4px;
  mask-image: linear-gradient(90deg, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
  scrollbar-width: none;
}

body[data-theme="tactical"] .all-work-grid::-webkit-scrollbar {
  display: none;
}

body[data-theme="tactical"] .all-work-card {
  background: #050505;
  border-color: rgba(5, 5, 5, 0.96);
  box-shadow: none;
  clip-path: none;
  flex-basis: clamp(240px, 17vw, 272px);
  min-height: clamp(500px, 41vw, 620px);
}

body[data-theme="tactical"] .all-work-card::before {
  background: var(--color-accent);
  height: 6px;
  left: auto;
  right: 0;
  transform: none;
  width: 8px;
}

body[data-theme="tactical"] .all-work-card:hover,
body[data-theme="tactical"] .all-work-card:focus-visible {
  border-color: #050505;
  box-shadow: 0 14px 0 rgba(5, 5, 5, 0.16);
  transform: translateY(-10px);
}

body[data-theme="tactical"] .all-work-cover-slot {
  aspect-ratio: 4 / 5.4;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(5, 5, 5, 0.18)),
    var(--cover-bg);
  background-size:
    32px 32px,
    32px 32px,
    auto,
    auto;
  border-bottom: 0;
  opacity: 0.92;
}

body[data-theme="tactical"] .all-work-cover-slot::before {
  background:
    linear-gradient(to top, rgba(5, 5, 5, 0.58), transparent 44%),
    radial-gradient(circle at 68% 24%, rgba(5, 5, 5, 0.15), transparent 24%);
  background-size: auto;
  opacity: 1;
}

body[data-theme="tactical"] .all-work-cover-slot img {
  filter: saturate(1.04) contrast(1.02) brightness(0.96);
  mix-blend-mode: normal;
  opacity: 1;
}

body[data-theme="tactical"] .all-work-copy {
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.92), #050505);
  color: #f3f3f0;
  gap: 8px;
  min-height: 132px;
  padding: 18px 20px 20px;
}

body[data-theme="tactical"] .all-work-copy .card-meta {
  color: var(--color-accent);
  font-size: 12px;
  letter-spacing: 0.12em;
}

body[data-theme="tactical"] .all-work-copy h3 {
  color: #f3f3f0;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 860;
  line-height: 1.08;
}

body[data-theme="tactical"] .all-work-copy p {
  color: rgba(243, 243, 240, 0.58);
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  background: var(--color-surface-soft);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
}

.about-page {
  margin: 0 auto;
  max-width: 1180px;
}

.page-title {
  margin-bottom: 34px;
}

.page-title h1 {
  font-size: clamp(32px, 4.5vw, 54px);
  font-weight: 560;
  line-height: 1.06;
  margin: 12px 0;
}

.page-title p {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 720px;
}

.case-page {
  margin: 0 auto;
  max-width: 1240px;
}

.case-utility {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.ghost-link {
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  min-height: 38px;
  padding: 0 14px;
}

.case-back-link {
  align-items: center;
  color: var(--color-muted);
  display: inline-flex;
  height: 40px;
  justify-content: flex-start;
  transition:
    color 180ms var(--motion-ease),
    transform 180ms var(--motion-ease);
  width: 40px;
}

.case-back-link svg {
  display: block;
  fill: none;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 24px;
}

.case-back-link:hover,
.case-back-link:focus-visible {
  color: var(--color-text);
  transform: translateX(-3px);
}

.case-hero {
  border-bottom: 1px solid var(--color-line);
  margin-bottom: clamp(34px, 5vw, 62px);
  padding-bottom: clamp(28px, 5vw, 56px);
}

body[data-theme="tactical"] .case-page,
body[data-theme="tactical"] .about-page {
  max-width: 1360px;
}

body[data-theme="tactical"] .case-hero {
  border-bottom-color: rgba(239, 255, 0, 0.48);
  position: relative;
}

body[data-theme="tactical"] .case-hero::after {
  background: var(--color-accent);
  bottom: -1px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: min(34vw, 420px);
}

.case-hero h1 {
  font-size: clamp(34px, 5.2vw, 64px);
  font-weight: 560;
  line-height: 1.08;
  margin: 12px 0 18px;
  max-width: 920px;
}

.case-hero p {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 780px;
}

.case-layout {
  align-items: start;
  display: grid;
  gap: clamp(34px, 5vw, 72px);
  grid-template-columns: 210px minmax(0, 1fr);
}

.case-nav {
  display: grid;
  gap: 22px;
  padding: 2px 0 2px 34px;
  position: sticky;
  top: calc(var(--header-height) + 18px);
  position: sticky;
}

body[data-theme="tactical"] .case-nav {
  gap: 18px;
  padding-left: 26px;
}

.case-nav::before {
  background: var(--color-line);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 2px;
}

body[data-theme="tactical"] .case-nav::before {
  background: rgba(244, 246, 246, 0.2);
  width: 1px;
}

.case-nav button {
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--color-muted), white 22%);
  cursor: pointer;
  font-size: 20px;
  font-weight: 520;
  line-height: 1.2;
  padding: 0;
  position: relative;
  text-align: left;
  transition:
    color 180ms var(--motion-ease),
    transform 180ms var(--motion-ease);
}

body[data-theme="tactical"] .case-nav button,
body[data-theme="tactical"] .case-nav a {
  color: var(--color-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  text-transform: uppercase;
}

.case-nav button.is-active {
  color: var(--color-text);
}

body[data-theme="tactical"] .case-nav button.is-active {
  color: var(--color-accent);
}

.case-nav button.is-active::before {
  background: var(--color-text);
  content: "";
  height: 24px;
  left: -35px;
  position: absolute;
  top: 0;
  width: 3px;
}

body[data-theme="tactical"] .case-nav button.is-active::before {
  background: var(--color-accent);
  height: 100%;
  left: -27px;
  width: 3px;
}

.case-nav button:hover,
.case-nav button:focus-visible {
  color: var(--color-text);
  transform: translateX(2px);
}

.case-nav a {
  color: color-mix(in srgb, var(--color-muted), white 16%);
  font-size: 18px;
  font-weight: 520;
  margin-top: 10px;
}

body[data-theme="tactical"] .case-nav {
  counter-reset: case-section;
  --case-index-space: 34px;
  --case-marker-gap: 18px;
  --case-marker-width: 64px;
  gap: 20px;
  padding-left: calc(var(--case-marker-width) + var(--case-marker-gap) + var(--case-index-space));
}

body[data-theme="tactical"] .case-nav::before {
  content: none;
}

body[data-theme="tactical"] .case-nav button {
  --nav-effect: 0;
  color: color-mix(in srgb, var(--color-accent) calc(var(--nav-effect) * 100%), var(--color-muted));
  counter-increment: case-section;
  font-size: 13px;
  line-height: 1.3;
  transform: translateX(calc(var(--nav-effect) * 24px));
  transition:
    color 120ms linear,
    transform 120ms linear;
}

body[data-theme="tactical"] .case-nav button::before {
  background: color-mix(in srgb, var(--color-accent) calc(var(--nav-effect) * 100%), rgba(243, 243, 240, 0.32));
  content: "";
  height: 1px;
  left: calc(-1 * (var(--case-marker-width) + var(--case-marker-gap) + var(--case-index-space)));
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scaleX(calc(0.72 + var(--nav-effect) * 0.48));
  transform-origin: left center;
  width: var(--case-marker-width);
}

body[data-theme="tactical"] .case-nav button.is-active::before {
  background: var(--color-accent);
  height: 2px;
  left: calc(-1 * (var(--case-marker-width) + var(--case-marker-gap) + var(--case-index-space)));
  top: 50%;
  transform: translateY(-50%) scaleX(1.2);
  transform-origin: left center;
  width: var(--case-marker-width);
}

body[data-theme="tactical"] .case-nav button::after {
  color: color-mix(in srgb, var(--color-accent) calc(var(--nav-effect) * 100%), var(--color-muted));
  content: counter(case-section, decimal-leading-zero);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  left: calc(-1 * var(--case-index-space));
  letter-spacing: 0.08em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

body[data-theme="tactical"] .case-nav button.is-active,
body[data-theme="tactical"] .case-nav button:hover,
body[data-theme="tactical"] .case-nav button:focus-visible {
  color: color-mix(in srgb, var(--color-accent) calc(var(--nav-effect) * 100%), var(--color-muted));
  transform: translateX(calc(var(--nav-effect) * 24px));
}

body[data-theme="tactical"] .case-nav button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 5px;
}

body[data-theme="tactical"] .case-nav a {
  align-self: start;
  display: inline-flex;
  gap: 8px;
  justify-self: start;
  margin-top: 4px;
  padding: 0;
}

.case-content {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  min-width: 0;
}

.project-meta-grid {
  border-bottom: 1px solid var(--color-line);
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 18px 0;
}

body[data-theme="tactical"] .project-meta-grid {
  background: rgba(8, 10, 11, 0.58);
  border-color: rgba(244, 246, 246, 0.22);
  border-left: 3px solid var(--color-accent);
  padding: 18px 18px 18px 22px;
}

.project-meta-grid div {
  display: grid;
  gap: 8px;
}

.project-meta-grid span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-meta-grid strong {
  font-size: 14px;
  font-weight: 560;
  line-height: 1.35;
}

.project-page-gallery {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  margin-top: 18px;
}

.project-page-frame {
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  box-shadow: var(--shadow-glass);
  margin: 0;
  overflow: hidden;
}

body[data-theme="tactical"] .project-page-frame {
  border-color: rgba(244, 246, 246, 0.24);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(239, 255, 0, 0.14);
}

.project-page-frame img {
  display: block;
  height: auto;
  width: 100%;
}

.content-section {
  background: transparent;
  border-top: 1px solid var(--color-line);
  padding: clamp(28px, 5vw, 56px) 0 0;
  scroll-margin-top: calc(var(--header-height) + 24px);
}

body[data-theme="tactical"] .content-section {
  border-top-color: rgba(244, 246, 246, 0.22);
  position: relative;
}

body[data-theme="tactical"] .content-section::before {
  background: var(--color-accent);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: -1px;
  width: 76px;
}

.content-section h2 {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 560;
  margin: 8px 0 16px;
}

.content-section p,
.content-section li {
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.82;
  max-width: 760px;
}

.case-project-nav {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-project-link {
  align-items: center;
  background: var(--color-text);
  border-radius: var(--radius-card);
  color: var(--color-inverse);
  display: flex;
  justify-content: space-between;
  padding: 22px;
  text-decoration: none;
}

.case-project-link--previous {
  flex-direction: row-reverse;
}

body[data-theme="tactical"] .case-project-link {
  background: var(--color-accent);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  color: #050505;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  text-transform: uppercase;
}

.about-layout {
  align-items: start;
  display: grid;
  gap: clamp(24px, 5vw, 72px);
  grid-template-columns: minmax(280px, 0.36fr) minmax(0, 1fr);
}

.profile-card {
  backdrop-filter: blur(20px) saturate(1.12);
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-glass);
  padding: 22px;
  position: sticky;
  top: calc(var(--header-height) + 18px);
}

.portrait {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-accent), transparent 78%), transparent 58%),
    var(--glass-surface-strong);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}

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

body[data-theme="tactical"] .portrait {
  border-radius: 0;
}

.profile-card p {
  color: var(--color-muted);
  line-height: 1.72;
}

.about-stack {
  display: grid;
  gap: 18px;
}

.timeline {
  display: grid;
  gap: 14px;
}

.timeline-item {
  border-left: 2px solid var(--color-line);
  padding-left: 18px;
}

body[data-theme="tactical"] .timeline-item {
  border-left-color: var(--color-accent);
}

.timeline-item h3 {
  margin: 0 0 6px;
}

.site-footer {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(28px, 5vw, 72px) clamp(18px, 4vw, 56px) 0;
  padding: 28px 0 34px;
}

body[data-theme="tactical"] .site-footer {
  border-top-color: rgba(239, 255, 0, 0.48);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.site-footer div {
  display: grid;
  gap: 8px;
}

.site-footer span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.site-footer a,
.site-footer p {
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.site-footer a {
  width: fit-content;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-accent);
}

@media (max-width: 980px) {
  body[data-theme="hmi"] .hmi-home-stage {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr);
    min-height: 0;
  }

  body[data-theme="hmi"] .hmi-center-scene {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 420px;
  }

  body[data-theme="hmi"] .hmi-left-rail,
  body[data-theme="hmi"] .hmi-right-rail {
    align-content: start;
  }

  body[data-theme="hmi"] .hmi-flipdeck {
    min-height: 360px;
  }

  body[data-theme="hmi"] .hmi-vehicle-ghost {
    height: 300px;
  }

  .site-header {
    grid-template-columns: 1fr;
    padding-bottom: 14px;
    padding-top: 14px;
  }

  .primary-nav,
  .header-actions,
  .mode-controls {
    justify-content: flex-start;
  }

  .header-actions,
  .mode-controls {
    flex-wrap: wrap;
  }

  .home-page,
  .case-layout,
  .about-layout {
    grid-template-columns: 1fr;
  }

  .home-work-list {
    column-count: 1;
  }

  .home-work-card:nth-child(2) {
    margin-top: 0;
  }

  .all-work-grid {
    flex-wrap: nowrap;
    padding-left: 0;
    padding-right: 0;
  }

  .all-work-card {
    flex-basis: clamp(220px, 48vw, 290px);
    margin-left: 0;
  }

  body:not([data-theme="tactical"]) .all-work-grid {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }

  body:not([data-theme="tactical"]) .all-work-card {
    flex-basis: clamp(148px, 31vw, 190px);
    margin-left: clamp(-20px, -2vw, -12px);
  }

  body:not([data-theme="tactical"]) .all-work-grid.is-stack-active .all-work-card.is-before-active {
    --stack-x: -22px;
  }

  body:not([data-theme="tactical"]) .all-work-grid.is-stack-active .all-work-card.is-after-active {
    --stack-x: 24px;
  }

  .case-nav,
  .profile-card {
    position: static;
  }

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

  body[data-theme="tactical"] .case-nav {
    --case-index-space: 28px;
    --case-marker-gap: 12px;
    --case-marker-width: 42px;
    gap: 14px;
    grid-template-columns: 1fr;
    padding-left: calc(var(--case-marker-width) + var(--case-marker-gap) + var(--case-index-space));
  }
}

@media (max-width: 680px) {
  body[data-theme="hmi"] .home-page {
    padding-top: 20px;
  }

  body[data-theme="hmi"] .hmi-home-stage {
    grid-template-columns: 1fr;
  }

  body[data-theme="hmi"] .hmi-center-scene {
    grid-column: auto;
    min-height: 360px;
    padding: 18px 0;
  }

  body[data-theme="hmi"] .hmi-mode-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  body[data-theme="hmi"] .hmi-flipdeck {
    min-height: 330px;
  }

  .page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .case-nav {
    grid-template-columns: 1fr;
  }

  .case-project-nav {
    grid-template-columns: 1fr;
  }

  .all-work-card {
    flex-basis: clamp(220px, 78vw, 300px);
    margin-left: 0;
  }

  body:not([data-theme="tactical"]) .all-work-card {
    flex-basis: calc(50% + 12px);
    margin-left: -18px;
  }

  body:not([data-theme="tactical"]) .all-work-grid.is-stack-active .all-work-card.is-before-active {
    --stack-x: -14px;
  }

  body:not([data-theme="tactical"]) .all-work-grid.is-stack-active .all-work-card.is-after-active {
    --stack-x: 16px;
  }

  .home-page {
    padding-top: 72px;
  }

  .home-work-list {
    gap: 34px;
  }

  .home-work-card,
  .home-work-card:nth-child(2) {
    gap: 14px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }

  .work-cover-slot,
  .home-work-card:nth-child(3) .work-cover-slot,
  .home-work-card:nth-child(4) .work-cover-slot {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .work-copy {
    padding: 4px 0 0;
  }

  .work-copy h3 {
    font-size: clamp(22px, 7vw, 30px);
  }

  body[data-theme="tactical"] .home-page {
    padding-top: 20px;
  }

  body[data-theme="tactical"] .tactical-hero-stage {
    height: calc(100svh - var(--header-height) - 150px);
    min-height: 420px;
  }

  .tactical-word--domain-main { left: 2%; top: 11%; }
  .tactical-word--domain-cn { left: 8%; top: 30%; }
  .tactical-word--game { left: 54%; top: 8%; }
  .tactical-word--mobile { left: 44%; top: 29%; }
  .tactical-word--ai { left: 70%; top: 44%; }
  .tactical-word--product { left: 22%; top: 42%; }
  .tactical-word--ui { left: 0; top: 62%; }
  .tactical-word--game-interaction { left: 56%; top: 70%; }
  .tactical-word--architecture { left: 0; top: 49%; }
  .tactical-word--prototype { left: 40%; top: 57%; }
  .tactical-word--interaction { left: 10%; top: 53%; }
  .tactical-word--ux { left: 70%; top: 24%; }
  .tactical-word--service { left: 2%; top: 88%; }
  .tactical-word--proto-cn { left: 38%; top: 18%; }
  .tactical-word--frontend { left: 72%; top: 86%; }

  .tactical-annotation {
    font-size: 10px;
    gap: 5px;
    line-height: 1.5;
    max-width: 48vw;
  }

  .tactical-annotation--domain {
    left: 0;
    top: 8%;
  }

  .tactical-annotation--principle {
    right: 0;
    top: 49%;
  }

  .tactical-annotation--skill {
    bottom: 7%;
    left: 0;
  }

  .intro-mark {
    height: 36px;
    margin-top: 0;
    width: 36px;
  }

  .intro-statement {
    font-size: clamp(25px, 8vw, 40px);
  }

  body[data-theme="tactical"] .intro-statement {
    font-size: clamp(25px, 8vw, 38px);
    line-height: 1.12;
  }

  .all-work-carousel,
  body[data-theme="tactical"] .all-work-carousel {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .carousel-button,
  body[data-theme="tactical"] .carousel-button {
    height: 40px;
    width: 40px;
  }

  body[data-theme="tactical"] .all-work-section h2 {
    font-size: clamp(23px, 8vw, 34px);
  }

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

  .site-footer {
    grid-template-columns: 1fr;
  }
}

@media (pointer: coarse) {
  .cursor-thought-lines {
    display: none !important;
  }
}

@media (max-width: 820px) {
  body[data-theme="hmi"] .hmi-home-stage {
    align-items: stretch;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body[data-theme="hmi"] .hmi-left-rail {
    grid-template-columns: 1fr 1fr;
  }

  body[data-theme="hmi"] .hmi-cockpit-card {
    padding: 22px;
  }

  body[data-theme="hmi"] .hmi-profile-card h1 {
    font-size: 30px;
    margin: 16px 0 12px;
  }

  body[data-theme="hmi"] .hmi-flipdeck {
    min-height: 340px;
  }
}

@media (max-width: 560px) {
  body[data-theme="hmi"] .hmi-left-rail {
    grid-template-columns: 1fr;
  }

  body[data-theme="hmi"] .hmi-vehicle-ghost {
    height: 230px;
  }

  body[data-theme="hmi"] .hmi-flip-card {
    border-radius: 22px;
    width: 100%;
  }

  body[data-theme="hmi"] .hmi-flip-card h2 {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-opening {
    overflow: auto;
  }

  body.is-opening::before,
  body.is-opening::after {
    content: none;
  }

  .reveal-item {
    clip-path: none !important;
    opacity: 1;
    transform: none;
  }

  .work-cover-slot::after,
  .all-work-cover-slot::after {
    content: none;
  }

  .cursor-thought-lines {
    display: none !important;
  }

  .tactical-glass-frame,
  .tactical-guide-line,
  .hmi-light-field::before,
  .hmi-light-field::after,
  .theme-transition-overlay,
  body.is-theme-shifting .site-header,
  body.is-theme-shifting main,
  body.is-theme-shifting .site-footer {
    animation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes hmi-aurora-drift {
  0% { opacity: 0.46; transform: translate3d(-12%, 9%, 0) rotate(-9deg) scale(1.04); }
  45% { opacity: 0.92; transform: translate3d(8%, -6%, 0) rotate(4deg) scale(1.16); }
  100% { opacity: 0.58; transform: translate3d(18%, 12%, 0) rotate(11deg) scale(1.06); }
}

@keyframes hmi-aurora-wave {
  0% { opacity: 0.32; transform: translate3d(14%, -12%, 0) skewX(-8deg) scale(0.92); }
  52% { opacity: 0.76; transform: translate3d(-6%, 7%, 0) skewX(7deg) scale(1.16); }
  100% { opacity: 0.38; transform: translate3d(-16%, -2%, 0) skewX(-4deg) scale(1.04); }
}

@keyframes theme-content-shift {
  0%,
  100% {
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }

  22% {
    filter: blur(7px) contrast(1.08);
    transform: translate3d(-12px, 0, 0);
  }

  48% {
    filter: blur(3px) contrast(1.18);
    transform: translate3d(16px, -2px, 0);
  }

  72% {
    filter: blur(1px) contrast(1.05);
    transform: translate3d(-5px, 0, 0);
  }
}

@keyframes theme-transition-wash {
  0%,
  100% {
    backdrop-filter: blur(0);
    opacity: 0;
    transform: translateX(0);
  }

  20% {
    backdrop-filter: blur(10px);
    opacity: 0.38;
    transform: translateX(-8%);
  }

  48% {
    backdrop-filter: blur(5px);
    opacity: 0.52;
    transform: translateX(7%);
  }

  72% {
    backdrop-filter: blur(2px);
    opacity: 0.2;
    transform: translateX(-3%);
  }
}

@keyframes intro-character-enter {
  0% {
    filter: blur(6px);
    opacity: 0;
    transform: translate3d(0, 0.22em, 0);
  }

  100% {
    filter: blur(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes intro-cursor-blink {
  0%,
  42% {
    opacity: 1;
  }

  43%,
  100% {
    opacity: 0;
  }
}

@keyframes tactical-glass-drift {
  0%,
  100% {
    opacity: 0.48;
    transform: translate3d(0, 0, 0);
  }

  38% {
    opacity: 1;
    transform: translate3d(14px, -10px, 0);
  }

  52% {
    opacity: 0.62;
    transform: translate3d(-10px, 8px, 0);
  }
}

@keyframes tactical-guide-pulse {
  0%,
  100% {
    opacity: 0.24;
    stroke-width: 1.25;
    transform: translate3d(0, 0, 0);
  }

  38% {
    opacity: 0.9;
    stroke-width: 1.8;
    transform: translate3d(12px, -8px, 0);
  }

  52% {
    opacity: 0.42;
    stroke-width: 1.25;
    transform: translate3d(-8px, 7px, 0);
  }
}

@keyframes opening-curtain {
  0% {
    transform: scaleY(1);
  }

  72% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(0);
  }
}

@keyframes opening-mark {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px));
  }

  24%,
  62% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 10px));
  }
}

@keyframes header-enter {
  0% {
    opacity: 0;
    transform: translateY(-14px);
  }

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