:root {
  font: 16px Roboto, sans-serif;
  color: var(--page-text);
  background: radial-gradient(circle at 50% 42%, #f56aa04d, transparent 40%), linear-gradient(#0c0a24, #411448 65%, #0b0b23 70%);
  background-attachment: fixed;
  --panel: rgba(255, 240, 255, .7);
  --lightbox-panel: rgba(255, 240, 255, .5);
  --page-text: #101018;
  --page-link: #241047;
  --page-divider: #3339;
  --page-row: #ffffff38;
  --pagemenu-background: transparent;
  --pagemenu-row: var(--page-row);
  --pagemenu-hover: rgba(0,0,0,.05);
  --pagemenu-border: darkgrey;
  --surface-radius: 12px;
  --side-margin: clamp(16px, 4vw, 120px);
  --page-padding: clamp(16px, 2vw, 25px);
  --heading-font: 600 23px/1.55 Roboto, sans-serif;
  --menu-height: 40px;
  --ui-control-bg: rgba(255, 255, 255, .6);
  --ui-control-text: #33243f;
  --ui-control-border: #d5c9de;
  --ui-hover: rgba(242, 233, 248, .6);
  --ui-active: rgba(238, 225, 246, .6);
  --ui-accent: #713aa5;
}
/* Shared admin/settings palette, inherited automatically by native selects. */
:root[data-tone=dark], #menu, .mobile-bar, .background-controls {
  --ui-control-bg: rgba(48, 35, 62, .6);
  --ui-control-text: #f0edf5;
  --ui-control-border: #dfb6fb40;
  --ui-hover: rgba(72, 49, 88, .6);
  --ui-active: rgba(72, 49, 88, .6);
  --ui-accent: #d1a2fb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tone]) { --ui-control-bg: rgba(48, 35, 62, .6); --ui-control-text: #f0edf5; --ui-control-border: #dfb6fb40; --ui-hover: rgba(72, 49, 88, .6); --ui-active: rgba(72, 49, 88, .6); --ui-accent: #d1a2fb; }
}
html, body { margin: 0; padding: 0; height: 100%; overflow: clip; }
/* Match the system before the client initializes, avoiding a bright first frame. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tone]) { --panel: rgba(11, 14, 20, .7); --lightbox-panel: rgba(11, 14, 20, .5); --page-text: #f0edf5; --page-link: #d8b5ff; --page-divider: #ece4ff88; --page-row: #ffffff0d; --pagemenu-background: rgba(8,10,16,.12); --pagemenu-row: rgba(8,10,16,.22); --pagemenu-hover: rgba(8,10,16,.32); --pagemenu-border: rgba(122,128,150,.24); color-scheme: dark; }
}
body { position: fixed; inset: 0; isolation: isolate; }
.site-background { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.background-controls { position: fixed; top: 10px; right: 10px; z-index: 120; color: #f0e9ff; font: 13px/1.5 Roboto, sans-serif; color-scheme: dark; }
.appearance-trigger { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 84px; height: 40px; padding: 0 10px; margin-left: auto; background: rgba(23, 18, 38, .6); color: inherit; border: 1px solid #dfb6fb55; border-radius: 12px; cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.appearance-trigger-language { min-width: 18px; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.appearance-trigger-chevron { flex: 0 0 auto; opacity: .72; }
.appearance-trigger-gear { flex: 0 0 auto; }
.appearance-trigger[aria-expanded=true] { background: rgba(56, 36, 72, .6); border-color: #dcbbff; }
@media (hover: hover) and (pointer: fine) { .appearance-trigger:hover { background: rgba(56, 36, 72, .6); border-color: #dcbbff; } }
.appearance-settings { box-sizing: border-box; width: min(340px, calc(100vw - 20px)); max-height: calc(100dvh - 70px); overflow: auto; overscroll-behavior: contain; margin-top: 8px; padding: 18px; background: rgba(23, 18, 37, .6); border: 1px solid #dfb6fb45; border-radius: 14px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.appearance-settings h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.appearance-label { display: block; font-size: 12px; color: #c9bbda; margin-bottom: 6px; }
.background-select, .background-control { box-sizing: border-box; border: 1px solid var(--ui-control-border); border-radius: 8px; background: var(--ui-control-bg); color: var(--ui-control-text); cursor: pointer; }
.appearance-animation { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 8px; align-items: center; }
.background-controls .background-select { width: 100%; max-width: 100%; height: 38px; margin: 0; padding: 0 9px; font: inherit; }
.appearance-language-select { margin-bottom: 14px !important; }
.background-control { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; font: 16px/1 Roboto, sans-serif; }
@media (hover: hover) and (pointer: fine) { .background-control:hover { background: var(--ui-hover); } }
.background-control:disabled, .background-select:disabled { cursor: default; opacity: .5; }
.appearance-note { margin: 8px 0; font-size: 11px; color: #c9bbda; }
.appearance-colors { padding: 0; margin: 18px 0 0; border: 0; border-top: 1px solid #dfb6fb33; }
.appearance-colors legend { padding: 0 8px 0 0; font-size: 13px; }
.appearance-palette { margin-top: 12px; }
.appearance-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.appearance-swatch { display: block; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px; color: #ded2ee; cursor: pointer; }
.appearance-swatch > span { display: grid; place-items: center; width: 100%; height: 28px; border: 1px solid #ffffff45; border-radius: 6px; color: #fff; font-size: 16px; text-shadow: 0 1px 3px #000, 0 0 3px #000; }
.appearance-swatch[aria-pressed=true] { border-color: #c6a1f0; background: #c19ae322; }
.appearance-footer { margin-top: 16px; padding-top: 13px; border-top: 1px solid #dfb6fb33; color: #aaa0b6; font-size: 11px; line-height: 1.45; }
.appearance-footer > :first-child { margin-top: 0; }
.appearance-footer > :last-child { margin-bottom: 0; }
.appearance-footer a { color: inherit; text-decoration-color: #aaa0b688; }
@media (hover: hover) and (pointer: fine) { .appearance-swatch:hover { border-color: #c6a1f0; background: #c19ae322; } }
:root[data-tone=dark] { --page-text: #f0edf5; --page-link: #d8b5ff; --page-divider: #ece4ff88; --page-row: #ffffff0d; --pagemenu-background: rgba(8,10,16,.12); --pagemenu-row: rgba(8,10,16,.22); --pagemenu-hover: rgba(8,10,16,.32); --pagemenu-border: rgba(122,128,150,.24); color-scheme: dark; }
#page, .submenu, #menu, .mobile-navigation-panel, .mobile-bar { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
#page, .submenu, .mobile-navigation-panel { color: var(--page-text); }
:where(#page) a { color: var(--page-link); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.navigation-notice { position: fixed; z-index: 110; top: 50px; right: 8px; max-width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px; border: 1px solid #cd92d5; border-radius: 12px; background: rgba(28, 16, 45, .6); color: white; font: 14px/1.5 Roboto, sans-serif; }
.navigation-notice button, .navigation-notice a { display: inline-block; margin: 6px 8px 0 0; color: #d9eeff; font: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.navigation-waiting { position: fixed; z-index: 10; pointer-events: none; overflow: hidden; }
.navigation-waiting i { position: absolute; display: block; background: #c2a8ff; box-shadow: -3px 0 #ff529a, 3px 0 #55eaff; animation: waiting-fragment 220ms steps(2, end) both; }
@keyframes waiting-fragment { 0% { transform: translateX(-4px); } 40% { transform: translateX(5px); } 75% { transform: translateX(-2px); } 100% { transform: none; opacity: 0; } }
@media (prefers-reduced-motion: reduce), print { .navigation-waiting { display: none; } }
.site-shell { box-sizing: border-box; width: calc(100% - 2 * var(--side-margin)); height: 100dvh; padding: 20px 0; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: end; position: relative; }
#page, .mobile-navigation-panel { grid-row: 1; box-sizing: border-box; width: 100%; min-width: 0; min-height: 0; padding: var(--page-padding); background: var(--panel); border-radius: var(--surface-radius); box-shadow: 0 16px 60px #1b072833; line-height: 150%; overflow: auto; overscroll-behavior: contain; max-height: 100%; overflow-wrap: anywhere; outline: none; }
.with-submenu { grid-template-columns: clamp(220px, 20%, 320px) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 28px); }
.with-submenu #page { grid-column: 2; }
#menu { grid-column: 1 / -1; grid-row: 2; min-height: var(--menu-height); margin-top: 20px; border-radius: var(--surface-radius); background: rgba(0,0,0,.7); color: white; text-align: center; }
#menu ul, .submenu ul { padding: 0; margin: 0; list-style: none; }
#menu ul { display: flex; justify-content: center; flex-wrap: wrap; }
#menu li { display: block; font-size: 1.125rem; line-height: 20px; }
#menu a { display: block; padding: 10px 20px; }
#menu a, .submenu a { color: inherit; text-decoration: none; }
#menu a, .submenu a { position: relative; border-radius: 0; transition: color .12s; }
/* Terminal brackets: no filled tiles, glow or layout shift on selection. */
#menu a::before, #menu a::after, .submenu a::before, .submenu a::after { content: ''; position: absolute; top: 50%; width: 3px; height: .8em; margin-top: -.4em; border-block: 1px solid currentColor; opacity: 0; pointer-events: none; transition: opacity .12s; }
#menu a::before, .submenu a::before { left: 4px; border-left: 1px solid currentColor; }
#menu a::after, .submenu a::after { right: 4px; border-right: 1px solid currentColor; }
#menu a:is(:focus-visible, [data-active=page], [data-active=ancestor]), .submenu a:is(:focus-visible, [data-active=page], [data-active=ancestor]) { color: var(--ui-accent); }
@media (hover: hover) and (pointer: fine) { #menu a:hover, .submenu a:hover { color: var(--ui-accent); } }
#menu a[data-active=ancestor]::before, #menu a[data-active=ancestor]::after, .submenu a[data-active=ancestor]::before, .submenu a[data-active=ancestor]::after { opacity: .5; }
#menu a[data-active=page]::before, #menu a[data-active=page]::after, .submenu a[data-active=page]::before, .submenu a[data-active=page]::after { opacity: 1; }
#menu a:focus-visible, .submenu a:focus-visible { outline: 1px dashed var(--ui-accent); outline-offset: -2px; }
.submenu { grid-column: 1; grid-row: 1; min-width: 0; padding: 10px; border-radius: var(--surface-radius); background: var(--panel); overflow-wrap: anywhere; text-align: center; }
.submenu li { padding: 0; }
.submenu a { display: block; padding: .6rem 1rem; }
.page-heading { margin: 0; font: var(--heading-font); letter-spacing: -.5px; }
.pagetitle { position: relative; display: flex; align-items: center; gap: 12px; padding-bottom: 8px; margin-bottom: 12px; }
.page-title-text { flex: 1; min-width: 0; }
.page-title-actions { display: flex; gap: 10px; flex-shrink: 0; }
.pagetitle::before { content: ''; height: 1px; position: absolute; width: 100%; bottom: 0; background: linear-gradient(to right, var(--page-divider), transparent); }
.pagetitle img { display: block; height: 28px; opacity: .6; }
.pagemenu { padding: 0; margin: 0; list-style: none; width: 100%; line-height: 35px; }
.pagemenu li { border-bottom: 1px dotted var(--pagemenu-border); background: var(--pagemenu-background); }
.pagemenu li:first-child { border-top: 1px dotted var(--pagemenu-border); }
@media (hover: hover) and (pointer: fine) { .pagemenu li:hover { background: var(--pagemenu-hover) !important; } }
.pagemenu li.odd { background: var(--pagemenu-row); }
.pagemenu a { color: inherit; }
.pagenr { width: 25px; margin-left: 30px; float: left; }
#page::-webkit-scrollbar { background: transparent; width: 26px; border-radius: 23px; }
#page::-webkit-scrollbar-thumb { background: linear-gradient(to top, #a520ca 50%, #2681cc); border: 8px solid transparent; background-clip: content-box; border-radius: 20px; }
#page::-webkit-scrollbar-track { border-radius: 20px; border: 8px solid transparent; box-shadow: inset 0 0 6px rgba(0,0,0,.3); }
.navibutton { position: fixed; z-index: 20; width: 64px; height: 64px; border: 0; padding: 0; border-radius: 50%; background: black; color: white; font: 48px/64px Arial, sans-serif; text-align: center; box-shadow: 0 0 10px white; opacity: .3; text-decoration: none; cursor: pointer; }
.backbutton { bottom: 20px; left: 20px; text-indent: -8px; }
.topbutton { bottom: 20px; right: 20px; line-height: 56px; }
[hidden] { display: none !important; }
input[type=text] { box-sizing: border-box; width: 300px; max-width: calc(100% - .8rem); background: var(--ui-control-bg); color: var(--ui-control-text); border: 1px solid var(--ui-control-border); border-radius: var(--ui-radius, 8px); padding: .55rem .7rem; margin: .4rem; font: inherit; }
select { box-sizing: border-box; width: 300px; max-width: calc(100% - .8rem); background: var(--ui-control-bg); color: var(--ui-control-text); border: 1px solid var(--ui-control-border); border-radius: 8px; padding: .5rem .65rem; margin: .4rem; font: inherit; cursor: pointer; accent-color: var(--ui-accent); }
@media (hover: hover) and (pointer: fine) { select:not(:disabled):hover { background: var(--ui-hover); border-color: var(--ui-accent); } }
select:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-color: var(--ui-accent); }
select:disabled { cursor: not-allowed; opacity: .5; }
select option, select optgroup { background: var(--ui-control-bg); color: var(--ui-control-text); }
select option:checked { background: var(--ui-active); color: var(--ui-control-text); }
:where(#page) img, :where(#page) iframe, :where(#page) video, :where(#page) canvas { max-width: 100%; }
:where(#page) canvas { box-sizing: border-box; }
.video-embed { width: 100%; aspect-ratio: 16 / 9; margin: 1rem 0; }
.video-embed > :is(iframe, video) { display: block; width: 100%; height: 100%; max-width: none; border: 0; }
.skip-link { position: fixed; top: -100px; background: white; color: black; z-index: 100; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid #2681cc; outline-offset: 3px; }
.mobile-bar, .mobile-navigation-panel { display: none; }
.mobile-tree, .mobile-tree ul { list-style: none; padding: 0; margin: 0; }
.mobile-tree ul { margin-left: 12px; padding-left: 8px; border-left: 1px solid var(--ui-control-border); }
.mobile-tree-row { display: flex; align-items: center; min-width: 0; }
.mobile-tree-row a { flex: 1; min-width: 0; padding: 10px 0; color: inherit; text-decoration: none; }
.mobile-tree-label { position: relative; display: inline-block; box-sizing: border-box; max-width: 100%; padding: 0 12px; }
.mobile-tree-row button { flex: 0 0 44px; height: 44px; border: 0; background: none; color: inherit; font: inherit; font-size: 20px; cursor: pointer; }
.mobile-tree-row a:is(:focus-visible, [data-active=page], [data-active=ancestor]), .mobile-tree-row button:focus-visible { color: var(--ui-accent); }
@media (hover: hover) and (pointer: fine) { .mobile-tree-row a:hover, .mobile-tree-row button:hover { color: var(--ui-accent); } }
.mobile-tree-row a:is([data-active=page], [data-active=ancestor]) .mobile-tree-label::before, .mobile-tree-row a:is([data-active=page], [data-active=ancestor]) .mobile-tree-label::after { content: ''; position: absolute; top: 50%; width: 3px; height: .8em; margin-top: -.4em; border-block: 1px solid currentColor; pointer-events: none; }
.mobile-tree-label::before { left: 0; border-left: 1px solid currentColor; }
.mobile-tree-label::after { right: 0; border-right: 1px solid currentColor; }
.mobile-tree-row a[data-active=ancestor] .mobile-tree-label::before, .mobile-tree-row a[data-active=ancestor] .mobile-tree-label::after { opacity: .5; }
/* Centered width tiers: wide screens gain breathing room instead of stretching indefinitely. */
@media (min-width: 1200px) {
  :root { --menu-height: 48px; }
  .site-shell { max-width: 1120px; }
  #menu li { font-size: 1.1875rem; line-height: 24px; }
  #menu a { padding: 12px 22px; }
}
@media (min-width: 1440px) {
  :root { --menu-height: 52px; }
  .site-shell { max-width: 1280px; }
  #menu li { font-size: 1.25rem; line-height: 26px; }
  #menu a { padding: 13px 24px; }
}
@media (max-width: 899px) {
  :root { --side-margin: 8px; }
  .site-shell { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #page::-webkit-scrollbar { width: 18px; }
  #page::-webkit-scrollbar-thumb { border-width: 5px; }
  #page::-webkit-scrollbar-track { border-width: 5px; }
  #page.has-vertical-scrollbar { padding-right: 10px; }
  .site-shell, .site-shell.with-submenu { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-shell.with-submenu { grid-template-rows: minmax(0, 1fr) auto auto; }
  #page, .with-submenu #page { grid-column: 1; }
  .with-submenu #menu { grid-row: 3; }
  .submenu { grid-column: 1; grid-row: 2; margin-top: 8px; }
  .submenu ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
  #menu a { padding: 10px 12px; }
  .navibutton { width: 40px; height: 40px; font-size: 30px; line-height: 40px; bottom: 4px; }
  .backbutton { left: 4px; }
  .topbutton { right: 4px; }
  .site-shell.mobile-navigation-ready { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); grid-template-rows: minmax(0, 1fr) auto; }
  .mobile-navigation-ready #menu, .mobile-navigation-ready .submenu { display: none; }
  body:has(.mobile-navigation-ready) .navibutton { display: none; }
  .mobile-navigation-ready .mobile-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; grid-column: 1; grid-row: 2; min-width: 0; height: 44px; margin-top: 8px; border-radius: var(--surface-radius); background: rgba(0, 0, 0, .7); color: white; }
  .mobile-bar a, .mobile-bar button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 44px; border: 0; padding: 0 8px; background: none; color: inherit; text-decoration: none; font: inherit; cursor: pointer; }
  @media (hover: hover) and (pointer: fine) { .mobile-bar a:hover, .mobile-bar button:hover { color: var(--ui-accent); } }
  .mobile-back svg { transform: translateY(-1px); }
  .mobile-bar .mobile-page-title { display: block; min-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .mobile-bar :focus-visible { outline: 1px dashed var(--ui-accent); outline-offset: -3px; }
  .mobile-navigation-ready .mobile-navigation-panel { display: block; grid-column: 1; grid-row: 1; align-self: end; }
  .mobile-navigation-panel .page-heading { margin-bottom: 12px; }
  .mobile-navigation-panel .mobile-language { display: none; }
}
@media print {
  .site-background, .background-controls, .navigation-notice, .visually-hidden { display: none !important; }
  :root, :root[data-tone] { background: white; color: black; --page-text: black; --page-link: black; --page-divider: #3339; color-scheme: light; }
  #page, .submenu, #menu { backdrop-filter: none; -webkit-backdrop-filter: none; }
  html, body { height: auto; overflow: visible; }
  body { position: static; }
  .site-shell, .site-shell.with-submenu { display: block; width: auto; max-width: none; height: auto; min-height: 0; padding: 0; }
  #page, .with-submenu #page { width: auto; overflow: visible; max-height: none; padding: 0; background: white; border-radius: 0; box-shadow: none; }
  #menu, .submenu, .mobile-bar, .mobile-navigation-panel, .navibutton, #print, #pdf, .skip-link, dialog { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }