:root {
  color-scheme: light;
  --bg: oklch(97.6% .009 85);
  --ink: oklch(26% .035 161);
  --muted: oklch(48% .025 160);
  --line: oklch(89% .018 145);
  --card: oklch(100% 0 none);
  --green: oklch(43% .09 159);
  --red: oklch(48% .15 25);
  --blue: oklch(46% .16 260);
  --sidebar: oklch(25% .045 162);
  --tint: color-mix(in oklch, var(--green) 8%, var(--card));
  --shadow: color-mix(in oklch, var(--ink) 6%, transparent);
  --space: clamp(1rem, .65rem + 1.7vw, 2.25rem);
  --section-space: clamp(2rem, 1.3rem + 3vw, 4rem);
  --title-size: clamp(1.9rem, 1.2rem + 3.7cqi, 4rem);
  scrollbar-gutter: stable;
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; min-inline-size: 0; }
body { margin: 0; min-block-size: 100svh; background: var(--bg); color: var(--ink); font: 1rem/1.65 system-ui, sans-serif; }
h1,h2,h3,h4 { text-wrap: balance; line-height: 1.2; }
a { color: var(--green); text-underline-offset: .2em; }
button,input,select { font: inherit; }
button, a, summary, select { touch-action: manipulation; }
button,select,summary { cursor: pointer; }
button { user-select: none; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
:where(button,a,summary,select):active { opacity: .75; }
img,svg { display: block; max-inline-size: 100%; block-size: auto; }
input,select { font-size: max(16px, 1rem); }
.hidden { display: none !important; }
.skip-link { position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem; z-index: 30; background: var(--card); padding: .7rem 1rem; border-radius: .5rem; transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; }
.layout { display: flex; flex-wrap: wrap; align-items: start; min-block-size: 100svh; }
.side { flex: 0 0 11.25rem; display: flex; flex-direction: column; gap: .15rem; position: sticky; inset-block-start: 0; min-block-size: 100svh; max-block-size: 100svh; overflow-y: auto; padding-block: 1.25rem .8rem; padding-inline: .75rem; background: var(--sidebar); color: var(--card); }
.brand { display: flex; flex-direction: column; gap: .4rem; font-size: 1.2rem; font-weight: 750; letter-spacing: -.03em; color: var(--card); text-decoration: none; margin-block-end: 1.75rem; }
.brand-mark { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; margin-block-end: .6rem; background: color-mix(in oklch, var(--card) 10%, transparent); border: 1px solid color-mix(in oklch, var(--card) 18%, transparent); border-radius: .8rem; }
.brand small { color: color-mix(in oklch, var(--card) 68%, var(--sidebar)); font-size: .75rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.nav-label { margin-block: .75rem .4rem; margin-inline: .75rem; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: color-mix(in oklch, var(--card) 60%, var(--sidebar)); font-weight: 650; }
.nav { display: grid; gap: .25rem; }
.nav button,.about-link,.compass-nav-button { display: block; inline-size: 100%; min-block-size: 44px; border: 0; border-radius: .65rem; background: transparent; color: color-mix(in oklch, var(--card) 82%, var(--sidebar)); text-align: start; padding-block: .65rem; padding-inline: .75rem; font-size: .85rem; font-weight: 550; margin: 0; }
.nav button.active,.compass-nav-button.active { background: color-mix(in oklch, var(--card) 13%, var(--sidebar)); color: var(--card); box-shadow: inset 3px 0 0 oklch(76% .11 155); }
.side :focus-visible { outline-color: oklch(82% .09 155); }
.side .brand { font-size: 1rem; letter-spacing: -.03em; margin-block-end: 1rem; }
.side .brand-mark { inline-size: 2rem; block-size: 2rem; margin-block-end: .3rem; }
.side .brand small { display: none; }
.side .nav-label { margin-inline: .35rem; }
.side :is(.nav button,.about-link,.compass-nav-button) { padding-block: .5rem; padding-inline: .6rem; font-size: .85rem; text-wrap: balance; }
.side .compact-ad { padding: .6rem; }
.side .ad-placement { font-size: .75rem; text-align: center; }
.about-nav-label { margin-block-start: 1.5rem !important; }
.compact-ad { margin-block-start: 1.4rem; padding: .7rem; border: 1px dashed color-mix(in oklch, var(--card) 25%, transparent); border-radius: .7rem; inline-size: min(100%, 18rem); color: color-mix(in oklch, var(--card) 68%, var(--sidebar)); }
.ad-label { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; }
.ad-placement { display: grid; place-items: center; min-block-size: 3.75rem; font-size: .75rem; }
.main { flex: 999 1 0; display: flex; flex-direction: column; min-inline-size: min(100%, 70%); max-inline-size: 90rem; padding-block: var(--section-space); padding-inline: var(--space); margin-inline: auto; container-type: inline-size; }
.bottom-ad { order: 2; inline-size: min(100%, 45.5rem); margin-inline: auto; margin-block: 1.5rem 0; border-color: var(--line); background: var(--card); color: var(--muted); }
.bottom-ad .ad-placement { text-align: center; }
.hero { display: flex; flex-wrap: wrap; align-items: end; gap: 1.5rem; margin-block-end: var(--section-space); padding-block-end: var(--space); border-block-end: 1px solid var(--line); }
.hero > div { flex: 999 1 28rem; }
.kicker { color: var(--green); font-size: .68rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { font-size: var(--title-size); line-height: 1.08; letter-spacing: -.055em; margin-block: .9rem 1rem; max-inline-size: 18ch; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero p { max-inline-size: 61ch; color: var(--muted); margin: 0; }
.search { flex: 1 1 13rem; display: flex; gap: .65rem; align-items: center; padding-block: .65rem; padding-inline: .85rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--card); color: var(--muted); }
.search input { border: 0; inline-size: 100%; background: transparent; color: var(--ink); }
.search:focus-within { border-color: var(--green); }
.search input::placeholder { color: var(--muted); }
.landing-intro { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: end; margin-block-end: 1.5rem; }
.landing-intro h2 { margin-block: .4rem .6rem; font-size: clamp(1.5rem, 1.2rem + .9vw, 2.1rem); letter-spacing: -.035em; }
.landing-intro p { margin: 0; color: var(--muted); font-size: .9rem; }
.landing-count { font-size: .75rem; color: var(--green); font-variant-numeric: tabular-nums; }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.landing-card { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 3px 12px var(--shadow); }
.landing-card strong { font-size: 1.06rem; font-weight: 650; }
.landing-card p { margin-block: .5rem 0; color: var(--muted); font-size: .86rem; }
.theme-number { font-size: .7rem; color: var(--green); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.landing-arrow { align-self: end; color: var(--green); font-size: 1.3rem; margin-block-start: auto; }
.editorial-note,.site-guide { margin-block-start: 1.75rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--tint); color: var(--muted); font-size: .83rem; }
.editorial-note strong,.site-guide h2 { color: var(--ink); }
.editorial-note p { margin: 0; }
.site-guide { background: transparent; }
.site-guide h2 { font-size: 1rem; margin-block: 0 .7rem; }
.party-directory { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; list-style: none; }
.party-directory a { font-size: .8rem; }
.site-guide summary { font-weight: 650; }
.site-guide p { margin-block: .6rem 0; }
.main.landing-mode :is(.tabs,.context,.cards,.chart,.foot) { display: none; }
.main:not(.landing-mode) :is(.landing-view,.editorial-note,.site-guide) { display: none; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; padding: .4rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--tint); margin-block-end: 1.8rem; }
.tabs button,.compass-mode button { border: 0; background: transparent; color: var(--muted); border-radius: .6rem; padding-block: .6rem; padding-inline: .8rem; font-size: .8rem; min-block-size: 44px; }
.tabs button.active,.compass-mode button.active { background: var(--ink); color: var(--card); }
.context { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; margin-block-end: 1.2rem; }
.context > div { flex: 999 1 20rem; }
.context h2 { margin-block: .4rem .5rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -.03em; }
.context p { margin: 0; color: var(--muted); }
.select { flex: 1 1 16rem; min-block-size: 48px; padding-block: .7rem; padding-inline: .9rem; border: 1px solid var(--green); border-radius: .7rem; color: var(--green); background: var(--card); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.card { display: flex; flex-direction: column; align-items: start; padding: 1.35rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); box-shadow: 0 3px 12px var(--shadow); }
.head { display: flex; inline-size: 100%; align-items: start; gap: .75rem; justify-content: space-between; }
.head h3 { margin: 0; font-size: 1rem; line-height: 1.4; }
.code { flex: none; padding-block: .1rem; padding-inline: .4rem; background: var(--tint); border-radius: .35rem; font-size: .65rem; color: var(--green); font-weight: 750; }
.tag { display: inline-block; margin-block: 1rem .7rem; padding-block: .25rem; padding-inline: .65rem; border-radius: .5rem; color: var(--green); background: var(--tint); font-size: .73rem; font-weight: 650; }
.tag.no { color: var(--red); background: color-mix(in oklch, var(--red) 8%, var(--card)); }
.tag.maybe { color: var(--blue); background: color-mix(in oklch, var(--blue) 7%, var(--card)); }
.summary { margin-block: 0 1rem; font-size: .87rem; color: var(--muted); flex: 1; }
.source { display: block; font-size: .73rem; font-weight: 600; margin-block-start: .35rem; }
.empty-state { grid-column: 1 / -1; padding: 2rem; border: 1px dashed var(--line); border-radius: 1rem; color: var(--muted); }
.chart { margin-block-start: 2rem; padding: var(--space); background: var(--card); border: 1px solid var(--line); border-radius: 1rem; }
.chart h3 { margin-block: 0 .5rem; }
.chart p { color: var(--muted); font-size: .85rem; }
.chart::after { content: 'Farvede markører: ungdomspartier · Hvide markører: moderpartier'; display: block; text-align: center; font-size: .73rem; color: var(--muted); margin-block-start: 1rem; }
.axis { position: relative; inline-size: min(100%, 26rem); block-size: 35rem; margin-block: 3.5rem; margin-inline: auto; }
.axis::before { content: ''; position: absolute; inset-inline-start: 50%; inset-block: 2%; inline-size: 3px; background: linear-gradient(var(--red), oklch(75% .11 85), var(--green)); border-radius: 1rem; }
.tick { position: absolute; inset-inline-start: calc(50% - 8px) !important; inline-size: 18px; border-block-start: 1px solid var(--line); }
.tick:nth-child(1) { inset-block-start: 2%; }.tick:nth-child(2) { inset-block-start: 50%; }.tick:nth-child(3) { inset-block-start: 98%; }
.tick span,.axislabels { display: none; }
.point,.parentpoint { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; min-inline-size: 2rem; block-size: 1.6rem; padding-inline: .45rem; border: 2px solid var(--card); border-radius: 2rem; box-shadow: 0 0 0 1px currentColor; white-space: nowrap; transform: translateY(-50%); }
.point b { color: var(--card); font-size: .68rem; }
.parentpoint { background: var(--card); color: var(--ink); border-color: var(--ink); border-radius: .4rem; }
.parentpoint b { font-size: .65rem; }
.axis-end-label { position: absolute; inset-inline-start: 50%; transform: translateX(-50%); inline-size: max-content; max-inline-size: 100%; padding-block: .25rem; padding-inline: .65rem; background: var(--tint); border-radius: .45rem; text-align: center; font-size: .75rem; font-weight: 650; }
.axis-end-top { inset-block-start: -2.5rem; }.axis-end-bottom { inset-block-end: -2.5rem; }
.uncertain-tray { padding: 1rem; border-radius: .75rem; background: color-mix(in oklch, var(--blue) 6%, var(--card)); color: var(--blue); display: flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: center; }
.uncertain-tray strong { font-size: .8rem; }.uncertain-tray > span { font-size: .73rem; }.uncertain-list { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .5rem; }
.uncertain-chip { padding-block: .15rem; padding-inline: .5rem; background: var(--blue); color: var(--card); border-radius: 2rem; font-size: .7rem; }.uncertain-tray.empty { display: none; }
.foot { margin-block-start: 2rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.ai-modal,.about-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: color-mix(in oklch, var(--ink) 75%, transparent); backdrop-filter: blur(5px); }
.ai-box,.about { max-inline-size: 38rem; inline-size: 100%; max-block-size: 85dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--space); border: 1px solid var(--line); border-radius: 1.25rem; background: var(--card); box-shadow: 0 1rem 4rem var(--shadow); }
.ai-box h2,.about h2 { margin-block: .6rem 1rem; font-size: 1.6rem; }.ai-box p,.about p { color: var(--muted); font-size: .9rem; }
.ai-icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; background: var(--tint); color: var(--green); border-radius: .7rem; margin-block-end: 1rem; }
.ai-close,.about-close,.compass-actions button,.test-actions button,.test-submit-row button { min-block-size: 44px; padding-block: .65rem; padding-inline: .9rem; border: 1px solid var(--line); border-radius: .65rem; color: var(--ink); background: var(--card); font-size: .85rem; font-weight: 650; }
.ai-close,.test-submit-row button[type=submit] { background: var(--green); color: var(--card); border-color: var(--green); }.ai-close:focus-visible { outline-color: var(--green); }
.about-close { float: inline-end; }.party-source { padding-block: .7rem; border-block-end: 1px solid var(--line); }.mobile-about { display: none; }
.compass-view,.test-view { inline-size: 100%; }.main.show-compass > :not(.compass-view):not(.bottom-ad):not(.mobile-about),.main.show-test > :not(.test-view):not(.bottom-ad):not(.mobile-about) { display: none; }
.compass-hero { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-block-end: 1.5rem; }.compass-hero > div:first-child { flex: 999 1 25rem; }.compass-hero h2 { font-size: var(--title-size); letter-spacing: -.04em; margin-block: .5rem 1rem; }.compass-hero p { color: var(--muted); margin: 0; }
.compass-actions,.test-actions { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 14rem; }
.compass-panel,.test-map { position: relative; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); overflow: clip; }
.compass-panel svg,.test-map svg { inline-size: 100%; block-size: auto; }.compass-panel svg { cursor: grab; touch-action: none; }.compass-panel svg.dragging { cursor: grabbing; }
.compass-tip { position: absolute; z-index: 3; pointer-events: none; max-inline-size: 15rem; padding: .65rem; border-radius: .65rem; background: var(--ink); color: var(--card); font-size: .75rem; opacity: 0; transform: translate(9px,9px); }.compass-tip.show { opacity: 1; }
.compass-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 1rem; border-block-start: 1px solid var(--line); color: var(--muted); font-size: .75rem; }.legend-symbol { color: var(--ink); }
.compass-mode { display: flex; flex-wrap: wrap; gap: .25rem; inline-size: fit-content; margin-block-end: 1rem; padding: .3rem; border-radius: .8rem; border: 1px solid var(--line); background: var(--tint); }
.compass-view.mode-2d .compass-only-3d,.compass-view.mode-2d .compass-method,.compass-view.mode-3d .compass-map-note { display: none; }.compass-view.mode-2d .compass-panel svg { cursor: default; }
.compass-method { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap: 1rem; margin-block-start: 1rem; }.compass-method article,.compass-sources,.test-score-card,.test-match-card { border: 1px solid var(--line); border-radius: .8rem; background: var(--card); padding: 1rem; }.compass-method h3 { margin-block: 0 .5rem; }.compass-method p { margin: 0; font-size: .8rem; color: var(--muted); }
.compass-sources { margin-block-start: 1rem; font-size: .85rem; }.compass-sources ul { columns: 2 15rem; padding-inline-start: 1.2rem; }.compass-note,.compass-map-note,.test-note,.test-intro { color: var(--muted); font-size: .85rem; }
.test-dimension { margin-block-start: 2rem; }.test-dimension h3 { margin-block-end: .5rem; }.test-dimension > p { color: var(--muted); font-size: .85rem; }.test-question-list { display: grid; gap: 1.3rem; }.test-question { margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--card); }.test-question legend { padding-inline: .3rem; }.test-question h4 { margin-block: .5rem; }.test-question p { color: var(--muted); font-size: .75rem; margin-block: .5rem; }
.test-question .test-answer-prompt { margin-block: .75rem; color: var(--green); font-weight: 600; }
.test-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,6rem),1fr)); gap: .4rem; }.test-options label { position: relative; cursor: pointer; }.test-options input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }.test-options span { display: grid; place-items: center; min-block-size: 48px; block-size: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: .5rem; font-size: .72rem; text-align: center; line-height: 1.4; color: var(--muted); }.test-options input:checked + span { background: var(--tint); border-color: var(--green); color: var(--green); }.test-options input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 3px; }.test-options label:active span { background: var(--tint); }
.test-submit-row,.test-results-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-block: 1.5rem; }.test-status { color: var(--muted); font-size: .8rem; }.test-results { padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }.test-results-head > div { flex: 999 1 24rem; }.test-results-head h3 { margin: 0; }.test-results-head p { color: var(--muted); font-size: .85rem; }.test-toggle { display: flex; gap: .5rem; align-items: center; font-size: .8rem; }.test-toggle input { accent-color: var(--green); }
.test-result-grid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; }.test-map { flex: 999 1 24rem; }.test-summary { flex: 1 1 14rem; display: grid; gap: 1rem; }.test-score-card h4,.test-match-card h4 { margin-block: 0 .75rem; }.test-score-line { display: grid; grid-template-columns: 1fr auto; gap: .4rem; margin-block: .75rem; font-size: .8rem; font-variant-numeric: tabular-nums; }.test-meter { grid-column: 1/-1; block-size: .45rem; background: var(--tint); border-radius: 1rem; overflow: clip; }.test-meter i { display: block; block-size: 100%; background: var(--green); border-radius: inherit; }.test-match-card ol { padding-inline-start: 1.2rem; font-size: .8rem; }.test-match-card li { margin-block: .6rem; }
.topic-page { max-inline-size: 76rem; margin-inline: auto; padding: var(--space); }.topic-page h1 { font-size: var(--title-size); letter-spacing: -.045em; }.topic-page header { margin-block-end: 2rem; }.topic-section { margin-block: 3rem; scroll-margin-block-start: 1rem; }.topic-section h2 { font-size: 1.6rem; }.topic-nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }.topic-note { font-size: .85rem; color: var(--muted); }
@container (inline-size < 28rem) { .tabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; }.tabs button { flex: none; scroll-snap-align: start; white-space: nowrap; } }
/* One structural change when the sidebar no longer has useful room. */
@media (width <= 52rem) {
  .side { position: static; flex-basis: 100%; min-block-size: auto; max-block-size: none; padding: 1rem; display: block; }
  .side .brand { font-size: 1.2rem; letter-spacing: -.03em; }
  .side :is(.nav button,.about-link,.compass-nav-button) { padding-block: .65rem; padding-inline: .75rem; font-size: .85rem; }
  .brand { margin-block-end: .8rem; }.brand-mark,.brand small,.side > .nav-label { display: none; }
  .nav { display: flex; gap: .25rem; overflow-x: auto; }.nav button { flex: none; inline-size: auto; white-space: nowrap; }
  .side > .about-link { display: none; }.side > .compass-nav-button { display: inline-block; inline-size: auto; margin-block: .6rem 0 !important; }
  .compact-ad { margin-block: .6rem 0; inline-size: min(100%,20rem); padding-block: .4rem; }.ad-placement { min-block-size: 2.5rem; }
  .main { flex-basis: 100%; }.mobile-about { display: flex; flex-basis: 100%; flex-wrap: wrap; padding: 1rem; background: var(--sidebar); }.mobile-about .nav-label { display: none; }.mobile-about .about-link { inline-size: auto; }
  .main > .mobile-about { order: 1; flex-basis: auto; margin-block-start: 1.5rem; border-radius: .7rem; }
  .bottom-ad { inline-size: 100%; margin-block: 1rem 0; }
}
@media (hover: hover) and (pointer: fine) {
  a:hover { color: color-mix(in oklch,var(--green),var(--ink) 30%); }
  .brand:hover { color: var(--card); }
  .nav button:hover,.about-link:hover,.compass-nav-button:hover { background: color-mix(in oklch,var(--card) 10%,var(--sidebar)); color: var(--card); }
  .landing-card:hover { border-color: color-mix(in oklch,var(--green) 50%,var(--line)); background: var(--tint); }
  :is(.tabs button,.compass-mode button):hover { background: var(--card); color: var(--green); }
  :is(.tabs button,.compass-mode button).active:hover { background: var(--green); color: var(--card); }
  .ai-close:hover,.test-submit-row button[type=submit]:hover { background: color-mix(in oklch,var(--green),var(--ink) 20%); }
  :is(.compass-actions,.test-actions) button:hover,.about-close:hover { background: var(--tint); }
  .test-options label:hover span { border-color: var(--green); }
}
@media (prefers-reduced-motion: no-preference) {
  .landing-card { transition: background-color 160ms ease-out, border-color 160ms ease-out; }
  button,a { transition: opacity 120ms ease-out; }
}

/* Existing SVG chart marks retain their presentation. */
.compass-cube{fill:oklch(1.0000 0.0000 none / 0.533);stroke:oklch(0.8136 0.0291 155.17);stroke-width:1.25}
.compass-grid{stroke:oklch(0.8828 0.0229 151.61);stroke-width:1;stroke-dasharray:4 5}
.compass-link{fill:none;stroke-width:1.7;stroke-dasharray:5 5;opacity:.72}
.compass-youth{stroke:oklch(1.0000 0.0000 none);stroke-width:2.5;filter:drop-shadow(0 2px 2px oklch(0.2933 0.0465 155.5 / 0.333))}
.compass-parent{fill:oklch(1.0000 0.0000 none);stroke-width:2.3;filter:drop-shadow(0 2px 2px oklch(0.2933 0.0465 155.5 / 0.22))}
.compass-label{font:800 11px system-ui,sans-serif;paint-order:stroke;stroke:oklch(1.0000 0.0000 none);stroke-width:4px;stroke-linejoin:round}
.compass-axis-label{font:800 12px system-ui,sans-serif;fill:oklch(0.4651 0.0367 158.99);letter-spacing:.02em}
.compass-2d-grid{stroke:oklch(0.9042 0.0176 153.54);stroke-width:1}
.compass-2d-axis{stroke:oklch(0.5342 0.0439 157.31);stroke-width:2}
.compass-2d-label{font:800 12px system-ui,sans-serif;fill:oklch(0.4651 0.0367 158.99)}
.compass-2d-caption{font:700 11px system-ui,sans-serif;fill:oklch(0.5628 0.0197 158.72)}
.compass-2d-grid{stroke:oklch(0.9171 0.0168 151.09);stroke-width:1}
.compass-2d-axis{stroke:oklch(0.4903 0.0472 159.4);stroke-width:2.25}
.compass-2d-boundary{fill:none;stroke:oklch(0.7433 0.0368 153.0);stroke-width:1.25}
.compass-2d-label{font:850 12px system-ui,sans-serif;fill:oklch(0.4445 0.0482 156.9)}
.compass-2d-caption{font:750 11px system-ui,sans-serif;fill:oklch(0.5501 0.0291 157.59)}
.compass-2d-leader{stroke:oklch(0.6298 0.0363 156.03);stroke-width:1;opacity:.75}
.compass-2d-centre{font:700 10px system-ui,sans-serif;fill:oklch(0.5628 0.0197 158.72);letter-spacing:.04em}
.compass-3d-face{stroke:oklch(0.8165 0.0301 153.24);stroke-width:1}
.compass-3d-edge{fill:none;stroke:oklch(0.6745 0.0488 155.69);stroke-width:1.45}
.compass-3d-grid{stroke:oklch(0.8971 0.0194 152.79);stroke-width:1;stroke-dasharray:3 5}
.compass-3d-leader{stroke:oklch(0.6003 0.0411 155.78);stroke-width:1;opacity:.7}
.compass-3d-axis{font:850 11px system-ui,sans-serif;fill:oklch(0.4621 0.0489 155.69);paint-order:stroke;stroke:oklch(1.0000 0.0000 none);stroke-width:4px;stroke-linejoin:round}
.compass-3d-direction{font:750 10px system-ui,sans-serif;fill:oklch(0.5690 0.0261 157.11);paint-order:stroke;stroke:oklch(1.0000 0.0000 none);stroke-width:4px;stroke-linejoin:round}
.test-map-grid{stroke:oklch(0.9103 0.0176 153.55);stroke-width:1}
.test-map-axis{stroke:oklch(0.6291 0.0435 153.94);stroke-width:1.5}
.test-map-boundary{fill:none;stroke:oklch(0.7752 0.0303 156.45);stroke-width:1.5}
.test-map-label{font:800 12px system-ui,sans-serif;fill:oklch(0.4651 0.0367 158.99)}
.test-map-caption{font:750 11px system-ui,sans-serif;fill:oklch(0.5628 0.0197 158.72)}
.test-map-party{stroke:oklch(1.0000 0.0000 none);stroke-width:2.5;filter:drop-shadow(0 2px 2px oklch(0.2933 0.0465 155.5 / 0.333))}
.test-map-parent{fill:oklch(1.0000 0.0000 none);stroke-width:2.3;filter:drop-shadow(0 2px 2px oklch(0.2933 0.0465 155.5 / 0.22))}
.test-map-user{fill:oklch(0.5461 0.2152 262.88);stroke:oklch(1.0000 0.0000 none);stroke-width:3;filter:drop-shadow(0 2px 4px oklch(0.2933 0.0465 155.5 / 0.4))}
.test-map-user-ring{fill:none;stroke:oklch(0.5461 0.2152 262.88);stroke-width:2;opacity:.35}
.test-map-name{font:800 11px system-ui,sans-serif;paint-order:stroke;stroke:oklch(1.0000 0.0000 none);stroke-width:4px;stroke-linejoin:round}
.side .topic-nav { display: flex; flex-direction: column; gap: .4rem; }
.side .topic-nav a { min-block-size: 44px; display: flex; align-items: center; padding-inline: .6rem; border-radius: .65rem; color: color-mix(in oklch,var(--card) 82%,var(--sidebar)); text-decoration: none; font-size: .85rem; }
.side .topic-nav a[aria-current=page] { background: color-mix(in oklch,var(--card) 13%,var(--sidebar)); color: var(--card); }
@media (width <= 52rem) { .side .topic-nav { flex-direction: row; flex-wrap: wrap; gap: .25rem; } .side .topic-nav a { padding-inline: .75rem; font-size: .85rem; } }
@media (hover: hover) and (pointer: fine) { .side .topic-nav a:hover { background: color-mix(in oklch,var(--card) 10%,var(--sidebar)); color: var(--card); } }
html:has(.about-overlay:not(.hidden):not(#about)) { overflow: hidden; }
.nav { scrollbar-width: thin; scrollbar-color: color-mix(in oklch,var(--card) 35%,var(--sidebar)) var(--sidebar); }
.ad-placement { block-size: 3.75rem; overflow: clip; }
.ad-placement :is(img,iframe) { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; border: 0; }
@media (width <= 52rem) { .ad-placement { block-size: 2.5rem; } }