:root {
  --bg: #000000;
  --nav-surface: #141414;
  --nav-text: #f2f2f2;
  --nav-muted: #9c9c9c;

  --surface: #111111;
  --text: #f3f3f3;
  --muted: #a0a0a0;
  --border: #272727;

  --accent-soft: #e8e8e8;
  --accent: #ffffff;
  --accent-deep: #cccccc;

  --accent-ink: #ffffff;
  --accent-grad: linear-gradient(115deg, #ffffff 0%, #cccccc 100%);

  --on-accent: #0a0a0a;

  --text-invert: #080808;

  --photo-bg: #1f1f1f;

  --audio: #a89bdd;
  --vision: #6fc3c4;
  --language: #9dc776;
  --cg-design: #e0a06a;
  --data: #8fb4d6;
  --side-quests: #e08a84;

  --field-entertainment: #f07b66;
  --field-media: #d9a04a;
  --field-society: #9ed17e;
  --field-science: #6aa6e8;

  --font: "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --serif: var(--font);

  --masthead: "Lexend Exa", var(--font);
  --hero: "Bricolage Grotesque", "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Lexend Zetta", "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --max: 1360px;

  --t-display: clamp(32px, 4.4vw, 52px);
  --t-lede: 21px;
  --t-h2: 28px;
  --t-h3: 19px;
  --t-body: 17px;
  --t-meta: 13px;
  --t-micro: 11px;
}

@media (max-width: 560px) {
  :root {
    --t-body: 18px;
    --t-meta: 15px;
    --t-micro: 12.5px;
  }
}

.card,
.preview-card,
.grid-row {
  --text: #111111;
  --muted: #6b6b6b;
  --surface: #ffffff;
  --border: #e4e4e4;
  --text-invert: #ffffff;

  --audio: #7a6ca8;
  --vision: #4f8a8b;
  --language: #6b8e4e;
  --cg-design: #b5713a;
  --data: #5b7a99;
  --side-quests: #b05a55;
}

:root[data-theme="light"] {
  --bg: #faf9f9;
  --nav-surface: #ffffff;
  --nav-text: #111111;
  --nav-muted: #6b6b6b;
  --surface: #ffffff;
  --text: #111111;
  --muted: #6b6b6b;

  --border: #e4e4e4;
  --accent-soft: #e6e6e6;
  --accent: #1f1f1f;
  --accent-deep: #3a3a3a;

  --accent-ink: #000000;

  --accent-grad: linear-gradient(115deg, #1f1f1f 0%, #4a4a4a 100%);
  --on-accent: #ffffff;
  --text-invert: #ffffff;
  --photo-bg: #e9e8e6;

  --audio: #7a6ca8;
  --vision: #4f8a8b;
  --language: #6b8e4e;
  --cg-design: #b5713a;
  --data: #5b7a99;

  --side-quests: #b05a55;

  --field-entertainment: #d5361a;
  --field-media: #8a5512;
  --field-society: #6fae4a;
  --field-science: #2f6fb5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  overflow-x: clip;
}

::selection { background: var(--accent-soft); color: var(--text); }

body {
  font-family: var(--font);
  color: var(--text);

  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 16px; top: 16px;
  background: var(--accent-ink); color: #fff;
  padding: 8px 14px; z-index: 200;
  font-size: 12px; border-radius: 2px;
}

#app { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

.top-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  --surface: var(--nav-surface);
  --text: var(--nav-text);
  --muted: var(--nav-muted);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  --nav-pill-h: 40px;
}
.top-nav::before { display: none; }
.top-nav::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--nav-pill-w, 320px) / 2);
  right: calc(50% - var(--nav-pill-w, 320px) / 2);
  top: 50%;
  height: var(--nav-pill-h, 40px);
  transform: translateY(-50%);
  z-index: -1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: none;
  transition: left 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), right 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
:root.nav-over .top-nav::after {
  left: -18px;
  right: -18px;
}
@media (prefers-reduced-motion: reduce) {
  .top-nav::after { transition: none; }
}
.top-nav > .wordmark { grid-column: 1; justify-self: start; }
.top-nav > .nav-links {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}
.top-nav > .nav-links > .nav-pill { grid-column: 1; justify-self: center; min-width: 0; }
.top-nav > .nav-links > .nav-end { grid-column: 2; justify-self: end; }
.top-nav > .wordmark, .top-nav > .nav-links { min-width: 0; }
.nav-pill .nav-search { min-width: 0; max-width: 100%; }

.nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 4px;
  min-height: var(--nav-pill-h, 40px);
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.nav-end { display: flex; align-items: center; gap: 10px; }

.top-nav::before {
  content: "";
  position: absolute;
  top: 0;

  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;

  background: color-mix(in srgb, var(--surface) 68%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
}
.wordmark {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  white-space: nowrap;
}
.wm-mid, .wm-min { display: none; }
@media (max-width: 1150px) {
  .wm-full { display: none; }
  .wm-mid { display: inline; }
}
@media (max-width: 900px) {
  .wm-mid { display: none; }
  .wm-min { display: inline; }
}

.nav-links { display: flex; gap: 26px; align-items: center; }

.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  width: 190px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;

  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.nav-search:hover { border-color: transparent; }

.nav-search:focus-within {
  border-color: transparent;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}

.nav-sugg {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;

  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  padding: 5px;
}

@media (max-width: 900px) {
  .nav-sugg { left: auto; right: 0; width: min(320px, 78vw); }
}

.nav-sugg-item {
  display: block; width: 100%;
  padding: 7px 10px;
  border: 0; border-radius: 8px;
  background: none; cursor: pointer;
  text-align: left; text-decoration: none;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav-sugg-item:hover, .nav-sugg-item.is-active {
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}
.nav-sugg-all {
  display: block; width: 100%;
  margin-top: 4px; padding: 8px 10px;
  border: 0; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px;
  background: none; cursor: pointer;

  font-family: var(--font); font-size: 11.5px;
  letter-spacing: normal; text-transform: none;
  color: var(--muted); text-align: left;
}
.nav-sugg-all:hover, .nav-sugg-all.is-active {
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
  color: var(--text);
}
.nav-sugg-empty { padding: 10px; font-size: 12px; color: var(--muted); }

.nav-search-go {
  flex: 0 0 30px;
  height: 100%;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: none;
  cursor: pointer;
}
.nav-search-icon {
  width: 15px; height: 15px;
  fill: none; stroke: var(--muted); stroke-width: 1.9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.15s ease;
}
.nav-search:hover .nav-search-icon,
.nav-search:focus-within .nav-search-icon { stroke: var(--accent-ink); }

.nav-pages { display: flex; gap: 4px; align-items: center; }
.nav-pill .nav-pages a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-pill .nav-pages a:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
}

.theme-toggle {
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0; flex: none;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.theme-toggle:hover { color: var(--accent-ink); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.theme-toggle .th-sun { display: none; }
:root[data-theme="light"] .theme-toggle .th-sun { display: block; }
:root[data-theme="light"] .theme-toggle .th-moon { display: none; }

.theme-toggle.nav-theme-m { display: none; }

.nav-burger {
  display: none;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  place-items: center;
  color: var(--muted);
}
.nav-burger svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
}
.nav-burger:hover { color: var(--accent-ink); }

@media (max-width: 1150px) {
  .wordmark-role { display: none; }
}

@media (max-width: 900px) {
  .nav-search { width: 30px; }
  .nav-search input { display: none; }
}

@media (max-width: 640px) {
  .nav-pages { display: none; }
  .nav-burger { display: grid; }
  .nav-pill { padding: 0; min-height: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  .nav-search { display: none; }
  .nav-end > .theme-toggle { display: none; }
  .top-nav.menu-open .nav-pages .theme-toggle.nav-theme-m { display: grid; }
  .top-nav.menu-open .nav-pages {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  }
}

.nav-search input {
  flex: 1 1 auto;
  min-width: 0;                
  border: 0;
  outline: none;
  background: none;
  padding: 0 12px 0 0;
  font: inherit;
  font-size: 12px;
  color: var(--text);
}
.nav-search input::placeholder { color: var(--muted); }

.nav-search input::-webkit-search-cancel-button { display: none; }

.top-nav a:not(.nav-sugg-item) {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-decoration: none;
}
.top-nav a:not(.nav-sugg-item):hover { color: var(--accent-ink); }

.identity {
  padding: 36px 0 0;
  display: flex;
  justify-content: space-between;

  align-items: center;
  gap: 48px;
}

.hero-me {
  flex: 0 0 50%;                 
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.identity-copy { flex: 1 1 auto; min-width: 0; }

.hero-intro {
  font-size: calc(var(--t-display) * 0.7);

  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--muted);
  max-width: 30em;

  text-wrap: balance;
}
.hero-intro b { font-weight: 600; color: var(--text); }

.hero-kicker {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(15px, 1.85vw, 27px);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.25;
}

.hero-claim {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 13em;
  text-wrap: balance;
}

.cluster {
  position: relative;
  width: 494px;   
  height: 398px;  
  flex: 0 0 auto;
}
.cluster-slot { position: absolute; }

.slot-recent { left: 0;     bottom: 36px; z-index: 1; }
.slot-pinned { left: 143px; bottom: 92px; z-index: 3; }
.slot-wip    { left: 286px; bottom: 36px; z-index: 1; }
.cluster-slot:hover { z-index: 10; }

.cluster .card { transform-origin: 50% 100%; }
.slot-recent .card { --fan: -8deg; }
.slot-pinned .card { --fan: 0deg; }
.slot-wip .card    { --fan: 8deg; }
.fan-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.8;
}

.quick-cards {
  display: flex;
  gap: 12px;
  list-style: none;
}

.quick .card:hover { --pull: -32px; }
.quick .card:hover .card-inner { box-shadow: 0 18px 32px rgba(0, 0, 0, 0.13); }

.aboutcol { --stack: 76px; }
.about-personal {
  max-width: 1000px;
  margin: var(--stack) auto 0;
}

.about-split.about-intro {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  max-width: 1180px;
}

.personal-blurb { margin: 0; }

.personal-photo {
  width: 208px;
  aspect-ratio: 1 / 1;
  border-radius: 28%;
  overflow: hidden;

  background: none;
}
.personal-photo img {
  width: 100%; height: 100%; display: block;

  object-fit: cover; object-position: center 15%;

  transform: scale(1.1);
  transform-origin: center 15%;
}

.personal-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;

  margin-top: calc(var(--stack, 76px) / 2.5);
  list-style: none;
  --pcat-dot: 46px;
}
.pcat-col { display: flex; }   

.ap-close {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin-top: var(--stack, 76px);
  position: relative;
  isolation: isolate;
  padding: 64px 0;
  --cover-bg: #040404;
  --cover-bg-top: #070707;
  --cover-fg: #090909;
}
:root[data-theme="light"] .ap-close {
  --cover-bg: #f6f6f6;
  --cover-bg-top: #f3f3f3;
  --cover-fg: #f1f1f1;
}
.close-bg {
  position: absolute;
  top: 0;
  height: 100%;
  left: calc(50% - var(--vw, 100%) / 2);
  width: var(--vw, 100%);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.close-bg svg {
  display: block;
  position: absolute;
  top: 0;
  left: var(--cover-x, 0px);
  transform: scaleY(-1);
  transform-origin: 50% 50%;
}
.close-bg .a { fill: var(--cover-fg); }
.close-bg .b { fill: color-mix(in srgb, var(--cover-bg) var(--t, 100%), var(--bg)); }
.ap-cta-line {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 22px;
  max-width: 34em;
}

.ap-close .ap-contact-h { margin-bottom: 12px; }

.ap-close .contact-row { justify-content: flex-start; gap: 22px; }

.ap-close .contact-link {
  padding: 0;
  border: none;
  border-radius: 0;
}

.pcat-desc {
  display: block;
  margin: 7px 0 0;
  font-size: var(--t-meta);
  line-height: 1.55;
  color: var(--muted);
  text-align: left;
}

.pcat {
  display: block;
  flex: 1;
  color: var(--muted);
  text-decoration: none;
}

.pcat-art {
  display: block;

  width: 50%;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 28%;

  background: var(--pcat-bg, var(--surface));
}

.pcat-community {
  --pcat-bg: #ee2e2c;
  --pcat-edge: linear-gradient(to right, #ee2c2c, #ef2d2d, #ef2e2d, #ef312e, #f0332f, #f03530,
    #f03530, #f03530, #f0322e, #f02f2d, #ef2d2c, #ee2b2c, #ed2a2a);
}
.pcat-activities {
  --pcat-bg: #54a52d;
  --pcat-edge: linear-gradient(to right, #54a32d, #54a42d, #54a52b, #57a72b, #58a82b, #58a82b,
    #58a82c, #58a82d, #57a62c, #56a62c, #55a62d, #54a52c, #53a32c);
}
.pcat-gear {
  --pcat-bg: #53b8fe;
  --pcat-edge: linear-gradient(to right, #21a2ff, #32a9ff, #32a9ff, #35aaff, #38acff, #3aadff,
    #3caeff, #3baeff, #36abfe, #32a9fe, #31a9fe, #31a9fe, #21a1fe);
}

.pcat-body {
  display: block;
  padding: 16px 4px 0;
}

.pcat-dot {
  flex: 0 0 var(--pcat-dot);
  width: var(--pcat-dot);
  height: var(--pcat-dot);
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color 0.18s ease;
}
.pcat-dot svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pcat-label {
  display: block;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text);

  text-align: center;
}

@supports (corner-shape: squircle) {
  .personal-photo,
  .pcat-art,
  .traj-field-ico {
    corner-shape: squircle;
  }
}

@media (max-width: 900px) {
  .about-intro {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 24px;
  }

  .about-split.about-intro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;

    justify-items: stretch;
  }

  .about-intro .about-split-copy {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    width: 100%;
  }

  .about-intro .radar-panel { max-width: 420px; margin-inline: auto; }

  .personal-cats { gap: 14px; }
}

@media (max-width: 640px) {
  .about-split.about-intro { grid-template-columns: minmax(0, 1fr); }

  .ap-close { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 22px; }
  .ap-cta-line { max-width: none; }

  .ap-close .contact-row { justify-content: center; }

  .personal-cats { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pcat {
    display: flex;

    align-items: center;
    gap: 14px;
  }

  .pcat-body { padding: 0; min-width: 0; }
  .pcat-label { font-size: 20px; text-align: left; }

  .pcat-art {
    flex: 0 0 30%;
    width: 30%;

    margin-inline: 0;
  }
}

@media (max-width: 560px) {
  .pcat-label { font-size: 18px; }

  .pcat-art {
    aspect-ratio: 1 / 2;
    object-fit: contain;
    object-position: top center;

    background-color: var(--pcat-bg, var(--surface));
    background-image: var(--pcat-edge, none);
    border-radius: 28% / 14%;
  }
  .traj-year { font-size: 13px; height: 20px; }
  .traj-title { font-size: 16px; }
  .traj-note { font-size: 14px; }
}

.personal-gallery { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; }
.personal-gallery .card:hover { --pull: -22px; }
.personal-gallery .card:hover .card-inner { box-shadow: 0 18px 32px rgba(0, 0, 0, 0.13); }

.about-sub {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 10px;
}

.shelf-section { padding-bottom: 56px; text-align: center; }

.shelf-prompt { padding: 18px 0 12px; }
.shelf-prompt h2 { font-family: var(--serif); font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.01em; }
.shelf-prompt p { font-size: var(--t-meta); color: var(--muted); margin-top: 6px; }
.shelf-prompt .shelf-hint { font-size: var(--t-micro); opacity: 0.75; }

.axis-switch {
  --axsw-dot: 22px;      
  --axsw-on: 30px;       
  --axsw-ico: 12px;
  --axsw-ico-on: 15px;
  --axsw-name: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

.shelf-prompt .axis-switch {
  --axsw-dot: 28px;
  --axsw-on: 38px;
  --axsw-ico: 15px;
  --axsw-ico-on: 19px;
  --axsw-name: 15px;
  gap: 13px;
}
.axis-switch:focus { outline: none; }
.axis-switch:focus-visible .axis-switch-track { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

.axis-switch-track {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 0.18s ease;
}
.axis-switch:hover .axis-switch-track { border-color: var(--muted); }
.axis-switch-opt {
  display: grid;
  place-items: center;
  width: var(--axsw-dot);
  height: var(--axsw-dot);
  border-radius: 50%;
  color: var(--muted);
  transition: width 0.16s ease, height 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.axis-switch-opt svg {
  width: var(--axsw-ico); height: var(--axsw-ico);
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: width 0.16s ease, height 0.16s ease;
}
.axis-switch-name {
  font-size: var(--axsw-name);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.18s ease;
}

.axis-switch[aria-checked="false"] .axis-switch-opt[data-side="0"],
.axis-switch[aria-checked="true"] .axis-switch-opt[data-side="1"] {
  width: var(--axsw-on);
  height: var(--axsw-on);
  background: var(--accent-grad);
  color: var(--on-accent);
}
.axis-switch[aria-checked="false"] .axis-switch-opt[data-side="0"] svg,
.axis-switch[aria-checked="true"] .axis-switch-opt[data-side="1"] svg {
  width: var(--axsw-ico-on); height: var(--axsw-ico-on);
}
.axis-switch[aria-checked="false"] .axis-switch-name[data-side="0"],
.axis-switch[aria-checked="true"] .axis-switch-name[data-side="1"] { color: var(--accent-ink); }

.radar-head { display: flex; align-items: center; justify-content: center; gap: 12px; }

.shelf {
  display: flex;
  gap: 20px;
  overflow-x: auto;

  padding: 48px 2px 24px;
  scroll-snap-type: x proximity;
}

.shelf.carousel {
  position: relative;
  display: block;
  height: 470px;              
  padding: 0;
  margin-top: 8px;
  overflow: visible;          
  perspective: 1200px;
  scroll-snap-type: none;
}

.shelf.carousel {
  overflow-x: clip;
  overflow-y: visible;
}

.shelf.strip {
  display: flex;

  gap: 3px;
  height: auto;

  padding: 0 0 20px;
  margin-top: 0;
  perspective: none;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   
  scrollbar-width: none;
}
.shelf.strip::-webkit-scrollbar { display: none; width: 0; height: 0; }
.shelf.strip { -ms-overflow-style: none; }   

.shelf.strip.drifting { scroll-snap-type: none; }

.shelf.strip.gl {
  display: block;
  position: relative;
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
}
.shelf.strip.gl > .deck {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  transform: none;
  pointer-events: none;
}
.shelf.strip.gl > .deck:focus-visible {
  clip-path: none;
  width: auto;
  height: auto;
  z-index: 3;
  outline: 2px solid var(--accent-ink, currentColor);
  outline-offset: 2px;
}
.strip-canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  touch-action: pan-y;
  cursor: grab;
}
.strip-canvas:active { cursor: grabbing; }

.shelf.strip:has(+ .strip-title) { padding-bottom: 0; }
.strip-alt.strip { padding-top: 0; margin-top: 0; }

.strip-title {
  margin: 10px 0 6px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text);
}

.shelf.strip + .strip-title { margin-top: 30px; }

.deck-charm {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.deck-charm-fan {
  position: relative;

  flex: 0 0 auto;

  width: 104px;
  height: 38px;
}

.deck-charm-fan i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 27px;
  height: 36px;
  margin: -18px 0 0 -13.5px;
  border-radius: 3px;

  background: currentColor center / cover no-repeat;

  box-shadow: 0 0 0 1.5px var(--bg), 0 3px 8px rgba(0, 0, 0, 0.3);
  transform-origin: 50% 120%;
  transition: transform 0.24s cubic-bezier(0.2, 0.85, 0.3, 1);
}

.deck-charm:hover .deck-charm-fan i:nth-child(1),
.deck-charm:focus-visible .deck-charm-fan i:nth-child(1) { transform: rotate(-30deg) translateX(-7px); }
.deck-charm:hover .deck-charm-fan i:nth-child(2),
.deck-charm:focus-visible .deck-charm-fan i:nth-child(2) { transform: rotate(-15deg) translateX(-3px); }

.deck-charm:hover .deck-charm-fan i:nth-child(4),
.deck-charm:focus-visible .deck-charm-fan i:nth-child(4) { transform: rotate(15deg) translateX(3px); }
.deck-charm:hover .deck-charm-fan i:nth-child(5),
.deck-charm:focus-visible .deck-charm-fan i:nth-child(5) { transform: rotate(30deg) translateX(7px); }

.deck-charm-label {
  display: flex;             
  align-items: center;
  justify-content: center;
  height: 15px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.16s ease;
}
.deck-charm:hover .deck-charm-label,
.deck-charm:focus-visible .deck-charm-label { color: var(--text); }
.deck-charm:focus { outline: none; }
.deck-charm:focus-visible .deck-charm-fan { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.deck-charm-back {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
}
.deck-charm-ring {
  position: relative;

  flex: 0 0 auto;
  width: 104px;
  height: 38px;

  perspective: 220px;
}

.deck-charm-ring-spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.deck-charm-ring i {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 27px;
  height: 36px;
  margin: -18px 0 0 -13.5px;
  border-radius: 3px;
  background-color: var(--surface);
  background-size: cover;
  background-position: center;

  box-shadow: 0 0 0 1px var(--surface), 0 3px 8px rgba(0, 0, 0, 0.32);

  transition: opacity 0.22s ease;
}

.deck-charm-back:focus { outline: none; }
.deck-charm-back:focus-visible .deck-charm-ring { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.deckpage-dockrow {
  display: flex;
  justify-content: center;
  align-items: flex-start;

  gap: 24px;

  margin-top: 68px;
}

@media (max-width: 560px) {
  .deckpage-dockrow { gap: 8px; }
}

.deckpage { padding: 8px 0 40px; text-align: center; }
.deckpage-head { padding: 10px 0 18px; }
.deckpage-title {
  font-family: var(--serif); font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.01em;
}
.deckpage-sub { font-size: var(--t-meta); color: var(--muted); margin-top: 4px; }

.deckpage-cards { position: relative; }

.shelf.strip {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (max-width: 640px) {
  .shelf-prompt h2 { display: none; }
}

@media (max-width: 640px) {
  .shelf-prompt .axis-switch { display: none; }
}
.shelf.strip .deck {
  position: relative;

  flex: 0 0 264px;
  width: 264px;
  height: 352px;
  min-height: 0;

  transform: scale(var(--pk-zoom, 1));
  transform-origin: top left;
  margin-right: calc(264px * (var(--pk-zoom, 1) - 1));
  margin-bottom: calc(352px * (var(--pk-zoom, 1) - 1));
  transition: none;   

  animation: none;
  pointer-events: auto;   

  scroll-snap-align: start;
  opacity: 1;
}

.shelf.strip .deck,
.shelf.strip .deck.hovered,
.shelf.strip .deck:hover,
.shelf.strip .deck:focus,
.shelf.strip .deck:focus-visible,
.shelf.strip .deck:active { transform: scale(var(--pk-zoom, 1)) !important; transition: none !important; }

.shelf.strip .deck-preview { display: none; }

@media (hover: hover) and (pointer: fine) {
  .shelf.strip { scroll-snap-type: x proximity; }
}

.shelf.strip .deck-pack .deck-face {
  clip-path: path(evenodd, "M 0 0 L 232 0 L 232 352 L 0 352 Z M 111.5 16.4 L 98.5 27.6 Q 94 31.5 100 31.5 L 132 31.5 Q 138 31.5 133.5 27.6 L 120.5 16.4 Q 116 12.5 111.5 16.4 Z");
}
.shelf.strip .deck-pack .pk-strip { display: none; }

.cover {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100lvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: visible;
  padding: 0;
  isolation: isolate;
}

:root.has-cover {
  --cover-bg: #030303;
  --cover-bg-top: #0a0a0a;
  --cover-fg: #0b0b0b;
  --cover-ink: var(--nav-text);
}
:root.has-cover[data-theme="light"] {
  --cover-bg: #f7f7f7;
  --cover-bg-top: #f0f0f0;
  --cover-fg: #efefef;
  --cover-ink: #111111;
}

.cover-bg {
  position: absolute;
  top: calc(-1 * var(--nav-h, 56px));
  bottom: 0;
  left: calc(50% - var(--vw, 100%) / 2);
  width: var(--vw, 100%);
  z-index: -1;
  overflow: hidden;
  background: none;
  pointer-events: none;
}
.cover-bg svg {
  display: block;
  position: absolute;
  top: var(--cover-y, 0px);
  left: var(--cover-x, 0px);
}
.lens-layer {
  position: absolute;
  left: calc(50% - var(--vw, 100%) / 2);
  width: var(--vw, 100%);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.48s ease;
}
.lens-layer.is-on { opacity: var(--lens-dim, 1); transition-duration: 0.25s; }
.lens-layer svg {
  display: block;
  position: absolute;
}
.cover-lens-layer {
  top: calc(-1 * var(--nav-h, 56px));
  bottom: 0;
}
.close-lens-layer {
  top: 0;
  height: 100%;
}
.cover-bg .a { fill: var(--cover-fg); }
.cover-bg .b { fill: color-mix(in srgb, var(--cover-bg) var(--t, 100%), var(--bg)); }
.cover-bg svg.grad .a, .close-bg svg.grad .a { fill: var(--cover-bg-top); }
.cover-bg .ink, .close-bg .ink { mix-blend-mode: lighten; }
:root[data-theme="light"] .cover-bg .ink,
:root[data-theme="light"] .close-bg .ink { mix-blend-mode: darken; }

:root.has-cover:not(.nav-over) .top-nav > .wordmark { color: var(--cover-ink, var(--text)); }
:root.has-cover[data-theme="light"]:not(.nav-over) .theme-toggle { color: #333333; }

.cover-type {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  align-self: center;
  margin-bottom: 0;
  pointer-events: none;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque.woff2?v=343376de") format("woff2");
}

@font-face {
  font-family: "Lexend Deca";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/lexend-deca.woff2?v=ec151fd8") format("woff2");
}

@font-face {
  font-family: "Lexend Exa";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/lexend-exa.woff2?v=34417be0") format("woff2");
}

@font-face {
  font-family: "Lexend Zetta";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/lexend-zetta.woff2?v=ae3802cc") format("woff2");
}

.cover-name {
  font-family: var(--hero);
  font-weight: 800;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: 0;
  --cn-dim: #6b6b6b;
  --cn-lit: #e8e8e8;
  color: transparent;
  background-color: var(--cn-dim);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0;
  flex: none;
  position: relative;
  z-index: 50;
  white-space: nowrap;
}

.cover-role {
  position: absolute;
  left: calc(50% - var(--vw, 100%) / 2);
  width: var(--vw, 100%);
  top: var(--cover-role-top, 62%);
  z-index: 50;
  margin: 0;
  text-align: center;
  font-family: var(--font);
  font-size: clamp(11px, 1.6vw, 16px);
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cover-ink, var(--text));
  text-shadow: none;
  line-height: 1.15;
}
.cover-role-main {
  display: block;
  font-size: clamp(17px, 2.3vw, 30px);
  letter-spacing: 0.2em;
}
.cover-role-sub {
  display: block;
  margin-top: 6px;
  font-size: clamp(13px, 1.55vw, 20px);
  letter-spacing: 0.34em;
  font-weight: 700;
}
:root[data-theme="light"] .cover-name { --cn-dim: #a9a9a9; --cn-lit: #1c1c1c; }

.cover-br { display: none; }

.cover--radial .cover-type,
.cover--radial .cover-stage { visibility: hidden; }
.radial {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--vw, 100%) / 2);
  width: var(--vw, 100%);
  z-index: 55;
  overflow: hidden;
  pointer-events: none;
  --rl-ink: #cfcfcf;
  --rl-guide: rgba(255, 255, 255, 0.16);
}
:root[data-theme="light"] .radial { --rl-ink: #262626; --rl-guide: rgba(0, 0, 0, 0.16); }
.radial-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 29; display: block; }
.radial-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 30; display: block; }
.radial-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 31;
  --rl-card: #ffffff;
}
:root[data-theme="light"] .radial-card { --rl-card: #151515; }
.radial-card-orbit {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  animation: radial-orbit 4.2s linear infinite;
}
.radial-card-face {
  position: absolute;
  background: var(--rl-card);
  border-radius: 12% / 18%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
@keyframes radial-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .radial-card-orbit { animation: none; }
}

.cover-stage {
  grid-area: 1 / 1;
  position: relative;
  width: min(660px, 92%);
  height: min(34vh, 250px);
  align-self: start;
  margin-top: 0;
  z-index: 60;
  --cover-overlap: 0.16;
  --cring-size: 168px;
  --cover-ring: 0.08;
  --cover-focal: 760;
  --cover-tilt: 14;
  --cring-corner: 0.26;
  --cover-speed: 0.0055;
  touch-action: pan-y;
}

.cover-ring {
  position: absolute;
  inset: 0;
}

.cover-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 100;
}
.cover-links { position: absolute; }

@media (max-height: 860px) and (min-width: 641px) {
  .cover-stage { --cring-size: 114px; }
}

@media (max-width: 640px) {
  .cover {
    min-height: 100vh;
    min-height: 100lvh;
    padding: 0;
    width: var(--vw, 100%);
    margin-left: calc(50% - var(--vw, 100%) / 2);
  }
  .cover-stage { width: 100%; height: min(26vh, 190px); --cring-size: 66px; --cover-ring: 0.08; }
  .cover-br { display: inline; }
  .cover-role { letter-spacing: 0.16em; }
}

@media (max-width: 400px) {
  .cover-stage { --cring-size: 60px; }
}

@media (max-width: 360px) {
  .cover-stage { --cring-size: 55px; }
}

.cover--stack {
  min-height: 180vh;
  min-height: 180lvh;
  place-items: start center;
}
.cover--stack .cover-bg,
.cover--stack .cover-type,
.cover--stack .cover-stage,
.cover--stack .cover-lens-layer { display: none; }

.stack {
  grid-area: 1 / 1;
  position: sticky;
  top: var(--nav-h, 56px);
  align-self: start;
  width: 100%;
  height: calc(100vh - var(--nav-h, 56px));
  height: calc(100lvh - var(--nav-h, 56px));
  z-index: 40;
  pointer-events: none;
}
.stack-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}
.stack-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-content: center;
  align-items: stretch;
  gap: clamp(12px, 2.4vw, 40px);
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.stack-lines { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.stack-roles { list-style: none; margin: 0; padding: 0; }
.sl {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #4a4a4a;
  will-change: font-size, font-weight, color;
}
.stack-field { width: 100%; height: min(56vh, 490px); }
.stack-liq {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: block;
  pointer-events: none;
  mix-blend-mode: difference;
}
.stack-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.stack-tag {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  text-align: center;
  font-family: var(--font);
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.7);
  will-change: transform;
}
.stack-tag b {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stack-tag i {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.82em;
  opacity: 0.88;
}

@media (max-width: 820px) {
  .cover--stack { min-height: 170vh; min-height: 170lvh; }
  .stack-inner {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: clamp(10px, 3vw, 24px);
  }
  .stack-field { height: min(42vh, 360px); }
}

.carousel-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
  will-change: transform;
}

.shelf.carousel.gl .carousel-ring { transform: none !important; transition: none; will-change: auto; }
.shelf.carousel.gl .deck {
  clip-path: inset(50%);
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.ring-canvas {
  display: block;
  position: absolute;
  left: 0;
  top: -120px;
  width: 100%;
  height: calc(100% + 120px);
  pointer-events: none;
  z-index: 1;
}

.shelf.carousel .deck {
  position: absolute;
  left: 50%;
  top: 74px;                  

  pointer-events: none;

  width: 264px;
  height: 352px;
  min-height: 0;
  animation: none;            
  transition: none;           
  backface-visibility: hidden;
}

.deck {
  flex: 0 0 210px;
  scroll-snap-align: start;
  min-height: 260px;
  border-radius: 6px;
  font-family: var(--font);
  cursor: pointer;
  color: inherit;

  border: none;
  background: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.deck:focus { outline: none; }
.deck:focus-visible .deck-face { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(0, 0, 0, 0.35); }

.deck-face {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: #e9ecee;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);   
}
.deck-face > .deck-thumb { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; }
.deck-body {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; gap: 6px; padding: 22px 18px; color: var(--text);
  background: linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 34%, rgba(255, 255, 255, 0) 62%);
}

.deck-name { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.2; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7); }
.deck-blurb { font-size: 13px; color: var(--muted); line-height: 1.4; }
.deck-count {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 2px;
}

.deck-audio { --deck-color: var(--audio); }
.deck-vision { --deck-color: var(--vision); }
.deck-language { --deck-color: var(--language); }
.deck-cg-design { --deck-color: var(--cg-design); }
.deck-data { --deck-color: var(--data); }

.deck-side-quests { --deck-color: var(--side-quests); }
.deck-side-quests .deck-name::before {
  content: "♦ ";
  color: var(--side-quests);
}

.deck-sealed { cursor: not-allowed; position: relative; }
.deck-sealed .deck-face { background: repeating-linear-gradient(135deg, #ececec, #ececec 8px, #f6f6f6 8px, #f6f6f6 16px); }
.deck-sealed .deck-thumb { filter: grayscale(0.5); opacity: 0.82; }
.deck-wrap-label {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--surface);
}

.deck { position: relative; overflow: visible; }

.deck-preview {
  position: absolute;
  bottom: 100%;                
  left: 0;
  right: 0;                    
  height: 130px;               
  overflow: hidden;            
  pointer-events: none;
}
.preview-card {
  position: absolute;
  left: 0;
  right: 0;                    
  bottom: -292px;              
  height: 352px;               
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface);
  transform-origin: 50% 100%;
  transform: translateY(44px); 
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.26s ease;
  transition-delay: calc(var(--i) * 55ms);
  z-index: calc(10 - var(--i)); 
}

.preview-card .card-face { height: 100%; width: 100%; }
.preview-card .ca-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-ph {
  width: 100%; height: 100%; display: block;
  background-color: rgba(127, 127, 127, 0.10);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(127, 127, 127, 0.12) 6px, rgba(127, 127, 127, 0.12) 7px);
}

.deck:hover .preview-card,
.deck.hovered .preview-card,
.deck:focus-visible .preview-card {
  opacity: 1;
  transform: translateY(calc(-6px - var(--i) * 26px)); 
}
.deck.docked .deck-preview,
.deck-sealed .deck-preview { display: none; } 

.preview-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    rgba(255, 244, 214, 0) 0%,
    rgba(206, 166, 62, 0.5) 30%,
    rgba(255, 250, 226, 0.18) 48%,
    rgba(188, 142, 38, 0.55) 68%,
    rgba(255, 244, 214, 0) 96%);
  background-size: 200% 200%;
  background-position: 40% 40%;
  mix-blend-mode: multiply;
  opacity: 0.75;
  pointer-events: none;
}
.preview-trending::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(52, 112, 255, 0.85) 0%,
    rgba(104, 62, 245, 0.75) 26%,
    rgba(152, 40, 222, 0.6) 50%,
    rgba(216, 30, 142, 0.4) 72%,
    transparent 96%);
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}
.preview-foil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 105, 180, 0.30) 22%,
    rgba(120, 200, 255, 0.28) 42%,
    rgba(150, 255, 170, 0.24) 60%,
    rgba(255, 210, 120, 0.24) 74%,
    transparent 92%);
  background-size: 220% 220%;
  background-position: 30% 30%;
  mix-blend-mode: multiply;   
  opacity: 0.6;
  pointer-events: none;
}

.opened {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 24px 32px 32px;

  overflow-y: auto;
}

.opened[hidden] { display: none; }

.opened-close {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 55;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.opened-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.opened-close:hover { color: var(--accent-ink); border-color: var(--accent); }
.opened-close:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.cards {
  align-self: center;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;              
  justify-content: center;     
  align-content: center;
  gap: 18px;                   
  list-style: none;
  padding: 12px;
  max-width: 850px;
  margin: 0 auto;
}

.deckpage-cards {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;

  max-width: none;
  width: 100%;
  padding: 8px 0;
}
.card-row { display: flex; justify-content: center; gap: 18px; }
.deckpage-cards .card { position: relative; }
.deckpage-cards .card:hover { z-index: 20; }   

.deckpage-cards.grid2 {
  display: flex;

  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: calc(416px * var(--c2, 1) + 15px);
  max-width: 100%;
  margin-inline: auto;

  padding: 8px 0;
}
.deckpage-cards.grid2 .card-row { display: contents; }
.deckpage-cards.grid2 .card {
  flex: 0 0 208px;
  margin-left: 0;   
  transform: scale(var(--c2, 1));
  transform-origin: top left;
  margin-right: calc(208px * (var(--c2, 1) - 1));
  margin-bottom: calc(278px * (var(--c2, 1) - 1));
}

.deckpage-cards.grid2 .card-inner,
.deckpage-cards.grid2 .card-face { height: 278px; min-height: 278px; }
.deckpage-cards.grid2 .card-fullart { --ca-top: 7px; --ca-bot: 30px; --ca-cap: 52px; }

.chip-dock {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

.deck.docked {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

body.deck-open { overflow: hidden; }

.card {
  flex: 0 0 208px;             
  perspective: 1000px;
  transition: transform 0.15s ease;   

  transform: translate(calc(var(--vx, 0px) + var(--fanx, 0px)), var(--vy, 0px))
             rotate(calc(var(--fan, 0deg) + var(--vr, 0deg)))
             translateY(calc(var(--arc, 0px) + var(--pull, 0px)))
             scale(var(--deal, 1));
}
.cards .card:not(.card-sealed):hover { --pull: -5px; }
.cards .card:not(.card-sealed):hover .card-inner { box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09); }

.card-inner {
  position: relative;          
  display: grid;
  height: 278px;               
  border-radius: 8px;          
  transform-style: preserve-3d;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1), box-shadow 0.2s ease-out;
}
.card.flipped .card-inner { transform: rotateY(180deg); }

.card-front, .card-back {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
}
.card.flipped .card-front { pointer-events: none; }
.card:not(.flipped) .card-back { pointer-events: none; }

.card-face {
  width: 100%;
  height: 278px;               
  text-align: left;
  font-family: var(--font);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  color: inherit;
  overflow: hidden;            
}
.card-front:focus-visible { outline: 2px solid #333; outline-offset: 2px; }

.card-hint {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  opacity: 0.65;
}

.card-methods { display: flex; gap: 6px; flex-wrap: wrap; }

.pill {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 10px;
  color: #fff;
}
.pill-audio { background: var(--audio); }
.pill-vision { background: var(--vision); }
.pill-language { background: var(--language); }
.pill-cg-design { background: var(--cg-design); }
.pill-data { background: var(--data); }

.card-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  align-self: flex-start;
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 2px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.32;
  flex: 1;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-date { font-size: 11px; color: var(--muted); }
.card-teaser {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-back {
  transform: rotateY(180deg);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
}
.card-finding {
  font-size: 12px;
  color: #444;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-back-actions { display: flex; align-items: center; gap: 10px; }
.card-open {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  border: 1px solid var(--text);
  border-radius: 2px;
  padding: 7px 14px;
  display: inline-block;
  text-decoration: none;
}

.card-open:hover { background: var(--text); color: var(--text-invert); }

.card-fullart.card-sealed .card-front {
  cursor: default;
  filter: grayscale(1);
}

.card-fullart.card-sealed .ca-art img {
  filter: blur(3px);
  transform: scale(1.06);
}

.card-fullart.card-sealed .ca-bottom { display: none; }

.card-fullart.card-sealed .ca-lock {
  grid-area: 1 / 1;
  align-self: end;
  height: 52%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;

  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
}

.card-fullart.card-sealed .ca-lock img {
  width: 129%;
  max-width: none;
  height: auto;
  flex: 0 0 auto;
  display: block;

  filter: drop-shadow(0 6px 11px rgba(0, 0, 0, 0.48)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.32));
}

.card-personal .card-front,
.card-personal .card-back {
  background: #fbf7f4;
}
.card-personal .card-badge {
  color: var(--side-quests);
  border-color: var(--side-quests);
}

.card-tilt {
  position: relative;                    
  border-radius: 8px;                    
  transform-style: preserve-3d;

  transition: transform 0.2s ease-out;   
  animation: card-idle 5s ease-in-out infinite;  
}
.card-tilt.hovering { animation: none; }  

@keyframes card-idle {
  0%   { transform: rotateY(-5deg) rotateX(2deg) translateY(0); }
  25%  { transform: rotateY(0deg) rotateX(2.5deg) translateY(-2px); }
  50%  { transform: rotateY(5deg) rotateX(-2deg) translateY(0); }
  75%  { transform: rotateY(0deg) rotateX(-2.5deg) translateY(-2px); }
  100% { transform: rotateY(-5deg) rotateX(2deg) translateY(0); }
}

.card-relics {
  position: absolute;
  top: 0;                      
  right: 0;
  width: 0;                    
  height: 0;
  transform: translateZ(1px);
  pointer-events: none;        

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.relic-clip {
  position: absolute;
  left: 0;                     
  top: calc(var(--i, 0) * 34px);
  width: 0;
  transform-origin: 0 50%;
  transform: rotate(0deg);
}

.relic {
  position: absolute;
  left: -18px;                 
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--relic-ring, #7d8a99);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: auto;        
  cursor: help;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.relic:hover {
  transform: translateX(4px) translateY(-1px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28);
}

.relic-name {
  position: absolute;
  right: calc(100% + 9px);
  top: 50%;
  transform-origin: right center;
  transform: translateY(-50%) rotate(var(--counter, 0deg));
  white-space: nowrap;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #f2f2f2;
  background: rgba(28, 31, 35, 0.94);
  border: 1px solid var(--relic-ring, #7d8a99);
  border-radius: 4px;
  padding: 3px 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.relic:hover .relic-name { opacity: 1; }

.relic-hw      { --relic-ring: #b87333; }
.relic-runtime { --relic-ring: #7d8a99; }
.relic-model   { --relic-ring: #8a6fb0; }
.relic-data    { --relic-ring: #4f8a6d; }
.relic-surface { --relic-ring: #c08a4a; }

.card-stack {
  font-size: 10px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}
.stack-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
  opacity: 0.7;
  margin-bottom: 2px;
}

.card-foil .card-front,
.card-foil .card-back {
  position: relative;
  overflow: hidden;
  border-color: #c9a24b;
}
.card-foil .card-front::after,
.card-foil .card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 105, 180, 0.30) 22%,
    rgba(120, 200, 255, 0.28) 42%,
    rgba(150, 255, 170, 0.24) 60%,
    rgba(255, 210, 120, 0.24) 74%,
    transparent 92%);
  background-size: 220% 220%;
  background-position: var(--foil-x, 50%) var(--foil-y, 50%);

  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.card-foil:hover .card-front::after,
.card-foil:hover .card-back::after { opacity: 0.85; } 

.card-trending .card-front,
.card-trending .card-back {
  position: relative;
  overflow: hidden;          
  border-color: #6d4ae8;     
  isolation: isolate;        
}

.card-trending .card-front::after,
.card-trending .card-back::after {
  content: "";
  position: absolute;

  inset: -44px;
  z-index: 1;                

  background:
    repeating-linear-gradient(84deg,
      rgba(64, 130, 255, 0.8) 0px,
      rgba(238, 246, 255, 0.03) 26px,   
      rgba(118, 58, 245, 0.75) 46px,
      rgba(196, 36, 205, 0.68) 78px,
      rgba(246, 240, 255, 0.04) 98px,   
      rgba(234, 30, 96, 0.62) 124px,
      rgba(240, 52, 52, 0.58) 154px,
      rgba(252, 240, 246, 0.04) 172px,  
      rgba(64, 130, 255, 0.8) 196px),
    linear-gradient(to top,
      rgba(52, 112, 255, 0.95) 0%,
      rgba(104, 62, 245, 0.9) 22%,
      rgba(152, 40, 222, 0.8) 45%,
      rgba(216, 30, 142, 0.6) 65%,
      rgba(240, 46, 70, 0.35) 82%,
      transparent 96%);

  background-size: 260% 260%, 100% 100%;
  background-repeat: no-repeat;

  background-position: var(--foil-x, 50%) var(--foil-y, 50%), 50% 100%;

  filter: url(#flame-turb);
  mix-blend-mode: multiply;  

  -webkit-mask-image: linear-gradient(to top, #000 34%, rgba(0, 0, 0, 0.55) 68%, transparent 97%);
  mask-image: linear-gradient(to top, #000 34%, rgba(0, 0, 0, 0.55) 68%, transparent 97%);

  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.card-trending:hover .card-front::after,
.card-trending:hover .card-back::after { opacity: 0.68; } 

.deck-pack { --pk-w: 232px; --pk-h: 352px; --pk-strip: 54px; --pk-inset: 16px; }

.deck-pack .pk-wrap {
  position: absolute; inset: 0;
}

.deck-pack .deck-face {
  border-radius: 0; box-shadow: none;
  left: var(--pk-inset); right: var(--pk-inset);   
  background: #e9ecee;    
  clip-path: path("M 0 54 L 232 54 L 232 352 L 0 352 Z");
}
.deck-pack .pk-strip-art { background: #e9ecee; }
.deck-pack .deck-blurb { display: none; }          
.deck-pack .deck-body { background: none; padding: 26px 16px 26px; gap: 4px; }

.deck-pack .pk-bulge {
  position: absolute; top: 0; left: 0; width: var(--pk-w); height: var(--pk-h); pointer-events: none;
  background:
    linear-gradient(to right, rgba(0,0,0,0.14) 0%, rgba(255,255,255,0.20) 20%, rgba(255,255,255,0.07) 38%,
                    rgba(0,0,0,0.05) 62%, rgba(0,0,0,0.19) 88%, rgba(0,0,0,0.27) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 13%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.18) 100%);
}

.deck-pack .pk-glit {
  position: absolute; top: 0; left: 0; width: var(--pk-w); height: var(--pk-h);
  pointer-events: none; opacity: 0.18; mix-blend-mode: screen; transition: opacity 0.3s ease;
  background-image: var(--shard-1); background-size: 300px 300px; background-repeat: repeat;
  -webkit-mask-image: linear-gradient(112deg, transparent 24%, rgba(0,0,0,0.55) 35%, #000 43%, rgba(0,0,0,0.55) 51%, transparent 62%);
  -webkit-mask-size: 260% 100%; -webkit-mask-position: var(--shine, 50%) 0; -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(112deg, transparent 24%, rgba(0,0,0,0.55) 35%, #000 43%, rgba(0,0,0,0.55) 51%, transparent 62%);
  mask-size: 260% 100%; mask-position: var(--shine, 50%) 0; mask-repeat: no-repeat;
}

.deck-pack .pk-glit::before, .deck-pack .pk-glit::after { display: none; }
.deck-pack.hovered .pk-glit { opacity: 0.5; }
.deck-pack.hovered .pk-glit::before, .deck-pack.hovered .pk-glit::after {
  content: ""; display: block; position: absolute; inset: 0; mix-blend-mode: screen;
  background-repeat: repeat;
  -webkit-mask-size: 260% 100%; -webkit-mask-repeat: no-repeat;
  mask-size: 260% 100%; mask-repeat: no-repeat;
}
.deck-pack.hovered .pk-glit::before {
  background-image: var(--shard-2); background-size: 240px 240px;
  -webkit-mask-image: linear-gradient(112deg, transparent 26%, rgba(0,0,0,0.6) 37%, #000 45%, rgba(0,0,0,0.6) 53%, transparent 64%);
  -webkit-mask-position: calc(var(--shine, 50%) + 26%) 0;
  mask-image: linear-gradient(112deg, transparent 26%, rgba(0,0,0,0.6) 37%, #000 45%, rgba(0,0,0,0.6) 53%, transparent 64%);
  mask-position: calc(var(--shine, 50%) + 26%) 0;
}
.deck-pack.hovered .pk-glit::after {
  background-image: var(--shard-3); background-size: 190px 190px;
  -webkit-mask-image: linear-gradient(112deg, transparent 28%, rgba(0,0,0,0.65) 39%, #000 46%, rgba(0,0,0,0.65) 54%, transparent 65%);
  -webkit-mask-position: calc(var(--shine, 50%) - 24%) 0;
  mask-image: linear-gradient(112deg, transparent 28%, rgba(0,0,0,0.65) 39%, #000 46%, rgba(0,0,0,0.65) 54%, transparent 65%);
  mask-position: calc(var(--shine, 50%) - 24%) 0;
}

.deck-pack .pk-edge {
  position: absolute; top: 0; left: 0; width: var(--pk-w); height: var(--pk-h);
  pointer-events: none; z-index: 4; mix-blend-mode: screen;
  background:
    linear-gradient(to right,  rgba(255,255,255,1), rgba(255,255,255,0.5) 0.8%, rgba(255,255,255,0) 2%),
    linear-gradient(to left,   rgba(255,255,255,1), rgba(255,255,255,0.5) 0.8%, rgba(255,255,255,0) 2%),
    linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0) 1.1%),
    linear-gradient(to top,    rgba(255,255,255,0.7), rgba(255,255,255,0) 0.9%);
  -webkit-mask-image: linear-gradient(112deg, transparent 30%, rgba(0,0,0,0.45) 39%, #000 44%, rgba(0,0,0,0.45) 49%, transparent 58%);
  -webkit-mask-size: 260% 100%; -webkit-mask-position: var(--shine, 50%) 0; -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(112deg, transparent 30%, rgba(0,0,0,0.45) 39%, #000 44%, rgba(0,0,0,0.45) 49%, transparent 58%);
  mask-size: 260% 100%; mask-position: var(--shine, 50%) 0; mask-repeat: no-repeat;
}

.deck-pack .pk-seal {
  position: absolute; left: 0; right: 0; height: 16px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.17), rgba(255,255,255,0.04));
}
.deck-pack .pk-top { top: 0; height: 30px; --pk-fade: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.75) 46%, transparent 96%); }
.deck-pack .pk-bottom { bottom: 0; --pk-fade: linear-gradient(to top, #000 0%, rgba(0,0,0,0.75) 46%, transparent 96%); }
.deck-pack .pk-seal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,0.85) 0 1px, rgba(255,255,255,0) 1px 6px),
    repeating-linear-gradient(to right, rgba(255,255,255,0.45) 0 1px, rgba(255,255,255,0) 1px 13px);
  -webkit-mask-image: linear-gradient(112deg, transparent 30%, rgba(0,0,0,0.55) 39%, #000 44%, rgba(0,0,0,0.55) 49%, transparent 58%), var(--pk-fade, #000);
  -webkit-mask-size: 260% 100%, 100% 100%;
  -webkit-mask-position: var(--shine, 50%) 0, 0 0;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(112deg, transparent 30%, rgba(0,0,0,0.55) 39%, #000 44%, rgba(0,0,0,0.55) 49%, transparent 58%), var(--pk-fade, #000);
  mask-size: 260% 100%, 100% 100%;
  mask-position: var(--shine, 50%) 0, 0 0;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: intersect;
}

.deck-pack .deck-preview { bottom: calc(100% - 54px); z-index: 2; }

.deck-pack .preview-card { left: 28px; right: 28px; height: 278px; bottom: -218px; }

.deck-pack .pk-strip {
  position: absolute; left: var(--pk-inset); right: var(--pk-inset); top: 0; height: var(--pk-strip); z-index: 5;
  transform-origin: 50% 100%;
  transition: transform 0.6s cubic-bezier(0.3, 0.9, 0.35, 1), opacity 0.5s ease;

  clip-path: path(evenodd, "M 0 0 L 232 0 L 232 54 L 0 54 Z M 111.5 16.4 L 98.5 27.6 Q 94 31.5 100 31.5 L 132 31.5 Q 138 31.5 133.5 27.6 L 120.5 16.4 Q 116 12.5 111.5 16.4 Z");
}
.deck-pack .pk-strip-art { position: absolute; inset: 0; overflow: hidden; }

.deck-pack .pk-strip-art .deck-thumb { position: absolute; top: 0; left: 0; width: var(--pk-w); height: var(--pk-h); margin: 0; }

.deck-pack .deck-thumb img { object-position: top; }
.deck-pack .pk-strip .pk-bulge { position: absolute; top: 0; left: 0; width: var(--pk-w); height: var(--pk-h); }

.deck-pack .deck-name {
  height: 52px; line-height: 52px;
  font-size: var(--pk-title-size, 27px);
  font-weight: 900;
  letter-spacing: -0.015em;
  white-space: nowrap;

  background-image:
    var(--shard-t, none),
    linear-gradient(115deg,
      #f4f7fa 0%,
      #ffffff 20%,
      #ffffff 34%,
      #dfe7ee 43%,   
      #ffffff 52%,
      #ffffff 74%,
      #eaf0f5 90%,
      #f4f7fa 100%);
  background-size: 90px 90px, 220% 100%;
  background-position: var(--shine, 34%) center, var(--shine, 34%) center;

  background-repeat: repeat, repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;

  text-shadow: none;

  --pk-line: color-mix(in srgb, var(--pk-tint) 82%, #000);

  filter:
    drop-shadow(2px 0 0 var(--pk-line))
    drop-shadow(-2px 0 0 var(--pk-line))
    drop-shadow(0 2px 0 var(--pk-line))
    drop-shadow(0 -2px 0 var(--pk-line))
    drop-shadow(1.5px 1.5px 0 var(--pk-line))
    drop-shadow(-1.5px 1.5px 0 var(--pk-line))
    drop-shadow(1.5px -1.5px 0 var(--pk-line))
    drop-shadow(-1.5px -1.5px 0 var(--pk-line));
}

.deck-pack .deck-name.dn-stack {
  white-space: normal;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 0.98;
}
.deck-pack .dn-word { display: block; }
.deck-pack .dn-amp {
  display: block;
  font-size: 0.34em;
  font-weight: 800;
  line-height: 1;
  margin: -1px 0;
}

.deck-pack .deck-count {
  width: 50%; margin: 2px auto 0; padding: 3px 0;
  color: rgba(255, 255, 255, 0.94); opacity: 1;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 26%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0) 100%);
}

.deck-pack.hovered:not(.deck-sealed) .pk-strip {
  transform: translateY(-92px) translateX(18px) rotateZ(11deg) rotateX(38deg);
  opacity: 0;
}

.deck-pack.docked { box-shadow: none; }

.chip-dock .deck-pack.docked {
  flex: 0 0 calc(var(--pk-w) + var(--pk-inset) * 2);
  width: calc(var(--pk-w) + var(--pk-inset) * 2);
  height: calc(var(--pk-h) - var(--pk-strip));
  min-height: 0;
  padding: 0;
  position: relative;
}
.chip-dock .deck-pack.docked .pk-strip { display: none; }

.chip-dock .deck-pack.docked .deck-face { top: calc(var(--pk-strip) * -1); }

.deck-pack.docked .pk-wrap { filter: none; }

.deck-pack.deck-sealed .deck-thumb { filter: grayscale(1) brightness(0.96) contrast(0.92); }
.deck-pack.deck-sealed .pk-glit { display: none; }        
.deck-pack.deck-sealed .deck-name,
.deck-pack.deck-sealed .deck-count { --pk-tint: #4a4f55; }
.deck-pack.deck-sealed .deck-face::after {
  content: "";
  position: absolute; left: 50%; top: 44%; width: 88px; height: 88px; margin: -44px 0 0 -44px;
  z-index: 2; pointer-events: none; opacity: 0.62;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23202428' d='M12 1.5a5 5 0 0 0-5 5V9H5.6A1.6 1.6 0 0 0 4 10.6v9.8A1.6 1.6 0 0 0 5.6 22h12.8a1.6 1.6 0 0 0 1.6-1.6v-9.8A1.6 1.6 0 0 0 18.4 9H17V6.5a5 5 0 0 0-5-5Zm0 2.2a2.8 2.8 0 0 1 2.8 2.8V9H9.2V6.5A2.8 2.8 0 0 1 12 3.7Zm0 10.1a1.9 1.9 0 0 1 1 3.5v1.9a1 1 0 1 1-2 0v-1.9a1.9 1.9 0 0 1 1-3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.deck-pack.deck-vision { --pk-tint: #1c4d53; }
.deck-pack.deck-language { --pk-tint: #37541f; }
.deck-pack.deck-cg-design { --pk-tint: #6a3813; }
.deck-pack.deck-data { --pk-tint: #1f3b57; }
.deck-pack.deck-audio { --pk-tint: #3b2f5c; }
.deck-pack.deck-side-quests { --pk-tint: #672d2c; }

.deck-pack.deck-entertainment { --pk-tint: #562119; }
.deck-pack.deck-media { --pk-tint: #563e19; }
.deck-pack.deck-society { --pk-tint: #30541b; }
.deck-pack.deck-science { --pk-tint: #192156; }
.deck-pack { --pk-tint: #34404a; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.card-fullart .card-face,
.card-fullart .card-back {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
.card-fullart .ca-art { position: absolute; inset: 0; isolation: isolate; }  
.card-fullart .ca-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-fullart .ca-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  background-color: #eef0f1;
  background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0, 0, 0, 0.04) 8px 9px);
}

.card-fullart { --ca-top: 7px; --ca-bot: 30px; --ca-rail: 7px; --ca-r: 10px; --ca-cap: 52px; }

.card-fullart .card-front .ca-scrim { display: none; }
.card-fullart .card-front .ca-frame { display: none; }

.card-fullart .card-back .ca-frame {
  display: block;
  border-radius: 8px;

  background: linear-gradient(to bottom,
    hsl(from var(--ca-tint, #7a8a99) h calc(s * 1.28) 50%),
    hsl(from var(--ca-tint, #7a8a99) h calc(s * 1.55) 41%) 62%,
    hsl(from var(--ca-tint, #7a8a99) h calc(s * 1.75) 35%));

  --ca-bf: 6px;
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='7' ry='7' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-position: 0 0, var(--ca-bf) var(--ca-bf);
  -webkit-mask-size: 100% 100%,
    calc(100% - var(--ca-bf) * 2) calc(100% - var(--ca-bf) - var(--ca-cap));
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='7' ry='7' fill='%23fff'/%3E%3C/svg%3E");
  mask-position: 0 0, var(--ca-bf) var(--ca-bf);
  mask-size: 100% 100%,
    calc(100% - var(--ca-bf) * 2) calc(100% - var(--ca-bf) - var(--ca-cap));
  mask-repeat: no-repeat, no-repeat;
  mask-composite: exclude;
}

.card-fullart .card-back .card-back-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc((var(--ca-cap) - 12px) / 2);
  z-index: 3;
  margin: 0;
  border-radius: 8px;
  background: none;
  border: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;

  color: var(--ca-hint-ink, #fff);
  text-decoration: none;
}
.card-fullart .card-back .card-back-hint:hover { background: none; color: var(--ca-hint-ink, #fff); }

.card-fullart .ca-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 8px;

  -webkit-mask-image:

    linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 26%, rgba(0, 0, 0, 0.55) 55%, #000 82%),

    linear-gradient(#000, #000),

    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.26) 38%,
      rgba(0, 0, 0, 0.66) 70%, #000 96%),

    linear-gradient(#000, #000),

    linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0, 0 100%, 0 var(--ca-top), calc(var(--ca-rail) + var(--ca-r)) var(--ca-top), 100% var(--ca-top);
  -webkit-mask-size: 100% var(--ca-top), 100% var(--ca-bot),
    calc(var(--ca-rail) + var(--ca-r)) calc(100% - var(--ca-top) - var(--ca-bot)),
    calc(100% - calc(var(--ca-rail) + var(--ca-r)) * 2) calc(100% - var(--ca-top) - var(--ca-bot)),
    calc(var(--ca-rail) + var(--ca-r)) calc(100% - var(--ca-top) - var(--ca-bot));
  mask-image:

    linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 26%, rgba(0, 0, 0, 0.55) 55%, #000 82%),

    linear-gradient(#000, #000),

    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.26) 38%,
      rgba(0, 0, 0, 0.66) 70%, #000 96%),

    linear-gradient(#000, #000),

    linear-gradient(#000, #000);
  mask-repeat: no-repeat;
  mask-position: 0 0, 0 100%, 0 var(--ca-top), calc(var(--ca-rail) + var(--ca-r)) var(--ca-top), 100% var(--ca-top);
  mask-size: 100% var(--ca-top), 100% var(--ca-bot),
    calc(var(--ca-rail) + var(--ca-r)) calc(100% - var(--ca-top) - var(--ca-bot)),
    calc(100% - calc(var(--ca-rail) + var(--ca-r)) * 2) calc(100% - var(--ca-top) - var(--ca-bot)),
    calc(var(--ca-rail) + var(--ca-r)) calc(100% - var(--ca-top) - var(--ca-bot));
}

.card-fullart .ca-scrim::before {
  content: "";
  position: absolute;
  top: var(--ca-top);
  bottom: var(--ca-bot);
  left: var(--ca-rail);
  right: var(--ca-rail);

  border-radius: var(--ca-r);

  box-shadow: 0 0 0 600px color-mix(in srgb,
    color-mix(in srgb, var(--ca-tint, #fff) 45%, #fff) 64%, transparent);
}

.card-fullart.card-gold .ca-scrim::before { box-shadow: 0 0 0 600px rgba(233, 196, 90, 0.64); }
.card-fullart.card-foil .ca-scrim::before { box-shadow: 0 0 0 600px rgba(183, 193, 236, 0.64); }
.card-fullart.card-trending .ca-scrim::before { box-shadow: 0 0 0 600px rgba(255, 158, 199, 0.64); }

.card-fullart.card-gold .ca-scrim::after,
.card-fullart.card-foil .ca-scrim::after,
.card-fullart.card-trending .ca-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.64;

  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000),
    radial-gradient(circle var(--ca-r) at 100% 100%, transparent 0 9.4px, #000 9.9px), radial-gradient(circle var(--ca-r) at 0 100%, transparent 0 9.4px, #000 9.9px), radial-gradient(circle var(--ca-r) at 100% 0, transparent 0 9.4px, #000 9.9px), radial-gradient(circle var(--ca-r) at 0 0, transparent 0 9.4px, #000 9.9px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0, 0 100%, 0 var(--ca-top), 100% var(--ca-top),
    var(--ca-rail) var(--ca-top), calc(100% - var(--ca-rail)) var(--ca-top), var(--ca-rail) calc(100% - var(--ca-bot)), calc(100% - var(--ca-rail)) calc(100% - var(--ca-bot));
  -webkit-mask-size: 100% var(--ca-top), 100% var(--ca-bot),
    var(--ca-rail) calc(100% - var(--ca-top) - var(--ca-bot)),
    var(--ca-rail) calc(100% - var(--ca-top) - var(--ca-bot)),
    var(--ca-r) var(--ca-r), var(--ca-r) var(--ca-r), var(--ca-r) var(--ca-r), var(--ca-r) var(--ca-r);
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000),
    radial-gradient(circle var(--ca-r) at 100% 100%, transparent 0 9.4px, #000 9.9px), radial-gradient(circle var(--ca-r) at 0 100%, transparent 0 9.4px, #000 9.9px), radial-gradient(circle var(--ca-r) at 100% 0, transparent 0 9.4px, #000 9.9px), radial-gradient(circle var(--ca-r) at 0 0, transparent 0 9.4px, #000 9.9px);
  mask-repeat: no-repeat;
  mask-position: 0 0, 0 100%, 0 var(--ca-top), 100% var(--ca-top),
    var(--ca-rail) var(--ca-top), calc(100% - var(--ca-rail)) var(--ca-top), var(--ca-rail) calc(100% - var(--ca-bot)), calc(100% - var(--ca-rail)) calc(100% - var(--ca-bot));
  mask-size: 100% var(--ca-top), 100% var(--ca-bot),
    var(--ca-rail) calc(100% - var(--ca-top) - var(--ca-bot)),
    var(--ca-rail) calc(100% - var(--ca-top) - var(--ca-bot)),
    var(--ca-r) var(--ca-r), var(--ca-r) var(--ca-r), var(--ca-r) var(--ca-r), var(--ca-r) var(--ca-r);
}
.card-fullart.card-gold .ca-scrim::after {
  background: linear-gradient(115deg, #8f6810 0%, #c8971f 18%, #e6c04a 30%, #fff7e0 38%,
    #ffffff 40.5%, #fff7e0 43%, #d9ad3e 55%, #b8860b 70%, #e6c04a 86%, #8f6810 100%);
}
.card-fullart.card-foil .ca-scrim::after {
  background: linear-gradient(115deg, #c04f92 0%, #4f82cf 22%, #eaf4ff 36%, #ffffff 40%,
    #eaf4ff 44%, #2f9a84 57%, #c08436 73%, #6f52cf 88%, #c04f92 100%);
}
.card-fullart.card-trending .ca-scrim::after {
  background: linear-gradient(115deg, #c424cd 0%, #ff9ec7 26%, #ffe1ef 38%, #ffffff 42%,
    #ffe1ef 46%, #c9a0ff 62%, #7a3af5 82%, #c424cd 100%);
}

.card-fullart .ca-frame {
  position: absolute; inset: 0; pointer-events: none;

  background: color-mix(in srgb, var(--ca-tint, #fff) 78%, #fff);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174 232' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6,0 H168 A6,6 0 0 1 174,6 V226 A6,6 0 0 1 168,232 H6 A6,6 0 0 1 0,226 V6 A6,6 0 0 1 6,0 Z M12,6 H162 A6,6 0 0 1 168,12 V220 A6,6 0 0 1 162,226 H12 A6,6 0 0 1 6,220 V12 A6,6 0 0 1 12,6 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174 232' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6,0 H168 A6,6 0 0 1 174,6 V226 A6,6 0 0 1 168,232 H6 A6,6 0 0 1 0,226 V6 A6,6 0 0 1 6,0 Z M12,6 H162 A6,6 0 0 1 168,12 V220 A6,6 0 0 1 162,226 H12 A6,6 0 0 1 6,220 V12 A6,6 0 0 1 12,6 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.card-fullart .ca-content {
  position: absolute; inset: 0; padding: 13px; display: flex; flex-direction: column; justify-content: space-between; color: var(--text);
}

.card-fullart .ca-head {
  position: absolute;
  top: calc(var(--ca-top) + 9px);
  left: 13px;
  right: 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-fullart .ca-head .card-badge {
  position: absolute;
  top: calc(100% + 7px);
  left: 13px;
  margin: 0;
}
.card-fullart .card-title {
  font-size: 17px; font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; flex: none;

  color: var(--ca-ink, var(--text));

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.32), 0 1px 1px rgba(0, 0, 0, 0.20);

  -webkit-line-clamp: 2; line-clamp: 2;
}
.card-fullart .card-badge {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; color: var(--muted);
  background: rgba(255, 255, 255, 0.82); border: 1px solid var(--border); padding: 2px 8px; border-radius: 4px;
}

.card-fullart .ca-bottom {
  position: absolute;
  left: var(--ca-rail);
  right: var(--ca-rail);
  bottom: var(--ca-rail);
  height: var(--ca-cap);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;

  border-radius: 8px;

  background: color-mix(in srgb,
    color-mix(in srgb, var(--ca-tint, #fff) 22%, #fff) 80%, transparent);
}

.card-fullart.card-gold .ca-bottom { background: rgba(250, 240, 214, 0.8); }
.card-fullart.card-foil .ca-bottom { background: rgba(233, 237, 250, 0.8); }
.card-fullart.card-trending .ca-bottom { background: rgba(253, 228, 240, 0.8); }

.card-fullart .ca-head .card-methods {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.30)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

.card-fullart .ca-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.card-fullart .card-type {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #4a4a4a;
}

.card-fullart.card-gold .card-type,
.card-fullart.card-foil .card-type,
.card-fullart.card-trending .card-type { color: #1d1d1d; }
.card-fullart.card-gold .card-date,
.card-fullart.card-foil .card-date,
.card-fullart.card-trending .card-date { color: #2f2f2f; }
.card-fullart .card-teaser {
  font-size: 11px; line-height: 1.4; color: #3a3a3a;
  -webkit-line-clamp: 2; line-clamp: 2;
}
.card-fullart .card-date { font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }

.card-fullart .ca-back-panel {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ca-tint, #fff) 44%, #fdfdfd);
}

.card-fullart .ca-back-content { position: absolute; inset: 0; padding: 15px 15px calc(var(--ca-cap) + 6px); display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.card-fullart .card-finding { color: #444; }
.card-fullart .card-stack { color: var(--muted); }
.card-fullart .card-open { color: var(--text); background: rgba(0, 0, 0, 0.08); border: none; }
.card-fullart .card-open:hover { background: rgba(0, 0, 0, 0.15); color: var(--text); }

.card-fullart .card-back-actions { margin-top: auto; }
.card-fullart .card-back-actions .card-open { flex: 1 1 auto; text-align: center; }

.card-fullart .card-hint { color: var(--muted); opacity: 1; }

.card-fullart.card-gold .ca-art::before,
.card-fullart.card-foil .ca-art::before,
.card-fullart.card-trending .ca-art::before,
.card-fullart.card-gold .ca-art::after,
.card-fullart.card-foil .ca-art::after,
.card-fullart.card-trending .ca-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.card-fullart.card-gold .ca-art::before,
.card-fullart.card-foil .ca-art::before,
.card-fullart.card-trending .ca-art::before { mix-blend-mode: lighten; }
.card-fullart.card-gold .ca-art::after,
.card-fullart.card-foil .ca-art::after,
.card-fullart.card-trending .ca-art::after { mix-blend-mode: darken; }

.card-fullart.card-gold .ca-art::before { background: linear-gradient(135deg, #6f5410, #a87f1e, #8a6614); }
.card-fullart.card-gold .ca-art::after  { background: linear-gradient(135deg, #ffe9a8, #fff3cf, #ffe0a0); }

.card-fullart.card-foil .ca-art::before { background: linear-gradient(120deg, #5a2a6a, #2a5a8a, #2a6a4a, #8a6a2a); }
.card-fullart.card-foil .ca-art::after  { background: linear-gradient(120deg, #ffc9e6, #c9e6ff, #d0ffe0, #fff0c9); }

.card-fullart.card-trending .ca-art::before { background: linear-gradient(160deg, #243a8a, #4a2a8a, #7a1a6a, #7a1a2a); }
.card-fullart.card-trending .ca-art::after  { background: linear-gradient(160deg, #bcd0ff, #d8c0ff, #ffc0f0, #ffc0c8); }

.card-fullart .card-front .ca-frame { display: none; }
.card-fullart.card-gold .ca-frame,
.card-fullart.card-foil .ca-frame,
.card-fullart.card-trending .ca-frame {
  background-size: 220% 100%;
  background-position: var(--foil-x, 50%) center;
}
.card-fullart.card-gold .ca-frame { background-image: linear-gradient(120deg, #b8860b, #ffe9a8, #d9ad3e, #fff6d8, #c8971f, #ffe9a8, #b8860b); }
.card-fullart.card-foil .ca-frame { background-image: linear-gradient(120deg, #ff9ec7, #9ad0ff, #b6ffce, #ffe38c, #c9a0ff, #ff9ec7); }
.card-fullart.card-trending .ca-frame { background-image: linear-gradient(120deg, #4082ff, #7a3af5, #c424cd, #f0344a, #7a3af5, #4082ff); }

.card-fullart.card-gold .card-front::after,
.card-fullart.card-foil .card-front::after,
.card-fullart.card-trending .card-front::after { display: none; }

.card-fullart.card-gold .card-front .ca-frame,
.card-fullart.card-foil .card-front .ca-frame,
.card-fullart.card-trending .card-front .ca-frame { display: block; }

.card-fullart.preview-gold .card-front .ca-frame,
.card-fullart.preview-foil .card-front .ca-frame,
.card-fullart.preview-trending .card-front .ca-frame {
  display: block;
  background-size: 220% 100%;
  background-position: var(--foil-x, 50%) center;
}
.card-fullart.preview-gold .card-front .ca-frame { background-image: linear-gradient(120deg, #b8860b, #ffe9a8, #d9ad3e, #fff6d8, #c8971f, #ffe9a8, #b8860b); }
.card-fullart.preview-foil .card-front .ca-frame { background-image: linear-gradient(120deg, #ff9ec7, #9ad0ff, #b6ffce, #ffe38c, #c9a0ff, #ff9ec7); }
.card-fullart.preview-trending .card-front .ca-frame { background-image: linear-gradient(120deg, #4082ff, #7a3af5, #c424cd, #f0344a, #7a3af5, #4082ff); }

.card-fullart.card-gold .card-front .ca-art::before,
.card-fullart.card-foil .card-front .ca-art::before,
.card-fullart.card-trending .card-front .ca-art::before,
.card-fullart.card-gold .card-front .ca-art::after,
.card-fullart.card-foil .card-front .ca-art::after,
.card-fullart.card-trending .card-front .ca-art::after { content: none; }

.card-fullart.card-gold .card-inner { box-shadow: 0 5px 18px rgba(200, 150, 30, 0.36); }
.card-fullart.card-foil .card-inner { box-shadow: 0 5px 18px rgba(120, 160, 240, 0.34); }
.card-fullart.card-trending .card-inner { box-shadow: 0 5px 18px rgba(150, 70, 220, 0.36); }

.card-fullart.card-gold .card-title,
.card-fullart.card-foil .card-title,
.card-fullart.card-trending .card-title {
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background-size: 220% 100%; background-position: var(--foil-x, 50%) center;

  text-shadow: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.32)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.20));
}

.card-fullart.card-gold .card-title {
  background-image: linear-gradient(115deg, #61470b 0%, #886715 18%, #9c8332 30%, #ada898 38%, #adadad 40.5%, #ada898 43%, #94762a 55%, #7d5b07 70%, #9c8332 86%, #61470b 100%);
}
.card-fullart.card-foil .card-title {
  background-image: linear-gradient(115deg, #833663 0%, #36588d 22%, #9fa6ad 36%, #adadad 40%, #9fa6ad 44%, #20695a 57%, #835a25 73%, #4b388d 88%, #833663 100%);
}
.card-fullart.card-trending .card-title {
  background-image: linear-gradient(115deg, #254388 0%, #451888 24%, #9c92ad 36%, #adadad 40%, #9c92ad 44%, #741069 58%, #8d1825 74%, #451888 90%, #254388 100%);
}

.card-fullart .ca-tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}
.card-fullart .ca-tool { position: relative; width: 21px; height: 21px; }
.card-fullart .ca-tool.is-glyph { width: 19px; height: 19px; }

.card-fullart .ca-tool img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-fullart .ca-tool-tag {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #333;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}

.relic-edition {
  background: none;
  border: none;
  box-shadow: none;
  pointer-events: none;        
  left: 0; top: 0;             
  width: 0; height: 0;
  display: block;              
  overflow: visible;
}
.relic-edition .ed-emblem {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);   
  width: 36px; height: 36px;
  font-size: 36px; line-height: 1;
  display: grid; place-items: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  background-size: 220% 100%;
  background-position: var(--foil-x, 50%) center;   
}

.relic-ed-gold .ed-emblem,
.relic-ed-foil .ed-emblem {
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.relic-ed-gold .ed-emblem { background-image: linear-gradient(115deg, #8f6810 0%, #c8971f 18%, #e6c04a 30%, #fff7e0 38%, #ffffff 40.5%, #fff7e0 43%, #d9ad3e 55%, #b8860b 70%, #e6c04a 86%, #8f6810 100%); }
.relic-ed-foil .ed-emblem { background-image: linear-gradient(120deg, #ff9ec7, #9ad0ff, #b6ffce, #ffe38c, #c9a0ff, #ff9ec7); }

.relic-ed-trending .ed-emblem {
  background-image: linear-gradient(120deg, #4082ff, #7a3af5, #c424cd, #f0344a, #7a3af5, #4082ff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16z'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16z'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}

.page-section {
  padding: 52px 0;
}

.section-h {
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 16px;
}
.section-sub { font-size: 13px; color: var(--muted); margin-bottom: 16px; line-height: 1.6; }

.pin {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pin:hover {
  border-color: var(--relic-ring, #7d8a99);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}
.pin-badge {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;

  color: var(--relic-ring, #7d8a99);
  background: var(--surface);
  border: 1.5px solid var(--relic-ring, #7d8a99);
}
.pin-meta { display: flex; flex-direction: column; line-height: 1.25; }
.pin-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pin-uses { font-size: 10px; color: var(--muted); white-space: nowrap; }

.pin-tier {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.pin-tier-label { flex: 0 0 190px; padding-top: 6px; }
.pin-tier-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pin-tier-items { display: flex; flex-wrap: wrap; gap: 12px; flex: 1; }
.pin-tier-items .pin { text-decoration: none; }

.pin-unused { opacity: 0.42; }
.pin-unused .pin-badge { background: #7c8189; }

@media (max-width: 900px) {
  .pin-tier { flex-direction: column; gap: 12px; }
  .pin-tier-label { flex: none; padding-top: 0; }
}

.collection-zone {
  position: relative;
  margin-top: 8px;
}

.collection-zone .section-h,
.collection-zone .section-sub,
.collection-zone .finder-count { text-align: center; }
.collection-zone .section-sub { max-width: 520px; margin-left: auto; margin-right: auto; }
.finder-results { justify-content: center; }

.explore-box { max-width: 620px; margin: 0 auto; }

.finder-input {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 13px 15px;
}
.finder-input:focus { outline: none; border-color: var(--accent-ink); }
.finder-input::placeholder { color: var(--muted); opacity: 0.7; }

.explore-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.seed {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.seed:hover { border-color: var(--accent); transform: translateY(-1px); }

.finder-count {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0;
}

.finder-results.fan {
  position: relative;
  display: block;              
  height: 300px;
  margin: 0 auto 4px;
  padding: 0;
  overflow: visible;           
  max-width: none;
}
.finder-results.fan .card {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 208px;
  margin-left: -104px;         
  transform-origin: 50% 100%;  
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.finder-results.fan .card:not(.card-sealed):hover { --pull: -46px; z-index: 60 !important; }

.reshuffle-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 30px;         
}
.reshuffle-row .finder-count { margin: 0; min-height: 14px; }
.reshuffle-btn {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: var(--side-quests);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(181, 101, 118, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.reshuffle-btn:hover { transform: translateY(-2px) rotate(-35deg); box-shadow: 0 7px 20px rgba(181, 101, 118, 0.42); filter: brightness(1.05); }
.reshuffle-btn:active { transform: translateY(0) scale(0.94); }

.explore-box > .explore-topics { margin-top: 12px; }

.pin-badge:has(.pin-logo),
.pin-badge:has(.pin-glyph),
.relic:has(.relic-logo),
.relic:has(.relic-glyph) { background: none; border: none; box-shadow: none; }

.pin-glyph, .relic-glyph {
  width: 20px; height: 20px; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.22));
}

.pin-logo, .relic-logo {
  width: 22px; height: 22px; object-fit: contain; display: block;
  filter:
    drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}

.relic-sticker { position: relative; width: 22px; height: 22px; display: block; }
.relic-sticker.is-glyph { width: 20px; height: 20px; }
.relic-sticker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.relic-sticker .relic-fill { filter: url(#stickerFill) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28)); }
.relic-sticker .relic-logo,
.relic-sticker .relic-glyph { filter: none; }

.shelf-cta { text-align: center; }
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cta-btn:hover {
  color: var(--on-accent);
  background: var(--accent-grad);
  border-color: transparent;
  transform: translateY(-1px);
}

.radar-panel-teaser { max-width: 420px; margin: 14px auto 0; }

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.about-split-viz { min-width: 0; }

.about-split-copy { text-align: left; }

.about-lede {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 18px;
}

.about-split-copy p.about-lede { font-size: var(--t-lede); line-height: 1.5; color: var(--text); }
.about-lede strong { font-weight: 700; }

.about-split-copy p {
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 14px;
}
.about-split-copy .cta-btn { display: inline-flex; margin-top: 4px; }

@media (max-width: 900px) {
  .about-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .about-split-copy { text-align: center; }
  .about-split-copy .cta-btn { display: inline-flex; }
}

.mapcol .at-graph-wrap { max-width: 1180px; margin: 18px auto 0; }
.mapcol .stage { height: clamp(420px, 62vh, 680px); }

.map-teaser {
  position: relative;
  height: clamp(380px, 56vh, 540px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.map-teaser #soon-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.map-teaser-inner { position: relative; z-index: 1; width: 100%; max-width: 640px; padding: 0 24px; }
.map-teaser-inner .section-sub { margin-left: auto; margin-right: auto; }
.map-teaser-inner .cta-btn { display: inline-flex; margin-top: 18px; }

.soon-tip {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 82%, #fff 6%);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 11px;
  white-space: nowrap;
}

.alluvialcol .at-alluvial { display: block; width: 100%; max-width: 1180px; height: auto; margin: 18px auto 0; }
.at-alluvial-node { cursor: pointer; }
.at-alluvial-ribbon { transition: opacity 0.15s ease; }
.at-alluvial-ribbon.at-alluvial-dim { opacity: 0.12; }

.at-alluvial-inline-label {
  font-family: var(--font); font-size: 10px; font-weight: 600; fill: #fff;
  paint-order: stroke; stroke: rgba(0,0,0,0.45); stroke-width: 2.5px; stroke-linejoin: round;
  pointer-events: none;
}
.at-alluvial-heading {
  font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  fill: var(--muted); text-transform: uppercase;
}

.traj {
  list-style: none;
  position: relative;

  --traj-climb: 300px;
  --traj-slots: 5;        

  --traj-pad: 22px;
  --traj-open: 285px;     
  --traj-closed: 100px;   

  --traj-bend-x: 0.3;

  --traj-steep: 6;

  --traj-span-inset: 260px;
  --traj-open-slot: 2;    

  --traj-slot-squeeze: 0;

  --traj-up: calc(var(--traj-climb) * 0.478);
  --traj-down: calc(var(--traj-climb) * 0.478);
  --traj-top: calc(var(--traj-up) + var(--traj-pad));

  --traj-extra: 0px;

  --traj-fit: max;
  height: calc(var(--traj-top) + max(var(--traj-open), var(--traj-down) + var(--traj-closed))
               + var(--traj-extra));

  overflow: hidden;

  touch-action: pan-y;

  transition: height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);

  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.traj:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.traj-line {
  position: absolute;
  left: 50%;

  top: calc(var(--traj-top) + 5px);
  overflow: visible;
  pointer-events: none;
}

.traj-line path {
  fill: url(#trajGrad);
  stroke: none;
}

.traj-line .tg-in { stop-color: var(--muted); stop-opacity: 0.85; }
.traj-line .tg-out { stop-color: var(--muted); stop-opacity: 0; }

.traj-line path.traj-hi-glow {
  fill: var(--traj-hi, var(--accent));
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.traj-line path.traj-hi-glow.on { opacity: 0.62; }

.traj-line path.traj-hi {
  fill: color-mix(in srgb, var(--traj-hi, var(--accent)) 32%, #fff);
  opacity: 0;

  transition: opacity 0.18s ease;
  pointer-events: none;
}
.traj-line path.traj-hi.on { opacity: 0.95; }

.traj-role { cursor: default; }
.traj-role:hover .traj-title { color: var(--traj-hi, var(--accent-ink)); }
.traj-node.traj-lit { opacity: 1 !important; }
.traj-node.traj-lit .traj-year { color: var(--traj-hi, var(--accent-ink)); }

.traj-node.traj-lit .traj-dot {
  border-color: var(--traj-hi, var(--accent));
  box-shadow:
    0 0 6px 1px color-mix(in srgb, var(--traj-hi, var(--accent)) 70%, transparent),
    0 0 16px 5px color-mix(in srgb, var(--traj-hi, var(--accent)) 32%, transparent);
}
.traj-node {
  position: absolute;
  left: 50%;

  top: var(--traj-top);

  display: flex;
  align-items: flex-start;
  width: 272px;
  margin-left: -76px;

  transform-origin: 76px 6px;
  cursor: pointer;                 
}

.traj-node .traj-note { display: none; }
.traj-node.is-open .traj-note { display: block; animation: traj-note-in 0.3s ease 0.12s backwards; }

.traj-fields { display: none; }
.traj-node.is-open .traj-fields {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  flex: 0 0 auto;

  transform: translateY(2px);
  animation: traj-note-in 0.3s ease 0.12s backwards;
}

.traj-field-ico {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 30%;
  display: block;

  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent);
}

.traj-node.is-open { width: 392px; }   

.traj-node.is-open .traj-roles { max-width: var(--traj-reach, none); }

.traj-node.is-open .traj-title {
  display: block;

  margin-bottom: 5px;

  line-height: 1.45;
}

.traj-node.is-open .traj-title > span:not(.traj-fields),
.traj-node.is-open .traj-note {
  display: inline;
  background: var(--bg);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  padding: 1px 6px;
  border-radius: 7px;

  margin-left: -6px;
}

.traj-node.is-open .traj-fields {
  background: var(--bg);
  border-radius: 7px;
  padding: 1px 5px;
  margin-left: -5px;
}
.traj-node.is-open .traj-year {
  background: var(--bg);
  border-radius: 7px;

  padding: 1px 2px 1px 6px;
  margin-left: -6px;
}

@keyframes traj-note-in { from { opacity: 0; } to { opacity: 1; } }

.traj-measuring .traj-note,
.traj-measuring .traj-fields { animation: none !important; }

.traj-role { display: block; }
.traj-role + .traj-role { margin-top: 12px; }
.traj-node:not(.is-open) .traj-role + .traj-role { margin-top: 6px; }

.traj-year {
  flex: 0 0 70px;
  white-space: nowrap;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;

  font-size: calc(11px - 2px * var(--traj-far, 0));
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);

  transform: translateY(calc(var(--sep, 0px) * -1));
}

.traj-roles {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 10px;
  margin-left: -16px;
  margin-top: 8px;
  transform: translateY(var(--sep, 0px));   
}

.traj-dot {
  display: block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;

  margin: 0;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--muted);

  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease,
              box-shadow 0.18s ease;
}

.traj-node.is-open .traj-dot {
  transform: scale(1.5);
  background: var(--text);
  border-color: var(--text);
}

.traj-now .traj-dot { background: var(--text); border-color: var(--text); }
.traj-now .traj-title { color: var(--accent-ink); }

.traj-title {
  display: flex;
  align-items: flex-end;
  gap: 9px;

  font-size: calc(14px - 2.5px * var(--traj-far, 0));
  font-weight: 600;
  line-height: 1.3;
}

.traj-title > span { flex: 0 1 auto; min-width: 0; }
.traj-note { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }

.traj-block {
  position: relative;

  margin: var(--stack, 76px) auto 0;
  --gutter: max(0px, calc((100% - 1000px) / 2));
}

.traj-head {
  position: absolute;
  left: var(--gutter);
  top: 30px;
  z-index: 2;
  max-width: 300px;
  text-align: left;
}
.traj-block .about-sub { margin: 0; text-align: left; }
.traj-sub {
  margin: 8px 0 0;
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--muted);
}

.traj-cv-note {
  position: absolute;
  right: var(--gutter);

  bottom: 18px;
  z-index: 2;
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--muted);
  text-align: right;
}
.traj-cv-note a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.traj-more { display: none; }
.traj-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}
.traj-sheet[hidden] { display: none; }
.traj-sheet-back {
  position: sticky;
  top: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 12px 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.traj-sheet-back svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.traj-sheet-body { padding: 4px 0 40px; }
.traj-sheet .about-sub { margin: 0 0 18px; text-align: center; }
.traj-sheet .traj-cv-note { position: static; margin: 22px auto 0; padding: 0 20px; text-align: center; }
.traj-cv-note a:hover { border-bottom-color: var(--accent-ink); }

@media (max-width: 1150px) {
  .traj-block {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    --gutter: max(32px, calc((100% - 1000px) / 2));
  }
}

@media (max-width: 900px) {
  .traj {
    --traj-span-inset: 176px;

    --traj-slot-squeeze: 0.44;
  }
}

@media (max-width: 640px) {
  .traj-head {
    position: static;
    max-width: none;
    margin: 0 auto 16px;
    padding: 0 20px;
    text-align: center;
  }
  .traj-block .about-sub { text-align: center; }
  .traj-cv-note {
    position: static;
    margin: 16px auto 0;
    padding: 0 20px;
    text-align: center;
  }
  .traj-block > .traj-cv-note { display: none; }
  .traj-more {
    display: flex;
    width: max-content;
    margin: 18px auto 0;
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  .traj {
    --traj-axis: vertical;
    --traj-left: 40px;
    --traj-pad: 20px;
    --traj-lead: 56px;
    --traj-slots: 3;
    --traj-open-slot: 2;
    -webkit-mask-image: none;
    mask-image: none;
    transition: none;
  }
  .traj-node { cursor: default; }

  .traj-node.is-open { width: calc(100vw - var(--traj-left) - 16px); }

  .traj-node.is-open .traj-roles { max-width: none; }

  .traj-node {
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -6px;
    transform-origin: 6px 6px;
  }

  .traj-dot { order: -1; }
  .traj-year {
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-start;

    margin-left: 14px;
    padding-left: 0;
    padding-right: 0;

    transform: none;
  }

  .traj-node.is-open .traj-year {
    padding: 1px 6px;
    margin-left: 14px;
  }
  .traj-roles {
    flex: 0 0 100%;
    padding-left: 46px;
    margin-left: 0;
    margin-top: 6px;
    transform: none;
  }

  .traj-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .traj-title > span { width: 100%; }

  .traj-node.is-open .traj-fields { display: flex; transform: none; }
  .traj-node.is-open .traj-note { padding: 0; margin-left: 0; }

  .traj-node:not(.is-open) .traj-roles { display: none; }
  .traj-node.traj-anchor .traj-roles { display: none; }
  .traj-node.traj-anchor .traj-year { opacity: 0.55; }
}

.about-page { max-width: 700px; margin: 0 auto; padding: 8px 0 44px; }
.about-para { font-family: var(--serif); font-size: var(--t-body); line-height: 1.7; color: var(--text); margin-bottom: 18px; }

.about-para strong { font-weight: 700; color: var(--text); }
.about-h { margin-top: 36px; margin-bottom: 14px; }

.about-cv-note { font-size: var(--t-meta); line-height: 1.6; color: var(--muted); margin: 14px 0 0 42px; }
.about-cv-note a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.about-cv-note a:hover { border-bottom-color: var(--accent-ink); }

.about-quote { font-family: var(--serif); font-size: var(--t-lede); line-height: 1.55; color: var(--text); font-style: italic; }
.about-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.about-links a { font-size: var(--t-meta); color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; align-self: flex-start; }
.about-links a:hover { border-bottom-color: var(--accent-ink); }

.see-all {
  display: block;
  text-align: center;
  margin-top: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
}
.see-all:hover { color: var(--accent-ink); }

.grid-head { max-width: 1100px; margin: 0 auto; padding: 30px 0 6px; text-align: center; }
.grid-title {
  font-family: var(--serif);
  font-size: var(--t-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05;
}
.grid-lede {
  max-width: 34em; margin: 14px auto 0;
  font-family: var(--serif); font-size: var(--t-lede); line-height: 1.55; color: var(--text);
}

.grid-switch-row {
  max-width: 1100px;
  margin: 8px auto 0;   
  text-align: center;
}

.grid-browse { max-width: 1122px; margin: 0 auto; padding: 24px 0 60px; }
.grid-browse .finder-input { display: block; max-width: 620px; margin: 0 auto; }

.grid-filter-selects {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 620px;
  margin: 12px auto 0;
}
.grid-select {
  flex: 1 1 0;
  min-width: 130px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 30px 9px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236b6b6b' stroke-width='1.4'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.grid-select:hover { border-color: var(--muted); }
.grid-select:focus { outline: none; border-color: var(--accent-ink); }

.grid-toolbar { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 10px; }
.grid-browse .finder-count { text-align: center; margin: 0; }

.view-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 32px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.view-switch:hover { border-color: var(--muted); }
.view-switch:focus { outline: none; }
.view-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.view-switch-knob {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  transition: transform 0.22s cubic-bezier(0.2, 0.85, 0.3, 1);
}

.view-switch[aria-checked="true"] .view-switch-knob { transform: translateX(100%); }
.view-switch-ico {
  position: relative;      
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color 0.18s ease;
}
.view-switch-ico svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.view-switch[aria-checked="false"] .view-switch-ico[data-view="grid"],
.view-switch[aria-checked="true"] .view-switch-ico[data-view="list"] { color: var(--accent-ink); }

.grid-results {
  max-width: calc(208px * 5 + 20px * 4 + 2px);
  margin-inline: auto;
  padding: 8px 0 0;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 560px) {
  .grid-results {
    gap: 12px;

    width: 100%;
  }
   
  .grid-results .card {
    flex: 0 0 calc(50% - 6px);
    max-width: 208px;
    min-width: 0;
  }
  .grid-results .card-inner,
  .grid-results .card-face {
    height: auto;
    min-height: 0;
    aspect-ratio: 208 / 278;
  }
}

.grid-hud {
  display: flex;
  align-items: center;

  --hud-gap: 8px;
  gap: var(--hud-gap);

  width: 100%;
  margin: 0 0 10px;
  padding: 12px 18px;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);

  pointer-events: none;
}
.grid-hud .hud-face { pointer-events: auto; }

.hud-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hud-gap);
  width: 100%;
  min-width: 0;
}

.hud-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hud-gap);
  max-width: 100%;
}

.hud-pane { flex-direction: row; }
.hud-face[hidden] { display: none; }

.hud-searchbox {
  position: relative;
  display: flex;

  width: 100%;

  max-width: var(--hud-row);
}

.hud-searchbox::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.6 10.6 14 14'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.6 10.6 14 14'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;

  pointer-events: none;
}
.hud-search {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 36px;

  padding: 0 14px 0 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-meta);
}
.hud-search:focus { outline: none; border-color: var(--accent-ink); }

.grid-hud {
  --hud-ctl: 112px;
  --hud-row: calc(var(--hud-ctl) * 4 + var(--hud-gap) * 3 + 4px);
}
.hud-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: var(--hud-ctl);
  height: 36px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hud-btn:hover { border-color: var(--muted); }

.hud-btn.is-on { background: var(--at-ink, #111); color: var(--at-on-ink, #fff); border-color: transparent; }
.hud-btn-count {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 22%, transparent);
  font-size: 10px; font-weight: 700;
}

.grid-hud .view-switch { flex: 0 0 auto; margin-left: 4px; width: var(--hud-ctl); height: 36px; }

@media (max-width: 640px) {
  .grid-hud .view-switch {
    width: 36px;
    grid-template-columns: 1fr;
    padding: 0;
    margin-left: 2px;
  }
  .view-switch-knob { display: none; }
  .view-switch[aria-checked="false"] .view-switch-ico[data-view="grid"],
  .view-switch[aria-checked="true"] .view-switch-ico[data-view="list"] { display: none; }
  .view-switch-ico { color: var(--text); }
  .view-switch-ico svg { width: 17px; height: 17px; }
}

.hud-back {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.hud-back:hover { color: var(--text); }

.hud-back svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.hud-opts {
  display: flex; align-items: center; gap: 6px;

  flex: 0 1 auto; min-width: 0;

  justify-content: center;
  justify-content: safe center;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hud-opts::-webkit-scrollbar { display: none; }
.hud-opt {
  flex: 0 0 auto;
  height: 32px; padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.hud-opt:hover { border-color: var(--muted); }
.hud-opt.is-on { background: var(--at-ink, #111); color: var(--at-on-ink, #fff); border-color: transparent; }

.hud-opt-all { font-style: italic; }

@media (max-width: 560px) {
  .grid-hud { padding: 12px 14px; --hud-gap: 6px; --hud-ctl: 96px; }

   
  .hud-btn { width: auto; min-width: 64px; padding: 0 12px; }

   
  .hud-btn-count { display: none; }
}

.grid-fail { list-style: none; color: var(--muted); text-align: center; padding: 40px; }

.grid-results[hidden], .grid-list[hidden] { display: none; }

.grid-list { list-style: none; max-width: 900px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 10px; }
.grid-row-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.grid-row-link:hover { border-color: var(--muted); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.grid-row-thumb {
  flex: 0 0 64px;
  width: 64px; height: 64px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(127, 127, 127, 0.08);
}
.grid-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid-row-thumb .ca-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 9px; color: var(--muted); }
.grid-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.grid-row-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grid-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.grid-row-meta .pill { margin: 0; }
@media (max-width: 640px) {
  .grid-row-thumb { flex-basis: 48px; width: 48px; height: 48px; }
  .grid-row-type { display: none; }  
}

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

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px 24px;
  font-size: 12px;
  color: var(--muted);
}
.site-footer p { margin: 0; }
.footer-copy { margin: 0; opacity: 0.75; }
.footer-social { display: flex; align-items: center; gap: 8px; }
.social-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.social-btn:hover { color: var(--accent-ink); border-color: var(--accent); }
.social-btn svg {
  width: 15px; height: 15px;
  fill: currentColor;
}

@media (max-width: 640px) {
  .contact-row { flex-direction: column; align-items: center; }
}
.contact-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 9px;

  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  text-decoration: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;

  --brand: var(--accent);
  transition: color 0.15s ease;
}

.contact-link[href^="mailto:"]      { --brand: #e5484d; }
.contact-link[href*="linkedin.com"] { --brand: #2f80d8; }
.contact-link[href*="kaggle.com"]   { --brand: #20a9e6; }

.contact-link:hover,
.contact-link:focus-visible {
  color: var(--brand);
}

.contact-link svg { width: 16px; height: 16px; fill: var(--brand); flex: 0 0 auto; }

@media (max-width: 560px) {
  .page-section { padding: 40px 0; }

  .aboutcol { --stack: 46px; }
}

.card-gold .card-front,
.card-gold .card-back {
  position: relative;
  overflow: hidden;
  border-color: #c8a028;
  background: linear-gradient(165deg, #fffdf6, #fff6df);  
}
.card-gold .card-front::after,
.card-gold .card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(115deg,
    rgba(255, 244, 214, 0) 0%,
    rgba(206, 166, 62, 0.44) 24%,
    rgba(255, 250, 226, 0.16) 40%,   
    rgba(188, 142, 38, 0.5) 58%,
    rgba(255, 243, 205, 0.2) 74%,
    rgba(255, 244, 214, 0) 96%);
  background-size: 210% 210%;
  background-position: var(--foil-x, 50%) var(--foil-y, 50%);
  mix-blend-mode: multiply;
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.card-gold:hover .card-front::after,
.card-gold:hover .card-back::after { opacity: 1; }

.card-gold .card-tilt::after {
  content: "";
  position: absolute;
  inset: -16px;              
  z-index: 3;
  pointer-events: none;

  background-image:

    radial-gradient(ellipse 26px 0.8px at 88% 7%,  rgba(255, 244, 200, 0.72) 0%, transparent 100%),
    radial-gradient(ellipse 0.8px 26px at 88% 7%,  rgba(255, 244, 200, 0.72) 0%, transparent 100%),
    radial-gradient(ellipse 28px 0.9px at 15% 96%, rgba(255, 240, 194, 0.68) 0%, transparent 100%),
    radial-gradient(ellipse 0.9px 28px at 15% 96%, rgba(255, 240, 194, 0.68) 0%, transparent 100%),
    radial-gradient(ellipse 22px 0.7px at 3% 55%,  rgba(255, 242, 198, 0.66) 0%, transparent 100%),
    radial-gradient(ellipse 0.7px 22px at 3% 55%,  rgba(255, 242, 198, 0.66) 0%, transparent 100%),
    radial-gradient(ellipse 20px 0.7px at 97% 72%, rgba(255, 246, 208, 0.62) 0%, transparent 100%),
    radial-gradient(ellipse 0.7px 20px at 97% 72%, rgba(255, 246, 208, 0.62) 0%, transparent 100%),
    radial-gradient(ellipse 18px 0.7px at 8% 12%,  rgba(255, 248, 214, 0.6) 0%, transparent 100%),
    radial-gradient(ellipse 0.7px 18px at 8% 12%,  rgba(255, 248, 214, 0.6) 0%, transparent 100%),

    radial-gradient(circle 9px  at 8% 12%,  rgba(255, 250, 226, 0.9) 0%, rgba(248, 216, 128, 0.42) 24%, rgba(232, 190, 80, 0.12) 52%, transparent 100%),
    radial-gradient(circle 13px at 88% 7%,  rgba(255, 246, 214, 0.85) 0%, rgba(240, 202, 96, 0.4) 22%, rgba(226, 182, 70, 0.1) 50%, transparent 100%),
    radial-gradient(circle 8px  at 96% 38%, rgba(255, 250, 224, 0.9) 0%, rgba(246, 212, 120, 0.4) 24%, rgba(230, 188, 78, 0.1) 52%, transparent 100%),
    radial-gradient(circle 11px at 3% 55%,  rgba(255, 244, 206, 0.82) 0%, rgba(236, 196, 88, 0.38) 22%, rgba(222, 176, 66, 0.1) 50%, transparent 100%),
    radial-gradient(circle 9px  at 78% 90%, rgba(255, 252, 232, 0.9) 0%, rgba(250, 220, 136, 0.42) 24%, rgba(234, 194, 84, 0.12) 52%, transparent 100%),
    radial-gradient(circle 14px at 15% 96%, rgba(255, 242, 200, 0.8) 0%, rgba(234, 194, 86, 0.36) 22%, rgba(220, 174, 64, 0.1) 50%, transparent 100%),
    radial-gradient(circle 8px  at 55% 3%,  rgba(255, 248, 218, 0.88) 0%, rgba(244, 208, 112, 0.4) 24%, rgba(228, 186, 74, 0.1) 52%, transparent 100%),
    radial-gradient(circle var(--ca-r) at 97% 72%, rgba(255, 246, 212, 0.85) 0%, rgba(242, 206, 104, 0.38) 22%, rgba(226, 182, 72, 0.1) 50%, transparent 100%),
    radial-gradient(circle 8px  at 35% 22%, rgba(255, 244, 202, 0.72) 0%, rgba(238, 200, 96, 0.32) 24%, rgba(224, 178, 68, 0.08) 52%, transparent 100%),
    radial-gradient(circle 7px  at 64% 68%, rgba(252, 238, 190, 0.68) 0%, rgba(234, 196, 92, 0.3) 24%, rgba(220, 176, 66, 0.08) 52%, transparent 100%);
  background-repeat: no-repeat;
  filter: blur(0.6px);       

  transform: translateZ(1px)
             translate(calc((var(--foil-x, 50%) - 50%) * 0.14), calc((var(--foil-y, 50%) - 50%) * 0.14));
  opacity: 0;                
  transition: opacity 0.25s ease;
}
.card-gold:hover .card-tilt::after { opacity: 1; }

.spark {
  position: absolute;
  background: radial-gradient(circle,
    rgba(255, 253, 242, 0.95) 0%,
    rgba(252, 226, 150, 0.5) 18%,
    rgba(238, 198, 92, 0.18) 42%,
    transparent 100%);
  pointer-events: none;
  animation: spark-pop 0.6s ease-out forwards;
}

.spark::before,
.spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 1px;
}
.spark::before {
  width: 300%;
  height: 1.4px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 242, 198, 0.75) 50%, transparent 100%);
}
.spark::after {
  width: 1.4px;
  height: 300%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent 0%, rgba(255, 242, 198, 0.75) 50%, transparent 100%);
}

@keyframes spark-pop {
  0%   { opacity: 0; transform: translateZ(2px) scale(0.15) rotate(0deg); }
  22%  { opacity: 1; transform: translateZ(2px) scale(1.15) rotate(22deg) translateY(-2px); }
  100% { opacity: 0; transform: translateZ(2px) scale(0.4) rotate(60deg) translateY(-18px); }
}

.deck-thumb, .card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 auto;
}
.deck-thumb { height: 108px; margin-bottom: 2px; }
.card-thumb { height: 66px; }
.deck-thumb img, .card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-ph {
  background-color: rgba(127, 127, 127, 0.06);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 7px, rgba(127, 127, 127, 0.10) 7px, rgba(127, 127, 127, 0.10) 8px);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.shelf, .opened { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.shelf::-webkit-scrollbar, .opened::-webkit-scrollbar { height: 8px; width: 8px; }
.shelf::-webkit-scrollbar-track, .opened::-webkit-scrollbar-track { background: transparent; }
.shelf::-webkit-scrollbar-thumb, .opened::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.fetch-fail, .noscript {
  max-width: var(--max);
  margin: 80px auto;
  padding: 0 32px;
  font-size: 15px;
  color: var(--muted);
}
.fetch-fail a, .noscript a { color: var(--text); }

@keyframes shake-no {
  0%, 100% { transform: translateX(0) rotate(var(--fan, 0deg)) translateY(var(--pull, 0px)); }
  15% { transform: translateX(-7px) rotate(var(--fan, 0deg)) translateY(var(--pull, 0px)); }
  30% { transform: translateX(7px) rotate(var(--fan, 0deg)) translateY(var(--pull, 0px)); }
  45% { transform: translateX(-5px) rotate(var(--fan, 0deg)) translateY(var(--pull, 0px)); }
  60% { transform: translateX(5px) rotate(var(--fan, 0deg)) translateY(var(--pull, 0px)); }
  80% { transform: translateX(-3px) rotate(var(--fan, 0deg)) translateY(var(--pull, 0px)); }
}
.card.shake, .deck.shake { animation: shake-no 0.42s ease; }

@keyframes deal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes shelf-swap-out {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0.42); opacity: 0; }
}
@keyframes shelf-swap-in {
  from { transform: scale(0.42); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.shelf-swap-out {
  animation: shelf-swap-out 0.30s cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
}
.shelf-swap-in {
  animation: shelf-swap-in 0.42s cubic-bezier(0.18, 0.9, 0.32, 1) backwards;
}

.shelf-swap-out,
.shelf-swap-in { pointer-events: none; }

.shelf .deck {
  animation: deal-in 0.30s cubic-bezier(0.2, 0.85, 0.3, 1) backwards;
}

.identity,
.shelf-prompt {
  animation: view-in 0.28s ease-out both;
}

.deck {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.shelf.carousel .deck { transition: box-shadow 0.15s ease, border-color 0.15s ease; }

body.fx-lite .deck-pack .pk-glit,
body.fx-lite .deck-pack .pk-edge,
body.fx-lite .deck-pack .pk-seal::after { display: none; }

body.fx-lite .deck-pack .pk-bulge,
body.fx-lite .deck-pack .pk-seal { display: none; }

.deck:not(.deck-sealed):not(.docked):hover {
  transform: translateY(7px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 1150px) {
  .identity {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 26px;
    gap: 22px;
  }

  .hero-me { flex: 0 0 auto; max-width: none; align-items: center; text-align: center; }

  .hero-intro, .hero-claim { margin-inline: auto; }
  .shelf.carousel { height: 430px; }
}

@media (max-width: 640px) {
  .cluster {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    justify-items: center;
    align-items: start;
    gap: 14px 12px;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .cluster-slot { position: static; transform: none; }
  .slot-pinned { grid-column: 1 / -1; grid-row: 1; z-index: 3; }
  .slot-recent { grid-column: 1; grid-row: 2; }
  .slot-wip    { grid-column: 2; grid-row: 2; }
  .cluster .card { --fan: 0deg; }
  .fan-caption { position: static; grid-column: 1 / -1; grid-row: 3; margin: 0; }
}

@media (max-width: 560px) {
  #app { padding: 0 20px; }
  .identity { padding-top: 20px; }

  .identity { align-items: flex-start; }
  .hero-me { align-items: flex-start; text-align: left; }
  .hero-intro, .hero-claim { margin-inline: 0; }

  .cluster-slot { width: 154px; height: 206px; }
  .cluster-slot .quick-cards { transform: scale(0.74); transform-origin: top left; }

  .finder-results.fan .card {
    top: 0;
    bottom: auto;
    transform-origin: 50% 100%;
  }
}

@media (max-height: 920px) {
  .deck-pack.docked { zoom: 0.73; }
}

@media (max-height: 860px) {
  .opened { padding: 12px 24px 16px; }
  .deckpage-cards { gap: 12px; padding: 8px; }
  .deckpage-cards .card { flex-basis: 150px; }
  .deckpage-cards .card-inner, .deckpage-cards .card-face { height: 200px; min-height: 200px; }
  .deckpage-cards .card-thumb { height: 48px; }
  .deckpage-cards .card-fullart { --ca-top: 7px; --ca-bot: 27px; --ca-cap: 46px; }
  .chip-dock { padding-top: 6px; }
  .deck.docked { min-height: 0; padding: 12px 18px; }

  .deck.docked .deck-blurb, .deck.docked:not(.deck-pack) .deck-thumb { display: none; }
}

.card-fullart { --cp-ink: #1d1d1d; --cp-cream: #f4ecdc; --cp-b: 1.5px; --cp-tip: 14px; --cn-r: 15px; --cq-r: 50px; }

.card-fullart .ca-plate {
  position: absolute;
  top: 20px;
  left: 10px;
  right: 10px;
  height: 46px;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.card-fullart .ca-plate .cp-o,
.card-fullart .ca-plate .cp-i {
  position: absolute;
  clip-path: polygon(var(--cp-tip) 0, calc(100% - var(--cp-tip)) 0, 100% 50%, calc(100% - var(--cp-tip)) 100%, var(--cp-tip) 100%, 0 50%);
}
.card-fullart .ca-plate .cp-o { inset: 0; background: var(--cp-ink); }
.card-fullart .ca-plate .cp-i { inset: var(--cp-b); background: var(--cp-cream); --cp-tip: 13.2px; }
.card-fullart .ca-plate .cn-o,
.card-fullart .ca-plate .cn-i {
  position: absolute;
  left: 50%;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.card-fullart .ca-plate .cn-o { width: calc(var(--cn-r) * 2 + var(--cp-b) * 2); height: calc(var(--cn-r) * 2 + var(--cp-b) * 2); background: var(--cp-ink); }
.card-fullart .ca-plate .cn-i { width: calc(var(--cn-r) * 2); height: calc(var(--cn-r) * 2); background: var(--cp-cream); }

.card-fullart .ca-notch {
  position: absolute;
  left: 50%;
  top: -7px;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.card-fullart .ca-notch .ed-emblem {
  width: 16px; height: 16px;
  font-size: 15px; line-height: 1;
  display: grid; place-items: center;
  background-size: 220% 100%;
  background-position: var(--foil-x, 50%) center;
}
.card-fullart .ca-notch.relic-ed-trending .ed-emblem { -webkit-mask-size: 14px 14px; mask-size: 14px 14px; }

.card-fullart .ca-plate .card-title {
  position: relative;
  max-width: calc(100% - 40px);
  max-height: 2.3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-align: center;
  text-shadow: none;
  color: var(--cp-ink);
}
.card-fullart .ca-plate-gold .card-title,
.card-fullart .ca-plate-foil .card-title,
.card-fullart .ca-plate-trending .card-title {
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.card-fullart .ca-plate-gold .card-title { background-image: linear-gradient(115deg, #6f5410, #b8860b 45%, #8a6614); }
.card-fullart .ca-plate-foil .card-title { background-image: linear-gradient(120deg, #c2337a, #2f6fc4 40%, #1f8a5a 70%, #7a3fc4); }
.card-fullart .ca-plate-trending .card-title { background-image: linear-gradient(120deg, #2f5fd8, #6a2ad8 35%, #b01a9a 70%, #d02a3a); }

.card-fullart .ca-corner {
  position: absolute;
  bottom: 0;
  width: var(--cq-r);
  height: var(--cq-r);
  z-index: 2;
  background: var(--cp-cream);
  border: 0 solid var(--cp-ink);
  border-top-width: var(--cp-b);
  pointer-events: auto;
}
.card-fullart .ca-corner-l { left: 0; border-right-width: var(--cp-b); border-top-right-radius: var(--cq-r); }
.card-fullart .ca-corner-r { right: 0; border-left-width: var(--cp-b); border-top-left-radius: var(--cq-r); }
.card-fullart .ca-ico {
  position: absolute;
  bottom: 7px;
  width: 26px;
  height: 26px;
  display: block;
}
.card-fullart .ca-corner-l .ca-ico { left: 7px; }
.card-fullart .ca-corner-r .ca-ico { right: 7px; }
.card-fullart .ca-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.card-fullart .ca-ico .ca-ico-l { clip-path: inset(0 50% 0 0); }
.card-fullart .ca-ico .ca-ico-r { clip-path: inset(0 0 0 50%); }

.card-fullart.card-sealed .ca-corner { display: none; }

.card-fullart .card-back {
  background: #f4f1ea;
  border: none;
  --ca-hint-ink: var(--cp-ink);
}
.card-fullart .card-back .ca-art img { filter: grayscale(1); opacity: 0.1; }
.card-fullart .card-back .ca-art::before,
.card-fullart .card-back .ca-art::after,
.card-fullart .card-back::after { content: none; display: none; }
.card-fullart .card-back .ca-frame,
.card-fullart .card-back .ca-back-panel { display: none; }
.card-fullart .ca-back-content {
  padding: 16px 16px 40px;
  gap: 10px;
  color: var(--cp-ink);
}
.card-fullart .ca-back-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(29, 29, 29, 0.18);
}
.card-fullart .ca-back-meta .card-type {
  font-family: "Lexend Exa", var(--font);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-ink);
}
.card-fullart .ca-back-meta .card-date { font-size: 9px; letter-spacing: 0.08em; color: #5a5a5a; }
.card-fullart .card-back .card-finding { color: #2c2c2c; }
.card-fullart .ca-back-tools {
  margin-top: auto;
  position: relative;
  z-index: 4;
  display: flex;
}
.card-fullart .ca-back-tools .ca-tools {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.card-fullart .card-back .card-back-hint { color: var(--cp-ink); padding-bottom: 14px; }
.card-fullart .card-back .card-back-hint:hover { color: var(--cp-ink); text-decoration: underline; }
.card-fullart .ca-notch { top: -6px; width: 18px; height: 18px; }
.card-fullart .ca-notch .ed-emblem { width: 18px; height: 18px; font-size: 17px; background-size: 100% 100%; }
.card-fullart .ca-notch.relic-ed-gold .ed-emblem { background-image: linear-gradient(115deg, #6f5410, #b8860b 50%, #8a6614); }
.card-fullart .ca-notch.relic-ed-foil .ed-emblem { background-image: linear-gradient(120deg, #c2337a, #2f6fc4 45%, #1f8a5a 75%, #7a3fc4); }
.card-fullart .ca-notch.relic-ed-trending .ed-emblem { -webkit-mask-size: 15px 15px; mask-size: 15px 15px; background-image: linear-gradient(120deg, #2f5fd8, #6a2ad8 40%, #b01a9a 75%, #d02a3a); }
.card-fullart .card-front .ca-frame,
.card-fullart.card-gold .card-front .ca-frame,
.card-fullart.card-foil .card-front .ca-frame,
.card-fullart.card-trending .card-front .ca-frame,
.card-fullart.preview-gold .card-front .ca-frame,
.card-fullart.preview-foil .card-front .ca-frame,
.card-fullart.preview-trending .card-front .ca-frame { display: none; }
.card-fullart { --cp-b: 0px; --cn-r: 24px; }
.card-fullart .ca-plate { top: 28px; }
.card-fullart .ca-plate .cp-o,
.card-fullart .ca-plate .cn-o { display: none; }
.card-fullart .ca-plate .cp-i { --cp-tip: 14px; }
.card-fullart .ca-corner { border-width: 0; }
.card-fullart .ca-ico { border-radius: 50%; overflow: hidden; }
.card-fullart .ca-ico img { object-fit: cover; }
.card-fullart .ca-notch { top: -11px; width: 34px; height: 34px; }
.card-fullart .ca-notch .ed-emblem { width: 34px; height: 34px; font-size: 32px; }
.card-fullart .ca-notch.relic-ed-trending .ed-emblem { -webkit-mask-size: 28px 28px; mask-size: 28px 28px; }
.card-fullart .ca-plate { top: 10px; }
.card-fullart .ca-plate .cn-o,
.card-fullart .ca-plate .cn-i { display: none; }
.card-fullart .ca-notch { top: 100%; transform: translate(-50%, -50%); z-index: 1; }
.card-fullart .ca-notch .ed-emblem { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
.card-fullart { --cq-d: 38px; --cq-gap: 10px; }
.card-fullart .ca-corner {
  width: var(--cq-d);
  height: var(--cq-d);
  bottom: var(--cq-gap);
  border-radius: 50%;
}
.card-fullart .ca-corner-l { left: var(--cq-gap); border-top-right-radius: 50%; }
.card-fullart .ca-corner-r { right: var(--cq-gap); border-top-left-radius: 50%; }
.card-fullart .ca-corner .ca-ico,
.card-fullart .ca-corner-l .ca-ico,
.card-fullart .ca-corner-r .ca-ico { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.card-fullart .ca-plate .cp-o,
.card-fullart .ca-plate .cp-i { clip-path: none; border-radius: 999px; }
.card-fullart .ca-plate .card-title { max-width: calc(100% - 28px); }
.card-fullart { --cq-d: 80px; --cq-gap: -14px; }
.card-fullart { --cq-d: 38px; --cq-gap: 10px; --cq-len: 80px; }
.card-fullart .ca-corner { background: none; overflow: visible; }
.card-fullart .ca-corner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cq-len);
  height: var(--cq-d);
  border-radius: calc(var(--cq-d) / 2);
  background: var(--cp-cream);
  transform-origin: calc(var(--cq-d) / 2) 50%;
}
.card-fullart .ca-corner-l::before { transform: rotate(135deg); }
.card-fullart .ca-corner-r::before { transform: rotate(45deg); }
.card-fullart .ca-plate { left: 0; right: 10px; }
.card-fullart .ca-plate .cp-o,
.card-fullart .ca-plate .cp-i { border-radius: 0 999px 999px 0; }
.card-fullart .ca-plate::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  z-index: 1;
  background: var(--ca-tint, #7a8a99);
}
.card-fullart .ca-plate::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: 64%;
  height: 7px;
  background:
    linear-gradient(var(--cp-ink), var(--cp-ink)) left center / calc(100% - 6px) 1.5px no-repeat,
    radial-gradient(circle, var(--cp-ink) 2.6px, transparent 3.1px) right center / 7px 7px no-repeat;
}
.card-fullart .ca-plate .card-title { max-width: calc(100% - 34px); margin-left: 6px; }

.card-fullart .ca-corner::after {
  content: "";
  position: absolute;
  left: 0;
  top: -12px;
  width: calc(var(--cq-len) + 6px);
  height: 7px;
  background:
    radial-gradient(circle, var(--cp-ink) 2.6px, transparent 3.1px) left center / 7px 7px no-repeat,
    linear-gradient(var(--cp-ink), var(--cp-ink)) right center / calc(100% - 4px) 1.5px no-repeat;
  transform-origin: calc(var(--cq-d) / 2) calc(var(--cq-d) / 2 + 12px);
}
.card-fullart .ca-corner-l::after { transform: rotate(135deg); }
.card-fullart .ca-corner-r::after { transform: rotate(45deg); }
.card-fullart .ca-corner::after { top: -8px; transform-origin: calc(var(--cq-d) / 2) calc(var(--cq-d) / 2 + 8px); }
.card-fullart .ca-plate .card-title { max-width: calc(100% - 24px); margin-left: 5px; }
.card-fullart .ca-plate::after,
.card-fullart .ca-corner::after { content: none; }
.card-fullart .ca-plate::before { width: 12px; }
.card-fullart .ca-plate .card-title { max-width: calc(100% - 30px); margin-left: 9px; }
.card-fullart .ca-corner::before {
  background: linear-gradient(to right, var(--cp-cream) 0 42px, var(--cq-c, #7a8a99) 42px 100%);
}
.card-fullart .ca-plate-gold .card-title,
.card-fullart .ca-plate-foil .card-title,
.card-fullart .ca-plate-trending .card-title { background-image: none; }
.card-fullart .ca-plate-gold .card-title { color: #7a5a0a; -webkit-text-fill-color: #7a5a0a; }
.card-fullart .ca-plate-foil .card-title { color: #2f3f9a; -webkit-text-fill-color: #2f3f9a; }
.card-fullart .ca-plate-trending .card-title { color: #6a1a9a; -webkit-text-fill-color: #6a1a9a; }
.card-fullart .ca-plate::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 23px;
  top: auto;
  bottom: 4px;
  width: auto;
  height: 3px;
  background: var(--cp-ink);
}
.card-fullart .ca-plate .card-title { transform: translateY(-3px); }

.card-fullart .ca-stack {
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 6px 6px 18px;
  background: var(--cp-cream);
  border-radius: 0 19px 19px 0;
  overflow: hidden;
}
.card-fullart .ca-stack .cs-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(var(--cs-a) 0 50%, var(--cs-b) 50% 100%);
}
.card-fullart .ca-stack .cs-line { width: 26px; height: 3px; background: var(--cp-ink); }
.card-fullart .ca-stack .ca-ico { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; flex: none; }
.card-fullart.card-sealed .ca-stack { display: none; }
.card-fullart .ca-plate::before {
  width: 11px;
  left: 20px;
  top: 100%;
  bottom: auto;
  height: 30px;
  background:
    linear-gradient(var(--cp-ink), var(--cp-ink)) center top / 3px 22px no-repeat,
    radial-gradient(circle, var(--ca-tint, #7a8a99) 3.4px, var(--cp-ink) 3.6px 5.4px, transparent 5.6px) center bottom / 11px 11px no-repeat;
}
.card-fullart .ca-plate::after { left: 14px; right: -10px; }
.card-fullart .ca-plate .card-title { max-width: calc(100% - 28px); margin-left: 0; }

.card-fullart .ca-stack { overflow: visible; padding: 6px 7px 6px 10px; }
.card-fullart .ca-stack .cs-bar { display: none; }
.card-fullart .ca-stack .cs-line { position: relative; width: 26px; }
.card-fullart .ca-stack .cs-line::after {
  content: "";
  position: absolute;
  left: 100%;
  top: -4px;
  width: 30px;
  height: 11px;
  background:
    linear-gradient(var(--cp-ink), var(--cp-ink)) left center / 21px 3px no-repeat,
    radial-gradient(circle, var(--cs-b) 3.4px, var(--cp-ink) 3.6px 5.4px, transparent 5.6px) right center / 11px 11px no-repeat;
}
.card-fullart .ca-stack::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 100%;
  width: 11px;
  height: 26px;
  background:
    linear-gradient(var(--cp-ink), var(--cp-ink)) center bottom / 3px 18px no-repeat,
    radial-gradient(circle, transparent 2.6px, var(--cs-a) 2.8px 5.4px, transparent 5.6px) center top / 11px 11px no-repeat;
}
.card-fullart .ca-plate::before,
.card-fullart .ca-stack::before,
.card-fullart .ca-stack .cs-line::after { content: none; }
.card-fullart .ca-plate::after { height: 4px; bottom: 4px; }
.card-fullart .ca-plate .cp-g1,
.card-fullart .ca-plate .cp-g2 {
  position: absolute;
  top: 100%;
  width: 30px;
  height: 15px;
  border-radius: 0 0 15px 15px;
}
.card-fullart .ca-plate .cp-g1 { left: 16px; background: var(--ca-tint, #7a8a99); }
.card-fullart .ca-plate .cp-g2 {
  left: 26px;
  width: 31px;
  height: 15.5px;
  border: 3px solid var(--cp-ink);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-sizing: border-box;
}
.card-fullart .ca-stack .cs-line { height: 4px; }
.card-fullart .ca-stack .cs-g1,
.card-fullart .ca-stack .cs-g2 {
  position: absolute;
  left: 0;
  bottom: 100%;
  box-sizing: border-box;
}
.card-fullart .ca-stack .cs-g1 { width: 26px; height: 26px; background: var(--cs-b); border-top-right-radius: 26px; }
.card-fullart .ca-stack .cs-g2 {
  width: 36px;
  height: 36px;
  border-top: 3px solid var(--cp-ink);
  border-right: 3px solid var(--cp-ink);
  border-top-right-radius: 36px;
}
.card-fullart .ca-plate .cp-g1,
.card-fullart .ca-plate .cp-g2,
.card-fullart .ca-stack .cs-g1,
.card-fullart .ca-stack .cs-g2 { display: none; }
.card-fullart .ca-plate .cp-i {
  background:
    radial-gradient(circle at 12px 50%, transparent 0 18.5px, var(--cp-ink) 19px 22px, transparent 22.5px),
    radial-gradient(circle at 0 50%, var(--ca-tint, #7a8a99) 0 22px, transparent 22.5px),
    linear-gradient(to right, var(--cp-ink) 0 3px, transparent 3px 7px, var(--cp-ink) 7px 10px, transparent 10px 14px, var(--cp-ink) 14px 17px, transparent 17px) right 16px center / 17px 22px no-repeat,
    var(--cp-cream);
}
.card-fullart .ca-plate::after { left: 40px; right: 40px; }
.card-fullart .ca-plate .card-title { max-width: calc(100% - 84px); margin-left: 4px; }
.card-fullart .ca-stack {
  background:
    radial-gradient(circle at 0 0, transparent 0 26px, var(--cp-ink) 26.5px 29.5px, transparent 30px),
    radial-gradient(circle at 0 0, var(--cs-a) 0 22px, transparent 22.5px),
    radial-gradient(circle at 0 100%, var(--cs-b) 0 22px, transparent 22.5px),
    var(--cp-cream);
}
.card-fullart .ca-plate .cp-i {
  background:
    radial-gradient(circle at 8px 50%, transparent 0 13.5px, var(--cp-ink) 14px 17px, transparent 17.5px),
    radial-gradient(circle at 0 50%, var(--ca-tint, #7a8a99) 0 17px, transparent 17.5px),
    linear-gradient(to right, var(--cp-ink) 0 3px, transparent 3px 6px, var(--cp-ink) 6px 9px, transparent 9px) right 14px center / 9px 16px no-repeat,
    var(--cp-cream);
}
.card-fullart .ca-plate::after { left: 30px; right: 30px; }
.card-fullart .ca-plate .card-title { max-width: calc(100% - 58px); margin-left: 4px; }
.card-fullart .ca-plate .cp-i { background: var(--cp-cream); }
.card-fullart .ca-plate::before { content: none; }
.card-fullart .ca-plate::after {
  content: "";
  left: 0;
  right: auto;
  top: calc(100% + 5px);
  bottom: auto;
  width: 64%;
  height: 9px;
  background:
    linear-gradient(var(--cp-ink), var(--cp-ink)) left center / calc(100% - 7px) 3px no-repeat,
    radial-gradient(circle, var(--cp-ink) 4px, transparent 4.6px) right center / 9px 9px no-repeat;
}
.card-fullart .ca-plate .card-title { max-width: calc(100% - 28px); margin-left: 0; transform: none; }
.card-fullart .ca-stack { background: var(--cp-cream); }
.card-fullart .ca-stack .cs-line { height: 3px; }
.card-fullart .ca-stack .cs-line::after {
  content: "";
  position: absolute;
  left: 100%;
  top: -3px;
  width: 30px;
  height: 9px;
  background:
    linear-gradient(var(--cp-ink), var(--cp-ink)) left center / 23px 3px no-repeat,
    radial-gradient(circle, var(--cp-ink) 4px, transparent 4.6px) right center / 9px 9px no-repeat;
}
.card-fullart { --cp-cream: #ffffff; }
.card-fullart { --cl: var(--cp-ink); }
.card-fullart.card-gold, .card-fullart.preview-gold { --cl: #b8860b; }
.card-fullart.card-foil, .card-fullart.preview-foil { --cl: #2f3f9a; }
.card-fullart.card-trending, .card-fullart.preview-trending { --cl: #6a1a9a; }
.card-fullart .ca-plate::after {
  background:
    linear-gradient(var(--cl), var(--cl)) left center / calc(100% - 7px) 3px no-repeat,
    radial-gradient(circle, var(--cl) 4px, transparent 4.6px) right center / 9px 9px no-repeat;
}
.card-fullart .ca-stack .cs-line { background: var(--cl); }
.card-fullart .ca-stack .cs-line::after {
  background:
    linear-gradient(var(--cl), var(--cl)) left center / 23px 3px no-repeat,
    radial-gradient(circle, var(--cl) 4px, transparent 4.6px) right center / 9px 9px no-repeat;
}
.card-fullart .ca-stack .cs-line { display: none; }
.card-fullart .ca-stack {
  gap: 8px;
  padding: 6px 7px 6px 22px;
  background:
    linear-gradient(var(--cl), var(--cl)) left 0 top 17.5px / 22px 3px no-repeat,
    linear-gradient(var(--cl), var(--cl)) left 0 bottom 17.5px / 22px 3px no-repeat,
    var(--cp-cream);
}
.card-fullart .ca-plate::after { top: calc(100% - 4.5px); }
.card-fullart .ca-stack {
  gap: 10px;
  padding: 7px 7px 7px 12px;
  background:
    linear-gradient(var(--cl), var(--cl)) left 0 top 18.5px / 16px 3px no-repeat,
    linear-gradient(var(--cl), var(--cl)) left 0 bottom 18.5px / 16px 3px no-repeat,
    var(--cp-cream);
}
.card-fullart .ca-stack .ca-ico { box-shadow: 0 0 0 3px var(--cl); overflow: hidden; }
.card-fullart .ca-stack .ca-ico { box-shadow: none; }
.card-fullart .ca-back-tags { display: grid; gap: 3px; }
.card-fullart .ca-back-tags .cbt-row { display: flex; gap: 8px; align-items: baseline; line-height: 1.3; }
.card-fullart .ca-back-tags .cbt-k {
  flex: none;
  width: 44px;
  font-family: "Lexend Exa", var(--font);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a6a6a;
}
.card-fullart .ca-back-tags .cbt-v { font-size: 11px; font-weight: 600; color: var(--cp-ink); }
.card-fullart .card-back .card-finding { -webkit-line-clamp: 5; line-clamp: 5; }
.card-fullart.card-gold .card-front, .card-fullart.card-gold .card-back,
.card-fullart.card-foil .card-front, .card-fullart.card-foil .card-back,
.card-fullart.card-trending .card-front, .card-fullart.card-trending .card-back,
.card-fullart.preview-gold .card-front, .card-fullart.preview-foil .card-front, .card-fullart.preview-trending .card-front {
  outline: 3px solid var(--cl);
  outline-offset: -3px;
}
.card-fullart.card-gold .card-front, .card-fullart.card-gold .card-back,
.card-fullart.card-foil .card-front, .card-fullart.card-foil .card-back,
.card-fullart.card-trending .card-front, .card-fullart.card-trending .card-back,
.card-fullart.preview-gold .card-front, .card-fullart.preview-foil .card-front, .card-fullart.preview-trending .card-front { outline: none; }
.card.card-fullart.card-gold .card-front::after, .card.card-fullart.card-gold .card-back::after,
.card.card-fullart.card-foil .card-front::after, .card.card-fullart.card-foil .card-back::after,
.card.card-fullart.card-trending .card-front::after, .card.card-fullart.card-trending .card-back::after,
.card-fullart.preview-gold .card-front::after, .card-fullart.preview-foil .card-front::after, .card-fullart.preview-trending .card-front::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 6;
  border: 3px solid var(--cl);
  border-radius: inherit;
  background: none;
  opacity: 1;
  mix-blend-mode: normal;
  pointer-events: none;
}
.card.card-fullart.card-gold .card-front::after, .card.card-fullart.card-gold .card-back::after,
.card.card-fullart.card-foil .card-front::after, .card.card-fullart.card-foil .card-back::after,
.card.card-fullart.card-trending .card-front::after, .card.card-fullart.card-trending .card-back::after,
.card-fullart.preview-gold .card-front::after, .card-fullart.preview-foil .card-front::after, .card-fullart.preview-trending .card-front::after {
  -webkit-mask: none;
  mask: none;
  clip-path: none;
  transform: none;
  filter: none;
  animation: none;
  width: auto;
  height: auto;
}
.card-fullart .ca-plate { place-items: center start; }
.card-fullart .ca-plate .card-title {
  text-align: left;
  justify-self: start;
  margin-left: 14px;
  max-width: calc(100% - 38px);
}
.card-fullart .ca-plate::after { width: calc((100% + 10px) * 0.7); }
.card-fullart .ca-plate-gold::after,
.card-fullart .ca-plate-foil::after,
.card-fullart .ca-plate-trending::after {
  background: linear-gradient(var(--cl), var(--cl)) left center / calc(100% - 8px) 3px no-repeat;
}
.card-fullart .ca-seal {
  position: absolute;
  left: calc((100% + 10px) * 0.7 - 11px);
  top: 100%;
  width: 22px;
  height: 22px;
  z-index: 3;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.card-fullart .ca-seal .ed-emblem {
  width: 22px;
  height: 22px;
  font-size: 21px;
  line-height: 1;
  display: grid;
  place-items: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}
.card-fullart .ca-seal.relic-ed-gold .ed-emblem { background-image: linear-gradient(115deg, #8f6810, #e6c04a 45%, #b8860b); }
.card-fullart .ca-seal.relic-ed-foil .ed-emblem { background-image: linear-gradient(120deg, #c2337a, #2f6fc4 45%, #1f8a5a 75%, #7a3fc4); }
.card-fullart .ca-seal.relic-ed-trending .ed-emblem {
  -webkit-mask-size: 19px 19px;
  mask-size: 19px 19px;
  background-image: linear-gradient(120deg, #2f5fd8, #6a2ad8 40%, #b01a9a 75%, #d02a3a);
}
.card-fullart { --clg: linear-gradient(var(--cl), var(--cl)); }
.card-fullart.card-foil, .card-fullart.preview-foil {
  --clg: linear-gradient(90deg, #ff6fb5, #6fb8ff 28%, #5fd89a 52%, #f2c94c 76%, #b98cff);
}
.card-fullart .ca-plate-foil::after {
  background: var(--clg) left center / calc(100% - 8px) 3px no-repeat;
}
.card-fullart .ca-stack {
  background:
    var(--clg) left 0 top 18.5px / 16px 3px no-repeat,
    var(--clg) left 0 bottom 18.5px / 16px 3px no-repeat,
    var(--cp-cream);
}
.card-fullart .ca-plate-foil .card-title {
  background-image: linear-gradient(100deg, #c2337a, #3a6fd0 35%, #1f8a5a 65%, #8a4fd0);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.card.card-fullart.card-foil .card-front::after, .card.card-fullart.card-foil .card-back::after,
.card-fullart.preview-foil .card-front::after {
  border: none;
  padding: 3px;
  box-sizing: border-box;
  background: var(--clg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.card-fullart .ca-plate::after { width: calc((100% + 10px) * 0.85); }
.card-fullart .ca-seal {
  left: calc((100% + 10px) * 0.85 - 18px);
  width: 36px;
  height: 36px;
}
.card-fullart .ca-seal .ed-emblem { width: 36px; height: 36px; font-size: 35px; }
.card-fullart .ca-seal.relic-ed-trending .ed-emblem { -webkit-mask-size: 30px 30px; mask-size: 30px 30px; }
.card-fullart .ca-seal {
  left: calc((100% + 10px) * 0.85 - 14.5px);
  width: 29px;
  height: 29px;
}
.card-fullart .ca-seal .ed-emblem { width: 29px; height: 29px; font-size: 28px; }
.card-fullart .ca-seal.relic-ed-trending .ed-emblem { -webkit-mask-size: 24px 24px; mask-size: 24px 24px; }
.card-fullart .ca-seal.relic-ed-foil .ed-emblem {
  background-image: linear-gradient(135deg, #ff6fb5 20%, #6fb8ff 40%, #5fd89a 55%, #f2c94c 70%, #b98cff 85%);
  background-size: 100% 100%;
}
.card-fullart .ca-seal.relic-ed-gold { transform: translateY(calc(-50% - 1.2px)); }
.card-fullart .ca-seal.relic-ed-foil { transform: translateY(calc(-50% - 0.75px)); }
.card-fullart .ca-seal.relic-ed-trending { transform: translateY(calc(-50% - 2px)); }
.card-fullart.card-gold, .card-fullart.preview-gold { --cl: #e8b21c; }
.card-fullart.card-trending, .card-fullart.preview-trending { --cl: #a347f0; }
.card-fullart.card-trending, .card-fullart.preview-trending {
  --clg: linear-gradient(90deg, #ff6fb5, #6fb8ff 28%, #5fd89a 52%, #f2c94c 76%, #b98cff);
  --cl: #b98cff;
}
.card-fullart.card-foil, .card-fullart.preview-foil {
  --clg: linear-gradient(90deg, #8e96a3, #eef1f5 30%, #a7afba 55%, #f7f8fa 78%, #8e96a3);
  --cl: #9aa3ae;
}
.card-fullart .ca-plate-trending::after {
  background: var(--clg) left center / calc(100% - 8px) 3px no-repeat;
}
.card-fullart .ca-plate-trending .card-title {
  background-image: linear-gradient(100deg, #c2337a, #3a6fd0 35%, #1f8a5a 65%, #8a4fd0);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.card-fullart .ca-plate-foil .card-title {
  background-image: none;
  color: #4a5260; -webkit-text-fill-color: #4a5260;
}
.card.card-fullart.card-trending .card-front::after, .card.card-fullart.card-trending .card-back::after,
.card-fullart.preview-trending .card-front::after {
  border: none;
  padding: 3px;
  box-sizing: border-box;
  background: var(--clg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.card-fullart .ca-seal.relic-ed-trending .ed-emblem {
  background-image: linear-gradient(135deg, #ff6fb5 20%, #6fb8ff 40%, #5fd89a 55%, #f2c94c 70%, #b98cff 85%);
  background-size: 100% 100%;
}
.card-fullart .ca-seal.relic-ed-foil .ed-emblem {
  background-image: linear-gradient(135deg, #7d8592 15%, #eef1f5 40%, #a7afba 60%, #ffffff 75%, #8e96a3 90%);
}
.card-fullart .ca-seal {
  left: calc((100% + 10px) * 0.85 - 19px);
  width: 38px;
  height: 38px;
}
.card-fullart .ca-seal .ed-emblem { width: 38px; height: 38px; font-size: 36px; }
.card-fullart .ca-seal.relic-ed-trending .ed-emblem { -webkit-mask-size: 31px 31px; mask-size: 31px 31px; }
.card-fullart .ca-seal.relic-ed-gold { transform: translateY(calc(-50% - 1.6px)); }
.card-fullart .ca-seal.relic-ed-foil { transform: translateY(calc(-50% - 1px)); }
.card-fullart .ca-seal.relic-ed-trending { transform: translateY(calc(-50% - 2.6px)); }
.card-fullart .ca-seal {
  left: calc((100% + 10px) * 0.85 - 16.5px);
  width: 33px;
  height: 33px;
}
.card-fullart .ca-seal .ed-emblem { width: 33px; height: 33px; font-size: 32px; }
.card-fullart .ca-seal.relic-ed-trending .ed-emblem { -webkit-mask-size: 27px 27px; mask-size: 27px 27px; }
.card-fullart .ca-seal.relic-ed-gold { transform: translateY(calc(-50% - 1.4px)); }
.card-fullart .ca-seal.relic-ed-foil { transform: translateY(calc(-50% - 0.85px)); }
.card-fullart .ca-seal.relic-ed-trending { transform: translateY(calc(-50% - 2.3px)); }
.card-fullart .ca-seal.relic-ed-gold,
.card-fullart .ca-seal.relic-ed-foil {
  left: calc((100% + 10px) * 0.85 - 18px);
  width: 36px;
  height: 36px;
}
.card-fullart .ca-seal.relic-ed-gold .ed-emblem,
.card-fullart .ca-seal.relic-ed-foil .ed-emblem { width: 36px; height: 36px; font-size: 35px; }
.card-fullart .ca-seal.relic-ed-gold { transform: translateY(calc(-50% - 1.5px)); }
.card-fullart .ca-seal.relic-ed-foil { transform: translateY(calc(-50% - 0.95px)); }
.card-fullart .ca-back-content { padding-bottom: 54px; }
.card-fullart .ca-back-tools { flex-direction: column; align-items: flex-start; gap: 5px; }
.card-fullart .ca-back-tools .cbt-k { width: auto; }
.card-fullart .ca-back-tools .cbt-k {
  font-family: "Lexend Exa", var(--font);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a6a6a;
  line-height: 1.3;
}
.card-fullart .card-back .card-finding { -webkit-line-clamp: 4; line-clamp: 4; }
.card-fullart .card-back .card-back-hint { padding-bottom: 12px; }
.card-fullart .ca-tap { display: inline-grid; place-items: center; color: var(--cp-ink); }
.card-fullart .ca-tap svg { display: block; overflow: visible; }
.card-fullart .ca-tap-hand { transform-box: fill-box; transform-origin: 50% 0%; animation: ca-tap-hand 1.6s ease-in-out infinite; }
.card-fullart .ca-tap .tm { opacity: 0; transform-box: fill-box; animation: ca-tap-mark 1.6s ease-out infinite; }
.card-fullart .ca-tap .tm-l { --tx: -2.5px; --ty: -2px; }
.card-fullart .ca-tap .tm-c { --tx: 0px; --ty: -3px; }
.card-fullart .ca-tap .tm-r { --tx: 2.5px; --ty: -2px; }
@keyframes ca-tap-hand {
  0%, 20% { transform: translateY(0) scale(1); }
  38%, 48% { transform: translateY(-2.5px) scale(0.9); }
  70%, 100% { transform: translateY(0) scale(1); }
}
@keyframes ca-tap-mark {
  0%, 37% { opacity: 0; transform: translate(0, 0); }
  42% { opacity: 1; transform: translate(0, 0); }
  62% { opacity: 0; transform: translate(var(--tx), var(--ty)); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)); }
}
@media (prefers-reduced-motion: reduce) {
  .card-fullart .ca-tap-hand, .card-fullart .ca-tap .tm { animation: none; }
  .card-fullart .ca-tap .tm { opacity: 1; }
}
.card-fullart .ca-tap { color: #8f8f8f; }
.card-fullart .ca-tap svg { width: 39px; height: 39px; transform: rotate(-22deg); }
.card-fullart .card-back .card-back-hint { justify-content: flex-end; padding: 0 12px 10px 0; }
.card-fullart.card-foil, .card-fullart.preview-foil {
  --clg: linear-gradient(90deg, #b4bcc8, #ffffff 25%, #d3d9e1 45%, #ffffff 65%, #c3cad4 85%, #e9edf2);
  --cl: #c8cfd8;
}
.card-fullart .ca-plate-foil .card-title { color: #59616e; -webkit-text-fill-color: #59616e; }
.card-fullart .ca-seal.relic-ed-foil .ed-emblem {
  background-image: linear-gradient(135deg, #a9b1bd 10%, #ffffff 35%, #cfd5dd 55%, #ffffff 72%, #b4bcc8 90%);
}
.card-fullart .ca-front-tap {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.card-fullart .ca-front-tap .ca-tap svg { width: 28px; height: 28px; }
.card-fullart.card-sealed .ca-front-tap { display: none; }
.card-fullart.card-gold, .card-fullart.preview-gold {
  --clg: linear-gradient(90deg, #c8901a, #ffe9a3 25%, #e8b21c 45%, #fff4cc 65%, #d9a12a 85%, #f5c84a);
  --cl: #e8b21c;
}
.card-fullart .ca-plate-gold::after {
  background: var(--clg) left center / calc(100% - 8px) 3px no-repeat;
}
.card.card-fullart.card-gold .card-front::after, .card.card-fullart.card-gold .card-back::after,
.card-fullart.preview-gold .card-front::after {
  border: none;
  padding: 3px;
  box-sizing: border-box;
  background: var(--clg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.card-fullart .ca-seal.relic-ed-gold .ed-emblem {
  background-image: linear-gradient(135deg, #c8901a 10%, #fff4cc 35%, #e8b21c 55%, #ffe9a3 72%, #d9a12a 90%);
  background-size: 100% 100%;
}
.card-fullart .ca-front-tap { background: none; width: auto; height: auto; right: 8px; bottom: 6px; }
.card-fullart .ca-front-tap .ca-tap svg { width: 34px; height: 34px; }
.card-fullart .ca-front-tap .ca-tap {
  color: rgba(255, 255, 255, 0.7);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.5));
}
.card-fullart .ca-front-tap .ca-tap {
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 3.5px rgba(255, 255, 255, 0.25));
}
.card-fullart .ca-front-tap .ca-tap { color: #ffffff; opacity: 0.7; }
.personal-photo,
.pcat-art { border-radius: 50%; corner-shape: round; }
@media (max-width: 560px) {
  .pcat-art { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; background-image: none; }
}
.card-fullart.card-sealed .ca-lock img {
  width: 379%;
  filter: grayscale(1) drop-shadow(0 6px 11px rgba(0, 0, 0, 0.48)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.32));
}
.deck-pack .pk-glit,
.deck-pack .pk-bulge,
.deck-pack .pk-edge,
.deck-pack .pk-seal { display: none; }

.deck-pack .deck-body .deck-name,
.deck-pack .deck-body .deck-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.deck-pack .pk-label {
  position: absolute;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  z-index: 3;
  display: block;
  pointer-events: none;
}
.deck-pack .pk-pill {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  max-width: 200px;
}
.deck-pack .pk-title {
  font-family: var(--font);
  font-weight: 800;
  font-size: var(--pk-fs, 20px);
  line-height: 1;
  color: var(--pk-c);
  white-space: nowrap;
}
.deck-pack .pk-burst {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: #ffffff;
  clip-path: polygon(50.00% 0.00%, 60.09% 12.33%, 75.00% 6.70%, 77.58% 22.42%, 93.30% 25.00%, 87.67% 39.91%, 100.00% 50.00%, 87.67% 60.09%, 93.30% 75.00%, 77.58% 77.58%, 75.00% 93.30%, 60.09% 87.67%, 50.00% 100.00%, 39.91% 87.67%, 25.00% 93.30%, 22.42% 77.58%, 6.70% 75.00%, 12.33% 60.09%, 0.00% 50.00%, 12.33% 39.91%, 6.70% 25.00%, 22.42% 22.42%, 25.00% 6.70%, 39.91% 12.33%);
}
.deck-pack .pk-burst::before {
  content: "";
  position: absolute;
  inset: 2.5px;
  background: var(--pk-c);
  clip-path: polygon(50.00% 0.00%, 60.09% 12.33%, 75.00% 6.70%, 77.58% 22.42%, 93.30% 25.00%, 87.67% 39.91%, 100.00% 50.00%, 87.67% 60.09%, 93.30% 75.00%, 77.58% 77.58%, 75.00% 93.30%, 60.09% 87.67%, 50.00% 100.00%, 39.91% 87.67%, 25.00% 93.30%, 22.42% 77.58%, 6.70% 75.00%, 12.33% 60.09%, 0.00% 50.00%, 12.33% 39.91%, 6.70% 25.00%, 22.42% 22.42%, 25.00% 6.70%, 39.91% 12.33%);
}
.deck-pack .pk-num {
  position: relative;
  font-family: var(--font);
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  color: #ffffff;
}
.deck-pack .pk-pill { height: 46px; padding-bottom: 12px; box-sizing: border-box; }
.deck-pack .pk-burst { top: calc(100% - 12px); transform: translate(-50%, 0); }
.deck-pack .pk-label { bottom: 72px; }
.deck-pack .pk-pill { width: 200px; max-width: none; height: 52px; padding: 0 0 22px; }
.deck-pack .pk-burst { top: 100%; transform: translate(-50%, -50%); }
.deck-pack .pk-pill { height: 48px; padding: 0; }
.deck-pack .pk-burst { width: 34px; height: 34px; }
.deck-pack .pk-burst::before { inset: 2px; }
.deck-pack .pk-num { font-size: 13px; }
.deck-pack .pk-label { bottom: 40px; }
.deck-pack .pk-bulge {
  display: block;
  background: linear-gradient(to right, rgba(0,0,0,0.14) 0%, rgba(255,255,255,0.20) 20%, rgba(255,255,255,0.07) 38%,
                rgba(0,0,0,0.05) 62%, rgba(0,0,0,0.19) 88%, rgba(0,0,0,0.27) 100%);
}
.deck-pack .pk-label { bottom: 30px; --pk-fs: 15px !important; }
.deck-pack .pk-pill { height: 46px; }
.deck-pack .pk-burst { width: 42px; height: 42px; }
.deck-pack .pk-burst::before { inset: 2.5px; }
.deck-pack .pk-num { font-size: 16px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.deck-pack .deck-face::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 66px;
  height: 10px;
  background: rgba(0, 0, 0, 0.14);
  z-index: 2;
  pointer-events: none;
}
.deck-pack .pk-strip::after {
  content: "";
  position: absolute;
  left: 0;
  width: var(--pk-w);
  top: 34px;
  height: 32px;
  background: rgba(0, 0, 0, 0.14);
  pointer-events: none;
}
.deck-pack .deck-face::after { display: none; }
.deck-pack .pk-strip::after { top: 58px; height: 8px; background: rgba(0, 0, 0, 0.16); }
.deck-pack .pk-pill { height: 58px; }
.deck-pack .pk-title { line-height: 1.05; text-align: center; white-space: normal; }
.deck-pack .pk-title.pk-two { transform: translateY(-9px); line-height: 1.02; }
.deck-pack .pk-label { left: 0; right: 0; transform: none; bottom: 34px; }
.deck-pack .pk-pill { height: 44px; margin: 0 auto; }
.deck-pack .pk-title.pk-two { transform: none; }
.deck-pack .pk-burst { left: auto; right: 10px; top: auto; bottom: -24px; transform: none; }
.deck-pack .pk-strip::after { display: none; }
.deck-pack .pk-cut {
  position: absolute;
  left: calc(var(--pk-inset) + 8px);
  right: calc(var(--pk-inset) + 8px);
  top: 68px;
  height: 20px;
  transform: translateY(-50%);
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.deck-pack .pk-cut-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}
.deck-pack .pk-scissor {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  color: #ffffff;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
  animation: pk-cut-move 2.6s ease-in-out infinite;
}
.deck-pack .pk-scissor svg { display: block; }
.deck-pack .pk-blade { transform-box: view-box; transform-origin: 6px 12px; }
.deck-pack .pk-blade-a { animation: pk-blade-a 0.32s ease-in-out infinite alternate; }
.deck-pack .pk-blade-b { animation: pk-blade-b 0.32s ease-in-out infinite alternate; }
@keyframes pk-cut-move {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  82% { opacity: 1; }
  92%, 100% { left: calc(100% - 20px); opacity: 0; }
}
@keyframes pk-blade-a { from { transform: rotate(-10deg); } to { transform: rotate(6deg); } }
@keyframes pk-blade-b { from { transform: rotate(10deg); } to { transform: rotate(-6deg); } }
.deck-pack.hovered .pk-cut, .deck-pack.deck-sealed .pk-cut { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .deck-pack .pk-scissor, .deck-pack .pk-blade { animation: none; }
}
.deck-pack .pk-cut { height: 28px; }
.deck-pack .pk-scissor { width: 28px; height: 28px; }
.deck-pack .pk-scissor svg { width: 28px; height: 28px; }
@keyframes pk-cut-move {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  82% { opacity: 1; }
  92%, 100% { left: calc(100% - 28px); opacity: 0; }
}
.deck-pack .pk-scissor {
  top: -13px;
  color: #ffffff;
  opacity: 0.7;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 3.5px rgba(255, 255, 255, 0.25));
}
@keyframes pk-cut-move {
  0% { left: 0; opacity: 0; }
  8% { opacity: 0.7; }
  82% { opacity: 0.7; }
  92%, 100% { left: calc(100% - 28px); opacity: 0; }
}
.deck-pack .pk-cut { z-index: 30; }
.deck-pack .pk-scissor { top: 0; }
.deck-pack .pk-scissor svg { clip-path: inset(0 0 50% 0); }
.deck-pack .pk-cut { top: 54px; }
.deck-pack .pk-cut-line {
  border-top-color: rgba(255, 255, 255, 0.55);
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.4));
  animation: pk-line-draw 3.6s linear infinite;
}
.deck-pack .pk-scissor { animation: pk-cut-move 3.6s ease-in-out infinite; }
@keyframes pk-line-draw {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  28% { clip-path: inset(0 0 0 0); opacity: 1; }
  92% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes pk-cut-move {
  0%, 30% { left: 0; opacity: 0; }
  36% { left: 0; opacity: 0.7; }
  84% { opacity: 0.7; }
  92%, 100% { left: calc(100% - 28px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-pack .pk-cut-line { animation: none; clip-path: none; }
}
.deck-pack .pk-cut-line { animation: pk-line-draw 2.8s linear infinite; }
.deck-pack .pk-scissor { animation: pk-cut-move 2.8s ease-in-out infinite; }
@keyframes pk-line-draw {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  32% { clip-path: inset(0 0 0 0); opacity: 1; }
  90% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes pk-cut-move {
  0%, 9% { left: 0; opacity: 0; }
  14% { left: 0; opacity: 0.7; }
  82% { opacity: 0.7; }
  90%, 100% { left: calc(100% - 28px); opacity: 0; }
}
@keyframes pk-cut-move {
  0%, 6.4% { left: 0; opacity: 0; }
  11% { left: 0; opacity: 0.7; }
  82% { opacity: 0.7; }
  90%, 100% { left: calc(100% - 28px); opacity: 0; }
}
@keyframes pk-cut-move {
  0%, 6.4% { left: 0; opacity: 0; }
  20% { opacity: 0.7; }
  80% { opacity: 0.7; }
  92%, 100% { left: calc(100% - 28px); opacity: 0; }
}
.deck-pack .pk-cut { display: none; }
.deck-pack.is-center .pk-cut, .deck-pack.pk-front .pk-cut { display: block; }
.deck-pack .pk-cut-line { animation: pk-line-draw 4.8s linear infinite; }
.deck-pack .pk-scissor { animation: pk-cut-move 4.8s ease-in-out infinite; }
@keyframes pk-line-draw {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  18.7% { clip-path: inset(0 0 0 0); opacity: 1; }
  52.5% { clip-path: inset(0 0 0 0); opacity: 1; }
  58.3%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes pk-cut-move {
  0%, 3.7% { left: 0; opacity: 0; }
  11.7% { opacity: 0.7; }
  46.7% { opacity: 0.7; }
  53.7%, 100% { left: calc(100% - 28px); opacity: 0; }
}
.ring-cut { position: absolute; inset: 0; pointer-events: none; z-index: 3; display: none; --pk-inset: 0px; }
.ring-cut .pk-cut { display: block; position: absolute; }
.card-fullart.card-sealed .ca-lock img { width: 265%; }
.personal-photo { background: #3d4046; }
@media (min-width: 901px) {
  .about-split.about-intro {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 0;
    align-items: start;
  }
  .about-intro .about-split-copy { grid-column: 1; grid-row: 1 / span 2; align-self: center; text-align: left; }
  .about-intro .radar-panel:has(svg[data-radar="field"]) { grid-column: 2; grid-row: 1; }
  .about-intro .radar-panel:has(svg[data-radar="method"]) { grid-column: 3; grid-row: 2; margin-top: -150px; }
}
@media (min-width: 901px) {
  .about-intro .radar-panel:has(svg[data-radar="method"]) { margin: -170px 48px 0 -48px; }
  .about-intro .radar-panel:has(svg[data-radar="field"]) { margin-left: 10px; }
}
.card-fullart .ca-tap-hand { animation: ca-tap-hand 3.6s ease-in-out infinite; }
.card-fullart .ca-tap .tm { animation: ca-tap-mark 3.6s ease-out infinite; }
@keyframes ca-tap-hand {
  0%, 8.9% { transform: translateY(0) scale(1); }
  16.9%, 21.3% { transform: translateY(-2.5px) scale(0.9); }
  31.1%, 100% { transform: translateY(0) scale(1); }
}
@keyframes ca-tap-mark {
  0%, 16.4% { opacity: 0; transform: translate(0, 0); }
  18.7% { opacity: 1; transform: translate(0, 0); }
  27.6%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); }
}
.about-intro .about-split-copy .section-h { margin: 0 0 18px; }
.about-intro .about-lede strong { display: block; margin-bottom: 6px; }
@media (min-width: 901px) {
  .about-split.about-intro {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0;
    max-width: 1180px;
  }
  .about-intro .about-split-copy { padding-right: 36px; }
  .about-intro .about-split-copy .section-h { text-align: left; font-size: 34px; margin-bottom: 22px; }
  .about-intro .about-split-copy p.about-lede { font-size: 19px; line-height: 1.55; margin-bottom: 14px; }
  .about-intro .about-lede strong { font-size: 23px; line-height: 1.3; margin-bottom: 10px; }
  .about-intro .about-split-copy p:not(.about-lede) { font-size: 16px; }
  .about-intro .radar-panel:has(svg[data-radar="field"]) { margin-left: 0; }
  .about-intro .radar-panel:has(svg[data-radar="method"]) { margin: -215px 0 0 -36px; }
}
.about-intro .about-split-copy .section-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.about-intro .about-lede strong { font-size: clamp(24px, 2.7vw, 34px); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 18px; }
@media (min-width: 901px) {
  .about-split.about-intro {
    --rs: clamp(260px, 27vw, 340px);
    grid-template-columns: minmax(0, 1fr) var(--rs) var(--rs);
    max-width: 1120px;
  }
  .about-intro .about-split-copy { padding-right: 48px; max-width: 520px; }
  .about-intro .about-split-copy .section-h { font-size: 12px; margin-bottom: 14px; }
  .about-intro .about-lede strong { font-size: clamp(26px, 2.7vw, 34px); line-height: 1.15; margin-bottom: 18px; }
  .about-intro .about-split-copy p.about-lede { font-size: 18px; line-height: 1.55; margin-bottom: 12px; }
  .about-intro .about-split-copy p:not(.about-lede) { font-size: 15px; margin-bottom: 0; }
  .about-intro .radar-panel:has(svg[data-radar="field"]) { margin-left: 0; }
  .about-intro .radar-panel:has(svg[data-radar="method"]) { margin: calc(var(--rs) * -0.74) 0 0 calc(var(--rs) * -0.14); }
}
:root { --content-w: 1120px; }
.about-split.about-intro { max-width: var(--content-w); }
.about-personal { max-width: var(--content-w); }
.traj-block { --gutter: max(0px, calc((100% - var(--content-w)) / 2)); }
@media (max-width: 1150px) {
  .traj-block { --gutter: max(32px, calc((100% - var(--content-w)) / 2)); }
}
.identity { max-width: var(--content-w); margin-inline: auto; }
.about-intro .radar-panel .radar-head {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.about-intro .radar-panel .radar-title {
  margin: 0;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.6);
}
@media (min-width: 901px) {
  .about-intro .radar-panel:has(svg[data-radar="method"]) { margin: calc(var(--rs) * -0.66) 0 0 calc(var(--rs) * -0.14); }
}
.about-intro .radar-panel .radar-head { top: 51.9%; }
.card-fullart .ca-tap svg { animation: ca-tap-show 3.6s ease-in-out infinite; }
@keyframes ca-tap-show {
  0% { opacity: 0; }
  6%, 34% { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card-fullart .ca-tap svg { animation: none; opacity: 1; }
}
.card-fullart .ca-front-tap { display: none; }
.grid-results > .card:first-child .ca-front-tap,
.deckpage-cards .card-row:first-child > .card:first-child .ca-front-tap,
.cluster .card-gold .ca-front-tap,
.ap .ca-front-tap { display: block; }
.slot-recent .card .ca-front-tap { display: block; }
.personal-photo { background: #d9dcdf; }
@media (max-height: 860px) {
  .deckpage-cards .card { flex-basis: 208px; }
  .deckpage-cards .card-inner, .deckpage-cards .card-face { height: 278px; min-height: 278px; }
  .deckpage-cards .card-fullart { --ca-top: 7px; --ca-bot: 30px; --ca-cap: 52px; }
}
.wordmark .wm-full, .wordmark .wm-mid { display: none !important; }
.wordmark .wm-min { display: inline !important; }
@media (max-width: 1300px) { .wordmark-role { display: none; } }
.cover { display: none; }
.identity { position: relative; isolation: isolate; }
.hero-liq { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 3; display: block; pointer-events: none; mix-blend-mode: difference; }
.identity { animation: none; isolation: auto; }
.identity .cluster { position: relative; z-index: 4; }
.shelf.carousel { z-index: 4; }
.identity .cluster { z-index: 4; }
.identity { min-height: min(760px, calc(100svh - var(--nav-h, 56px) - 96px)); padding-top: 0; }
.identity .hero-kicker { font-size: 14px; font-weight: 500; letter-spacing: 0.14em; color: var(--text); opacity: 0.82; }
.identity .hero-claim { font-size: clamp(32px, 3.6vw, 50px); max-width: none; }
@media (min-width: 641px) {
  .cluster { width: 568px; }
  .slot-pinned { left: 180px; }
  .slot-wip { left: 360px; }
}
@media (min-width: 1151px) {
  .identity { gap: 36px; }
  .identity .hero-me { flex: 1 1 auto; max-width: none; }
  .identity .hero-claim .hc-line { display: block; white-space: nowrap; }
}
@media (max-width: 1150px) { .identity { min-height: 0; padding-top: 40px; } }
@media (max-width: 560px) { .identity { padding-top: 24px; } }
.wordmark-role { font-family: var(--font); font-weight: 400; text-transform: none; letter-spacing: 0.01em; font-size: 13px; }
.edge-deco { position: absolute; pointer-events: none; z-index: 0; }
.edge-deco svg { display: block; width: 100%; height: 100%; overflow: visible; }
.edge-deco svg { opacity: 0.30; }
.edge-deco { --ed-cream: color-mix(in srgb, var(--text) 43%, var(--bg)); }
:root[data-theme="light"] .edge-deco { --ed-cream: color-mix(in srgb, var(--text) 40%, var(--bg)); }
.edge-deco .ed-line { fill: none; stroke: var(--text); stroke-opacity: 0.24; stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.edge-deco .ed-ring { fill: none; stroke: var(--ed-cream); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.edge-deco .ed-cream { fill: var(--ed-cream); }
.edge-deco .ed-coral { fill: color-mix(in srgb, var(--text) 17%, var(--bg)); }
.edge-deco .ed-mustard { fill: color-mix(in srgb, var(--text) 11%, var(--bg)); }
.edge-deco .ed-teal { fill: color-mix(in srgb, var(--text) 26%, var(--bg)); }
.traj-deco-top { top: -370px; left: calc(50% - var(--vw, 100vw) / 2); width: clamp(180px, 18vw, 320px); aspect-ratio: 260 / 520; }
.traj-deco-bot { bottom: -340px; right: calc(50% - var(--vw, 100vw) / 2); width: clamp(200px, 20vw, 350px); aspect-ratio: 300 / 480; transform: scaleX(-1); }
.mapcol { position: relative; }
.shelf-section { position: relative; }
.fun-deco { top: -230px; height: calc(100% + 250px); width: min(22vw, 330px); }
.fun-deco-l { left: calc(50% - var(--vw, 100vw) / 2); }
.fun-deco-r { right: calc(50% - var(--vw, 100vw) / 2); transform: scaleX(-1); }
@media (max-width: 900px) { .fun-deco { width: min(16vw, 150px); } }
@media (max-width: 640px) { .edge-deco { display: none; } }
.close-liq { position: absolute; top: 0; left: calc(50% - var(--vw, 100%) / 2); width: var(--vw, 100%); height: 100%; z-index: -1; display: block; pointer-events: none; }
.close-liq { z-index: 0; }
.ap-close > :not(.close-bg):not(.close-liq) { position: relative; z-index: 1; }
.tilt-able { transform: perspective(900px) rotateX(var(--rt-x, 0deg)) rotateY(var(--rt-y, 0deg)); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); will-change: transform; }
.tilt-able.is-tilt { transition-duration: 0.12s; }
.shelf-prompt .axis-switch, .grid-switch-row .axis-switch { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(100%, 420px); margin-inline: auto; }
.shelf-prompt .axis-switch .axis-switch-name[data-side="0"], .grid-switch-row .axis-switch .axis-switch-name[data-side="0"] { justify-self: end; }
.shelf-prompt .axis-switch .axis-switch-name[data-side="1"], .grid-switch-row .axis-switch .axis-switch-name[data-side="1"] { justify-self: start; }
.card-fullart .ca-front-tap { left: 50%; top: 66.7%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
.card-fullart .ca-front-tap .ca-tap svg { width: 85px; height: 85px; }
.card-fullart .ca-front-tap .ca-tap { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.25)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.top-nav::before {
  display: block;
  content: "";
  position: absolute;
  left: calc(50% - var(--nav-pill-w, 320px) / 2);
  right: calc(50% - var(--nav-pill-w, 320px) / 2);
  width: auto;
  top: 50%;
  bottom: auto;
  height: var(--nav-pill-h, 40px);
  transform: translateY(-50%);
  z-index: -1;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--text) 15%, transparent);
  border-radius: 999px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  --nb-cap: calc(var(--nav-pill-h, 40px) / 2);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--nb-cap), transparent calc(var(--nb-cap) + var(--nb-fade, 10px)), transparent calc(100% - var(--nb-cap) - var(--nb-fade, 10px)), #000 calc(100% - var(--nb-cap)), #000 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 var(--nb-cap), transparent calc(var(--nb-cap) + var(--nb-fade, 10px)), transparent calc(100% - var(--nb-cap) - var(--nb-fade, 10px)), #000 calc(100% - var(--nb-cap)), #000 100%);
  transition: left 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), right 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
:root.nav-over .top-nav::before { left: -18px; right: -18px; --nb-fade: 90px; }
@media (prefers-reduced-motion: reduce) { .top-nav::before { transition: none; } }
@media (max-width: 640px) { .top-nav::before { display: none; } }
.top-nav::before { z-index: 0; }
.top-nav::before { box-shadow: inset 0 0 7px 1px color-mix(in srgb, var(--text) 7%, transparent), inset 0 0 2px 0 color-mix(in srgb, var(--text) 8%, transparent); }
.card-fullart .card-back .card-back-hint .ca-tap { position: absolute; left: 50%; top: 66.7%; transform: translate(-50%, -50%); color: #8f8f8f; opacity: 0.55; pointer-events: none; }
.card-fullart .card-back .card-back-hint .ca-tap svg { width: 85px; height: 85px; }
#deck-sub { margin-top: 10px; }
.deck-count { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; background: #ffffff; clip-path: polygon(50.00% 0.00%, 60.09% 12.33%, 75.00% 6.70%, 77.58% 22.42%, 93.30% 25.00%, 87.67% 39.91%, 100.00% 50.00%, 87.67% 60.09%, 93.30% 75.00%, 77.58% 77.58%, 75.00% 93.30%, 60.09% 87.67%, 50.00% 100.00%, 39.91% 87.67%, 25.00% 93.30%, 22.42% 77.58%, 6.70% 75.00%, 12.33% 60.09%, 0.00% 50.00%, 12.33% 39.91%, 6.70% 25.00%, 22.42% 22.42%, 25.00% 6.70%, 39.91% 12.33%); vertical-align: middle; }
.deck-count::before { content: ""; position: absolute; inset: 3px; background: var(--pk-c); clip-path: polygon(50.00% 0.00%, 60.09% 12.33%, 75.00% 6.70%, 77.58% 22.42%, 93.30% 25.00%, 87.67% 39.91%, 100.00% 50.00%, 87.67% 60.09%, 93.30% 75.00%, 77.58% 77.58%, 75.00% 93.30%, 60.09% 87.67%, 50.00% 100.00%, 39.91% 87.67%, 25.00% 93.30%, 22.42% 77.58%, 6.70% 75.00%, 12.33% 60.09%, 0.00% 50.00%, 12.33% 39.91%, 6.70% 25.00%, 22.42% 22.42%, 25.00% 6.70%, 39.91% 12.33%); }
.deck-count-num { position: relative; font-family: var(--font); font-weight: 800; font-size: 18px; line-height: 1; color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.card-fullart .card-back, .card-fullart .ca-back-content { text-align: left; }

.swipe-hint { position: relative; width: 180px; height: 62px; margin: 6px auto 0; color: var(--text); pointer-events: none; }
.swipe-hint .sw-track { position: absolute; left: 22px; right: 22px; top: 14px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.14; }
.swipe-hint .sw-dot { position: absolute; left: 50%; top: 15px; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: currentColor; opacity: 0; animation: sw-dot 5s ease-in-out infinite; }
.swipe-hint .sw-hand { position: absolute; left: calc(50% - 15.8px); top: 6.75px; width: 44px; height: 44px; opacity: 0; animation: sw-hand 5s ease-in-out infinite; transform-origin: 15.8px 8.25px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.swipe-hint .sw-hand svg { display: block; width: 100%; height: 100%; }
@keyframes sw-hand {
  0% { transform: translate(0, -9px) scale(1); opacity: 0; }
  6.1% { transform: translate(0, -9px) scale(1); opacity: 0.8; }
  10.6% { transform: translate(0, 0) scale(0.9); opacity: 0.8; }
  24.3% { transform: translate(-56px, 0) scale(0.9); opacity: 0.8; }
  44.1% { transform: translate(56px, 0) scale(0.9); opacity: 0.8; }
  53.2% { transform: translate(0, -9px) scale(1); opacity: 0.8; }
  59.3%, 100% { transform: translate(0, -9px) scale(1); opacity: 0; }
}
@keyframes sw-dot {
  0%, 9.1% { transform: translateX(0) scale(0.4); opacity: 0; }
  10.6% { transform: translateX(0) scale(1); opacity: 0.32; }
  24.3% { transform: translateX(-56px) scale(1); opacity: 0.32; }
  44.1% { transform: translateX(56px) scale(1); opacity: 0.32; }
  47.1%, 100% { transform: translateX(44px) scale(0.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint .sw-hand { animation: none; opacity: 0.8; transform: translate(0, -9px); }
  .swipe-hint .sw-dot { animation: none; }
}
.shelf-section .swipe-hint + .shelf-cta .cta-btn { margin-top: 10px; }

.shelf-section .shelf-cta { display: flex; justify-content: flex-end; max-width: var(--content-w); margin: 0 auto; padding-right: 24px; }
.shelf-section .shelf-cta .deck-charm { margin-top: 10px; }
@media (max-width: 900px) { .shelf-section .shelf-cta { justify-content: center; padding-right: 0; } .shelf-section .shelf-cta .deck-charm { margin-top: 12px; } }

.swipe-hint .sw-track { display: none; }
.swipe-hint .sw-ring { position: absolute; left: 50%; top: 15px; width: 140px; height: 30px; margin: -15px 0 0 -70px; perspective: 260px; opacity: 0; animation: sw-ring-show 5s ease-in-out infinite; }
.swipe-hint .sw-ring-spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: sw-ring-spin 5s ease-in-out infinite; }
.swipe-hint .sw-ring i { position: absolute; left: 50%; top: 50%; width: 18px; height: 24px; margin: -12px 0 0 -9px; border-radius: 3px; background: color-mix(in srgb, var(--text) 16%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); backface-visibility: hidden; transform: rotateY(calc(var(--k) * 45deg)) translateZ(46px); }
@keyframes sw-ring-show {
  0%, 8.4% { opacity: 0; }
  11.4%, 44.1% { opacity: 1; }
  47.9%, 100% { opacity: 0; }
}
@keyframes sw-ring-spin {
  0%, 10.6% { transform: rotateY(0deg); }
  24.3% { transform: rotateY(-45deg); }
  44.1%, 47.9% { transform: rotateY(45deg); }
  100% { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint .sw-ring { animation: none; opacity: 1; }
  .swipe-hint .sw-ring-spin { animation: none; }
}
.shelf-all .deck-charm-fan::before { content: ""; position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent); transition: opacity 0.28s ease, transform 0.28s ease; pointer-events: none; }
.shelf-all:hover .deck-charm-fan::before, .shelf-all:focus-visible .deck-charm-fan::before { opacity: 0; transform: scale(1.15); }
.shelf-all .deck-charm-fan i { background: color-mix(in srgb, var(--text) 16%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent), 0 0 0 1.5px var(--bg), 0 3px 8px rgba(0, 0, 0, 0.3); }
.shelf-all .deck-charm-fan { height: 62px; }
@media (min-width: 901px) {
  .shelf-section .shelf-cta { padding-right: 140px; margin-top: -78px; }
  .shelf-section .shelf-cta .deck-charm { margin-top: 0; }
}
.shelf-section .shelf-all { transform: scale(0.8); transform-origin: 50% 31px; }
.traj-field-ico { border-radius: 50%; corner-shape: round; }
.traj-dot { outline: 1.5px solid transparent; outline-offset: 2px; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.18s ease, outline-color 0.22s ease, outline-offset 0.22s ease; }
.traj-node.traj-lit .traj-dot { transform: none; background: var(--text); border-color: var(--text); box-shadow: none; outline-color: var(--traj-hi, var(--text)); outline-offset: 6px; }
.traj-dot { position: relative; }
.traj-node.traj-lit .traj-dot { outline-color: transparent; }
.traj-dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid var(--traj-hi, var(--text)); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--traj-hi, var(--text)) 75%, transparent), inset 0 0 5px 0 color-mix(in srgb, var(--traj-hi, var(--text)) 55%, transparent); opacity: 0; transform: scale(0.7); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; }
.traj-node.traj-lit .traj-dot::after { opacity: 1; transform: scale(1); }
.traj-dot { z-index: 1; }
:root[data-theme="light"] .traj-line path.traj-hi { fill: var(--traj-hi, var(--accent)); }

.pp-wrap { position: relative; width: 208px; aspect-ratio: 1 / 1; flex: 0 0 auto; }
.pp-wrap .personal-photo { position: relative; z-index: 2; transition: scale 0.38s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); }
.pp-wrap:hover .personal-photo { scale: 0.72; }
.pp-bubbles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; pointer-events: none; }
.pp-bubble { position: absolute; left: 0; top: 0; width: var(--bd); height: var(--bd); margin: calc(var(--bd) / -2) 0 0 calc(var(--bd) / -2); border-radius: 50%; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--bc) 70%, transparent), 0 0 14px color-mix(in srgb, var(--bc) 45%, transparent); opacity: 0; transform: translate(0, 0) scale(0.2); transition: transform 0.42s cubic-bezier(0.3, 0.7, 0.3, 1) calc((8 - var(--i)) * 18ms), opacity 0.3s ease calc((8 - var(--i)) * 18ms); }
.pp-bubble img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.pp-bubble b { position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--bg); color: var(--text); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
.pp-wrap:hover .pp-bubble { opacity: 1; transform: translate(var(--bx), var(--by)) scale(1); transition: transform 0.55s cubic-bezier(0.2, 1.3, 0.35, 1) calc(120ms + var(--i) * 35ms), opacity 0.25s ease calc(120ms + var(--i) * 35ms); }
@media (prefers-reduced-motion: reduce) { .pp-bubble, .pp-wrap .personal-photo { transition: none; } }
@media (hover: none) { .pp-bubbles { display: none; } .pp-wrap:hover .personal-photo { scale: 1; } }

.pp-bubble { text-decoration: none; cursor: pointer; }
.pp-bubble b { right: auto; left: 50%; bottom: 3px; transform: translateX(-50%); height: 15px; min-width: 15px; line-height: 15px; font-size: 9.5px; border-radius: 8px; padding: 0 3px; }
.pp-wrap:hover .pp-bubbles { pointer-events: auto; }
.pp-wrap:hover .pp-bubble { pointer-events: auto; }
.pp-wrap:hover .pp-bubble:hover { box-shadow: 0 0 0 2px var(--bc), 0 0 18px color-mix(in srgb, var(--bc) 65%, transparent); }

@media (min-width: 901px) { .ap-close { column-gap: 58px; } }
.pp-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none; }
.pp-wrap:hover::before { pointer-events: auto; }

@media (min-width: 641px) and (hover: hover) {
  .pcat { position: relative; container-type: inline-size; }
  .pcat-art { transition: scale 0.38s cubic-bezier(0.2, 0.8, 0.3, 1); position: relative; z-index: 2; }
  .pcat-bubbles { top: 25cqw; z-index: 1; }
  .pcat:has(.pcat-art:hover, .pcat-bubbles:hover) .pcat-art { scale: 0.72; }
  .pcat:has(.pcat-art:hover, .pcat-bubbles:hover) .pcat-bubbles { pointer-events: auto; }
  .pcat:has(.pcat-art:hover, .pcat-bubbles:hover) .pp-bubble { pointer-events: auto; opacity: 1; transform: translate(var(--bx), var(--by)) scale(1); transition: transform 0.55s cubic-bezier(0.2, 1.3, 0.35, 1) calc(120ms + var(--i) * 35ms), opacity 0.25s ease calc(120ms + var(--i) * 35ms); }
  .pcat:has(.pcat-art:hover, .pcat-bubbles:hover) .pcat-bubbles::before { content: ""; position: absolute; left: -170px; top: -170px; width: 340px; height: 340px; border-radius: 50%; pointer-events: auto; }
  .pcat:has(.pcat-art:hover, .pcat-bubbles:hover) .pp-bubble:hover { box-shadow: 0 0 0 2px var(--bc), 0 0 18px color-mix(in srgb, var(--bc) 65%, transparent); }
  .pcat-bubbles .pp-tool img { object-fit: contain; background: color-mix(in srgb, var(--text) 10%, var(--bg)); padding: 18%; box-sizing: border-box; }
}
@media (max-width: 640px), (hover: none) { .pcat-bubbles { display: none; } }
.traj-dot::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: var(--bg); opacity: 0; transition: opacity 0.22s ease; pointer-events: none; z-index: -1; }
.traj-node.traj-lit .traj-dot::before { opacity: 1; }

.ap-close { isolation: auto; }
.close-bg { display: none; }
.close-liq { top: 0; height: 100%; z-index: 2; mix-blend-mode: difference; }
.ap-close > .pp-wrap { z-index: 3; }
.traj-dot::before { background: radial-gradient(circle, var(--text) 0 2.6px, var(--bg) 3.2px); }

.ap-close .ap-cta-h { margin: 0 0 12px; font-family: var(--font); font-size: clamp(26px, 2.5vw, 34px); font-weight: 700; line-height: 1.18; letter-spacing: -0.015em; color: var(--text); max-width: 20em; text-wrap: balance; }
.ap-close .ap-cta-line { margin: 0 0 30px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 34em; }
.ap-close .ap-contact-h { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ap-close .contact-row { gap: 10px; }
.ap-close .contact-link { padding: 10px 18px 10px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; color: var(--text); transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; }
.ap-close .contact-link:hover, .ap-close .contact-link:focus-visible { color: var(--text); border-color: color-mix(in srgb, var(--text) 45%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); }
.ap-close .contact-link svg { width: 17px; height: 17px; }
@media (max-width: 900px) { .ap-close .ap-cta-h, .ap-close .ap-cta-line { margin-inline: auto; } }
@media (min-width: 901px) { .ap-close { grid-template-columns: auto minmax(0, 500px); justify-content: center; } }
@media (max-width: 1199px) { .traj-deco-top { width: clamp(110px, 12vw, 150px); top: -230px; } .traj-deco-bot { width: clamp(120px, 13vw, 160px); bottom: -250px; } }
@media (max-width: 700px) { .traj-deco { display: none; } }

.contact-link .cl-swap { display: inline-grid; }
.contact-link .cl-name, .contact-link .cl-handle { grid-area: 1 / 1; transition: opacity 0.2s ease, transform 0.2s ease; }
.contact-link .cl-handle { opacity: 0; transform: translateY(5px); }
.contact-link:hover .cl-name, .contact-link:focus-visible .cl-name { opacity: 0; transform: translateY(-5px); }
.contact-link:hover .cl-handle, .contact-link:focus-visible .cl-handle { opacity: 1; transform: none; }


.shelf.strip .ring-cut, .shelf:not(.carousel) .ring-cut { display: none !important; }

.nav-contact { display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); text-decoration: none; transition: border-color 0.18s ease, background 0.18s ease; }
.nav-contact:hover, .nav-contact:focus-visible { border-color: color-mix(in srgb, var(--text) 60%, transparent); background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.nav-contact-m { display: none !important; }
#contact { scroll-margin-top: calc(var(--nav-h, 56px) + 40px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 640px) {
  .nav-end > .nav-contact { display: none; }
  .top-nav.menu-open .nav-pages .nav-contact-m { display: inline !important; }
}

.shelf-section:has(.shelf.strip) .swipe-hint { display: none; }
.shelf.strip, .shelf.strip-alt { position: relative; z-index: 4; }
.strip-swipe { position: absolute; left: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; color: #ffffff; transition: opacity 0.4s ease; }
.strip-swipe.is-done { opacity: 0; }
.strip-swipe .ss-hand { position: absolute; left: -15.8px; top: -8.25px; width: 52px; height: 52px; opacity: 0; transform-origin: 15.8px 8.25px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); animation: ss-hand 3.4s ease-in-out infinite; }
.strip-swipe .ss-hand svg { display: block; width: 100%; height: 100%; }
.strip-swipe .ss-dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); opacity: 0; animation: ss-dot 3.4s ease-in-out infinite; }
@keyframes ss-hand {
  0% { transform: translate(60px, -10px) scale(1); opacity: 0; }
  10% { transform: translate(60px, -10px) scale(1); opacity: 0.95; }
  18% { transform: translate(60px, 0) scale(0.88); opacity: 0.95; }
  48% { transform: translate(-60px, 0) scale(0.88); opacity: 0.95; }
  56% { transform: translate(-60px, -10px) scale(1); opacity: 0.95; }
  66%, 100% { transform: translate(-60px, -10px) scale(1); opacity: 0; }
}
@keyframes ss-dot {
  0%, 16% { transform: translateX(60px) scale(0.3); opacity: 0; }
  18% { transform: translateX(60px) scale(1); opacity: 1; }
  48% { transform: translateX(-60px) scale(1); opacity: 1; }
  54%, 100% { transform: translateX(-60px) scale(0.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .strip-swipe .ss-hand { animation: none; opacity: 0.95; } .strip-swipe .ss-dot { animation: none; } }

.strip-swipe .ss-hand { width: 72px; height: 72px; left: -21.9px; top: -11.4px; transform-origin: 21.9px 11.4px; color: #ffffff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.25)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.strip-swipe .ss-hand svg { overflow: visible; }
.strip-swipe .ss-marks { opacity: 0; animation: ss-marks 3.4s ease-out infinite; }
@keyframes ss-marks { 0%, 15% { opacity: 0; } 18% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes ss-hand {
  0% { transform: translate(60px, -10px) scale(1); opacity: 0; }
  10% { transform: translate(60px, -10px) scale(1); opacity: 0.7; }
  18% { transform: translate(60px, 0) scale(0.88); opacity: 0.7; }
  48% { transform: translate(-60px, 0) scale(0.88); opacity: 0.7; }
  56% { transform: translate(-60px, -10px) scale(1); opacity: 0.7; }
  66%, 100% { transform: translate(-60px, -10px) scale(1); opacity: 0; }
}
.strip-swipe .ss-hand { width: 85px; height: 85px; left: -25.9px; top: -13.5px; transform-origin: 25.9px 13.5px; }
.ap-close > .pp-wrap.pp-wrap.pp-wrap { z-index: 3; }
@media (max-width: 640px) {
  .top-nav.menu-open .nav-pages {
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    z-index: 55;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .top-nav.menu-open .nav-pages a:not(.nav-sugg-item) { font-size: 20px; letter-spacing: 0.14em; color: var(--text); }
  .top-nav.menu-open .nav-pages .theme-toggle.nav-theme-m { width: 44px; height: 44px; margin-top: 6px; }
  .top-nav.menu-open .nav-pages .theme-toggle.nav-theme-m svg { width: 22px; height: 22px; }
  .nav-burger { position: relative; z-index: 60; }
  .top-nav.menu-open .wordmark { position: relative; z-index: 60; }
}
.traj-deco-top { --tw: clamp(100px, calc(19vw - 70px), 320px); width: var(--tw); top: calc(var(--tw) * -1.15); }
.traj-deco-bot { --tw: clamp(110px, calc(20vw - 70px), 350px); width: var(--tw); bottom: calc(var(--tw) * -0.97); }
.fun-deco { width: clamp(110px, calc(22vw - 40px), 330px); }
@media (max-width: 1299px) {
  .traj-deco-top { top: calc(var(--tw) * -2 - 20px); }
  .traj-deco-bot { bottom: calc(var(--tw) * -1.6 + 30px); }
}

.edge-deco svg { width: 100%; height: 100%; overflow: visible; }
.traj-deco-top { --tw: clamp(150px, calc(16vw - 20px), 300px); }
.traj-deco-bot { --tw: clamp(150px, calc(17vw - 20px), 320px); }
.fun-deco { width: clamp(130px, calc(20vw - 30px), 320px); }


.edge-deco.edge-deco { width: auto; height: auto; aspect-ratio: auto; }
.edge-deco .ed-full svg, .edge-deco .ed-half svg { display: block; width: auto; height: auto; overflow: visible; }
.edge-deco .ed-half { display: none; }
.fun-deco.fun-deco { top: -230px; }
@media (max-width: 1299px) {
  .edge-deco .ed-full { display: none; }
  .edge-deco .ed-half { display: block; }
}
@media (max-width: 700px) { .edge-deco.edge-deco { display: none; } }

.traj-role.is-active .traj-title { color: var(--traj-hi, var(--accent-ink)); }
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .pcat { position: relative; }
  .pcat-art { position: relative; z-index: 2; transition: scale 0.38s cubic-bezier(0.2, 0.8, 0.3, 1); }
  .pcat-bubbles.pcat-bubbles { display: block; z-index: 3; }
  .pcat.is-active .pcat-art { scale: 0.72; }
  .pcat.is-active .pcat-bubbles, .pcat.is-active .pp-bubble { pointer-events: auto; }
  .pcat.is-active .pp-bubble { opacity: 1; transform: translate(var(--bx), var(--by)) scale(1); transition: transform 0.55s cubic-bezier(0.2, 1.3, 0.35, 1) calc(120ms + var(--i) * 35ms), opacity 0.25s ease calc(120ms + var(--i) * 35ms); }
  .pcat-bubbles .pp-tool img { object-fit: contain; background: color-mix(in srgb, var(--text) 10%, var(--bg)); padding: 18%; box-sizing: border-box; }
  .pp-bubbles.pp-bubbles { display: block; }
  .pp-wrap .personal-photo { transition: scale 0.38s cubic-bezier(0.2, 0.8, 0.3, 1); }
  .pp-wrap.is-active .personal-photo { scale: 0.72; }
  .pp-wrap.is-active .pp-bubble { pointer-events: auto; opacity: 1; transform: translate(var(--bx), var(--by)) scale(1); transition: transform 0.55s cubic-bezier(0.2, 1.3, 0.35, 1) calc(120ms + var(--i) * 35ms), opacity 0.25s ease calc(120ms + var(--i) * 35ms); }
}

@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .pcat-art { transition: scale 0.32s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.25s ease 0.05s; }
  .pcat.is-active .pcat-art { scale: 0.2; opacity: 0; transition: scale 0.3s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.2s ease; }
}
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .pcat-art { transition: scale 0.5s cubic-bezier(0.22, 1.25, 0.36, 1) 0.18s, opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) 0.18s; }
  .pcat.is-active .pcat-art { scale: 0.2; opacity: 0; transition: scale 0.32s cubic-bezier(0.55, 0, 0.75, 0.2), opacity 0.26s cubic-bezier(0.4, 0, 1, 1); }
  .pcat .pp-bubble { transition: transform 0.36s cubic-bezier(0.5, 0, 0.75, 0.25) calc((3 - var(--i)) * 30ms), opacity 0.28s cubic-bezier(0.4, 0, 1, 1) calc((3 - var(--i)) * 30ms); }
  .pcat.is-active .pp-bubble { transition: transform 0.6s cubic-bezier(0.2, 1.3, 0.35, 1) calc(180ms + var(--i) * 45ms), opacity 0.3s cubic-bezier(0, 0, 0.2, 1) calc(180ms + var(--i) * 45ms); }
  .pp-wrap .personal-photo { transition: scale 0.45s cubic-bezier(0.25, 0.8, 0.3, 1) 0.12s; }
  .pp-wrap.is-active .personal-photo { transition: scale 0.38s cubic-bezier(0.4, 0, 0.2, 1); }
  .pp-wrap .pp-bubble { transition: transform 0.4s cubic-bezier(0.5, 0, 0.75, 0.25) calc((8 - var(--i)) * 22ms), opacity 0.3s cubic-bezier(0.4, 0, 1, 1) calc((8 - var(--i)) * 22ms); }
}
.card-front { -webkit-transform: translateZ(2px); transform: translateZ(2px); }
.card-back { -webkit-transform: rotateY(180deg) translateZ(2px); transform: rotateY(180deg) translateZ(2px); }
.card:not(.flipped) .card-back { visibility: hidden; transition: visibility 0s linear 0.225s; }
.card.flipped .card-front { visibility: hidden; transition: visibility 0s linear 0.225s; }
.card.flipped .card-back, .card:not(.flipped) .card-front { visibility: visible; transition: visibility 0s linear 0.225s; }
@media (max-width: 640px) {
  :root:not(.nav-over) .top-nav::after { left: -18px; right: calc(100% + 18px); }
}
.pp-bubble.pp-glyph img { filter: invert(1) brightness(0.92); }
:root[data-theme="light"] .pp-bubble.pp-glyph img { filter: none; }
.pcat-bubbles .pp-bubble.pp-glyph { background: color-mix(in srgb, var(--text) 10%, var(--bg)); }
.pcat-bubbles .pp-bubble.pp-glyph img { background: transparent; }

@media (min-width: 641px) and (hover: hover) {
  .pcat-art { transition: scale 0.5s cubic-bezier(0.22, 1.25, 0.36, 1) 0.18s, opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) 0.18s; }
  .pcat:has(.pcat-art:hover, .pcat-bubbles:hover) .pcat-art { scale: 0.2; opacity: 0; transition: scale 0.32s cubic-bezier(0.55, 0, 0.75, 0.2), opacity 0.26s cubic-bezier(0.4, 0, 1, 1); }
  .pcat .pp-bubble { transition: transform 0.36s cubic-bezier(0.5, 0, 0.75, 0.25) calc((3 - var(--i)) * 30ms), opacity 0.28s cubic-bezier(0.4, 0, 1, 1) calc((3 - var(--i)) * 30ms); }
  .pcat:has(.pcat-art:hover, .pcat-bubbles:hover) .pp-bubble { transition: transform 0.6s cubic-bezier(0.2, 1.3, 0.35, 1) calc(180ms + var(--i) * 45ms), opacity 0.3s cubic-bezier(0, 0, 0.2, 1) calc(180ms + var(--i) * 45ms); }
  .pcat-bubbles::after { content: ""; position: absolute; left: -100px; top: -100px; width: 200px; height: 200px; border-radius: 50%; pointer-events: none; }
  .pcat:has(.pcat-art:hover, .pcat-bubbles:hover) .pcat-bubbles::after { pointer-events: auto; }
}
.pcat-bubbles::after, .pcat-bubbles::before { z-index: -1; }

.hud-gear { display: none; }
@media (max-width: 640px) {
  .grid-hud .hud-controls { display: none; }
  .grid-hud .hud-main { display: flex; align-items: center; gap: 8px; }
  .grid-hud .hud-searchbox { flex: 1 1 auto; min-width: 0; }
  .hud-gear { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
  .hud-gear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .hud-gear.is-on { color: var(--text); border-color: color-mix(in srgb, var(--text) 55%, transparent); }
  .grid-settings { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 20px 32px; overflow-y: auto; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .grid-settings[hidden] { display: none; }
  .gs-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; }
  .gs-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .gs-body { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; max-width: 360px; margin: auto 0; }
  .gs-group { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
  .gs-label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  .gs-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .gs-chip { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); background: none; color: var(--muted); cursor: pointer; }
  .gs-chip.is-on { color: var(--bg); background: var(--text); border-color: var(--text); }
}
@media (max-width: 640px) {
  .grid-hud .hud-face.hud-main { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .grid-hud .hud-face.hud-main .hud-searchbox { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
  .grid-hud .hud-face.hud-main .hud-gear { margin: 0; }
}
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .card .card-inner { transition: transform 0.6s cubic-bezier(0.5, 0, 0.3, 1) var(--fd, 0s), box-shadow 0.2s ease-out; }
  .card:not(.flipped) .card-back, .card.flipped .card-front, .card.flipped .card-back, .card:not(.flipped) .card-front { transition: visibility 0s linear calc(0.255s + var(--fd, 0s)); }
}
.card-fullart.card-sealed .ca-lock { transform: translateZ(3px); }
.card-sealed .card-front { -webkit-transform: none; transform: none; }

@media (max-width: 640px) {
  .grid-results { justify-content: center; }
  .grid-results .card { flex: 0 0 208px; width: 208px; max-width: none; transform: scale(var(--gz, 0.74)); transform-origin: top left; margin-right: calc(208px * (var(--gz, 0.74) - 1)); margin-bottom: calc(278px * (var(--gz, 0.74) - 1)); }
  .grid-results .card:hover { --pull: 0px; }
  .grid-results .card-inner, .grid-results .card-face { height: 278px; min-height: 278px; aspect-ratio: auto; }
  .grid-results .card-fullart, .deckpage-cards .card-fullart { --ca-top: 7px; --ca-bot: 30px; --ca-cap: 52px; }
  .deckpage-cards .card-inner, .deckpage-cards .card-face { height: 278px; min-height: 278px; }
}

.shelf.strip.gl { overflow: visible; }

.card:not(.card-sealed) .card-inner::before {
  content: "";
  position: absolute;
  left: calc(50% - 1.5px);
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 1.5px;
  background: linear-gradient(to bottom, #d9d2c3, #b9b2a3);
  transform: rotateY(90deg);
  pointer-events: none;
  z-index: 5;
}
@keyframes shake-x {
  0%, 100% { translate: 0 0; }
  15% { translate: -7px 0; }
  30% { translate: 7px 0; }
  45% { translate: -5px 0; }
  60% { translate: 5px 0; }
  80% { translate: -3px 0; }
}
.card.shake { animation: shake-x 0.42s ease; }

@media (max-width: 560px) {
  .cluster-slot { width: calc(208px * var(--card2z, 0.74)); height: calc(278px * var(--card2z, 0.74)); }
  .cluster-slot .quick-cards { transform: scale(var(--card2z, 0.74)); }
}
.deckpage-cards.grid2 { gap: 12px; width: calc(416px * var(--c2, 1) + 14px); }
.card-fullart .ca-back-content { padding-bottom: 16px; gap: 11px; }
.card-fullart .card-back .card-finding { font-size: 13px; line-height: 1.5; -webkit-line-clamp: 7; line-clamp: 7; }
.card-fullart .ca-back-tags .cbt-k, .card-fullart .ca-back-tools .cbt-k { font-size: 8.5px; }
.card-fullart .ca-back-tags .cbt-v { font-size: 12px; }
.card-fullart .ca-back-meta .card-type, .card-fullart .ca-back-meta .card-date { font-size: 9.5px; }
.card-fullart .ca-back-tools { margin-top: auto; padding-top: 2px; }
.card-fullart .card-back .card-back-hint { padding-bottom: 0; }
@media (max-width: 640px) {
  .strip-title { margin: 10px 0 60px; }
  .shelf.strip.gl { margin-bottom: 14px; }
  .shelf.strip:has(+ .strip-title) { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .strip-title { margin: 10px 0 10px; }
  .shelf.strip.gl { margin-bottom: 0; }
  .shelf.strip.gl + .strip-title { margin-top: 110px; }
}
@media (max-width: 640px) {
  .shelf.strip ~ .strip-title { margin-top: 110px; }
}
.deck-preview.is-baking .preview-card { left: 28px; right: 28px; width: auto; height: 278px; top: 0; bottom: auto; transform: none; opacity: 1; }
@media (max-width: 640px) {
  .strip-title { margin: 10px 0 20px; }
  .shelf.strip ~ .strip-title { margin-top: 55px; }
}
@media (max-width: 640px) {
  .strip-title { margin: 10px 0 25px; }
  .shelf.strip ~ .strip-title { margin-top: 45px; }
}
@media (max-width: 640px) {
  .strip-title { margin: 10px 0 30px; }
  .shelf.strip ~ .strip-title { margin-top: 40px; }
}
@media (max-width: 640px) {
  .strip-title { margin: 10px 0 20px; }
  .shelf.strip ~ .strip-title { margin-top: 35px; }
}

.top-nav::before { display: none; }

.grid-hud.is-open { flex-direction: column; }
.grid-hud.is-open .hud-controls { display: none; }
.grid-hud.is-open .hud-pane {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}
.grid-hud.is-open .hud-opt { height: 36px; }

.contact-row.is-sized .contact-link { width: var(--cl-w); box-sizing: border-box; justify-content: center; }
@media (hover: none) {
  .contact-link .cl-name { opacity: 1; transform: none; }
  .contact-link .cl-handle { opacity: 0; }
}

@media (min-width: 641px) and (hover: none) and (pointer: coarse) {
  .pcat { position: relative; container-type: inline-size; }
  .pcat-art { position: relative; z-index: 2; }
  .pcat-bubbles { top: 25cqw; z-index: 1; }
  .pcat-bubbles .pp-tool img { object-fit: contain; background: color-mix(in srgb, var(--text) 10%, var(--bg)); padding: 18%; box-sizing: border-box; }
}


@media (max-width: 640px) { .shelf-section .shelf-cta .deck-charm { margin-top: 22px; } }

.hud-btn-count[hidden] { display: none; }
.identity.is-placeholder .ph-name { margin: 22px 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.identity.is-placeholder { padding-top: 154px; }
@media (max-width: 640px) { .identity.is-placeholder { padding-top: 74px; } }

.rv { opacity: 0; transform: translateY(64px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rv-d, 0s), transform 0.8s cubic-bezier(0.16, 0.8, 0.2, 1) var(--rv-d, 0s); }
.rv.rv-fade { transform: none; }
.rv.rv-in { opacity: 1; transform: none; }
.rv.rv-now { transition: none; opacity: 1; transform: none; }


@media (min-width: 901px) {
  .shelf-section { margin-top: 27px; padding-bottom: 0; }
  #map.page-section { padding-top: 17px; padding-bottom: 0; }
  #about.page-section { padding-top: 89px; }
  .aboutcol .traj-block { margin-top: 90px; }
  .aboutcol .about-personal { margin-top: 102px; }
  .about-personal .ap-close { margin-top: 136px; }
}

.traj-detail { display: none; }
@media (min-width: 641px) {
  .traj-block { --td-w: 400px; }
  .traj-block > .traj {
    margin-left: var(--gutter);
    margin-right: calc(var(--gutter) + var(--td-w));
    --traj-anchor: end;
    --traj-open-slot: 4;
    --traj-span-inset: 40px;
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
    clip-path: inset(-600px -36px -600px -600px);
  }
  .traj-block > .traj .traj-node.is-open .traj-roles { display: none; }
  .traj-block > .traj .traj-node:not(.is-open) .traj-roles { translate: 10px 0; max-width: var(--lbl-w, 160px); }
  .traj-block > .traj .traj-node.is-open .traj-year { opacity: 0; }
  .traj-block > .traj-detail {
    display: block;
    position: absolute;
    right: var(--gutter);
    top: 50%;
    width: var(--td-w);
    padding: 0 0 6px 34px;
    z-index: 2;
  }
  .traj-detail .td-year {
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .traj-detail .td-roles { display: flex; flex-direction: column; gap: 22px; }
  .traj-detail .traj-role { display: block; cursor: default; }
  .traj-detail .traj-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--text); }
  .traj-detail .traj-note { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--muted); }
  .traj-block > .traj { z-index: 3; }
  .traj-block > .traj-detail { height: 280px; overflow: hidden; box-sizing: border-box; }
  .traj-detail .traj-fields { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
  .traj-detail .traj-field-ico { width: 22px; height: 22px; }
  .traj-detail[data-fit="1"] .td-roles { gap: 14px; }
  .traj-detail[data-fit="2"] .td-roles { gap: 10px; }
  .traj-detail[data-fit="2"] .traj-note { font-size: 14px; line-height: 1.5; margin-top: 4px; }
  .traj-detail[data-fit="3"] .td-roles { gap: 8px; }
  .traj-detail[data-fit="3"] .traj-title { font-size: 17px; }
  .traj-detail[data-fit="3"] .traj-note { font-size: 13px; line-height: 1.45; margin-top: 3px; }
  .traj-detail[data-fit="4"] .td-roles { gap: 6px; }
  .traj-detail[data-fit="4"] .traj-title { font-size: 16px; }
  .traj-detail[data-fit="4"] .traj-note { font-size: 12px; line-height: 1.4; margin-top: 2px; }
  .traj-detail[data-fit="4"] .traj-field-ico { width: 18px; height: 18px; }
  .traj-detail[data-fit="5"] .td-year { margin-bottom: 10px; }
  .traj-detail[data-fit="5"] .td-roles { gap: 5px; }
  .traj-detail[data-fit="5"] .traj-title { font-size: 15px; }
  .traj-detail[data-fit="5"] .traj-note { font-size: 11.5px; line-height: 1.35; margin-top: 1px; }
  .traj-detail[data-fit="5"] .traj-field-ico { width: 16px; height: 16px; }
  .traj-sep {
    position: absolute;
    bottom: 0;
    width: 0;
    pointer-events: none;
    z-index: 4;
  }
  .traj-sep::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--text), var(--text) 55%, transparent);
    opacity: 0.55;
  }
  .traj-sep::after {
    content: "";
    position: absolute;
    left: -9px;
    top: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text);
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 0.22s ease;
  }
  .traj-sep.is-lit::after {
    box-shadow:
      0 0 0 4px var(--bg),
      0 0 0 5.5px var(--traj-hi, var(--text)),
      0 0 16px 5px color-mix(in srgb, var(--traj-hi, var(--text)) 70%, transparent);
  }
  .traj-block > .traj .traj-node.is-open .traj-dot { opacity: 0; }
  .traj-block > .traj .traj-node > .traj-year,
  .traj-block > .traj .traj-node > .traj-roles { opacity: var(--ink, 1); }
  .traj-block > .traj .traj-node:not(.is-open) .traj-dot {
    background: var(--bg);
    border-color: color-mix(in srgb, var(--muted) calc(var(--ink, 1) * 100%), var(--bg));
  }
  .traj-block > .traj .traj-node.traj-lit:not(.is-open) .traj-dot { background: var(--text); border-color: var(--text); }
  .traj-vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -0.5px;
    background: linear-gradient(to bottom, var(--text), var(--text) 55%, transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
  .traj-detail.td-in { animation: td-in 0.38s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .traj-block > .traj-cv-note {
    position: static;
    margin: 6px 0 0 var(--gutter);
    text-align: left;
  }
}
@keyframes td-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .traj-detail.td-in { animation: none; } }
.traj-vline, .traj-sep { display: none; }
@media (min-width: 641px) { .traj-block > .traj .traj-vline, .traj-block > .traj .traj-sep { display: block; } }

@media (min-width: 641px) and (max-width: 900px) {
  .traj-block { --td-w: 300px; }
  .traj-block > .traj { --traj-slots: 3; }
  .traj-block > .traj-detail { padding-left: 24px; }
  .traj-detail .traj-title { font-size: 17px; }
  .traj-detail .traj-note { font-size: 14px; }
}


@media (min-width: 901px) and (max-width: 1150px) {
  .traj-block > .traj { --traj-slots: 4; }
}

@media (min-width: 641px) {
  .shelf-section .shelf-cta {
    position: absolute;
    top: 52px;
    right: calc(max(0px, (100% - var(--content-w)) / 2) + 150px);
    left: auto;
    width: auto;
    margin: 0;
    padding: 0;
    display: block;
    z-index: 3;
  }
  .shelf-section .shelf-cta .deck-charm { margin-top: 0; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .shelf-section .shelf-cta { right: 8px; }
}
@media (min-width: 901px) { .shelf-section { margin-bottom: 49px; } }

@media (min-width: 641px) {
  .shelf-section .shelf-cta .shelf-all { flex-direction: row; gap: 12px; transform-origin: 31px 31px; transform: scale(0.742); }
  .shelf-section .shelf-cta .shelf-all .deck-charm-fan { width: 62px; }
  .shelf-section .shelf-cta .shelf-all .deck-charm-label {
    height: auto;
    font-size: 20.2px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .shelf-section { margin-top: 100px; margin-bottom: -50px; }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .shelf-section { margin-top: 127px; margin-bottom: 59px; }
}
@media (max-width: 640px) { .shelf-section { margin-top: 42px; } }

@media (max-width: 640px) {
  .shelf-prompt h2 { display: block; }
  .shelf-prompt .axis-switch { display: none; }
}

.traj-wheel-hint { display: none; }
@media (min-width: 641px) and (hover: hover) and (pointer: fine) {
  .traj-block > .traj .traj-wheel-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: absolute;
    right: 56px;
    bottom: 22px;
    z-index: 4;
    color: var(--text);
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    animation: tw-show 5s ease-in-out infinite;
    transition: opacity 0.4s ease;
  }
  .traj-wheel-hint svg { display: block; width: 22px; height: 33px; }
  .traj-wheel-hint .tw-wheel { animation: tw-wheel 5s ease-in-out infinite; transform-box: fill-box; }
}
@keyframes tw-show {
  0% { opacity: 0; }
  6.1%, 53.2% { opacity: 0.8; }
  59.3%, 100% { opacity: 0; }
}
@keyframes tw-wheel {
  0%, 10.6% { transform: translateY(0); opacity: 1; }
  22% { transform: translateY(10px); opacity: 0; }
  22.1%, 26% { transform: translateY(0); opacity: 0; }
  28% { transform: translateY(0); opacity: 1; }
  40% { transform: translateY(10px); opacity: 0; }
  40.1%, 44.1% { transform: translateY(0); opacity: 0; }
  47%, 100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .traj-block > .traj .traj-wheel-hint { animation: none; opacity: 0.8; }
  .traj-wheel-hint .tw-wheel { animation: none; }
}

.card-fullart .ca-tap, .shelf-section .swipe-hint { transition: opacity 0.4s ease; }
@media (hover: hover) and (pointer: fine) { .card-fullart .ca-tap { display: none !important; } }
.card-fullart .ca-front-tap .ca-tap { --tap-o: 0.7; }
.card-fullart .card-back .card-back-hint .ca-tap { --tap-o: 0.55; }
.card-fullart .ca-front-tap .ca-tap, .card-fullart .card-back .card-back-hint .ca-tap { animation: ca-tap-show-5s 5s ease-in-out infinite; }
.card-fullart .ca-tap-hand { animation: ca-tap-hand-5s 5s ease-in-out infinite; }
.card-fullart .ca-tap .tm { animation: ca-tap-mark-5s 5s ease-out infinite; }
@keyframes ca-tap-show-5s {
  0% { opacity: 0; }
  6.1%, 53.2% { opacity: var(--tap-o, 0.7); }
  59.3%, 100% { opacity: 0; }
}
@keyframes ca-tap-hand-5s {
  0%, 12% { transform: translateY(0) scale(1); }
  17%, 20% { transform: translateY(-2.5px) scale(0.9); }
  26%, 30% { transform: translateY(0) scale(1); }
  35%, 38% { transform: translateY(-2.5px) scale(0.9); }
  44%, 100% { transform: translateY(0) scale(1); }
}
@keyframes ca-tap-mark-5s {
  0%, 16.5% { opacity: 0; transform: translate(0, 0); }
  18% { opacity: 1; transform: translate(0, 0); }
  24% { opacity: 0; transform: translate(var(--tx), var(--ty)); }
  24.1%, 33.5% { opacity: 0; transform: translate(0, 0); }
  35% { opacity: 1; transform: translate(0, 0); }
  41%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); }
}
@keyframes ss-hand-5s {
  0% { transform: translate(60px, -10px) scale(1); opacity: 0; }
  6.8% { transform: translate(60px, -10px) scale(1); opacity: 0.7; }
  12.24% { transform: translate(60px, 0) scale(0.88); opacity: 0.7; }
  32.64% { transform: translate(-60px, 0) scale(0.88); opacity: 0.7; }
  38.08% { transform: translate(-60px, -10px) scale(1); opacity: 0.7; }
  44.88%, 100% { transform: translate(-60px, -10px) scale(1); opacity: 0; }
}
@keyframes ss-dot-5s {
  0%, 10.88% { transform: translateX(60px) scale(0.3); opacity: 0; }
  12.24% { transform: translateX(60px) scale(1); opacity: 1; }
  32.64% { transform: translateX(-60px) scale(1); opacity: 1; }
  36.72%, 100% { transform: translateX(-60px) scale(0.3); opacity: 0; }
}
@keyframes ss-marks-5s { 0%, 10.2% { opacity: 0; } 12.24% { opacity: 1; } 19.04%, 100% { opacity: 0; } }
.strip-swipe .ss-hand { animation-name: ss-hand-5s; animation-duration: 5s; }
.strip-swipe .ss-dot { animation-name: ss-dot-5s; animation-duration: 5s; }
.strip-swipe .ss-marks { animation-name: ss-marks-5s; animation-duration: 5s; }
@media (prefers-reduced-motion: reduce) {
  .card-fullart .ca-front-tap .ca-tap, .card-fullart .card-back .card-back-hint .ca-tap { animation: none; opacity: var(--tap-o, 0.7); }
  .card-fullart .ca-tap-hand, .card-fullart .ca-tap .tm { animation: none; }
}
.hint-packs-off .shelf-section .swipe-hint, .hint-cards-off .card-fullart .ca-tap { opacity: 0 !important; animation: none !important; }
.hint-packs-off .shelf-section .swipe-hint * { animation-play-state: paused; }
.hint-traj-off .traj-block > .traj .traj-wheel-hint { animation: none; opacity: 0; }

.traj-block > .traj { --arm-lift: brightness(1.75); }
:root[data-theme="light"] .traj-block > .traj { --arm-lift: brightness(0.5); }
.traj-block > .traj .traj-line,
.traj-block > .traj .traj-vline,
.traj-block > .traj .traj-node:not(.is-open) > .traj-year,
.traj-block > .traj .traj-node:not(.is-open) > .traj-dot,
.traj-block > .traj .traj-node:not(.is-open) > .traj-roles { transition: filter 0.25s ease; }
.traj-block > .traj.is-armed .traj-line,
.traj-block > .traj.is-armed .traj-vline,
.traj-block > .traj.is-armed .traj-node:not(.is-open) > .traj-year,
.traj-block > .traj.is-armed .traj-node:not(.is-open) > .traj-dot,
.traj-block > .traj.is-armed .traj-node:not(.is-open) > .traj-roles { filter: var(--arm-lift); }