/* Daeva Cheat Sheets: site styles.
   Layout: white pages, one top bar. Home, General, Dungeons and Resources, plus one web page per guide.
   Type: Big Shoulders Display for poster titles, Outfit for headings, Figtree for reading.
   Guide header art and diagrams come from guides.css. */

/* ---- tokens ---- */
:root {
  --bg: #FFFFFF;
  --fg: #121318;
  --muted: #5B5D70;
  --ink: #1F2152;
  --line: #E6E7EF;
  --line-strong: #C3C5D6;
  --hl: #DCE3FF;
  --pink: #FFC4DA;
  --on-pastel: #1B1C30;
  --tag-bg: #1F2152;
  --tag-fg: #FFFFFF;
  --poster: 'Big Shoulders Display', 'Oswald', 'Arial Narrow', sans-serif;
  --display: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
  --body: 'Figtree', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --wrap: 1120px;
  color-scheme: light;
}

/* ---- dark mode: set on <html data-theme="dark"> by the script in each page's head ---- */
:root[data-theme="dark"] {
  --bg: #15162B;
  --fg: #ECEBF5;
  --muted: #A9ABC4;
  --ink: #D6D9FF;
  --line: #2B2D4A;
  --line-strong: #4A4D72;
  --tag-bg: #D6D9FF;
  --tag-fg: #1B1C30;
  --art-ink: #D6D9FF;
  --art-paper: #1E2040;
  color-scheme: dark;
}
/* Pastel art (guide headers, bands, symbol circles) stays light, like stickers on a dark page. */
:root[data-theme="dark"] :is(.w-hero, .w-band:not(.w-band-dark), .sym, .gs-ferocious-2, .gs-ferocious-21) {
  --bg: #FFFFFF;
  --fg: #121318;
  --muted: #5B5D70;
  --ink: #1F2152;
  --line: #E6E7EF;
  --tag-bg: #1F2152;
  --tag-fg: #FFFFFF;
  --art-ink: #23255C;
  --art-paper: #FFFFFF;
  color: var(--fg);
}
/* The drawings are navy line art on white; these follow the theme. */
svg [stroke="#23255C"] { stroke: var(--art-ink, #23255C); }
svg [fill="#23255C"] { fill: var(--art-ink, #23255C); }
svg [fill="#FFFFFF"] { fill: var(--art-paper, #FFFFFF); }
svg [stroke="#FFFFFF"] { stroke: var(--art-paper, #FFFFFF); }
:root[data-theme="dark"] .w-mark { filter: brightness(1.9) saturate(.85); }
/* Scalloped and zigzag edges are cut from the page colour, not the art's paper. */
:root[data-theme="dark"] :is(.w-band-edge, .gs-s6, .gs-s2) { --art-paper: #15162B; }
:root[data-theme="dark"] :is(.hl, .mark) {
  --mark-dk: color-mix(in srgb, var(--mark, #DCE3FF) 30%, var(--bg));
  background-image: linear-gradient(var(--mark-dk), var(--mark-dk));
}

/* ---- theme toggle ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -7px 0;
  padding: 5px 13px 5px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
.theme-toggle:hover { background: var(--hl); }
:root[data-theme="dark"] .theme-toggle:hover { background: var(--line); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme-toggle svg { width: 22px; height: 22px; flex: none; transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.theme-toggle:hover svg { transform: rotate(-15deg); }
@media (prefers-reduced-motion: reduce) { .theme-toggle:hover svg { transform: none; } }
.theme-toggle .i-sun, :root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }

/* ---- base ---- */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
.wrap { max-width: var(--wrap); margin-inline: auto; }

/* ---- links: a marker that slides in from the left ---- */
.hl, .mark {
  background-image: linear-gradient(var(--mark, var(--hl)), var(--mark, var(--hl)));
  background-repeat: no-repeat;
  background-size: 0% 70%;
  background-position: 0 90%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 3px;
  transition: background-size .32s cubic-bezier(.3, .7, .2, 1);
}
.hl {
  color: var(--fg);
  padding: 0 .14em;
  margin: 0 -.14em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--line-strong);
}
.hl:hover, .hl:focus-visible, .hl[aria-current="page"] {
  background-size: 100% 70%;
  text-decoration-color: transparent;
}
.hl:focus-visible, .row:focus-visible, .feature:focus-visible, .brand:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---- top bar ---- */
.topbar {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.brand .atreia { width: 16px; height: 20px; }
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
}
.nav .hl { text-decoration: none; }

/* ---- emblems ---- */
.wing { width: clamp(52px, 10vw, 112px); height: auto; flex: none; overflow: visible; }
.wing .w-body { stroke-width: 3.5; stroke-linejoin: round; }
.wing .w-line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.wing-e .w-body { fill: var(--bg); stroke: var(--ink); }
.wing-e .w-line { stroke: var(--ink); }
.wing-a .w-body { fill: var(--ink); stroke: var(--ink); }
.wing-a .w-line { stroke: var(--bg); }
.atreia { width: 20px; height: 25px; flex: none; }
.atreia .a-top { fill: var(--bg); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.atreia .a-bot { fill: var(--ink); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.atreia .a-core { fill: var(--pink); }

/* ---- type ---- */
.site-title {
  margin: 0;
  min-width: 0;
  font-family: var(--display);
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(38px, 7.2vw, 84px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.poster {
  margin: 0;
  font-family: var(--poster);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(64px, 12vw, 144px);
  line-height: 0.86;
}
.sec-h2 {
  margin: 0 0 8px;
  font-family: var(--poster);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(34px, 4.6vw, 48px);
  line-height: 1;
}
.sec-gap { margin-top: 56px; }
.sec-h3, .g-h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  font-size: 21px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.lede { margin: 0; max-width: 56ch; font-size: 19px; text-wrap: pretty; }
.sec-note { margin: 0 0 12px; max-width: 64ch; color: var(--muted); text-wrap: pretty; }
.prose { margin: 0; max-width: 62ch; text-wrap: pretty; }
.prose + .prose { margin-top: 12px; }
.note { margin: 0; color: var(--muted); font-size: 16px; }

/* ---- home ---- */
.masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-block: 64px 56px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 26px);
  max-width: 100%;
}
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 64px;
  padding-top: 48px;
}
@media (min-width: 900px) {
  .home-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
.feature {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 18px 6px;
  color: inherit;
  text-decoration: none;
}
.browse { list-style: none; margin: 8px 0 0; padding: 0; }
.browse li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 16px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}
.browse p { grid-column: 1 / -1; margin: 0; max-width: 60ch; text-wrap: pretty; }
.browse-name { font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; justify-self: start; }
.browse-count { color: var(--muted); font-size: 15px; }
.facts { margin: 0; }
.facts dt { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 16px; line-height: 1.3; }
.facts dt + dd { margin: 2px 0 0; text-wrap: pretty; }
.facts dd + dt { margin-top: 18px; }

/* ---- directory pages ---- */
.page-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-block: 48px 36px;
}
.rows { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; }
@media (min-width: 860px) {
  .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding-block: 20px;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.sym {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--band);
  display: grid;
  place-items: center;
  transition: transform .3s cubic-bezier(.3, .7, .2, 1);
}
.sym svg { width: 22px; height: 26px; }
.sym-lg { width: 104px; height: 104px; flex: none; }
.sym-lg svg { width: 34px; height: 40px; }
.sym-dark svg path, .sym-dark svg circle { fill: #FFE6A6; }
.row:hover .sym, .row:focus-visible .sym, .feature:hover .sym, .feature:focus-visible .sym { transform: rotate(-10deg) scale(1.06); }
.row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row-title { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); }
.mark { padding: 0 .12em; margin: 0 -.12em; }
.row:hover .mark, .row:focus-visible .mark, .feature:hover .mark, .feature:focus-visible .mark { background-size: 100% 70%; }
.row-short { font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--muted); }

/* ---- marks shared with the guides ---- */
.tag {
  display: inline-block;
  background: var(--tag-bg);
  color: var(--tag-fg);
  border-radius: 6px;
  padding: 1px 8px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: 1px;
}
.ribbon {
  margin: 0;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--pink);
  color: var(--on-pastel);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
  padding: 12px 40px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.ribbon p { margin: 0; }
.ribbon-sm { padding: 6px 28px; font-size: 14px; }
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pink);
  color: var(--on-pastel);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.kr { font-weight: 700; font-size: 14px; color: var(--muted); }

/* ---- resources ---- */
.res-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 64px; }
@media (min-width: 860px) {
  .res-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.legend {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 16px 20px;
  align-items: center;
}
.legend dt { justify-self: start; }
.legend dd { margin: 0; text-wrap: pretty; }
.src-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 44px; margin-top: 8px; }
@media (min-width: 700px) {
  .src-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .src-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.src-group { padding-block: 16px; border-top: 1px solid var(--line); min-width: 0; }
.src-h { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); }
.src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15.5px; line-height: 1.5; }
.src li { min-width: 0; overflow-wrap: anywhere; }

/* ---- guide pages ---- */
.guide { max-width: 816px; margin-inline: auto; padding-block: 24px 8px; }
.crumbs { margin: 0 0 18px; font-family: var(--display); font-weight: 600; font-size: 16px; }
.w-hero { position: relative; width: 100%; overflow: hidden; }
.w-hero > .w-fit-inner { width: 816px; }
.g-meta { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 15px; }
.g-notice { margin-top: 18px; }
.g-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 48px; margin-top: 64px; }
@media (min-width: 760px) {
  .g-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.g-col { padding-top: 16px; border-top: 1px solid var(--line); min-width: 0; }
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.55; }
.checks li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; text-wrap: pretty; }
.checks li::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 6px;
  background: var(--pink);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
}
.pager a:last-child { text-align: right; }

/* ---- guide content, converted from the canvases ---- */
.w-body { margin-top: 40px; }
.w-body > :nth-child(n+2) { margin-top: 44px; }
.w-body h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.w-body h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.w-body p { margin: 0; text-wrap: pretty; }
.w-body figcaption { font-weight: 600; }
.w-stack { display: flex; flex-direction: column; gap: 12px; }
.w-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 36px 48px;
  align-items: start;
}
.w-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.w-inline { display: inline-flex; align-items: center; gap: 8px; }
.w-numhead { display: flex; align-items: center; gap: 12px; }
.w-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pink);
  color: var(--on-pastel);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.w-list, .w-steps, .w-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.w-list > li:not([class]) { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; }
.w-mark { width: 11px; height: auto; margin-top: 6px; }
.w-steps { gap: 14px; }
.w-steps > li:not([class]) { display: flex; align-items: flex-start; gap: 12px; }
.w-steps > li:not([class]) > :not(.w-num) { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.w-steps > li:not([class]) > .w-stack { flex: 0 0 132px; gap: 0; }
.w-steps > li:not([class]) > .tag { flex: none; margin-top: 2px; }
.w-plain > li { display: flex; align-items: flex-start; gap: 10px; }
.w-txt { min-width: 0; }
.w-bold { font-weight: 700; }
.w-block { display: block; }
.w-stack > .tag, .w-stack > .w-hl { align-self: flex-start; }
div[class^="wg-"] > .w-txt { padding-block: 7px; }
.w-blank { display: block; align-self: end; min-height: 1px; margin-bottom: 12px; border-bottom: 2px solid var(--ink); }
.w-dl { margin: 0; display: grid; grid-template-columns: minmax(64px, max-content) minmax(0, 1fr); gap: 8px 18px; }
.w-dl dt { font-weight: 700; color: var(--ink); }
.w-dl dd { margin: 0; }
.w-svg { display: block; max-width: 100%; height: auto; }
.w-icon { flex: none; height: auto; }
.w-figure { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.w-lead { font-weight: 600; font-size: 18px; }
.w-figure:has(> .w-cols) { align-items: center; text-align: center; }
.w-figure:has(> .w-cols) .w-stack { align-items: center; }
.w-figure:has(> .w-cols) > .w-cols { width: 100%; }
.w-hl { background: var(--pink); color: var(--on-pastel); border-radius: 4px; padding: 1px 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.w-check { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 5px; vertical-align: middle; box-sizing: border-box; flex: none; }
input.w-check { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; background: var(--bg); cursor: pointer; display: grid; place-content: center; transition: background-color .12s ease; }
input.w-check::before { content: ""; width: 10px; height: 6px; border: solid var(--on-pastel); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s ease; }
input.w-check:checked { background: var(--pink); }
input.w-check:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
input.w-check:hover { background: var(--hl); }
input.w-check:checked:hover { background: var(--pink); }
input.w-check:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.w-checklist td { vertical-align: middle; }
.w-checklist label.w-inline { cursor: pointer; }
/* ---- decision trees: connectors are drawn in CSS so they always meet the boxes ---- */
.tree { --g: 30px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--g); text-align: center; }
.tree p { margin: 0; text-wrap: balance; }
.tree > :not(:first-child):not(.tree-split), .tree-branch > * { position: relative; }
.tree > :not(:first-child):not(.tree-split)::before, .tree-branch > *::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(4px - var(--g));
  height: calc(var(--g) - 10px);
  border-left: 2px solid var(--ink);
  transform: translateX(-1px);
}
.tree > :not(:first-child):not(.tree-split)::after, .tree-branch > *::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -15px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
.tree-branch > :first-child::before { top: calc(-1 * var(--g)); height: calc(var(--g) - 6px); }
.tree-split { position: relative; align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: calc(14px - var(--g)); }
.tree-split::before { content: ""; position: absolute; left: 50%; top: -14px; height: 14px; border-left: 2px solid var(--ink); transform: translateX(-1px); }
.tree-split::after { content: ""; position: absolute; left: 25%; right: 25%; top: 0; border-top: 2px solid var(--ink); }
.tree-branch { display: flex; flex-direction: column; align-items: center; gap: var(--g); padding: var(--g) 10px 0; min-width: 0; }
.tree-node { max-width: 30ch; padding: 8px 16px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--bg); line-height: 1.4; }
.tree-start, .tree-end { border-color: transparent; background: var(--tag-bg); color: var(--tag-fg); font-weight: 700; font-size: 15px; }
.tree-good { background: var(--pink); color: var(--on-pastel); }
.tree-q { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); }
.tree-answer { padding: 2px 14px; border-radius: 999px; background: var(--hl); color: var(--on-pastel); font-family: var(--display); font-weight: 700; }
.w-table-wrap { overflow-x: auto; }
.w-table { border-collapse: collapse; width: 100%; font-size: 15px; }
.w-checklist { min-width: 480px; }
.w-table th, .w-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.w-table th { font-weight: 700; color: var(--ink); }
/* Guide banners always span their column, whatever box they sit in (block, flex row or flex column). */
.w-body .ribbon:not(.ribbon-sm), .ribbon.g-notice { display: block; width: auto; flex: 1 1 100%; align-self: stretch; }
.w-band {
  position: relative;
  background: var(--band);
  padding: 40px clamp(20px, 4vw, 44px) 40px;
}
.w-body > .w-band:nth-child(n) { margin-top: 88px; }
.w-band-dark { color: #FFFFFF; }
.w-band-dark h2, .w-band-dark h3 { color: #FFFFFF; }
.w-band > .w-band-edge { width: 100%; left: 0; }
.w-band > h2 + * { margin-top: 14px; }
.w-fit { position: relative; width: 100%; overflow: hidden; }
.w-fit-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--s, 1)); }

/* ---- footer ---- */
.foot {
  max-width: var(--wrap);
  margin: 72px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-block: 22px 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14.5px;
  text-align: center;
}
.foot p { margin: 0; text-wrap: pretty; }

/* ---- small screens and motion ---- */
@media (max-width: 520px) {
  body { font-size: 16.5px; }
  .masthead { padding-block: 40px 36px; }
  .topbar { padding-block: 14px; }
  .row { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
  .sym { width: 52px; height: 52px; }
  .w-band { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }
}
@media (prefers-reduced-motion: reduce) {
  .hl, .mark, .sym { transition: none; }
  .row:hover .sym, .feature:hover .sym { transform: none; }
}

/* ---- each guide's highlighter colour ---- */
.mark-hit45 { --mark: #C9D5FF; }
.mark-abyss { --mark: #D0D3F6; }
.mark-pretty { --mark: #FFD1E1; }
.mark-laghell { --mark: #DCD8EE; }
.mark-krao { --mark: #FFE09A; }
.mark-draupnir { --mark: #B3E2E7; }
.mark-urugugu { --mark: #C2E7CD; }
.mark-vakron { --mark: #D6CCFF; }
.mark-fire { --mark: #FFC2E2; }
.mark-ferocious { --mark: #D6EDA6; }
.mark-arkanis { --mark: #FFCFBF; }
.mark-deus { --mark: #C6DDF0; }
.mark-ludra { --mark: #E8BFF2; }

/* ---- 404 ---- */
.lost { border-bottom: 0; }
.lost-code { color: var(--pink); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; font-size: clamp(110px, 22vw, 220px); }
.lost-links { margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-family: var(--display); font-weight: 600; font-size: 18px; }
/* ---- guide "updated" stamp ---- */
.g-updated { margin-left: auto; font-size: 14px; }
.g-updated::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--pink); vertical-align: 1px; }

/* ---- home countdown chips ---- */
.soon:empty { display: none; }
.soon { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--pink); color: var(--on-pastel); font-size: 13px; font-weight: 700; line-height: 1.6; white-space: nowrap; vertical-align: 1px; }

/* ---- checklist character tabs ---- */
.alt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.alt-tab { padding: 4px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-family: var(--display); font-weight: 600; font-size: 15px; cursor: pointer; }
.alt-tab[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--on-pastel); }
.alt-tab:hover:not([aria-pressed="true"]) { background: var(--hl); color: var(--on-pastel); }
.alt-add { border-style: dashed; }
.alt-remove { margin-left: auto; padding: 4px 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.alt-tab:focus-visible, .alt-remove:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- search ---- */
.search-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -7px 0;
  padding: 5px 13px 5px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.search-open:hover { background: var(--hl); color: var(--on-pastel); }
.search-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.search-open svg { width: 18px; height: 18px; flex: none; }
.search {
  width: min(640px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 80px));
  margin: 64px auto auto;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 18px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 24px 60px rgba(18, 19, 48, .25);
  overflow: hidden;
}
.search[open] { display: flex; flex-direction: column; }
.search::backdrop { background: rgba(18, 19, 48, .35); }
.search-form { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.search-form input { flex: 1; min-width: 0; padding: 6px 2px; border: 0; background: none; color: var(--fg); font: inherit; font-family: var(--display); font-size: 20px; outline: none; }
.search-close { padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.search-results { overflow-y: auto; padding: 8px; }
.search-hit { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; color: inherit; text-decoration: none; }
.search-hit:hover, .search-hit:focus-visible { background: var(--hl); color: var(--on-pastel); outline: none; }
.search-name { font-family: var(--display); font-weight: 700; color: var(--ink); }
.search-hit:hover .search-name, .search-hit:focus-visible .search-name { color: var(--on-pastel); }
.search-term { margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--pink); color: var(--on-pastel); font-family: var(--body); font-size: 13px; font-weight: 700; }
.search-snip { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.search-hit:hover .search-snip, .search-hit:focus-visible .search-snip { color: var(--on-pastel); }
.search-snip mark { background: var(--pink); color: var(--on-pastel); border-radius: 3px; padding: 0 2px; }
.search-note { margin: 0; padding: 14px 12px; color: var(--muted); font-size: 15px; }
@media (max-width: 520px) { .search-open .tt-label { display: none; } .search-open { padding: 5px 8px; } }

/* ---- homepage timers ---- */
.timers { padding-top: 48px; }
.timers-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.timers-head .sec-h2 { margin: 0; }
.tz-pick { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hl); }
.tz-btn { padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--on-pastel); font: inherit; font-family: var(--display); font-weight: 600; font-size: 14px; cursor: pointer; }
.tz-btn[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(18, 19, 48, .18); }
.tz-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.timer-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 12px; }
.timer {
  --dot: var(--line-strong);
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-areas: "dot name name" "when when at";
  align-items: center;
  gap: 6px 10px;
  padding: 13px 16px 12px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  transition: background-color .3s ease, border-color .3s ease;
}
.t-dot { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.t-name { grid-area: name; display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--ink); }
.t-when { grid-area: when; font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.t-at { grid-area: at; justify-self: end; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.timer:not(.is-ready) .t-when { grid-column: 1 / -1; font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--muted); white-space: normal; }
.timer.is-live .t-name::after { content: "Live"; padding: 0 8px; border-radius: 999px; background: #FF6FA5; color: #FFFFFF; font-family: var(--body); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.7; }
.timer.is-soon { --dot: #F7B955; }
.timer.is-live { --dot: #FF6FA5; border-color: var(--pink); background: color-mix(in srgb, var(--pink) 32%, var(--bg)); }
.timer.is-live .t-dot { box-shadow: 0 0 0 0 rgba(255, 111, 165, .6); animation: t-pulse 1.8s ease-out infinite; }
.timer[data-event="daily"], .timer[data-event="weekly"] { --dot: var(--ink); }
@keyframes t-pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 111, 165, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 111, 165, 0); } }
.timers-note { margin: 16px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
.timers-note > span:not(.tn-chip) + span::before { content: "✦"; margin: 0 9px; color: var(--pink); font-size: 9px; vertical-align: 1px; }
.timers-note .tn-chip { margin-right: 10px; padding: 0 8px; border-radius: 999px; background: var(--hl); color: var(--on-pastel); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.8; }
@media (prefers-reduced-motion: reduce) { .timer.is-live .t-dot { animation: none; } .timer { transition: none; } }
@media (max-width: 560px) {
  .timer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .timer { grid-template-areas: "dot name" "when when" "at at"; grid-template-columns: 8px minmax(0, 1fr); gap: 4px 8px; padding: 10px 12px; border-radius: 14px; }
  .t-dot { width: 8px; height: 8px; }
  .t-name { font-size: 14px; flex-wrap: wrap; gap: 2px 6px; }
  .t-when { font-size: 18px; }
  .t-at { justify-self: start; font-size: 12.5px; }
  .tz-btn { padding: 4px 9px; font-size: 13px; }
}

/* ---- homepage "Your week" card (a mini hit-45 checklist) ---- */
.week-card { margin-top: 44px; padding: 20px 20px 18px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--bg); display: flex; flex-direction: column; gap: 12px; }
.week-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.week-top .sec-h2 { margin: 0; font-size: clamp(30px, 3.6vw, 40px); }
.week-count { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.week-bar { height: 8px; border-radius: 999px; background: var(--hl); overflow: hidden; }
.week-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FFB0CC, #FF6FA5); transition: width .4s cubic-bezier(.3, .7, .2, 1); }
.week-card .alt-bar { gap: 6px; }
.week-card .alt-tab { padding: 2px 11px; font-size: 13.5px; }
.week-card .alt-add, .week-card .alt-remove { display: none; }
.week-label { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.week-ticks { display: flex; flex-direction: column; gap: 8px; }
.week-ticks .w-inline { gap: 10px; cursor: pointer; font-size: 16px; }
.week-sub { color: var(--muted); font-size: 14px; }
.week-dots { display: grid; grid-template-columns: auto repeat(7, 18px); align-items: center; justify-content: start; gap: 6px 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--hl) 45%, var(--bg)); }
.week-dots-day { justify-self: center; font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--muted); }
.week-dots-day.is-today { color: var(--ink); }
.week-dots-task { padding-right: 8px; font-size: 13px; color: var(--muted); }
.week-dot { justify-self: center; width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); opacity: .55; }
.week-dot.is-done { background: #FF6FA5; opacity: 1; }
.week-dot.is-today { outline: 2px solid var(--ink); outline-offset: 2px; }
.week-more { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: 15px; }
.week-more .hl::after { content: " →"; }
@media (prefers-reduced-motion: reduce) { .week-bar span { transition: none; } }
:root[data-theme="dark"] .week-dots, :root[data-theme="dark"] .week-bar { background: var(--line); }
:root[data-theme="dark"] .week-dot:not(.is-done) { background: var(--line-strong); }