:root {
    color-scheme: dark;
    --canvas: #131a2c;
    --paper: #1a2338;
    --paper-rgb: 26, 35, 56;
    --raised: #222c45;
    --ink: #eef1fb;
    --ink-rgb: 238, 241, 251;
    --ink-soft: #c9cfe4;
    --muted: #9ea7c6;
    --placeholder: #8a94b6;
    --field-line: #6c7aa1;
    --line: #2b3653;
    --line-strong: #3a4767;
    --accent: #ffb43d;
    --accent-rgb: 255, 180, 61;
    --accent-deep: #ffc96e;
    --accent-deep-rgb: 255, 201, 110;
    --accent-soft: #283351;
    --accent-tint: #1f2840;
    --on-accent: #131a2c;
    --on-ink: #131a2c;
    --on-signal: #131a2c;
    --shadow-rgb: 4, 7, 16;
    --signal: #9aa6ff;
    --signal-hover: #b3bcff;
    --signal-active: #8794f5;
    --signal-deep: #6fcf97;
    --success-ink: #7fdca0;
    --success-ink-rgb: 127, 220, 160;
    --danger: #ff7a86;
    --danger-soft: #35202c;
    --danger-line: #8c3a4a;
    --cover: var(--raised);
    --cover-ratio: 3 / 2;
    --cover-position: center;
    --hero-bg: var(--canvas);
    --hero-ink: var(--ink);
    --hero-lead: var(--ink-soft);
    --footer-bg: #0f1526;
    --footer-ink: #aab2cf;
    --footer-strong: var(--ink);
    --footer-faint: #8e97b7;
    --footer-line: rgba(238, 241, 251, .1);
    --header-bg: rgba(19, 26, 44, .84);
    --header-bg-scrolled: rgba(19, 26, 44, .96);
    --signal-btn-hover: var(--accent-deep);
    --signal-btn-shadow: rgba(var(--accent-rgb), .45);
    --overlay-bg: rgba(19, 26, 44, .8);
    --legal-box-bg: var(--raised);
    --legal-meta: var(--muted);
    --axis-x: #ff6b7f;
    --axis-y: #8fe388;
    --axis-z: #5cb0ff;
    --swatch-1: var(--axis-x);
    --swatch-2: var(--axis-y);
    --swatch-3: var(--axis-z);
    --swatch-4: var(--accent);
    --swatch-5: var(--signal);
    --font-display: 'Exo 2', 'Golos Text', system-ui, sans-serif;
    --font-text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --display-weight: 700;
    --radius-l: 16px;
    --radius-m: 12px;
    --radius-s: 8px;

    --bs-emphasis-color-rgb: var(--ink-rgb);
    --bs-secondary-bg: var(--raised);
    --bs-secondary-bg-rgb: 34, 44, 69;
    --bs-tertiary-bg: #1f2840;
    --bs-tertiary-bg-rgb: 31, 40, 64;
    --bs-border-color-translucent: rgba(238, 241, 251, .12);
    --bs-dark-rgb: var(--ink-rgb);
    --bs-secondary-rgb: 158, 167, 198;
    --bs-danger: var(--danger);
    --bs-danger-rgb: 255, 122, 134;
    --bs-success-text-emphasis: #8fe3ad;
    --bs-success-bg-subtle: #11291f;
    --bs-success-border-subtle: #245c41;
    --bs-danger-text-emphasis: #ff9ea8;
    --bs-danger-bg-subtle: #2e1520;
    --bs-danger-border-subtle: #6e2a38;
    --bs-warning-text-emphasis: #ffd27a;
    --bs-warning-bg-subtle: #2e2512;
    --bs-warning-border-subtle: #6b5320;
    --bs-info-text-emphasis: #b8c0ff;
    --bs-info-bg-subtle: #1c2246;
    --bs-info-border-subtle: #3c4790;
    --bs-border-radius: 8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 12px;
}

body {
    font-size: 1.0625rem;
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.btn-close:focus-visible,
.form-check-input:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none;
}

.hero .btn:focus-visible {
    outline-color: var(--accent);
}

.course-card .card-fav-btn:focus-visible,
.card-overlay .btn:focus-visible,
.btn-remove-fav:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 7px var(--canvas);
}

.course-card-media:focus-visible {
    outline-offset: -3px;
}

.category-row:focus-visible {
    outline-color: var(--on-accent);
}

.btn {
    --bs-btn-border-radius: 10px;
}

.btn-sm {
    --bs-btn-border-radius: 8px;
}

.btn-lg {
    --bs-btn-border-radius: 12px;
}

.btn-primary:hover,
.btn-signal:hover {
    transform: none;
    box-shadow: 0 0 0 1px var(--accent-deep), 0 12px 28px -14px rgba(var(--accent-rgb), .55);
}

.btn-signal {
    --bs-btn-color: var(--on-accent);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-active-color: var(--on-accent);
}

.btn-ghost,
.btn-icon,
.navbar-toggler {
    border-color: var(--field-line);
}

.btn-ghost {
    --bs-btn-border-color: var(--field-line);
    --bs-btn-hover-bg: var(--raised);
    --bs-btn-active-bg: var(--raised);
}

@media (hover: none) {
    .card-overlay .btn-outline-light {
        --bs-btn-border-color: var(--field-line);
        --bs-btn-hover-bg: var(--raised);
        --bs-btn-active-bg: var(--raised);
    }
}

.pay-option {
    border-color: var(--field-line);
}

.pagination {
    --bs-pagination-border-color: var(--field-line);
    --bs-pagination-hover-border-color: var(--accent);
}

.btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23eef1fb'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: .7;
}

.form-control,
.form-select {
    border-radius: 8px;
}

.form-control,
.form-select,
.form-check-input,
.site-search {
    border-color: var(--field-line);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.site-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.site-search .form-control:focus {
    box-shadow: none;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9cfe4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23131a2c' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23131a2c'/%3e%3c/svg%3e");
}

.badge {
    --bs-badge-color: var(--on-accent);
}

.modal-content {
    border: 1px solid var(--line-strong);
}

.dropdown-menu {
    border-color: var(--line-strong);
}

.site-header {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23eef1fb' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.site-search {
    border-radius: 12px;
}

.site-search-btn {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: #2b3756;
    --bs-btn-border-color: #2b3756;
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-active-color: var(--on-accent);
    --bs-btn-border-radius: 8px;
}

.site-brand {
    font-size: 1.1875rem;
    letter-spacing: 0;
}

.brand-mark-top {
    fill: var(--accent);
}

.brand-mark-left {
    fill: #8f9bff;
}

.brand-mark-right {
    fill: #4a57c9;
}

.hero-title,
.section-title,
.page-title,
.course-title,
.course-section-title,
.category-row-name,
.modal-title,
.legal-doc h1,
.course-description h2,
.course-description h3,
.course-description h4 {
    letter-spacing: -.01em;
}

.legal-doc h1 {
    font-weight: var(--display-weight);
}

.price {
    letter-spacing: 0;
}

.hero {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    border-bottom: 1px solid var(--line);
}

.hero::before {
    background-image: radial-gradient(ellipse 60% 75% at 74% 55%, #1c2742 0, rgba(28, 39, 66, 0) 100%);
    background-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

.hero-title {
    text-wrap: balance;
    font-size: clamp(2.125rem, 1.15rem + 3.1vw, 3.625rem);
    line-height: 1.04;
}

.blockout {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin-inline: auto;
    overflow: visible;
}

.blockout-grid-lines {
    fill: none;
    stroke: rgba(154, 166, 255, .3);
    stroke-width: 1;
}

.blockout-axis {
    fill: none;
    stroke-width: 1.5;
    opacity: .7;
}

.blockout-axis--x {
    stroke: var(--axis-x);
}

.blockout-axis--y {
    stroke: var(--axis-y);
}

.blockout-shadow {
    fill: rgba(4, 7, 16, .5);
    animation: fade-in .6s ease calc(.7s + var(--i) * .12s) both;
}

.blockout-block {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: blockout-extrude .75s var(--ease-out) calc(.15s + var(--i) * .12s) both;
}

.blockout-top {
    fill: #52639a;
}

.blockout-left {
    fill: #3a4877;
}

.blockout-right {
    fill: #29345a;
}

.blockout-block--selected .blockout-top {
    fill: #5a6ca6;
}

.blockout-outline {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    animation: draw-line .7s var(--ease-io) .85s both;
}

.blockout-arc {
    fill: none;
    stroke: var(--signal);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1 8;
    animation: fade-in .5s ease calc(1.2s + var(--i) * .15s) both;
}

.blockout-ball {
    transform-box: fill-box;
    transform-origin: center;
    animation: pop-in .45s var(--ease-out) 1.1s both;
}

.blockout-gizmo {
    transform-box: view-box;
    transform-origin: 396.8px 126.4px;
    animation: pop-in .5s var(--ease-out) 1.35s both;
}

.blockout-axis-arrow path {
    stroke-width: 2.5;
    stroke-linecap: round;
}

.blockout-axis-arrow .blockout-axis-tip {
    stroke-width: 0;
}

.blockout-axis-arrow--x path {
    stroke: var(--axis-x);
    fill: var(--axis-x);
}

.blockout-axis-arrow--y path {
    stroke: var(--axis-y);
    fill: var(--axis-y);
}

.blockout-axis-arrow--z path {
    stroke: var(--axis-z);
    fill: var(--axis-z);
}

.blockout-pivot {
    fill: var(--ink);
    stroke: var(--canvas);
    stroke-width: 2;
}

.blockout-sun {
    animation: fade-in .6s ease .1s both;
}

.blockout-sun-core {
    fill: var(--accent);
}

.blockout-sun-rays {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
}

.blockout-sun-beam {
    fill: none;
    stroke: rgba(var(--accent-rgb), .55);
    stroke-width: 1.5;
    stroke-dasharray: 5 6;
}

@keyframes blockout-extrude {
    from {
        transform: scaleY(0);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 991.98px) {
    .blockout {
        max-width: 420px;
    }
}

@media (max-width: 575.98px) {
    .blockout {
        max-width: 320px;
    }
}

.course-card {
    transition: border-color .25s ease, box-shadow .25s ease;
}

.course-card:hover {
    transform: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.card-fav-btn {
    background: var(--paper);
    color: var(--ink);
}

.card-fav-btn:hover {
    background: var(--raised);
}

.btn-remove-fav:hover {
    color: var(--on-accent);
}

.course-card-category::before {
    width: 12px;
    height: 7px;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.category-swatch {
    width: 20px;
    height: 23px;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: conic-gradient(from -60deg, color-mix(in oklab, var(--swatch) 55%, #fff) 0 120deg, color-mix(in oklab, var(--swatch) 62%, #000) 120deg 240deg, var(--swatch) 240deg 360deg);
}

.category-swatch:has(img) {
    clip-path: none;
}

.category-row:hover .category-swatch:not(:has(img)),
.category-row:focus-visible .category-swatch:not(:has(img)) {
    background: conic-gradient(from -60deg, #4a4f63 0 120deg, var(--on-accent) 120deg 240deg, #2b3044 240deg 360deg);
    transform: rotate(120deg);
}

.category-row-name {
    font-weight: 700;
}

.category-row:hover .category-row-count,
.category-row:focus-visible .category-row-count {
    color: var(--on-accent);
}

.course-description h2::before,
.course-description h3::before {
    width: 13px;
    height: 15px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: conic-gradient(from -60deg, #ffd58a 0 120deg, #b9741a 120deg 240deg, var(--accent) 240deg 360deg);
}

.course-description ul > li::before {
    top: .62em;
    width: 11px;
    height: 7px;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.course-description ul > li.desc-lead::before {
    top: calc(1rem + .62em);
}

.autocomplete-item img {
    width: 60px;
    height: 40px;
}

.order-thumb {
    width: 72px;
    height: 48px;
}

@media (prefers-reduced-motion: reduce) {
    .blockout-block,
    .blockout-shadow,
    .blockout-outline,
    .blockout-arc,
    .blockout-ball,
    .blockout-gizmo,
    .blockout-sun {
        animation: none !important;
    }

    .blockout-outline {
        stroke-dashoffset: 0;
    }
}