:root {
  --ink: #111;
  --paper: #f4f1ea;
  --hover: #e8c547;
  --body-read: var(--text-read);
  --body-lh: 1.7;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; height: auto; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: var(--paper);
  background: #080808;
  overflow-x: hidden;
  overflow-y: auto;
}
body.snap {
  height: calc(100 * var(--vh));
  overflow: hidden;
  display: flex;
  align-items: center;
}
body.snap .screen,
body.snap .hero,
body.snap .chap,
body.snap .pane {
  height: calc(1080 * var(--u));
  min-height: calc(1080 * var(--u));
}
body.snap .screen,
body.snap .hero,
body.snap .chap,
body.snap .pane {
  display: none !important;
}
body.snap .screen.is-on {
  display: block !important;
}
body.snap #id.is-on {
  display: grid !important;
}
body.snap .chap.is-on,
body.snap .chap.chap--stack.is-on {
  display: grid !important;
}
body.snap .hero.is-on,
body.snap .pane.is-on {
  display: block !important;
}
body.snap .pane.pane--pack.is-on {
  display: flex !important;
}
.chap.chap--stack {
  grid-template-columns: 1fr;
  align-content: center;
}
.prefill { opacity: 0.92; }
.draft {
  font-size: calc(10 * var(--u));
  letter-spacing: 0.16em;
  opacity: 0.4;
  margin-left: calc(8 * var(--u));
}
a { color: inherit; }

html.tear-skip #tear {
  display: none !important;
}
#tear {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: auto;
  background: transparent;
}
#tear.is-blocking {
  pointer-events: auto;
}
#tear.is-film-hold {
  background: #080808;
}
#tear .intro-wide,
#tear .intro-name {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}
#tear .intro-wide { z-index: 0; }
#tear .intro-name { z-index: 1; }
#tear.is-film-rip {
  background: transparent;
  overflow: hidden;
}
#tear.is-film-rip .preloader__rip,
#tear.is-film-rip .preloader__peel {
  background-color: #080808;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: none;
  border: 0;
}
#tear.is-film-rip .preloader__peel.is-fullbleed {
  background-size: 100% 100%;
}
#tear.is-film-rip .preloader__rip b {
  display: none;
}
#tear.is-gone {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
#tear .preloader__replay { display: none !important; }
#tear .intro-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: transparent;
  z-index: 1;
}
#tear .intro-film.is-preload {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#tear.is-done > .intro-film {
  visibility: visible;
}
#tear.is-gate {
  background: #000;
}
#tear.is-gate .intro-name {
  visibility: hidden;
}
.name-gate__veil {
  --x: calc(-800 * var(--u));
  --y: calc(-800 * var(--u));
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), transparent 0 calc(120 * var(--u)), rgba(0,0,0,0.55) calc(210 * var(--u)), #000 calc(320 * var(--u)));
  mask-image: radial-gradient(circle at var(--x) var(--y), transparent 0 calc(120 * var(--u)), rgba(0,0,0,0.55) calc(210 * var(--u)), #000 calc(320 * var(--u)));
}
.name-gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  background: transparent;
  touch-action: none;
}
.name-gate__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: min(calc(1920 * var(--u)), calc(calc(1080 * var(--u)) * 16 / 9));
  height: min(calc(1080 * var(--u)), calc(calc(1920 * var(--u)) * 9 / 16));
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: transparent;
  pointer-events: auto;
}
.name-gate__hit {
  --gate-l: 5.78;
  --gate-t: 12.78;
  --gate-w: 86.72;
  --gate-h: 46.39;
  appearance: none;
  position: absolute;
  left: calc(var(--gate-l) * 1%);
  top: calc(var(--gate-t) * 1%);
  width: calc(var(--gate-w) * 1%);
  height: calc(var(--gate-h) * 1%);
  z-index: 4;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.name-gate__scan {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.name-gate__scan i {
  position: absolute;
  top: 4%;
  bottom: 10%;
  left: 0;
  width: calc(3 * var(--u));
  background: var(--paper);
  opacity: 0;
}
.name-gate.is-reduced .name-gate__hit:hover .name-gate__scan i,
.name-gate.is-reduced .name-gate__hit:focus-visible .name-gate__scan i,
.name-gate.is-reduced .name-gate__hit.is-press .name-gate__scan i {
  animation: none;
}
.name-gate.is-go {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-in;
}
.name-gate.is-reduced .name-gate__scan i {
  animation: none;
}
.name-gate__hint {
  position: absolute;
  left: 50%;
  top: 78%;
  z-index: 5;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  color: var(--paper);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
}
.name-gate__hint span {
  display: block;
  margin-top: 0.35em;
  font-size: calc(11 * var(--u));
  letter-spacing: 0.18em;
  opacity: 1;
}
.name-gate__mute {
  appearance: none;
  position: absolute;
  left: 50%;
  bottom: calc(51.84 * var(--u));
  z-index: 6;
  transform: translateX(-50%);
  border: max(1px, calc(3 * var(--u))) solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-size: calc(13 * var(--u));
  font-weight: 900;
  letter-spacing: 0.16em;
  padding: calc(5.4 * var(--u)) calc(12.96 * var(--u));
  cursor: pointer;
}
.name-gate__mute:hover {
  background: var(--hover);
  color: #111;
  border-color: #111;
}
.name-gate.is-go .name-gate__hint,
.name-gate.is-go .name-gate__mute {
  opacity: 0;
}
@keyframes name-scan {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - calc(5 * var(--u))); opacity: 0; }
}
@keyframes name-press {
  0% { transform: scale(1); }
  45% { transform: scale(0.86, 0.9); }
  100% { transform: scale(1); }
}
@keyframes name-gate-jitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(calc(3 * var(--u)), -2px); }
  100% { transform: translate(calc(-3 * var(--u)), 2px); }
}
.id-replay {
  display: none;
}
.id-replay:hover {
  background: var(--hover);
  color: #111;
  border-color: #111;
}
#id .tag[data-axis] {
  cursor: pointer;
}
#id .axis .stop {
  transition: color 180ms ease;
}
#id .axis.is-tag-hot .stop,
#id .axis.is-tag-hot .stop.is-hot {
  opacity: 1;
}
#id .axis .stop.is-hot h3,
#id .axis .stop.is-hot p {
  color: var(--hover);
}
#id .axis .stop.is-hot p {
  opacity: 1;
}
#id .axis .stop.is-locked .yr::after {
  content: none;
  display: none;
}
.preloader__paper,
.preloader__panel,
.preloader__page {
  background-image: url("../style-boards/vendor/paper-texture.webp");
}

.screen {
  min-height: calc(1080 * var(--u));
  padding: calc(64.8 * var(--u)) calc(96 * var(--u)) calc(48 * var(--u));
  position: relative;
  overflow: hidden;
}
.kicker {
  font-size: calc(11 * var(--u));
  letter-spacing: 0.32em;
  color: var(--hover);
  margin-bottom: calc(10 * var(--u));
}
.placeholder {
  opacity: 0.45;
  border-bottom: 1px dashed currentColor;
}

#id {
  background: #111;
  display: grid;
  grid-template-columns: 0.92fr 1.28fr;
  gap: calc(28 * var(--u));
  align-items: center;
}
#id::before,
#skill::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background: repeating-radial-gradient(circle, var(--paper) 0 0.5px, transparent 0.5px calc(8 * var(--u)));
  mask-image: radial-gradient(ellipse 70% 55% at 0% 0%, #000 0 35%, transparent 70%);
}
#skill::before {
  opacity: 0.2;
  mask-image: none;
}
#skill::after {
  content: "";
  position: absolute;
  top: 10%;
  right: -4%;
  width: 48%;
  height: 36%;
  pointer-events: none;
  background: repeating-linear-gradient(
    12deg,
    transparent 0 calc(14 * var(--u)),
    #f4f1ea18 calc(14 * var(--u)) calc(16 * var(--u)),
    transparent calc(16 * var(--u)) calc(26 * var(--u))
  );
  mask-image: linear-gradient(270deg, #000 0 35%, transparent 88%);
}
.id-speed {
  position: absolute;
  top: 16%;
  left: -6%;
  width: 58%;
  height: 28%;
  pointer-events: none;
  background: repeating-linear-gradient(
    -11deg,
    transparent 0 calc(14 * var(--u)),
    #f4f1ea22 calc(14 * var(--u)) calc(16 * var(--u)),
    transparent calc(16 * var(--u)) calc(26 * var(--u))
  );
  mask-image: linear-gradient(90deg, #000 0 40%, transparent 88%);
}
.id-mast {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: calc(25.92 * var(--u));
  min-width: 0;
}
.id-copy { min-width: 0; }
.intro-tag {
  display: inline-block;
  font-family: var(--display), "Big Shoulders Display", sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 900;
  letter-spacing: 0.22em;
  background: var(--hover);
  color: #111;
  border: max(1px, calc(3 * var(--u))) solid #000;
  padding: calc(3.78 * var(--u)) calc(12.96 * var(--u));
  margin-bottom: calc(17.28 * var(--u));
}
.id-name {
  display: flex;
  width: max-content;
  font-size: var(--text-name);
  line-height: 0.8;
  letter-spacing: 0;
  font-weight: 900;
  gap: 0.115em;
}
.id-name span {
  display: inline-block;
  transform-origin: left bottom;
  transition: transform 150ms cubic-bezier(0.2, 1.5, 0.3, 1);
}
.id-name span:hover {
  transform: scale(1.08);
}
.id-stamp {
  width: calc(183.6 * var(--u));
  height: calc(183.6 * var(--u));
  flex: 0 0 calc(183.6 * var(--u));
  border: max(1px, calc(4 * var(--u))) solid var(--paper);
  background: var(--paper);
  box-shadow: calc(4.86 * var(--u)) calc(4.86 * var(--u)) 0 var(--paper);
  overflow: hidden;
  transform: rotate(3deg);
  transition: transform 180ms cubic-bezier(0.2, 1.5, 0.3, 1);
}
.id-stamp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.id-stamp:hover { transform: rotate(3deg) translateY(calc(-6.48 * var(--u))); }
.stamp-tag {
  font-size: calc(11 * var(--u));
  line-height: 1;
  letter-spacing: 0.14em;
  background: var(--paper);
  color: #111;
  border: 2px solid #111;
  padding: calc(4 * var(--u)) calc(6 * var(--u));
  margin: 0 calc(6 * var(--u)) calc(6 * var(--u)) 0;
  white-space: nowrap;
}
.tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(15.12 * var(--u));
  margin-top: calc(32.4 * var(--u));
  perspective: calc(720 * var(--u));
}
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12.96 * var(--u)) calc(15.12 * var(--u));
}
.tag-slot {
  display: inline-block;
  transform-origin: left center;
}
.tag {
  --tilt: -2.6deg;
  position: relative;
  display: inline-block;
  background: var(--paper);
  color: #111;
  border: max(1px, calc(4 * var(--u))) solid #000;
  box-shadow:
    calc(1.296 * var(--u)) calc(1.296 * var(--u)) 0 #000,
    calc(2.592 * var(--u)) calc(2.592 * var(--u)) 0 #000,
    calc(3.888 * var(--u)) calc(3.888 * var(--u)) 0 #000,
    calc(5.4 * var(--u)) calc(5.4 * var(--u)) 0 #000,
    calc(8.856 * var(--u)) calc(8.856 * var(--u)) 0 var(--paper);
  padding: calc(7.02 * var(--u)) calc(16.2 * var(--u)) calc(5.4 * var(--u)) calc(22.68 * var(--u));
  font-size: var(--text-body);
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  transform: rotate(var(--tilt)) rotateY(-11deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 180ms cubic-bezier(0.2, 1.5, 0.3, 1);
}
.tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(9.18 * var(--u));
  background: #111;
}
.tag--jump {
  background: var(--hover);
  box-shadow:
    calc(1.296 * var(--u)) calc(1.296 * var(--u)) 0 #000,
    calc(2.592 * var(--u)) calc(2.592 * var(--u)) 0 #000,
    calc(3.888 * var(--u)) calc(3.888 * var(--u)) 0 #000,
    calc(5.4 * var(--u)) calc(5.4 * var(--u)) 0 #000,
    calc(9.72 * var(--u)) calc(9.72 * var(--u)) 0 var(--hover);
}
.tags-row:nth-child(1) .tag { --tilt: -2.8deg; }
.tags-row:nth-child(2) .tag-slot:nth-child(1) .tag { --tilt: 2.2deg; }
.tags-row:nth-child(2) .tag-slot:nth-child(2) .tag { --tilt: -1.6deg; }
.tags-row:nth-child(3) .tag { --tilt: 2.6deg; }
.tag:hover {
  transform: rotate(var(--tilt)) rotateY(0deg) scale(1.06) translateY(calc(-7.02 * var(--u)));
}
#id.is-on .tag-slot {
  animation: tag-slam 0.5s cubic-bezier(0.16, 1.35, 0.32, 1) both;
}
#id.is-on .tags-row:nth-child(1) .tag-slot { animation-delay: 0.06s; }
#id.is-on .tags-row:nth-child(2) .tag-slot:nth-child(1) { animation-delay: 0.14s; }
#id.is-on .tags-row:nth-child(2) .tag-slot:nth-child(2) { animation-delay: 0.22s; }
#id.is-on .tags-row:nth-child(3) .tag-slot { animation-delay: 0.3s; }
@keyframes tag-slam {
  0% { opacity: 0; translate: calc(-86.4 * var(--u)) calc(3.24 * var(--u)); }
  68% { opacity: 1; translate: calc(3.84 * var(--u)) calc(-0.864 * var(--u)); }
  100% { opacity: 1; translate: 0 0; }
}
.axis {
  position: relative;
  border: max(1px, calc(4 * var(--u))) solid var(--paper);
  padding: calc(36 * var(--u)) calc(28 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u));
  min-width: 0;
  width: 100%;
  background: #111;
  box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #000, calc(7 * var(--u)) calc(7 * var(--u)) 0 var(--paper);
}
.axis .intro-tag {
  position: absolute;
  top: calc(-14.04 * var(--u));
  left: calc(17.28 * var(--u));
  margin-bottom: 0;
}
.axis::before {
  content: "";
  position: absolute;
  left: calc(38 * var(--u));
  top: calc(44 * var(--u));
  bottom: calc(28 * var(--u));
  width: calc(4 * var(--u));
  background: var(--hover);
}
.stop { position: relative; padding: 0 0 calc(12 * var(--u)) calc(56 * var(--u)); }
.stop:last-child { padding-bottom: 0; }
.stop i {
  position: absolute;
  left: calc(30 * var(--u));
  top: calc(4 * var(--u));
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border: max(1px, calc(4 * var(--u))) solid #111;
  background: var(--hover);
  box-shadow: 0 0 0 calc(3 * var(--u)) #111, calc(3 * var(--u)) calc(3 * var(--u)) 0 #000;
}
.stop .yr { font-size: calc(11 * var(--u)); letter-spacing: 0.2em; color: var(--paper); opacity: 0.7; }
.stop h3 { font-size: var(--text-body); margin: 2px 0; font-weight: 900; }
.stop p { font-size: var(--text-read); line-height: 1.7; opacity: 0.88; }

#skill { background: #111; padding-top: calc(48.6 * var(--u)); padding-bottom: calc(32.4 * var(--u)); }
#skill .intro-tag { margin-bottom: calc(23.76 * var(--u)); position: relative; z-index: 1; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(34.56 * var(--u)) calc(25.92 * var(--u));
  margin-top: calc(17.28 * var(--u));
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.card {
  --pin: -1.2deg;
  position: relative;
  border: max(1px, calc(4 * var(--u))) solid #000;
  min-height: calc(356.4 * var(--u));
  padding: calc(25.92 * var(--u)) calc(34.56 * var(--u)) calc(23.76 * var(--u));
  background: var(--paper);
  color: #111;
  box-shadow: calc(5.94 * var(--u)) calc(5.94 * var(--u)) 0 #000, calc(9.18 * var(--u)) calc(9.18 * var(--u)) 0 var(--paper);
  transform: rotate(var(--pin));
  transform-origin: 50% 0;
  transition: transform 180ms cubic-bezier(0.2, 1.5, 0.3, 1);
}
.card:nth-child(1) { --pin: -1.5deg; }
.card:nth-child(2) { --pin: 1.2deg; }
.card:nth-child(3) { --pin: -0.8deg; }
.card:nth-child(4) { --pin: 1.6deg; }
.card:nth-child(5) { --pin: -1.3deg; }
.card:nth-child(6) { --pin: 0.9deg; }
.card::before {
  content: "";
  position: absolute;
  top: calc(-10.8 * var(--u));
  left: calc(19.44 * var(--u));
  width: calc(18.36 * var(--u));
  height: calc(18.36 * var(--u));
  background: var(--hover);
  border: max(1px, calc(3 * var(--u))) solid #000;
  box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #000;
  z-index: 2;
}
.card:nth-child(even)::before {
  left: auto;
  right: calc(19.44 * var(--u));
  background: var(--paper);
}
.card::after {
  content: "";
  position: absolute;
  top: calc(11.88 * var(--u));
  right: calc(17.28 * var(--u));
  width: calc(36.72 * var(--u));
  height: calc(11.34 * var(--u));
  background: var(--paper);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  transform: rotate(14deg);
  pointer-events: none;
}
.card:nth-child(even)::after {
  right: auto;
  left: calc(17.28 * var(--u));
  transform: rotate(-11deg);
  background: var(--hover);
}
.card:hover { transform: rotate(var(--pin)) translateY(calc(-5.94 * var(--u))); }
.card:active { transform: rotate(var(--pin)) translate(2px, 2px); }
.card .n {
  display: inline-block;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: calc(15 * var(--u));
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--paper);
  background: #111;
  border: max(1px, calc(3 * var(--u))) solid #000;
  padding: calc(3.78 * var(--u)) calc(7.56 * var(--u)) calc(2.7 * var(--u));
}
.card h3 {
  --tilt: -2.4deg;
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: calc(12.96 * var(--u)) 0 calc(17.28 * var(--u));
  background: var(--paper);
  color: #111;
  border: max(1px, calc(4 * var(--u))) solid #000;
  box-shadow:
    calc(1.296 * var(--u)) calc(1.296 * var(--u)) 0 #000,
    calc(2.592 * var(--u)) calc(2.592 * var(--u)) 0 #000,
    calc(3.888 * var(--u)) calc(3.888 * var(--u)) 0 #000,
    calc(5.4 * var(--u)) calc(5.4 * var(--u)) 0 #000,
    calc(8.856 * var(--u)) calc(8.856 * var(--u)) 0 var(--paper);
  padding: calc(5.94 * var(--u)) calc(14.04 * var(--u)) calc(4.32 * var(--u)) calc(21.6 * var(--u));
  font-size: var(--text-body);
  font-weight: 900;
  line-height: 1.2;
  transform: rotate(var(--tilt));
  transform-origin: left center;
}
.card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(9.18 * var(--u));
  background: #111;
}
.card:nth-child(odd) h3 {
  --tilt: -2.6deg;
  background: var(--hover);
  box-shadow:
    calc(1.296 * var(--u)) calc(1.296 * var(--u)) 0 #000,
    calc(2.592 * var(--u)) calc(2.592 * var(--u)) 0 #000,
    calc(3.888 * var(--u)) calc(3.888 * var(--u)) 0 #000,
    calc(5.4 * var(--u)) calc(5.4 * var(--u)) 0 #000,
    calc(9.72 * var(--u)) calc(9.72 * var(--u)) 0 var(--hover);
}
.card:nth-child(even) h3 { --tilt: 2.2deg; }
.card:nth-child(3) h3 { --tilt: 1.6deg; }
.card:nth-child(4) h3 { --tilt: -1.8deg; }
.card:nth-child(5) h3 { --tilt: 2.4deg; }
.card:nth-child(6) h3 { --tilt: -2deg; }
.card p {
  font-size: var(--text-read);
  line-height: 1.7;
  color: #111;
}

/* old shelf removed: work.html is the works station */
.hero, .pane {
  position: relative;
  height: calc(1080 * var(--u));
  background: #000;
  overflow: hidden;
}
.pane--pack {
  background: #111;
  padding: calc(75.6 * var(--u)) calc(80.64 * var(--u)) calc(54 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(25.92 * var(--u));
}
.pane--pack::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background: repeating-radial-gradient(circle, var(--paper) 0 0.5px, transparent 0.5px calc(8 * var(--u)));
  mask-image: radial-gradient(ellipse 70% 55% at 0% 0%, #000 0 35%, transparent 70%);
}
.pack-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: calc(17.28 * var(--u));
  flex: 0 0 auto;
}
.pack-head .intro-tag { margin-bottom: 0; }
.pack-title {
  font-size: var(--text-title);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--paper);
  white-space: nowrap;
}
.pack-grid {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(23.76 * var(--u)) calc(34.56 * var(--u));
}
.pack-card {
  background: var(--paper);
  color: #111;
  border: max(1px, calc(4 * var(--u))) solid #000;
  box-shadow: calc(4.86 * var(--u)) calc(4.86 * var(--u)) 0 #000;
  padding: calc(23.76 * var(--u)) calc(34.56 * var(--u)) calc(21.6 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(12.96 * var(--u));
  min-width: 0;
  min-height: 0;
}
.pack-card .n {
  display: inline-block;
  align-self: flex-start;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: calc(13 * var(--u));
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--paper);
  background: #111;
  border: max(1px, calc(3 * var(--u))) solid #000;
  box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #000;
  padding: calc(2.7 * var(--u)) calc(7.56 * var(--u));
}
.pack-card h3 {
  font-size: var(--text-body);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.pack-card p {
  font-size: var(--text-read);
  line-height: 1.7;
  opacity: 0.88;
}
.hero > video, .hero > canvas, .hero > .stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero--manga {
  background: #111;
}
.hero--method {
  --method-edge: calc(61.44 * var(--u));
  overflow: hidden;
}
.method-mast {
  position: absolute;
  z-index: 5;
  left: var(--method-edge);
  right: var(--method-edge);
  top: calc(64.8 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(18 * var(--u));
  pointer-events: none;
}
.method-mast__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(12.96 * var(--u));
}
.method-mast__row .intro-tag {
  margin-bottom: 0;
}
.method-mast__title {
  font-size: var(--text-title);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: var(--paper);
  white-space: nowrap;
}
.method-mast__dek {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.45;
  color: var(--paper);
  max-width: 46em;
}
.method-keys {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.method-key.tag-slot {
  position: absolute;
  margin: 0;
  pointer-events: auto;
  opacity: 0;
  transform: translate(calc(10 * var(--u)), -50%);
}
.method-keys.is-in .method-key.tag-slot {
  animation: tag-slam 0.5s cubic-bezier(0.16, 1.35, 0.32, 1) both;
}
.method-keys.is-in .method-key:nth-child(1) { animation-delay: 0.06s; }
.method-keys.is-in .method-key:nth-child(2) { animation-delay: 0.12s; }
.method-keys.is-in .method-key:nth-child(3) { animation-delay: 0.18s; }
.method-keys.is-in .method-key:nth-child(4) { animation-delay: 0.24s; }
.method-keys.is-in .method-key:nth-child(5) { animation-delay: 0.30s; }
.method-key .tag {
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
  appearance: none;
  -webkit-appearance: none;
}
.method-key .tag:focus-visible {
  outline: calc(3 * var(--u)) solid var(--hover);
  outline-offset: 2px;
}
.method-key .tag.tag--jump:focus-visible {
  outline: calc(3 * var(--u)) solid #111;
  outline-offset: 2px;
}
/* 右栏纸卡对齐 skills pack-card；标题黄标对齐 INTRO */
.method-layout {
  position: absolute;
  inset: calc(216 * var(--u)) var(--method-edge) calc(48.6 * var(--u)) var(--method-edge);
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(620 * var(--u)), calc(640 * var(--u)));
  gap: calc(46.08 * var(--u));
  align-items: stretch;
  pointer-events: none;
}
.method-copy {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: calc(25.92 * var(--u));
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.method-dock[hidden] {
  display: none !important;
}
.method-dock {
  position: relative;
  z-index: 6;
  width: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  pointer-events: auto;
  overflow: hidden;
}
.method-dock.is-unrolled {
  gap: calc(23.76 * var(--u));
}
.method-dock .pack-card.method-card {
  flex: 0 0 auto;
  pointer-events: auto;
  gap: calc(18 * var(--u));
}
.method-card__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(10.8 * var(--u));
}
.method-card__head .n {
  align-self: center;
  flex: 0 0 auto;
}
.method-card__head h3.intro-tag {
  margin-bottom: 0;
  font-family: var(--display), "Big Shoulders Display", sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.22em;
  color: #111;
  white-space: nowrap;
}
.method-card__body > p,
.method-card__scroll > p {
  margin: calc(10 * var(--u)) 0 0;
  font-size: var(--body-read);
  line-height: var(--body-lh);
  opacity: 0.88;
  text-wrap: pretty;
}
.method-card__body > p:first-child,
.method-card__scroll > p:first-child {
  margin-top: 0;
}
.method-card__body > p:first-child {
  font-weight: 900;
}
.method-koubiao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 calc(12.48 * var(--u));
  align-items: start;
  margin: calc(12.96 * var(--u)) 0 calc(6.48 * var(--u));
  width: 100%;
}
.method-koubiao:first-child {
  margin-top: 0;
}
.method-koubiao__sq {
  display: block;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  margin-top: 0.42em;
  flex-shrink: 0;
  background: var(--hover);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
}
.method-card .method-koubiao h4 {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 900;
  line-height: 1.2;
  color: #111;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.method-card__chrome {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.method-card__chrome--foot {
  justify-content: flex-end;
  margin-top: auto;
}
.method-card__expand {
  padding: calc(4 * var(--u)) 0;
  border: 0;
  background: transparent;
  color: #111;
  font-size: calc(18 * var(--u));
  font-weight: 900;
  letter-spacing: 0.12em;
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--u));
  cursor: pointer;
  transition: color 120ms ease;
}
.method-card__expand:hover,
.method-card__expand:active {
  color: var(--hover);
}
.method-card__expand:focus-visible {
  outline: calc(3 * var(--u)) solid var(--hover);
  outline-offset: calc(3 * var(--u));
}
.method-card--scroll {
  position: relative;
  margin-top: 0;
  padding-top: calc(23.76 * var(--u));
  border-color: transparent;
  box-shadow: none;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  transition:
    transform 200ms cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 200ms ease,
    max-height 200ms cubic-bezier(0.645, 0.045, 0.355, 1),
    visibility 0s linear 200ms;
}
.method-dock.is-unrolled .method-card--scroll {
  transform: scaleY(1);
  opacity: 1;
  max-height: 100%;
  border-color: #000;
  box-shadow: calc(4.86 * var(--u)) calc(4.86 * var(--u)) 0 #000;
  pointer-events: auto;
  visibility: visible;
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  transition:
    transform 200ms cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 200ms ease,
    max-height 200ms cubic-bezier(0.645, 0.045, 0.355, 1),
    visibility 0s;
}
.method-card__badge {
  display: block;
  margin: 0 0 calc(10.8 * var(--u)) auto;
  font-size: calc(12 * var(--u));
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-align: right;
  white-space: nowrap;
  opacity: 0.7;
  color: #111;
}
.method-card__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-top: 0;
  padding-right: calc(6 * var(--u));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #111 var(--paper);
}
.method-card__scroll::-webkit-scrollbar {
  width: calc(8 * var(--u));
}
.method-card__scroll::-webkit-scrollbar-thumb {
  background: #111;
}
@media (prefers-reduced-motion: reduce) {
  .method-card--scroll {
    transition: none;
    transform: none;
  }
  .method-dock.is-unrolled .method-card--scroll {
    transition: none;
    transform: none;
  }
  .method-key,
  .method-keys.is-in .method-key,
  .method-keys.is-in .method-key:hover {
    animation: none;
    opacity: 1;
    transform: translate(calc(10 * var(--u)), -50%);
  }
  .method-key .tag:hover {
    transform: rotate(var(--tilt)) rotateY(-11deg);
  }
}
.hero--manga::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  background: repeating-radial-gradient(circle, var(--paper) 0 0.5px, transparent 0.5px calc(8 * var(--u)));
  mask-image: radial-gradient(ellipse 70% 55% at 0% 0%, #000 0 35%, transparent 70%);
}
.hero-tag {
  position: absolute;
  left: calc(61.44 * var(--u));
  top: calc(64.8 * var(--u));
  z-index: 5;
}
.shell-hero {
  position: relative;
  z-index: 2;
  padding: calc(194.4 * var(--u)) calc(115.2 * var(--u)) 0;
  max-width: min(calc(1382.4 * var(--u)), calc(1100 * var(--u)));
}
.shell-hero .intro-tag { margin-bottom: calc(17.28 * var(--u)); }
.shell-hero h2 {
  font-size: var(--text-mega);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 900;
  white-space: nowrap;
}
.shell-hero p {
  margin-top: calc(20 * var(--u));
  font-size: var(--text-body);
  line-height: 1.55;
  max-width: 30em;
  opacity: 0.88;
}
.hero--gusu .comic-side {
  position: absolute;
  left: calc(61.44 * var(--u));
  top: calc(129.6 * var(--u));
  z-index: 4;
  max-width: none;
}
.hero--gusu .comic-side .intro-tag { display: block; }
.hero--gusu .comic-side h2 {
  font-size: var(--text-mega-sm);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-weight: 900;
}
.hero--gusu .comic-side p {
  margin-top: calc(18 * var(--u));
  font-size: var(--text-body);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0.92;
}
.phone-stage {
  position: absolute;
  right: calc(46.08 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: min(calc(1382.4 * var(--u)), calc(1100 * var(--u)));
  z-index: 3;
}
.phone-stage::before { content: none; }
.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.35;
  padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));
  border-radius: max(1px, calc(36 * var(--u)));
  background:
    repeating-radial-gradient(circle at 20% 0, #2a2a2a 0 1px, transparent 1px calc(7 * var(--u))),
    linear-gradient(180deg, #2a2a2a, #111 42%, #0a0a0a);
  border: max(1px, calc(5 * var(--u))) solid #111;
  box-shadow:
    0 0 0 calc(3 * var(--u)) var(--paper),
    0 0 0 calc(8 * var(--u)) #111,
    calc(8 * var(--u)) calc(8 * var(--u)) 0 #000,
    calc(10 * var(--u)) calc(10 * var(--u)) 0 var(--paper);
  transform: rotate(-1.4deg);
  z-index: 1;
}
.phone__ear {
  position: absolute;
  top: calc(8 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  z-index: 2;
}
.phone__ear b {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: #3a3a3a;
  box-shadow: inset 0 0 0 2px #111, 0 0 0 1px #555;
}
.phone__ear span {
  width: calc(72 * var(--u));
  height: calc(6 * var(--u));
  border-radius: max(1px, calc(6 * var(--u)));
  background: #1a1a1a;
  box-shadow: inset 0 1px 2px #000;
}
.phone__side {
  position: absolute;
  background: #0c0c0c;
  border: 2px solid #111;
  z-index: 0;
}
.phone__side--vol {
  left: calc(-8 * var(--u));
  top: 22%;
  width: calc(8 * var(--u));
  height: calc(68 * var(--u));
  border-radius: max(1px, calc(3 * var(--u))) 0 0 max(1px, calc(3 * var(--u)));
}
.phone__side--pwr {
  right: calc(-8 * var(--u));
  top: 32%;
  width: calc(7 * var(--u));
  height: calc(42 * var(--u));
  border-radius: 0 max(1px, calc(3 * var(--u))) max(1px, calc(3 * var(--u))) 0;
  background: #1a1a1a;
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: max(1px, calc(10 * var(--u)));
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #1c1c1c, inset 0 0 0 calc(5 * var(--u)) #111;
}
.phone__chin {
  position: absolute;
  left: 50%;
  bottom: calc(7 * var(--u));
  transform: translateX(-50%);
  z-index: 2;
}
.phone__chin i {
  display: block;
  width: calc(88 * var(--u));
  height: calc(5 * var(--u));
  border-radius: max(1px, calc(4 * var(--u)));
  background: #3a3a3a;
}
.phone video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #111;
  pointer-events: none;
}
.phone .play,
.live-screen .play,
.monitor .play {
  position: absolute;
  inset: 0 0 var(--media-bar-h, calc(52 * var(--u))) 0;
  z-index: 2;
  border: 0;
  background: rgba(8, 8, 8, 0.38);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.25s ease;
}
.phone .play:hover,
.live-screen .play:hover,
.monitor .play:hover { background: rgba(8, 8, 8, 0.16); }
.phone .play[hidden],
.live-screen .play[hidden],
.monitor .play[hidden] { display: none; }
.play__mark {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  background: var(--hover);
  color: #111;
  border: max(1px, calc(5 * var(--u))) solid #111;
  padding: calc(12 * var(--u)) calc(26 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u));
  transform: skewX(-18deg);
  box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 #111;
  animation: play-idle 1.8s ease-in-out infinite;
  transition: transform 0.28s cubic-bezier(0.2, 1.6, 0.3, 1), box-shadow 0.28s ease, background 0.2s ease;
}
.phone .play:hover .play__mark,
.live-screen .play:hover .play__mark,
.monitor .play:hover .play__mark {
  animation: none;
  background: #f4de6a;
  transform: skewX(-18deg) translate(calc(-7 * var(--u)), calc(-9 * var(--u))) scale(1.08);
  box-shadow: calc(15 * var(--u)) calc(17 * var(--u)) 0 #111;
}
.phone .play:active .play__mark,
.live-screen .play:active .play__mark,
.monitor .play:active .play__mark {
  transform: skewX(-18deg) translate(-2px, -2px) scale(0.98);
  box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 #111;
}
@keyframes play-idle {
  0%, 100% { transform: skewX(-18deg) translateY(0); }
  50% { transform: skewX(-18deg) translateY(calc(-6 * var(--u))); }
}
.play__mark svg {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  fill: #111;
  transform: skewX(18deg);
}
.play__mark b {
  font-size: calc(28 * var(--u));
  font-weight: 900;
  letter-spacing: 0.18em;
  transform: skewX(18deg);
}
.prologue {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
}
.hero--rubic.is-live .prologue.is-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.hero--rubic.is-live .prologue[hidden] { display: none; }
.prologue video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.prologue-ph,
.live-screen .ph,
.monitor .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--text-body);
  letter-spacing: 0.16em;
  color: var(--paper);
  opacity: 0.7;
  background:
    repeating-linear-gradient(45deg, transparent, transparent calc(8 * var(--u)), var(--paper) calc(8 * var(--u)), var(--paper) calc(10 * var(--u)));
}
.prologue.is-playing .prologue-ph { display: none; }
.skip {
  position: absolute;
  right: calc(57.6 * var(--u));
  top: calc(32.4 * var(--u));
  bottom: auto;
  z-index: 26;
  border: 2px solid var(--paper);
  background: #111;
  color: var(--paper);
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  font-size: calc(14 * var(--u));
  letter-spacing: 0.12em;
  cursor: pointer;
}
.live-layout {
  display: none;
  position: absolute;
  inset: calc(86.4 * var(--u)) calc(76.8 * var(--u)) calc(64.8 * var(--u)) calc(57.6 * var(--u));
  z-index: 2;
  grid-template-columns: minmax(0, 1.4fr) minmax(calc(240 * var(--u)), 0.9fr);
  gap: calc(61.44 * var(--u));
  align-items: center;
}
.hero--rubic.is-live .live-layout {
  display: grid;
  align-items: stretch;
  animation: rubic-live-in 0.65s ease 0.08s both;
}
@keyframes rubic-live-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}
.live-chrome {
  min-width: 0;
  align-self: center;
  border: max(1px, calc(6 * var(--u))) solid var(--paper);
  background: #0c0c0c;
  box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 #000, calc(10 * var(--u)) calc(10 * var(--u)) 0 var(--paper);
}
.live-head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  border-bottom: max(1px, calc(3 * var(--u))) solid var(--paper);
  padding: calc(10 * var(--u)) calc(14 * var(--u));
}
.live-head .intro-tag { margin: 0; }
.live-title {
  min-width: 0;
  font-size: var(--text-body);
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
.live-screen video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #111;
  pointer-events: none;
}
.hero--rubic .live-screen .play {
  z-index: 3;
}
.hero--rubic.has-live-src .live-screen .ph { display: none; }
.media-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  background: rgba(8, 8, 8, 0.88);
  border-top: max(1px, calc(3 * var(--u))) solid var(--paper);
  color: var(--paper);
  font-size: calc(13 * var(--u));
  font-weight: 900;
  letter-spacing: 0.04em;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}
.media-bar__play {
  flex: 0 0 auto;
  min-width: calc(32 * var(--u));
  height: calc(28 * var(--u));
  border: max(1px, calc(3 * var(--u))) solid var(--paper);
  background: var(--hover);
  color: #111;
  font-weight: 900;
  cursor: pointer;
}
.media-bar__track {
  flex: 1 1 auto;
  position: relative;
  height: calc(18 * var(--u));
  background: #333;
  border: 2px solid var(--paper);
  cursor: pointer;
  touch-action: none;
}
.media-bar__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-12 * var(--u));
  bottom: calc(-12 * var(--u));
}
.media-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--hover);
  pointer-events: none;
}
.media-bar__time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.live-copy {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero--rubic .live-copy__chrome {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.hero--rubic .live-copy__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.hero--rubic .live-copy h2 {
  font-size: var(--text-h2);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 900;
}
.hero--rubic .live-copy .live-dek {
  margin-top: calc(10 * var(--u));
  font-size: max(calc(12 * var(--u)), calc(18 * var(--u)));
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.82;
  max-width: 26em;
}
/* 正文与身份页 EXPERIENCE 轴说明一致：20px / 1.7 */
.hero--rubic .live-copy .live-sec {
  margin-top: calc(12 * var(--u));
  max-width: 26em;
}
.hero--rubic .live-copy .live-sec--first {
  margin-top: calc(10 * var(--u));
}
.hero--rubic .live-copy .live-sec__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 calc(10 * var(--u));
  align-items: start;
  margin-bottom: calc(6 * var(--u));
}
.hero--rubic .live-copy .live-sec__mark {
  display: block;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  margin-top: 0.42em;
  background: var(--hover);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  flex-shrink: 0;
}
.hero--rubic .live-copy .live-sec__label {
  margin: 0;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 900;
  letter-spacing: 0;
  color: var(--paper);
  line-height: 1.2;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.hero--rubic .live-copy .live-sec p {
  margin: 0;
  font-size: var(--body-read);
  line-height: var(--body-lh);
  opacity: 0.88;
}
.hero--rubic .live-copy .live-lead {
  font-weight: 900;
}
.hero--rubic .live-copy .live-dl-wrap {
  white-space: nowrap;
}
.hero--rubic .live-copy .live-dl {
  font-size: calc(var(--body-read) - 2px);
  color: var(--hover);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: calc(3 * var(--u));
}
.hero--rubic .live-copy .live-dl:hover {
  color: var(--paper);
  background: var(--hover);
  box-decoration-break: clone;
}
.hero .cap {
  position: absolute;
  left: calc(61.44 * var(--u));
  bottom: calc(54 * var(--u));
  z-index: 3;
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: 0;
  opacity: 0.88;
  max-width: 28em;
}
.chap {
  min-height: calc(1080 * var(--u));
  padding: calc(86.4 * var(--u)) calc(115.2 * var(--u)) calc(80 * var(--u));
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: calc(40 * var(--u));
  align-items: center;
  border-top: max(1px, calc(4 * var(--u))) solid var(--paper);
  background: #111;
  position: relative;
}
.chap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background: repeating-radial-gradient(circle, var(--paper) 0 0.5px, transparent 0.5px calc(8 * var(--u)));
  mask-image: radial-gradient(ellipse 60% 50% at 100% 0%, #000 0 30%, transparent 65%);
}
.chap .copy, .chap .frame, .chap .triad, .chap .dossier { position: relative; z-index: 1; }
.chap .intro-tag { margin-bottom: calc(15.12 * var(--u)); }
.chap h2 {
  font-size: var(--text-poster);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 900;
}
.chap h2.is-fill {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--paper);
  animation: chap-fill 560ms 80ms forwards;
}
@keyframes chap-fill {
  to {
    color: var(--paper);
    -webkit-text-stroke: 0 transparent;
  }
}
.chap p { font-size: var(--text-body); line-height: 1.55; max-width: 30em; margin-top: calc(16 * var(--u)); opacity: 0.88; }
.chap .em-bold { font-weight: 900; }
.chap--rubic p {
  font-size: var(--body-read);
  line-height: var(--body-lh);
}
.chap--rubic .chap-label {
  margin-top: calc(16 * var(--u));
  font-size: var(--body-read);
  font-weight: 900;
  line-height: var(--body-lh);
  opacity: 0.92;
}
.chap-visual {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  min-width: 0;
}
.chap-visual .chap-tags { margin: 0; }
.chap-visual .tags-row { flex-wrap: wrap; }
.chap--rubic-p1 {
  align-items: center;
  align-content: center;
  grid-template-columns: minmax(0, 1.42fr) minmax(calc(240 * var(--u)), 0.88fr);
  gap: calc(28 * var(--u));
}
.chap--rubic-p1 .chap-panel {
  border: max(1px, calc(4 * var(--u))) solid var(--paper);
  background: #111;
  padding: calc(25.92 * var(--u)) calc(38.4 * var(--u)) calc(28.08 * var(--u));
  box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #000, calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--paper);
  min-width: 0;
}
.chap--rubic-p1 .chap-panel h2 {
  font-size: var(--text-h2);
  line-height: 1.12;
}
.chap--rubic-p1 .chap-panel p {
  max-width: none;
  margin-top: calc(14 * var(--u));
}
.chap-p1-stack {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  min-width: 0;
}
.chap--rubic-p1 .chap-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  align-self: center;
  margin: 0;
}
.chap-fig__media {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.chap-fig__cap {
  flex: 0 0 auto;
  width: 100%;
  color: var(--paper);
  font-size: var(--body-read);
  line-height: var(--body-lh);
  opacity: 0.88;
  text-align: center;
  max-width: 28em;
  padding: calc(12 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u));
}
.chap-fig__hint {
  display: block;
  margin-top: 0.15em;
  font-size: calc(13 * var(--u));
  line-height: 1.4;
  font-weight: 400;
  opacity: 0.72;
}
body.snap .chap--rubic-p1.is-on,
body.snap .chap--rubic-eval.is-on,
body.snap .chap--rubic-fix.is-on {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.snap .chap--rubic-p1.is-on {
  align-items: center;
  align-content: center;
}
.chap-tags--inline .tags-row {
  flex-wrap: nowrap;
  gap: calc(12.96 * var(--u)) calc(15.12 * var(--u));
}
.chap-tags--inline .tag-slot {
  flex-shrink: 0;
}
.fig-zoom {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
}
.chap--rubic-p1 .fig-zoom {
  max-width: 100%;
  line-height: 0;
}
.fig-zoom img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(calc(820.8 * var(--u)), calc(860 * var(--u)));
  object-fit: contain;
}
.chap--rubic-p1 .fig-zoom img {
  display: block;
  width: min(100%, calc(400 * var(--u)));
  height: auto;
  aspect-ratio: 680 / 1214;
  max-height: min(calc(604.8 * var(--u)), calc(700 * var(--u)));
  object-fit: contain;
  object-position: top center;
}
.fig-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.92);
  cursor: grab;
}
.fig-lightbox[hidden] { display: none; }
.fig-lightbox.is-dragging { cursor: grabbing; }
.fig-lightbox__stage {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.fig-lightbox__stage img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  max-width: min(calc(1843.2 * var(--u)), calc(1200 * var(--u)));
  max-height: calc(950.4 * var(--u));
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
.fig-lightbox__hint {
  flex-shrink: 0;
  padding: calc(8 * var(--u)) calc(76.8 * var(--u)) calc(12 * var(--u));
  font-size: calc(14 * var(--u));
  opacity: 0.55;
  text-align: center;
}
.fig-lightbox__close {
  position: absolute;
  top: calc(32.4 * var(--u));
  right: calc(76.8 * var(--u));
  border: 2px solid var(--paper);
  background: #111;
  color: var(--paper);
  font-size: calc(28 * var(--u));
  line-height: 1;
  padding: calc(6 * var(--u)) calc(14 * var(--u));
  cursor: pointer;
}
body.fig-lightbox-open { overflow: hidden; }
.chap-sec__head,
.chap-block__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 calc(10 * var(--u));
  align-items: start;
  margin-top: calc(14 * var(--u));
  margin-bottom: calc(4 * var(--u));
}
.chap-panel > .chap-block:first-of-type .chap-block__head,
.chap-panel > .chap-block:first-of-type { margin-top: 0; }
.chap-sec__mark,
.chap-block__mark {
  display: block;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  margin-top: 0.45em;
  flex-shrink: 0;
  background: var(--hover);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
}
.chap--rubic .chap-sec__label {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 900;
  line-height: 1.2;
  color: var(--paper);
  letter-spacing: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.chap-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 calc(12 * var(--u));
  margin-top: calc(14 * var(--u));
}
.chap-block__mark { grid-column: 1; grid-row: 1; }
.chap-block > p {
  grid-column: 2;
  margin-top: 0 !important;
}
.chap-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 calc(12 * var(--u));
  margin-top: calc(10 * var(--u));
}
.chap-point > p { margin-top: 0 !important; }
.chap--rubic .copy--read p {
  max-width: 26em;
  text-wrap: pretty;
}
.chap--rubic-eval,
.chap--rubic-fix {
  width: min(calc(1180 * var(--u)), calc(1728 * var(--u)));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.chap--rubic-p1 {
  width: min(calc(1280 * var(--u)), calc(1804.8 * var(--u)));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.chap--rubic-p1 .chap-panel p {
  text-wrap: pretty;
}

  .chap--rubic-p1 .chap-keep-tail {
    white-space: nowrap;
  }

.chap--rubic-eval h2,
.chap--rubic-fix h2 {
  font-size: var(--text-h2);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.chap--rubic-eval .copy--read {
  padding-left: calc(40 * var(--u));
}
.chap--rubic-eval .copy--read p,
.chap--rubic-eval .chap-sec > p {
  max-width: 40em;
}
.chap--rubic-fix .copy--read p,
.chap--rubic-fix .chap-point > p {
  max-width: 40em;
}

  .chap-line-nowrap {
    white-space: nowrap;
    max-width: none;
  }

.chap-sec > p {
  margin-top: calc(8 * var(--u));
}
.chap-visual .frame--img {
  flex: 1 1 auto;
  min-height: calc(453.6 * var(--u));
  max-height: calc(756 * var(--u));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--paper);
}
.chap-visual .frame--img.frame--still {
  background-size: contain;
  background-position: center center;
  background-color: #111;
}
.frame {
  border: max(1px, calc(4 * var(--u))) solid var(--paper);
  min-height: calc(453.6 * var(--u));
  max-height: calc(756 * var(--u));
  background: #1a1a1a center/cover no-repeat;
  box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #000, calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--paper);
}
.frame--empty {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background:
    repeating-linear-gradient(45deg, transparent, transparent calc(8 * var(--u)), var(--paper) calc(8 * var(--u)), var(--paper) calc(10 * var(--u)));
}
.chap:nth-child(even) { grid-template-columns: 1fr 1.1fr; }
.chap:nth-child(even) .copy { order: 2; }

.hero--pets {
  --pet-h: min(calc(237.6 * var(--u)), calc(240 * var(--u)));
  --pet-w: calc(var(--pet-h) * 192 / 208);
}
.pet-layout {
  position: absolute;
  inset: calc(86.4 * var(--u)) calc(76.8 * var(--u)) calc(64.8 * var(--u)) calc(57.6 * var(--u));
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(calc(220 * var(--u)), 0.65fr);
  gap: calc(61.44 * var(--u));
  align-items: center;
}
.pet-stage {
  min-width: 0;
  position: relative;
}
.pet-slam-lines {
  position: absolute;
  inset: -18% 22% -18% -8%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    -11deg,
    transparent 0 calc(14 * var(--u)),
    #f4f1ea22 calc(14 * var(--u)) calc(16 * var(--u)),
    transparent calc(16 * var(--u)) calc(26 * var(--u))
  );
  mask-image: linear-gradient(90deg, #000 0 45%, transparent 92%);
}
.pet-stage.is-slamming .pet-slam-lines {
  animation: pet-slam-lines 0.55s ease-out both;
}
@keyframes pet-slam-lines {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.pet-chrome {
  position: relative;
  z-index: 2;
  min-width: 0;
  border: max(1px, calc(6 * var(--u))) solid var(--paper);
  background: #0c0c0c;
  box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 #000, calc(10 * var(--u)) calc(10 * var(--u)) 0 var(--paper);
  overflow: visible;
  opacity: 0;
  transform: scale(0.78) rotate(-2.4deg);
}
.pet-chrome.is-in {
  opacity: 1;
  transform: none;
  animation: pet-slam 0.55s cubic-bezier(0.16, 1.3, 0.32, 1) both;
}
@keyframes pet-slam {
  0% { opacity: 0; transform: scale(0.72) rotate(-3deg); }
  72% { opacity: 1; transform: scale(1.04) rotate(0.5deg); }
  100% { opacity: 1; transform: none; }
}
.pet-chrome .live-screen { overflow: hidden; }
.hero--pets .pet-chrome .media-bar,
.hero--pets .monitor .media-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.hero--pets .monitor .play {
  inset: 0 0 var(--media-bar-h, calc(52 * var(--u))) 0;
}
.pet-copy {
  min-width: 0;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(calc(10 * var(--u)));
}
.pet-copy canvas {
  display: block;
  height: var(--pet-h);
  width: var(--pet-w);
  margin: 0 auto -26%;
  pointer-events: none;
  filter: drop-shadow(calc(4 * var(--u)) calc(4 * var(--u)) 0 #000);
}
.pet-mount {
  position: relative;
  width: min(100%, 18em);
  margin: 0 0 calc(23.76 * var(--u));
  transform-origin: left bottom;
  transition: transform 180ms cubic-bezier(0.2, 1.5, 0.3, 1);
}
.pet-mount:hover {
  transform: translateY(calc(-6.48 * var(--u)));
}
.pet-mount canvas {
  position: relative;
  z-index: 2;
}
.pet-mount__seat {
  position: relative;
  z-index: 1;
  background: var(--hover);
  color: #111;
  border: max(1px, calc(5 * var(--u))) solid #111;
  box-shadow: calc(7.56 * var(--u)) calc(7.56 * var(--u)) 0 #000, calc(12.96 * var(--u)) calc(12.96 * var(--u)) 0 var(--hover);
  padding: calc(60.48 * var(--u)) calc(25.92 * var(--u)) calc(23.76 * var(--u));
  transform: rotate(-5deg);
  transform-origin: left center;
  border-radius: 62% 38% 50% 48% / 78% 68% 32% 22%;
}
.pet-mount__name {
  --tile: clamp(calc(48 * var(--u)), calc(69.12 * var(--u)), calc(64 * var(--u)));
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: calc(5.4 * var(--u));
  white-space: nowrap;
}
.pet-mount__name span {
  box-sizing: border-box;
  flex: 0 0 var(--tile);
  width: var(--tile);
  height: var(--tile);
  display: grid;
  place-items: center;
  background: var(--paper);
  color: #111;
  border: max(1px, calc(4 * var(--u))) solid #000;
  box-shadow: calc(3.78 * var(--u)) calc(3.78 * var(--u)) 0 #000;
  border-radius: 0;
  font-family: var(--display), "Big Shoulders Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(var(--tile) * 0.5);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  transform-origin: left bottom;
  transition: transform 180ms cubic-bezier(0.2, 1.5, 0.3, 1);
}
.pet-mount__name span:hover {
  transform: translateY(calc(-5.4 * var(--u))) scale(1.04);
}
.pet-chip {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  box-sizing: border-box;
  background: transparent;
  animation: pet-chip-float 3.8s ease-in-out infinite;
}
.pet-chip--o {
  border-radius: 50%;
}
.pet-chip--s {
  border-radius: 2px;
  transform: rotate(18deg);
}
.pet-chip--paper { border: max(1px, calc(3 * var(--u))) solid var(--paper); }
.pet-chip--ink { border: max(1px, calc(3 * var(--u))) solid #111; }
.pet-chip--yellow { border: max(1px, calc(3 * var(--u))) solid var(--hover); }
.pet-chip.a { width: calc(18 * var(--u)); height: calc(18 * var(--u)); top: calc(-11 * var(--u)); left: 9%; animation-delay: -0.4s; }
.pet-chip.b { width: calc(16 * var(--u)); height: calc(16 * var(--u)); top: 14%; right: calc(-12 * var(--u)); animation-duration: 4.4s; animation-delay: -1.1s; }
.pet-chip.c { width: calc(22 * var(--u)); height: calc(22 * var(--u)); bottom: 22%; left: calc(-13 * var(--u)); animation-duration: 4s; animation-delay: -2s; }
.pet-chip.d { width: calc(15 * var(--u)); height: calc(15 * var(--u)); bottom: calc(-10 * var(--u)); right: 11%; animation-duration: 3.5s; animation-delay: -0.7s; }
.pet-chip.e { width: calc(16 * var(--u)); height: calc(16 * var(--u)); top: 10%; left: calc(-8 * var(--u)); animation-duration: 4.1s; animation-delay: -1.6s; }
.pet-chip.f { width: calc(14 * var(--u)); height: calc(14 * var(--u)); top: 36%; right: calc(-9 * var(--u)); animation-duration: 3.6s; animation-delay: -0.2s; }
.pet-chip.g { width: calc(18 * var(--u)); height: calc(18 * var(--u)); bottom: 14%; left: 16%; animation-duration: 4.3s; animation-delay: -2.4s; }
.pet-chrome .pet-chip { opacity: 0; }
.pet-chrome.is-in .pet-chip { opacity: 1; transition: opacity 180ms ease; }
@keyframes pet-chip-float {
  0%, 100% { translate: 0 0; }
  50% { translate: calc(3 * var(--u)) calc(-8 * var(--u)); }
}
.pet-copy h2 {
  font-size: max(calc(12 * var(--u)), calc(64 * var(--u)));
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 900;
}
.pet-copy p {
  margin-top: calc(16 * var(--u));
  font-size: var(--text-body);
  line-height: 1.55;
  max-width: 22em;
  opacity: 0.88;
}
.hero--pets.is-parked .pet-copy {
  opacity: 1;
  transform: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.hero--pets.has-live-src .monitor .ph { display: none; }
.hero--pets:not(.is-ready) .monitor .play {
  opacity: 0;
  pointer-events: none;
}

.lineup {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(38.4 * var(--u));
  height: 100%;
}
.lineup img { height: calc(345.6 * var(--u)); width: auto; }
.triad {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.triad article {
  border: max(1px, calc(4 * var(--u))) solid var(--paper);
  padding: calc(18 * var(--u)) calc(16 * var(--u));
  margin: -2px;
  min-height: calc(345.6 * var(--u));
  background: #111;
  transition: border-width 150ms;
}
.triad article:hover { border-width: max(1px, calc(6 * var(--u))); }
.triad h3 { font-size: var(--text-body); margin-bottom: calc(10 * var(--u)); font-weight: 900; }
.triad p { font-size: var(--text-body); line-height: 1.55; opacity: 0.88; }
.dossier {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.dossier div {
  border: max(1px, calc(4 * var(--u))) solid var(--paper);
  padding: calc(20 * var(--u));
  margin: -2px;
  min-height: calc(302.4 * var(--u));
  transition: border-width 150ms;
}
.dossier div:hover { border-width: max(1px, calc(6 * var(--u))); }
.dossier h3 { margin-bottom: calc(8 * var(--u)); font-size: var(--text-body); font-weight: 900; }
.dossier p { font-size: var(--text-body); line-height: 1.55; }
.path { letter-spacing: 0; font-size: var(--text-body); line-height: 1.55; opacity: 0.8; margin-top: calc(12 * var(--u)); }
.chap > .copy,
.chap > .frame,
.chap > .chap-visual {
  min-width: 0;
}
.frame img,
.frame--pet img,
.chap-visual img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.frame--pet {
  display: grid;
  place-items: center;
  background: #111;
  overflow: hidden;
}
.contrast {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(32 * var(--u));
  height: 100%;
}
.contrast img { height: calc(388.8 * var(--u)); width: auto; }
.contrast img.dim { height: calc(237.6 * var(--u)); opacity: 0.4; }


@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .tag-slot { animation: none; opacity: 1; translate: none; }
  html:not(.motion-on) .tag { animation: none; }
  html:not(.motion-on) .id-name span, html:not(.motion-on) .id-stamp, html:not(.motion-on) .card { transition: none; }
  html:not(.motion-on) .id-name span:hover { transform: none; }
  html:not(.motion-on) .id-stamp:hover { transform: rotate(3deg); }
  html:not(.motion-on) .card:hover { transform: rotate(var(--pin)); }
  html:not(.motion-on) .card:active { transform: none; }
  html:not(.motion-on) .chap h2.is-fill {
    animation: none;
    color: var(--paper);
    -webkit-text-stroke: 0;
  }
  html:not(.motion-on) .play__mark { animation: none; }
  html:not(.motion-on) .pet-chrome, html:not(.motion-on) .pet-chrome.is-in, html:not(.motion-on) .pet-copy,
  html:not(.motion-on) .hero--pets.is-parked .pet-copy { animation: none; transition: none; }
  html:not(.motion-on) .pet-chrome { opacity: 1; transform: none; }
  html:not(.motion-on) .pet-copy { opacity: 1; transform: none; }
  html:not(.motion-on) .pet-mount { transition: none; }
  html:not(.motion-on) .pet-mount:hover { transform: none; }
  html:not(.motion-on) .pet-mount__name span { transition: none; }
  html:not(.motion-on) .pet-mount__name span:hover { transform: none; }
  html:not(.motion-on) .pet-chip { animation: none; }
  html:not(.motion-on) .hero--rubic.is-live .live-layout { animation: none; }
  html:not(.motion-on) .hero--rubic.is-live .prologue.is-out { transition: none; }
}