@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@400;500;600;700;800&display=swap");
:root {
  --bg: #111512;
  --bg-deep: #0d110f;
  --panel: #191e1a;
  --panel-high: #20261f;
  --border: #343c2e;
  --border-soft: #293028;
  --text: #eae7db;
  --muted: #a6ab9d;
  --gold: #ceb17c;
  --gold-soft: #90794f;
  --green: #9bac88;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: wait;
}
button {
  background: none;
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
p {
  margin: 0 0 16px;
}
h1,
h2,
h3,
h4 {
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 15px;
}
h1,
h2,
h3 {
  font-family: var(--serif);
}
h1 {
  font-size: 52px;
  letter-spacing: -1.3px;
}
h2 {
  font-size: 38px;
  letter-spacing: -0.7px;
}
h3 {
  font-size: 25px;
  letter-spacing: -0.3px;
}
h2 em,
h1 em {
  color: var(--gold);
  font-weight: 400;
}
svg {
  flex-shrink: 0;
  vertical-align: middle;
}
button svg,
a svg {
  transition: transform 0.2s;
}
img {
  max-width: 100%;
  display: block;
}
input,
select,
textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  background: #111612;
  color: var(--text);
  border: 1px solid #46503e;
  border-radius: 4px;
}
input::placeholder,
textarea::placeholder {
  color: #8c9384;
}
textarea {
  resize: vertical;
}
input[type="checkbox"] {
  min-height: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
}
input[type="file"] {
  font-size: 12px;
  padding: 16px;
}
label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  color: #c5c8bb;
}
select {
  color-scheme: dark;
}
input[type="datetime-local"] {
  color-scheme: dark;
}
input[type="number"] {
  appearance: textfield;
}
form h3 {
  margin-bottom: 7px;
}
.eyebrow {
  font: 700 10px/1.5 var(--sans);
  letter-spacing: 2px;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 11px;
}
.row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wrap {
  flex-wrap: wrap;
}
.button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 11px 19px;
  border: 1px solid transparent;
  border-radius: 4px;
  font: 700 11px/1.55 var(--sans);
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}
.button:hover {
  transform: translateY(-1px);
}
.button-primary {
  background: #cbb07c;
  color: #171d16;
  border-color: #cbb07c;
}
.button-primary:hover {
  background: #e1c594;
  border-color: #e1c594;
}
.button-outline {
  background: #1c231db3;
  border-color: #5c614c;
  color: #dfd4b8;
}
.button-outline:hover {
  border-color: var(--gold);
  background: #2b3328;
}
.button-ghost {
  color: var(--muted);
  background: transparent;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 4px;
  min-width: 34px;
  min-height: 34px;
  color: var(--muted);
}
.icon-button:hover {
  background: #30372c;
  color: var(--text);
}
.text-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 0;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
}
.text-link:hover {
  color: #f0d4a0;
}
.text-link:hover svg {
  transform: translateX(3px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--gold);
}
.brand > span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 1.8px;
}
.brand small {
  display: block;
  font: 600 7px/1.5 var(--sans);
  letter-spacing: 1.6px;
  margin-top: 6px;
  color: #9e9f89;
}
.lanterns {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
}
.lanterns span {
  display: block;
  width: 4px;
  height: 7px;
  border-radius: 50%;
  background: #c1a263;
  box-shadow: 0 0 8px #c1a26399;
}
.lanterns span:nth-child(2n) {
  height: 5px;
  opacity: 0.6;
}
.public-nav {
  height: 96px;
  padding: 0 6.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-deep);
  border-bottom: 1px solid #30362a;
}
.public-nav nav {
  display: flex;
  gap: 34px;
  font-size: 11px;
  color: #c4c6b9;
}
.public-nav nav a:hover {
  color: var(--gold);
}
.public-nav .brand > span {
  font-size: 21px;
}
.public-hero {
  height: 700px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid #454732;
}
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -3;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #0c120ded 0%, #11170e9c 35%, #141b110d 70%),
    linear-gradient(0deg, #0e150fff, transparent 50%);
  z-index: -2;
}
.hero-copy {
  padding: 91px 8.2% 0;
}
.hero-copy h1 {
  font-size: 77px;
  line-height: 0.98;
  letter-spacing: -1.3px;
  margin-bottom: 27px;
  max-width: 720px;
}
.hero-copy p:not(.eyebrow) {
  font-size: 13px;
  line-height: 1.9;
  color: #c9cbbb;
  margin-bottom: 29px;
}
.hero-copy .eyebrow {
  font-size: 10px;
  letter-spacing: 2.8px;
  margin-bottom: 25px;
}
.small-line {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.hero-copy .button {
  min-height: 47px;
  padding: 13px 23px;
}
.private-note {
  margin-top: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  color: #a1a794;
}
.hero-bottom {
  position: absolute;
  bottom: 30px;
  left: 6.2%;
  right: 6.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #a9ad97;
}
.hero-bottom a {
  display: flex;
  gap: 10px;
  align-items: center;
}
.intro-section {
  padding: 92px 8.2% 70px;
  max-width: 1550px;
  margin: auto;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  margin: 29px 0 44px;
}
.intro-grid h2 {
  font-size: 46px;
  line-height: 1.08;
}
.intro-grid p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.85;
}
.table-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  padding-top: 35px;
  gap: 35px;
}
.table-principles > div {
  display: flex;
  gap: 17px;
  align-items: center;
}
.table-principles svg {
  color: var(--gold);
  stroke-width: 1.2;
}
.table-principles span {
  font-family: var(--serif);
  font-size: 21px;
}
.table-principles small {
  display: block;
  font: 11px var(--sans);
  color: var(--muted);
  margin-top: 8px;
}
.public-campaign {
  padding: 35px 8.2% 80px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 65px;
  align-items: center;
  max-width: 1550px;
  margin: auto;
}
.campaign-illustration {
  position: relative;
  height: 350px;
  overflow: hidden;
  border: 1px solid #414d36;
  padding: 8px;
}
.campaign-illustration img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.art-caption {
  position: absolute;
  bottom: 20px;
  left: 24px;
  font-size: 8px;
  letter-spacing: 2px;
  text-shadow: 0 1px 4px black;
  color: #e2d4b6;
}
.public-campaign h2 {
  font-size: 52px;
}
.public-campaign p:not(.eyebrow) {
  max-width: 390px;
  color: var(--muted);
  line-height: 1.85;
}
.closing {
  text-align: center;
  padding: 66px 20px 80px;
  background: radial-gradient(ellipse at top, #292d1f, transparent 75%);
  border-top: 1px solid var(--border);
}
.closing .lanterns {
  margin-bottom: 27px;
}
.closing .eyebrow {
  justify-content: center;
  font-size: 9px;
}
.closing h2 {
  font-size: 43px;
  margin-bottom: 30px;
}
.public-footer {
  border-top: 1px solid var(--border);
  padding: 32px 6.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.public-footer p,
.public-footer > a {
  color: var(--muted);
  font-size: 10px;
  margin: 0;
}
.public-footer .brand > span {
  font-size: 15px;
}
.public-footer .brand svg {
  width: 28px;
}
.privacy-copy {
  max-width: 820px;
  padding: 70px 30px 110px;
  margin: auto;
}
.privacy-copy h1 {
  font-size: 55px;
  margin-bottom: 30px;
}
.privacy-copy h2 {
  font-size: 29px;
  margin-top: 34px;
}
.privacy-copy p {
  color: #bac0af;
  line-height: 1.9;
  font-size: 14px;
}
.app-shell {
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 232px;
  background: #101611;
  border-right: 1px solid #2c3629;
  display: flex;
  flex-direction: column;
  padding: 32px 21px 0;
  z-index: 25;
}
.sidebar > .brand {
  gap: 9px;
}
.sidebar > .brand svg {
  width: 30px;
}
.sidebar > .brand > span {
  font-size: 14px;
  letter-spacing: 1.15px;
  white-space: nowrap;
}
.sidebar > .brand small {
  font-size: 6px;
  letter-spacing: 1px;
}
.campaign-select {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 10px;
  margin: 32px 0 23px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.campaign-select small {
  display: block;
  font-size: 7px;
  letter-spacing: 1.2px;
  color: var(--muted);
}
.campaign-select strong {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
}
.campaign-select > svg:last-child {
  margin-left: auto;
  color: var(--muted);
}
.campaign-symbol {
  width: 31px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #49523a;
  color: var(--gold);
  border-radius: 30px 30px 3px 3px;
}
.nav-label {
  font-size: 8px;
  letter-spacing: 1.7px;
  color: #84907b;
  margin: 0 11px 12px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sidebar nav a,
.admin-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 43px;
  padding: 11px 13px;
  border-radius: 4px;
  color: #aeb6a3;
  font-size: 11px;
  border: 1px solid transparent;
}
.sidebar nav a:hover,
.admin-link:hover {
  background: #1f2a1f;
  color: #e5dec9;
}
.sidebar nav a.active,
.admin-link.active {
  border-color: #4a4e35;
  background: linear-gradient(90deg, #333822, #232c20);
  color: #dbc58f;
}
.sidebar nav a.active svg {
  color: #ddc68b;
}
.nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #aab38a;
  margin-left: auto;
}
.sidebar-bottom {
  margin-top: auto;
}
.five-note {
  text-align: center;
  margin: 34px 0 26px;
}
.five-note p {
  font: italic 18px/1.4 var(--serif);
  color: #c0b78f;
  margin: 13px 0 0;
}
.five-note span {
  font-size: 14px;
  color: #7d8977;
}
.admin-link {
  margin-bottom: 10px;
}
.profile {
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 77px;
}
.profile > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.profile strong {
  display: block;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 115px;
}
.profile small {
  display: block;
  font-size: 8px;
  color: var(--muted);
  margin-top: 3px;
}
.profile > svg {
  color: #78856d;
}
.avatar {
  width: 29px;
  height: 29px;
  border: 1px solid #555b3d;
  background: #303a27;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold);
  font: 18px var(--serif);
}
.app-main {
  margin-left: 232px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topbar {
  height: 71px;
  padding: 0 41px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #121813;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #7f8c77;
}
.breadcrumb b {
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #c2c7b5;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 17px;
}
.quiet-status {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: #a7af9b;
}
.quiet-status > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9aaa82;
  box-shadow: 0 0 7px #9aaa8240;
}
.main-content {
  padding: 35px 41px 45px;
  width: 100%;
  max-width: 1550px;
  margin: 0 auto;
  flex: 1;
}
.page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.page-title .eyebrow {
  font-size: 8px;
  letter-spacing: 2.2px;
  margin-bottom: 9px;
  color: #b7a77b;
}
.page-title h1 {
  font-size: 43px;
  line-height: 1.1;
  letter-spacing: -0.65px;
  margin-bottom: 7px;
}
.page-title p:last-child {
  font-size: 11px;
  margin-bottom: 0;
}
.chapter-marker {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 8px;
  color: #a8ad96;
  letter-spacing: 1.1px;
  padding-top: 30px;
}
.campaign-banner {
  height: 320px;
  position: relative;
  isolation: isolate;
  border: 1px solid #4c543b;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 24px;
}
.campaign-banner > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -3;
}
.banner-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #142119f2, #122017ad 40%, #1322150a 78%),
    linear-gradient(0deg, #0e190e6e, transparent 65%);
  z-index: -2;
}
.banner-content {
  padding: 36px 37px;
}
.banner-content .eyebrow {
  font-size: 8px;
  letter-spacing: 2.6px;
  margin-bottom: 13px;
}
.banner-content h2 {
  font-size: 48px;
  line-height: 0.98;
  margin-bottom: 16px;
}
.banner-content p:not(.eyebrow) {
  font-size: 11px;
  color: #c1c8b6;
  margin-bottom: 23px;
  max-width: 340px;
}
.banner-content .button {
  min-height: 38px;
  font-size: 10px;
  padding: 9px 16px;
}
.banner-caption {
  position: absolute;
  right: 26px;
  bottom: 21px;
  letter-spacing: 2px;
  font-size: 7px;
  color: #d5ceb6;
}
.banner-sigil {
  position: absolute;
  right: 28px;
  top: 25px;
  opacity: 0.7;
  color: #d3bb84;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 23px;
}
.dashboard-primary {
  min-width: 0;
}
.panel {
  background: linear-gradient(120deg, #1d241d, #181f19);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 23px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 19px;
}
.section-heading h3,
.section-heading .eyebrow {
  margin: 0;
}
.section-heading .eyebrow {
  font-size: 8px;
  letter-spacing: 1.7px;
}
.section-heading h3 {
  font-size: 23px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #4a523b;
  background: #28302270;
  border-radius: 3px;
  color: #c1c5a2;
  padding: 3px 8px;
  font-size: 8px;
  letter-spacing: 0.35px;
  white-space: nowrap;
  text-transform: capitalize;
}
.next-session h3 {
  font-size: 27px;
  margin: 0 0 11px;
}
.session-date {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 11px;
  color: #d0c6a7;
  margin-bottom: 13px;
}
.next-session .muted {
  font-size: 11px;
  line-height: 1.8;
  max-width: 550px;
}
.next-session .row {
  margin-top: 23px;
}
.next-session .button {
  font-size: 10px;
  padding: 9px 14px;
  min-height: 37px;
}
.next-session .text-link {
  font-size: 10px;
}
.chronicle-preview {
  margin-top: 25px;
}
.chronicle-preview > .section-heading {
  margin-bottom: 13px;
}
.chronicle-preview h3 {
  font-size: 24px;
}
.chronicle-row {
  width: 100%;
  display: flex;
  text-align: left;
  gap: 18px;
  align-items: center;
  border-top: 1px solid #313c2d;
  padding: 18px 0;
}
.chronicle-row > span:nth-child(2) {
  flex: 1;
}
.episode-num {
  font: 29px var(--serif);
  color: #baac81;
  min-width: 32px;
}
.chronicle-row small {
  font-size: 7px;
  letter-spacing: 1.8px;
  color: #949e86;
  display: block;
  margin-bottom: 3px;
}
.chronicle-row strong {
  font: 500 21px var(--serif);
  display: block;
}
.chronicle-row p {
  font-size: 10px;
  color: #98a48f;
  margin: 4px 0 0;
}
.chronicle-row > svg {
  color: #b09f73;
}
.chronicle-row:hover strong {
  color: var(--gold);
}
.quick-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.quick-links > button {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  background: #1a231a;
  border: 1px solid var(--border);
  padding: 17px 14px;
  border-radius: 4px;
}
.quick-links > button > svg {
  color: #bba779;
}
.quick-links > button > svg:last-child {
  margin-left: auto;
  width: 13px;
}
.quick-links h3 {
  font-size: 18px;
  margin: 0 0 5px;
}
.quick-links p {
  font-size: 8px;
  color: var(--muted);
  margin: 0;
}
.character-card {
  align-self: start;
  padding: 21px;
}
.character-card > .section-heading {
  color: var(--gold);
  margin-bottom: 22px;
}
.character-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.character-identity h2 {
  font-size: 33px;
  margin-bottom: 5px;
  line-height: 0.9;
}
.character-identity p {
  font-size: 9px;
  color: #c4c7b6;
  margin: 0 0 1px;
}
.character-identity small {
  font-size: 8px;
  color: #8f9d84;
}
.character-emblem {
  height: 64px;
  width: 64px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid #727247;
  background: radial-gradient(ellipse at bottom, #9e663849, #121b11);
  border-radius: 42% 42% 8% 8%;
  color: #d0a767;
  position: relative;
}
.character-emblem:after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid #8a805641;
  border-radius: inherit;
}
.character-emblem svg {
  stroke-width: 1.1;
  filter: drop-shadow(0 0 5px #c8945370);
}
.hp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hp-top > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: #b7c0a7;
}
.hp-top > b {
  font: 500 23px var(--serif);
  color: #d4dbc5;
}
.hp-top small {
  font: 12px var(--sans);
  color: #8f9d82;
}
.hp-bar {
  height: 5px;
  background: #333b2b;
  border-radius: 9px;
  overflow: hidden;
}
.hp-bar > span {
  display: block;
  background: linear-gradient(90deg, #829766, #abb886);
  height: 100%;
  transition: width 0.2s;
}
.health-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px -7px 10px;
}
.health-controls span {
  font-size: 7px;
  color: #8f9b81;
}
.health-controls .icon-button {
  min-height: 25px;
  min-width: 25px;
  padding: 5px;
}
.stat-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  border-top: 1px solid #343f2d;
  border-bottom: 1px solid #343f2d;
  padding: 16px 0 18px;
  gap: 4px;
  margin-bottom: 23px;
}
.stat-trio > div + div {
  border-left: 1px solid #343f2d;
}
.stat-trio strong {
  display: block;
  font: 500 28px var(--serif);
  color: #e1d8b8;
  line-height: 1.2;
}
.stat-trio small {
  display: block;
  font-size: 6px;
  letter-spacing: 0.85px;
  color: #a4af94;
  margin-top: 4px;
}
.resources > .eyebrow {
  font-size: 8px;
  letter-spacing: 1.4px;
  margin-bottom: 16px;
}
.resource {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  font-size: 10px;
  color: #b4bea7;
}
.resource > div {
  display: flex;
  gap: 8px;
}
.resource-pip {
  padding: 0;
  width: 11px;
  height: 11px;
  border: 1px solid #697048;
  border-radius: 2px;
  transform: rotate(45deg);
  background: transparent;
  position: relative;
}
.resource-pip:after {
  content: "";
  position: absolute;
  inset: -5px;
}
.resource-pip.filled {
  background: #c5b375;
  border-color: #c5b375;
  box-shadow: 0 0 7px #c4b27520;
}
.resource-pip:hover {
  border-color: #eed995;
}
.character-link {
  border-top: 1px solid #35402f;
  margin-top: 21px;
  padding-top: 17px;
  width: 100%;
  justify-content: space-between;
  font-size: 10px;
}
.remote-note {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 21px;
  border-top: 1px solid var(--border);
  padding: 25px 0 0;
  margin-top: 3px;
}
.remote-icon {
  width: 46px;
  height: 46px;
  border: 1px solid #3d4a32;
  display: grid;
  place-items: center;
  color: #c2ad7d;
  border-radius: 50%;
}
.remote-note .eyebrow {
  font-size: 7px;
  margin-bottom: 4px;
}
.remote-note h3 {
  font-size: 21px;
  margin-bottom: 5px;
}
.remote-note p {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}
.remote-note > .text-link {
  font-size: 10px;
  margin-left: auto;
  white-space: nowrap;
}
.app-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-soft);
  padding: 23px 41px;
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #85917a;
}
.app-footer a {
  font-size: 9px;
  letter-spacing: 0;
  color: #afb599;
}
.dot-separator {
  margin: 0 10px;
  color: var(--gold);
}
.floating-dice {
  position: fixed;
  bottom: 19px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 19px;
  border: 1px solid #796f47;
  border-radius: 5px;
  background: #272e20;
  box-shadow: 0 7px 30px #0005;
  color: #e0c992;
  font-size: 11px;
  z-index: 29;
}
.floating-dice:hover {
  background: #39412d;
}
.session-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 13px 19px;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 20px;
  gap: 10px;
}
.session-strip b {
  color: #d8d9c6;
  font-weight: 500;
}
.cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 287px;
  gap: 20px;
}
.session-stage {
  padding: 0;
  overflow: hidden;
}
.stage-tabs {
  display: flex;
  gap: 12px;
  padding: 0 21px;
  background: #1c251c;
  border-bottom: 1px solid var(--border);
}
.stage-tabs button {
  padding: 15px 4px;
  font-size: 10px;
  border-bottom: 2px solid transparent;
  color: #a9b599;
}
.stage-tabs button[aria-pressed="true"] {
  color: #e0c68a;
  border-color: #cbb478;
}
.scene-art {
  height: 329px;
  position: relative;
  isolation: isolate;
}
.scene-art > img {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene-art:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, #0f1a11fa, transparent 140%);
}
.scene-art > div {
  position: absolute;
  bottom: 28px;
  left: 26px;
  right: 20px;
}
.scene-art h2 {
  font-size: 37px;
  margin-bottom: 11px;
}
.scene-art p:not(.eyebrow) {
  font-size: 11px;
  color: #bec6af;
}
.scene-art .eyebrow {
  font-size: 8px;
  margin-bottom: 10px;
}
.scene-art .button {
  font-size: 10px;
  min-height: 36px;
  padding: 8px 15px;
}
.stage-notes {
  padding: 30px;
  min-height: 329px;
}
.stage-notes p {
  font-size: 12px;
}
.action-compendium {
  margin: 26px 0;
  padding: clamp(20px, 3vw, 30px);
}
.compendium-heading,
.compendium-entry-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.compendium-heading .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.compendium-heading h2 {
  margin: 0;
  font-size: clamp(27px, 3vw, 35px);
}
.compendium-heading > .pill {
  margin-top: 4px;
  white-space: nowrap;
}
.compendium-intro {
  max-width: 62ch;
  margin: 16px 0 24px;
  font-size: 13px;
  line-height: 1.8;
}
.compendium-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.compendium-entry {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid #3b4633;
  border-radius: 5px;
  background: linear-gradient(145deg, #25302566, #151e1655);
}
.compendium-entry h3 {
  margin: 0;
  font-size: 23px;
  line-height: 1.2;
  color: #e3dfcb;
  overflow-wrap: anywhere;
}
.compendium-translation {
  margin: 7px 0 0;
  font-size: 11px;
  color: #b9b699;
}
.compendium-kind {
  display: inline-block;
  padding: 4px 7px;
  border: 1px solid #605c40;
  border-radius: 3px;
  color: #d9c794;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.compendium-description {
  margin: 15px 0 20px;
  font-size: 12px;
  line-height: 1.8;
  color: #c1c7b4;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.compendium-formulas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid #384431;
}
.compendium-formulas dt {
  font-size: 10px;
  color: #aab69c;
  margin-bottom: 5px;
}
.compendium-formulas dd {
  margin: 0;
}
.compendium-formulas code {
  font-size: 14px;
  color: #e1cd93;
  overflow-wrap: anywhere;
}
.compendium-no-formula {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid #384431;
  color: #aab69c;
  font-size: 10px;
}
.quick-actions {
  margin-top: 25px;
  border-top: 1px solid #34402e;
  padding-top: 20px;
}
.quick-actions .eyebrow {
  font-size: 8px;
  margin-bottom: 12px;
}
.quick-action {
  display: flex;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 0;
  border-bottom: 1px solid #303b2a;
}
.quick-action strong {
  font-size: 11px;
  font-weight: 600;
  display: block;
  color: #d8d7c3;
}
.quick-action small {
  font-size: 8px;
  color: #97a389;
  display: block;
  margin-top: 4px;
}
.quick-action svg {
  color: #b9a46d;
}
.damage-action {
  font-size: 8px;
  color: #c3b580;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 7px;
}
.quick-actions > .muted {
  font-size: 9px;
  margin-top: 15px;
  margin-bottom: 0;
}
.dice-tray {
  margin-top: 20px;
  padding: 22px;
}
.dice-tray .section-heading {
  margin-bottom: 16px;
}
.dice-tray h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
}
.dice-tray h3 svg {
  color: #bca676;
}
.motion-toggle {
  flex-direction: row;
  align-items: center;
  font-size: 8px;
  color: #a8b199;
  gap: 6px;
}
.motion-toggle input {
  width: 12px;
  height: 12px;
}
.dice-picker {
  display: flex;
  gap: 9px;
  margin-bottom: 18px;
}
.dice-picker button {
  background: #182018;
  border: 1px solid #3e4b34;
  border-radius: 4px;
  padding: 9px 5px 7px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #b9bfaa;
}
.dice-picker button:hover,
.dice-picker button.selected {
  background: #353b26;
  border-color: #a99d60;
  color: #decb8e;
}
.die-icon {
  font: 21px var(--serif);
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #67714a;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: #69734420;
  line-height: 1;
}
.dice-picker small {
  font-size: 8px;
  margin-top: 5px;
}
.roll-form {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.2fr;
  gap: 11px;
}
.roll-form > button {
  grid-column: 1/-1;
  justify-self: stretch;
  min-height: 38px;
}
.roll-form label {
  font-size: 8px;
  letter-spacing: 0.3px;
}
.roll-form input,
.roll-form select {
  font-size: 10px;
  min-height: 36px;
  padding: 8px;
}
.dice-tray #notation-hint {
  font-size: 8px;
  margin-top: 10px;
  line-height: 1.7;
  margin-bottom: 12px;
}
.roll-result {
  min-height: 87px;
  border: 1px dashed #555d3c;
  background: #1d281b;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 4px;
}
.result-die {
  min-width: 58px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  font: 600 34px var(--serif);
  background: linear-gradient(130deg, #dac48b, #9d844a);
  color: #162013;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.result-dice-group.animate {
  animation: die-settle 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes die-settle {
  0% {
    transform: rotate(-30deg) scale(0.5);
    opacity: 0;
  }
  70% {
    transform: rotate(5deg) scale(1.05);
  }
  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}
.roll-result .eyebrow {
  font-size: 7px;
  margin: 0 0 5px;
}
.roll-result p {
  margin: 0;
  font-size: 12px;
}
.roll-result small {
  font-size: 8px;
  color: #a9b497;
}
.roll-result > svg {
  margin-left: auto;
  color: #a8b588;
}
.roll-placeholder {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  width: 100%;
  color: #9aab89;
  font-family: var(--serif);
  font-size: 20px;
}
.history-heading {
  margin-top: 22px;
}
.history-heading .small {
  font-size: 8px;
}
.roll-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #34422d;
  padding: 10px 0;
}
.roll-total {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #2e3724;
  border: 1px solid #485536;
  border-radius: 4px;
  color: #d4c38a;
  font: 22px var(--serif);
}
.roll-row strong {
  font-size: 10px;
  display: block;
  font-weight: 500;
}
.roll-row small {
  display: block;
  font-size: 8px;
  color: #9da98d;
}
.roll-row time {
  margin-left: auto;
  font-size: 8px;
  color: #9da98d;
}
.dice-drawer {
  position: fixed;
  right: 26px;
  bottom: 76px;
  width: min(560px, calc(100vw - 30px));
  max-height: calc(100vh - 110px);
  overflow: auto;
  border: 1px solid #6f7048;
  background: #131c13;
  box-shadow: 0 12px 90px #000b;
  border-radius: 7px;
  padding: 19px;
  z-index: 35;
}
.dice-drawer > .section-heading {
  margin-bottom: 0;
}
.dice-drawer .dice-tray {
  margin-top: 10px;
}
.character-layout {
  display: grid;
  grid-template-columns: 315px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.lore-hero {
  position: relative;
  min-height: 310px;
  background:
    radial-gradient(ellipse at top right, #51492970, transparent 65%),
    linear-gradient(125deg, #1e2b20, #161e15);
  padding: 39px;
}
.lore-hero h2 {
  font-size: 52px;
}
.lore-hero p:not(.eyebrow) {
  color: #adb698;
  font-size: 11px;
}
.lore-hero .lanterns {
  justify-content: flex-start;
  margin-top: 25px;
}
.large-sigil {
  position: absolute;
  right: 34px;
  top: 48px;
  color: #93875455;
}
.lore-section {
  padding: 33px 5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 25px;
}
.lore-section .eyebrow {
  font-size: 8px;
}
.lore-section h3 {
  font-size: 31px;
}
.lore-section p:last-child {
  color: #afb9a2;
  font-size: 13px;
  line-height: 1.9;
}
.chronicle-list {
  display: flex;
  flex-direction: column;
  gap: 23px;
}
.episode {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 30px;
  padding: 28px;
}
.episode-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--gold);
  border-right: 1px solid #455037;
  padding-right: 25px;
  gap: 22px;
}
.episode-spine > span {
  font: 55px var(--serif);
  line-height: 1;
}
.episode .section-heading {
  margin-bottom: 14px;
}
.episode h2 {
  font-size: 32px;
}
.episode p {
  color: #aebba0;
  font-size: 12px;
  line-height: 1.9;
}
.episode summary {
  cursor: pointer;
  color: var(--gold);
  padding: 12px 0;
}
.quiet-callout {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 24px 10px;
  color: #abb598;
}
.quiet-callout p {
  margin: 0;
  font-size: 11px;
}
.quiet-callout > svg {
  color: #bdac78;
}
.collection-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 22px;
}
.search {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  width: min(370px, 80%);
}
.search svg {
  position: absolute;
  left: 12px;
  color: #9aa589;
}
.search input {
  padding-left: 39px;
  background: #192219;
  border-color: #3d4a33;
  font-size: 11px;
}
.collection-tools > .muted {
  font-size: 10px;
}
.empty {
  padding: 74px 22px;
  text-align: center;
  border: 1px dashed #435039;
  border-radius: 5px;
  background: #19231855;
  color: #aab999;
}
.empty > svg {
  color: #bfab73;
  margin-bottom: 20px;
  stroke-width: 1.2;
}
.empty h3 {
  color: #d6d8c4;
  font-size: 28px;
  margin-bottom: 14px;
}
.empty p {
  max-width: 440px;
  margin: 0 auto 19px;
  font-size: 12px;
  line-height: 1.9;
}
.empty .button {
  margin-top: 15px;
}
.session-stage .empty {
  border: 0;
  padding: 80px 20px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery-item {
  padding: 0;
  position: relative;
  border: 1px solid #415135;
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
  background: #1a251b;
}
.gallery-item img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.gallery-item > span {
  display: block;
  padding: 17px;
}
.gallery-item strong {
  display: block;
  font: 23px var(--serif);
}
.gallery-item small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
}
.gallery-item > svg {
  position: absolute;
  right: 15px;
  bottom: 18px;
  color: var(--gold);
}
.document-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.document-item {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
}
.document-item > svg {
  color: var(--gold);
}
.document-item > svg:last-child {
  margin-left: auto;
}
.document-item strong {
  font: 23px var(--serif);
  display: block;
}
.document-item small {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-top: 7px;
}
.session-archive {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 25px;
  margin-bottom: 20px;
}
.calendar-block {
  height: 95px;
  border: 1px solid #596345;
  background: #2c3826;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  color: #ceb884;
  border-radius: 4px;
}
.calendar-block small {
  font-size: 10px;
  letter-spacing: 2px;
}
.session-archive h2 {
  font-size: 31px;
}
.session-archive p {
  font-size: 12px;
  color: #abb99d;
}
.session-archive .small {
  display: flex;
  align-items: center;
  gap: 9px;
}
.recording-note {
  border-top: 1px solid #3b472f;
  padding-top: 15px;
  margin-top: 23px;
  margin-bottom: 0;
  font-size: 9px !important;
}
.market-banner {
  display: flex;
  align-items: center;
  gap: 29px;
  padding: 32px;
  margin-bottom: 27px;
  border-top: 1px solid #586043;
  border-bottom: 1px solid #3f4b32;
  background: radial-gradient(ellipse at left, #3d422550, transparent 80%);
}
.market-banner > svg {
  color: #b9a367;
  stroke-width: 1;
}
.market-banner h2 {
  font-size: 31px;
}
.market-banner .eyebrow {
  font-size: 8px;
  margin-bottom: 8px;
}
.market-banner p:last-child {
  font-size: 11px;
  color: #aebb9d;
  margin: 0;
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.market-grid h3 {
  margin-top: 20px;
}
.market-grid p {
  font-size: 11px;
  color: #aab998;
}
.market-price {
  border-top: 1px solid var(--border);
  padding-top: 15px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 26px;
}
.market-price > span {
  display: block;
  color: #8f9c7e;
  font: 9px var(--sans);
  margin-top: 8px;
}
.admin-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 25px;
  overflow: auto;
}
.admin-tabs button {
  padding: 13px 18px;
  white-space: nowrap;
  font-size: 11px;
  border-bottom: 2px solid transparent;
  color: #a9b79b;
}
.admin-tabs button[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--gold);
}
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.admin-form > .muted {
  font-size: 11px;
  margin: 0;
}
.admin-form .button {
  align-self: flex-start;
  margin-top: 4px;
}
.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.checkbox-label {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}
.library-form {
  max-width: 680px;
}
.character-editor {
  max-width: 780px;
}
.access-panel {
  max-width: 780px;
  padding: 35px;
}
.access-panel > svg {
  color: var(--gold);
  margin-bottom: 22px;
}
.access-panel h3 {
  margin-top: 30px;
}
.access-panel p {
  font-size: 13px;
  line-height: 1.8;
}
.ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.ledger-row small {
  display: block;
  color: var(--gold);
  font-size: 10px;
}
.ledger-row + .muted {
  margin-top: 20px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #070c08ce;
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  z-index: 60;
}
.modal {
  background: #1b251b;
  border: 1px solid #656c48;
  border-radius: 7px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow: auto;
  padding: 30px;
  box-shadow: 0 40px 120px #0008;
}
.modal h2 {
  font-size: 35px;
}
.modal .eyebrow {
  font-size: 8px;
}
.modal > .muted {
  font-size: 12px;
  line-height: 1.85;
}
.modal .section-heading {
  margin-bottom: 16px;
}
.setup-steps {
  padding: 0 0 0 28px;
  margin: 25px 0 28px;
  counter-reset: step;
}
.setup-steps li {
  padding-left: 9px;
  margin-bottom: 20px;
  color: #d0c08c;
}
.setup-steps b {
  font-size: 12px;
  color: #d7ddc6;
  font-weight: 600;
}
.setup-steps p {
  font-size: 11px;
  color: #adbca0;
  margin: 6px 0 0;
}
.camera-preview {
  width: 100%;
  min-height: 100px;
  border-radius: 4px;
  background: #0d140f;
}
.mic-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid #626b45;
  border-radius: 5px;
  background: #0c160f;
}
.mic-meter > * {
  background: var(--gold);
  height: 100%;
  display: block;
}
.error {
  color: #f0b6a0;
  background: #59312845;
  border: 1px solid #7f5141;
  border-radius: 4px;
  padding: 12px 15px;
  font-size: 11px;
}
.toast {
  position: fixed;
  bottom: 23px;
  left: 50%;
  transform: translateX(-50%);
  background: #35402a;
  color: #f0ebd8;
  border: 1px solid #7d8155;
  box-shadow: 0 8px 35px #0007;
  border-radius: 5px;
  padding: 13px 12px 13px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 11px;
  max-width: 90vw;
  z-index: 90;
}
.media-modal {
  max-width: 1050px;
}
.lightbox-image {
  margin: 0 auto;
  max-height: 67vh;
  object-fit: contain;
}
.pdf-frame {
  width: 100%;
  height: 65vh;
  border: 0;
  background: #e9e3d1;
}
.media-modal > .muted {
  margin-top: 15px;
}
.loading-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  background: radial-gradient(ellipse at center, #2b3724, transparent 65%);
}
.loading-screen > .brand {
  margin-bottom: 50px;
}
.loading-screen > .lanterns {
  margin-bottom: 30px;
}
.loading-screen h1 {
  font-size: 40px;
}
.loading-screen > p {
  color: var(--muted);
  max-width: 500px;
}
.loading-screen > .text-link {
  margin-top: 35px;
}
.mobile-menu,
.mobile-menu-close {
  display: none;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  background: var(--gold);
  padding: 12px;
  color: #111;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
}
.nav-scrim {
  display: none;
}
@media (min-width: 1600px) {
  .hero-copy {
    padding-top: 115px;
  }
  .public-hero {
    height: 770px;
  }
  .hero-copy h1 {
    font-size: 89px;
  }
  .hero-copy p:not(.eyebrow) {
    font-size: 15px;
  }
  .campaign-banner {
    height: 360px;
  }
  .banner-content {
    padding: 42px;
  }
  .banner-content h2 {
    font-size: 56px;
  }
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
  .sidebar {
    width: 250px;
    padding-left: 25px;
    padding-right: 25px;
  }
  .app-main {
    margin-left: 250px;
  }
  .sidebar > .brand > span {
    font-size: 16px;
  }
  .sidebar nav a {
    font-size: 12px;
  }
  .main-content {
    padding: 40px 52px;
  }
  .topbar {
    padding: 0 52px;
  }
  .next-session h3 {
    font-size: 30px;
  }
  .next-session .muted {
    font-size: 12px;
  }
  .quick-links h3 {
    font-size: 20px;
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 208px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .sidebar > .brand > span {
    font-size: 13px;
  }
  .sidebar > .brand svg {
    width: 26px;
  }
  .app-main {
    margin-left: 208px;
  }
  .main-content {
    padding: 29px 27px;
  }
  .topbar {
    padding: 0 27px;
  }
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 265px;
    gap: 18px;
  }
  .panel {
    padding: 19px;
  }
  .quick-links {
    grid-template-columns: 1fr;
  }
  .chapter-marker {
    display: none;
  }
  .cockpit {
    grid-template-columns: minmax(0, 1fr) 265px;
    gap: 16px;
  }
  .roll-form {
    grid-template-columns: 1fr 1fr;
  }
  .roll-form > label:nth-child(3) {
    grid-column: 1/-1;
  }
  .remote-note > .text-link {
    white-space: normal;
    max-width: 160px;
  }
  .character-layout {
    grid-template-columns: 275px minmax(0, 1fr);
  }
  .scene-art {
    height: 305px;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 960px) {
  .public-nav {
    padding: 0 5%;
    height: 82px;
  }
  .public-nav nav {
    display: none;
  }
  .public-hero {
    height: 650px;
  }
  .hero-copy {
    padding: 84px 7% 0;
  }
  .hero-copy h1 {
    font-size: 67px;
  }
  .intro-section {
    padding: 60px 7%;
  }
  .intro-grid {
    gap: 35px;
  }
  .intro-grid h2 {
    font-size: 39px;
  }
  .table-principles {
    gap: 20px;
  }
  .table-principles > div {
    align-items: flex-start;
  }
  .table-principles span {
    font-size: 18px;
  }
  .table-principles small {
    font-size: 10px;
    line-height: 1.7;
  }
  .public-campaign {
    padding: 20px 7% 60px;
    gap: 35px;
  }
  .campaign-illustration {
    height: 320px;
  }
  .public-campaign h2 {
    font-size: 45px;
  }
  .sidebar {
    width: 190px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .sidebar > .brand > span {
    font-size: 12px;
    letter-spacing: 0.6px;
  }
  .sidebar > .brand small {
    font-size: 5px;
  }
  .sidebar nav a {
    font-size: 10px;
    padding: 10px;
    gap: 10px;
  }
  .app-main {
    margin-left: 190px;
  }
  .main-content {
    padding: 26px 22px;
  }
  .topbar {
    padding: 0 22px;
    height: 63px;
  }
  .page-title h1 {
    font-size: 37px;
  }
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 235px;
    gap: 15px;
  }
  .character-card {
    padding: 16px;
  }
  .character-emblem {
    width: 51px;
    height: 58px;
  }
  .character-identity {
    gap: 10px;
  }
  .character-identity h2 {
    font-size: 29px;
  }
  .resource {
    font-size: 9px;
  }
  .resource > div {
    gap: 7px;
  }
  .resource-pip {
    width: 9px;
    height: 9px;
  }
  .next-session > .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .next-session > .row {
    gap: 15px;
  }
  .campaign-banner {
    height: 305px;
  }
  .banner-content {
    padding: 30px;
  }
  .banner-content h2 {
    font-size: 44px;
  }
  .remote-note {
    gap: 14px;
  }
  .remote-icon {
    display: none;
  }
  .cockpit {
    grid-template-columns: 1fr;
  }
  .cockpit > .character-card {
    display: none;
  }
  .session-page:after {
    content: "Character resources are available from the Character tab.";
    display: block;
    color: var(--muted);
    font-size: 10px;
    padding-top: 20px;
  }
  .roll-form {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .roll-form > label:nth-child(3) {
    grid-column: auto;
  }
  .character-layout {
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 20px;
  }
  .lore-hero {
    padding: 27px;
  }
  .lore-hero h2 {
    font-size: 44px;
  }
  .large-sigil {
    right: 15px;
    top: 20px;
  }
  .large-sigil svg {
    width: 55px;
  }
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .document-grid {
    grid-template-columns: 1fr;
  }
  .market-grid {
    grid-template-columns: 1fr 1fr;
  }
  .app-footer {
    padding: 20px 22px;
  }
  .five-note {
    margin-top: 25px;
  }
  .privacy-copy {
    padding-top: 50px;
  }
}
@media (max-width: 760px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 240px;
    padding: 27px 20px 0;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  .sidebar > .brand > span {
    font-size: 14px;
  }
  .sidebar > .brand small {
    font-size: 6px;
  }
  .sidebar nav a {
    font-size: 12px;
    padding: 10px 13px;
  }
  .sidebar > .brand svg {
    width: 33px;
  }
  .sidebar .campaign-select {
    margin-top: 28px;
  }
  .mobile-menu-close {
    display: flex;
    position: absolute;
    right: 5px;
    top: 2px;
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: #0008;
    z-index: 24;
  }
  .app-main {
    margin-left: 0;
  }
  .mobile-menu {
    display: flex;
  }
  .main-content {
    padding: 26px 22px 80px;
  }
  .topbar {
    height: 62px;
    padding: 0 17px;
  }
  .breadcrumb {
    font-size: 7px;
    gap: 8px;
  }
  .topbar .row {
    gap: 5px;
  }
  .top-actions {
    gap: 7px;
  }
  .quiet-status {
    font-size: 7px;
    letter-spacing: 0.5px;
  }
  .page-title {
    margin-bottom: 24px;
  }
  .page-title h1 {
    font-size: 37px;
  }
  .page-title .eyebrow {
    font-size: 7px;
  }
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
  }
  .next-session > .section-heading {
    flex-direction: row;
  }
  .remote-note > .text-link {
    max-width: 130px;
  }
  .quick-links {
    grid-template-columns: 1fr;
  }
  .app-footer {
    padding-bottom: 78px;
  }
  .session-page .page-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .session-page .page-title > .row {
    gap: 9px;
  }
  .session-page .page-title .button {
    font-size: 10px;
    padding: 9px 13px;
  }
  .character-layout {
    grid-template-columns: 265px minmax(0, 1fr);
  }
  .character-card {
    padding: 20px;
  }
  .character-identity h2 {
    font-size: 31px;
  }
  .resource {
    font-size: 10px;
  }
  .character-layout .lore-hero {
    min-height: 280px;
  }
  .character-layout .lore-hero h2 {
    font-size: 40px;
  }
  .character-layout .large-sigil {
    display: none;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .public-footer {
    flex-wrap: wrap;
    gap: 22px;
  }
  .public-footer p {
    display: none;
  }
  .public-nav .brand > span {
    font-size: 17px;
  }
  .public-nav .brand small {
    font-size: 6px;
  }
  .public-nav .brand svg {
    width: 33px;
  }
  .public-nav .button {
    font-size: 10px;
    padding: 9px 13px;
  }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }
  .intro-grid h2 {
    font-size: 42px;
  }
  .table-principles {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 28px;
  }
  .table-principles > div {
    align-items: center;
  }
  .table-principles span {
    font-size: 23px;
  }
  .table-principles small {
    font-size: 11px;
    line-height: 1.2;
  }
  .public-campaign {
    grid-template-columns: 1fr;
    gap: 31px;
  }
  .public-campaign h2 {
    font-size: 47px;
  }
  .campaign-illustration {
    height: 330px;
  }
  .public-campaign p:not(.eyebrow) {
    max-width: 100%;
  }
  .closing h2 {
    font-size: 35px;
  }
  .hero-bottom > span {
    display: none;
  }
  .hero-bottom .lanterns {
    gap: 12px;
  }
  .hero-copy h1 {
    font-size: 62px;
  }
  .hero-copy p:not(.eyebrow) {
    font-size: 12px;
  }
  .hero-copy {
    padding-top: 84px;
  }
  .hero-art {
    object-position: 62% 50%;
  }
  .hero-shade {
    background:
      linear-gradient(90deg, #0c120eef, #11170e7a 70%),
      linear-gradient(0deg, #0e150fff, transparent 70%);
  }
  .hero-bottom {
    left: 7%;
    right: 7%;
  }
  .privacy-copy h1 {
    font-size: 43px;
  }
  .privacy-copy p {
    font-size: 13px;
  }
}
@media (max-width: 600px) {
  .dashboard-grid {
    display: flex;
    flex-direction: column;
  }
  .dashboard-grid > .character-card {
    order: 2;
    width: 100%;
  }
  .dashboard-primary {
    order: 1;
  }
  .remote-note {
    order: 3;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-top: 21px;
    gap: 15px;
  }
  .remote-note > .text-link {
    max-width: none;
    margin: 0;
  }
  .dashboard-grid > .character-card.compact .resources {
    max-width: 400px;
  }
  .compact .character-identity {
    margin-bottom: 18px;
  }
  .compact .stat-trio {
    margin-bottom: 18px;
  }
  .quick-links {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .quick-links > button {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding: 18px 14px;
  }
  .quick-links > button > svg:last-child {
    position: absolute;
    top: 20px;
    right: 14px;
  }
  .quick-links h3 {
    font-size: 19px;
  }
  .quick-links p {
    font-size: 9px;
    line-height: 1.7;
  }
  .campaign-banner {
    height: 315px;
    margin-bottom: 20px;
  }
  .banner-content {
    padding: 28px;
  }
  .banner-content h2 {
    font-size: 46px;
  }
  .banner-content p:not(.eyebrow) {
    max-width: 220px;
    font-size: 10px;
  }
  .banner-caption {
    display: none;
  }
  .banner-sigil {
    top: 22px;
    right: 20px;
  }
  .banner-sigil svg {
    width: 40px;
  }
  .banner-shade {
    background:
      linear-gradient(90deg, #132119f0, #1420187d 75%),
      linear-gradient(0deg, #0f1b13, transparent 80%);
  }
  .main-content {
    padding-left: 19px;
    padding-right: 19px;
  }
  .page-title h1 {
    font-size: 36px;
  }
  .page-title p:last-child {
    font-size: 10px;
  }
  .page-title .pill {
    display: none;
  }
  .next-session > .section-heading {
    flex-direction: row;
    gap: 6px;
  }
  .next-session {
    padding: 21px;
  }
  .next-session .section-heading .eyebrow {
    font-size: 7px;
  }
  .next-session .pill {
    font-size: 7px;
    padding: 3px 6px;
  }
  .chronicle-row {
    gap: 15px;
  }
  .chronicle-preview > .section-heading h3 {
    font-size: 24px;
  }
  .chronicle-preview .text-link {
    font-size: 10px;
  }
  .character-layout {
    display: flex;
    flex-direction: column;
  }
  .character-layout > .character-card {
    width: 100%;
  }
  .character-layout > div {
    width: 100%;
  }
  .character-layout .lore-hero {
    min-height: 300px;
    padding: 30px;
  }
  .character-layout .large-sigil {
    display: block;
    top: 35px;
    right: 30px;
  }
  .character-layout .lore-hero h2 {
    font-size: 49px;
  }
  .character-layout .large-sigil svg {
    width: 75px;
  }
  .quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
  .quick-actions > .eyebrow,
  .quick-actions > .muted {
    grid-column: 1/-1;
  }
  .character-card:not(.compact) .resources {
    max-width: 400px;
  }
  .character-card:not(.compact) .stat-trio strong {
    font-size: 32px;
  }
  .character-card:not(.compact) .stat-trio small {
    font-size: 8px;
  }
  .episode {
    grid-template-columns: 40px 1fr;
    gap: 20px;
    padding: 23px 18px;
  }
  .episode-spine {
    padding-right: 13px;
  }
  .episode-spine > span {
    font-size: 36px;
  }
  .episode h2 {
    font-size: 28px;
  }
  .episode .section-heading {
    flex-wrap: wrap;
    gap: 8px;
  }
  .episode p {
    font-size: 11px;
  }
  .collection-tools .search {
    width: 77%;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item img {
    height: 245px;
  }
  .page-title:has(+ .collection-tools) {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
  .document-item {
    padding: 22px;
    gap: 17px;
  }
  .session-archive {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .calendar-block {
    width: 60px;
    height: 70px;
    gap: 8px;
  }
  .calendar-block svg {
    width: 22px;
  }
  .session-archive .section-heading {
    flex-wrap: wrap;
    margin-bottom: 13px;
  }
  .session-archive h2 {
    font-size: 29px;
  }
  .market-banner {
    padding: 23px 14px;
    gap: 18px;
  }
  .market-banner > svg {
    width: 28px;
  }
  .market-banner h2 {
    font-size: 28px;
  }
  .market-grid {
    grid-template-columns: 1fr;
  }
  .market-banner .eyebrow {
    font-size: 7px;
  }
  .admin-tabs {
    gap: 0;
    margin-left: -4px;
    margin-right: -4px;
  }
  .admin-tabs button {
    font-size: 10px;
    padding: 13px;
  }
  .two-fields {
    gap: 14px;
  }
  .admin-form {
    padding: 22px;
  }
  .admin-form label {
    font-size: 10px;
  }
  .admin-form input {
    font-size: 12px;
  }
  .access-panel {
    padding: 27px;
  }
  .access-panel h2 {
    font-size: 31px;
  }
  .access-panel p {
    font-size: 12px;
  }
  .session-strip {
    font-size: 9px;
    padding: 12px 14px;
  }
  .session-strip > span:first-child {
    max-width: 68%;
  }
  .scene-art {
    height: 290px;
  }
  .scene-art > div {
    left: 23px;
    bottom: 23px;
  }
  .scene-art h2 {
    font-size: 35px;
  }
  .scene-art p:not(.eyebrow) {
    font-size: 10px;
  }
  .stage-tabs {
    gap: 18px;
    padding: 0 19px;
  }
  .stage-tabs button {
    font-size: 9px;
  }
  .dice-tray {
    padding: 17px;
  }
  .dice-picker {
    gap: 6px;
  }
  .dice-picker button {
    padding: 7px 3px;
  }
  .die-icon {
    width: 28px;
    height: 30px;
    font-size: 18px;
  }
  .roll-form {
    grid-template-columns: 1fr 1.2fr;
  }
  .roll-form > label:nth-child(3) {
    grid-column: 1/-1;
  }
  .dice-tray h3 {
    font-size: 22px;
  }
  .motion-toggle {
    font-size: 7px;
  }
  .roll-result {
    padding: 14px;
    gap: 13px;
  }
  .roll-result .eyebrow {
    letter-spacing: 1px;
  }
  .roll-result small {
    font-size: 7px;
  }
  .result-die {
    width: 50px;
    min-width: 50px;
    height: 50px;
    font-size: 30px;
  }
  .roll-placeholder {
    font-size: 17px;
  }
  .history-heading .small {
    font-size: 7px;
  }
  .dice-drawer {
    right: 10px;
    bottom: 71px;
    padding: 13px;
    width: calc(100vw - 20px);
  }
  .floating-dice {
    right: 14px;
    bottom: 14px;
    padding: 12px 17px;
  }
  .modal-backdrop {
    padding: 12px;
  }
  .modal {
    padding: 22px;
    max-height: 94vh;
  }
  .modal h2 {
    font-size: 31px;
  }
  .modal .eyebrow {
    font-size: 7px;
    letter-spacing: 1.5px;
  }
  .public-nav {
    height: 76px;
    padding: 0 6%;
  }
  .public-nav .brand {
    gap: 9px;
  }
  .public-nav .brand > span {
    font-size: 13px;
    letter-spacing: 1px;
  }
  .public-nav .brand small {
    font-size: 5px;
    letter-spacing: 1px;
  }
  .public-nav .brand svg {
    width: 29px;
  }
  .public-nav .button {
    font-size: 9px;
    padding: 8px 11px;
    min-height: 35px;
    gap: 6px;
  }
  .public-nav .button svg {
    width: 12px;
  }
  .hero-copy {
    padding: 73px 7% 0;
  }
  .hero-copy h1 {
    font-size: 58px;
    line-height: 1.02;
  }
  .hero-copy .eyebrow {
    font-size: 7px;
    letter-spacing: 2.5px;
  }
  .public-hero {
    height: 635px;
  }
  .hero-copy p:not(.eyebrow) {
    font-size: 11px;
    line-height: 2;
  }
  .hero-copy .button {
    min-height: 45px;
    font-size: 11px;
  }
  .private-note {
    font-size: 8px;
  }
  .hero-bottom {
    bottom: 27px;
    font-size: 7px;
    letter-spacing: 1.2px;
  }
  .intro-section {
    padding-top: 53px;
    padding-bottom: 43px;
  }
  .intro-section > .eyebrow {
    font-size: 7px;
    letter-spacing: 1.5px;
  }
  .intro-grid h2 {
    font-size: 38px;
  }
  .intro-grid p {
    font-size: 12px;
  }
  .intro-grid {
    margin-bottom: 30px;
  }
  .table-principles span {
    font-size: 21px;
  }
  .public-campaign {
    padding-bottom: 48px;
  }
  .campaign-illustration {
    height: 250px;
  }
  .public-campaign h2 {
    font-size: 45px;
  }
  .public-campaign .eyebrow {
    font-size: 8px;
  }
  .public-campaign p:not(.eyebrow) {
    font-size: 12px;
  }
  .closing {
    padding: 48px 24px 58px;
  }
  .closing h2 {
    font-size: 33px;
  }
  .closing .eyebrow {
    font-size: 7px;
  }
  .public-footer {
    padding: 28px 6%;
  }
  .public-footer .brand > span {
    font-size: 12px;
  }
  .public-footer .brand small {
    font-size: 5px;
  }
  .public-footer > a {
    font-size: 9px;
  }
  .toast {
    bottom: 76px;
    width: calc(100vw - 35px);
    max-width: 450px;
  }
  .privacy-copy {
    padding: 45px 7% 70px;
  }
  .privacy-copy h1 {
    font-size: 40px;
  }
  .loading-screen {
    padding: 25px;
  }
  .loading-screen h1 {
    font-size: 35px;
  }
  .loading-screen > p {
    font-size: 12px;
  }
  .loading-screen .row {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
.mobile-character {
  display: none;
}
@media (max-width: 960px) {
  .mobile-character {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 0 16px;
    background: #1e2a1d;
    border: 1px solid #586444;
    border-radius: 4px;
    box-shadow: 0 4px 18px #0003;
  }
  .mobile-character > summary {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
  }
  .mobile-character > summary strong {
    font: 22px var(--serif);
    color: var(--gold);
  }
  .mobile-character > summary > span {
    font-size: 10px;
    color: #bcc8ae;
    margin-left: auto;
  }
  .mobile-character > .character-card {
    border: 0;
    margin: 0;
    max-height: 65vh;
    overflow: auto;
  }
  .mobile-character[open] > summary {
    border-bottom: 1px solid var(--border);
  }
  .session-page:after {
    display: none;
  }
}
.result-dice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 140px;
  flex-shrink: 0;
}
.result-dice-group .result-die {
  min-width: 39px;
  width: 39px;
  height: 42px;
  font-size: 26px;
}
@media (max-width: 760px) {
  .sidebar {
    visibility: hidden;
  }
  .sidebar.is-open {
    visibility: visible;
  }
}
@media (max-width: 600px) {
  .result-dice-group {
    max-width: 84px;
  }
}

.session-link-tools { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin: 16px 0 22px; }
.session-link-tools small { flex-basis:100%; line-height:1.7; }
.session-link-tools label { flex-basis:100%; min-width:0; }
.session-link-tools input { width:100%; max-width:100%; }
.session-link-tools .text-link { min-height:40px; }

.cockpit-center { min-width: 0; }
.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; }

/* Public role-playing chronicle. Scoped to the public landing only. */
.public-chronicle { overflow-x: clip; }
.public-chronicle section[id], .public-chronicle article[id] { scroll-margin-top: 24px; }
.public-chronicle .public-nav { gap: 24px; }
.public-chronicle .public-nav nav { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.public-chronicle .public-nav > .button { flex-shrink:0; }
.public-chronicle .public-hero { height:690px; }
.public-chronicle .hero-copy { padding-top:110px; }
.public-chronicle .hero-copy h1 { font-size:clamp(65px,6.6vw,95px); line-height:1.02; max-width:920px; margin-bottom:28px; }
.public-chronicle .hero-copy .eyebrow { font-size:10px; letter-spacing:2.2px; margin-bottom:27px; }
.public-chronicle .hero-copy p:not(.eyebrow) { font-size:14px; max-width:510px; line-height:1.9; margin-bottom:28px; }
.public-chronicle .hero-shade { background:linear-gradient(90deg,#0b120eef 0%,#11170dab 43%,#11190e1a 78%),linear-gradient(0deg,#0e150fff,transparent 45%); }
.public-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:19px 27px; }
.public-hero-actions .text-link { font-size:11px; color:#e0d1ad; min-height:42px; }
.public-chronicle .public-roleplay { padding-top:100px; padding-bottom:86px; }
.public-chronicle .intro-grid { grid-template-columns:1.04fr 1fr; gap:75px; margin-bottom:46px; }
.public-chronicle .intro-grid h2 { font-size:clamp(40px,4vw,55px); }
.public-chronicle .intro-grid p { font-size:13px; line-height:1.95; color:#b9c0ae; }
.public-play-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding:31px 0 0; margin:0; list-style:none; border-top:1px solid #3b4431; }
.public-play-steps li { position:relative; min-width:0; padding:10px 25px 0 0; }
.public-play-steps li + li { border-left:1px solid #323d2c; padding-left:28px; }
.public-play-steps svg { color:#c4ae78; margin:0 0 20px; stroke-width:1.4; }
.public-step-number { position:absolute; right:20px; top:0; font:40px/1 var(--serif); color:#67704e; opacity:.65; }
.public-play-steps h3 { font-size:27px; margin-bottom:12px; color:#e0ddc9; }
.public-play-steps p { font-size:12px; line-height:1.9; color:#aebba0; margin:0; max-width:31ch; }
.public-story-section { display:grid; grid-template-columns:1.07fr 1fr; align-items:stretch; margin:0 auto; max-width:1550px; padding:30px 8.2% 94px; gap:62px; }
.public-story-art { position:relative; min-height:470px; overflow:hidden; border:1px solid #536044; background:#142019; isolation:isolate; }
.public-story-art img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:66% center; z-index:-2; }
.public-story-art-shade { position:absolute; inset:0; background:linear-gradient(0deg,#0b150edc,transparent 55%); z-index:-1; }
.public-story-art:after { content:""; position:absolute; inset:10px; border:1px solid #c2ad7844; pointer-events:none; }
.public-art-caption { position:absolute; left:28px; right:20px; bottom:29px; color:#d8c99f; font-size:8px; letter-spacing:2px; line-height:1.7; }
.public-story-copy { padding:27px 0 15px; }
.public-story-copy .eyebrow { margin-bottom:24px; }
.public-story-copy h2 { font-size:clamp(48px,4.5vw,66px); line-height:1.03; margin-bottom:26px; }
.public-story-copy p:not(.eyebrow) { font-size:13px; color:#b6c0ab; line-height:1.9; max-width:47ch; }
.public-story-copy p.public-story-lead { font:25px/1.4 var(--serif); color:#dfd8c0; margin-bottom:17px; }
.public-story-thread { display:flex; flex-wrap:wrap; gap:8px 14px; padding:20px 0; border-top:1px solid #3b4531; margin:24px 0 6px; }
.public-story-thread span { color:#c6b78b; font-size:10px; letter-spacing:.25px; display:flex; align-items:center; gap:14px; }
.public-story-thread span + span:before { content:""; width:3px; height:3px; background:#9c915f; border-radius:50%; flex-shrink:0; }
.public-story-copy .text-link { font-size:11px; margin:12px 0; }
.public-story-copy p.public-spoiler-note { display:flex; gap:8px; align-items:flex-start; font-size:10px; color:#92a185; margin:16px 0 0; max-width:48ch; }
.public-spoiler-note svg { flex-shrink:0; margin-top:3px; }
.public-company-section { padding:90px 8.2% 96px; background:linear-gradient(180deg,#182018,var(--bg) 70%); border-top:1px solid #343d2c; border-bottom:1px solid #343d2c; }
.public-company-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:35px; max-width:1296px; margin:0 auto; }
.public-company-heading h2 { font-size:clamp(43px,4.1vw,58px); margin-bottom:0; }
.public-company-heading > p { color:#b7c0aa; font-size:12px; line-height:1.9; margin:0 0 4px; max-width:43ch; }
.public-company-index { display:flex; flex-wrap:wrap; gap:8px 24px; max-width:1296px; margin:36px auto 30px; padding:19px 0; border-top:1px solid #3d4833; border-bottom:1px solid #3d4833; }
.public-company-index a { font-size:12px; color:#c5b68d; min-height:28px; display:flex; align-items:center; }
.public-company-index a:hover { color:#f0deb3; }
.public-varyx-feature { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); max-width:1296px; margin:0 auto 26px; border:1px solid #5b5d40; background:linear-gradient(120deg,#263022,#1b241c); }
.public-varyx-portrait { min-width:0; margin:0; display:flex; flex-direction:column; background:#dfd6be; }
.public-varyx-portrait img { width:100%; height:100%; max-height:650px; object-fit:contain; flex:1; min-height:0; }
.public-varyx-portrait figcaption { padding:13px 19px; border-top:1px solid #b8ab87; background:#d8ccb0; color:#4e503c; font-size:8px; letter-spacing:1.5px; line-height:1.8; text-align:center; }
.public-varyx-copy { padding:clamp(25px,3.5vw,52px); min-width:0; }
.public-character-topline { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:42px; color:#c2ab72; }
.public-character-number { font-size:9px; letter-spacing:1.8px; color:#9faa8b; }
.public-varyx-copy .eyebrow { font-size:8px; line-height:1.8; letter-spacing:1.6px; margin-bottom:13px; }
.public-varyx-copy h3 { font-size:68px; margin:0 0 23px; color:#e8e1ca; }
.public-varyx-copy p.public-character-intro { font:31px/1.2 var(--serif); color:#e1dbc6; margin-bottom:20px; }
.public-character-intro em { color:#c7b384; }
.public-varyx-copy > p:not(.eyebrow):not(.public-character-intro) { color:#b8c2aa; font-size:12px; line-height:1.9; max-width:42ch; }
.public-character-story { border-top:1px solid #50563a; margin-top:25px; padding-top:3px; }
.public-character-story summary { display:flex; justify-content:space-between; align-items:center; gap:14px; cursor:pointer; list-style:none; color:#decba1; padding:15px 0; min-height:46px; font-size:12px; }
.public-character-story summary::-webkit-details-marker { display:none; }
.public-character-story summary::marker { content:""; }
.public-character-story summary:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.public-character-story summary svg { flex-shrink:0; color:#bba575; }
.public-character-story[open] summary svg { transform:rotate(180deg); }
.public-character-story p { margin:3px 0 16px; font-size:12px; line-height:1.95; color:#c1c8b3; }
.public-companion-grid { max-width:1296px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.public-companion-card { min-width:0; padding:34px 36px 20px; border:1px solid #435036; background:radial-gradient(ellipse at top left,#37402a55,transparent 75%),#19231a; }
.public-companion-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.public-companion-monogram { width:66px; height:66px; display:grid; place-items:center; border:1px solid #8f8157; outline:1px solid #5a5b3d; outline-offset:5px; border-radius:50%; color:#d8c391; background:#303822; font:34px/1 var(--serif); }
.public-companion-card .eyebrow { font-size:8px; line-height:1.8; letter-spacing:1.7px; margin:0 0 13px; }
.public-companion-card h3 { font-size:49px; margin-bottom:17px; color:#e2ddc5; }
.public-companion-intro { color:#b9c4a9; font-size:12px; line-height:1.9; min-height:46px; margin-bottom:22px; max-width:45ch; }
.public-companion-card .public-character-story { margin-top:22px; }
.public-game-nights { max-width:1350px; margin:0 auto; display:grid; grid-template-columns:.6fr 1fr; align-items:center; gap:58px; padding:85px 8.2% 92px; }
.public-game-night-mark { min-height:245px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:40px; color:#c1aa75; border-right:1px solid #435036; }
.public-game-night-mark > svg { width:65px; height:65px; stroke-width:1; }
.public-game-night-copy h2 { font-size:49px; margin-bottom:22px; }
.public-game-night-copy > p:not(.eyebrow) { font-size:13px; line-height:1.9; color:#b4c0a6; max-width:51ch; margin-bottom:26px; }
.public-game-night-copy .private-note { margin-top:16px; font-size:9px; color:#a3b090; }
.public-closing .text-link { display:inline-flex; }
.public-chronicle .public-footer { gap:30px; flex-wrap:wrap; }
.public-chronicle .public-footer p { max-width:52ch; line-height:1.9; }
.public-chronicle .public-footer p span { color:#909c82; font-size:9px; }
@media(min-width:1600px) {
  .public-chronicle .public-hero { height:760px; }
  .public-chronicle .hero-copy { padding-top:140px; }
}
@media(max-width:1100px) {
  .public-chronicle .public-nav { padding-left:5%; padding-right:5%; gap:19px; }
  .public-chronicle .public-nav .brand > span { font-size:17px; }
  .public-chronicle .public-nav .brand small { font-size:6px; letter-spacing:1px; }
  .public-chronicle .public-nav nav { gap:19px; font-size:10px; }
  .public-chronicle .public-nav > .button { font-size:10px; padding:10px 12px; }
  .public-chronicle .intro-grid { gap:35px; }
  .public-story-section { gap:34px; }
  .public-story-art { min-height:470px; }
  .public-company-heading > p br { display:none; }
  .public-varyx-copy { padding:30px; }
  .public-varyx-copy h3 { font-size:59px; }
  .public-character-topline { margin-bottom:30px; }
  .public-companion-card { padding:30px 27px 18px; }
}
@media(max-width:760px) {
  .public-chronicle .public-nav { height:auto; min-height:105px; padding:19px 6% 0; flex-wrap:wrap; gap:17px 12px; }
  .public-chronicle .public-nav .brand { gap:9px; }
  .public-chronicle .public-nav .brand svg { width:30px; height:30px; }
  .public-chronicle .public-nav .brand > span { font-size:16px; letter-spacing:1.1px; }
  .public-chronicle .public-nav .brand small { font-size:5px; letter-spacing:.8px; }
  .public-chronicle .public-nav > .button { font-size:9px; min-height:37px; padding:9px 10px; gap:6px; }
  .public-chronicle .public-nav nav { display:flex; order:3; width:100%; border-top:1px solid #323e2b; padding:11px 0 12px; justify-content:space-between; gap:14px; font-size:10px; }
  .public-chronicle .public-nav nav a { min-height:26px; display:flex; align-items:center; }
  .public-chronicle .public-hero { height:620px; }
  .public-chronicle .hero-art { object-position:64% center; }
  .public-chronicle .hero-copy { padding:91px 7% 0; }
  .public-chronicle .hero-copy h1 { font-size:clamp(47px,8.2vw,65px); line-height:1.03; letter-spacing:-1px; margin-bottom:25px; }
  .public-chronicle .hero-copy .eyebrow { font-size:8px; letter-spacing:1.4px; max-width:320px; line-height:1.9; }
  .public-chronicle .hero-copy p:not(.eyebrow) { font-size:12px; }
  .public-chronicle .hero-shade { background:linear-gradient(90deg,#0b130eed,#11180fab 60%,#17201655),linear-gradient(0deg,#0e150fee,transparent 65%); }
  .public-hero-actions { flex-direction:column; align-items:flex-start; gap:7px; }
  .public-hero-actions .text-link { font-size:10px; }
  .public-chronicle .hero-bottom { left:7%; right:7%; bottom:24px; font-size:7px; letter-spacing:1px; }
  .public-chronicle .hero-bottom > span { max-width:155px; line-height:1.8; }
  .public-chronicle .hero-bottom > .lanterns { display:none; }
  .public-chronicle .hero-bottom > a { font-size:6px; gap:4px; }
  .public-chronicle .public-roleplay { padding:64px 7% 55px; }
  .public-chronicle .intro-grid { grid-template-columns:1fr; gap:15px; margin:24px 0 32px; }
  .public-chronicle .intro-grid h2 { font-size:41px; }
  .public-chronicle .intro-grid p { font-size:12px; }
  .public-play-steps { grid-template-columns:1fr; padding-top:9px; gap:0; }
  .public-play-steps li { padding:25px 30px 25px 45px; }
  .public-play-steps li + li { border-left:0; border-top:1px solid #35422c; padding-left:45px; }
  .public-play-steps svg { position:absolute; top:30px; left:1px; width:23px; }
  .public-step-number { font-size:27px; right:4px; top:29px; }
  .public-play-steps h3 { font-size:25px; margin-right:10px; }
  .public-play-steps p { max-width:none; font-size:11px; }
  .public-story-section { grid-template-columns:1fr; gap:0; padding:0 7% 62px; }
  .public-story-art { min-height:285px; }
  .public-story-copy { padding-top:31px; }
  .public-story-copy h2 { font-size:52px; }
  .public-story-copy p:not(.eyebrow) { max-width:none; }
  .public-story-copy .public-story-lead { font-size:24px; }
  .public-company-section { padding:58px 7% 59px; }
  .public-company-heading { display:block; }
  .public-company-heading h2 { font-size:42px; }
  .public-company-heading > p { margin-top:23px; max-width:45ch; font-size:11px; }
  .public-company-index { margin:25px 0; gap:7px 23px; padding:14px 0; }
  .public-company-index a { font-size:11px; }
  .public-varyx-feature { grid-template-columns:1fr; }
  .public-varyx-portrait { max-height:none; }
  .public-varyx-portrait img { height:420px; max-height:none; flex:unset; }
  .public-varyx-copy { padding:30px 25px 21px; }
  .public-varyx-copy h3 { font-size:61px; }
  .public-varyx-copy p.public-character-intro { font-size:29px; }
  .public-companion-grid { grid-template-columns:1fr; gap:20px; }
  .public-companion-card { padding:29px 25px 15px; }
  .public-companion-card h3 { font-size:45px; }
  .public-companion-intro { min-height:0; }
  .public-companion-top { margin-bottom:26px; }
  .public-game-nights { grid-template-columns:1fr; gap:25px; padding:56px 7% 65px; }
  .public-game-night-mark { min-height:unset; border-right:0; align-items:flex-start; flex-direction:row; justify-content:space-between; }
  .public-game-night-mark > svg { width:35px; height:35px; }
  .public-game-night-mark .lanterns { align-self:center; }
  .public-game-night-copy h2 { font-size:43px; }
  .public-game-night-copy > p:not(.eyebrow) { font-size:12px; }
  .public-chronicle .closing { padding:53px 7% 59px; }
  .public-chronicle .closing h2 { font-size:33px; }
  .public-chronicle .public-footer { padding:29px 7%; gap:23px; align-items:flex-start; }
  .public-chronicle .public-footer p { width:100%; order:3; font-size:9px; }
}
@media(max-width:400px) {
  .public-chronicle .public-nav { padding-left:5%; padding-right:5%; }
  .public-chronicle .public-nav .brand > span { font-size:14px; }
  .public-chronicle .public-nav .brand small { font-size:4.5px; }
  .public-chronicle .public-nav .brand svg { width:27px; height:27px; }
  .public-chronicle .hero-copy h1 { font-size:42px; }
  .public-chronicle .hero-copy .eyebrow { font-size:7px; letter-spacing:1px; }
  .public-chronicle .hero-copy { padding-top:86px; }
  .public-chronicle .hero-bottom > a { letter-spacing:.5px; }
  .public-chronicle .intro-grid h2, .public-company-heading h2 { font-size:37px; }
  .public-story-copy h2 { font-size:47px; }
  .public-companion-card .eyebrow { font-size:7px; }
}

/* Progressive enhancements for the public experience. */
.public-chronicle [hidden] { display:none !important; }
.public-reading-progress { position:fixed; z-index:90; inset:0 0 auto; height:3px; pointer-events:none; background:transparent; }
.public-reading-progress > span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,#a78851,#e2c891); box-shadow:0 0 12px #d9ba7677; }
.public-atmosphere { position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.public-atmosphere i { position:absolute; display:block; width:3px; height:3px; border-radius:50%; background:#f2cd83; box-shadow:0 0 8px 2px #ddb66e80; opacity:.25; animation:public-firefly 11s ease-in-out infinite; }
.public-atmosphere i:nth-child(1) { left:13%; top:77%; animation-delay:-3s; }
.public-atmosphere i:nth-child(2) { left:29%; top:60%; animation-delay:-7s; animation-duration:14s; }
.public-atmosphere i:nth-child(3) { left:41%; top:86%; animation-delay:-2s; }
.public-atmosphere i:nth-child(4) { left:51%; top:65%; animation-delay:-9s; animation-duration:16s; }
.public-atmosphere i:nth-child(5) { left:60%; top:81%; animation-delay:-5s; }
.public-atmosphere i:nth-child(6) { left:66%; top:47%; animation-delay:-12s; animation-duration:15s; }
.public-atmosphere i:nth-child(7) { left:72%; top:68%; animation-delay:-4s; }
.public-atmosphere i:nth-child(8) { left:78%; top:37%; animation-delay:-6s; animation-duration:14s; }
.public-atmosphere i:nth-child(9) { left:83%; top:77%; animation-delay:-10s; }
.public-atmosphere i:nth-child(10) { left:89%; top:54%; animation-delay:-1s; animation-duration:16s; }
.public-atmosphere i:nth-child(11) { left:94%; top:86%; animation-delay:-8s; }
.public-atmosphere i:nth-child(12) { left:97%; top:34%; animation-delay:-5s; animation-duration:17s; }
.public-motion-toggle { position:absolute; top:20px; right:6.2%; display:flex; align-items:center; gap:7px; min-height:32px; padding:7px 10px; border:1px solid #d0b37a66; border-radius:30px; color:#d2c8af; background:#10190e8f; font-size:9px; letter-spacing:.3px; backdrop-filter:blur(9px); }
.public-motion-toggle:hover { border-color:#d6bf85; color:#fff0c7; }
.public-reveal { opacity:1; }
.public-reveal.is-revealed { animation:public-reveal .8s cubic-bezier(.2,.7,.2,1) both; }
.public-chronicle .public-company-index a { position:relative; }
.public-chronicle .public-company-index a[aria-current="true"] { color:#f0d59a; }
.public-chronicle .public-company-index a[aria-current="true"]:after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#d8b778; }
.public-chronicle article:target { border-color:#c5a66d; box-shadow:0 0 0 1px #bfa56d33,0 0 35px #bda4670f; }
.public-portrait-open { position:relative; display:flex; align-items:center; justify-content:center; flex:1; width:100%; min-width:0; padding:0; background:#dfd6be; overflow:hidden; }
.public-portrait-open > img { flex:unset; display:block; }
.public-portrait-open > span { position:absolute; left:50%; bottom:23px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:11px 16px; border:1px solid #9d855c; border-radius:3px; background:#132014ee; color:#ead8ad; font-size:11px; white-space:nowrap; box-shadow:0 4px 18px #111a1644; }
.public-portrait-open:hover:not(:disabled) > span { background:#243322; border-color:#e0c185; }
.public-portrait-open:focus-visible { outline-offset:-5px; outline:3px solid #725b26; }
.public-portrait-open:disabled { opacity:1; cursor:default; }
.public-portrait-open:disabled > span { display:none; }
.public-portrait-dialog { width:min(780px,calc(100vw - 36px)); max-height:calc(100dvh - 42px); padding:23px; border:1px solid #a3905e; border-radius:8px; background:#172017; color:#e9e1cc; box-shadow:0 20px 100px #000a; overflow:auto; }
.public-portrait-dialog:not([open]) { display:none; }
.public-portrait-dialog::backdrop { background:#07110be8; backdrop-filter:blur(7px); }
.public-portrait-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.public-portrait-dialog-heading .eyebrow { font-size:8px; letter-spacing:1.6px; margin-bottom:8px; }
.public-portrait-dialog-heading h2 { font-size:38px; margin:0; }
.public-portrait-dialog-heading > button { min-width:42px; min-height:42px; background:#293620; border:1px solid #637044; border-radius:50%; }
.public-portrait-dialog > img { width:100%; max-height:calc(100dvh - 180px); object-fit:contain; background:#e8dfc8; }
.public-back-top { position:fixed; z-index:45; right:24px; bottom:23px; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 17px; min-height:45px; color:#e0ce9c; background:#1a271aee; border:1px solid #807347; border-radius:30px; font-size:10px; box-shadow:0 6px 24px #0a110c66; backdrop-filter:blur(8px); }
.public-back-top svg { transform:rotate(-90deg); }
.public-back-top:hover { background:#2d3e26; border-color:#d2b982; }
.public-dice-section { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:75px; align-items:center; max-width:1550px; padding:20px 8.2% 95px; margin:0 auto; }
.public-dice-intro { min-width:0; }
.public-dice-intro h2 { font-size:clamp(53px,5vw,73px); line-height:1.02; margin:22px 0 25px; }
.public-dice-intro > p:not(.eyebrow) { color:#b9c4ac; font-size:13px; line-height:1.95; max-width:42ch; }
.public-dice-intro p.public-dice-explanation { font-size:12px; color:#aeba9d; margin-top:23px; }
.public-dice-equation { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:20px 0; border-top:1px solid #445035; border-bottom:1px solid #445035; margin:23px 0; color:#c9b681; }
.public-dice-equation span { font-size:9px; letter-spacing:1.3px; }
.public-dice-equation b { font-size:16px; font-weight:400; color:#8e9a74; }
.public-dice-intro p.public-practice-note { display:flex; align-items:flex-start; gap:9px; font-size:10px; color:#a6b498; max-width:46ch; }
.public-practice-note svg { flex-shrink:0; margin-top:4px; color:#bda773; }
.public-rules-link { display:inline-flex; font-size:10px; color:#d1bc85; margin-top:4px; }
.public-dice-table { min-width:0; position:relative; padding:29px; border:1px solid #746c47; border-radius:8px; background:radial-gradient(ellipse at 50% 35%,#4b502731,transparent 65%),linear-gradient(135deg,#22301f,#182219 75%); box-shadow:inset 0 0 0 5px #12201488,0 20px 50px #07130c33; }
.public-demo-topline { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:23px; }
.public-demo-topline .eyebrow { margin:0; font-size:8px; letter-spacing:1.7px; }
.public-demo-badge { font-size:7px; letter-spacing:1px; color:#aab692; border:1px solid #4b5a37; border-radius:3px; padding:4px 7px; }
.public-demo-scene-label { font-size:10px; color:#c7ccb6; margin-bottom:7px; }
.public-dice-table select, .public-dice-table input { background:#111b12; border-color:#53643e; font-size:11px; min-height:43px; max-width:100%; }
.public-dice-table select:disabled, .public-dice-table input:disabled { color:#a9b29a; opacity:.75; cursor:not-allowed; }
.public-demo-prompt { font:24px/1.3 var(--serif); color:#e7dcc0; text-align:center; margin:24px 0 0; min-height:32px; }
.public-demo-stage { position:relative; display:flex; justify-content:center; align-items:center; gap:18px; min-height:206px; padding:13px 0; isolation:isolate; }
.public-demo-stage:before { content:""; position:absolute; width:205px; height:205px; border:1px solid #73814a2b; border-radius:50%; z-index:-1; }
.public-demo-stage:after { content:""; position:absolute; width:244px; height:244px; border:1px solid #73814a12; border-radius:50%; z-index:-1; }
.public-demo-die { position:relative; width:140px; height:155px; display:flex; align-items:center; justify-content:center; flex-shrink:0; filter:drop-shadow(0 12px 14px #050b0644); transform-origin:50% 60%; }
.public-die-facets { position:absolute; inset:0; width:100%; height:100%; stroke:#cdb67a; stroke-width:1.1; }
.public-die-facets path:first-child { fill:#283b21; stroke-width:1.6; }
.public-die-facets path:last-child { stroke:#a58d584d; }
.public-demo-die > output { position:relative; margin-top:8px; color:#ecd79c; font:600 52px/1 var(--serif); text-shadow:0 2px 8px #0005; }
.public-die-caption { position:absolute; bottom:31px; left:0; right:0; text-align:center; font-size:7px; letter-spacing:2px; color:#b8a674; }
.public-demo-second { display:grid; place-items:center; width:66px; height:75px; background:#263821; border:1px solid #9b8854; border-radius:8px; font:34px/1 var(--serif); color:#dcc690; transform:rotate(5deg); box-shadow:0 8px 12px #07140a55; }
.public-demo-controls { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(65px,.6fr) minmax(65px,.6fr); gap:10px; }
.public-demo-controls label { font-size:9px; color:#c4cdb2; gap:7px; }
.public-demo-controls input { text-align:center; font-size:13px; padding:8px; }
.public-demo-controls select { padding:8px 9px; font-size:10px; }
.public-dice-table .public-demo-roll { width:100%; min-height:47px; margin-top:17px; font-size:12px; box-shadow:0 4px 18px #0c160933; }
.public-dice-result { min-height:46px; text-align:center; padding:14px 9px 0; margin:0; color:#cdd2b7; font-size:11px; line-height:1.75; }
.public-demo-history { padding-top:16px; margin-top:18px; border-top:1px solid #465336; }
.public-demo-history .eyebrow { font-size:7px; letter-spacing:1.5px; color:#9da984; margin-bottom:10px; }
.public-demo-history ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.public-demo-history li { border:1px solid #48573a; border-radius:3px; background:#15201488; padding:9px 10px; color:#afbda0; font-size:10px; line-height:1.75; overflow-wrap:anywhere; }
.public-demo-history li:first-child { border-color:#6a6b44; color:#d1c597; }
.public-demo-noscript { font-size:11px; line-height:1.8; color:#d4be8b; border:1px solid #877549; padding:12px; border-radius:4px; margin:16px 0 0; }
.public-dice-section.is-rolling .public-demo-die { animation:public-die-tumble .6s ease-out both; }
.public-dice-section.is-rolling .public-demo-second { animation:public-die-tumble .6s ease-out reverse both; }
.public-dice-section.is-success .public-dice-table { border-color:#a5b476; }
.public-dice-section.is-success .public-demo-die { animation:public-die-success .8s ease-out; }
.public-dice-section.is-success .public-dice-result { color:#d8dfaf; }
@keyframes public-firefly { 0%,100% { opacity:.13; transform:translate3d(0,10px,0); } 45% { opacity:.75; transform:translate3d(14px,-24px,0); } 70% { opacity:.3; transform:translate3d(-7px,-10px,0); } }
@keyframes public-reveal { from { opacity:.6; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes public-die-tumble { 0% { transform:rotate(0deg) scale(1); } 25% { transform:rotate(-13deg) scale(.96); } 60% { transform:rotate(14deg) scale(1.04); } 85% { transform:rotate(-5deg) scale(1.02); } 100% { transform:rotate(0deg) scale(1); } }
@media(max-width:1100px) {
  .public-dice-section { gap:35px; }
  .public-dice-table { padding:23px; }
  .public-demo-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .public-demo-controls > label:first-child { grid-column:1 / -1; }
}
@media(max-width:760px) {
  .public-dice-section { grid-template-columns:minmax(0,1fr); padding:0 7% 67px; gap:31px; }
  .public-dice-intro h2 { font-size:51px; }
  .public-dice-intro > p:not(.eyebrow) { max-width:46ch; font-size:12px; }
  .public-dice-intro p.public-dice-explanation { font-size:11px; }
  .public-dice-equation { max-width:380px; margin:19px 0; padding:16px 0; }
  .public-dice-table { padding:22px; }
  .public-demo-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .public-demo-prompt { font-size:23px; }
  .public-demo-stage { min-height:210px; }
  .public-demo-topline { gap:8px; margin-bottom:20px; }
  .public-motion-toggle { top:14px; right:7%; font-size:8px; min-height:29px; padding:6px 9px; }
  .public-back-top { right:15px; bottom:16px; padding:10px 13px; font-size:9px; min-height:42px; gap:7px; }
  .public-portrait-open { flex:unset; }
  .public-portrait-open > img { height:420px; }
  .public-portrait-dialog { padding:16px; width:calc(100vw - 24px); max-height:calc(100dvh - 26px); }
  .public-portrait-dialog-heading h2 { font-size:33px; }
  .public-portrait-dialog-heading .eyebrow { max-width:190px; font-size:7px; line-height:1.7; }
  .public-portrait-dialog > img { max-height:calc(100dvh - 155px); }
}
@media(max-width:400px) {
  .public-dice-table { padding:19px; }
  .public-demo-badge { font-size:6px; }
  .public-demo-topline .eyebrow { font-size:7px; letter-spacing:1px; }
  .public-demo-prompt { font-size:21px; }
  .public-demo-controls label { font-size:9px; }
  .public-portrait-open > img { height:375px; }
  .public-portrait-open > span { bottom:17px; font-size:10px; }
}
.motion-paused .public-chronicle *, .motion-paused .public-chronicle *:before, .motion-paused .public-chronicle *:after,
.public-chronicle.motion-paused *, .public-chronicle.motion-paused *:before, .public-chronicle.motion-paused *:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
html.motion-paused, html:has(.public-chronicle.motion-paused) { scroll-behavior:auto !important; }
@media(prefers-reduced-motion:reduce) {
  .public-chronicle *, .public-chronicle *:before, .public-chronicle *:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .public-reveal.is-revealed { opacity:1; transform:none; }
  .public-atmosphere i { opacity:.25; transform:none; }
}
.public-chronicle.page-away *, .public-chronicle.page-away *:before, .public-chronicle.page-away *:after { animation-play-state:paused !important; }
.page-away .public-chronicle *, .page-away .public-chronicle *:before, .page-away .public-chronicle *:after { animation-play-state:paused !important; }
@keyframes public-die-success { 0%,100% { transform:scale(1); } 45% { transform:scale(1.045); } }

/* The illustrated edition: paper, ink, and places to enter the story. */
.comic-public { --bg:#f3ead7; --bg-deep:#e4d5b6; --panel:#fff7e7; --panel-high:#ecdfc4; --text:#262b25; --muted:#66634f; --gold:#87572d; --gold-soft:#a9763d; --border:#b7a482; --border-soft:#d8c7a9; background:#f3ead7; color:#262b25; }
.comic-public .public-nav { position:relative; background:#f8f0df; color:#252c24; border-bottom:2px solid #343b2f; height:100px; padding:18px 5%; }
.comic-public .brand, .comic-public .brand small, .comic-public .public-nav nav a { color:#343b2f; }
.comic-public .button { border-radius:0; min-height:45px; }
.comic-public .button-primary { color:#fff2d3; background:#74382f; border:1px solid #592c26; box-shadow:3px 3px 0 #2e322c; }
.comic-public .button-primary:hover { background:#924639; transform:translateY(-2px); }
.comic-public .button-outline { color:#343b2f; border-color:#343b2f; background:transparent; }
.comic-public .eyebrow { color:#7c4b2d; letter-spacing:1.8px; }
.comic-public .text-link { color:#714134; }
.comic-public .public-hero { height:auto; min-height:650px; padding:64px 5% 72px; display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.3fr); align-items:center; gap:38px; overflow:visible; background:radial-gradient(ellipse at 20% 0,#fff9eb,transparent 75%),#f3ead7; }
.comic-public .hero-copy { position:static; padding:0; max-width:none; z-index:1; }
.comic-public .hero-copy h1 { font-size:clamp(54px,5.6vw,86px); color:#263128; line-height:.99; margin:25px 0; letter-spacing:-2px; }
.comic-public .hero-copy h1 em { color:#843c31; }
.comic-public .hero-copy > p:not(.eyebrow) { color:#5f604f; font-size:14px; line-height:1.85; max-width:34ch; margin-bottom:29px; }
.comic-public .hero-copy .eyebrow { font-size:8px; }
.comic-public .public-hero-actions { gap:16px 20px; }
.comic-public .public-hero-actions .text-link { color:#6d4331; font-size:10px; }
.comic-issue { display:block; font-size:8px; letter-spacing:2px; margin-top:48px; padding-left:14px; border-left:3px solid #984431; color:#7c7460; }
.comic-issue b { display:block; font:italic 20px/1.4 var(--serif); letter-spacing:0; color:#5c614e; padding-top:3px; }
.comic-cover { margin:0; padding:8px; background:#e7d4ad; border:2px solid #30372c; box-shadow:8px 9px 0 #30372c; transform:rotate(1deg); }
.comic-cover > img { width:100%; height:440px; object-fit:cover; object-position:64% center; display:block; border:1px solid #34352a; }
.comic-cover figcaption { display:grid; grid-template-columns:1fr auto; padding:19px 13px 11px; color:#273427; }
.comic-cover figcaption span { font-size:7px; letter-spacing:1.7px; grid-column:1; }
.comic-cover figcaption strong { font:600 28px/1.15 var(--serif); margin-top:7px; }
.comic-cover figcaption a { grid-column:2; grid-row:1/3; display:grid; place-items:center; width:38px; height:38px; border:1px solid #333b2c; border-radius:50%; align-self:center; }
.comic-public .public-motion-toggle { right:5%; top:auto; bottom:13px; color:#5b5444; background:#f3ead7; border-color:#a9926d; }
.comic-public .intro-section { max-width:1450px; padding:85px 7%; border-top:2px solid #333b2d; }
.comic-public .intro-grid { gap:60px; }
.comic-public .intro-grid h2 { font-size:56px; color:#2f3e30; }
.comic-public .intro-grid p { color:#65614f; font-size:13px; }
.comic-public .public-play-steps { margin-top:35px; border-top:1px solid #b4a584; border-bottom:1px solid #b4a584; }
.comic-public .public-play-steps li { border-color:#b4a584; background:none; padding:25px 25px 22px; }
.comic-public .public-play-steps svg, .comic-public .public-step-number { color:#935239; }
.comic-public .public-play-steps h3 { color:#2f3e30; font-size:26px; }
.comic-public .public-play-steps p { color:#6c654f; }
.comic-prologue { padding:80px 7% 60px; background:#263c35; color:#f4e5c5; border-top:2px solid #172a25; border-bottom:2px solid #172a25; }
.comic-prologue-heading { max-width:1300px; margin:0 auto 40px; display:flex; gap:50px; justify-content:space-between; align-items:flex-end; }
.comic-prologue-heading h2 { font-size:clamp(42px,4.5vw,68px); margin:0; }
.comic-prologue-heading > p { max-width:40ch; color:#bcc4b5; font-size:12px; line-height:1.9; margin-bottom:5px; }
.comic-public .comic-prologue .eyebrow { color:#d5ac78; }
.comic-prologue h2 em { color:#dcb877; }
.comic-strip { max-width:1300px; margin:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.comic-panel { min-width:0; margin:0; padding:6px; background:#ead9b7; border:2px solid #17271f; box-shadow:4px 5px 0 #162620; }
.comic-panel-art { height:340px; background-image:url('/art/lantern-comic.jpg'); background-repeat:no-repeat; background-size:338% 100%; border:1px solid #363b2d; }
.panel-art-0 { background-position:0% center; }.panel-art-1 { background-position:43% center; }.panel-art-2 { background-position:100% center; }
.comic-panel figcaption { display:flex; gap:13px; color:#2c3b2d; padding:17px 10px 12px; }
.comic-panel figcaption > span { font-size:10px; color:#8c4c31; border-top:2px solid #8c4c31; padding-top:6px; }
.comic-panel h3 { font-size:26px; margin:0 0 9px; }
.comic-panel p { font-size:11px; line-height:1.75; color:#625e48; margin:0; }
.comic-prologue-foot { display:flex; justify-content:space-between; gap:20px; max-width:1300px; margin:25px auto 0; align-items:center; }
.comic-prologue-foot p { color:#b9c1ae; font-size:9px; margin:0; }.comic-public .comic-prologue-foot .text-link { color:#e7c896; }
.comic-public .public-company-section { background:#f1e7d1; border:0; padding:80px 7%; }
.comic-public .public-company-heading h2 { color:#293a2b; font-size:58px; }.comic-public .public-company-heading > p { color:#6a624f; }
.comic-public .public-company-index { border-color:#b7a281; }.comic-public .public-company-index a, .comic-public .public-company-index a[aria-current="true"] { color:#794532; }
.comic-public .public-company-index a[aria-current="true"]:after { background:#794532; }
.comic-public .public-varyx-feature { background:#f9f0dd; border:2px solid #34402f; box-shadow:5px 5px 0 #bdae8d; }
.comic-public .public-varyx-copy h3, .comic-public .public-varyx-copy p.public-character-intro { color:#35412e; }
.comic-public .public-varyx-copy p.public-character-intro em { color:#8d5133; }
.comic-public .public-varyx-copy > p:not(.eyebrow):not(.public-character-intro) { color:#67634e; }
.comic-public .public-character-number { color:#8c6440; }.comic-public .public-character-story { border-color:#c3af87; }
.comic-public .public-character-story summary { color:#754430; }.comic-public .public-character-story p { color:#615d4a; }
.comic-public .public-companion-grid { gap:26px; }.comic-public .public-companion-card { position:relative; overflow:hidden; padding:0 30px 23px; background:#f9efda; border:2px solid #3c4330; box-shadow:4px 5px 0 #b7a888; }
.companion-emblem { height:230px; margin:0 -30px 22px; background-image:url('/art/company-emblems.jpg'); background-size:200% 200%; border-bottom:2px solid #35412e; }
.emblem-holly .companion-emblem { background-position:0 0; }.emblem-caelira .companion-emblem { background-position:100% 0; }.emblem-sylvaris .companion-emblem { background-position:0 100%; }.emblem-pimble .companion-emblem { background-position:100% 100%; }
.comic-public .public-companion-top { margin-bottom:15px; }.emblem-caption { font-size:7px; color:#8e7859; letter-spacing:1.4px; }
.comic-public .public-companion-card h3 { color:#2d3c2c; font-size:46px; }.comic-public .public-companion-intro { color:#69614c; min-height:0; }
.comic-public .public-dice-section { padding:75px 7%; border-top:1px solid #b3a17f; gap:60px; }
.comic-public .public-dice-intro h2 { color:#344030; }.comic-public .public-dice-intro > p:not(.eyebrow),.comic-public .public-dice-intro p.public-dice-explanation { color:#6a624e; }.comic-public .public-dice-equation { color:#885039; border-color:#c9b692; }.comic-public .public-practice-note svg { color:#885039; }
.comic-public .public-dice-table { border:2px solid #26352b; border-radius:0; box-shadow:7px 7px 0 #bca783; background:#263c35; color:#eee2c5; }
.comic-public .public-dice-table .eyebrow { color:#d0af78; }.comic-public .public-dice-table input,.comic-public .public-dice-table select { color:#eee2c5; background:#1d3029; border-color:#63735a; }
.comic-public .public-game-nights { max-width:none; margin:0; padding:70px 10%; background:#dac4a0; border-top:2px solid #3b402e; border-bottom:2px solid #3b402e; }
.comic-public .public-game-night-mark { min-height:300px; background:url('/art/relic-desk.jpg') center/cover; border:2px solid #303b2b; transform:rotate(-2deg); box-shadow:5px 6px 0 #a89571; }.comic-public .public-game-night-mark > * { visibility:hidden; }
.comic-public .public-game-night-copy h2 { color:#344030; }.comic-public .public-game-night-copy > p:not(.eyebrow), .comic-public .public-game-night-copy .private-note { color:#615a45; }
.comic-public .public-closing { background:#f5ead5; color:#34402d; border:0; padding:65px 7%; }.comic-public .public-closing h2 { color:#34402d; }.comic-public .public-footer { background:#f5ead5; color:#766b53; border-color:#b6a17d; }.comic-public .public-footer p { color:#766b53; }
.comic-public .public-portrait-dialog { background:#f3e8ce; color:#34402d; border-color:#423e2c; }.comic-public .public-portrait-dialog-heading h2 { color:#34402d; }.comic-public .public-back-top { border-radius:0; }
.comic-app-shell { --bg:#eee3ce; --bg-deep:#e0d0ad; --panel:#fcf3e0; --panel-high:#e7d8b9; --text:#2d382b; --muted:#706751; --gold:#92552f; --gold-soft:#a7794a; --green:#4c6242; --border:#bdab88; --border-soft:#d1c09d; background:#eee3ce; color:#2d382b; }
.comic-app-shell .sidebar { background:#253b32; --text:#ede3c8; --muted:#b5c0a9; --gold:#d6b87e; --border:#566748; --border-soft:#405442; color:#ede3c8; border-right:3px solid #182b23; }
.comic-app-shell .sidebar nav a { border-radius:0; border-bottom:1px solid #3c5242; }.comic-app-shell .sidebar nav a.active { background:#e4c996; color:#2d3b29; border-left:4px solid #a35b39; }.comic-app-shell .sidebar .profile { background:#1b3028; }
.comic-app-shell .topbar { background:#f6ecd8; border-bottom:1px solid #bda983; }.comic-app-shell .topbar .quiet-status { color:#616747; }
.comic-app-shell .panel { border:1px solid #bca782; box-shadow:2px 3px 0 #c9b898; border-radius:2px; background:#fbf1dc; }
.comic-app-shell .button-primary { background:#743e31; color:#fff0d0; border-color:#592e26; box-shadow:2px 3px 0 #b49a72; border-radius:1px; }.comic-app-shell .button-outline { border-color:#9b8059; border-radius:1px; }
.comic-app-shell .search, .comic-app-shell input, .comic-app-shell select, .comic-app-shell textarea { background:#fff8e8; color:#343d2c; border-color:#b49e75; }
.comic-app-shell .muted { color:#71664e; }.comic-app-shell .pill { background:#e6d6b2; color:#675035; border-color:#b59b6d; }.comic-app-shell .floating-dice { background:#293f30; color:#e8d5a8; border-radius:3px; }.comic-app-shell .dice-drawer { background:#f6ead0; }.comic-app-shell .toast { background:#263c31; color:#f3e6c9; }
.comic-app-shell .character-portrait-frame { padding:7px; border:2px solid #3b442e; background:#e4cc9d; box-shadow:4px 4px 0 #b9a47b; }.comic-app-shell .character-portrait { max-height:480px; }.comic-app-shell .character-portrait-frame figcaption { color:#6e5c3c; font-size:10px; }
.comic-app-shell .lore-hero { background:linear-gradient(90deg,#2d463af2,#2d463a70),url('/art/lantern-comic.jpg') right center/cover; color:#f4e4c0; border:2px solid #2c3a2b; }.comic-app-shell .lore-hero .eyebrow { color:#d5b77c; }
.edited-lore { padding:32px 14px; }.edited-lore h3 { font-size:38px; }.edited-lore > p { max-width:64ch; line-height:1.95; }.original-lore { margin:24px 0 0; border-top:1px solid #b8a179; padding:17px 0; }.original-lore summary,.original-sheets summary { cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:12px; gap:16px; }.original-lore > div { margin-top:24px; }.original-lore h4 { font:26px/1.2 var(--serif); }.original-sheets { margin-top:24px; }.original-sheets[open] summary { margin-bottom:20px; }
.comic-app-shell .loadout-heading { padding:16px; background:linear-gradient(90deg,#f7eacf 45%,#f7eacf00),url('/art/relic-desk.jpg') right 60%/60% auto; border-bottom:1px solid #b6a07b; min-height:110px; }.comic-library-tools { margin-bottom:20px; }
.spellbook { margin:28px 0; border:2px solid #41452e; background:#fcf2dc; box-shadow:5px 6px 0 #bea881; }.spellbook-cover { padding:35px 30px; background:linear-gradient(90deg,#213b31 30%,#213b31a0 65%,transparent),url('/art/relic-desk.jpg') right center/cover; color:#f4e3be; }.spellbook-cover .eyebrow { color:#dabb83; display:flex; align-items:center; gap:8px; font-size:8px; }.spellbook-cover h2 { font-size:44px; }.spellbook-cover p:last-child { color:#c7cfb2; font-size:12px; margin:0; }
.spellbook-controls { padding:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid #c3ac83; }.spellbook-controls .search { flex:1; min-width:150px; max-width:260px; }.spellbook-tabs { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }.spellbook-tabs button { padding:9px 12px; font-size:10px; border:1px solid #c2ac84; }.spellbook-tabs button[aria-pressed=true] { background:#344733; color:#f3dfb6; border-color:#344733; }
.spellbook-spread { display:grid; grid-template-columns:minmax(140px,.7fr) minmax(0,1.3fr); min-height:410px; }.spellbook-spread nav { display:flex; flex-direction:column; padding:15px 10px; max-height:590px; overflow:auto; border-right:1px solid #baaa8a; background:#ecdfc4; }.spellbook-spread nav button { display:flex; text-align:left; gap:10px; align-items:center; padding:12px 10px; border-bottom:1px solid #d2bf9b; }.spellbook-spread nav button.selected { background:#fbf0d7; box-shadow:inset 3px 0 #8a4a30; }.spellbook-spread nav button > svg { flex-shrink:0; color:#946039; }.spellbook-spread nav strong { display:block; font:600 19px/1.2 var(--serif); color:#37422d; }.spellbook-spread nav small { display:block; font-size:9px; color:#83714f; margin-top:4px; }.spellbook-page { min-width:0; padding:30px 26px; background:linear-gradient(90deg,#d1b98733,transparent 7%); }.spellbook-page-number { display:block; text-align:right; color:#a38b62; font-size:9px; letter-spacing:2px; margin-bottom:17px; }.spellbook-page h3 { font-size:38px; }.spellbook-translation { font:italic 23px var(--serif); color:#8b6740; }.spellbook-page > p { font-size:12px; line-height:1.85; }.spellbook-page .action-details { border-color:#cdb894; background:transparent; }.spellbook-footnote { padding-top:18px; border-top:1px solid #ccb991; color:#8b7957; margin-top:24px; font-size:10px!important; }.spellbook-empty { padding:20px; font-size:12px; }
@media (max-width:1100px) { .comic-public .public-hero { gap:25px; grid-template-columns:1fr 1.1fr; min-height:590px; }.comic-public .hero-copy h1 { font-size:61px; }.comic-cover > img { height:365px; }.comic-cover figcaption strong { font-size:24px; }.comic-public .intro-grid { gap:35px; }.comic-panel-art { height:295px; }.comic-panel h3 { font-size:23px; }.spellbook-spread { grid-template-columns:1fr; }.spellbook-spread nav { max-height:210px; border-right:0; border-bottom:1px solid #baa482; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .comic-public .public-nav { height:auto; min-height:110px; padding:18px 6% 0; }.comic-public .public-nav nav { border-color:#c9b68d; }.comic-public .public-hero { display:flex; flex-direction:column; align-items:stretch; padding:43px 7% 60px; gap:35px; min-height:0; }.comic-public .hero-copy h1 { font-size:64px; letter-spacing:-1.5px; margin:20px 0; }.comic-public .hero-copy > p:not(.eyebrow) { font-size:13px; }.comic-issue { display:none; }.comic-public .public-hero-actions { flex-direction:row; align-items:center; gap:14px; }.comic-cover { transform:rotate(.6deg); box-shadow:5px 6px 0 #30372c; }.comic-cover > img { height:290px; }.comic-cover figcaption { padding:15px 8px 10px; }.comic-cover figcaption strong { font-size:25px; }.comic-cover figcaption span { font-size:6px; }.comic-public .intro-section { padding:50px 7%; }.comic-public .intro-grid { display:block; }.comic-public .intro-grid h2 { font-size:47px; margin:20px 0; }.comic-public .public-play-steps li { padding:22px 0; }.comic-public .public-play-steps { margin-top:28px; }.comic-prologue { padding:50px 7%; }.comic-prologue-heading { display:block; margin-bottom:28px; }.comic-prologue-heading h2 { font-size:46px; margin-bottom:22px; }.comic-prologue-heading > p { font-size:11px; }.comic-strip { grid-template-columns:1fr; gap:22px; }.comic-panel-art { height:330px; background-size:310% auto; }.comic-panel h3 { font-size:29px; }.comic-panel figcaption { padding:18px 13px; }.comic-prologue-foot { align-items:flex-start; flex-direction:column; gap:13px; }.comic-public .public-company-section { padding:50px 7%; }.comic-public .public-company-heading h2 { font-size:46px; }.comic-public .public-companion-card { padding:0 24px 20px; }.companion-emblem { margin:0 -24px 20px; height:235px; }.comic-public .public-dice-section { padding:50px 7%; gap:25px; }.comic-public .public-dice-intro h2 { font-size:48px; }.comic-public .public-game-nights { padding:50px 7%; }.comic-public .public-game-night-mark { min-height:250px; }.comic-public .public-game-night-copy h2 { font-size:44px; }.comic-public .public-closing { padding:50px 7%; }.comic-app-shell .main-content { padding-left:20px; padding-right:20px; }.spellbook-cover { padding:28px 22px; }.spellbook-cover h2 { font-size:39px; }.spellbook-controls { padding:15px; }.spellbook-controls .search { max-width:none; flex-basis:100%; }.spellbook-page { padding:24px 19px; }.spellbook-spread nav { grid-template-columns:1fr; max-height:220px; }.spellbook-spread nav button { min-height:57px; }.edited-lore { padding:24px 5px; }.edited-lore h3 { font-size:32px; } }
@media (prefers-reduced-motion:no-preference) { .comic-cover { animation:comic-arrive .75s ease both; }.comic-public .public-companion-card { transition:transform .2s,box-shadow .2s; }.comic-public .public-companion-card:hover { transform:translateY(-4px); box-shadow:5px 9px 0 #b7a888; } }
@keyframes comic-arrive { from { opacity:.6; transform:translateY(15px) rotate(0); } to { opacity:1; transform:translateY(0) rotate(1deg); } }

.comic-app-shell .breadcrumb, .comic-app-shell .breadcrumb b, .comic-app-shell .app-footer { color:#706247; }
.comic-app-shell .sidebar nav a.active svg { color:#38462f; }
.spellbook-page-number { color:#78613c; }.spellbook-footnote { color:#716040; }

.threshold{--ink:#080b11;--gold:#e5bf83;--ivory:#f0eadf;--hush:#abaebb;background:var(--ink);color:var(--ivory);font-family:Inter,Arial,sans-serif;overflow:hidden;isolation:isolate}.threshold *{box-sizing:border-box}.threshold h1,.threshold h2,.threshold p{margin:0}.threshold h1,.threshold h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.055em;line-height:.98}.threshold h1 em,.threshold h2 em{font-weight:400;color:var(--gold)}.threshold a{text-decoration:none;color:inherit}.threshold button{font:inherit;cursor:pointer}.threshold button:focus-visible,.threshold a:focus-visible{outline:2px solid #f3cc89;outline-offset:7px}.threshold-nav{position:absolute;z-index:20;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 4.5vw;border-bottom:1px solid #c8ad761a}.threshold-brand{display:flex;gap:13px;align-items:center;color:var(--gold)!important;font-size:13px;letter-spacing:.2em;font-weight:500}.threshold-brand svg{width:42px;height:48px}.threshold-brand small{display:block;font-size:8px;color:#b6b7bc;letter-spacing:.22em;margin-top:7px}.threshold-nav nav{display:flex;gap:34px;align-items:center;font-size:11px;letter-spacing:.06em}.threshold-nav-enter{display:flex;align-items:center;gap:17px;border-bottom:1px solid #cba37077;padding:10px 0}.threshold-hero{position:relative;min-height:900px;height:100svh;max-height:1150px;display:flex;align-items:center;padding:125px 7vw 140px;background:#080c13}.threshold-landscape{position:absolute;inset:-2%;background:url('/art/threshold-portal-v1.webp') 68% 50%/cover;transform:translate3d(calc(var(--mx,0) * -10px),calc(var(--my,0) * -7px),0) scale(1.035);transition:transform 1.3s ease-out;will-change:transform}.threshold-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#050a13c4 0%,#07102055 40%,transparent 75%),linear-gradient(0deg,#080b11 0%,transparent 24%,transparent 82%,#060a136b)}.threshold-haze{position:absolute;inset:25% -20% -5%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 70% 70%,#8e969f1d,transparent 60%);filter:blur(20px);animation:threshold-mist 22s ease-in-out infinite alternate}.threshold-particles{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}.threshold-copy{position:relative;z-index:5;width:680px;max-width:62%}.threshold-kicker{font-size:9px;font-weight:600;letter-spacing:.27em;line-height:1.8!important;color:#d7bc95;margin-bottom:26px!important}.threshold-kicker>span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#e8bf7e;box-shadow:0 0 14px #ffbc4e;margin-right:10px}.threshold h1{font-size:clamp(70px,6.6vw,108px);text-shadow:0 2px 40px #03060b88}.threshold-deck{color:#c6c6cd;font-size:14px;line-height:1.9;margin-top:30px!important;max-width:440px}.threshold-actions{display:flex;align-items:flex-start;flex-direction:column;gap:22px;margin-top:35px}.threshold-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:18px 26px;background:linear-gradient(110deg,#e6c99b,#b88d58);border:1px solid #e5c79b;color:#1e1a14!important;font-size:11px;letter-spacing:.05em;font-weight:600;box-shadow:0 4px 35px #e6ad5220;transition:box-shadow .3s,transform .3s}.threshold-button:hover{box-shadow:0 0 40px #d6ae6955;transform:translateY(-2px)}.threshold-link{display:inline-flex;align-items:center;gap:15px;font-size:11px;color:#cac8cd!important;background:none;border:0;padding:0}.threshold-link:hover{color:var(--gold)!important}.threshold-orbits{position:absolute;left:76.5%;top:37%;width:19vw;aspect-ratio:1;transform:translate(-50%,-50%);z-index:2;pointer-events:none;color:#e8bd7d;opacity:.65}.threshold-orbits i{position:absolute;inset:0;border:1px solid #f7c78888;border-radius:50%;box-shadow:0 0 28px #ffa63c22;animation:threshold-orbit 35s linear infinite}.threshold-orbits i:before,.threshold-orbits i:after{content:"";position:absolute;left:50%;top:-3px;width:5px;height:5px;background:#ffe5ad;border-radius:50%;box-shadow:0 0 18px #ffc068}.threshold-orbits i:after{top:auto;bottom:-3px}.threshold-orbits i:nth-child(2){inset:8%;animation-direction:reverse;border-style:dashed;opacity:.7}.threshold-orbits i:nth-child(3){inset:-8%;opacity:.25;animation-duration:70s}.threshold-orbits>span{position:absolute;left:46%;top:46%;font-size:20px;opacity:.35}.threshold-awaken{position:absolute;left:76.5%;top:40%;z-index:7;transform:translate(-50%,-50%);width:135px;height:135px;border:0;border-radius:50%;background:#12101b55;color:#ffe3ae;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-shadow:0 0 20px #ffb34c;transition:background .5s,box-shadow .5s}.threshold-awaken span:last-child{font-size:9px;letter-spacing:.07em}.threshold-awaken-ring{position:absolute;inset:0;border:1px solid #e8bb7155;border-radius:50%;animation:threshold-beacon 4s ease-in-out infinite}.threshold-awaken:hover{background:#2c203055;box-shadow:0 0 100px 50px #e7ad3325}.gate-awake .threshold-awaken-ring{animation:threshold-awake 2s ease-out forwards}.gate-awake .threshold-orbits{filter:drop-shadow(0 0 22px #ffc778);opacity:1}.threshold-whisper{position:absolute;right:6%;width:37%;top:65%;z-index:5;text-align:center;font-family:Georgia,serif;font-size:19px;font-style:italic;color:#ffe4ae;min-height:48px;line-height:1.5;text-shadow:0 3px 25px black}.threshold-footnote{position:absolute;bottom:59px;left:7vw;right:7vw;z-index:5;display:flex;justify-content:space-between;align-items:center;color:#9298a6;font-size:8px;letter-spacing:.2em}.threshold-footnote a{display:flex;gap:15px;align-items:center;color:#dcc298}.threshold-settings{position:absolute;z-index:8;bottom:17px;left:7vw;display:flex;gap:20px}.threshold-settings button{background:none;border:0;color:#adb0bb;padding:5px 0;font-size:9px;display:flex;align-items:center;gap:6px}.threshold-settings [hidden],.threshold [hidden]{display:none!important}.threshold-choice{position:relative;padding:135px 9vw 145px;display:grid;grid-template-columns:1fr 1fr;gap:9vw;background:radial-gradient(ellipse at 50% 0,#20213866,transparent 60%)}.threshold-choice:before{content:"";position:absolute;inset:0 7vw auto;height:1px;background:linear-gradient(90deg,transparent,#b3966855,transparent)}.threshold-choice-symbol{position:absolute;top:-28px;left:calc(50% - 28px);height:56px;width:56px;background:#0d101a;border:1px solid #9e835655;transform:rotate(45deg);display:grid;place-items:center}.threshold-choice-symbol svg{height:32px;width:32px;transform:rotate(-45deg);color:#bfa279}.threshold-choice-symbol span{display:none}.threshold h2{font-size:clamp(48px,4.9vw,76px)}.threshold-choice-heading>p:last-child{font-size:13px;line-height:1.9;color:var(--hush);margin-top:25px}.threshold-tale{padding-top:7px}.threshold-scene-number{font-size:9px;letter-spacing:.23em;color:#8d929f;margin-bottom:22px!important}.threshold-tale-text{font-family:Georgia,serif;font-size:clamp(22px,2vw,29px);line-height:1.65;min-height:190px;color:#d6d5dd}.threshold-choices{margin:25px 0 18px;display:flex;flex-direction:column;border-top:1px solid #ad93722e}.threshold-choices button{padding:20px 0;display:flex;align-items:center;gap:19px;text-align:left;background:none;color:#dcd6ca;border:0;border-bottom:1px solid #ad93722e;font-size:12px;transition:padding .25s,color .25s}.threshold-choices button:hover{padding-left:9px;color:#f6cc82}.threshold-choices button span{font-size:9px;color:#9b7a56;letter-spacing:.08em}.threshold-choices button svg{margin-left:auto;color:#9b7a56}.threshold-tale-note{color:#7e8391;font-size:9px!important;line-height:1.7;margin:20px 0!important}.threshold-tale.story-shift .threshold-tale-text{animation:threshold-story .5s ease-out}.threshold-roleplay{min-height:850px;display:grid;grid-template-columns:1fr 1fr;position:relative;gap:9vw;padding:80px 9vw 100px;background:radial-gradient(ellipse at 25% 45%,#2822347a,transparent 55%)}.threshold-roleplay-art{position:relative;display:grid;place-items:center;min-height:450px;color:#d1a86c}.threshold-roleplay-art:before,.threshold-roleplay-art:after{content:"";position:absolute;width:90%;aspect-ratio:1;border:1px solid #9677462a;border-radius:50%}.threshold-roleplay-art:after{width:70%;border-style:dashed;animation:threshold-orbit 100s linear infinite}.threshold-die{width:68%;filter:drop-shadow(0 0 40px #d989393b);transform:rotate(-12deg);animation:threshold-float 10s ease-in-out infinite}.threshold-die svg{width:100%;height:auto;stroke-width:.3px}.threshold-orbit-word{position:absolute;bottom:16%;font-size:8px;letter-spacing:.42em;opacity:.6}.threshold-roleplay-copy{padding-top:50px}.threshold-roleplay-copy>p:not(.threshold-kicker){margin-top:30px;font-size:13px;line-height:1.95;color:var(--hush);max-width:455px}.threshold-whatever{display:flex;gap:30px;border-top:1px solid #a2856133;padding-top:26px;margin-top:33px;font-size:10px;line-height:1.9;color:#90949f}.threshold-whatever strong{font-weight:400;color:#d0b58f}.threshold-gather{position:relative;text-align:center;padding:110px 25px 120px;background:linear-gradient(#080b11bb,#080b11eb),url('/art/threshold-portal-v1.webp') center 45%/cover}.threshold-gather-stars{color:#d8ab6c;letter-spacing:20px;margin-bottom:40px}.threshold-gather-stars span{font-size:30px}.threshold-gather>p:not(.threshold-kicker){margin:28px auto 32px;font-size:13px;color:#bfc0ca}.threshold-gather small{display:block;font-size:9px;letter-spacing:.04em;color:#8d92a0;margin-top:20px}.threshold-footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:32px 7vw;border-top:1px solid #b89a6a22;color:#858994;font-size:9px}.threshold-footer>span{letter-spacing:.18em;color:#d0b486}.threshold-skip{position:fixed;left:20px;top:-80px;z-index:100;padding:15px;background:#e9c695;color:#161312!important}.threshold-skip:focus{top:10px}.threshold.motion-paused *,.threshold.motion-paused *:before,.threshold.motion-paused *:after,.threshold.page-away *,.threshold.page-away *:before,.threshold.page-away *:after{animation-play-state:paused!important}.threshold.motion-paused .threshold-landscape{transform:none;transition:none}.threshold.motion-paused .threshold-tale.story-shift .threshold-tale-text{animation:none}.threshold section{scroll-margin-top:20px}
@keyframes threshold-mist{to{transform:translate3d(8%,4%,0) scale(1.2)}}@keyframes threshold-orbit{to{rotate:360deg}}@keyframes threshold-beacon{50%{transform:scale(1.1);opacity:.3}}@keyframes threshold-awake{0%{transform:scale(.8);opacity:1}100%{transform:scale(3);opacity:0}}@keyframes threshold-story{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes threshold-float{50%{transform:translateY(-22px) rotate(8deg)}}
@media(min-width:1800px){.threshold-hero{min-height:1000px}.threshold h1{font-size:116px}}
@media(max-width:1000px){.threshold-hero{min-height:800px;padding-left:6vw}.threshold-copy{max-width:68%}.threshold h1{font-size:clamp(67px,9vw,90px)}.threshold-landscape{background-position:63% center}.threshold-choice,.threshold-roleplay{gap:6vw;padding-left:6vw;padding-right:6vw}.threshold-nav{padding:23px 5vw}.threshold-nav nav{gap:20px}.threshold-orbits{width:25vw;left:78%;top:42%}.threshold-awaken{left:78%;top:44%;width:110px;height:110px}.threshold-whisper{font-size:16px;top:65%}}
@media(max-width:650px){.threshold-nav{padding:19px 6vw;gap:12px}.threshold-brand{font-size:10px;letter-spacing:.12em;gap:8px}.threshold-brand svg{width:29px;height:35px}.threshold-brand small{font-size:6px;letter-spacing:.1em}.threshold-nav nav>a:first-child{display:none}.threshold-nav-enter{font-size:9px;gap:6px}.threshold-nav-enter svg{width:13px}.threshold-hero{min-height:860px;max-height:none;height:100svh;align-items:flex-start;padding:150px 7vw 100px}.threshold-copy{max-width:none;width:100%}.threshold h1{font-size:clamp(59px,13.5vw,83px);max-width:430px}.threshold-kicker{font-size:7px;letter-spacing:.2em}.threshold-landscape{background-position:64% center;opacity:.64}.threshold-hero:after{background:linear-gradient(90deg,#060912bd,transparent),linear-gradient(0deg,#080b11,transparent 35%,#060b1466 90%)}.threshold-deck{font-size:12px;max-width:300px;margin-top:24px!important}.desktop-break{display:none}.threshold-actions{margin-top:24px;gap:19px}.threshold-button{font-size:10px;padding:16px 22px;gap:20px}.threshold-awaken{left:78%;top:76%;width:90px;height:90px}.threshold-awaken span:last-child{font-size:7px}.threshold-orbits{left:78%;top:76%;width:120px}.threshold-whisper{left:7%;right:auto;top:75%;width:43%;font-size:16px;text-align:left}.threshold-footnote{bottom:60px;left:7%;right:7%}.threshold-footnote>span{display:none}.threshold-footnote a{font-size:7px}.threshold-settings{bottom:21px}.threshold-choice{display:block;padding:90px 8vw}.threshold h2{font-size:52px}.threshold-choice-heading>p:last-child{font-size:12px}.threshold-tale{padding-top:45px}.threshold-tale-text{font-size:24px;min-height:0}.threshold-scene-number{font-size:8px}.threshold-choices button{font-size:12px}.threshold-roleplay{display:flex;flex-direction:column;padding:0 8vw 85px;gap:0;min-height:0}.threshold-roleplay-art{min-height:350px;max-width:340px;width:100%;align-self:center}.threshold-die{max-width:200px}.threshold-roleplay-copy{padding-top:15px}.threshold-roleplay-copy>p:not(.threshold-kicker){font-size:12px}.threshold-whatever{gap:20px;font-size:9px}.threshold-gather{padding:85px 7vw}.threshold-gather>p:not(.threshold-kicker){line-height:1.9;max-width:280px;font-size:12px}.threshold-footer{flex-wrap:wrap;justify-content:center;text-align:center;padding:28px;gap:17px}.threshold-footer p{width:100%;order:3;font-size:8px}}
@media(prefers-reduced-motion:reduce){.threshold *,.threshold *:before,.threshold *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.threshold-landscape{transform:none!important}}