:root { --lvl-A0-ink: oklch(50% 0.17 25); --lvl-A0-tint: oklch(94.5% 0.022 25); --lvl-A0-strong: oklch(87% 0.055 25); --lvl-A1-ink: oklch(50% 0.105 60); --lvl-A1-tint: oklch(94.5% 0.028 60); --lvl-A1-strong: oklch(87% 0.068 60); --lvl-A2-ink: oklch(50% 0.091 88); --lvl-A2-tint: oklch(94.5% 0.054 88); --lvl-A2-strong: oklch(87% 0.11 88); --lvl-B1-ink: oklch(50% 0.123 150); --lvl-B1-tint: oklch(94.5% 0.065 150); --lvl-B1-strong: oklch(87% 0.11 150); --lvl-B2-ink: oklch(50% 0.095 235); --lvl-B2-tint: oklch(94.5% 0.025 235); --lvl-B2-strong: oklch(87% 0.06 235); --lvl-C1-ink: oklch(50% 0.17 275); --lvl-C1-tint: oklch(94.5% 0.022 275); --lvl-C1-strong: oklch(87% 0.05 275); --lvl-C2-ink: oklch(50% 0.17 315); --lvl-C2-tint: oklch(94.5% 0.032 315); --lvl-C2-strong: oklch(87% 0.074 315); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lvl-A0-ink: oklch(81% 0.096 25); --lvl-A0-tint: oklch(29% 0.065 25); --lvl-A0-strong: oklch(40% 0.09 25); --lvl-A1-ink: oklch(81% 0.118 60); --lvl-A1-tint: oklch(29% 0.047 60); --lvl-A1-strong: oklch(40% 0.065 60); --lvl-A2-ink: oklch(81% 0.148 88); --lvl-A2-tint: oklch(29% 0.041 88); --lvl-A2-strong: oklch(40% 0.056 88); --lvl-B1-ink: oklch(81% 0.15 150); --lvl-B1-tint: oklch(29% 0.055 150); --lvl-B1-strong: oklch(40% 0.077 150); --lvl-B2-ink: oklch(81% 0.1 235); --lvl-B2-tint: oklch(29% 0.042 235); --lvl-B2-strong: oklch(40% 0.058 235); --lvl-C1-ink: oklch(81% 0.085 275); --lvl-C1-tint: oklch(29% 0.065 275); --lvl-C1-strong: oklch(40% 0.09 275); --lvl-C2-ink: oklch(81% 0.126 315); --lvl-C2-tint: oklch(29% 0.065 315); --lvl-C2-strong: oklch(40% 0.09 315); } }
:root[data-theme="dark"] { --lvl-A0-ink: oklch(81% 0.096 25); --lvl-A0-tint: oklch(29% 0.065 25); --lvl-A0-strong: oklch(40% 0.09 25); --lvl-A1-ink: oklch(81% 0.118 60); --lvl-A1-tint: oklch(29% 0.047 60); --lvl-A1-strong: oklch(40% 0.065 60); --lvl-A2-ink: oklch(81% 0.148 88); --lvl-A2-tint: oklch(29% 0.041 88); --lvl-A2-strong: oklch(40% 0.056 88); --lvl-B1-ink: oklch(81% 0.15 150); --lvl-B1-tint: oklch(29% 0.055 150); --lvl-B1-strong: oklch(40% 0.077 150); --lvl-B2-ink: oklch(81% 0.1 235); --lvl-B2-tint: oklch(29% 0.042 235); --lvl-B2-strong: oklch(40% 0.058 235); --lvl-C1-ink: oklch(81% 0.085 275); --lvl-C1-tint: oklch(29% 0.065 275); --lvl-C1-strong: oklch(40% 0.09 275); --lvl-C2-ink: oklch(81% 0.126 315); --lvl-C2-tint: oklch(29% 0.065 315); --lvl-C2-strong: oklch(40% 0.09 315); }
.lvl-A0 { --lvl: var(--lvl-A0-ink); --level-tint: var(--lvl-A0-tint); --level-strong: var(--lvl-A0-strong); }
.lvl-A1 { --lvl: var(--lvl-A1-ink); --level-tint: var(--lvl-A1-tint); --level-strong: var(--lvl-A1-strong); }
.lvl-A2 { --lvl: var(--lvl-A2-ink); --level-tint: var(--lvl-A2-tint); --level-strong: var(--lvl-A2-strong); }
.lvl-B1 { --lvl: var(--lvl-B1-ink); --level-tint: var(--lvl-B1-tint); --level-strong: var(--lvl-B1-strong); }
.lvl-B2 { --lvl: var(--lvl-B2-ink); --level-tint: var(--lvl-B2-tint); --level-strong: var(--lvl-B2-strong); }
.lvl-C1 { --lvl: var(--lvl-C1-ink); --level-tint: var(--lvl-C1-tint); --level-strong: var(--lvl-C1-strong); }
.lvl-C2 { --lvl: var(--lvl-C2-ink); --level-tint: var(--lvl-C2-tint); --level-strong: var(--lvl-C2-strong); }
html[data-level="A0"] .seg :is([data-set-level="A0"]) { background: var(--level-tint); }
html[data-level="A1"] .seg :is([data-set-level="A0"], [data-set-level="A1"]) { background: var(--level-tint); }
html[data-level="A2"] .seg :is([data-set-level="A0"], [data-set-level="A1"], [data-set-level="A2"]) { background: var(--level-tint); }
html[data-level="B1"] .seg :is([data-set-level="A0"], [data-set-level="A1"], [data-set-level="A2"], [data-set-level="B1"]) { background: var(--level-tint); }
html[data-level="B2"] .seg :is([data-set-level="A0"], [data-set-level="A1"], [data-set-level="A2"], [data-set-level="B1"], [data-set-level="B2"]) { background: var(--level-tint); }
html[data-level="C1"] .seg :is([data-set-level="A0"], [data-set-level="A1"], [data-set-level="A2"], [data-set-level="B1"], [data-set-level="B2"], [data-set-level="C1"]) { background: var(--level-tint); }
html[data-level="C2"] .seg :is([data-set-level="A0"], [data-set-level="A1"], [data-set-level="A2"], [data-set-level="B1"], [data-set-level="B2"], [data-set-level="C1"], [data-set-level="C2"]) { background: var(--level-tint); }
html[data-level="A0"]:is([data-page="topic"], [data-page="track"]) :is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"], [data-level="C1"], [data-level="C2"]):not(.toc > li) { display: none !important; }
html[data-level="A0"]:is([data-page="topic"], [data-page="track"]) .lvl > .half:is(.lvl-A1, .lvl-A2, .lvl-B1, .lvl-B2, .lvl-C1, .lvl-C2) { background: var(--beyond-bg); box-shadow: var(--beyond-edge); color: var(--beyond-ink); }
html[data-level="A0"][data-page="topic"] .toc > li:is([data-level="A1"], [data-level="A2"], [data-level="B1"], [data-level="B2"], [data-level="C1"], [data-level="C2"]) { opacity: 0.4; pointer-events: none; }
html[data-level="A0"] .filter-empty:is([data-needs="A1"], [data-needs="A2"], [data-needs="B1"], [data-needs="B2"], [data-needs="C1"], [data-needs="C2"]) { display: block; }
html[data-level="A1"]:is([data-page="topic"], [data-page="track"]) :is([data-level="A2"], [data-level="B1"], [data-level="B2"], [data-level="C1"], [data-level="C2"]):not(.toc > li) { display: none !important; }
html[data-level="A1"]:is([data-page="topic"], [data-page="track"]) .lvl > .half:is(.lvl-A2, .lvl-B1, .lvl-B2, .lvl-C1, .lvl-C2) { background: var(--beyond-bg); box-shadow: var(--beyond-edge); color: var(--beyond-ink); }
html[data-level="A1"][data-page="topic"] .toc > li:is([data-level="A2"], [data-level="B1"], [data-level="B2"], [data-level="C1"], [data-level="C2"]) { opacity: 0.4; pointer-events: none; }
html[data-level="A1"] .filter-empty:is([data-needs="A2"], [data-needs="B1"], [data-needs="B2"], [data-needs="C1"], [data-needs="C2"]) { display: block; }
html[data-level="A2"]:is([data-page="topic"], [data-page="track"]) :is([data-level="B1"], [data-level="B2"], [data-level="C1"], [data-level="C2"]):not(.toc > li) { display: none !important; }
html[data-level="A2"]:is([data-page="topic"], [data-page="track"]) .lvl > .half:is(.lvl-B1, .lvl-B2, .lvl-C1, .lvl-C2) { background: var(--beyond-bg); box-shadow: var(--beyond-edge); color: var(--beyond-ink); }
html[data-level="A2"][data-page="topic"] .toc > li:is([data-level="B1"], [data-level="B2"], [data-level="C1"], [data-level="C2"]) { opacity: 0.4; pointer-events: none; }
html[data-level="A2"] .filter-empty:is([data-needs="B1"], [data-needs="B2"], [data-needs="C1"], [data-needs="C2"]) { display: block; }
html[data-level="B1"]:is([data-page="topic"], [data-page="track"]) :is([data-level="B2"], [data-level="C1"], [data-level="C2"]):not(.toc > li) { display: none !important; }
html[data-level="B1"]:is([data-page="topic"], [data-page="track"]) .lvl > .half:is(.lvl-B2, .lvl-C1, .lvl-C2) { background: var(--beyond-bg); box-shadow: var(--beyond-edge); color: var(--beyond-ink); }
html[data-level="B1"][data-page="topic"] .toc > li:is([data-level="B2"], [data-level="C1"], [data-level="C2"]) { opacity: 0.4; pointer-events: none; }
html[data-level="B1"] .filter-empty:is([data-needs="B2"], [data-needs="C1"], [data-needs="C2"]) { display: block; }
html[data-level="B2"]:is([data-page="topic"], [data-page="track"]) :is([data-level="C1"], [data-level="C2"]):not(.toc > li) { display: none !important; }
html[data-level="B2"]:is([data-page="topic"], [data-page="track"]) .lvl > .half:is(.lvl-C1, .lvl-C2) { background: var(--beyond-bg); box-shadow: var(--beyond-edge); color: var(--beyond-ink); }
html[data-level="B2"][data-page="topic"] .toc > li:is([data-level="C1"], [data-level="C2"]) { opacity: 0.4; pointer-events: none; }
html[data-level="B2"] .filter-empty:is([data-needs="C1"], [data-needs="C2"]) { display: block; }
html[data-level="C1"]:is([data-page="topic"], [data-page="track"]) :is([data-level="C2"]):not(.toc > li) { display: none !important; }
html[data-level="C1"]:is([data-page="topic"], [data-page="track"]) .lvl > .half:is(.lvl-C2) { background: var(--beyond-bg); box-shadow: var(--beyond-edge); color: var(--beyond-ink); }
html[data-level="C1"][data-page="topic"] .toc > li:is([data-level="C2"]) { opacity: 0.4; pointer-events: none; }
html[data-level="C1"] .filter-empty:is([data-needs="C2"]) { display: block; }
html[data-level="A0"] [data-at]:not([data-at~="A0"]) { display: none !important; }
html[data-level="A1"] [data-at]:not([data-at~="A1"]) { display: none !important; }
html[data-level="A2"] [data-at]:not([data-at~="A2"]) { display: none !important; }
html[data-level="B1"] [data-at]:not([data-at~="B1"]) { display: none !important; }
html[data-level="B2"] [data-at]:not([data-at~="B2"]) { display: none !important; }
html[data-level="C1"] [data-at]:not([data-at~="C1"]) { display: none !important; }
html[data-level="C2"] [data-at]:not([data-at~="C2"]) { display: none !important; }