:root {
  --bg: #090b15;
  --bg-deep: #070813;
  --panel: #111423;
  --panel-2: #18172b;
  --panel-hover: #211d37;
  --ink: #eff0f8;
  --muted: #a8a9bd;
  --faint: #757b93;
  --edge: rgba(158, 144, 206, .22);
  --violet: #a77cff;
  --violet-light: #ceb6ff;
  --violet-dark: #59429a;
  --scarlet: #f15b71;
  --red-dark: #8e293c;
  --cyan: #75d7e9;
  --gold: #dfc391;
  --reading-size: 17px;
  --sans: Inter, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --display: 'Arial Narrow', Impact, Haettenschweiler, 'Franklin Gothic Medium', sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
  --sidebar: 282px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 98px
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 84% 14%, #5d2c9012, transparent 42%), radial-gradient(ellipse at 30% 72%, #741a3c10, transparent 45%), repeating-linear-gradient(125deg, transparent 0, transparent 57px, #ffffff03 58px, #ffffff03 59px)
}

a {
  color: inherit
}

button,
select,
input {
  font: inherit
}

button {
  cursor: pointer
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px
}

::selection {
  background: #9871ed80;
  color: white
}

.progress {
  position: fixed;
  z-index: 60;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--scarlet), var(--violet), var(--cyan));
  box-shadow: 0 0 16px #a77cff88;
  transition: width .09s linear
}

.sidebar {
  position: fixed;
  z-index: 36;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar);
  background: linear-gradient(180deg, #131324 0, #0a0b16 45%, #10101f 100%);
  border-right: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  box-shadow: 5px 0 35px #0003
}

.brand {
  padding: 29px 25px 19px;
  border-bottom: 1px solid var(--edge)
}

.brand-top {
  display: flex;
  align-items: center;
  gap: 12px
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #ae79fc88;
  border-radius: 50%;
  color: var(--violet-light);
  background: radial-gradient(circle at center, #6840a337, #130c20);
  box-shadow: 0 0 0 5px #a779ff0b, 0 0 30px #a67cff24;
  font-size: 24px
}

.brand-name {
  font-family: var(--display);
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: 1.5px;
  font-weight: 900
}

.brand-name span {
  color: var(--scarlet)
}

.brand-small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--muted);
  margin-top: 4px
}

.brand-edition {
  font-size: 11px;
  color: var(--muted);
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px
}

.brand-edition::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--scarlet);
  box-shadow: 0 0 8px var(--scarlet)
}

.side-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.4px;
  color: var(--faint);
  padding: 19px 26px 9px
}

.toc-scroll {
  overflow: auto;
  flex: 1;
  padding: 0 9px 16px 11px;
  scrollbar-width: thin;
  scrollbar-color: #614c8b transparent
}

.toc-link {
  text-decoration: none;
  color: #b4b4c7;
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 9px;
  padding: 9px 11px 9px 14px;
  font-size: 12px;
  line-height: 1.4;
  margin: 1px 0;
  transition: .15s
}

.toc-link:hover {
  color: white;
  background: #a77cff11
}

.toc-link.active {
  color: #fff;
  background: linear-gradient(90deg, #9a6bff29, #a77cff07);
  box-shadow: inset 2px 0 var(--violet)
}

.toc-orb {
  width: 5px;
  height: 5px;
  border: 1px solid #8976ae;
  border-radius: 50%;
  flex: none
}

.toc-link.active .toc-orb {
  background: var(--violet);
  border-color: var(--violet);
  box-shadow: 0 0 10px var(--violet)
}

.side-footer {
  border-top: 1px solid var(--edge);
  padding: 14px 22px;
  color: var(--faint);
  font-size: 11px
}

.side-footer strong {
  color: #b9accf;
  font-weight: 600
}

.side-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 12px
}

.side-actions button {
  background: #201a31;
  border: 1px solid #51436088;
  border-radius: 7px;
  color: #ddd3ef;
  padding: 6px 11px;
  font-size: 12px
}

.layout {
  margin-left: var(--sidebar);
  min-width: 0
}

.topbar {
  height: 68px;
  position: sticky;
  top: 0;
  z-index: 28;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 80px);
  gap: 18px;
  border-bottom: 1px solid var(--edge);
  background: #0a0c17ed;
  backdrop-filter: blur(18px)
}

.top-l {
  display: flex;
  gap: 13px;
  align-items: center;
  min-width: 0
}

.crumb {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.crumb strong {
  color: #f0e8ff;
  font-weight: 700
}

.crumb-sep {
  color: #665976;
  margin: 0 7px
}

.top-r {
  display: flex;
  align-items: center;
  gap: 8px
}

.utility {
  background: transparent;
  color: #cfcadd;
  border: 1px solid #786d914f;
  min-height: 37px;
  min-width: 37px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 13px;
  transition: .2s
}

.utility:hover {
  border-color: #b18fff88;
  background: #32284555;
  color: #fff
}

.top-r .search-btn {
  min-width: 160px;
  justify-content: space-between
}

.search-keys {
  font-size: 10px;
  line-height: 1.2;
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid #62607466;
  color: #aaa6bb
}

.mobile-menu {
  display: none
}

.filter-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 13px clamp(24px, 5vw, 80px);
  background: #11111df0;
  border-bottom: 1px solid var(--edge);
  font-size: 12px;
  color: var(--muted)
}

.filter-strip .lbl {
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
  color: #b8aad6;
  margin-right: 6px
}

.filter-strip select {
  background: #1c1b2a;
  border: 1px solid #55496c9c;
  color: #ebe6f5;
  border-radius: 8px;
  padding: 8px 28px 8px 10px;
  font-size: 12px;
  max-width: 220px
}

.filter-strip button {
  background: none;
  border: 0;
  color: var(--cyan);
  font-size: 12px
}

.filter-strip .count {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 590px;
  display: flex;
  align-items: center;
  padding: 90px clamp(25px, 7vw, 108px) 85px;
  background: radial-gradient(ellipse at 78% 48%, #4e2e8e65, transparent 42%), linear-gradient(118deg, #0b0b17, #111227 64%, #101021)
}

.hero:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--scarlet), #682a7d, var(--cyan));
  opacity: .7
}

.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) .8fr;
  gap: 25px;
  align-items: center;
  width: 100%;
  max-width: 1290px;
  margin: auto
}

.hero-copy {
  max-width: 770px
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c7adff;
  letter-spacing: 3px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase
}

.eyebrow span {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--scarlet)
}

.hero h1 {
  font-family: var(--display);
  font-stretch: condensed;
  letter-spacing: .4px;
  line-height: .89;
  font-size: clamp(68px, 8vw, 145px);
  margin: 27px 0 12px;
  color: #f4f1fa;
  text-transform: uppercase;
  text-shadow: 0 10px 36px #0009
}

.hero h1 .rpg {
  display: block;
  color: var(--scarlet);
  font-size: .96em;
  letter-spacing: 8px;
  filter: drop-shadow(0 0 14px #a63d6085)
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(16px, 1.9vw, 23px);
  font-style: italic;
  color: #bdb3c8;
  margin: 26px 0 24px
}

.hero-copy p {
  font-size: 13px;
  line-height: 2;
  color: #c8c3db;
  max-width: 430px
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 28px 0
}

.hero-meta span {
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid #a38fba69;
  background: #a47dff12;
  border-radius: 5px;
  padding: 5px 10px;
  color: #d4c0ff
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #090917;
  background: linear-gradient(120deg, #d9b8ff, #a478f1);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 14px 21px;
  border-radius: 6px;
  box-shadow: 0 7px 32px #8753bb64
}

.hero-art {
  height: 440px;
  position: relative;
  display: grid;
  place-items: center
}

.sigil-back {
  position: absolute;
  width: min(470px, 108%);
  opacity: .78;
  filter: drop-shadow(0 0 24px #c98cfc44);
  mask-image: radial-gradient(ellipse at center, black 0%, black 56%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, black 56%, transparent 74%);
  animation: float 18s ease-in-out infinite alternate
}

.sigil-center {
  position: relative;
  z-index: 2;
  width: 230px;
  height: 230px;
  border: 1px solid #c892eb60;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 16px #bf7afb07, 0 0 0 45px #b86df809, 0 0 65px #b35aff23;
  transform: rotate(-15deg)
}

.sigil-center:before,
.sigil-center:after {
  content: '';
  position: absolute;
  inset: 19px;
  border: 1px dashed #e3bbfc55;
  border-radius: 50%
}

.sigil-center:after {
  inset: 45px;
  border: 1px solid #a363d38f
}

.sigil-center b {
  font-size: 87px;
  line-height: 1;
  color: #e7b3ff;
  font-weight: 400;
  text-shadow: 0 0 24px #db8bff55
}

.hero-jp {
  position: absolute;
  right: 3%;
  top: 3%;
  writing-mode: vertical-rl;
  color: #aa82dc99;
  font-family: var(--serif);
  letter-spacing: 14px;
  font-size: 12px
}

.reading-shell {
  width: min(100%, 1270px);
  margin: 0 auto;
  padding: 5px clamp(20px, 6.3vw, 100px) 160px
}

.chapter {
  padding-top: 94px;
  padding-bottom: 35px;
  border-bottom: 1px solid #9e85b123;
  scroll-margin-top: 90px
}

.chapter-kicker {
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: 10px;
  color: #8e86ae;
  letter-spacing: 2.1px;
  font-weight: 850;
  text-transform: uppercase
}

.red-diamond {
  color: var(--scarlet)
}

.chapter-line {
  width: 40px;
  height: 1px;
  background: #765780
}

.chapter-title {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .25px;
  font-size: clamp(38px, 4vw, 65px);
  color: #f3efff;
  max-width: 1000px;
  margin: 20px 0 19px
}

.chapter-rule {
  height: 3px;
  width: 96px;
  background: linear-gradient(90deg, var(--scarlet), var(--violet));
  margin-bottom: 36px;
  box-shadow: 0 0 12px #c85eab44
}

.subhead {
  color: #ddd4f4;
  font-family: var(--sans);
  line-height: 1.25;
  font-weight: 760;
  letter-spacing: -.02em;
  margin: 39px 0 15px;
  scroll-margin-top: 96px
}

.chapter h2.subhead {
  font-size: clamp(22px, 2.3vw, 30px)
}

.chapter h3.subhead {
  font-size: 19px;
  color: #c6aae9
}

.prose {
  font-size: var(--reading-size);
  line-height: 1.9;
  color: #d3d1dd;
  margin: 0 0 20px;
  max-width: 890px
}

.prose strong {
  color: #f3edff
}

.prose em {
  color: #dbbadf
}

.example {
  border-left: 3px solid var(--cyan);
  padding: 13px 16px;
  background: #7dd4e50b;
  border-radius: 0 7px 7px 0;
  color: #dfebee
}

.book-notice {
  color: #c8b9ff !important;
  border: 1px solid #9c6efa39;
  padding: 12px 16px;
  background: #a77cff0b;
  border-radius: 8px;
  font-size: 14px !important
}

.chapter-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 65px;
  gap: 14px;
  color: #6f7194;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.1px
}

.chapter-end:before {
  content: '';
  height: 1px;
  flex: 1;
  background: #6f59814d
}

.chapter-end a {
  color: #b8a0d8;
  font-size: 11px;
  letter-spacing: 0;
  text-decoration: none
}

.table-shell {
  border: 1px solid #8375b04e;
  border-radius: 12px;
  overflow-x: auto;
  margin: 25px 0 30px;
  background: #151627;
  scrollbar-color: #5e4b79 transparent
}

.table-shell table {
  border-collapse: collapse;
  width: 100%;
  min-width: max-content;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.6
}

.table-shell th {
  text-align: left;
  color: #e4d4ff;
  font-size: 11px;
  letter-spacing: .55px;
  background: #382b55;
  border-bottom: 1px solid #8065af;
  padding: 13px 15px;
  white-space: normal
}

.table-shell td {
  padding: 12px 15px;
  vertical-align: top;
  color: #c5c5d4;
  border-bottom: 1px solid #6f659030
}

.table-shell tr:nth-child(even) td {
  background: #b0a2fc07
}

.table-shell tr:last-child td {
  border-bottom: none
}

.table-shell th:first-child,
.table-shell td:first-child {
  font-weight: 700;
  color: #e7e0f4
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 27px 0 44px;
  align-items: stretch
}

.tech-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(140deg, #1d1b30dd, #111421f5);
  border: 1px solid #856aaf65;
  border-radius: 13px;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
  scroll-margin-top: 120px
}

.tech-card:hover {
  transform: translateY(-2px);
  border-color: #aa80f4b0;
  box-shadow: 0 15px 50px #0004, 0 0 24px #a371ff11
}

.tech-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ed6274, #c180f6, #6cd8e3);
  opacity: .66
}

.tech-head {
  padding: 18px 20px 11px;
  position: relative;
  min-height: 10px
}

.tech-id {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #a891c7;
  font-weight: 850
}

.tech-head h3 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.035em;
  color: #faf5ff;
  margin: 7px 24px 0 0
}

.tech-anchor {
  position: absolute;
  top: 18px;
  right: 17px;
  font-size: 20px;
  text-decoration: none;
  color: #9982b7;
  line-height: 1
}

.tech-anchor:hover {
  color: white
}

.tech-content {
  display: flex;
  flex-direction: column;
  flex: 1
}

.tech-content h3 {
  margin: 0 20px;
}

.tech-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 18px 15px;
  border-bottom: 1px solid #7358863b
}

.stat {
  display: inline-block;
  background: #ffffff0b;
  border: 1px solid #9f96c21f;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1.4;
  color: #bcb6d0
}

.stat-level {
  background: #b268fa35;
  color: #e9ceff;
  border-color: #c88aff77;
  font-weight: 850
}

.rule-field {
  padding: 10px 19px 10px;
  border-bottom: 1px solid #9e80ba13;
  font-size: 13px;
  line-height: 1.62;
  color: #d6d2e2
}

.rule-field:last-child {
  border-bottom: none
}

.field-label {
  display: block;
  font-size: 9px;
  color: #bf9eef;
  letter-spacing: 1.5px;
  font-weight: 900;
  margin-bottom: 3px
}

.rule-field p {
  margin: 0
}

.rule-free {
  margin: 0
}

.cards-grid .tech-card.is-hidden {
  display: none
}

.card-empty {
  color: #aa8aa5;
  font-size: 14px;
  padding: 10px 0
}

.rule-field strong {
  color: #ecdbff
}

.search-modal {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: #02030ad9;
  backdrop-filter: blur(10px);
  padding: 7vh 16px 28px;
  display: none;
  align-items: flex-start;
  justify-content: center
}

.search-modal.open {
  display: flex
}

.search-window {
  width: min(760px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: #141422;
  border: 1px solid #ac87df88;
  border-radius: 16px;
  box-shadow: 0 25px 130px #000d;
  overflow: hidden
}

.search-head {
  display: flex;
  align-items: center;
  padding: 14px;
  gap: 10px;
  border-bottom: 1px solid var(--edge)
}

.search-input {
  background: transparent;
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font-size: 17px;
  color: #f3effb;
  padding: 10px
}

.search-input::placeholder {
  color: #8f8a9f
}

.close-search {
  background: #2a223c;
  border: 1px solid #6a5a88;
  border-radius: 7px;
  color: white;
  padding: 6px 10px
}

.search-results {
  overflow: auto;
  padding: 12px
}

.search-result {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: #ddd5ed;
  padding: 12px;
  border-radius: 8px;
  margin: 1px 0;
  display: block;
  cursor: pointer
}

.search-result:hover,
.search-result:focus-visible {
  border-color: #a47ddf77;
  background: #55416a3f
}

.result-title {
  display: block;
  font-weight: 760;
  font-size: 13px
}

.result-desc {
  display: block;
  font-size: 11px;
  color: #aaa6bf;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 3px
}

.search-help {
  padding: 10px 18px 13px;
  color: #8d849e;
  font-size: 11px;
  border-top: 1px solid var(--edge)
}

.empty-search {
  padding: 42px 20px;
  text-align: center;
  color: #b4a6c9
}

.overlay {
  display: none
}

footer.global {
  padding: 45px 20px 85px;
  text-align: center;
  border-top: 1px solid #674c8157;
  color: #8e83a4;
  font-size: 12px
}

footer.global b {
  color: #d8c3f4
}

body.light {
  --bg: #f5f0f9;
  --bg-deep: #fff;
  --panel: #fff;
  --ink: #21172c;
  --muted: #685e70;
  --edge: #836ba846;
  background: #f8f6fc;
  color: #21172c
}

body.light .layout {
  background: #f9f6fc
}

body.light .reading-shell {
  background: #f9f6fc
}

body.light .prose {
  color: #342e44
}

body.light .chapter-title {
  color: #1b1729
}

body.light .subhead {
  color: #4b2b71
}

body.light .table-shell {
  background: #fff
}

body.light .table-shell td {
  color: #332d40
}

body.light .table-shell tr:nth-child(even) td {
  background: #f2eafa
}

body.light .tech-card {
  background: #fff;
  border-color: #baa5d4
}

body.light .tech-head h3 {
  color: #251a35
}

body.light .rule-field {
  color: #3c334a
}

body.light .stat {
  color: #544468;
  background: #f0e8f7
}

body.light .topbar {
  background: #fbf7f5e8
}

body.light .crumb strong {
  color: #4b3169
}

body.light .filter-strip {
  background: #f1eafa
}

body.light .filter-strip select {
  background: white;
  color: #3c2858
}

body.light .utility {
  color: #543b6c
}

body.light .chapter-end {
  color: #6c5f83
}

body.light .book-notice {
  color: #5f3188 !important
}

@media(max-width:1220px) {
  .cards-grid {
    grid-template-columns: 1fr
  }

  .hero-grid {
    grid-template-columns: 1.1fr .6fr
  }

  .hero-art {
    height: 350px
  }

  .sigil-center {
    width: 170px;
    height: 170px
  }

  .sigil-center b {
    font-size: 60px
  }
}

@media(max-width:960px) {
  :root {
    --sidebar: 0px
  }

  .sidebar {
    width: min(330px, 87vw);
    transform: translateX(-105%);
    transition: transform .22s;
    z-index: 62
  }

  .sidebar.open {
    transform: translateX(0)
  }

  .layout {
    margin-left: 0
  }

  .topbar {
    padding: 0 22px
  }

  .mobile-menu {
    display: inline-flex
  }

  .overlay.show {
    display: block;
    position: fixed;
    inset: 0;
    background: #02020bba;
    z-index: 61
  }

  .brand {
    padding-top: 23px
  }

  .hero {
    min-height: 530px;
    padding: 76px 32px
  }

  .reading-shell {
    padding: 5px clamp(22px, 6vw, 70px) 120px
  }

  .filter-strip {
    padding: 12px 22px
  }
}

@media(max-width:700px) {
  .topbar {
    height: 61px;
    padding: 0 13px;
    gap: 8px
  }

  .crumb {
    font-size: 11px;
    max-width: 140px
  }

  .top-r {
    gap: 3px
  }

  .top-r .search-btn {
    min-width: 39px
  }

  .search-btn span,
  .search-keys {
    display: none
  }

  .utility {
    width: 34px;
    min-width: 34px;
    padding: 5px
  }

  .hero {
    padding: 59px 23px 65px;
    min-height: 680px
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0
  }

  .hero h1 {
    font-size: clamp(65px, 17vw, 105px)
  }

  .hero-copy {
    z-index: 2
  }

  .hero-art {
    height: 220px;
    width: 100%;
    margin-top: 4px;
    opacity: .9
  }

  .sigil-back {
    height: 270px;
    width: 270px;
    object-fit: contain
  }

  .sigil-center {
    width: 125px;
    height: 125px
  }

  .sigil-center b {
    font-size: 45px
  }

  .hero-jp {
    right: -4%;
    font-size: 10px
  }

  .hero-sub {
    margin: 15px 0 15px
  }

  .hero-meta {
    margin: 16px 0
  }

  .hero-cta {
    margin-top: 8px
  }

  .reading-shell {
    padding: 0 20px 95px
  }

  .chapter {
    padding-top: 70px
  }

  .chapter-title {
    font-size: 41px
  }

  .prose {
    font-size: var(--reading-size);
    line-height: 1.8
  }

  .chapter h2.subhead {
    font-size: 22px
  }

  .filter-strip .count {
    margin-left: 0;
    width: 100%
  }

  .filter-strip select {
    max-width: 100%;
    flex: 1
  }

  .cards-grid {
    gap: 13px
  }

  .tech-head h3 {
    font-size: 20px
  }

  .table-shell table {
    font-size: 12px
  }

  .search-modal {
    padding: 12px 9px
  }

  .search-window {
    max-height: 94vh
  }
}

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

@keyframes float {
  from {
    transform: translateY(-7px) rotate(-5deg)
  }

  to {
    transform: translateY(8px) rotate(5deg)
  }
}

/* ============ EDIÇÃO IMPRESSA: CORES DO SITE ============ */
@page {
  size: A4;
  margin: 13mm 14mm 15mm;
  background: #090b15;

  @bottom-left {
    content: "JUJUTSU KAISEN RPG  ·  RODRIGO ARKA";
    color: #a78cc9;
    font-family: Arial, sans-serif;
    font-size: 7pt;
    letter-spacing: .6pt;
  }

  @bottom-right {
    content: counter(page);
    color: #cdaefc;
    font-family: Arial, sans-serif;
    font-size: 8pt;
  }
}

@page: first {
  @bottom-left {
    content: ""
  }

  @bottom-right {
    content: ""
  }
}

@media print {

  html,
  body,
  body.light {
    background: #090b15 !important;
    color: #eff0f8 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  html {
    scroll-behavior: auto !important;
    scroll-padding: 0 !important;
  }

  body,
  body.light {
    --bg: #090b15;
    --bg-deep: #070813;
    --panel: #111423;
    --ink: #eff0f8;
    --muted: #a8a9bd;
    --violet: #a77cff;
    --violet-light: #ceb6ff;
    --scarlet: #f15b71;
    --cyan: #75d7e9;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  body::before {
    display: none !important;
  }

  .sidebar,
  .topbar,
  .filter-strip,
  .progress,
  .search-modal,
  .overlay,
  .chapter-end,
  .hero-cta,
  footer.global,
  .tech-anchor {
    display: none !important;
  }

  .layout,
  body.light .layout {
    margin: 0 !important;
    min-width: 0 !important;
    background: #090b15 !important;
  }

  .reading-shell,
  body.light .reading-shell {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #090b15 !important;
  }

  /* Capa escura, em vez de uma capa branca de economizar tinta. */
  .hero,
  body.light .hero {
    min-height: 0 !important;
    height: 251mm !important;
    box-sizing: border-box !important;
    padding: 25mm 6mm 20mm !important;
    margin: 0 !important;
    color: #f4f1fa !important;
    background: radial-gradient(ellipse at 83% 43%, #512a88 0%, #161329 48%, #0b0b19 86%) !important;
    break-after: page !important;
    page-break-after: always !important;
    overflow: hidden !important;
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: 1.14fr .7fr !important;
    gap: 6mm !important;
    align-items: center !important;
  }

  .hero-copy {
    max-width: none !important;
    position: relative !important;
    z-index: 4 !important;
  }

  .hero h1 {
    font-size: 68px !important;
    line-height: .93 !important;
    letter-spacing: 0 !important;
    color: #f5efff !important;
    text-shadow: 0 6px 24px #000a !important;
    margin: 22px 0 12px !important;
  }

  .hero h1 .rpg {
    color: #f15b71 !important;
  }

  .hero-copy p {
    color: #d6cced !important;
    font-size: 12.5px !important;
    line-height: 1.8 !important;
  }

  .hero-sub {
    color: #d0bde9 !important;
    font-size: 17px !important;
  }

  .eyebrow {
    color: #ceb6ff !important;
    font-size: 9px !important;
    letter-spacing: 1.6px !important;
  }

  .hero-meta {
    gap: 5px !important;
  }

  .hero-meta span {
    color: #e4d5ff !important;
    background: #3d2858 !important;
    border-color: #997ac8 !important;
    font-size: 8px !important;
  }

  .hero-art {
    height: 340px !important;
    width: 100% !important;
    opacity: .95 !important;
    overflow: visible !important;
  }

  .sigil-back {
    width: 240px !important;
    max-width: 240px !important;
    animation: none !important;
    opacity: .8 !important;
  }

  .sigil-center {
    width: 132px !important;
    height: 132px !important;
    transform: rotate(-15deg) !important;
  }

  .sigil-center b {
    font-size: 51px !important;
  }

  .hero-jp {
    color: #b69bdb !important;
    font-size: 10px !important;
  }

  /* Início de cada capítulo com títulos vivos e espaço regular. */
  .chapter,
  body.light .chapter {
    break-before: page !important;
    page-break-before: always !important;
    border: 0 !important;
    padding: 6mm 0 8mm !important;
    margin: 0 !important;
    color: #eff0f8 !important;
    background: #090b15 !important;
  }

  .chapter-kicker {
    color: #bca5dc !important;
    font-size: 9px !important;
  }

  .chapter-line {
    background: #9373bb !important;
  }

  .red-diamond {
    color: #f15b71 !important;
  }

  .chapter-title,
  body.light .chapter-title {
    color: #f3edff !important;
    font-size: 38px !important;
    line-height: 1.08 !important;
    text-shadow: none !important;
    margin: 10px 0 9px !important;
    break-after: avoid !important;
  }

  .chapter-rule {
    background: linear-gradient(90deg, #f15b71, #a77cff) !important;
    width: 96px !important;
    margin-bottom: 12mm !important;
    box-shadow: none !important;
  }

  .subhead,
  body.light .subhead {
    color: #d7c2f7 !important;
    margin: 16px 0 8px !important;
    break-after: avoid !important;
  }

  .chapter h2.subhead {
    font-size: 20px !important;
  }

  .chapter h3.subhead {
    color: #bb99ed !important;
    font-size: 16px !important;
  }

  .chapter h1,
  .chapter h2,
  .chapter h3 {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  .prose,
  body.light .prose {
    font-size: 12.5px !important;
    line-height: 1.66 !important;
    color: #e2dfe9 !important;
    margin: 0 0 9px !important;
    max-width: none !important;
    orphans: 3;
    widows: 3;
  }

  .prose strong,
  body.light .prose strong {
    color: #ffffff !important;
  }

  .prose em {
    color: #e3bae7 !important;
  }

  .example,
  body.light .example {
    background: #172533 !important;
    border-left: 3px solid #75d7e9 !important;
    color: #e0eef7 !important;
  }

  .book-notice,
  body.light .book-notice {
    background: #241a3d !important;
    color: #decfff !important;
    border: 1px solid #7c58aa !important;
  }

  /* Quadros, tabelas e cartas usam a identidade cromática da tela. */
  .table-shell,
  body.light .table-shell {
    overflow: visible !important;
    background: #151627 !important;
    border: 1px solid #78649a !important;
    border-radius: 8px !important;
    margin: 10px 0 15px !important;
    break-inside: auto !important;
  }

  .table-shell table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .table-shell tr {
    break-inside: avoid !important;
  }

  .table-shell th,
  body.light .table-shell th {
    color: #f0e5ff !important;
    background: #3d2b5f !important;
    border-bottom: 1px solid #9572b9 !important;
    padding: 7px 8px !important;
    overflow-wrap: anywhere !important;
  }

  .table-shell td,
  body.light .table-shell td {
    color: #e1dbed !important;
    background: #151627 !important;
    border-bottom: 1px solid #625377 !important;
    padding: 7px 8px !important;
    overflow-wrap: anywhere !important;
  }

  .table-shell tr:nth-child(even) td,
  body.light .table-shell tr:nth-child(even) td {
    background: #201c34 !important;
  }

  .table-shell th:first-child,
  .table-shell td:first-child {
    color: #ffffff !important;
  }

  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 11px 0 16px !important;
    align-items: start !important;
  }

  .cards-grid .tech-card.is-hidden {
    display: flex !important;
  }

  .tech-card,
  body.light .tech-card {
    background: #19192d !important;
    border: 1px solid #7c68a8 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .tech-card:before {
    opacity: 1 !important;
    background: linear-gradient(90deg, #f15b71, #a77cff, #75d7e9) !important;
  }

  .tech-head {
    min-height: 0 !important;
    padding: 10px 13px 7px !important;
  }

  .tech-head h3,
  body.light .tech-head h3 {
    color: #f5efff !important;
    font-size: 17px !important;
    margin: 4px 0 0 !important;
  }

  .tech-id {
    color: #c9a5ff !important;
    font-size: 8px !important;
  }

  .tech-stats {
    padding: 0 12px 9px !important;
    gap: 4px !important;
  }

  .stat,
  body.light .stat {
    color: #e7daf7 !important;
    background: #2c2644 !important;
    border: 1px solid #53446c !important;
    font-size: 9.3px !important;
    padding: 2px 6px !important;
  }

  .stat-level {
    color: #f5deff !important;
    background: #5a3182 !important;
    border-color: #b37ee8 !important;
  }

  .rule-field,
  body.light .rule-field {
    padding: 5px 13px 6px !important;
    font-size: 11.2px !important;
    line-height: 1.48 !important;
    color: #e1dce9 !important;
    border-bottom: 1px solid #4e3c65 !important;
  }

  .field-label {
    color: #cda9ff !important;
    font-size: 8px !important;
    margin-bottom: 2px !important;
  }

  .rule-field strong {
    color: #fff1ff !important;
  }

  .rule-free {
    color: #e1dce9 !important;
  }

  a {
    text-decoration: none !important;
  }
}

/* Apêndice completo de ferramentas: segue as mesmas cores e tipografia do livro. */
.armory-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 30px
}

.armory-overview span {
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 800;
  color: #e7d4fa;
  background: #2a213c;
  border: 1px solid #72518e;
  padding: 8px 10px;
  border-radius: 5px
}

.armory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0 34px
}

.armory-item {
  background: linear-gradient(155deg, #252039, #121728);
  border: 1px solid #8060a4;
  border-radius: 12px;
  padding: 16px 17px 18px;
  min-width: 0;
  overflow-wrap: anywhere;
  break-inside: avoid;
  position: relative
}

.armory-item:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #f15b71, #a77cff)
}

.armory-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  flex-wrap: wrap
}

.armory-id {
  color: #b99bda;
  font-size: 9px;
  letter-spacing: .09em;
  font-weight: 850;
  text-transform: uppercase
}

.armory-grade {
  color: #f3d3e3;
  font-size: 10px;
  border: 1px solid #73566b;
  padding: 4px 7px;
  border-radius: 4px
}

.armory-item h3 {
  color: #f7f0ff;
  font-size: 22px;
  line-height: 1.18;
  margin: 13px 0 7px
}

.armory-role {
  color: #c7b4d8;
  margin: 0 0 14px;
  font-size: 12px
}

.armory-fields {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.armory-fields .rule-field {
  padding: 0 0 8px;
  border-bottom: 1px solid #ffffff12;
  margin: 0
}

.armory-fields .field-label {
  color: #ef9cab;
  font-size: 9px;
  letter-spacing: .09em;
  font-weight: 900
}

.armory-fields .rule-field p {
  color: #e5def2;
  font-size: 13px;
  line-height: 1.5;
  margin: 5px 0 0
}

.iconics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 15px 0 26px
}

.iconic-arm {
  border-left: 3px solid #b86ef0;
  background: #231a38;
  padding: 14px;
  border-radius: 0 8px 8px 0
}

.iconic-arm b {
  color: #efe0ff
}

.iconic-arm p {
  color: #cdbedc;
  line-height: 1.5;
  font-size: 13px;
  margin: 7px 0 0
}

body.light .armory-item,
body.light .iconic-arm {
  background: #222038 !important;
  color: #f0ecf8 !important
}

@media(max-width:780px) {

  .armory-grid,
  .iconics-grid {
    grid-template-columns: 1fr
  }

  .armory-item {
    padding: 15px
  }
}

@media print {
  .armory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important
  }

  .armory-item,
  .iconic-arm {
    background: #211d35 !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    break-inside: avoid !important
  }

  .armory-item {
    padding: 11px !important
  }

  .armory-item h3 {
    font-size: 16px !important
  }

  .armory-fields .rule-field p {
    font-size: 10px !important
  }

  .iconics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .armory-item:before {
    background: linear-gradient(90deg, #f15b71, #a77cff) !important
  }
}

.example {
  border-left: 3px solid #a977f4;
  background: linear-gradient(90deg, rgba(132, 82, 198, .14), rgba(16, 16, 32, .3));
  border-radius: 0 10px 10px 0;
  margin: 12px 0 20px;
  padding: 12px 16px;
  font-size: .93em;
  line-height: 1.68
}

.example strong {
  color: #d3a5ff
}

.tech-placeholder,
.armory-placeholder {
  margin: 12px 0
}

body.light .example {
  background: #f5f0fb;
  color: #30243f
}

@media print {
  .example {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }

  .chapter {
    break-before: page
  }

  .tech-card,
  .armory-item {
    break-inside: avoid
  }
}