/*
 * ORBITAL — the INSHARO University design system, for the candidate portal.
 *
 * Everything a candidate sees from /candidate/sign-in onwards: the signed-out door
 * (layouts/candidate-guest), and the signed-in portal (layouts/candidate) — the
 * dashboard, the course player, the declaration, the quiz, the result, the capstone
 * and the leaderboard. The staff Learning pages are NOT on this system and keep
 * learning/_superr_* exactly as they were; every rule here hangs off `.orb`, which
 * only the two candidate layouts put on their <body>.
 *
 * ─────────────────────────────────────────────────────────────────────────────────
 * THE LOOK
 * ─────────────────────────────────────────────────────────────────────────────────
 * Deep-space black with INSHARO lime as the one signal colour and cyan as the second
 * voice. Violet appears only as light in the sky, never as a control. Lime means
 * "go / done / you": the primary action, a finished step, your own figure. Cyan means
 * "in motion": progress, the active lesson, focus.
 *
 * Contrast, measured against the void (#05060f):
 *   ink    #eef1ff  18.2:1      lime  #c6f432  15.8:1
 *   ink-2  #aab2d5   9.7:1      cyan  #22d3ee  11.2:1
 *   ink-3  #7c86b0   5.7:1      danger #ff6b81  7.4:1
 * Panels sit at ~#0e1126, which costs each of those well under a point, so every
 * text colour here clears WCAG AA for body copy on every surface it is used on.
 *
 * ─────────────────────────────────────────────────────────────────────────────────
 * MOTION IS DECORATION, NEVER INFORMATION
 * ─────────────────────────────────────────────────────────────────────────────────
 * Every figure a screen animates (a counter ticking up, a ring filling) is already
 * the final value in the markup; script only replays the arrival. So a page with no
 * JavaScript, a test, a screen reader, and somebody with reduced motion all get the
 * same facts. `prefers-reduced-motion: reduce` switches the whole layer off at the
 * bottom of this file, and orbital.js checks the same query before it starts a frame.
 *
 * NO BACKDROP-FILTER ON PANELS. The starfield behind them repaints every frame, and
 * a blurred panel would have to re-blur with it — the cost scales with the number of
 * cards on screen. Panels are nearly opaque glass instead; the blur is kept for the
 * few overlays that sit still.
 */

/* Cross-document view transitions: portal page to portal page crossfades, and the
   sky (named below) holds still across the cut. A page outside the portal does not
   load this file, so leaving it is an ordinary navigation. */
@view-transition { navigation: auto; }

/* ───────────────────────────── Tokens ───────────────────────────── */
.orb {
    --orb-void: #05060f;
    --orb-night: #0a0d1f;
    --orb-panel: rgba(14, 17, 38, .82);
    --orb-panel-hi: rgba(22, 27, 58, .88);
    --orb-panel-solid: #0e1126;
    --orb-well: rgba(255, 255, 255, .035);
    --orb-edge: rgba(160, 175, 255, .13);
    --orb-edge-hi: rgba(160, 175, 255, .26);

    --orb-ink: #eef1ff;
    --orb-ink-2: #aab2d5;
    --orb-ink-3: #7c86b0;

    --orb-lime: #c6f432;
    --orb-lime-rgb: 198, 244, 50;
    --orb-on-lime: #0b1200;
    --orb-cyan: #22d3ee;
    --orb-cyan-rgb: 34, 211, 238;
    --orb-violet: #8b5cf6;
    --orb-violet-rgb: 139, 92, 246;
    --orb-danger: #ff6b81;
    --orb-danger-rgb: 255, 107, 129;
    --orb-amber: #fbbf24;

    --orb-r-xl: 28px;
    --orb-r-lg: 20px;
    --orb-r-md: 14px;
    --orb-r-sm: 10px;
    --orb-r-pill: 999px;

    --orb-ease-out: cubic-bezier(.16, 1, .3, 1);
    --orb-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* The portal makes no third-party font request (an outside party's page should
       not report its visitors to a font CDN to draw a heading). A visitor who has
       these faces installed gets them; everybody else gets the platform's own sans
       and mono — the shapes this system leans on (tight tracking, tabular figures,
       uppercase mono labels) read the same in either. */
    --orb-display: 'Space Grotesk', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --orb-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --orb-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, 'Liberation Mono', monospace;

    color-scheme: dark;
    color: var(--orb-ink);
    font-family: var(--orb-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ───────────────────────────── The stage ─────────────────────────────
   The dark world the portal lives in, under the masthead. */
.orb-stage {
    position: relative;
    isolation: isolate;
    min-height: 100%;
    background:
        radial-gradient(1100px 620px at 88% -8%, rgba(var(--orb-violet-rgb), .20), transparent 62%),
        radial-gradient(900px 520px at -8% 26%, rgba(var(--orb-cyan-rgb), .12), transparent 62%),
        radial-gradient(760px 420px at 50% 112%, rgba(var(--orb-lime-rgb), .08), transparent 62%),
        linear-gradient(180deg, var(--orb-void) 0%, #070918 46%, var(--orb-void) 100%);
}
/* The sky: the starfield canvas and the aurora, behind everything.
   `overflow: clip`, NOT hidden — clip is not a scroll container, so the canvas inside
   can be `position: sticky` against the viewport and stay put while a long lesson
   scrolls, clipped to the stage rather than painting over the masthead. */
.orb-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
    view-transition-name: orb-sky;
}
.orb-stars {
    position: sticky;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
}
.orb-aurora {
    position: absolute;
    top: -30vh; left: 10%;
    width: 80%; height: 70vh;
    background: conic-gradient(from 120deg at 50% 50%,
        rgba(var(--orb-violet-rgb), .0), rgba(var(--orb-violet-rgb), .22),
        rgba(var(--orb-cyan-rgb), .16), rgba(var(--orb-lime-rgb), .10),
        rgba(var(--orb-violet-rgb), .0));
    filter: blur(70px);
    opacity: .55;
    animation: orb-aurora 26s ease-in-out infinite alternate;
}
/* A faint light that follows the pointer across the stage (orbital.js sets the
   coordinates). Pure decoration, so it is pointer-events: none like the sky. */
.orb-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(600px circle at var(--orb-cx, 50%) var(--orb-cy, -20%), rgba(var(--orb-cyan-rgb), .06), transparent 60%);
}

/* ───────────────────────────── Type ───────────────────────────── */
/* Element defaults at ONE CLASS of specificity: `.orb :where(h1)` is (0,1,0). That is
   enough to beat the ERP's global element rules (`h1 { … }` is (0,0,1)), and no more
   than any component class here, which then wins on source order — so a button that
   is an <a>, or a title that is an <h1>, never has to out-shout these. */
.orb :where(h1, h2, h3, h4, h5, h6, .orb-display) {
    font-family: var(--orb-display);
    color: var(--orb-ink);
    letter-spacing: -0.025em;
}
.orb :where(a) { color: var(--orb-cyan); text-decoration-color: rgba(var(--orb-cyan-rgb), .4); text-underline-offset: 3px; }
.orb :where(a):hover { color: #67e8f9; }
.orb .text-muted, .orb .form-text { color: var(--orb-ink-2) !important; }
.orb :where(strong, b) { color: var(--orb-ink); }
.orb :where(p, li, dd, td, label, legend) { color: inherit; }
.orb ::selection { background: rgba(var(--orb-lime-rgb), .35); color: #fff; }

.orb-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--orb-mono);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--orb-ink-2);
}
.orb-eyebrow__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--orb-lime);
    box-shadow: 0 0 0 0 rgba(var(--orb-lime-rgb), .6);
    animation: orb-ping 2.4s ease-out infinite;
}
.orb-gradient-text {
    background: linear-gradient(100deg, #ffffff 0%, #e7ffb0 30%, var(--orb-lime) 52%, var(--orb-cyan) 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    animation: orb-sheen 9s ease-in-out infinite alternate;
}
.orb-mono { font-family: var(--orb-mono); font-variant-numeric: tabular-nums; }
.orb-muted { color: var(--orb-ink-2); }
.orb-faint { color: var(--orb-ink-3); }
.orb-num { font-variant-numeric: tabular-nums; }

/* ───────────────────────────── Page head ───────────────────────────── */
.orb-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-family: var(--orb-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--orb-ink-3);
    margin-bottom: 14px;
}
.orb-crumbs a { color: var(--orb-ink-2); text-decoration: none; }
.orb-crumbs a:hover { color: var(--orb-lime); }
.orb-crumbs__sep { opacity: .5; }

.orb-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 18px 24px;
    margin-bottom: 26px;
}
.orb-head__title {
    font-size: clamp(1.85rem, 3.6vw, 2.9rem);
    line-height: 1.04;
    font-weight: 700;
    margin: 6px 0 8px;
}
.orb-head__sub { color: var(--orb-ink-2); font-size: 15px; margin: 0; max-width: 64ch; }
.orb-head__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ───────────────────────────── Buttons ───────────────────────────── */
.orb-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: var(--orb-r-pill);
    border: 1px solid var(--orb-edge-hi);
    background: rgba(255, 255, 255, .04);
    color: var(--orb-ink);
    font-family: var(--orb-display);
    font-size: 14.5px; font-weight: 600; letter-spacing: .005em;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform .2s var(--orb-ease-out), background-color .2s ease, border-color .2s ease, box-shadow .25s ease, color .2s ease;
}
.orb-btn:hover { color: var(--orb-ink); border-color: rgba(var(--orb-cyan-rgb), .55); background: rgba(var(--orb-cyan-rgb), .08); transform: translateY(-1px); }
.orb-btn:active { transform: translateY(0) scale(.98); }
.orb-btn:focus-visible { outline: 2px solid var(--orb-cyan); outline-offset: 3px; }
.orb-btn[disabled], .orb-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.orb-btn .bi { font-size: 1.05em; }

.orb-btn--primary {
    background: var(--orb-lime);
    border-color: var(--orb-lime);
    color: var(--orb-on-lime);
    box-shadow: 0 0 0 1px rgba(var(--orb-lime-rgb), .35), 0 10px 30px -8px rgba(var(--orb-lime-rgb), .55);
}
.orb-btn--primary:hover {
    background: #d4ff4d; border-color: #d4ff4d; color: var(--orb-on-lime);
    box-shadow: 0 0 0 1px rgba(var(--orb-lime-rgb), .5), 0 14px 38px -8px rgba(var(--orb-lime-rgb), .75);
}
/* The sheen that sweeps across the primary action every few seconds. */
.orb-btn--primary::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    animation: orb-shine 4.8s ease-in-out infinite;
    pointer-events: none;
}
.orb-btn--primary:disabled::after { display: none; }
.orb-btn--danger { border-color: rgba(var(--orb-danger-rgb), .5); color: var(--orb-danger); }
.orb-btn--danger:hover { background: rgba(var(--orb-danger-rgb), .1); border-color: var(--orb-danger); color: #ffc2cc; }
.orb-btn--sm { min-height: 36px; padding: 7px 14px; font-size: 13px; }
.orb-btn--lg { min-height: 52px; padding: 13px 26px; font-size: 16px; }
.orb-btn--block { width: 100%; }
.orb-btn--brand-whatsapp { background: #25d366; border-color: #25d366; color: #04210f; }
.orb-btn--brand-whatsapp:hover { background: #3be07a; border-color: #3be07a; color: #04210f; }
.orb-btn--brand-linkedin { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.orb-btn--brand-linkedin:hover { background: #1979d6; border-color: #1979d6; color: #fff; }

.orb-back {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 16px 5px 5px;
    border: 1px solid var(--orb-edge-hi);
    border-radius: var(--orb-r-pill);
    color: var(--orb-ink) !important;
    font-family: var(--orb-display); font-size: 14px; font-weight: 600;
    text-decoration: none;
    background: rgba(255, 255, 255, .03);
    transition: border-color .2s ease, background-color .2s ease, transform .2s var(--orb-ease-out);
}
.orb-back:hover { border-color: rgba(var(--orb-cyan-rgb), .6); background: rgba(var(--orb-cyan-rgb), .08); transform: translateX(-2px); }
.orb-back__icon {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .07);
}

/* ───────────────────────────── Panels ─────────────────────────────
   Glass, a hairline that brightens toward the top-left like light catching an edge,
   and (with [data-orb-tilt]) a spotlight that follows the pointer. */
.orb-panel {
    position: relative;
    background: linear-gradient(160deg, var(--orb-panel-hi), var(--orb-panel) 46%);
    border: 1px solid var(--orb-edge);
    border-radius: var(--orb-r-lg);
    padding: 22px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px -30px rgba(0, 0, 0, .8);
}
.orb-panel::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(var(--orb-cyan-rgb), .45), rgba(var(--orb-violet-rgb), .15) 35%, transparent 60%, rgba(var(--orb-lime-rgb), .25));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: .55;
    pointer-events: none;
    transition: opacity .3s ease;
}
.orb-panel[data-orb-tilt]::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--orb-mx, 50%) var(--orb-my, 50%), rgba(var(--orb-lime-rgb), .07), transparent 55%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.orb-panel[data-orb-tilt]:hover::before { opacity: 1; }
.orb-panel[data-orb-tilt]:hover::after { opacity: 1; }
.orb-panel--flush { padding: 0; overflow: hidden; }
.orb-panel--quiet { background: var(--orb-well); box-shadow: none; }
.orb-panel--quiet::before { display: none; }
.orb-panel + .orb-panel { margin-top: 16px; }

.orb-panel__title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--orb-display);
    font-size: 16.5px; font-weight: 600;
    margin: 0 0 14px;
}
.orb-panel__title .bi { color: var(--orb-cyan); }
.orb-panel__sub { color: var(--orb-ink-2); font-size: 13.5px; margin: -8px 0 14px; }

/* Corner brackets: the HUD frame drawn around anything that should feel like an
   instrument rather than a card (the video, the declaration, the score). */
.orb-brackets { position: relative; }
.orb-brackets::before, .orb-brackets::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid var(--orb-lime);
    pointer-events: none;
    opacity: .85;
}
.orb-brackets::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.orb-brackets::after { bottom: -7px; right: -7px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

/* ───────────────────────────── Grids ───────────────────────────── */
.orb-grid { display: grid; gap: 18px; }
.orb-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.orb-grid--stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.orb-split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) {
    .orb-split { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
    .orb-split--wide-side { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
}
.orb-stack > * + * { margin-top: 16px; }

/* ───────────────────────────── Chips, pills, tags ───────────────────────────── */
.orb-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border-radius: var(--orb-r-pill);
    border: 1px solid var(--orb-edge-hi);
    background: rgba(255, 255, 255, .04);
    color: var(--orb-ink-2);
    font-family: var(--orb-mono);
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
.orb-chip .bi { font-size: 1.1em; }
.orb-chip--lime { color: var(--orb-lime); border-color: rgba(var(--orb-lime-rgb), .45); background: rgba(var(--orb-lime-rgb), .08); }
.orb-chip--cyan { color: var(--orb-cyan); border-color: rgba(var(--orb-cyan-rgb), .45); background: rgba(var(--orb-cyan-rgb), .08); }
.orb-chip--violet { color: #c4b5fd; border-color: rgba(var(--orb-violet-rgb), .5); background: rgba(var(--orb-violet-rgb), .1); }
.orb-chip--danger { color: var(--orb-danger); border-color: rgba(var(--orb-danger-rgb), .5); background: rgba(var(--orb-danger-rgb), .08); }
.orb-chip--amber { color: var(--orb-amber); border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .08); }
.orb-chip--solid { background: var(--orb-lime); border-color: var(--orb-lime); color: var(--orb-on-lime); }
.orb-chip--dashed { border-style: dashed; background: transparent; color: var(--orb-ink-3); }
.orb-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px; margin: 0 6px 6px 0;
    border-radius: var(--orb-r-pill);
    background: rgba(var(--orb-violet-rgb), .14);
    color: #d6ccff;
    font-size: 12px; font-weight: 600;
}
.orb-chip__note { font-weight: 500; opacity: .8; text-transform: none; letter-spacing: 0; }

/* ───────────────────────────── The hero ─────────────────────────────
   The University's front door: the headline on the left, the orbit on the right —
   a slowly turning dotted planet (canvas, orbital.js) with the learner's own
   progress as the ring around it. */
.orb-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 32px;
    align-items: center;
    padding: 34px 34px 30px;
    border-radius: var(--orb-r-xl);
    border: 1px solid var(--orb-edge);
    background:
        radial-gradient(600px 300px at 80% 50%, rgba(var(--orb-cyan-rgb), .10), transparent 70%),
        linear-gradient(150deg, rgba(22, 27, 58, .75), rgba(8, 10, 24, .75));
    overflow: hidden;
    margin-bottom: 26px;
}
@media (min-width: 992px) {
    .orb-hero { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); padding: 44px 48px; min-height: 380px; }
}
@media (max-width: 575.98px) { .orb-hero { padding: 24px 20px; border-radius: var(--orb-r-lg); } }

.orb-hero__copy { position: relative; z-index: 2; }
.orb-hero__title {
    font-size: clamp(2.3rem, 5.6vw, 4.4rem);
    line-height: .98;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin: 16px 0 16px;
}
.orb-hero__lede { color: var(--orb-ink-2); font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.6; max-width: 52ch; margin: 0 0 24px; }
.orb-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* The perspective grid the hero stands on — the floor the future is built on. */
.orb-horizon {
    position: absolute;
    left: -10%; right: -10%; bottom: -2px;
    height: 46%;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--orb-lime-rgb), .22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--orb-lime-rgb), .16) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(420px) rotateX(62deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
    animation: orb-grid-run 3.2s linear infinite;
    opacity: .7;
}

.orb-scene {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1;
    margin: 0 auto;
}
.orb-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.orb-scene__ring {
    position: absolute; inset: 9%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.orb-scene__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.orb-scene__readout {
    position: absolute;
    left: 50%; bottom: -2%;
    transform: translateX(-50%);
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    width: max-content; max-width: 100%;
}
.orb-scene__hud {
    position: absolute; top: 4%; right: 2%;
    font-family: var(--orb-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--orb-ink-3);
    text-align: right;
    line-height: 1.7;
}
.orb-scene__hud b { color: var(--orb-lime); font-weight: 600; }
@media (max-width: 991.98px) { .orb-scene { max-width: 320px; margin-top: 12px; } }

/* ───────────────────────────── Rings and meters ───────────────────────────── */
.orb-ring { position: relative; display: inline-grid; place-items: center; }
.orb-ring svg { transform: rotate(-90deg); display: block; overflow: visible; }
.orb-ring__track { fill: none; stroke: rgba(255, 255, 255, .08); }
.orb-ring__ink {
    fill: none;
    stroke: var(--orb-lime);  /* each ring paints its own gradient over this inline */
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(var(--orb-lime-rgb), .55));
    transition: stroke-dashoffset 1.6s var(--orb-ease-out);
}
.orb-ring__ink--plain { stroke: var(--orb-lime); }
.orb-ring__label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.1; }
.orb-ring__value { font-family: var(--orb-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.orb-ring__caption { display: block; font-family: var(--orb-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--orb-ink-3); margin-top: 3px; }

/* Three-step segmented ring: lesson, quiz, reflection. Each arc is lit or not —
   a course's progress is which of the three steps are done, never an invented %. */
.orb-tri { width: 46px; height: 46px; flex: 0 0 auto; }
.orb-tri circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.orb-tri .is-off { stroke: rgba(255, 255, 255, .1); }
.orb-tri .is-on { stroke: var(--orb-lime); filter: drop-shadow(0 0 4px rgba(var(--orb-lime-rgb), .7)); }
.orb-tri .is-now { stroke: var(--orb-cyan); animation: orb-breathe 2.2s ease-in-out infinite; }

.orb-meter {
    position: relative;
    height: 8px;
    border-radius: var(--orb-r-pill);
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}
.orb-meter__ink {
    position: absolute; inset: 0 auto 0 0;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--orb-cyan), var(--orb-lime));
    box-shadow: 0 0 14px rgba(var(--orb-lime-rgb), .6);
    transition: width .9s var(--orb-ease-out);
}
/* The comet's head: a bright point riding the end of the travelled part. */
.orb-meter__ink::after {
    content: '';
    position: absolute; right: -2px; top: 50%;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    box-shadow: 0 0 12px 3px rgba(var(--orb-lime-rgb), .9);
}
.orb-meter__ink[style*="width: 0%"]::after, .orb-meter__ink[style*="width:0%"]::after { display: none; }
.orb-meter__caption { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-family: var(--orb-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--orb-ink-2); }

/* ───────────────────────────── Stats ───────────────────────────── */
.orb-stat {
    position: relative;
    padding: 18px 20px;
    border-radius: var(--orb-r-lg);
    border: 1px solid var(--orb-edge);
    background: linear-gradient(160deg, rgba(22, 27, 58, .7), rgba(10, 12, 28, .7));
    overflow: hidden;
}
.orb-stat__label { font-family: var(--orb-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orb-ink-2); display: flex; align-items: center; gap: 8px; }
.orb-stat__label .bi { color: var(--orb-cyan); font-size: 14px; }
.orb-stat__value { font-family: var(--orb-display); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.orb-stat__glyph { position: absolute; right: -14px; bottom: -22px; font-size: 92px; color: rgba(255, 255, 255, .035); pointer-events: none; }
.orb-stat--lime .orb-stat__value { color: var(--orb-lime); text-shadow: 0 0 24px rgba(var(--orb-lime-rgb), .35); }
.orb-stat--cyan .orb-stat__value { color: var(--orb-cyan); text-shadow: 0 0 24px rgba(var(--orb-cyan-rgb), .3); }

/* ───────────────────────────── Sections ───────────────────────────── */
.orb-section { margin-top: 34px; }
.orb-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.orb-section__title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; margin: 4px 0 2px; display: flex; align-items: center; gap: 12px; }
.orb-section__title .bi { color: var(--orb-lime); font-size: .9em; }
.orb-section__sub { color: var(--orb-ink-2); margin: 0; font-size: 14px; }
/* ───────────────────────────── Course cards ─────────────────────────────
   Every course is a small world: a generated planet (hue from the course, so it is
   the same planet every visit), its track, its facts, and the three-step ring. */
.orb-course {
    position: relative;
    display: flex; flex-direction: column;
    height: 100%;
    border-radius: var(--orb-r-lg);
    border: 1px solid var(--orb-edge);
    background: linear-gradient(170deg, rgba(22, 27, 58, .86), rgba(9, 11, 26, .9));
    color: var(--orb-ink) !important;
    text-decoration: none;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .35s var(--orb-ease-out), border-color .25s ease, box-shadow .35s ease;
    will-change: transform;
}
.orb-course:hover {
    border-color: rgba(var(--orb-lime-rgb), .45);
    box-shadow: 0 30px 60px -28px rgba(var(--orb-lime-rgb), .35), 0 0 0 1px rgba(var(--orb-lime-rgb), .15);
}
.orb-course:focus-visible { outline: 2px solid var(--orb-cyan); outline-offset: 3px; }
.orb-course::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(360px circle at var(--orb-mx, 50%) var(--orb-my, 0%), rgba(255, 255, 255, .07), transparent 55%);
    opacity: 0; transition: opacity .3s ease;
    pointer-events: none;
}
.orb-course:hover::after { opacity: 1; }
.orb-course--locked { border-style: dashed; background: rgba(255, 255, 255, .02); cursor: default; }
.orb-course--locked:hover { border-color: var(--orb-edge-hi); box-shadow: none; }
.orb-course--locked .orb-course__body { opacity: .78; }

.orb-course__sky {
    position: relative;
    height: 148px;
    overflow: hidden;
    background:
        radial-gradient(1.2px 1.2px at 12% 22%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 72% 18%, #fff 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 86% 64%, rgba(255, 255, 255, .8) 50%, transparent 51%),
        radial-gradient(1px 1px at 34% 78%, rgba(255, 255, 255, .7) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 40%, rgba(255, 255, 255, .6) 50%, transparent 51%),
        radial-gradient(260px 140px at 70% 30%, hsla(var(--orb-h, 190), 90%, 60%, .25), transparent 70%),
        linear-gradient(180deg, #0b0e22, #070915);
    border-bottom: 1px solid var(--orb-edge);
}
.orb-course__sky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.orb-course__sky::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(9, 11, 26, .85));
    pointer-events: none;
}
.orb-planet {
    position: absolute;
    right: 26px; top: 26px;
    width: 92px; height: 92px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, hsla(var(--orb-h, 190), 100%, 86%, .95) 0%, hsla(var(--orb-h, 190), 85%, 58%, 1) 26%, hsla(var(--orb-h, 190), 70%, 30%, 1) 58%, hsla(var(--orb-h, 190), 60%, 10%, 1) 82%);
    box-shadow: 0 0 40px -6px hsla(var(--orb-h, 190), 90%, 60%, .6), inset -14px -16px 28px rgba(0, 0, 0, .55);
    transform: translateZ(40px);
    transition: transform .6s var(--orb-ease-out);
}
/* Cloud bands. */
.orb-planet::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: repeating-linear-gradient(-18deg, transparent 0 9px, rgba(255, 255, 255, .08) 9px 13px);
    -webkit-mask-image: radial-gradient(circle at 40% 40%, #000 50%, transparent 72%);
    mask-image: radial-gradient(circle at 40% 40%, #000 50%, transparent 72%);
    animation: orb-bands 18s linear infinite;
}
/* The ring. */
.orb-planet::after {
    content: '';
    position: absolute;
    left: -34%; top: 38%;
    width: 168%; height: 26%;
    border-radius: 50%;
    border: 2px solid hsla(var(--orb-h, 190), 90%, 75%, .55);
    border-top-color: transparent;
    transform: rotate(-16deg);
    box-shadow: 0 0 12px hsla(var(--orb-h, 190), 90%, 70%, .25);
}
.orb-course:hover .orb-planet { transform: translateZ(40px) scale(1.08) rotate(-6deg); }
.orb-course__badge { position: absolute; left: 16px; top: 16px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }

.orb-course__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
.orb-course__title { font-family: var(--orb-display); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin: 0; }
.orb-course__summary { color: var(--orb-ink-2); font-size: 13.5px; line-height: 1.55; margin: 0; }
.orb-course__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--orb-mono); font-size: 11.5px; color: var(--orb-ink-3); }
.orb-course__meta span { display: inline-flex; align-items: center; gap: 5px; }
.orb-course__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--orb-edge); }
.orb-course__step { font-family: var(--orb-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orb-ink-3); }
.orb-course__score { font-size: 13px; color: var(--orb-ink-2); }
.orb-course__score strong { color: var(--orb-lime); font-family: var(--orb-display); }
.orb-course__go {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--orb-edge-hi);
    color: var(--orb-ink);
    transition: background-color .25s ease, color .25s ease, transform .35s var(--orb-ease-spring), border-color .25s ease;
}
.orb-course:hover .orb-course__go { background: var(--orb-lime); color: var(--orb-on-lime); border-color: var(--orb-lime); transform: rotate(-45deg); }

/* The candidate's programme reads as a journey: the cards are joined by a path. */
.orb-path { position: relative; counter-reset: orb-step; }
.orb-path::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 74px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(var(--orb-cyan-rgb), .45) 0 10px, transparent 10px 20px);
    animation: orb-dash 1.6s linear infinite;
    z-index: 0;
    opacity: .5;
}
@media (max-width: 575.98px) { .orb-path::before { display: none; } }

/* ───────────────────────────── Mission steps ───────────────────────────── */
.orb-steps {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0;
    margin-bottom: 22px;
    font-family: var(--orb-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.orb-steps__node {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 14px 8px 8px;
    border-radius: var(--orb-r-pill);
    border: 1px solid var(--orb-edge);
    background: rgba(255, 255, 255, .03);
    color: var(--orb-ink-3);
}
.orb-steps__dot {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--orb-edge-hi);
    font-size: 11px;
}
.orb-steps__node.is-done { color: var(--orb-ink); border-color: rgba(var(--orb-lime-rgb), .35); }
.orb-steps__node.is-done .orb-steps__dot { background: var(--orb-lime); border-color: var(--orb-lime); color: var(--orb-on-lime); box-shadow: 0 0 12px rgba(var(--orb-lime-rgb), .6); }
.orb-steps__node.is-now { color: var(--orb-ink); border-color: rgba(var(--orb-cyan-rgb), .5); background: rgba(var(--orb-cyan-rgb), .08); }
.orb-steps__node.is-now .orb-steps__dot { border-color: var(--orb-cyan); color: var(--orb-cyan); animation: orb-breathe 2.2s ease-in-out infinite; }
.orb-steps__wire { width: 34px; height: 2px; background: var(--orb-edge-hi); position: relative; overflow: hidden; }
.orb-steps__wire.is-lit { background: rgba(var(--orb-lime-rgb), .55); }
.orb-steps__wire.is-lit::after {
    content: ''; position: absolute; inset: 0 auto 0 -40%; width: 40%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: orb-wire 1.8s ease-in-out infinite;
}
@media (max-width: 575.98px) { .orb-steps__wire { width: 14px; } .orb-steps__node { padding-right: 10px; } }

/* ───────────────────────────── The player ───────────────────────────── */
.orb-player { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 992px) { .orb-player { grid-template-columns: 330px minmax(0, 1fr); } }

.orb-syllabus { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
@media (max-width: 991.98px) { .orb-syllabus { position: static; max-height: none; } }
.orb-syllabus__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.orb-module + .orb-module { margin-top: 18px; }
.orb-module__title { font-size: 14px; font-weight: 600; margin: 0; display: flex; gap: 8px; align-items: baseline; }
.orb-module__index { font-family: var(--orb-mono); font-size: 11px; color: var(--orb-cyan); letter-spacing: .1em; }
.orb-module__blurb { font-size: 12.5px; color: var(--orb-ink-2); margin: 4px 0 0; }
.orb-lessons { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.orb-lessons::before {
    content: ''; position: absolute; left: 21px; top: 14px; bottom: 14px; width: 2px;
    background: linear-gradient(180deg, rgba(var(--orb-cyan-rgb), .35), rgba(var(--orb-violet-rgb), .25));
}
.orb-lesson {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px;
    border-radius: var(--orb-r-sm);
    color: var(--orb-ink-2) !important;
    text-decoration: none;
    font-size: 14px; line-height: 1.35;
    transition: background-color .2s ease, color .2s ease;
}
.orb-lesson:hover { background: rgba(255, 255, 255, .05); color: var(--orb-ink) !important; }
.orb-lesson.is-active { background: linear-gradient(90deg, rgba(var(--orb-cyan-rgb), .16), rgba(var(--orb-cyan-rgb), .02)); color: var(--orb-ink) !important; font-weight: 600; }
.orb-lesson.is-active::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--orb-cyan); box-shadow: 0 0 12px var(--orb-cyan); }
.orb-node {
    position: relative; z-index: 1;
    flex: 0 0 auto;
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--orb-panel-solid);
    border: 2px solid var(--orb-edge-hi);
    color: transparent;
}
.orb-node svg { width: 13px; height: 13px; }
.orb-lesson.is-active .orb-node { border-color: var(--orb-cyan); box-shadow: 0 0 0 4px rgba(var(--orb-cyan-rgb), .15); }
.orb-lesson.is-done .orb-node { background: var(--orb-lime); border-color: var(--orb-lime); color: var(--orb-on-lime); box-shadow: 0 0 10px rgba(var(--orb-lime-rgb), .65); }
.orb-lesson__label { flex: 1 1 auto; min-width: 0; }
.orb-lesson__mins { font-family: var(--orb-mono); font-size: 11px; color: var(--orb-ink-3); }
.orb-flag { font-family: var(--orb-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orb-ink-3); border: 1px solid var(--orb-edge-hi); border-radius: 4px; padding: 1px 5px; }

.orb-lesson-stage { min-width: 0; }
.orb-lesson-stage__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.orb-lesson-title { font-size: clamp(1.8rem, 3.8vw, 2.7rem); line-height: 1.06; font-weight: 700; letter-spacing: -0.035em; margin: 0 0 22px; }

/* The screen: the lesson's video in a HUD frame, a scanline sheen over the top edge. */
.orb-screen {
    position: relative;
    width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--orb-r-lg);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--orb-edge-hi);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .02), 0 40px 80px -40px rgba(var(--orb-cyan-rgb), .45);
    margin-bottom: 24px;
}
.orb-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.orb-screen-wrap { position: relative; margin: 36px 8px 30px; }
.orb-screen-wrap .orb-screen { margin-bottom: 0; }
.orb-screen-wrap__label {
    position: absolute; left: 0; top: -26px;
    font-family: var(--orb-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--orb-ink-3);
    display: flex; align-items: center; gap: 8px;
}
.orb-screen-wrap__label i { width: 6px; height: 6px; border-radius: 50%; background: var(--orb-danger); box-shadow: 0 0 8px var(--orb-danger); animation: orb-blink 1.6s steps(2, start) infinite; }

.orb-prose { font-size: 16px; line-height: 1.8; color: #dde2fb; max-width: 70ch; }
.orb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--orb-edge); }
.orb-actions form { margin: 0; }
.orb-actions__next { margin-left: auto; }

/* The console beside the lesson: pass mark, attempts, the next door. */
.orb-facts { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 2px; }
.orb-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--orb-edge); font-size: 13.5px; color: var(--orb-ink-2); }
.orb-facts li:last-child { border-bottom: 0; }
.orb-facts strong { font-family: var(--orb-mono); color: var(--orb-ink); font-weight: 600; }
.orb-note { font-size: 12.5px; color: var(--orb-ink-2); margin-top: 10px; }

/* ───────────────────────────── Tables ─────────────────────────────
   A record on the stage — My Learning's transcript and the staff leaderboard. The
   Bootstrap table underneath brings a white body colour of its own; every surface it
   paints is handed back to the panel so the rows sit on the glass, not on paper. */
.orb-table-wrap { overflow-x: auto; }
.orb-table { width: 100%; margin: 0; border-collapse: collapse; color: var(--orb-ink); font-size: 14px; --bs-table-bg: transparent; --bs-table-color: var(--orb-ink); }
.orb-table > :not(caption) > * > * { background: transparent; color: inherit; border-bottom: 1px solid var(--orb-edge); padding: 12px 14px; box-shadow: none; }
.orb-table thead th { font-family: var(--orb-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orb-ink-3); white-space: nowrap; }
.orb-table tbody tr:last-child > * { border-bottom: 0; }
.orb-table tbody tr:hover > * { background: rgba(255, 255, 255, .025); }
.orb-table .orb-table__you > * { background: rgba(var(--orb-lime-rgb), .07); }
.orb-table .orb-table__you:hover > * { background: rgba(var(--orb-lime-rgb), .1); }

/* ───────────────────────────── Quiz ───────────────────────────── */
.orb-quiz-hud {
    position: sticky; top: 72px; z-index: 5;
    display: flex; align-items: center; gap: 16px;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: var(--orb-r-md);
    border: 1px solid var(--orb-edge-hi);
    background: rgba(8, 10, 24, .86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.orb-quiz-hud .orb-meter { flex: 1; }
.orb-quiz-hud__count { font-family: var(--orb-mono); font-size: 12.5px; color: var(--orb-ink-2); white-space: nowrap; }
.orb-quiz-hud__count b { color: var(--orb-lime); font-size: 15px; }

.orb-q {
    position: relative;
    padding: 22px;
    border-radius: var(--orb-r-lg);
    border: 1px solid var(--orb-edge);
    background: linear-gradient(165deg, rgba(22, 27, 58, .75), rgba(9, 11, 26, .82));
    transition: border-color .3s ease, box-shadow .3s ease;
}
.orb-q + .orb-q { margin-top: 16px; }
.orb-q:has(input:checked) { border-color: rgba(var(--orb-lime-rgb), .4); box-shadow: 0 0 0 1px rgba(var(--orb-lime-rgb), .12), 0 20px 50px -30px rgba(var(--orb-lime-rgb), .5); }
.orb-q__no { font-family: var(--orb-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--orb-cyan); text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.orb-q__no::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, rgba(var(--orb-cyan-rgb), .4), transparent); }
.orb-q__check { display: none; color: var(--orb-lime); }
.orb-q:has(input:checked) .orb-q__check { display: inline-flex; }
.orb-q__prompt { font-family: var(--orb-display); font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 14px; letter-spacing: -0.01em; }
.orb-q__hint { font-family: var(--orb-mono); font-size: 11px; letter-spacing: .08em; color: var(--orb-ink-3); font-weight: 500; margin-left: 6px; text-transform: uppercase; }
.orb-opts { display: grid; gap: 10px; }
@media (min-width: 768px) { .orb-opts { grid-template-columns: 1fr 1fr; } }

.orb-opt {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    min-height: 56px;
    padding: 12px 16px;
    border-radius: var(--orb-r-md);
    border: 1px solid var(--orb-edge-hi);
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
    font-size: 15px; line-height: 1.4;
    color: var(--orb-ink);
    transition: border-color .2s ease, background-color .2s ease, transform .2s var(--orb-ease-out);
}
.orb-opt:hover { border-color: rgba(var(--orb-cyan-rgb), .55); background: rgba(var(--orb-cyan-rgb), .06); transform: translateY(-1px); }
.orb-opt:has(input:checked) { border-color: var(--orb-lime); background: rgba(var(--orb-lime-rgb), .09); }
.orb-opt:has(input:focus-visible) { outline: 2px solid var(--orb-cyan); outline-offset: 2px; }
.orb-opt__key {
    flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--orb-mono); font-size: 12px; font-weight: 600;
    color: var(--orb-ink-2);
    border: 1px solid var(--orb-edge-hi);
}
.orb-opt:has(input:checked) .orb-opt__key { background: var(--orb-lime); border-color: var(--orb-lime); color: var(--orb-on-lime); }
.orb-opt__text { flex: 1 1 auto; }

/* The drawn control. A bare radio or checkbox arrives in the operating system's own
   blue; `appearance: none` and these rules make it the system's. Still a real input
   — keyboard, arrow-key groups and screen readers work exactly as for any radio. */
.orb-dial {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto;
    width: 22px; height: 22px;
    margin: 0;
    border: 2px solid var(--orb-edge-hi);
    background: transparent;
    display: inline-grid; place-items: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .2s ease;
}
.orb-dial[type="radio"] { border-radius: 50%; }
.orb-dial[type="checkbox"] { border-radius: 6px; }
.orb-dial::after { content: ''; transform: scale(0); transition: transform .25s var(--orb-ease-spring); }
.orb-dial[type="radio"]::after { width: 10px; height: 10px; border-radius: 50%; background: var(--orb-on-lime); }
.orb-dial[type="checkbox"]::after {
    width: 12px; height: 12px;
    background: var(--orb-on-lime);
    clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}
.orb-dial:checked { border-color: var(--orb-lime); background: var(--orb-lime); box-shadow: 0 0 12px rgba(var(--orb-lime-rgb), .7); }
.orb-dial:checked::after { transform: scale(1); }
.orb-dial:focus-visible { outline: 2px solid var(--orb-cyan); outline-offset: 2px; }

.orb-quiz-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ───────────────────────────── Declaration ───────────────────────────── */
.orb-declaration {
    position: relative;
    padding: 22px 24px;
    border-radius: var(--orb-r-md);
    background: rgba(var(--orb-lime-rgb), .04);
    border: 1px solid rgba(var(--orb-lime-rgb), .25);
    overflow: hidden;
}
.orb-declaration__text { margin: 0; font-size: 16px; line-height: 1.75; color: var(--orb-ink); max-width: 68ch; white-space: pre-wrap; }
/* A scan line passing over the text, as if the document were being read in. */
.orb-declaration::after {
    content: '';
    position: absolute; left: 0; right: 0; top: -40%;
    height: 40%;
    background: linear-gradient(180deg, transparent, rgba(var(--orb-lime-rgb), .08), transparent);
    animation: orb-scan 5.5s ease-in-out infinite;
    pointer-events: none;
}
.orb-sign {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px;
    border-radius: var(--orb-r-md);
    border: 1px solid var(--orb-edge-hi);
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.orb-sign:has(input:checked) { border-color: var(--orb-lime); background: rgba(var(--orb-lime-rgb), .07); }
.orb-sign__label { font-family: var(--orb-display); font-weight: 700; font-size: 16px; display: block; }
.orb-sign__note { font-size: 13px; color: var(--orb-ink-2); display: block; margin-top: 4px; }
.orb-list { margin: 0; padding-left: 18px; color: var(--orb-ink-2); font-size: 14px; line-height: 1.8; }
.orb-list li::marker { color: var(--orb-lime); }

/* ───────────────────────────── Result ───────────────────────────── */
.orb-score { position: relative; display: grid; place-items: center; padding: 12px 0 6px; text-align: center; }
.orb-score__orb { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.orb-score__orb svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.orb-score__core {
    position: absolute; inset: 22%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(var(--orb-lime-rgb), .35), rgba(var(--orb-cyan-rgb), .12) 45%, transparent 70%);
    animation: orb-breathe 3.2s ease-in-out infinite;
}
.orb-score--fail .orb-score__core { background: radial-gradient(circle at 35% 30%, rgba(var(--orb-danger-rgb), .28), rgba(var(--orb-violet-rgb), .1) 45%, transparent 70%); }
.orb-score__figure { position: relative; font-family: var(--orb-display); font-size: 58px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.orb-score__caption { margin-top: 12px; font-family: var(--orb-mono); font-size: 12px; letter-spacing: .06em; color: var(--orb-ink-2); }
.orb-verdict {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    padding: 8px 18px;
    border-radius: var(--orb-r-pill);
    font-family: var(--orb-display); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
}
.orb-verdict--pass { background: var(--orb-lime); color: var(--orb-on-lime); box-shadow: 0 0 30px rgba(var(--orb-lime-rgb), .55); animation: orb-stamp .7s var(--orb-ease-spring) both .5s; }
.orb-verdict--fail { border: 1px solid rgba(var(--orb-danger-rgb), .6); color: var(--orb-danger); background: rgba(var(--orb-danger-rgb), .08); }

.orb-review-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--orb-r-sm); border: 1px solid var(--orb-edge); margin-top: 8px; font-size: 14.5px; }
.orb-review-opt--correct { border-color: rgba(var(--orb-lime-rgb), .5); background: rgba(var(--orb-lime-rgb), .07); }
.orb-review-opt--wrong { border-color: rgba(var(--orb-danger-rgb), .5); background: rgba(var(--orb-danger-rgb), .06); }
.orb-review-opt__hint { margin-left: auto; font-family: var(--orb-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--orb-ink-3); }
/* ───────────────────────────── Bootstrap primitives, inside the University ─────────────────────────────
   A page another module renders on the guest shell (The Foundry's connect screen)
   speaks Bootstrap, and so do the form controls every portal page uses. Rather than
   fork them, the primitives are re-drawn here, scoped to `.orb`. */
.orb .btn { border-radius: var(--orb-r-pill); font-family: var(--orb-display); font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.orb :is(.btn-primary, .btn-dark) { background: var(--orb-lime); border-color: var(--orb-lime); color: var(--orb-on-lime); box-shadow: 0 8px 24px -10px rgba(var(--orb-lime-rgb), .6); }
.orb :is(.btn-primary, .btn-dark):hover { background: #d4ff4d; border-color: #d4ff4d; color: var(--orb-on-lime); }
.orb :is(.btn-outline-secondary, .btn-outline-dark, .btn-light, .btn-outline-primary) { background: rgba(255, 255, 255, .04); border: 1px solid var(--orb-edge-hi); color: var(--orb-ink); }
.orb :is(.btn-outline-secondary, .btn-outline-dark, .btn-light, .btn-outline-primary):hover { border-color: rgba(var(--orb-cyan-rgb), .6); background: rgba(var(--orb-cyan-rgb), .08); color: var(--orb-ink); }
.orb .btn-outline-danger { border-color: rgba(var(--orb-danger-rgb), .55); color: var(--orb-danger); background: transparent; }
.orb .btn-outline-danger:hover { background: rgba(var(--orb-danger-rgb), .12); color: #ffc2cc; border-color: var(--orb-danger); }
.orb .btn-link { color: var(--orb-ink-2); }
.orb .btn:focus-visible { outline: 2px solid var(--orb-cyan); outline-offset: 2px; box-shadow: none; }

.orb :is(.form-control, .form-select) {
    background-color: rgba(255, 255, 255, .04);
    border: 1px solid var(--orb-edge-hi);
    border-radius: var(--orb-r-sm);
    color: var(--orb-ink);
    min-height: 44px;
    font-size: 15px;
}
.orb .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aab2d5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.orb .form-select option { background: var(--orb-panel-solid); color: var(--orb-ink); }
.orb :is(.form-control, .form-select)::placeholder { color: var(--orb-ink-3); }
.orb :is(.form-control, .form-select):focus { background-color: rgba(var(--orb-cyan-rgb), .05); border-color: var(--orb-cyan); color: var(--orb-ink); box-shadow: 0 0 0 4px rgba(var(--orb-cyan-rgb), .15); }
.orb textarea.form-control { min-height: 0; line-height: 1.6; }
.orb .form-label { color: var(--orb-ink); font-weight: 600; }
.orb .form-check-input { background-color: transparent; border: 2px solid var(--orb-edge-hi); width: 1.2em; height: 1.2em; }
.orb .form-check-input:checked { background-color: var(--orb-lime); border-color: var(--orb-lime); }
.orb .form-check-input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b1200' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.orb .form-check-input:focus { box-shadow: 0 0 0 4px rgba(var(--orb-cyan-rgb), .2); border-color: var(--orb-cyan); }

.orb .card { background: var(--orb-panel); border: 1px solid var(--orb-edge); border-radius: var(--orb-r-lg); color: var(--orb-ink); }
.orb .card-header { background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--orb-edge); color: var(--orb-ink); font-family: var(--orb-display); font-weight: 600; padding: 14px 18px; }
.orb .card-header:first-child { border-radius: var(--orb-r-lg) var(--orb-r-lg) 0 0; }
.orb .card-body { padding: 18px; }
.orb .badge { border-radius: var(--orb-r-pill); font-family: var(--orb-mono); font-weight: 600; letter-spacing: .06em; padding: .45em .8em; }
.orb .badge.text-bg-success { background: rgba(var(--orb-lime-rgb), .15) !important; color: var(--orb-lime) !important; border: 1px solid rgba(var(--orb-lime-rgb), .4); }
.orb .badge.text-bg-secondary, .orb .badge.text-bg-light { background: rgba(255, 255, 255, .06) !important; color: var(--orb-ink-2) !important; border: 1px solid var(--orb-edge-hi) !important; }
.orb .badge.text-bg-info { background: rgba(var(--orb-cyan-rgb), .14) !important; color: var(--orb-cyan) !important; }
.orb .border-top, .orb .border-start, .orb .border { border-color: var(--orb-edge) !important; }
.orb hr { border-color: var(--orb-edge); opacity: 1; }

/* ───────────────────────────── Flash and callouts ─────────────────────────────
   `.alert` is a flash message from the layout; `.orb-callout` is a note that is part
   of the page itself. Drawn the same, kept apart so neither is mistaken for the other. */
.orb :is(.alert, .orb-callout) {
    position: relative;
    display: flex; gap: 10px; align-items: flex-start;
    border-radius: var(--orb-r-md);
    border: 1px solid var(--orb-edge-hi);
    background: rgba(255, 255, 255, .04);
    color: var(--orb-ink);
    padding: 12px 16px 12px 18px;
    font-size: 14px;
    overflow: hidden;
}
.orb :is(.alert, .orb-callout)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orb-ink-3); }
.orb :is(.alert-success, .orb-callout--success) { border-color: rgba(var(--orb-lime-rgb), .35); background: rgba(var(--orb-lime-rgb), .07); }
.orb :is(.alert-success, .orb-callout--success)::before { background: var(--orb-lime); box-shadow: 0 0 12px var(--orb-lime); }
.orb :is(.alert-warning, .alert-danger, .orb-callout--danger) { border-color: rgba(var(--orb-danger-rgb), .4); background: rgba(var(--orb-danger-rgb), .07); }
.orb :is(.alert-warning, .alert-danger, .orb-callout--danger)::before { background: var(--orb-danger); }
.orb :is(.alert-info, .orb-callout--info) { border-color: rgba(var(--orb-cyan-rgb), .35); background: rgba(var(--orb-cyan-rgb), .06); }
.orb :is(.alert-info, .orb-callout--info)::before { background: var(--orb-cyan); }
.orb :is(.alert, .orb-callout) ul { margin: 0; padding-left: 18px; }
.orb :is(.alert, .orb-callout) > .bi { margin-top: 1px; }
.orb-flash { display: grid; gap: 10px; margin-bottom: 18px; }
.orb-flash .alert { margin: 0; animation: orb-drop .5s var(--orb-ease-out) both; }

.orb-empty { text-align: center; padding: 38px 20px; color: var(--orb-ink-2); }
.orb-empty__icon {
    width: 64px; height: 64px; margin: 0 auto 14px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 26px; color: var(--orb-cyan);
    border: 1px dashed rgba(var(--orb-cyan-rgb), .5);
    animation: orb-spin 24s linear infinite;
}
.orb-empty__icon .bi { animation: orb-spin 24s linear infinite reverse; }
.orb-empty__title { font-family: var(--orb-display); font-size: 17px; font-weight: 600; color: var(--orb-ink); margin: 0 0 6px; }

/* ───────────────────────────── Candidate shell ───────────────────────────── */
body.orb { margin: 0; min-height: 100vh; background: var(--orb-void); display: flex; flex-direction: column; }
body.orb > .orb-stage { flex: 1 0 auto; }
.orb-topbar {
    position: sticky; top: 0; z-index: 30;
    border-bottom: 1px solid var(--orb-edge);
    background: rgba(5, 6, 15, .72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}
.orb-topbar__bar { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 32px; }
@media (max-width: 767.98px) { .orb-topbar__bar { padding: 10px 16px; } }
.orb-brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--orb-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
    color: var(--orb-ink) !important; text-decoration: none;
}
.orb-brand__mark {
    position: relative;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #e9ff9a, var(--orb-lime) 40%, #5f7d0c 85%);
    color: var(--orb-on-lime);
    box-shadow: 0 0 20px rgba(var(--orb-lime-rgb), .45);
    font-size: 16px;
}
.orb-brand__mark::after {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(var(--orb-cyan-rgb), .55);
    border-left-color: transparent; border-bottom-color: transparent;
    animation: orb-spin 6s linear infinite;
}
.orb-xp {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px;
    border-radius: var(--orb-r-pill);
    border: 1px solid rgba(var(--orb-lime-rgb), .45);
    background: rgba(var(--orb-lime-rgb), .1);
    color: var(--orb-lime) !important;
    font-family: var(--orb-mono); font-weight: 600; font-size: 13px;
    text-decoration: none;
    transition: box-shadow .25s ease, transform .25s var(--orb-ease-out);
}
.orb-xp:hover { box-shadow: 0 0 24px rgba(var(--orb-lime-rgb), .45); transform: translateY(-1px); }
.orb-who { color: var(--orb-ink-2); font-size: 13.5px; }

.orb-stage > :is(.orb-main, .orb-door) { position: relative; z-index: 1; }
.orb-main { max-width: 1320px; margin: 0 auto; padding: 28px 32px 72px; }
@media (max-width: 767.98px) { .orb-main { padding: 18px 16px 48px; } }

/* The signed-out door: the orbit on one side, the form on the other. */
.orb-door { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .orb-door { grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); } }
.orb-door__world { position: relative; display: none; padding: 48px; overflow: hidden; }
@media (min-width: 992px) { .orb-door__world { display: flex; flex-direction: column; justify-content: space-between; } }
.orb-door__world .orb-scene { max-width: 520px; }
.orb-door__claim { font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -0.045em; font-weight: 700; margin: 0; }
.orb-door__form { display: flex; align-items: center; justify-content: center; padding: 40px 18px; }
.orb-door__card { width: 100%; max-width: 440px; }
.orb-door__card .orb-panel { padding: 30px 28px; }
.orb-door__mobile-brand { display: flex; justify-content: center; margin-bottom: 22px; }
@media (min-width: 992px) { .orb-door__mobile-brand { display: none; } }
.orb-door h1 { font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.orb-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-family: var(--orb-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orb-ink-3); }
.orb-divider::before, .orb-divider::after { content: ''; flex: 1; height: 1px; background: var(--orb-edge-hi); }
.orb-fineprint { font-size: 12.5px; color: var(--orb-ink-3); margin: 22px 0 0; line-height: 1.6; }
.orb-code { letter-spacing: .5em; text-align: center; font-family: var(--orb-mono); font-size: 22px !important; }

/* ───────────────────────────── The capstone ticket ───────────────────────────── */
.orb-ticket { position: relative; border-radius: var(--orb-r-lg); border: 1px solid var(--orb-edge-hi); background: linear-gradient(170deg, rgba(22, 27, 58, .85), rgba(9, 11, 26, .9)); overflow: hidden; }
.orb-ticket__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px dashed var(--orb-edge-hi); background: rgba(255, 255, 255, .02); }
.orb-ticket__key { font-family: var(--orb-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--orb-cyan); border: 1px solid rgba(var(--orb-cyan-rgb), .45); border-radius: 6px; padding: 3px 8px; }
.orb-ticket__title { font-family: var(--orb-display); font-weight: 700; font-size: 18px; }
.orb-ticket__meta { display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; padding: 18px 20px; margin: 0; border-bottom: 1px solid var(--orb-edge); font-size: 14px; }
.orb-ticket__meta dt { font-family: var(--orb-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--orb-ink-3); font-weight: 500; padding-top: 2px; }
.orb-ticket__meta dd { margin: 0; font-weight: 600; }
.orb-ticket__label { font-family: var(--orb-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orb-ink-3); padding: 18px 20px 0; }
.orb-ticket__brief { padding: 10px 20px 22px; white-space: pre-wrap; line-height: 1.7; color: #dde2fb; }
.orb-ticket__locked { padding: 34px 20px; text-align: center; color: var(--orb-ink-2); }
/* The notches that make it a ticket. */
.orb-ticket::before, .orb-ticket::after {
    content: ''; position: absolute; top: 57px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--orb-void);
    border: 1px solid var(--orb-edge-hi);
}
.orb-ticket::before { left: -10px; }
.orb-ticket::after { right: -10px; }

/* ───────────────────────────── Discussion ───────────────────────────── */
.orb-thread { border-top: 1px solid var(--orb-edge); padding-top: 16px; margin-top: 16px; }
.orb-thread__who { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.orb-thread__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--orb-mono); font-size: 12px; font-weight: 600; color: var(--orb-on-lime); background: linear-gradient(135deg, var(--orb-cyan), var(--orb-lime)); flex: 0 0 auto; }
.orb-thread__when { font-family: var(--orb-mono); font-size: 11px; color: var(--orb-ink-3); }
.orb-thread__body { margin: 6px 0 0 38px; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; color: #dde2fb; }
.orb-thread__replies { margin: 12px 0 0 38px; padding-left: 14px; border-left: 2px solid rgba(var(--orb-violet-rgb), .35); }
.orb-thread__reply-form { margin: 10px 0 0 38px; }
.orb-thread__x { background: none; border: 0; color: var(--orb-ink-3); padding: 4px; cursor: pointer; border-radius: 6px; }
.orb-thread__x:hover { color: var(--orb-danger); background: rgba(var(--orb-danger-rgb), .1); }

/* ───────────────────────────── Overlays ───────────────────────────── */
/* The warp: hyperspace streaks between a launch and the page it lands on. */
.orb-warp {
    position: fixed; inset: 0; z-index: 2000;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(5, 6, 15, 0) 0%, rgba(5, 6, 15, .85) 70%);
    transition: opacity .25s ease;
}
.orb-warp.is-on { opacity: 1; }
.orb-warp canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The intro reel: once per session, on the candidate's dashboard. */
.orb-intro {
    position: fixed; inset: 0; z-index: 2100;
    display: grid; place-items: center;
    background: var(--orb-void);
    color: var(--orb-ink);
    font-family: var(--orb-display);
    transition: opacity .7s ease, transform .9s var(--orb-ease-out), filter .7s ease;
}
.orb-intro.is-leaving { opacity: 0; transform: scale(1.12); filter: blur(6px); }
.orb-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb-intro__core { position: relative; text-align: center; padding: 0 20px; }
.orb-intro__mark {
    width: 84px; height: 84px; margin: 0 auto 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f2ffc4, var(--orb-lime) 42%, #4c6608 88%);
    box-shadow: 0 0 60px rgba(var(--orb-lime-rgb), .6), 0 0 140px rgba(var(--orb-cyan-rgb), .25);
    animation: orb-intro-mark 1.6s var(--orb-ease-spring) both;
    position: relative;
}
.orb-intro__mark::before, .orb-intro__mark::after {
    content: ''; position: absolute; border-radius: 50%;
    border: 1px solid rgba(var(--orb-cyan-rgb), .6);
}
.orb-intro__mark::before { inset: -18px; border-left-color: transparent; animation: orb-spin 2.4s linear infinite; }
.orb-intro__mark::after { inset: -34px; border-color: rgba(var(--orb-violet-rgb), .5); border-right-color: transparent; animation: orb-spin 3.6s linear infinite reverse; }
.orb-intro__word { font-size: clamp(1.8rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.orb-intro__line { font-family: var(--orb-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--orb-ink-2); margin-top: 14px; }
.orb-intro__bar { width: min(320px, 70vw); height: 2px; margin: 26px auto 0; background: rgba(255, 255, 255, .1); overflow: hidden; border-radius: 2px; }
.orb-intro__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orb-cyan), var(--orb-lime)); box-shadow: 0 0 12px var(--orb-lime); animation: orb-intro-bar 1.9s var(--orb-ease-out) forwards .2s; }
.orb-intro__skip {
    position: absolute; right: 22px; bottom: 22px;
    font-family: var(--orb-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--orb-ink-2);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--orb-edge-hi);
    border-radius: var(--orb-r-pill);
    padding: 8px 14px;
    cursor: pointer;
}
.orb-intro__skip:hover { color: var(--orb-ink); border-color: var(--orb-cyan); }

.orb-burst { position: fixed; inset: 0; z-index: 1900; pointer-events: none; }

/* ───────────────────────────── Reveal ─────────────────────────────
   Hidden only once orbital.js has claimed the page (`orb-js` on <html>): with no
   script, or before it runs, nothing is ever invisible. */
.orb-js .orb [data-orb-reveal] { opacity: 0; transform: translateY(18px); }
/* The class is set by a one-line script in the head, before orbital.js has loaded. If
   orbital.js then never arrives (blocked, a failed request), this un-hides everything
   after a beat rather than leaving the page blank. */
.orb-js:not(.orb-ready) .orb [data-orb-reveal]:not(.is-in) { animation: orb-unhide 0s linear 2.4s forwards; }
.orb-js .orb [data-orb-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity .8s var(--orb-ease-out), transform .9s var(--orb-ease-out);
    transition-delay: calc(var(--orb-i, 0) * 70ms);
}

/* ───────────────────────────── Keyframes ───────────────────────────── */
@keyframes orb-aurora { 0% { transform: translateX(-6%) rotate(0deg) scale(1); } 100% { transform: translateX(6%) rotate(24deg) scale(1.12); } }
@keyframes orb-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--orb-lime-rgb), .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(var(--orb-lime-rgb), 0); } }
@keyframes orb-sheen { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes orb-shine { 0%, 62% { left: -60%; } 100% { left: 130%; } }
@keyframes orb-grid-run { from { background-position: 0 0, 0 0; } to { background-position: 0 56px, 0 0; } }
@keyframes orb-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes orb-wire { 0% { left: -40%; } 100% { left: 110%; } }
@keyframes orb-dash { to { background-position: 20px 0; } }
@keyframes orb-bands { to { background-position: 120px 0; } }
@keyframes orb-blink { to { visibility: hidden; } }
@keyframes orb-scan { 0% { top: -40%; } 55%, 100% { top: 110%; } }
@keyframes orb-stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
@keyframes orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes orb-intro-mark { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes orb-intro-bar { to { width: 100%; } }
@keyframes orb-unhide { to { opacity: 1; transform: none; } }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; }

/* ───────────────────────────── Reduced motion ─────────────────────────────
   Everything above that moves on its own, stopped. The layout, the colours and every
   figure are untouched: only the travel goes. */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .orb *, .orb *::before, .orb *::after,
    .orb-intro, .orb-intro *, .orb-warp {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .orb-course:hover, .orb-btn:hover, .orb-opt:hover { transform: none; }
    .orb-js .orb [data-orb-reveal] { opacity: 1; transform: none; }
    .orb-aurora { display: none; }
}