@font-face {
  font-family: "Terminal Pixel";
  src: url("../../assets/fonts/JasonTerminalPixel-Regular.woff2?v=20261021.4") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Fusion Pixel SC";
  src: url("../../assets/fonts/fusion-pixel-12px-monospaced-zh_hans.otf.woff2?v=20261021.4") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* ASCII always stays in the existing English fonts. */
  unicode-range: U+100-2013,U+2015-2018,U+201A-2025,U+2027-3000,U+3003-4E0D,U+4E0F-4E12,U+4E14-4E29,U+4E2B-4E2C,U+4E2E-4E3A,U+4E3C-4E8D,U+4E8F-4ECA,U+4ECC-4EF5,U+4EF7-4EFC,U+4EFE-4F19,U+4F1B-4F5B,U+4F5D-4F7E,U+4F80-4FE0,U+4FE2-504E,U+5050-50CE,U+50D0-5172,U+5175-5184,U+5186-5216,U+5218-522A,U+522C-529E,U+52A1-5315,U+5317-5338,U+533A-5354,U+5356-539E,U+53A0-53E2,U+53E4-53EE,U+53F0-540C,U+540F-54C0,U+54C2-56DD,U+56DF-56FD,U+56FF-5727,U+5729-572F,U+5731-574E,U+5750-5756,U+5758-578A,U+578C-58EF,U+58F1-590C,U+590E-5926,U+5928-5930,U+5932-597C,U+597E-5BA3,U+5BA5-5BB8,U+5BBA-5BF8,U+5BFA-5C0E,U+5C10-5E37,U+5E39-5E93,U+5E95-5EFF,U+5F01-5F14,U+5F16-5F54,U+5F56-6061,U+6063-606E,U+6070-60C4,U+60C6-620E,U+6210-6210,U+6212-6252,U+6254-62E8,U+62EA-6308,U+630A-635E,U+6360-6361,U+6363-63A7,U+63A9-63CF,U+63D1-641B,U+641D-6573,U+6575-6586,U+6588-65DF,U+65E1-65F5,U+65F7-660D,U+660F-663D,U+663F-6681,U+6683-66F1,U+66F3-66FF,U+6701-672B,U+672D-674F,U+6751-6764,U+6766-677E,U+6780-67E4,U+67E6-6806,U+6808-6847,U+6849-6862,U+6864-6B62,U+6B65-6CD4,U+6CD6-6E1F,U+6E21-6E37,U+6E39-6E8F,U+6E91-7405,U+7407-7433,U+7435-7527,U+7529-754B,U+754D-7683,U+7685-76ED,U+76EF-770A,U+770C-7939,U+793B-7A96,U+7A98-7AD5,U+7AD7-7AD8,U+7ADA-7B7F,U+7B81-7C7A,U+7C7C-7CFA,U+7CFC-7D1F,U+7D21-7D21,U+7D23-7EBE,U+7EC0-7EC5,U+7EC7-7F50,U+7F52-7F6D,U+7F6F-7F71,U+7F73-8004,U+8006-8053,U+8055-80FC,U+80FE-834F,U+8351-83DB,U+83DD-85CE,U+85D0-8867,U+8869-89C5,U+89C7-89C8,U+89CA-89FF,U+8A01-8BB7,U+8BB9-8BBD,U+8BBF-8BC0,U+8BC2-8BD4,U+8BD6-8BE5,U+8BE7-8BEC,U+8BEE-8BF6,U+8BF8-8D24,U+8D26-8D43,U+8D45-8DA2,U+8DA4-8EAA,U+8EAC-8F6B,U+8F6D-8F7C,U+8F7E-8F90,U+8F92-8FD3,U+8FD5-8FD7,U+8FD9-9008,U+900A-9052,U+9054-914C,U+914E-91CC,U+91CE-94A1,U+94A3-95EC,U+95EE-968F,U+9691-96C5,U+96C7-9761,U+9763-9874,U+9876-9878,U+987A-9890,U+9892-98CD,U+98CF-9A8B,U+9A8D-FF0B,U+FF0D-10FFFF;
}

@font-face {
  font-family: "Fusion Pixel SC";
  src: url("../../assets/fonts/fusion-pixel-core.woff2?v=20261021.4") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+2014,U+2019,U+2026,U+3001-3002,U+4E0E,U+4E13,U+4E2A,U+4E2D,U+4E3B,U+4E8E,U+4ECB,U+4EF6,U+4EFD,U+4F1A,U+4F5C,U+4F7F,U+4FE1,U+504F,U+50CF,U+5173-5174,U+5185,U+5217,U+522B,U+529F-52A0,U+5316,U+5339,U+5355,U+539F,U+53E3,U+53EF,U+540D-540E,U+54C1,U+56DE,U+56FE,U+5728,U+5730,U+574F,U+5757,U+578B,U+58F0,U+590D,U+5927,U+5931,U+597D,U+5BA4,U+5BB9,U+5BF9,U+5C0F,U+5E38,U+5E94,U+5F00,U+5F15,U+5F55,U+6062,U+606F,U+60C5,U+620F,U+6211,U+6253,U+62E9,U+6309,U+635F,U+6362,U+63A8,U+63D0,U+641C,U+6574,U+6587,U+65E0,U+65F6,U+660E,U+663E,U+6682,U+66F2,U+6700,U+672C,U+6750,U+6765,U+677F,U+67E5,U+6807,U+6848,U+6863,U+6B63-6B64,U+6CD5,U+6E20,U+6E38,U+6E90,U+7406,U+7434,U+7528,U+754C,U+7684,U+76EE,U+770B,U+793A,U+7A97,U+7AD6,U+7AD9,U+7B80,U+7C7B,U+7CFB,U+7D20,U+7D22,U+7EBF,U+7EC6,U+7F51,U+7F6E,U+7F72,U+8005,U+8054,U+80FD,U+8350,U+83DC,U+85CF,U+8868,U+89C6,U+89C9,U+8A00,U+8BB8,U+8BBE,U+8BC1,U+8BD5,U+8BE6,U+8BED,U+8BF7,U+8D25,U+8D44,U+8DA3,U+8EAB,U+8F6C,U+8F7D,U+8F91,U+8FD4,U+8FD8,U+9009,U+9053,U+914D,U+91CD,U+94A2,U+95ED,U+9690,U+96C6,U+9762,U+9875,U+9879,U+9891,U+98CE,U+9A8C,U+FF0C;
}

@font-face {
  font-family: "Local Cascadia Mono";
  src: url("../../assets/fonts/CascadiaMono.woff2?v=20261021.4") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Local Consolas";
  src: url("../../assets/fonts/Consolas.woff2?v=20261021.4") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --mouse-x: 50vw;
  --mouse-y: 50vh;
  --ink: #f5f1c6;
  --violet: #f19acb;
  --cyan: #89ecff;
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

::selection {
  color: inherit;
  background: transparent;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at center, #080f26 0%, #070d22 31%, #04091a 67%, #01030d 100%);
  font-family: "Local Cascadia Mono", "Fusion Pixel SC", "Cascadia Mono", Consolas, monospace;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: 0.28;
  background-image:
    radial-gradient(circle, rgba(170, 211, 255, 0.85) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(234, 176, 255, 0.5) 0 1px, transparent 1.5px);
  background-position: 8% 18%, 63% 71%;
  background-size: 83px 91px, 127px 119px;
}

body::after {
  z-index: -2;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(101, 217, 255, 0.1), transparent 21rem);
  mix-blend-mode: screen;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.cursor-aura {
  position: fixed;
  top: var(--mouse-y);
  left: var(--mouse-x);
  z-index: 3;
  width: 17rem;
  height: 17rem;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.65;
  background: radial-gradient(circle, rgba(114, 226, 255, 0.16) 0%, rgba(215, 119, 255, 0.07) 26%, transparent 67%);
  filter: blur(12px);
  transform: translate(-50%, -50%);
  transition: top 0.12s ease-out, left 0.12s ease-out;
}

.page-shell {
  position: relative;
  min-height: calc(100svh - var(--site-footer-height));
  overflow: hidden;
}

.intro-scene,
.home-scene {
  position: absolute;
  inset: 0;
}

.intro-scene {
  display: grid;
  min-height: calc(100svh - var(--site-footer-height));
  place-items: center;
  padding: clamp(1rem, 4vw, 4rem);
}

[hidden] {
  display: none !important;
}

.dissolve-hidden {
  visibility: hidden !important;
}

.dissolve-white {
  color: #fff !important;
  text-shadow: none !important;
  transition: none !important;
}

.is-character-dissolving .cell {
  transition: none;
}

.home-scene {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 2rem;
  padding: 3rem 5%;
  visibility: hidden;
}

.home-scene.is-visible {
  visibility: visible;
}

.ascii-art {
  display: grid;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  width: min(100%, 78rem);
  text-align: center;
  filter: drop-shadow(0 0 0.45rem rgba(112, 214, 255, 0.35));
}

.home-copy {
  --menu-primary: #a7dfa8;
  --menu-secondary: #9bcfed;
  --menu-muted: #81aabc;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-synthesis: none;
  color: var(--menu-primary);
  width: 100%;
  max-width: 32rem;
  min-width: 0;
  justify-self: center;
}

.eyebrow {
  margin: 0;
  color: var(--menu-muted);
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0;
}

.home-copy h2 {
  margin: 1.2rem 0 2.5rem;
  color: var(--menu-primary);
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-text-stroke: 0.6px currentColor;
}

.typing-cursor {
  display: inline-block;
  width: 0.08em;
  height: 0.78em;
  margin-left: 0.14em;
  vertical-align: -0.06em;
  background: var(--menu-primary);
  animation: cursor-blink 0.9s steps(1, end) infinite;
}

@keyframes cursor-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.main-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: 0.95rem;
  margin: 0;
  padding: 0;
  color: var(--menu-primary);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0;
  list-style: none;
}

/* Main navigation: four personal entries and three information entries. */
.main-menu li:nth-child(1) { grid-column: 1; grid-row: 1; }
.main-menu li:nth-child(2) { grid-column: 1; grid-row: 2; }
.main-menu li:nth-child(3) { grid-column: 1; grid-row: 3; }
.main-menu li:nth-child(4) { grid-column: 1; grid-row: 4; }
.main-menu li:nth-child(5) { grid-column: 2; grid-row: 1; }
.main-menu li:nth-child(6) { grid-column: 2; grid-row: 2; }
.main-menu li:nth-child(7) { grid-column: 2; grid-row: 3; }

.main-menu li {
  position: relative;
  width: 100%;
  height: 1.8em;
  padding-left: 1.8rem;
  transition: color 180ms ease, transform 180ms ease;
}

#menu-title-text,
.menu-text {
  background: linear-gradient(90deg, var(--menu-primary), var(--menu-secondary));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.typing-cursor { visibility: hidden; }
.home-copy.is-typing-title .typing-cursor { visibility: visible; }

.menu-cursor {
  display: none;
  width: 0.56em;
  height: 1em;
  margin-left: 0.38em;
  vertical-align: -0.18em;
  background: var(--menu-primary);
  animation: cursor-blink 0.9s steps(1, end) infinite;
}

.main-menu li.is-typing .menu-cursor,
.main-menu li.is-complete:last-child .menu-cursor {
  display: inline-block;
}

.main-menu li::before {
  position: absolute;
  left: 0;
  color: var(--menu-secondary);
  content: "//";
  visibility: hidden;
}

.main-menu li.is-typing::before,
.main-menu li.is-complete::before { visibility: visible; }

.main-menu li:hover {
  color: var(--menu-secondary);
  transform: translateX(0.35rem);
}

.main-menu li:hover::before { content: ">_"; }
.main-menu li:hover .menu-text {
  background-position: 100% 0;
  background-size: 180% 100%;
}

.cosmic-panel {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  height: min(70svh, 40rem);
}

.cosmic-art {
  display: block;
  grid-area: 1 / 1;
  margin: 0;
  font-family: "Local Consolas", Consolas, monospace;
  font-size: var(--planet-font-size, 10px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  white-space: pre;
}

.who-scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
  color: #fff;
  overflow: hidden;
}

.who-scene.is-visible {
  visibility: visible;
}

.who-slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.who-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.who-copy,
.who-art-frame {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.who-copy {
  left: 25%;
  width: min(40vw, 38rem);
  min-width: 0;
  color: #cbd3da;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
}

.who-slide[data-slide="1"] .who-copy {
  left: 75%;
}

.who-text-shell {
  color: #cbd3da;
  font-size: clamp(1.25rem, 2.2vw, 2.2rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: 0.015em;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: wrap;
}

.who-text {
  display: inline;
  margin: 0;
  color: #cbd3da;
  font: inherit;
}

.who-word {
  display: inline-block;
  white-space: nowrap;
}

.who-glyph {
  display: inline-block;
  width: 1ch;
  white-space: pre;
}

.who-glyph.is-pending {
  visibility: hidden;
}

.who-text .who-school,
.who-text .who-bilibili,
.who-text .who-youtube,
.who-text .who-position {
  font-weight: 400;
  -webkit-text-stroke: 0.18px currentColor;
}

.who-text .who-bilibili { color: #00aeec; }
.who-text .who-youtube { color: #ff0033; }
.who-text .who-enfj { color: #83e6a0; }
.who-text .who-position { color: #f59e42; }
.who-text .who-skill { color: #fff; }

.who-text-cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.9em;
  margin-left: 0.18em;
  vertical-align: -0.1em;
  background: #cbd3da;
  animation: cursor-blink 0.9s steps(1, end) infinite;
}

.who-text-cursor {
  position: absolute;
  margin-left: 0.08em;
  visibility: hidden;
}

.who-copy.is-typing .who-text-cursor,
.who-copy.is-complete .who-text-cursor {
  visibility: visible;
}

.is-character-dissolving .who-text-cursor {
  visibility: hidden;
}

.who-art-frame {
  left: 75%;
  display: grid;
  place-items: center;
  width: min(44vw, 44rem);
  height: min(76svh, 45rem);
  min-width: 0;
}

.who-slide[data-slide="1"] .who-art-frame {
  left: 25%;
}

.who-art {
  display: block;
  margin: 0;
}

.ascii-control {
  position: absolute;
  z-index: 2;
  border: 0;
  padding: 0.35rem 0.5rem;
  color: #fff;
  background: transparent;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  line-height: 1;
  cursor: var(--cursor-pointer);
  transition: color 180ms ease, transform 180ms ease;
}

.ascii-control:hover,
.ascii-control:focus-visible {
  color: #fff;
  transform: translateX(0.2rem);
  outline: none;
}

.who-header {
  position: absolute;
  z-index: 3;
  top: clamp(1.25rem, 3vw, 3rem);
  left: clamp(1.25rem, 3vw, 3rem);
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
}

.who-back {
  position: static;
}

.who-title {
  margin: 0;
  color: #fff;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(1.4rem, 2.3vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.who-prev {
  top: 50%;
  left: clamp(1rem, 2vw, 2.5rem);
  transform: translateY(-50%);
}

.who-next {
  top: 50%;
  right: clamp(1rem, 2vw, 2.5rem);
  transform: translateY(-50%);
}

.who-prev:hover,
.who-prev:focus-visible,
.who-next:hover,
.who-next:focus-visible {
  transform: translate(0.2rem, -50%);
}

.who-dots {
  position: absolute;
  z-index: 3;
  bottom: clamp(1.3rem, 3vw, 2.5rem);
  left: 50%;
  display: flex;
  gap: 0.75rem;
  transform: translateX(-50%);
}

.who-dot {
  width: 1rem;
  height: 1rem;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #fff;
  background: currentColor;
  clip-path: polygon(30% 0, 70% 0, 70% 10%, 90% 10%, 90% 30%, 100% 30%, 100% 70%, 90% 70%, 90% 90%, 70% 90%, 70% 100%, 30% 100%, 30% 90%, 10% 90%, 10% 70%, 0 70%, 0 30%, 10% 30%, 10% 10%, 30% 10%);
  cursor: var(--cursor-pointer);
}

.who-dot::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #080f26;
  clip-path: polygon(30% 10%, 70% 10%, 70% 20%, 80% 20%, 80% 30%, 90% 30%, 90% 70%, 80% 70%, 80% 80%, 70% 80%, 70% 90%, 30% 90%, 30% 80%, 20% 80%, 20% 70%, 10% 70%, 10% 30%, 20% 30%, 20% 20%, 30% 20%);
}

.who-dot.is-active,
.who-dot:hover,
.who-dot:focus-visible {
  background: #fff;
  outline: none;
}

.who-dot.is-active::after,
.who-dot:hover::after,
.who-dot:focus-visible::after {
  background: transparent;
}

/* ---------- MY WORKS scene ---------- */

.works-scene,
.works-detail-scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.75rem, 2vh, 1.5rem);
  padding: clamp(1.25rem, 3vw, 3rem);
  visibility: hidden;
  color: #fff;
  overflow: hidden;
}

.works-scene.is-visible,
.works-detail-scene.is-visible { visibility: visible; }

.works-header {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
}

.works-back,
.works-detail-back { position: static; }

.works-title {
  margin: 0;
  color: #fff;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(1.4rem, 2.3vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.works-shell,
.works-detail-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(189, 205, 222, 0.7);
  background: rgba(2, 6, 12, 0.72);
  box-shadow: 0 0 1.5rem rgba(83, 155, 214, 0.1), inset 0 0 2rem rgba(120, 170, 220, 0.04);
}

.works-shell-topbar,
.works-detail-topbar,
.works-shell-status {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1vw, 1rem);
  min-width: 0;
  padding: 0.35rem 0.65rem;
  font-family: "Terminal Pixel", "Fusion Pixel SC", "Local Consolas", Consolas, monospace;
  font-size: clamp(0.78rem, 1.12vw, 1.08rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.works-shell-topbar,
.works-detail-topbar {
  color: #07130b;
  background: #63e69a;
}

.works-shell-title,
.works-detail-topbar > :first-child {
  flex-shrink: 0;
  font-weight: 400;
}

.works-shell-menu {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.works-clock {
  flex-shrink: 0;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.works-shell-status {
  justify-content: space-between;
  color: #93f8b4;
  background: #071c0e;
  border-top: 1px solid rgba(99, 230, 154, 0.36);
}

.works-shell-status > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(0.55rem, 1.2vw, 1.2rem);
  min-width: 0;
  min-height: 0;
  padding: clamp(0.65rem, 1.2vw, 1.3rem);
}

.works-card {
  --work-color: #fff;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--work-color);
  color: var(--work-color);
  background: rgba(9, 16, 29, 0.76);
  cursor: var(--cursor-pointer);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.works-card[data-work="video"] { --work-color: #ff4d5a; }
.works-card[data-work="code"] { --work-color: #63e69a; }
.works-card[data-work="signature"] { --work-color: #f0d89a; }

.works-card:hover,
.works-card:focus-visible,
.works-card.is-hover {
  outline: none;
  transform: none;
  background: color-mix(in srgb, var(--work-color) 8%, rgba(9, 16, 29, 0.9));
  box-shadow: 0 0 1rem color-mix(in srgb, var(--work-color) 42%, transparent), inset 0 0 1.4rem color-mix(in srgb, var(--work-color) 12%, transparent);
}

.works-card-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.28rem 0.6rem;
  border-bottom: 1px solid var(--work-color);
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(0.68rem, 0.95vw, 0.95rem);
  white-space: nowrap;
}

.works-card-topbar > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.works-card-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  place-items: center;
  gap: clamp(0.35rem, 1vh, 0.75rem);
  min-width: 0;
  min-height: 0;
  padding: clamp(0.5rem, 1vw, 1rem);
  overflow: hidden;
  text-align: center;
}

.works-art,
.works-detail-art {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.works-card-art-frame {
  display: grid;
  place-items: center;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.works-card-art-frame .works-art { max-width: none; max-height: none; }

.works-card-label {
  color: var(--work-color);
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(0.85rem, 1.65vw, 1.45rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
}

.works-card-hint {
  color: color-mix(in srgb, var(--work-color) 72%, #fff);
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(0.62rem, 0.95vw, 0.88rem);
  opacity: 0.7;
  transition: opacity 180ms ease;
}

.works-card:hover .works-card-hint,
.works-card:focus-visible .works-card-hint,
.works-card.is-hover .works-card-hint { opacity: 1; }

.works-detail-content {
  display: grid;
  grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 1.8fr);
  gap: clamp(0.75rem, 2vw, 2rem);
  min-width: 0;
  min-height: 0;
  padding: clamp(0.75rem, 2vw, 1.5rem);
}

.works-detail-intro {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 0;
  color: var(--work-color, #63e69a);
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
}

.works-detail-intro p {
  margin: 0;
  color: #d7e7ef;
  font-size: clamp(0.78rem, 1.1vw, 1.05rem);
  line-height: 1.35;
}

.works-project-list {
  --work-color: #63e69a;
  container: code-projects / inline-size;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-color: var(--work-color) rgba(5, 14, 10, 0.9);
  scrollbar-width: auto;
}

.works-project-list::-webkit-scrollbar { width: 12px; height: 12px; }
.works-project-list::-webkit-scrollbar-track { background: rgba(5, 14, 10, 0.9); }
.works-project-list::-webkit-scrollbar-thumb { border: 2px solid rgba(5, 14, 10, 0.9); background: var(--work-color); }

.works-project-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(8rem, 1.1fr) minmax(7rem, 0.8fr) minmax(6rem, 0.7fr) minmax(12rem, 1.6fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--work-color) 48%, transparent);
  color: #eaf4f7;
  background: rgba(12, 26, 35, 0.72);
  font-family: "Local Cascadia Mono", "Fusion Pixel SC", Consolas, monospace;
  font-size: clamp(0.68rem, 1vw, 0.95rem);
  line-height: 1.3;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.works-project-row:hover,
.works-project-row:focus-visible {
  outline: none;
  border-color: var(--work-color);
  background: color-mix(in srgb, var(--work-color) 10%, rgba(12, 26, 35, 0.84));
  transform: none;
}

.works-project-number,
.works-project-type,
.works-project-status,
.works-project-action {
  color: var(--work-color);
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
}

.works-project-name,
.works-project-description {
  min-width: 0;
  overflow-wrap: anywhere;
}

.works-project-description { overflow-wrap: break-word; }

.works-project-status { white-space: nowrap; }
.works-project-action { opacity: 0; transition: opacity 180ms ease; white-space: nowrap; }
.works-project-row:hover .works-project-action,
.works-project-row:focus-visible .works-project-action { opacity: 1; }

@media (min-aspect-ratio: 4/3) {
  .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3) {
  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-areas: "top top" "left right";
  }
  .works-card:nth-child(1) { grid-area: top; }
  .works-card:nth-child(2) { grid-area: left; }
  .works-card:nth-child(3) { grid-area: right; }
  .works-card-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; }
  .works-card-art-frame { grid-row: 1 / span 2; }
  .works-card-label { align-self: end; }
  .works-card-hint { align-self: start; }
  .works-card:not(:first-child) .works-card-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  .works-card:not(:first-child) .works-card-art-frame { grid-row: 1; }
}

@media (max-aspect-ratio: 3/4) {
  .works-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .works-card-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; }
  .works-card-art-frame { grid-row: 1 / span 2; }
  .works-card-label { align-self: end; }
  .works-card-hint { align-self: start; }
}

@media (max-aspect-ratio: 1/1) {
  .works-scene,
  .works-detail-scene {
    gap: clamp(0.35rem, 1svh, 0.75rem);
    padding: clamp(0.5rem, 1.5svh, 1rem) clamp(0.5rem, 2vw, 1.25rem);
  }
  .works-title { font-size: clamp(1rem, 3vw, 1.6rem); }
  .works-back,
  .works-detail-back { font-size: clamp(0.9rem, 2.8vw, 1.4rem); }
  .works-shell-topbar,
  .works-detail-topbar,
  .works-shell-status { padding: 0.25rem 0.4rem; font-size: clamp(0.65rem, 2.1vw, 0.9rem); }
  .works-shell-menu { display: none; }
  .works-grid { gap: 0.4rem; padding: 0.45rem; }
  .works-card-topbar { padding: 0.16rem 0.35rem; font-size: clamp(0.58rem, 1.8vw, 0.78rem); }
  .works-card-body { gap: 0.2rem; padding: 0.25rem; }
  .works-card-label { font-size: clamp(0.7rem, 2.8vw, 1rem); }
  .works-card-hint { font-size: clamp(0.54rem, 1.8vw, 0.7rem); }
  .works-detail-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(7rem, 0.7fr) minmax(0, 1.3fr); gap: 0.65rem; padding: 0.55rem; }
  .works-detail-intro { grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr); grid-template-rows: 1fr; gap: 0.6rem; }
  .works-detail-intro p { align-self: center; font-size: clamp(0.64rem, 2.8vw, 0.82rem); }
  .works-project-list { gap: 0.35rem; }
}

/* Six columns need room for a readable description. Use the list's width,
   so a narrow landscape browser receives the same compact rows as portrait. */
@container code-projects (max-width: 52rem) {
  .works-project-row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas: "number name action" ". type status" ". description description";
    align-items: start;
    gap: 0.5rem;
    padding: 0.65rem;
    font-size: 0.8125rem;
  }
  .works-project-number { grid-area: number; }
  .works-project-name { grid-area: name; }
  .works-project-type { grid-area: type; min-width: 0; overflow-wrap: anywhere; }
  .works-project-status { grid-area: status; }
  .works-project-description { grid-area: description; }
  .works-project-action { grid-area: action; opacity: 1; }
}

@media (max-aspect-ratio: 1/1) and (max-height: 560px) {
  .works-scene,
  .works-detail-scene { gap: 0.25rem; padding-block: 0.35rem; }
  .works-grid { gap: 0.25rem; padding: 0.3rem; }
  .works-card-body { padding: 0.15rem; }
  .works-card-label { font-size: 0.7rem; }
  .works-detail-content { padding: 0.35rem; }
}

.works-card-disabled {
  cursor: var(--cursor-default);
  filter: grayscale(1);
  opacity: 0.42;
}

.works-card-disabled:hover,
.works-card-disabled:focus-visible,
.works-card-disabled.is-hover {
  transform: none;
  background: rgba(9, 16, 29, 0.76);
  box-shadow: none;
}

/* ---------- CONTACT US scene ---------- */

.contact-scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.75rem, 2vh, 1.5rem);
  padding: clamp(1.25rem, 3vw, 3rem);
  visibility: hidden;
  color: #fff;
  overflow: hidden;
}

.contact-scene.is-visible {
  visibility: visible;
}

.contact-header {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
}

.contact-back {
  position: static;
}

.contact-title {
  margin: 0;
  color: #fff;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(1.4rem, 2.3vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.contact-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 2rem);
  min-height: 0;
}

/* A: framed 2x2 channel window. */
.contact-a {
  display: grid;
  min-width: 0;
  min-height: 0;
}

.contact-a-frame {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: clamp(0.5rem, 1vw, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0.8rem rgba(140, 200, 255, 0.12), inset 0 0 2.5rem rgba(140, 200, 255, 0.05);
}

.contact-a-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0.6rem 0.6rem;
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  color: #cfe3ee;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(0.85rem, 1.2vw, 1.15rem);
  white-space: nowrap;
}

.window-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: currentColor;
  opacity: 0.85;
}

/* Twelve stepped outer vertices and a square cutout form an 8px outline. */
.window-buttons i,
.contact-pixel-led {
  display: block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 0;
  background: currentColor;
  clip-path: polygon(evenodd,
    25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%,
    75% 100%, 25% 100%, 25% 75%, 0 75%, 0 25%, 25% 25%, 25% 0,
    25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 25%);
}

.contact-cards {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 1rem);
  min-height: 0;
}

.contact-card {
  --brand: #fff;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--brand);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.contact-card:hover,
.contact-card:focus-visible,
.contact-card.is-selected {
  outline: none;
  box-shadow: 0 0 0.9rem color-mix(in srgb, var(--brand) 55%, transparent),
    inset 0 0 1.6rem color-mix(in srgb, var(--brand) 14%, transparent);
  transform: translateY(-0.1rem);
}

.card-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-bottom: 1px solid var(--brand);
  color: var(--brand);
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(0.7rem, 0.95vw, 1rem);
  white-space: nowrap;
}

.card-body {
  display: grid;
  min-width: 0;
  container-type: size;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.3rem, 0.8vh, 0.6rem);
  min-height: 0;
  padding: clamp(0.4rem, 0.8vw, 0.8rem);
}

.card-logo-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  min-width: 0;
  min-height: 0;
  contain: size;
  overflow: hidden;
}

.card-logo {
  display: block;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card-lines {
  display: grid;
  grid-auto-rows: min-content;
  min-width: 0;
  min-height: 0;
  align-content: safe center;
  overflow-wrap: anywhere;
  gap: 0.1rem;
  color: #e8f3ff;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(0.7rem, 1.15vw, 1.25rem);
  line-height: 1.45;
}

.contact-card .card-lines,
.contact-console {
  --scroll-thumb: var(--brand, #42d878);
  --scroll-track: color-mix(in srgb, var(--scroll-thumb) 12%, #06100b);
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: auto;
}

.contact-card .card-lines::-webkit-scrollbar,
.contact-console::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.contact-card .card-lines::-webkit-scrollbar-track,
.contact-console::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-inline: 1px solid color-mix(in srgb, var(--scroll-thumb) 22%, transparent);
}

.contact-card .card-lines::-webkit-scrollbar-thumb,
.contact-console::-webkit-scrollbar-thumb {
  min-height: 26px;
  border: 2px solid var(--scroll-track);
  background: var(--scroll-thumb);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--scroll-thumb) 70%, #fff);
}

.contact-card .card-lines::-webkit-scrollbar-button,
.contact-console::-webkit-scrollbar-button {
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--scroll-track);
}

.contact-card .card-lines::-webkit-scrollbar-button:vertical:decrement,
.contact-console::-webkit-scrollbar-button:vertical:decrement {
  background-image:
    linear-gradient(135deg, transparent 50%, var(--scroll-thumb) 51%) 0 100% / 50% 100% no-repeat,
    linear-gradient(45deg, transparent 50%, var(--scroll-thumb) 51%) 100% 100% / 50% 100% no-repeat;
}

.contact-card .card-lines::-webkit-scrollbar-button:vertical:increment,
.contact-console::-webkit-scrollbar-button:vertical:increment {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--scroll-thumb) 51%) 0 0 / 50% 100% no-repeat,
    linear-gradient(135deg, transparent 50%, var(--scroll-thumb) 51%) 100% 0 / 50% 100% no-repeat;
}

.contact-card[data-platform="bilibili"] .card-lines { --scroll-thumb: #00aeec; }
.contact-card[data-platform="youtube"] .card-lines { --scroll-thumb: #ff0000; }
.contact-card[data-platform="discord"] .card-lines { --scroll-thumb: #5865f2; }
.contact-card[data-platform="github"] .card-lines { --scroll-thumb: #f0f6fc; }

.contact-line {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.55ch;
  margin: 0;
  min-height: 1.4em;
}

.contact-label {
  color: #81aabc;
  flex-shrink: 0;
}

.contact-value {
  min-width: 0;
  color: var(--brand);
}

.contact-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: var(--cursor-pointer);
}

.contact-link:focus-visible {
  outline: 1px solid var(--brand);
  outline-offset: 2px;
}

.contact-cursor {
  display: none;
  width: 0.5em;
  height: 1em;
  align-self: center;
  background: var(--brand);
  animation: cursor-blink 0.9s steps(1, end) infinite;
}

.contact-line.is-typing .contact-cursor,
.contact-line.is-complete .contact-cursor {
  display: inline-block;
}

.is-character-dissolving .contact-cursor {
  visibility: hidden;
}

/* B: HTML console and green SVG oscilloscope. */
.contact-b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.contact-terminal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(189, 205, 222, 0.68);
  background: rgba(2, 6, 12, 0.78);
  box-shadow: 0 0 1.5rem rgba(83, 155, 214, 0.12), inset 0 0 2rem rgba(120, 170, 220, 0.05);
}

.contact-terminal-topbar,
.contact-terminal-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
  padding: 0.3rem 0.6rem;
  font-family: "Terminal Pixel", "Fusion Pixel SC", "Local Consolas", Consolas, monospace;
  font-size: clamp(0.93rem, 1.275vw, 1.29rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.contact-terminal-topbar {
  flex-wrap: wrap;
  color: #062712;
  background: #42d878;
  text-shadow: none;
  font-weight: 400;
}

.contact-terminal-title {
  font-weight: 400;
  flex-shrink: 0;
}

.contact-terminal-menu {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-terminal-clock {
  flex-shrink: 0;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.contact-terminal-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.25rem, 1vh, 0.75rem);
  min-width: 0;
  min-height: 0;
  padding: clamp(0.4rem, 1vw, 0.9rem);
  overflow: hidden;
  color: #42d878;
  background: #040c08;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-synthesis: none;
}

.contact-console {
  align-self: start;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
  margin: 0;
  color: #7be89b;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(0.9375rem, 1.35vw, 1.35rem);
  font-weight: 400;
  line-height: 1.2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: auto;
  scrollbar-width: thin;
}

.contact-console-line {
  display: block;
  min-width: 0;
}

.contact-scope-shell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  contain: size;
  overflow: hidden;
}

.contact-scope {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  color: #42d878;
  fill: none;
}

.contact-scope .scope-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.contact-scope .scope-grid { opacity: 0.2; }
.contact-scope .scope-back { opacity: 0.35; }
.contact-scope .scope-depth { opacity: 0.55; }
.contact-scope .scope-front { opacity: 0.9; }
.contact-scope .scope-trace {
  stroke: #7bff9e;
  stroke-width: 1.75;
}

.contact-scope [hidden] { display: none; }
.contact-scope .scope-idle,
.contact-scope .scope-idle-outline { stroke-width: 2; }

.contact-scope .scope-idle-outline { vector-effect: none; }

.contact-scope .scope-path.dissolve-white {
  stroke: #fff;
  opacity: 1;
}

.contact-terminal-status {
  justify-content: space-between;
  color: #7be89b;
  background: #071c0e;
  border-top: 1px solid rgba(66, 216, 120, 0.35);
}

.contact-terminal-status > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-terminal-led {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  flex-shrink: 0;
  color: #42d878;
  font-size: 0.82em;
}

.ascii-line {
  display: block;
  margin-inline: auto;
  min-width: 0;
  font-size: clamp(0.1rem, calc(min(100vw, 100vh) / 70), 0.7rem);
  font-weight: 800;
  line-height: 0.64;
  letter-spacing: 0.02em;
  white-space: pre;
  transform: translateZ(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 520px) {
  .intro-scene {
    padding: 1rem 0.5rem;
  }

  .ascii-art {
    gap: 1rem;
  }

  .ascii-line {
    font-size: clamp(0.1rem, calc(min(100vw, 100vh) / 70), 0.7rem);
  }

  .cursor-aura {
    width: 12rem;
    height: 12rem;
  }
}

@media (max-aspect-ratio: 1/1) {
  .home-scene {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.42fr);
    gap: clamp(0.35rem, 1.4svh, 1rem);
    overflow: hidden;
    padding: clamp(0.75rem, 2svh, 1.5rem) clamp(0.75rem, 5vw, 1.5rem);
  }

  .home-copy {
    justify-self: center;
    width: min(100%, 32rem);
    min-height: 0;
  }

  .eyebrow { font-size: clamp(0.72rem, min(3.3vw, 2svh), 1rem); }
  .home-copy h2 {
    margin: clamp(0.45rem, 1.5svh, 1rem) 0 clamp(0.7rem, 2svh, 1.5rem);
    font-size: clamp(2.1rem, min(10vw, 6.4svh), 3.7rem);
  }

  .main-menu {
    column-gap: clamp(1rem, 5vw, 2rem);
    row-gap: clamp(0.2rem, 1svh, 0.75rem);
    font-size: clamp(0.88rem, min(4.4vw, 2.7svh), 1.45rem);
  }

  .main-menu li {
    height: 1.55em;
    padding-left: 1.45rem;
  }

  .cosmic-panel {
    height: min(100%, 25svh, 16rem);
    min-height: 0;
  }

  .who-copy,
  .who-slide[data-slide="1"] .who-copy {
    top: 25%;
    left: 50%;
    width: min(82vw, 36rem);
  }

  .who-art-frame,
  .who-slide[data-slide="1"] .who-art-frame {
    top: 75%;
    left: 50%;
    width: min(82vw, 40rem);
    height: min(40svh, calc(50svh - 5rem));
  }

  .who-text-shell {
    font-size: clamp(0.9rem, min(4.3vw, 2.45svh), 1.75rem);
  }
}

@media (max-aspect-ratio: 1/1) and (max-height: 680px) {
  .home-scene {
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.32fr);
    gap: 0.25rem;
    padding-block: 0.55rem;
  }

  .home-copy h2 {
    margin-block: 0.35rem 0.7rem;
    font-size: clamp(1.8rem, 9.5vw, 2.8rem);
  }

  .main-menu {
    column-gap: 1rem;
    row-gap: 0.1rem;
    font-size: clamp(0.78rem, 4.1vw, 1.15rem);
  }

  .main-menu li { height: 1.42em; }
}

@media (max-width: 1100px) and (aspect-ratio > 1/1) {
  .home-copy h2 { font-size: 3.25rem; }
}

@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .home-scene { padding-block: 1rem; }
  .home-copy h2 { margin: 0.5rem 0 1rem; font-size: 2rem; }
  .main-menu { column-gap: 1rem; row-gap: 0.3rem; font-size: 1.3rem; }
}

/* Landscape scope uses a fixed lower square, independent of console typing. */
@media (aspect-ratio > 1/1) {
  .contact-terminal-stage {
    container-type: size;
    --contact-scope-size: min(100cqw, 62cqh);
    grid-template-rows: minmax(0, 1fr);
  }

  .contact-console {
    max-height: max(0px, calc(100cqh - var(--contact-scope-size) - clamp(0.25rem, 1vh, 0.75rem)));
  }

  .contact-scope-shell {
    position: absolute;
    bottom: clamp(0.4rem, 1vw, 0.9rem);
    left: 50%;
    width: var(--contact-scope-size);
    height: var(--contact-scope-size);
    transform: translateX(-50%);
  }
}

/* All portrait contact cards: text left 70%, logo right 30%. */
@media (max-aspect-ratio: 1/1) {
  .contact-scene {
    gap: clamp(0.35rem, 1svh, 0.75rem);
    padding: clamp(0.5rem, 1.5svh, 1rem) clamp(0.5rem, 2vw, 1.25rem);
  }

  .contact-header { gap: 0.65rem; }
  .contact-title { font-size: clamp(1rem, 3vw, 1.6rem); }
  .contact-back { font-size: clamp(0.9rem, 2.8vw, 1.4rem); }

  .contact-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(0.35rem, 1svh, 0.75rem);
  }

  .contact-b { order: -1; }

  .contact-a-frame { padding: clamp(0.25rem, 0.8vw, 0.6rem); }
  .contact-a-titlebar {
    gap: 0.35rem;
    padding: 0.1rem 0.2rem 0.25rem;
    margin-bottom: 0.25rem;
    font-size: clamp(0.625rem, 1.8vw, 0.9rem);
    line-height: 1.1;
  }

  .contact-a-title { min-width: 0; white-space: normal; }
  .contact-scene .window-buttons { flex-shrink: 0; }
  .contact-cards { gap: clamp(0.25rem, 0.8vw, 0.6rem); }

  .card-titlebar {
    gap: 0.25rem;
    padding: 0.15rem 0.35rem;
    font-size: clamp(0.625rem, 1.8vw, 0.85rem);
    line-height: 1.1;
  }

  .card-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: clamp(0.2rem, 0.7vw, 0.45rem);
  }

  .card-lines {
    grid-column: 1;
    grid-row: 1;
    gap: 0.1em;
    padding-right: 0.4em;
    font-size: clamp(0.625rem, 3.1cqw, 0.875rem);
    line-height: 1.12;
    overflow: auto;
    scrollbar-width: thin;
  }

  .card-logo-wrap { grid-column: 2; grid-row: 1; }
  .contact-line { display: block; min-height: 0; }
  .contact-line[data-field="link"] .contact-value,
  .contact-link { word-break: break-all; }
  .contact-cursor { vertical-align: -0.12em; }

  .contact-terminal-topbar,
  .contact-terminal-status {
    gap: 0.4rem;
    padding: 0.2rem 0.4rem;
    font-size: clamp(0.9375rem, 2.4vw, 1.2rem);
    letter-spacing: 0;
  }

  .contact-console { font-size: clamp(0.9375rem, 2.475vw, 1.275rem); }
}

/* Medium portrait: keep the console and scope side by side, with the text column fixed. */
@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1) {
  .contact-terminal-stage {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(0.25rem, 1vw, 0.6rem);
  }

  .contact-console {
    align-self: start;
    max-height: none;
    overflow: auto;
  }

  .contact-scope-shell {
    position: static;
    width: auto;
    height: auto;
    transform: none;
  }

  .contact-card .card-lines {
    align-content: start;
    font-size: 0.9rem;
  }
}

/* Strictly below 3:4: B 20%, A 80%, with four equal card rows. */
@media (aspect-ratio < 3/4) {
  .contact-body { grid-template-rows: minmax(0, 1fr) minmax(0, 4fr); }
  .contact-cards {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .contact-terminal-stage {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0.25rem;
    padding: clamp(0.2rem, 0.6vw, 0.4rem);
  }

  .contact-console { max-height: 100%; line-height: 1.1; }
  .contact-terminal-menu { display: none; }
  .contact-terminal-clock { margin-left: auto; }
}

/* Compact chrome keeps four cards readable even on short portrait screens. */
@media (max-aspect-ratio: 1/1) and (max-height: 520px) {
  .contact-scene { gap: 0.25rem; padding-block: 0.35rem; }
  .contact-a-titlebar {
    padding-block: 0 0.15rem;
    margin-bottom: 0.15rem;
    line-height: 1;
  }
  .card-titlebar { padding-block: 0.08rem; }
  .card-body { padding-block: 0.12rem; }
  .card-lines { gap: 0.05em; line-height: 1.05; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-aura,
  .cell {
    transition: none;
  }
}

/* ---------- ABOUT WEBPAGE scene ---------- */

.about-scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.75rem, 2vh, 1.5rem);
  padding: clamp(1.25rem, 3vw, 3rem);
  visibility: hidden;
  color: #fff;
  overflow: hidden;
}

.about-scene.is-visible { visibility: visible; }

.about-header {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
}

.about-back { position: static; }

.about-title {
  margin: 0;
  color: #fff;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(1.4rem, 2.3vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.about-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  min-width: 0;
  min-height: 0;
  align-items: stretch;
}

.about-dialogue-window {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.about-window-titlebar,
.about-window-status {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: 0.45rem 0.7rem;
  color: #dce9f5;
  background: rgba(20, 35, 58, 0.85);
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  font-size: clamp(0.72rem, 1vw, 1rem);
  line-height: 1.1;
  white-space: nowrap;
}

.about-window-status {
  color: #82f3a9;
  background: rgba(5, 24, 15, 0.9);
  border-top: 1px solid rgba(95, 226, 140, 0.34);
}

.about-status-led {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  flex-shrink: 0;
  color: #62f194;
}

.about-dialogue-viewport {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  scrollbar-width: none;
  overscroll-behavior: none;
}

.about-dialogue-viewport::-webkit-scrollbar { display: none; }

.about-dialogue-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(0.7rem, 1.5vh, 1.3rem);
  min-width: 0;
  min-height: 100%;
  padding: clamp(0.8rem, 2vw, 1.6rem);
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
}

.about-turn {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1vh, 0.9rem);
  min-width: 0;
}

.about-message {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: fit-content;
  max-width: min(96%, 48rem);
  min-width: 0;
}

.about-message-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.about-message-assistant { align-self: flex-start; }

.about-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(1.9rem, 3.1vw, 3rem);
  height: clamp(1.9rem, 3.1vw, 3rem);
  color: #f5f7fb;
  border: 1px solid currentColor;
  background: rgba(11, 20, 34, 0.88);
  box-shadow: 0 0 0.8rem rgba(166, 211, 255, 0.14);
}

.about-avatar-js { color: #fff; }

.about-js-mark {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
  background: transparent;
}

.about-avatar .about-openai-mark {
  width: 78%;
  height: 78%;
}

.about-bubble {
  min-width: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(220, 235, 249, 0.3);
  color: #eef6ff;
  background: rgba(24, 35, 54, 0.78);
  box-shadow: 0 0 1rem rgba(106, 163, 220, 0.07);
  overflow-wrap: anywhere;
  font-size: clamp(0.82rem, 1.25vw, 1.18rem);
  line-height: 1.42;
}

.about-message-user .about-bubble {
  color: #d9f4ff;
  border-color: rgba(122, 218, 255, 0.45);
  background: rgba(22, 65, 87, 0.62);
}

.about-bubble p { margin: 0; }

.about-bubble a {
  color: #86e6ff;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.about-activity {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 0.28rem;
  width: min(82%, 48rem);
  padding-left: calc(clamp(1.9rem, 3.1vw, 3rem) + 0.7rem);
  color: #7af0a3;
  font-size: clamp(0.72rem, 1.05vw, 0.98rem);
  line-height: 1.3;
}

.about-activity-line { min-height: 1.3em; }

.about-activity-line::before {
  margin-right: 0.5ch;
  color: #b6ffd0;
  content: "›";
}

.about-activity-tool { color: #a6f5bc; }

.about-thinking-dots::after {
  display: inline-block;
  width: 2.2em;
  content: "...";
  animation: about-thinking 1.15s steps(4, end) infinite;
}

.about-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  width: 100%;
  gap: clamp(0.6rem, 1.5vh, 1.4rem);
  min-width: 0;
  min-height: 0;
  color: #f2f6fb;
  font-family: "Terminal Pixel", "Fusion Pixel SC", monospace;
  text-align: center;
}

.about-credit-icon {
  display: grid;
  place-items: center;
  width: clamp(6rem, 14vw, 13rem);
  height: clamp(6rem, 14vw, 13rem);
  color: #fff;
  background: none;
  box-shadow: none;
}

.about-openai-mark {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
  background: transparent;
  overflow: visible;
}

.about-credit-label {
  color: #a8c2d7;
  font-size: clamp(0.85rem, 1.4vw, 1.3rem);
  letter-spacing: 0.08em;
}

.about-credit-author {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 0.5rem;
  color: #fff;
  font-size: clamp(1rem, 1.8vw, 1.7rem);
  line-height: 1.2;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

@keyframes about-thinking {
  0%, 24% { content: "."; }
  25%, 49% { content: ".."; }
  50%, 74% { content: "..."; }
  75%, 100% { content: ""; }
}

@media (max-aspect-ratio: 1/1) {
  .about-scene {
    gap: clamp(0.4rem, 1svh, 0.8rem);
    padding: clamp(0.6rem, 1.5svh, 1rem) clamp(0.55rem, 2vw, 1.25rem);
  }

  .about-title { font-size: clamp(1rem, 3vw, 1.6rem); }
  .about-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(0.7rem, 2svh, 1.3rem);
  }

  .about-credit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    text-align: center;
  }

  .about-credit-icon {
    width: clamp(4.8rem, 19vw, 7rem);
    height: clamp(4.8rem, 19vw, 7rem);
  }

  .about-credit-label { align-self: center; }
  .about-credit-author {
    align-items: center;
    align-self: center;
    flex-direction: column;
    gap: 0.2rem;
    font-size: clamp(0.92rem, 4.3vw, 1.35rem);
    white-space: normal;
  }
  .about-message { width: fit-content; max-width: min(94%, 48rem); }
  .about-bubble { font-size: clamp(0.75rem, 3.7vw, 1rem); }
  .about-activity { width: 94%; padding-left: calc(clamp(1.9rem, 7vw, 2.5rem) + 0.55rem); font-size: clamp(0.68rem, 3vw, 0.86rem); }
  .about-dialogue-content { padding: 0.65rem; }
}

@media (max-aspect-ratio: 1/1) and (max-height: 560px) {
  .about-credit-icon { width: 3.8rem; height: 3.8rem; }
  .about-credit-author { font-size: 0.82rem; }
  .about-credit-label { font-size: 0.72rem; }
}

/* Static native pixel cursors; the adjacent cat uses direct mouse coordinates. */
:root {
  --cursor-default: default;
  --cursor-pointer: pointer;
  --cursor-text: text;
  --cursor-grab: grab;
  --cursor-grabbing: grabbing;
  --cursor-ew-resize: ew-resize;
  --cursor-ns-resize: ns-resize;
  --cursor-nwse-resize: nwse-resize;
  --cursor-nesw-resize: nesw-resize;
  --cursor-not-allowed: not-allowed;
}
@media (any-pointer: fine) {
  :root {
    --cursor-default: url("../../assets/cursors/default.cur"), url("../../assets/cursors/default.png") 2 2, default;
    --cursor-pointer: url("../../assets/cursors/pointer.cur"), url("../../assets/cursors/pointer.png") 12 2, pointer;
    --cursor-text: url("../../assets/cursors/text.cur"), url("../../assets/cursors/text.png") 16 16, text;
    --cursor-grab: url("../../assets/cursors/grab.cur"), url("../../assets/cursors/grab.png") 16 16, grab;
    --cursor-grabbing: url("../../assets/cursors/grabbing.cur"), url("../../assets/cursors/grabbing.png") 16 16, grabbing;
    --cursor-ew-resize: url("../../assets/cursors/ew-resize.cur"), url("../../assets/cursors/ew-resize.png") 16 16, ew-resize;
    --cursor-ns-resize: url("../../assets/cursors/ns-resize.cur"), url("../../assets/cursors/ns-resize.png") 16 16, ns-resize;
    --cursor-nwse-resize: url("../../assets/cursors/nwse-resize.cur"), url("../../assets/cursors/nwse-resize.png") 16 16, nwse-resize;
    --cursor-nesw-resize: url("../../assets/cursors/nesw-resize.cur"), url("../../assets/cursors/nesw-resize.png") 16 16, nesw-resize;
    --cursor-not-allowed: url("../../assets/cursors/not-allowed.cur"), url("../../assets/cursors/not-allowed.png") 16 16, not-allowed;
  }
}
html, body { cursor: var(--cursor-default); }
button, a[href], summary, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], label[for] { cursor: var(--cursor-pointer); }
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, [contenteditable="true"] { cursor: var(--cursor-text); }
button:disabled, input:disabled, [aria-disabled="true"] { cursor: var(--cursor-not-allowed); }
.cursor-aura { display: none; }
/* The companion is visually attached to the cursor and never receives input. */
.site-cursor-cat {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 32px;
  z-index: 2147483647;
  pointer-events: none;
  user-select: none;
  contain: layout;
  transition: none;
}
.site-cursor-cat-sprite {
  display: block;
  width: 40px;
  height: 32px;
  background-image: url('../../assets/cursors/cat-sprite.png?v=20261031.2');
  background-size: 160px 128px;
  background-position: 0 var(--cat-row, 0px);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: cursor-cat-idle var(--cat-speed, 2.4s) steps(4, end) infinite;
}
.site-cursor-cat[data-cursor-state="pointer"] { --cat-row: -32px; --cat-speed: 1.2s; }
.site-cursor-cat[data-cursor-state="text"] { --cat-row: -64px; --cat-speed: .8s; }
.site-cursor-cat-writer { display: none; }
.site-cursor-cat[data-cursor-state="text"] .site-cursor-cat-sprite { display: none; }
.site-cursor-cat[data-cursor-state="text"] .site-cursor-cat-writer { display: block; }
.site-cursor-cat-writer svg { display: block; }
.site-cursor-cat-writer > svg { overflow: visible; }
.site-cursor-cat-writer .cat-writing-head > svg { overflow: hidden; }
.cat-writing-head { animation: cursor-cat-writing-nod 1.6s steps(1, end) infinite; }
.cat-writing-paw { animation: cursor-cat-writing 1.6s steps(1, end) infinite; }
.cat-writing-paper {
  position: absolute;
  left: 26px;
  top: 24px;
  width: 6px;
  height: 8px;
  border: 1px solid #79efaa;
  background: linear-gradient(#438c70, #438c70) 1px 2px / 4px 1px no-repeat,
    linear-gradient(#438c70, #438c70) 1px 5px / 3px 1px no-repeat, #b3f4c8;
  opacity: 0;
  animation: cursor-cat-paper-flight 1.6s steps(1, end) infinite;
  animation-delay: calc(var(--paper-index) * .4s);
  --paper-drift: 12px;
  --paper-turn: 90deg;
}
.cat-writing-paper:nth-of-type(even) { --paper-drift: -12px; --paper-turn: -90deg; }
@keyframes cursor-cat-writing {
  0%, 100% { transform: translate(0, 0); }
  12.5% { transform: translate(1px, 0); }
  25% { transform: translate(2px, 1px); }
  37.5% { transform: translate(3px, 1px); }
  50% { transform: translate(3px, 2px); }
  62.5% { transform: translate(2px, 2px); }
  75% { transform: translate(1px, 1px); }
  87.5% { transform: translate(0, 1px); }
}
@keyframes cursor-cat-writing-nod {
  0%, 12.5%, 87.5%, 100% { transform: translateY(0); }
  25%, 37.5%, 75% { transform: translateY(1px); }
  50%, 62.5% { transform: translateY(2px); }
}
@keyframes cursor-cat-paper-flight {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  12.5% { opacity: 1; transform: translate(0, -6px); }
  25% { opacity: 1; transform: translate(0, -12px) rotate(var(--paper-turn)); }
  37.5% { opacity: 1; transform: translate(var(--paper-drift), -18px) rotate(var(--paper-turn)); }
  50% { opacity: 1; transform: translate(var(--paper-drift), -24px) rotate(180deg); }
  62.5% { opacity: .75; transform: translate(var(--paper-drift), -30px) rotate(180deg); }
  75% { opacity: .5; transform: translate(var(--paper-drift), -36px) rotate(270deg); }
  87.5% { opacity: .25; transform: translate(var(--paper-drift), -42px) rotate(270deg); }
}
.site-cursor-cat[data-cursor-state="grab"] { --cat-row: -96px; --cat-speed: 1.6s; }
.site-cursor-cat[data-cursor-state="grabbing"] { --cat-row: -96px; --cat-speed: .8s; }
.site-cursor-cat[hidden] .site-cursor-cat-sprite { animation-play-state: paused; }
.site-cursor-cat[hidden] .site-cursor-cat-writer * { animation-play-state: paused; }
.site-cursor-cat.is-pressed[data-cursor-state="default"] .site-cursor-cat-sprite { animation: none; background-position: -120px var(--cat-row, 0px); }
@keyframes cursor-cat-idle { from { background-position: 0 var(--cat-row, 0px); } to { background-position: -160px var(--cat-row, 0px); } }
@media (prefers-reduced-motion: reduce) {
  .site-cursor-cat-sprite { animation: none; }
  .site-cursor-cat-writer * { animation: none; }
  .cat-writing-paper { display: none; }
}

/* Loading feedback appears only while acquiring a previously unopened section. */
.resource-status { position: fixed; z-index: 20; left: 50%; bottom: 1.5rem; transform: translateX(-50%); max-width: calc(100vw - 2rem); padding: .7rem 1rem; color: #fff; background: #080f26; border: 1px solid #83e6a0; font-family: "Terminal Pixel", "Fusion Pixel SC", monospace; text-align: center; }

/* Persistent site identity and ICP registration, outside all scene transitions. */
:root {
  --site-footer-height: calc(64px + env(safe-area-inset-bottom, 0px));
}
.site-footer {
  position: fixed;
  z-index: 2100;
  inset: auto 0 0;
  height: var(--site-footer-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px max(12px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  color: #81aabc;
  background: #04091a;
  border-top: 1px solid rgba(137, 236, 255, 0.12);
  font: 400 12px / 18px "Terminal Pixel", "Fusion Pixel SC", monospace;
  text-align: center;
  letter-spacing: 0;
}
.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #89ecff;
}
.site-footer a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.resource-status { bottom: calc(var(--site-footer-height) + 1.5rem); }

/* Shared ASCII message glyph used by the global controls and video taskbar. */
.video-message-ascii { margin: 0; color: inherit; font-family: "Local Cascadia Mono", monospace; font-size: 3px; line-height: 1.5px; letter-spacing: 0; white-space: pre; pointer-events: none; }