:root {
    color-scheme: dark;
    --background: #05070a;
    --surface: #0b0f14;
    --raised: #11171f;
    --ink: #f4f6fa;
    --muted: #a3aab5;
    --accent: #0059d6;
    --accent-hover: #0063e6;
    --link: #8bbaff;
    --line: #2a3038;
    --control-line: #728094;
    --radius: .25rem;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: radial-gradient(ellipse at 50% 25%, #12223c66, transparent 42rem), linear-gradient(115deg, #030507, #080b10 48%, #030507);
    background-attachment: fixed;
    font: 1rem/1.7 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px);
    background-size: 4rem 4rem;
}
a { color: var(--link); text-underline-offset: .2em; }
a:hover { color: #c3dcff; }
:focus-visible { outline: 3px solid #91beff; outline-offset: 4px; }
.skip-link { position: absolute; top: -120px; left: 1rem; padding: .75rem 1rem; background: #003f99; color: white; z-index: 20; }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 4.75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line); background: #030508ed; }
.brand, .auth-brand { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -.035em; }
.brand img, .auth-brand img { object-fit: contain; flex-shrink: 0; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
nav form { margin: 0; }
nav a { display: inline-flex; min-height: 44px; align-items: center; }
.page { position: relative; max-width: 1440px; margin: auto; padding: clamp(1.5rem, 4vw, 3rem); overflow-wrap: anywhere; }
h1, h2 { line-height: 1.2; letter-spacing: -.035em; }
h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 650; margin: .25em 0 .7em; }
h2 { font-size: 1.35rem; font-weight: 650; margin: 0 0 .6rem; }
p { margin: 0 0 1rem; }
.eyebrow { color: #8bbaff; font-size: .875rem; letter-spacing: .1em; font-weight: 650; text-transform: uppercase; margin-bottom: .6rem; }
.intro { max-width: 700px; padding-block: 3rem; }
.intro > p:last-child { font-size: 1.15rem; color: #c4cad3; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 2rem; min-height: 48px; padding: .75rem 1.25rem; border: 1px solid #4d97ff; border-radius: .125rem; color: white; background: var(--accent); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.button:hover { color: white; background: var(--accent-hover); }
.button-wide { width: 100%; justify-content: space-between; }
.text-button { min-height: 44px; border: 0; background: transparent; padding: .5rem .75rem; color: #c4cad3; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.text-button:hover { color: white; background: var(--raised); }
.form-panel, .course-card, .empty-state { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, #10161ef7, #080c11f7); box-shadow: 0 1.5rem 4rem #00000050; }
.form-panel { max-width: 832px; margin: 1.5rem auto 0; padding: clamp(1.25rem, 4vw, 3rem); }
.form-panel h1 { font-size: 2rem; }
.compact { width: 100%; max-width: 480px; margin: auto; }
.auth-page .page { min-height: 100vh; display: grid; align-content: center; padding-block: 3rem; }
.auth-brand { display: flex; justify-content: center; margin-bottom: 2rem; font-size: 2rem; }
.auth-page .eyebrow { text-align: center; }
.auth-page h1 { font-size: 1.6rem; text-align: center; margin-bottom: 1.75rem; }
.field { margin-bottom: 1.75rem; }
label { display: block; font-weight: 600; margin-bottom: .5rem; }
input:not([type=checkbox]), textarea { display: block; width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--control-line); border-radius: .2rem; padding: .75rem; background: #0a0e13; color: var(--ink); font: inherit; }
input::file-selector-button { padding: .5rem .75rem; margin-right: 1rem; border: 1px solid var(--control-line); border-radius: .125rem; color: var(--ink); background: #202a37; font: inherit; cursor: pointer; }
input:focus-visible, textarea:focus-visible { outline-offset: 2px; }
textarea { resize: vertical; }
input[aria-invalid], textarea[aria-invalid] { border: 2px solid #ff8797; }
.hint { color: var(--muted); font-size: .9375rem; margin: .5rem 0; }
.url-preview { padding: .75rem 1rem; margin-top: .75rem; border-left: 3px solid #4d97ff; background: #0a1a30; font-size: .9375rem; color: #c6ddff; }
.checkbox { display: flex; align-items: flex-start; gap: .75rem; font-weight: 400; padding-block: .5rem; }
input[type=checkbox] { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .25rem; accent-color: #086bff; }
textarea:disabled { opacity: .55; }
.image-preview { display: block; width: 100%; max-height: 20rem; object-fit: contain; margin-top: 1rem; background: #05070a; border: 1px solid var(--line); }
.back-link { display: inline-flex; align-items: center; min-height: 44px; gap: .75rem; font-weight: 600; }
.heading-row { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.heading-row h1 { margin-bottom: 0; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; }
.course-card { overflow: hidden; display: flex; flex-direction: column; transition: border-color 160ms ease, transform 160ms ease; }
.course-card:hover, .course-card:focus-within { border-color: #687990; }
.course-card:hover { transform: translateY(-3px); }
.card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: #080b0f; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.card-body h2 { font-size: 1.25rem; }
.course-path { font-size: .9375rem; color: var(--muted); margin-bottom: 1.5rem; }
.card-body .button { margin-top: auto; }
.frame-corner { position: absolute; width: 1.2rem; height: 1.2rem; pointer-events: none; }
.corner-top { top: 1rem; left: 1rem; border-top: 2px solid white; border-left: 2px solid white; }
.corner-bottom { bottom: 1rem; right: 1rem; border-bottom: 2px solid white; border-right: 2px solid white; }
.rgb-bars { position: absolute; display: flex; gap: .3rem; top: 1rem; right: 1rem; pointer-events: none; }
.rgb-bars i { width: 1.25rem; height: .2rem; background: #ff3951; }
.rgb-bars i:nth-child(2) { background: #43d26a; }
.rgb-bars i:nth-child(3) { background: #2578ff; }
.empty-state { grid-column: 1/-1; padding: 3rem 1.5rem; border-style: dashed; text-align: center; }
.empty-state p { color: var(--muted); }
.empty-mark { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid #5188da; color: #a4caff; background: #10284b; font-size: 1.5rem; border-radius: 50%; margin-bottom: 1rem; }
.course { position: relative; isolation: isolate; max-width: 1100px; margin: 0 auto; }
.course-atmosphere { position: absolute; inset: -2rem 0 auto; width: 100%; height: 32rem; object-fit: cover; opacity: .22; filter: blur(20px); mask-image: linear-gradient(#000, transparent); z-index: -1; pointer-events: none; }
.course-heading { padding: 1rem 0 1.5rem; }
.course-image-panel { position: relative; border: 1px solid var(--line); background: #080c11; box-shadow: 0 1.5rem 4rem #00000050; }
.course-image { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.embed-link { margin-top: 1.5rem; }
.notice, .errors { padding: 1rem 1.25rem; margin-bottom: 1.5rem; border: 1px solid #4b965e; background: #102e1b; color: #bdf2c7; }
.errors { background: #41131b; border-color: #c26071; color: #ffd0d7; }
.errors a { color: #ffd0d7; }
.errors h2 { font-size: 1.125rem; }
.errors ul { margin-bottom: 0; padding-left: 1.25rem; }
.pagination { margin-top: 2rem; }
.embedded { background: var(--background); }
.embedded::before { display: none; }
.embedded .page { padding: 1.25rem; }
.embedded .course-heading { padding-top: 0; }
.embedded .course-image-panel { box-shadow: none; }
@media (max-width: 480px) { .page { padding: 1.5rem 1rem; } .heading-row > .button { width: 100%; justify-content: space-between; } .brand { font-size: 1.25rem; } .auth-brand { font-size: 1.6rem; } .site-header nav { gap: .5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .button { border: 1px solid ButtonText; } .course-atmosphere, body::before { display: none; } }
@media print { body { color: #000; background: #fff; } .site-header, .skip-link, .course-atmosphere, body::before, .rgb-bars, .frame-corner { display: none; } .course-image-panel { border: 0; box-shadow: none; } .eyebrow, a { color: #000; } }