*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ============================================================
Z-INDEX MAP (single source of truth — keep this updated)
------------------------------------------------------------
0 .aurora-bg, ::before decorative full-bleed background
1 .main, body content lecture text, cards, modals UNDER navbar
2 body > non-aurora elements that paint above the aurora layer
50 bottom drawer collapsed accessory drawer
85 .scroll-progress thin progress bar across top
100 #ui-cockpit lab HUD wrapper (pointer-events: none)
200 .toast / notifications transient overlays
2000 .navbar, .sidebar ALWAYS the topmost interactive surfaces
(also pointer-events: auto !important)
------------------------------------------------------------
Rules of thumb:
- If you add a fixed/sticky element, give it an explicit z-index and
place it in the table above. Don't pick numbers ad-hoc.
- The cockpit MUST stay below the menus (100 < 2000) so its
pointer-events:none never blocks navbar/sidebar clicks.
- Avoid !important except on .navbar / .sidebar pointer-events,
which are load-bearing for click reachability.
============================================================ */
/* ------------------------------------------------------------
ASSET PATH CONVENTION
- Files: /assets/{img,docs,icons}
- CSS: background-image: url('assets/img/foo.png');
- JS: asset('img', 'foo.png')
------------------------------------------------------------ */
/* ============================================================
AURORA / IRIDESCENT THEME TOKENS
Dark-first. Deep violet base, glass layers, 6-color aurora accent.
Legacy token names (--bg-color, --surface, --accent-color, etc.)
are kept as aliases so the existing ~2000 lines of CSS below
keep resolving without churn. Override them in a single place.
============================================================ */
:root {
/* ---- Aurora base layers ---- */
--bg-deep: #07041a; /* vignette edge */
--bg-body: #0b0722; /* body bg */
--bg-lift: #110a2c; /* elevated */
/* ---- Glass layers ---- */
--glass: rgba(255, 255, 255, 0.035);
--glass-hover: rgba(255, 255, 255, 0.058);
--glass-edge: rgba(255, 255, 255, 0.09);
--glass-edge-br: rgba(255, 255, 255, 0.18);
/* ---- Aurora palette (6 colors) ---- */
--aurora-1: #5eead4; /* mint-cyan — progress start, completed */
--aurora-2: #60a5fa; /* sky blue — info callouts */
--aurora-3: #a78bfa; /* violet — primary accent, mentor */
--aurora-4: #f472b6; /* pink — assistant, attention */
--aurora-5: #fda4af; /* peach — mid-gradient transition */
--aurora-6: #fbbf24; /* gold — highlight, quiz sections */
--aurora: linear-gradient(100deg,
var(--aurora-1) 0%,
var(--aurora-2) 22%,
var(--aurora-3) 45%,
var(--aurora-4) 68%,
var(--aurora-5) 84%,
var(--aurora-6) 100%);
--aurora-soft: linear-gradient(100deg,
color-mix(in srgb, var(--aurora-1) 35%, transparent) 0%,
color-mix(in srgb, var(--aurora-3) 35%, transparent) 45%,
color-mix(in srgb, var(--aurora-4) 35%, transparent) 68%,
color-mix(in srgb, var(--aurora-6) 35%, transparent) 100%);
/* ---- Light-mode fallback (existing legacy palette kept) ---- */
--bg-color: #f8fafc;
--bg-mesh: radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.10), transparent 55%),
radial-gradient(circle at 85% 85%, rgba(14, 165, 233, 0.08), transparent 55%);
--surface: #ffffff;
--surface-raised: #ffffff;
--surface-hover: #f1f5f9;
--border: #e2e8f0;
--border-strong: #cbd5e1;
--text-main: #0f172a;
--text-muted: #64748b;
--text-heading: #0f172a;
--accent-color: #6366f1;
--accent-hover: #4f46e5;
--accent-soft: rgba(99, 102, 241, 0.10);
--accent-glow: rgba(99, 102, 241, 0.45);
--link-color: #4f46e5;
--success-color: #10b981;
--success-soft: rgba(16, 185, 129, 0.10);
--success-glow: rgba(16, 185, 129, 0.45);
--danger-color: #ef4444;
--danger-soft: rgba(239, 68, 68, 0.08);
--info-soft: rgba(14, 165, 233, 0.10);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 6px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10);
--shadow-accent: 0 8px 24px rgba(99, 102, 241, 0.15);
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 16px;
--max-width: 1200px;
--transition: all 0.3s ease;
/* Back-compat aliases for content authored against the old names */
--bg: var(--bg-color);
--card: var(--surface);
--card-hover: var(--surface-hover);
--card-border: var(--border);
--text: var(--text-main);
--heading: var(--text-heading);
--muted: var(--text-muted);
--accent: var(--accent-color);
--link: var(--link-color);
--success: var(--success-color);
--danger: var(--danger-color);
}
[data-theme='dark'] {
/* Dark = Aurora. Legacy names remap to Aurora layers so the rest
of the stylesheet inherits the new palette without rewrites. */
--bg-color: var(--bg-body);
--bg-mesh: none; /* aurora-bg element handles background */
--surface: var(--glass);
--surface-raised: var(--glass-hover);
--surface-hover: var(--glass-hover);
--border: var(--glass-edge);
--border-strong: var(--glass-edge-br);
--text-main: #f3eeff;
--text-muted: #8b869e;
--text-heading: #f3eeff;
--accent-color: var(--aurora-3);
--accent-hover: var(--aurora-4);
--accent-soft: rgba(167, 139, 250, 0.14);
--accent-glow: rgba(167, 139, 250, 0.55);
--link-color: var(--aurora-3);
--success-color: var(--aurora-1);
--success-soft: rgba(94, 234, 212, 0.14);
--success-glow: rgba(94, 234, 212, 0.55);
--danger-color: var(--aurora-4);
--danger-soft: rgba(244, 114, 182, 0.14);
--info-soft: rgba(96, 165, 250, 0.14);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
--shadow-accent: 0 8px 28px rgba(167, 139, 250, 0.35);
}
/* ============================================================
AURORA BACKGROUND — five drifting blurred color orbs + noise
+ vignette. Sits behind everything on dark theme only.
Add …
as the first child of . Hidden in light mode.
============================================================ */
.aurora-bg {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
background: var(--bg-deep);
}
.aurora-bg .orb {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: 0.55;
will-change: transform;
}
.aurora-bg .orb.o1 {
width: 48vmax; height: 48vmax; top: -14vmax; left: -12vmax;
background: radial-gradient(circle, var(--aurora-1) 0%, transparent 65%);
animation: drift1 44s ease-in-out infinite alternate; /* slowed 50% */
}
.aurora-bg .orb.o2 {
width: 52vmax; height: 52vmax; bottom: -18vmax; right: -14vmax;
background: radial-gradient(circle, var(--aurora-4) 0%, transparent 65%);
animation: drift2 56s ease-in-out infinite alternate; /* slowed 50% */
}
/* Orbs 3-5 disabled by default — only o1 + o2 paint. Keeps the HTML
structure but removes 3 of the 5 "paint storms" that thrash the GPU
during 3D animations. Re-enabled if the user explicitly wants
richer aurora (no UI for that — leave as dev toggle). */
.aurora-bg .orb.o3,
.aurora-bg .orb.o4,
.aurora-bg .orb.o5 { display: none; }
.aurora-bg::after {
/* noise + vignette overlay */
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, transparent 40%, rgba(7, 4, 26, 0.65) 100%),
url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.55;
pointer-events: none;
}
.aurora-bg::before {
/* Vertical scanline overlay — 1px lines every 20px @ 5% opacity.
Bridges the vertical "dead zone" between top and bottom panels. */
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
to right,
rgba(255, 255, 255, 0.05) 0 1px,
transparent 1px 20px
);
mix-blend-mode: screen;
pointer-events: none;
}
/* Hide aurora bg in light mode (legacy palette still applies there) */
:root:not([data-theme='dark']) .aurora-bg { display: none; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(6%, 8%) scale(1.12); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-8%, 4%) scale(1.08); } }
@keyframes drift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(-5%, -7%) scale(1.14); } }
@keyframes drift4 { from { transform: translate(0,0) scale(1); } to { transform: translate(7%, -5%) scale(1.10); } }
@keyframes drift5 { from { transform: translate(0,0) scale(1); } to { transform: translate(-4%, 6%) scale(1.15); } }
/* Aurora shimmer — applies to any element with class "shine" */
.shine {
background: var(--aurora);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shift 6s linear infinite;
font-style: italic;
font-weight: 500;
}
@keyframes shift {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}
/* Mono utility — any metadata / kicker label */
.mono, .kicker, code, pre, kbd, samp, tt {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.kicker {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
color: var(--text-muted);
}
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
.aurora-bg .orb { animation: none !important; }
.shine { animation: none !important; }
}
/* ============================================================
⚡ PERFORMANCE SPRINT — default-off blurs, hover re-enable,
GPU-accelerated UI surfaces, .perf-mode "Turbo" toggle.
}
/* 2. Re-enable blur on hover for critical-feel surfaces (cheap because
only one element blurs at a time) */
[data-theme='dark'] .navbar:hover,
[data-theme='dark'] .module-card:hover,
[data-theme='dark'] .sidebar:hover,
[data-theme='dark'] .search-results:hover,
[data-theme='dark'] .lab-hud:hover,
[data-theme='dark'] .hero-dossier:hover {
}
/* 3. Solid-ish backgrounds replace the look blur was giving us */
[data-theme='dark'] .lab-hud,
[data-theme='dark'] .lab-mission,
[data-theme='dark'] .surgical-tray,
[data-theme='dark'] .search-results,
[data-theme='dark'] .sidebar {
background: rgba(11, 7, 34, 0.92) !important;
}
/* Navbar — fully solid so huge bright H1s scrolling underneath don't
ghost through. Border + hover-glow keep the glass aesthetic. */
[data-theme='dark'] .navbar {
background: var(--bg-body) !important;
}
/* 4. Force GPU compositing on the moving/sticky surfaces */
.navbar, .sidebar, .lab-hud, .lab-mission, .surgical-tray,
.lab-hologram, .theme-toggle, .aurora-bg .orb {
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
/* Preserve centering for elements that legitimately use transform */
.lab-mission { transform: translate3d(-50%, 0, 0) !important; }
.surgical-tray { transform: translate3d(-50%, 0, 0) !important; }
.navbar { transform: translate3d(-50%, 0, 0) !important; }
/* 5. ⚡ Turbo Mode — body.perf-mode disables every decorative animation
and replaces the aurora background with the deep-violet solid */
body.perf-mode .aurora-bg,
body.perf-mode .aurora-bg::before,
body.perf-mode .aurora-bg::after { display: none !important; }
body.perf-mode { background: var(--bg-deep) !important; }
body.perf-mode .shine,
body.perf-mode .aurora-shimmer {
animation: none !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: var(--aurora-3) !important;
}
body.perf-mode .module-progress-fill,
body.perf-mode .lab-telemetry,
body.perf-mode .module-card-ring { animation: none !important; }
body.perf-mode .module-card:hover,
body.perf-mode .navbar:hover,
body.perf-mode .sidebar:hover,
body.perf-mode .search-results:hover,
body.perf-mode .lab-hud:hover,
body.perf-mode .hero-dossier:hover {
}
/* 6. The "Turbo" toggle itself — lives in the nav pill */
.perf-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
margin-left: 6px;
border-radius: 999px;
border: 1px solid var(--glass-edge);
background: rgba(255, 255, 255, 0.04);
color: var(--text-muted);
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.perf-toggle:hover {
color: var(--aurora-1);
border-color: rgba(94, 234, 212, 0.55);
}
.perf-toggle .perf-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--text-muted);
transition: all 0.2s ease;
}
body.perf-mode .perf-toggle {
color: var(--aurora-1);
border-color: rgba(94, 234, 212, 0.55);
background: rgba(94, 234, 212, 0.12);
}
body.perf-mode .perf-toggle .perf-dot {
background: var(--aurora-1);
box-shadow: 0 0 8px var(--aurora-1);
}
/* (Earlier version had `body > :not(.aurora-bg) { position: relative }`
here to force content above aurora-bg. That rule had specificity
0,1,1 and silently overrode the position:fixed on .navbar / .sidebar,
forcing them into document flow — which pushed .main (and the whole
homepage hero) way down below the sidebar. Removed. Each element
that needs to sit above aurora-bg sets its own z-index explicitly.) */
html { scroll-behavior: smooth; }
body {
font-family: 'Bricolage Grotesque', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background-color: var(--bg-color);
background-image: var(--bg-mesh);
background-attachment: fixed;
color: var(--text-main);
line-height: 1.65;
min-height: 100vh;
font-size: 17px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.005em;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Subtle noise overlay for premium grain, more visible in dark mode */
body::before {
content: '';
position: fixed; inset: 0; pointer-events: none; z-index: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.025;
mix-blend-mode: overlay;
}
[data-theme='dark'] body::before { opacity: 0.05; }
a {
color: var(--link-color);
text-decoration: none;
transition: var(--transition);
}
a:hover { color: var(--accent-hover); }
/* ============================================================
NAVBAR
============================================================ */
.navbar {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: min(1180px, calc(100% - 48px));
z-index: 100;
pointer-events: auto !important;
background: var(--glass);
border: 1px solid var(--glass-edge);
border-radius: 999px;
padding: 0 18px;
height: 58px;
display: flex; align-items: center;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition: background 0.3s ease, border-color 0.3s ease;
}
.navbar:hover { border-color: var(--glass-edge-br); }
/* Light mode keeps the old chromed bar, no pill */
:root:not([data-theme='dark']) .navbar {
top: 0; left: 0; right: 0;
width: auto; transform: none;
background: color-mix(in srgb, var(--bg-color) 80%, transparent);
border-radius: 0;
border: 0;
border-bottom: 1px solid var(--border);
padding: 0 24px;
height: 64px;
box-shadow: none;
}
.navbar-inner {
max-width: var(--max-width); margin: 0 auto; width: 100%;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
}
.nav-brand {
font-weight: 700; font-size: 0.95rem; color: var(--text-heading);
cursor: pointer; display: flex; align-items: center; gap: 10px;
letter-spacing: -0.02em;
transition: var(--transition);
}
.nav-brand:hover { color: var(--accent-color); }
.nav-brand svg { width: 22px; height: 22px; color: var(--accent-color); }
.breadcrumb {
display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted);
white-space: nowrap;
}
.breadcrumb a { color: var(--text-muted); transition: var(--transition); }
.breadcrumb a:hover { color: var(--accent-color); }
.breadcrumb .sep { color: var(--border-strong); }
/* Theme Toggle */
.theme-toggle {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-main);
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
}
.theme-toggle:hover {
border-color: var(--accent-color);
background: var(--surface-hover);
color: var(--accent-color);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.theme-toggle svg { width: 18px; height: 18px; transition: var(--transition); }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
[data-theme='dark'] .theme-toggle .icon-moon { display: block; }
[data-theme='dark'] .theme-toggle .icon-sun { display: none; }
/* ============================================================
LAYOUT
============================================================ */
.main { padding-top: 88px; padding-bottom: 80px; min-height: 100vh; position: relative; z-index: 1; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
/* ============================================================
HERO
============================================================ */
.hero { text-align: center; padding: 80px 0 64px; }
.hero-badge {
display: inline-flex; align-items: center;
background: var(--accent-soft); color: var(--accent-color);
padding: 6px 14px; border-radius: 999px;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase;
margin-bottom: 24px;
border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
}
.hero h1 {
font-size: 3.25rem; font-weight: 800; margin-bottom: 14px;
letter-spacing: -0.035em;
line-height: 1.1;
background: linear-gradient(135deg, var(--text-heading) 0%, var(--accent-color) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.hero .subtitle {
font-size: 1.15rem; color: var(--text-muted); max-width: 620px; margin: 0 auto 36px;
font-weight: 400;
letter-spacing: -0.01em;
}
.mentors {
display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
}
.mentor { display: flex; align-items: center; gap: 12px; }
.mentor-avatar {
width: 42px; height: 42px; border-radius: 999px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem; font-weight: 700; color: white;
box-shadow: var(--shadow-accent);
}
.mentor-info { text-align: left; }
.mentor-name { font-weight: 600; color: var(--text-heading); font-size: 0.9rem; }
.mentor-role { font-size: 0.75rem; color: var(--text-muted); }
/* ============================================================
AURORA HERO — glass dossier with stats + team
============================================================ */
[data-theme='dark'] .hero-aurora {
padding: 80px 0 48px;
display: flex;
justify-content: center;
}
[data-theme='dark'] .hero-dossier {
width: 100%;
max-width: 820px;
padding: 42px 48px 38px;
border-radius: 28px;
background: var(--glass);
border: 1px solid var(--glass-edge);
box-shadow:
0 40px 80px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
}
[data-theme='dark'] .hero-dossier::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(167, 139, 250, 0.35),
rgba(244, 114, 182, 0.18),
rgba(94, 234, 212, 0.25));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
opacity: 0.7;
}
[data-theme='dark'] .hero-kicker {
margin-bottom: 22px;
color: var(--text-muted);
}
[data-theme='dark'] .hero-title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(3rem, 7.5vw, 5.6rem);
font-weight: 450;
font-variation-settings: "opsz" 72;
letter-spacing: -0.045em;
line-height: 1.02;
color: var(--text-main);
margin: 0 0 18px;
background: none;
-webkit-text-fill-color: initial;
}
[data-theme='dark'] .hero-subtitle {
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
color: var(--text-muted);
max-width: 620px;
line-height: 1.45;
font-weight: 300;
margin: 0 0 32px;
}
[data-theme='dark'] .hero-subtitle .shine {
font-size: 1.02em;
}
[data-theme='dark'] .hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
padding: 18px 0 6px;
}
[data-theme='dark'] .hero-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
[data-theme='dark'] .hero-stat-num {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.95rem;
font-weight: 500;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
color: var(--text-main);
}
[data-theme='dark'] .hero-stat-lbl {
color: var(--text-muted);
}
[data-theme='dark'] .hero-divider {
height: 1px;
margin: 24px 0 22px;
background: linear-gradient(90deg, transparent, var(--glass-edge-br), transparent);
}
[data-theme='dark'] .team-grid {
display: flex;
gap: 32px;
flex-wrap: wrap;
}
[data-theme='dark'] .team-row {
display: flex;
align-items: center;
gap: 12px;
}
[data-theme='dark'] .team-avatar {
width: 40px; height: 40px;
border-radius: 999px;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: #0b0722;
}
[data-theme='dark'] .team-avatar.lead {
background: linear-gradient(135deg, var(--aurora-3), var(--aurora-2));
box-shadow: 0 0 14px rgba(167, 139, 250, 0.45);
}
[data-theme='dark'] .team-avatar.asst {
background: linear-gradient(135deg, var(--aurora-4), var(--aurora-5));
box-shadow: 0 0 14px rgba(244, 114, 182, 0.40);
}
[data-theme='dark'] .team-name {
font-size: 13px;
font-weight: 500;
color: var(--text-main);
line-height: 1.2;
}
[data-theme='dark'] .team-role {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 3px;
}
@media (max-width: 700px) {
[data-theme='dark'] .hero-dossier { padding: 28px 22px; }
[data-theme='dark'] .hero-stats { grid-template-columns: repeat(2, 1fr); }
[data-theme='dark'] .team-grid { flex-direction: column; gap: 16px; }
}
/* ============================================================
MODULE GRID
============================================================ */
.module-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
margin-top: 56px;
}
@media (max-width: 700px) { .module-grid { grid-template-columns: 1fr; } }
.module-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
cursor: pointer;
transition: var(--transition);
position: relative; overflow: hidden;
box-shadow: var(--shadow-sm);
}
.module-card::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, transparent, var(--accent-soft));
opacity: 0; transition: var(--transition); pointer-events: none;
}
.module-card:hover {
border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border));
transform: translateY(-2px);
box-shadow: var(--shadow-lg), var(--shadow-accent);
}
.module-card:hover::after { opacity: 1; }
.module-card.locked { opacity: 0.55; cursor: default; }
.module-card.locked:hover { border-color: var(--border); transform: none; box-shadow: var(--shadow-sm); }
.module-card.locked:hover::after { opacity: 0; }
.module-num {
font-size: 0.72rem; font-weight: 700; color: var(--accent-color);
text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px;
}
.module-card h3 {
font-size: 1.2rem; color: var(--text-heading); margin-bottom: 8px;
font-weight: 700; letter-spacing: -0.015em;
}
.module-card .meta {
font-size: 0.78rem; color: var(--text-muted);
display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
/* ============================================================
AURORA MODULE CARDS (dark mode only)
Frosted glass base, rotating conic-gradient ring on hover,
cursor-following violet spotlight, aurora progress bar.
============================================================ */
[data-theme='dark'] .module-grid { gap: 22px; margin-top: 48px; }
[data-theme='dark'] .module-card {
--mx: 50%;
--my: 50%;
background: var(--glass);
border: 1px solid var(--glass-edge);
border-radius: 22px;
padding: 1px; /* room for the ring */
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.3s ease,
box-shadow 0.3s ease;
overflow: hidden;
isolation: isolate;
}
[data-theme='dark'] .module-card::after { display: none; }
[data-theme='dark'] .module-card:hover {
transform: translateY(-3px);
border-color: var(--glass-edge-br);
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(167, 139, 250, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Conic aurora ring — appears on hover, slowly rotates */
[data-theme='dark'] .module-card-ring {
position: absolute;
inset: -2px;
border-radius: inherit;
padding: 2px;
background: conic-gradient(from 0deg,
var(--aurora-1), var(--aurora-2), var(--aurora-3),
var(--aurora-4), var(--aurora-5), var(--aurora-6), var(--aurora-1));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
animation: ringSpin 8s linear infinite;
}
[data-theme='dark'] .module-card:hover .module-card-ring { opacity: 1; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
/* Cursor-following soft violet spotlight */
[data-theme='dark'] .module-card-spot {
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
260px circle at var(--mx) var(--my),
rgba(167, 139, 250, 0.22),
transparent 65%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
[data-theme='dark'] .module-card:hover .module-card-spot { opacity: 1; }
/* Inner content sits above the spotlight + ring */
[data-theme='dark'] .module-card-inner {
position: relative;
z-index: 1;
padding: 26px 28px 22px;
display: flex;
flex-direction: column;
gap: 10px;
background:
linear-gradient(180deg, transparent 0%, rgba(7, 4, 26, 0.28) 100%);
border-radius: inherit;
}
[data-theme='dark'] .module-card .module-num { color: var(--aurora-3); margin-bottom: 4px; }
[data-theme='dark'] .module-card h3 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.45rem;
font-weight: 500;
font-variation-settings: "opsz" 36;
letter-spacing: -0.025em;
color: var(--text-main);
margin: 0 0 4px;
}
[data-theme='dark'] .module-card .module-desc {
font-size: 0.92rem;
color: var(--text-muted);
line-height: 1.55;
margin: 0 0 4px;
}
/* Aurora progress bar with shift animation */
[data-theme='dark'] .module-progress {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 7px;
}
[data-theme='dark'] .module-progress-track {
height: 4px;
width: 100%;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
[data-theme='dark'] .module-progress-fill {
height: 100%;
width: var(--w, 0%);
background: var(--aurora);
background-size: 300% 100%;
animation: shift 6s linear infinite;
border-radius: inherit;
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme='dark'] .module-progress-text {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.05em;
color: var(--text-muted);
}
[data-theme='dark'] .module-progress-text b { color: var(--text-main); font-weight: 500; }
[data-theme='dark'] .module-progress-text .dot { margin: 0 4px; opacity: 0.5; }
[data-theme='dark'] .module-progress-locked { height: 1px; background: var(--glass-edge); margin: 14px 0 4px; }
/* Meta row */
[data-theme='dark'] .module-card .meta {
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid var(--glass-edge);
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Locked state */
[data-theme='dark'] .module-card.locked { opacity: 0.55; }
[data-theme='dark'] .module-card.locked:hover { transform: none; }
[data-theme='dark'] .module-card.locked:hover .module-card-ring,
[data-theme='dark'] .module-card.locked:hover .module-card-spot { opacity: 0; }
/* Badges re-skinned for glass */
[data-theme='dark'] .module-card .badge {
padding: 4px 10px;
font-size: 9.5px;
letter-spacing: 0.14em;
border-radius: 999px;
}
[data-theme='dark'] .module-card .badge-available {
background: rgba(94, 234, 212, 0.1);
color: var(--aurora-1);
border-color: rgba(94, 234, 212, 0.28);
}
[data-theme='dark'] .module-card .badge-soon {
background: rgba(255, 255, 255, 0.04);
color: var(--text-muted);
border-color: var(--glass-edge);
}
[data-theme='dark'] .module-card .badge-completed {
background: rgba(94, 234, 212, 0.15);
color: var(--aurora-1);
border-color: rgba(94, 234, 212, 0.42);
}
@media (prefers-reduced-motion: reduce) {
[data-theme='dark'] .module-card-ring { animation: none; }
[data-theme='dark'] .module-progress-fill { animation: none; }
}
/* ============================================================
BADGES
============================================================ */
.badge {
display: inline-flex; align-items: center;
padding: 3px 10px; border-radius: 999px;
font-size: 0.68rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
border: 1px solid transparent;
}
.badge-available {
background: var(--success-soft); color: var(--success-color);
border-color: color-mix(in srgb, var(--success-color) 25%, transparent);
}
.badge-soon {
background: color-mix(in srgb, var(--text-muted) 12%, transparent);
color: var(--text-muted);
border-color: color-mix(in srgb, var(--text-muted) 20%, transparent);
}
.badge-completed {
background: var(--success-soft);
color: var(--success-color);
border-color: color-mix(in srgb, var(--success-color) 35%, transparent);
animation: badgePulse 2.4s ease-in-out infinite;
box-shadow: 0 0 0 0 var(--success-glow);
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 var(--success-glow); }
50% { box-shadow: 0 0 0 6px transparent; }
}
/* ============================================================
PAGE HEADERS
============================================================ */
.page-header {
padding: 56px 0 36px; border-bottom: 1px solid var(--border); margin-bottom: 44px;
}
.page-header .back {
font-size: 0.82rem; color: var(--text-muted); margin-bottom: 18px;
display: inline-flex; align-items: center; gap: 6px;
transition: var(--transition);
}
.page-header .back:hover { color: var(--accent-color); }
.page-header h1 {
font-size: 2.4rem; color: var(--text-heading); margin-bottom: 10px;
letter-spacing: -0.025em; font-weight: 700;
}
.page-header p {
color: var(--text-muted); font-size: 1rem; max-width: 720px;
}
.page-meta { display: flex; gap: 24px; margin-top: 18px; flex-wrap: wrap; }
.page-meta-item { font-size: 0.85rem; color: var(--text-main); display: flex; align-items: center; gap: 6px; }
.page-meta-item span { color: var(--text-muted); }
/* ============================================================
CLASS CARDS
============================================================ */
.class-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 52px; }
.class-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 22px;
display: flex; align-items: center; justify-content: space-between;
cursor: pointer;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.class-card:hover {
border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border));
transform: translateX(3px);
box-shadow: var(--shadow-md);
}
.class-card.locked { opacity: 0.55; cursor: default; }
.class-card.locked:hover { border-color: var(--border); transform: none; box-shadow: var(--shadow-sm); }
.class-card-left { display: flex; align-items: center; gap: 18px; }
.class-number {
width: 38px; height: 38px; border-radius: var(--radius-sm);
background: var(--accent-soft);
color: var(--accent-color);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
}
.class-card h4 {
font-size: 0.98rem; color: var(--text-heading);
font-weight: 600; letter-spacing: -0.01em;
}
.class-card .class-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; }
/* ============================================================
RESOURCES
============================================================ */
.resources-section { margin-top: 48px; }
.resources-section h2 {
font-size: 1.2rem; color: var(--text-heading); margin-bottom: 18px;
font-weight: 700; letter-spacing: -0.015em;
}
.resource-link {
display: flex; align-items: center; gap: 14px; padding: 14px 20px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
margin-bottom: 10px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.resource-link:hover {
border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border));
background: var(--surface-hover);
text-decoration: none;
}
.resource-icon { font-size: 1.15rem; }
.resource-text { color: var(--text-main); font-size: 0.9rem; }
/* ============================================================
CLASS PAGE SECTIONS
============================================================ */
.class-header { padding: 44px 0 26px; }
.class-header .back { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 14px; display: inline-block; transition: var(--transition); }
.class-header .back:hover { color: var(--accent-color); }
.class-header h1 {
font-size: 2.15rem; color: var(--text-heading); margin-bottom: 8px;
letter-spacing: -0.025em; font-weight: 700;
}
.class-header .class-subtitle { color: var(--text-muted); font-size: 0.95rem; }
.section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 18px; overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.section:hover { border-color: color-mix(in srgb, var(--border-strong) 80%, var(--border)); }
.section-header {
padding: 20px 26px; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; user-select: none;
transition: var(--transition);
}
.section-header:hover { background: var(--surface-hover); }
.section-title {
font-size: 1.05rem; font-weight: 600; color: var(--text-heading);
display: flex; align-items: center; gap: 12px;
letter-spacing: -0.015em;
}
.section-icon { font-size: 1.2rem; }
.section-toggle {
color: var(--text-muted); font-size: 1.1rem;
transition: transform 0.3s ease;
}
.section.open .section-toggle { transform: rotate(180deg); }
.section-body { padding: 0 26px 26px; display: none; font-size: 1.1rem; line-height: 1.6; }
.section.open .section-body { display: block; }
/* Inline-SVG visual containers (used in beginner-friendly Module 1 / 2 visuals) */
.visual-container {
width: 100%;
max-width: 600px;
margin: 1.5rem auto;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
display: flex;
justify-content: center;
}
:root:not([data-theme='dark']) .visual-container {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
.visual-container svg {
width: 100%;
height: auto;
max-height: 320px;
}
/* Light-mode adjustment: pastel SVG strokes are too washed out on white.
Slight contrast/saturation boost makes them legible without changing
the dark-mode appearance. */
:root:not([data-theme='dark']) .visual-container svg {
filter: contrast(1.4) saturate(1.6) brightness(0.7);
}
.section-body p { margin-bottom: 14px; }
.section-body h4 {
color: var(--accent-color); font-size: 0.95rem; margin: 22px 0 10px;
font-weight: 600; letter-spacing: -0.01em;
}
.section-body ul, .section-body ol { padding-left: 24px; margin-bottom: 14px; }
.section-body li { margin-bottom: 6px; }
.section-body strong { color: var(--text-heading); font-weight: 600; }
.section-body em { color: var(--accent-color); font-style: normal; font-weight: 500; }
.section-body code {
background: var(--surface-hover);
border: 1px solid var(--border);
padding: 1px 6px;
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.88em;
color: var(--accent-color);
}
.section-body pre {
background: var(--surface-hover);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 14px 18px;
overflow-x: auto;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.85rem;
line-height: 1.55;
color: var(--text-main);
margin: 8px 0 14px;
}
.section-body pre code { background: none; border: none; padding: 0; color: inherit; font-size: 1em; }
/* ============================================================
AURORA CLASS PAGE (dark mode only)
Glass section panels, colored icon chips, aurora code blocks,
active-line focusing, blue info / pink warning callouts,
quiz cards with gradient borders, shimmer on correct answer.
============================================================ */
/* Class header */
[data-theme='dark'] .class-header {
padding: 56px 0 32px;
border-bottom: 1px solid var(--glass-edge);
margin-bottom: 36px;
}
[data-theme='dark'] .class-header h1 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(2.1rem, 4.5vw, 3.4rem);
font-weight: 450;
font-variation-settings: "opsz" 48;
letter-spacing: -0.035em;
line-height: 1.08;
color: var(--text-main);
margin-bottom: 12px;
background: none;
-webkit-text-fill-color: initial;
}
[data-theme='dark'] .class-header .class-subtitle {
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.5;
}
/* Section as glass panel with colored icon chip */
[data-theme='dark'] .section {
background: var(--glass);
border: 1px solid var(--glass-edge);
border-radius: 18px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
margin-bottom: 18px;
overflow: hidden;
}
[data-theme='dark'] .section:hover { border-color: var(--glass-edge-br); }
[data-theme='dark'] .section-header {
padding: 20px 26px;
background: transparent !important;
}
[data-theme='dark'] .section-header:hover { background: rgba(255, 255, 255, 0.02) !important; }
[data-theme='dark'] .section-title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.18rem;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--text-main);
gap: 14px;
}
[data-theme='dark'] .section-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.28);
font-size: 1.05rem;
}
/* Rotate icon chip color per nth section so the page has rhythm */
[data-theme='dark'] .section:nth-child(3n+1) .section-icon { background: rgba(94, 234, 212, 0.12); border-color: rgba(94, 234, 212, 0.32); }
[data-theme='dark'] .section:nth-child(3n+2) .section-icon { background: rgba(244, 114, 182, 0.12); border-color: rgba(244, 114, 182, 0.32); }
[data-theme='dark'] .section:nth-child(3n) .section-icon { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.32); }
/* Section body */
[data-theme='dark'] .section-body p { color: var(--text-soft, #c9c2e0); line-height: 1.65; }
[data-theme='dark'] .section-body li { color: var(--text-soft, #c9c2e0); }
[data-theme='dark'] .section-body strong { color: var(--text-main); font-weight: 500; }
[data-theme='dark'] .section-body em {
font-style: italic;
font-weight: 500;
background: var(--aurora);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shift 6s linear infinite;
}
[data-theme='dark'] .section-body h4 {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 500;
color: var(--text-main);
letter-spacing: -0.015em;
font-size: 1.1rem;
}
[data-theme='dark'] .section-body code {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-edge);
color: var(--aurora-4);
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
/* ---- CODE BLOCK with aurora syntax + active-line focus ---- */
[data-theme='dark'] .section-body pre,
[data-theme='dark'] .example-box pre,
[data-theme='dark'] .code-block {
background: linear-gradient(180deg, rgba(7, 4, 26, 0.75), rgba(7, 4, 26, 0.60));
border: 1px solid var(--glass-edge);
border-radius: 14px;
padding: 18px 20px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.92rem;
line-height: 1.75;
color: #e4def7;
overflow-x: auto;
position: relative;
}
[data-theme='dark'] .code-line {
display: inline-block;
width: 100%;
padding: 1px 6px 1px 10px;
margin-left: -10px;
border-left: 2px solid transparent;
border-radius: 3px;
cursor: pointer;
transition: opacity 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}
[data-theme='dark'] .code-line:hover { background: rgba(255, 255, 255, 0.03); }
[data-theme='dark'] .code-block.has-active .code-line { opacity: 0.28; }
[data-theme='dark'] .code-block.has-active .code-line.is-active {
opacity: 1;
background: rgba(167, 139, 250, 0.10);
border-left-color: var(--aurora-3);
box-shadow: 0 0 14px rgba(167, 139, 250, 0.20) inset;
}
/* Aurora syntax tokens */
[data-theme='dark'] .tok.kw { color: var(--aurora-4); font-weight: 500; } /* keywords → pink */
[data-theme='dark'] .tok.bi { color: var(--aurora-3); } /* builtins → violet */
[data-theme='dark'] .tok.str { color: var(--aurora-1); } /* strings → teal */
[data-theme='dark'] .tok.num { color: var(--aurora-6); } /* numbers → gold */
[data-theme='dark'] .tok.cmt { color: var(--text-muted); font-style: italic; }
/* Try-in-Lab button CSS removed — feature disabled. Nuke any stale
elements still in cached DOM from before the code-path was dropped. */
.code-actions, .try-in-lab { display: none !important; }
/* CV Labeler — "Re-calibrate the sensors" interactive task */
[data-theme='dark'] .cv-labeler {
margin: 18px 0 10px;
padding: 18px 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--glass-edge);
border-radius: 16px;
position: relative;
overflow: hidden;
}
[data-theme='dark'] .cv-labeler::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(94, 234, 212, 0.45), rgba(167, 139, 250, 0.35));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
}
[data-theme='dark'] .cv-labeler.is-complete::before {
background: linear-gradient(135deg, rgba(94, 234, 212, 0.8), rgba(94, 234, 212, 0.5));
animation: shift 4s linear infinite;
}
.cv-labeler-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cv-labeler-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1rem; font-weight: 500; }
.cv-labeler-progress { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--text-muted); }
.cv-labeler-progress b { color: var(--aurora-1); font-variant-numeric: tabular-nums; }
.cv-labeler-samples { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cv-sample { display: flex; flex-direction: column; gap: 6px; transition: opacity 0.3s ease; }
.cv-thumb {
width: 100%;
min-height: 110px;
aspect-ratio: 1 / 1;
border-radius: 10px;
border: 1px solid rgba(94, 234, 212, 0.22);
background: rgba(94, 234, 212, 0.06);
overflow: hidden; /* clip img to the rounded corners */
position: relative;
filter: grayscale(1) contrast(1.1); /* grayscale until recalibrated */
transition: filter 0.6s ease, background 0.3s ease;
}
.cv-thumb img {
width: 100%;
height: 100%;
object-fit: cover; /* fill the square, crop to edges */
display: block;
user-select: none;
-webkit-user-drag: none;
}
[data-theme='dark'] .cv-sample.is-right .cv-thumb { background: rgba(94, 234, 212, 0.12); }
[data-theme='dark'] .cv-sample.is-wrong .cv-thumb { background: rgba(244, 114, 182, 0.12); }
[data-theme='dark'] .cv-labeler.is-complete .cv-thumb {
filter: grayscale(0) contrast(1); /* colour returns on success */
}
.cv-choices { display: flex; gap: 4px; }
.cv-choices button {
flex: 1;
padding: 5px 0;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-edge);
border-radius: 6px;
color: var(--text-soft, #c9c2e0);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
cursor: pointer;
transition: all 0.15s ease;
}
.cv-choices button:hover:not(:disabled) { background: rgba(167, 139, 250, 0.16); border-color: var(--aurora-3); color: var(--text-main); }
.cv-choices button:disabled { opacity: 0.5; cursor: default; }
.cv-sample.is-right { opacity: 1; }
.cv-sample.is-right .cv-choices button { border-color: rgba(94, 234, 212, 0.55); }
.cv-sample.is-wrong { opacity: 0.6; }
.cv-sample.is-wrong .cv-choices button { border-color: rgba(244, 114, 182, 0.55); }
.cv-labeler-status { margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted); }
[data-theme='dark'] .cv-labeler.is-complete .cv-labeler-status { color: var(--aurora-1); }
/* Part 4 — Presentation-mode polish for pain-points + code sizing */
/* .aurora-shimmer — alias for .shine so user's naming also works */
.aurora-shimmer {
background: var(--aurora);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shift 6s linear infinite;
font-style: italic;
font-weight: 500;
}
/* High-contrast yellow backdrop on warning boxes in presentation mode */
body.presentation-mode .warning-box {
background: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.08)) !important;
border: 2px solid var(--aurora-6) !important;
border-left: 6px solid var(--aurora-6) !important;
box-shadow: 0 0 48px rgba(251, 191, 36, 0.35) !important;
color: #fff5d6 !important;
padding: 28px 32px !important;
font-size: 34px !important;
line-height: 1.45 !important;
}
body.presentation-mode .warning-box strong {
background: var(--aurora);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shift 6s linear infinite;
font-size: 38px;
display: block;
margin-bottom: 14px;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 600;
}
body.presentation-mode .warning-box::before { font-size: 3rem !important; top: 18px !important; right: 24px !important; }
/* Projector-visible code */
body.presentation-mode .section-body code,
body.presentation-mode .section-body pre,
body.presentation-mode .example-box pre,
body.presentation-mode .section-body pre code {
font-size: 1.2rem !important;
}
body.presentation-mode .section-body pre,
body.presentation-mode .example-box pre {
font-size: 26px !important;
line-height: 1.75 !important;
}
/* ---- CALLOUTS: blue info / pink warning (Gotcha) ---- */
[data-theme='dark'] .info-box {
background: rgba(96, 165, 250, 0.08);
border: 1px solid rgba(96, 165, 250, 0.25);
border-left: 3px solid var(--aurora-2);
border-radius: 12px;
padding: 14px 18px;
color: #d7e4ff;
margin: 14px 0;
}
[data-theme='dark'] .info-box strong { color: var(--aurora-2); }
[data-theme='dark'] .warning-box {
background: linear-gradient(180deg, rgba(244, 114, 182, 0.10), rgba(244, 114, 182, 0.05));
border: 1px solid rgba(244, 114, 182, 0.38);
border-left: 4px solid var(--aurora-4);
border-radius: 12px;
padding: 16px 20px;
color: #ffd8ec;
margin: 16px 0;
box-shadow: 0 0 28px rgba(244, 114, 182, 0.15);
position: relative;
}
[data-theme='dark'] .warning-box::before {
content: "⚠";
position: absolute;
top: 14px; right: 16px;
font-size: 1.2rem;
color: var(--aurora-4);
opacity: 0.55;
}
[data-theme='dark'] .warning-box strong {
display: block;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.95rem;
font-weight: 600;
color: var(--aurora-4);
letter-spacing: 0.01em;
margin-bottom: 6px;
}
[data-theme='dark'] .warning-box code {
background: rgba(244, 114, 182, 0.14);
border-color: rgba(244, 114, 182, 0.35);
color: #ffd8ec;
}
/* example-box — light glass wrapper for inline code demos */
[data-theme='dark'] .example-box {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--glass-edge);
border-radius: 12px;
padding: 0;
margin: 14px 0;
}
[data-theme='dark'] .example-box pre { border: 0; background: transparent; border-radius: 12px; }
/* ---- QUIZ CARDS with gradient border + shimmer on correct answer ---- */
[data-theme='dark'] .quiz-item {
background: rgba(255, 255, 255, 0.025);
border: 1px solid transparent;
border-radius: 16px;
padding: 22px 24px;
margin-bottom: 16px;
position: relative;
}
[data-theme='dark'] .quiz-item::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(167, 139, 250, 0.45), rgba(244, 114, 182, 0.30), rgba(251, 191, 36, 0.25));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
opacity: 0.55;
transition: opacity 0.3s ease;
}
[data-theme='dark'] .quiz-item:hover::before { opacity: 1; }
[data-theme='dark'] .quiz-q {
color: var(--text-main);
font-weight: 500;
font-size: 1.02rem;
}
[data-theme='dark'] .quiz-options li { color: var(--text-soft, #c9c2e0); }
[data-theme='dark'] .quiz-reveal {
background: rgba(167, 139, 250, 0.15);
border: 1px solid rgba(167, 139, 250, 0.4);
color: var(--aurora-3);
border-radius: 10px;
padding: 8px 18px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s ease;
}
[data-theme='dark'] .quiz-reveal:hover {
background: rgba(167, 139, 250, 0.28);
box-shadow: 0 0 20px rgba(167, 139, 250, 0.35);
}
[data-theme='dark'] .quiz-answer {
background: rgba(94, 234, 212, 0.06);
border: 0;
border-left: 3px solid var(--aurora-1);
color: var(--text-soft);
}
[data-theme='dark'] .quiz-answer.visible {
border-width: 0 0 0 3px;
padding: 14px 18px;
}
/* Shine on the correct-answer marker "✅ B. float" */
[data-theme='dark'] .quiz-answer > p:first-child strong {
background: var(--aurora);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shift 6s linear infinite;
font-weight: 600;
}
[data-theme='dark'] .quiz-answer .quiz-why { border-top-color: rgba(94, 234, 212, 0.28); }
[data-theme='dark'] .quiz-answer .quiz-why li { border-left-color: rgba(244, 114, 182, 0.55); color: var(--text-muted); }
[data-theme='dark'] .quiz-answer .quiz-why li strong { color: var(--text-main); }
/* ============================================================
TIMELINE
============================================================ */
.timeline { position: relative; padding-left: 32px; margin: 16px 0; }
.timeline::before {
content: ''; position: absolute; left: 8px; top: 0; bottom: 0;
width: 2px; background: var(--border);
}
.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item::before {
content: ''; position: absolute; left: -28px; top: 6px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--accent-color);
border: 3px solid var(--bg-color);
box-shadow: 0 0 0 1px var(--accent-color);
}
.timeline-year { font-weight: 700; color: var(--accent-color); font-size: 0.9rem; }
.timeline-text { color: var(--text-main); font-size: 0.9rem; }
/* ============================================================
QUIZ
============================================================ */
.quiz-item {
background: var(--accent-soft);
border: 1px solid color-mix(in srgb, var(--accent-color) 15%, var(--border));
border-radius: var(--radius);
padding: 20px 22px;
margin-bottom: 14px;
transition: var(--transition);
}
.quiz-item:hover { border-color: color-mix(in srgb, var(--accent-color) 30%, var(--border)); }
.quiz-q { font-weight: 600; color: var(--text-heading); margin-bottom: 10px; letter-spacing: -0.01em; }
.quiz-options { padding-left: 22px; margin-bottom: 12px; }
.quiz-options li { color: var(--text-main); margin-bottom: 5px; font-size: 0.92rem; }
.quiz-reveal {
background: var(--accent-color);
color: white;
border: 1px solid var(--accent-color);
border-radius: var(--radius);
padding: 8px 18px;
font-size: 0.82rem;
cursor: pointer;
font-family: inherit;
font-weight: 600;
letter-spacing: 0.01em;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.quiz-reveal:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-accent);
}
/* Quiz answer uses a slide-down reveal: collapsed by default,
expands with max-height + opacity + translate over 0.5s so
the class can see the answer appear dramatically. */
.quiz-answer {
max-height: 0;
opacity: 0;
overflow: hidden;
margin-top: 0;
padding: 0 18px;
border: 0 solid color-mix(in srgb, var(--success-color) 25%, transparent);
border-left: 0 solid var(--success-color);
border-radius: var(--radius-sm);
background: var(--success-soft);
font-size: 0.92rem;
color: var(--text-main);
transform: translateY(-12px);
transition:
max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.45s ease,
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
padding 0.4s ease,
margin-top 0.4s ease,
border-width 0.2s ease;
}
.quiz-answer .quiz-why {
list-style: none;
padding: 0;
margin: 10px 0 0;
border-top: 1px dashed color-mix(in srgb, var(--success-color) 30%, transparent);
padding-top: 10px;
}
.quiz-answer .quiz-why li {
padding: 4px 0 4px 12px;
border-left: 2px solid color-mix(in srgb, var(--danger-color, #f87171) 55%, transparent);
margin: 4px 0;
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.5;
}
.quiz-answer .quiz-why li strong { color: var(--text-heading); }
.quiz-answer p { margin: 0 0 6px; }
.quiz-answer.visible {
max-height: 1400px;
opacity: 1;
margin-top: 12px;
padding: 14px 18px;
border-width: 1px;
border-left-width: 3px;
transform: translateY(0);
}
/* ============================================================
CALLOUTS
============================================================ */
.info-box {
background: var(--info-soft);
border-left: 3px solid #0ea5e9;
border-radius: 0 var(--radius) var(--radius) 0;
padding: 16px 22px; margin: 14px 0; font-size: 0.92rem;
}
.info-box strong { color: #0ea5e9; }
[data-theme='dark'] .info-box strong { color: #38bdf8; }
.example-box {
background: var(--success-soft);
border-left: 3px solid var(--success-color);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 16px 22px; margin: 14px 0; font-size: 0.92rem;
}
.case-study {
background: var(--danger-soft);
border-left: 3px solid var(--danger-color);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 18px 22px; margin: 18px 0;
}
.case-study h4 { color: var(--danger-color); margin-bottom: 8px; font-size: 1rem; }
.case-study p { font-size: 0.9rem; margin-bottom: 8px; }
.discussion-box {
background: var(--info-soft);
border: 1px solid color-mix(in srgb, #0ea5e9 25%, var(--border));
border-radius: var(--radius);
padding: 20px 24px; margin-top: 16px;
}
.discussion-box h4 { color: #0ea5e9; margin-bottom: 10px; }
[data-theme='dark'] .discussion-box h4 { color: #38bdf8; }
.discussion-box li { margin-bottom: 6px; font-size: 0.9rem; }
/* ============================================================
CLASS NAV
============================================================ */
.class-nav {
display: flex; justify-content: space-between; align-items: center; gap: 14px;
margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--border);
}
.class-nav a {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-main); font-size: 0.9rem; font-weight: 500;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.class-nav a:hover {
border-color: var(--accent-color);
color: var(--accent-color);
transform: translateY(-1px);
box-shadow: var(--shadow-accent);
text-decoration: none;
}
/* ============================================================
FOOTER
============================================================ */
.footer {
text-align: center; padding: 48px 24px 36px;
border-top: 1px solid var(--border); margin-top: 48px;
}
.footer p { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 8px; }
.footer a { color: var(--accent-color); }
/* ============================================================
HIGHLIGHT
============================================================ */
.highlight {
background: var(--accent-soft); padding: 2px 6px; border-radius: 4px;
color: var(--accent-color); font-weight: 500;
}
/* ============================================================
SCENARIO / PRINCIPLE / TOOL
============================================================ */
.scenario-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 20px 24px; margin-bottom: 14px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.scenario-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.scenario-card h4 { color: var(--accent-color); font-size: 0.95rem; margin-bottom: 6px; }
.scenario-card p { font-size: 0.9rem; }
.principle-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px; margin: 16px 0;
}
.principle-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 18px;
text-align: center;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.principle-card:hover { border-color: var(--accent-color); transform: translateY(-2px); }
.principle-card .p-icon { font-size: 1.6rem; margin-bottom: 8px; }
.principle-card h5 { color: var(--text-heading); font-size: 0.9rem; margin-bottom: 4px; }
.principle-card p { font-size: 0.8rem; color: var(--text-muted); }
.tool-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 12px; margin: 18px 0;
}
.tool-card {
display: block; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 18px 22px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.tool-card:hover {
border-color: var(--accent-color);
transform: translateY(-2px);
box-shadow: var(--shadow-accent);
text-decoration: none;
}
.tool-card h5 {
color: var(--text-heading); font-size: 0.92rem; margin-bottom: 4px;
font-weight: 600; letter-spacing: -0.01em;
}
.tool-card p { font-size: 0.8rem; color: var(--text-muted); }
/* ============================================================
SEARCH
============================================================ */
.search-box {
position: relative; flex: 1; max-width: 440px; margin: 0 20px;
}
#search-input {
width: 100%;
padding: 10px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-main);
font-family: inherit;
font-size: 0.88rem;
outline: none;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
#search-input::placeholder { color: var(--text-muted); }
#search-input:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm);
}
.search-results {
position: absolute;
top: calc(100% + 8px); left: 0; right: 0;
background: var(--surface-raised);
border: 1px solid var(--border);
border-radius: var(--radius);
max-height: 440px; overflow-y: auto;
box-shadow: var(--shadow-lg);
z-index: 200;
}
.search-result {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: var(--transition);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result.active { background: var(--surface-hover); }
.search-result-title {
color: var(--text-heading); font-size: 0.92rem;
font-weight: 600; margin-bottom: 3px; letter-spacing: -0.01em;
}
.search-result-meta { color: var(--text-muted); font-size: 0.75rem; }
.search-result-desc { color: var(--text-main); font-size: 0.82rem; margin-top: 4px; opacity: 0.85; }
.search-result mark {
background: var(--accent-soft); color: var(--accent-color);
padding: 0 3px; border-radius: 3px; font-weight: 600;
}
.search-empty { padding: 20px 18px; color: var(--text-muted); font-size: 0.85rem; text-align: center; }
/* ============================================================
AURORA SEARCH + THEME TOGGLE + SIDEBAR (dark mode only)
============================================================ */
/* Search — frosted glass pill inside the nav */
[data-theme='dark'] .search-box { max-width: 400px; margin: 0 14px; }
[data-theme='dark'] #search-input {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--glass-edge);
border-radius: 999px;
padding: 9px 18px;
color: var(--text-main);
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.88rem;
box-shadow: none;
}
[data-theme='dark'] #search-input::placeholder { color: var(--text-muted); }
[data-theme='dark'] #search-input:focus {
border-color: rgba(167, 139, 250, 0.55);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16);
}
[data-theme='dark'] .search-results {
top: calc(100% + 12px);
background: rgba(11, 7, 34, 0.75);
border: 1px solid var(--glass-edge);
border-radius: 18px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
padding: 6px;
}
[data-theme='dark'] .search-result {
border-bottom: 1px solid var(--glass-edge);
border-radius: 12px;
}
[data-theme='dark'] .search-result:hover,
[data-theme='dark'] .search-result.active {
background: rgba(167, 139, 250, 0.12);
}
[data-theme='dark'] .search-result-title { color: var(--text-main); font-weight: 500; }
[data-theme='dark'] .search-result-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
[data-theme='dark'] .search-result mark {
background: transparent;
color: transparent;
background-image: var(--aurora);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
animation: shift 6s linear infinite;
padding: 0 1px;
}
/* Theme toggle — circular glass button */
[data-theme='dark'] .theme-toggle {
width: 38px; height: 38px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-edge);
color: var(--text-soft, #c9c2e0);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .theme-toggle:hover {
border-color: rgba(167, 139, 250, 0.55);
background: rgba(167, 139, 250, 0.14);
color: var(--aurora-3);
box-shadow: 0 0 24px rgba(167, 139, 250, 0.35);
transform: none;
}
/* Sidebar — sticky glass panel */
[data-theme='dark'] .sidebar {
top: 92px; /* clear the floating nav pill */
bottom: 20px;
left: 20px;
width: 300px;
border-radius: 22px;
background: rgba(11, 7, 34, 0.55);
border: 1px solid var(--glass-edge);
border-right: 1px solid var(--glass-edge);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
transform: translateX(calc(-100% - 24px));
}
[data-theme='dark'] body.has-sidebar .sidebar { transform: translateX(0); }
[data-theme='dark'] .sidebar-inner { padding: 22px 14px 28px; }
[data-theme='dark'] .sidebar-heading {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--text-muted);
padding: 10px 12px 18px;
}
[data-theme='dark'] .sidebar-module-header {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.92rem;
font-weight: 450;
color: var(--text-main);
letter-spacing: -0.015em;
border-radius: 12px;
padding: 11px 14px;
}
[data-theme='dark'] .sidebar-module-header:hover {
background: rgba(167, 139, 250, 0.08);
color: var(--aurora-3);
}
[data-theme='dark'] .sidebar-module-num {
background: rgba(167, 139, 250, 0.14);
color: var(--aurora-3);
border-radius: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
}
/* Sidebar class links — dot + text + active iridescent border */
[data-theme='dark'] .sidebar-class {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px 9px 36px;
margin: 2px 0;
border-radius: 10px;
border-left: 2px solid transparent;
color: var(--text-muted);
font-size: 0.85rem;
letter-spacing: -0.005em;
}
[data-theme='dark'] .sidebar-class .sidebar-class-dot {
position: absolute;
left: 16px;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--glass-edge-br);
transition: background 0.25s ease, box-shadow 0.25s ease;
}
[data-theme='dark'] .sidebar-class.completed .sidebar-class-dot {
background: var(--aurora-1);
box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.18), 0 0 12px rgba(94, 234, 212, 0.55);
animation: dotPulse 2.8s ease-in-out infinite;
}
@keyframes dotPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.18), 0 0 12px rgba(94, 234, 212, 0.50); }
50% { box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.08), 0 0 16px rgba(94, 234, 212, 0.75); }
}
[data-theme='dark'] .sidebar-class:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--text-main);
}
/* Active class — iridescent gradient border on the left */
[data-theme='dark'] .sidebar-class.active {
background: linear-gradient(90deg, rgba(167, 139, 250, 0.16), transparent 85%);
color: var(--text-main);
font-weight: 500;
border-left: 2px solid transparent;
border-image: var(--aurora) 1;
border-image-slice: 1;
}
[data-theme='dark'] .sidebar-class.active .sidebar-class-dot {
background: var(--aurora-3);
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.24), 0 0 14px rgba(167, 139, 250, 0.70);
}
[data-theme='dark'] .sidebar-class.locked { opacity: 0.35; }
/* Sidebar overlay */
[data-theme='dark'] .sidebar-overlay { background: rgba(7, 4, 26, 0.55); }
/* ============================================================
LOADING
============================================================ */
.loading-wrap {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 140px 20px; gap: 22px; min-height: 55vh;
}
.spinner {
width: 42px; height: 42px; border-radius: 50%;
border: 3px solid var(--border);
border-top-color: var(--accent-color);
animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-msg { color: var(--text-muted); font-size: 0.92rem; letter-spacing: -0.005em; }
/* ============================================================
PROGRESS BAR
============================================================ */
.progress-wrap { margin-top: 22px; max-width: 440px; }
.progress-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
.progress-bar {
height: 6px; background: var(--surface-hover);
border: 1px solid var(--border);
border-radius: 999px; overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
transition: width 0.4s ease;
border-radius: 999px;
}
/* ============================================================
SIDEBAR
Fixed left drawer. Glassmorphism. Slides via transform for
smooth 60fps transition. Hidden by default; `body.has-sidebar`
opens it. On desktop it pushes the main column right; on
mobile it overlays with a backdrop scrim.
============================================================ */
.sidebar {
position: fixed;
top: 64px;
left: 0;
bottom: 0;
width: 288px;
background: color-mix(in srgb, var(--bg-color) 72%, transparent);
border-right: 1px solid var(--border);
transform: translateX(-100%);
transition: transform 0.3s ease, background 0.3s ease;
z-index: 100;
pointer-events: auto !important;
overflow-y: auto;
overscroll-behavior: contain;
}
body.has-sidebar .sidebar { transform: translateX(0); }
.sidebar-inner { padding: 20px 16px 40px; }
.sidebar-heading {
font-size: 0.72rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 8px 10px 14px;
}
.sidebar-module {
margin-bottom: 4px;
border-radius: var(--radius-sm);
overflow: hidden;
}
.sidebar-module-header {
width: 100%;
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--text-main);
font-family: inherit;
font-size: 0.88rem;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: var(--transition);
letter-spacing: -0.01em;
}
.sidebar-module-header:hover { background: var(--surface-hover); color: var(--accent-color); }
.sidebar-module-header.locked { opacity: 0.5; cursor: not-allowed; }
.sidebar-module-header.locked:hover { background: transparent; color: var(--text-main); }
.sidebar-module-num {
width: 24px; height: 24px;
flex-shrink: 0;
border-radius: 6px;
background: var(--accent-soft);
color: var(--accent-color);
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.72rem;
font-weight: 700;
}
.sidebar-module-title { flex: 1; }
.sidebar-module-chevron {
width: 14px; height: 14px;
color: var(--text-muted);
transition: transform 0.3s ease;
flex-shrink: 0;
}
.sidebar-module.expanded .sidebar-module-chevron { transform: rotate(90deg); }
.sidebar-module-classes {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.sidebar-module.expanded .sidebar-module-classes { max-height: 500px; }
.sidebar-class {
display: block;
padding: 8px 12px 8px 48px;
margin: 2px 0;
color: var(--text-muted);
font-size: 0.84rem;
border-radius: var(--radius-sm);
border-left: 2px solid transparent;
text-decoration: none;
transition: var(--transition);
letter-spacing: -0.005em;
}
.sidebar-class:hover {
background: var(--surface-hover);
color: var(--accent-color);
text-decoration: none;
}
.sidebar-class.active {
background: var(--accent-soft);
color: var(--accent-color);
border-left-color: var(--accent-color);
font-weight: 600;
}
.sidebar-class.locked { opacity: 0.45; pointer-events: none; }
.sidebar-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
z-index: 85;
}
body.has-sidebar .sidebar-overlay { opacity: 1; pointer-events: auto; }
/* Desktop: sidebar pushes the main column and hides the scrim.
Padding-left must clear the sidebar's full footprint:
20px (left offset) + 300px (width) + 20px (right gap) = 340px.
Navbar is position:fixed + translateX(-50%), centered on the whole
viewport by default — push it right by half the sidebar's footprint
so it doesn't overlap the sidebar on wide screens. */
@media (min-width: 1024px) {
body.has-sidebar .main { padding-left: 340px; transition: padding-left 0.3s ease; }
body.has-sidebar .sidebar-overlay { display: none; }
[data-theme='dark'] body.has-sidebar .navbar {
left: calc(50% + 170px);
max-width: min(1180px, calc(100vw - 380px));
}
}
@media (max-width: 1023px) {
/* On mobile the sidebar always overlays — never push content */
.sidebar { width: 86vw; max-width: 320px; }
}
/* Active state for sidebar toggle button */
#sidebar-toggle.is-active {
background: var(--accent-color);
color: white;
border-color: var(--accent-color);
}
#sidebar-toggle.is-active:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: white; }
/* ============================================================
PRESENTATION MODE — Vertical scroll deck
Each .section is a 100vh slide that snaps to top as you scroll.
Non-focused slides fade to 20% for step-by-step reveal.
Pure midnight, massive type, no chrome.
============================================================ */
/* Present toggle active state */
#present-toggle.is-active {
background: var(--accent-color);
color: white;
border-color: var(--accent-color);
}
#present-toggle.is-active:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: white; }
/* Floating exit × */
.present-exit {
display: none;
position: fixed; top: 20px; right: 20px;
width: 44px; height: 44px;
align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
z-index: 2000;
transition: all 0.3s ease;
font-size: 1.3rem; line-height: 1;
font-family: inherit;
}
.present-exit:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
transform: scale(1.05);
}
body.presentation-mode .present-exit { display: inline-flex; }
/* Force Midnight theme — pure white on pure black, projector-proof */
body.presentation-mode {
--bg-color: #000000 !important;
--surface: #000000 !important;
--surface-raised: #0a0a0a !important;
--surface-hover: #111111 !important;
--border: #1f1f1f !important;
--border-strong: #3a3a3a !important;
--text-main: #ffffff !important;
--text-heading: #ffffff !important;
--text-muted: #a3a3a3 !important;
--accent-color: #a5b4fc !important;
--accent-hover: #c7d2fe !important;
--accent-soft: rgba(165, 180, 252, 0.12) !important;
--accent-glow: rgba(165, 180, 252, 0.55) !important;
--info-soft: rgba(56, 189, 248, 0.15) !important;
--success-soft: rgba(52, 211, 153, 0.15) !important;
--danger-soft: rgba(248, 113, 113, 0.15) !important;
--bg-mesh: none !important;
background: #000 !important;
color: #fff !important;
font-size: 40px;
line-height: 1.5;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
/* Vertical scroll-snap — each section snaps to the top */
scroll-snap-type: y mandatory;
}
body.presentation-mode::before { display: none; }
/* Hide chrome */
body.presentation-mode .navbar,
body.presentation-mode .sidebar,
body.presentation-mode .sidebar-overlay,
body.presentation-mode .footer,
body.presentation-mode .search-box,
body.presentation-mode .breadcrumb,
body.presentation-mode .class-nav,
body.presentation-mode .resources-section,
body.presentation-mode .progress-wrap,
body.presentation-mode .presentation-hint { display: none !important; }
body.presentation-mode.has-sidebar .main { padding-left: 0 !important; }
body.presentation-mode .main {
padding: 0 !important;
min-height: 100vh;
}
body.presentation-mode .container {
max-width: 1200px;
padding: 0 6vw;
margin: 0 auto;
}
/* Each slide = full viewport, scroll-snapped */
body.presentation-mode .class-header,
body.presentation-mode .section {
min-height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 !important;
padding: 8vh 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
/* Full-opacity slides — scroll-snap already isolates one per viewport */
opacity: 1;
}
/* Section internals */
body.presentation-mode .section { overflow: visible; }
body.presentation-mode .section-header {
padding: 0 0 28px 0;
cursor: default;
background: transparent !important;
border: none !important;
display: block;
}
body.presentation-mode .section-header:hover { background: transparent; }
body.presentation-mode .section-body {
display: block !important;
padding: 0 !important;
}
body.presentation-mode .section-toggle { display: none; }
/* Class header (first slide) */
body.presentation-mode .class-header { text-align: left; }
body.presentation-mode .class-header .back { display: none; }
/* ========== MASSIVE TYPOGRAPHY ========== */
body.presentation-mode .class-header h1,
body.presentation-mode .section-title {
font-size: 80px;
letter-spacing: -0.03em;
line-height: 1.05;
font-weight: 700;
color: #ffffff !important;
}
body.presentation-mode .section-title {
display: flex; align-items: center; gap: 20px;
}
body.presentation-mode .class-header .class-subtitle {
font-size: 30px;
margin-top: 24px;
color: rgba(255, 255, 255, 0.7) !important;
}
body.presentation-mode .section-body p,
body.presentation-mode .section-body li {
font-size: 40px;
line-height: 1.4;
color: #ffffff !important;
}
body.presentation-mode .section-body h4 {
font-size: 52px;
margin: 32px 0 20px;
line-height: 1.1;
color: var(--accent-color) !important;
}
body.presentation-mode .section-body strong { color: #ffffff !important; font-weight: 700; }
body.presentation-mode .section-body ul,
body.presentation-mode .section-body ol { padding-left: 44px; }
body.presentation-mode .section-body pre,
body.presentation-mode .section-body code { font-size: 28px; }
body.presentation-mode .section-body pre { padding: 24px 28px; line-height: 1.45; }
body.presentation-mode .section-icon { font-size: 64px; }
/* Quizzes */
body.presentation-mode .quiz-item {
padding: 36px 40px;
border-radius: 20px;
margin-bottom: 24px;
}
body.presentation-mode .quiz-q { font-size: 40px; margin-bottom: 24px; }
body.presentation-mode .quiz-options { padding-left: 44px; }
body.presentation-mode .quiz-options li { font-size: 34px; margin-bottom: 10px; }
body.presentation-mode .quiz-reveal { font-size: 24px; padding: 16px 32px; border-radius: 12px; }
body.presentation-mode .quiz-answer { font-size: 32px; line-height: 1.4; }
body.presentation-mode .quiz-answer.visible { max-height: 3000px; padding: 28px 32px; }
body.presentation-mode .quiz-answer .quiz-why li { font-size: 26px; padding-left: 18px; }
/* Callouts */
body.presentation-mode .info-box,
body.presentation-mode .example-box,
body.presentation-mode .case-study,
body.presentation-mode .discussion-box {
font-size: 34px;
padding: 28px 36px;
border-radius: 12px;
line-height: 1.4;
}
/* Home + module page fallbacks (rare — used only if toggled outside a class) */
body.presentation-mode .hero h1 { font-size: 96px; }
body.presentation-mode .hero .subtitle { font-size: 36px; }
body.presentation-mode .module-card h3 { font-size: 36px; }
body.presentation-mode .class-card h4 { font-size: 32px; }
/* Bottom spacer so the last section can snap fully to the top */
body.presentation-mode #app-container::after {
content: ''; display: block; height: 50vh;
}
/* ============================================================
CYBER-SURGICAL LAB CONTAINER
Houses the Three.js canvas. Fixed-position full-viewport overlay.
z-index: 50 → above content (0), below sidebar (90) and navbar (100),
so navigation chrome stays reachable while the lab is active.
============================================================ */
#lab-container {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
z-index: 50;
background: var(--bg-color);
display: flex;
align-items: center;
justify-content: center;
/* overflow allowed so hologram/label overlays can extend beyond
the lab viewport without being clipped */
}
#lab-container canvas {
display: block;
width: 100vw !important;
height: 100vh !important;
position: absolute;
top: 0; left: 0;
z-index: 1; /* behind the UI cockpit */
}
/* ============================================================
UI COCKPIT — single framed overlay that contains every lab
UI element (HUD, mission, tray, hologram, labeler, etc).
Children keep their own absolute positioning but are now
constrained to a 1600-wide, 32×48-padded frame so they never
drift to the corners of ultra-wide monitors.
============================================================ */
#ui-cockpit {
position: fixed;
inset: 0;
max-width: 1600px;
margin: 0 auto;
padding: 32px 48px;
pointer-events: none;
z-index: 100;
}
/* Re-enable clicks/drags on interactive children.
#ui-cockpit itself has pointer-events: none so the navbar/sidebar
underneath stay clickable; only the actual lab UI children opt back in. */
#ui-cockpit .lab-hud,
#ui-cockpit .lab-mission,
#ui-cockpit .surgical-tray,
#ui-cockpit .lab-hologram,
#ui-cockpit .lab-data-lake,
#ui-cockpit .lab-labeler,
#ui-cockpit .lab-prediction-label,
#ui-cockpit .lab-templates,
#ui-cockpit .xray-label { pointer-events: auto; }
/* Re-anchor formerly-viewport-relative overlays to the cockpit frame.
They kept absolute positioning; the cockpit is their new parent. */
#ui-cockpit .lab-hud { top: 0; left: 0; }
#ui-cockpit .lab-mission { top: 0; left: 50%; transform: translateX(-50%); }
#ui-cockpit .surgical-tray { bottom: 0; left: 50%; transform: translateX(-50%); }
/* Templates panel — moved out of the top-left (was overlapping HUD)
to bottom-left above the tray. */
#ui-cockpit .lab-templates {
top: auto;
bottom: 120px;
left: 0;
background: rgba(11, 7, 34, 0.92) !important;
pointer-events: auto;
}
/* Telemetry stream — faint scrolling log at right-middle, bridges
the vertical gap between HUD and tray. Opacity 0.1, no input. */
.lab-telemetry {
position: absolute;
right: 24px;
top: 20%;
bottom: 20%;
width: 280px;
max-width: 22vw;
overflow: hidden;
opacity: 0.1;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
line-height: 1.7;
color: var(--aurora-1);
pointer-events: none;
user-select: none;
z-index: 2;
mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.lab-telemetry::before,
.lab-telemetry::after { /* purely decorative */ }
.lab-telemetry-row { white-space: nowrap; letter-spacing: 0.05em; }
.lab-telemetry {
animation: telemetryScroll 40s linear infinite;
}
@keyframes telemetryScroll {
from { transform: translateY(0); }
to { transform: translateY(-50%); } /* second copy seamlessly loops */
}
/* Scenario-active viewport vignette — darkens the edges so the
student's eye goes to the central "broken" area. */
#lab-container.is-scenario-active::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background: radial-gradient(
ellipse at center,
transparent 35%,
rgba(7, 4, 26, 0.55) 80%,
rgba(7, 4, 26, 0.80) 100%);
animation: vignettePulse 5s ease-in-out infinite;
}
@keyframes vignettePulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1.00; }
}
@media (prefers-reduced-motion: reduce) {
.lab-telemetry { animation: none; }
#lab-container.is-scenario-active::after { animation: none; }
}
/* Z-index sync for the site-wide background system */
.aurora-bg { z-index: 0; }
.aurora-bg::before,
.aurora-bg::after { z-index: 1; }
body > :not(.aurora-bg):not(#lab-container) { z-index: 2; }
/* Presentation-mode line-height polish for projector legibility */
body.presentation-mode .section-body p,
body.presentation-mode .section-body li,
body.presentation-mode .class-header .class-subtitle {
line-height: 1.6 !important;
}
.lab-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 40px;
text-align: center;
color: var(--text-muted);
}
.lab-placeholder h2 {
font-size: 1.8rem;
color: var(--text-heading);
letter-spacing: -0.02em;
font-weight: 700;
}
.lab-placeholder p { font-size: 0.95rem; max-width: 520px; }
.lab-placeholder .lab-hint {
font-size: 0.8rem;
color: var(--text-muted);
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
/* Lab HUD — Vital Signs monitor in the top-left corner */
.lab-hud {
position: absolute;
top: 16px;
left: max(20px, calc(50vw - 700px)); /* center-weight on ultra-wide */
padding: 10px 14px;
background: rgba(0, 0, 0, 0.72);
border: 1px solid rgba(0, 242, 255, 0.32);
border-radius: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
color: #00f2ff;
z-index: 10;
user-select: none;
transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
pointer-events: none;
min-width: 260px;
}
.lab-hud.is-failure {
border-color: rgba(255, 48, 96, 0.65);
color: #ff3060;
box-shadow: 0 0 24px rgba(255, 48, 96, 0.35);
animation: labAlertPulse 0.8s ease-in-out infinite;
}
@keyframes labAlertPulse {
0%, 100% { box-shadow: 0 0 24px rgba(255, 48, 96, 0.35); }
50% { box-shadow: 0 0 40px rgba(255, 48, 96, 0.6); }
}
.hud-label {
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(0, 242, 255, 0.7);
margin-bottom: 6px;
text-transform: uppercase;
}
.lab-hud.is-failure .hud-label { color: rgba(255, 48, 96, 0.75); }
.hud-ekg {
display: block;
width: 100%;
height: 56px;
}
.hud-stats {
display: flex;
justify-content: space-between;
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed rgba(255, 255, 255, 0.08);
font-size: 12px;
letter-spacing: 0.06em;
}
.hud-status { opacity: 0.7; }
.hud-status.is-connected {
color: #2de6ff;
opacity: 1;
text-shadow: 0 0 8px rgba(45, 230, 255, 0.55);
letter-spacing: 0.12em;
}
/* Telemetry rows — Accuracy / Latency / Integrity */
.hud-row {
display: grid;
grid-template-columns: 76px 1fr 56px;
align-items: center;
gap: 10px;
margin-top: 8px;
font-size: 11px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.hud-row-label {
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hud-row-bar {
height: 6px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
overflow: hidden;
}
.hud-row-fill {
height: 100%; width: 0%;
border-radius: 999px;
transition: width 0.35s ease, background 0.35s ease;
box-shadow: 0 0 8px currentColor;
}
.hud-row-value {
color: #fff;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Training Phase — progress bar, status, performance report */
.hud-training {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed rgba(0, 242, 255, 0.2);
display: none;
}
.hud-training.is-active { display: block; }
.hud-training-label {
font-size: 10px;
color: #00f2ff;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 8px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.hud-training.is-training .hud-training-label { animation: trainingPulse 1s ease-in-out infinite; }
@keyframes trainingPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
.hud-training.is-complete .hud-training-label { color: #10b981; animation: none; }
.hud-training-bar {
height: 6px;
background: rgba(0, 242, 255, 0.06);
border: 1px solid rgba(0, 242, 255, 0.2);
border-radius: 999px;
overflow: hidden;
}
.hud-training-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, #00f2ff, #bd00ff);
box-shadow: 0 0 10px #00f2ff;
border-radius: 999px;
}
.hud-training.is-complete .hud-training-fill {
background: linear-gradient(90deg, #33ff00, #10b981);
box-shadow: 0 0 14px #10b981;
}
.hud-training-report {
display: none;
margin-top: 10px;
font-size: 11px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.hud-training.is-complete .hud-training-report { display: block; animation: reportReveal 0.5s ease-out; }
@keyframes reportReveal {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.hud-training-report-row {
display: flex; justify-content: space-between;
padding: 3px 0;
color: rgba(255, 255, 255, 0.7);
}
.hud-training-report-row strong {
color: #33ff00;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* CRASH STATE — HUD appearance when a block is amputated mid-training */
.hud-training.is-crash {
animation: crashShake 0.35s cubic-bezier(.36,.07,.19,.97);
}
@keyframes crashShake {
0%, 100% { transform: translateX(0); }
10%, 90% { transform: translateX(-2px); }
20%, 80% { transform: translateX(3px); }
30%, 50%, 70% { transform: translateX(-5px); }
40%, 60% { transform: translateX(5px); }
}
.hud-training.is-crash .hud-training-label {
color: #ff3060;
animation: crashFlicker 0.14s steps(2) infinite;
}
@keyframes crashFlicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.hud-training.is-crash .hud-training-fill {
background: linear-gradient(90deg, #ff3060, #ff0040);
box-shadow: 0 0 14px #ff3060;
width: 100% !important;
}
.hud-training.is-crash .hud-training-report strong { color: #ff3060 !important; }
/* Full-screen glitch effect on #lab-container for 0.5s */
#lab-container.is-glitching {
animation: labGlitchEffect 0.5s steps(10, end);
}
@keyframes labGlitchEffect {
0% { filter: none; transform: translate(0, 0); }
8% { filter: hue-rotate(80deg) contrast(1.6) saturate(2); transform: translate(-4px, 2px); }
16% { filter: hue-rotate(-110deg) saturate(2.5); transform: translate(5px, -3px); }
24% { filter: brightness(2) contrast(2.2) hue-rotate(30deg); transform: translate(-6px, 0); }
32% { filter: invert(0.4) hue-rotate(180deg); transform: translate(3px, 4px); }
40% { filter: none; transform: translate(-3px, -1px); }
48% { filter: hue-rotate(50deg) saturate(3) contrast(1.3); transform: translate(4px, 0); }
56% { filter: contrast(3) brightness(0.6); transform: translate(-2px, 2px); }
64% { filter: hue-rotate(-140deg); transform: translate(3px, -1px); }
72% { filter: saturate(0) brightness(1.3); transform: translate(-1px, 2px); }
80% { filter: hue-rotate(40deg) contrast(1.5); transform: translate(2px, -2px); }
100% { filter: none; transform: translate(0, 0); }
}
/* HUD green flash on successful training completion */
.lab-hud.is-success {
border-color: #10b981 !important;
animation: hudSuccessPulse 1.6s ease-in-out;
}
@keyframes hudSuccessPulse {
0% { box-shadow: 0 0 24px rgba(16, 185, 129, 0.3); }
40% { box-shadow: 0 0 52px rgba(16, 185, 129, 0.8); }
100% { box-shadow: 0 0 24px rgba(16, 185, 129, 0.0); }
}
.hud-accuracy-fill { background: linear-gradient(90deg, #33ff00, #00f2ff); color: #33ff00; }
.hud-accuracy-fill.poor { background: linear-gradient(90deg, #ff3060, #ff9d00); color: #ff3060; }
.hud-latency-fill { background: linear-gradient(90deg, #00f2ff, #bd00ff); color: #00f2ff; }
.hud-latency-fill.slow { background: linear-gradient(90deg, #ffcc00, #ff9d00); color: #ffcc00; }
.hud-integrity-fill { background: linear-gradient(90deg, #33ff00, #00f2ff); color: #33ff00; }
.hud-integrity-fill.degraded { background: linear-gradient(90deg, #ff3060, #ff9d00); color: #ff3060; }
.lab-hud.is-failure .hud-row-fill { background: #ff3060 !important; color: #ff3060; }
.lab-hud.is-failure .hud-row-value { color: #ff3060; }
/* Compute Power meter below the EKG */
.hud-compute {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.hud-compute-label {
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 6px;
display: flex;
justify-content: space-between;
}
.hud-compute-label .hud-compute-pct { color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.hud-compute-bar {
height: 6px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
overflow: hidden;
}
.hud-compute-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #33ff00, #00f2ff);
border-radius: 999px;
transition: width 0.35s ease, background 0.35s ease;
box-shadow: 0 0 8px currentColor;
}
.hud-compute-fill.warning { background: linear-gradient(90deg, #ffcc00, #ff9d00); }
.hud-compute-fill.danger { background: linear-gradient(90deg, #ff3060, #ff0040); }
/* Lab keyboard hint at bottom */
.lab-hint-bar {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 6px 18px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
color: rgba(255, 255, 255, 0.55);
font-size: 12px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.06em;
z-index: 10;
user-select: none;
pointer-events: none;
}
.lab-hint-bar kbd {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 1px 7px;
border-radius: 4px;
margin: 0 2px;
font-size: 11px;
color: #fff;
}
/* Surgical Tray — HTML dock at bottom for spawning blocks */
.surgical-tray {
position: absolute;
bottom: 60px; /* lifted +20px into primary field */
left: 50%;
transform: translateX(-50%);
max-width: min(92vw, 1400px); /* center-weight on ultra-wide */
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
grid-auto-columns: minmax(52px, 62px);
gap: 6px 8px;
padding: 12px 16px;
max-width: 92vw;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
z-index: 10;
user-select: none;
}
.tray-slot {
all: unset;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 6px 4px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
transition: all 0.25s ease;
}
.tray-slot:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--tray-color, #fff);
transform: translateY(-3px);
box-shadow: 0 8px 24px var(--tray-glow, rgba(255, 255, 255, 0.2));
}
.tray-slot:active { transform: translateY(-1px) scale(0.97); }
.tray-icon {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--tray-color, #fff);
box-shadow: 0 0 14px var(--tray-glow, rgba(255, 255, 255, 0.5)),
inset 0 2px 4px rgba(255, 255, 255, 0.3);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
filter: saturate(1.3);
}
.tray-label {
font-size: 8.5px;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.72);
font-family: 'JetBrains Mono', ui-monospace, monospace;
text-transform: uppercase;
white-space: nowrap;
}
.tray-slot:hover .tray-label { color: #fff; }
/* X-Ray holographic hover label above 3D blocks */
.xray-label {
position: absolute;
pointer-events: none;
transform: translate(-50%, -100%);
padding: 10px 16px;
background: rgba(0, 0, 0, 0.78);
border: 1px solid rgba(0, 242, 255, 0.5);
border-radius: 10px;
color: #fff;
font-family: 'JetBrains Mono', ui-monospace, monospace;
white-space: nowrap;
z-index: 12;
box-shadow: 0 0 24px rgba(0, 242, 255, 0.3);
opacity: 0;
transition: opacity 0.2s ease;
user-select: none;
margin-top: -10px;
}
.xray-label.is-visible { opacity: 1; }
.xray-label::after {
content: '';
position: absolute;
bottom: -6px; left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px; height: 10px;
background: rgba(0, 0, 0, 0.78);
border-right: 1px solid rgba(0, 242, 255, 0.5);
border-bottom: 1px solid rgba(0, 242, 255, 0.5);
}
.xray-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
color: #00f2ff;
margin-bottom: 3px;
}
.xray-subtitle {
font-size: 10px;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.7);
}
/* ============================================================
TEMPLATES — quick-start pipeline scaffolds
============================================================ */
.lab-templates {
position: absolute;
top: 80px;
left: 20px;
width: 220px;
padding: 12px 14px;
background: rgba(0, 0, 0, 0.72);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
color: #fff;
z-index: 10;
user-select: none;
}
.lab-templates-label {
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
margin-bottom: 8px;
}
.lab-template-btn {
all: unset;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 10px;
margin-bottom: 5px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
font-size: 12px;
font-family: inherit;
color: rgba(255, 255, 255, 0.85);
transition: all 0.25s ease;
}
.lab-template-btn:hover {
background: rgba(189, 0, 255, 0.12);
border-color: rgba(189, 0, 255, 0.4);
color: #fff;
}
/* ============================================================
NESTED / DEEP-SURGERY view
============================================================ */
.lab-nested-panel {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 380px;
padding: 24px 28px;
background: rgba(5, 8, 18, 0.94);
border: 1px solid rgba(0, 242, 255, 0.42);
border-radius: 16px;
box-shadow: 0 0 50px rgba(0, 242, 255, 0.35), 0 30px 60px rgba(0, 0, 0, 0.6);
color: #fff;
font-family: 'JetBrains Mono', ui-monospace, monospace;
z-index: 25;
display: none;
}
.lab-nested-panel.is-open {
display: block;
animation: nestedReveal 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes nestedReveal {
from { opacity: 0; transform: translate(-50%, -48%) scale(0.92); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.lab-nested-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(0, 242, 255, 0.2);
}
.lab-nested-title-group .nested-type {
font-size: 10px; letter-spacing: 0.22em;
color: rgba(0, 242, 255, 0.7);
text-transform: uppercase;
}
.lab-nested-title-group .nested-name {
font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
color: #fff; margin-top: 3px;
}
.lab-nested-close {
all: unset; cursor: pointer;
color: rgba(255, 255, 255, 0.55);
font-size: 18px; padding: 4px 8px; border-radius: 4px;
}
.lab-nested-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nested-ports {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; margin-bottom: 14px;
}
.nested-port-col {
padding: 8px 10px;
background: rgba(255, 255, 255, 0.04);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.nested-port-col h5 {
font-size: 9px; letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase; margin-bottom: 6px;
}
.nested-port-chip {
display: inline-block;
padding: 2px 8px;
margin: 2px 2px 2px 0;
background: rgba(0, 242, 255, 0.14);
border: 1px solid rgba(0, 242, 255, 0.3);
border-radius: 999px;
font-size: 10px;
color: #00f2ff;
letter-spacing: 0.04em;
}
.nested-section {
margin-top: 12px;
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
}
.nested-section h5 {
font-size: 9px; letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase; margin-bottom: 6px;
}
.nested-subnode {
display: flex; justify-content: space-between;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px;
margin-bottom: 4px;
}
.nested-subnode .subnode-name { color: rgba(255, 255, 255, 0.78); }
.nested-subnode .subnode-val { color: #00f2ff; font-variant-numeric: tabular-nums; }
.lab-nested-hint {
margin-top: 12px;
font-size: 10px;
color: rgba(255, 255, 255, 0.45);
text-align: center;
}
.lab-nested-hint kbd {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
color: #fff;
}
/* Close/Zoom-Out button shown while a block is expanded */
.lab-close-expansion {
display: none;
position: fixed;
top: 76px;
right: 20px;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(0, 0, 0, 0.72);
border: 1px solid rgba(0, 242, 255, 0.45);
border-radius: 999px;
color: #00f2ff;
cursor: pointer;
z-index: 26;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: all 0.25s ease;
user-select: none;
box-shadow: 0 0 20px rgba(0, 242, 255, 0.25);
}
.lab-close-expansion:hover {
background: rgba(0, 242, 255, 0.15);
color: #fff;
transform: scale(1.04);
}
body.lab-expanded .lab-close-expansion { display: inline-flex; }
.lab-close-expansion svg { width: 14px; height: 14px; }
body.lab-presenting .lab-close-expansion { display: none !important; }
/* ============================================================
DATA LAKE — right-side HTML panel for dataset selection
============================================================ */
.lab-data-lake {
position: absolute;
top: 80px;
right: 20px;
width: 240px;
padding: 14px 16px;
background: rgba(0, 0, 0, 0.72);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
color: #fff;
z-index: 10;
user-select: none;
}
.lab-data-lake-label {
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
margin-bottom: 10px;
}
.lab-dataset-btn {
all: unset;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
margin-bottom: 6px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
font-size: 12px;
font-family: inherit;
color: rgba(255, 255, 255, 0.85);
transition: all 0.25s ease;
}
.lab-dataset-btn:hover {
background: rgba(0, 242, 255, 0.08);
border-color: rgba(0, 242, 255, 0.35);
color: #fff;
}
.lab-dataset-btn.is-active {
background: rgba(0, 242, 255, 0.14);
border-color: #00f2ff;
color: #00f2ff;
}
.lab-dataset-icon { font-size: 16px; }
.lab-data-lake-stats {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
font-size: 10px;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.04em;
}
.lab-data-lake-stats .stat-row {
display: flex; justify-content: space-between;
padding: 2px 0;
}
.lab-data-lake-stats strong { color: #00f2ff; font-variant-numeric: tabular-nums; }
.lab-open-labeler {
all: unset;
display: block;
width: 100%;
text-align: center;
margin-top: 12px;
padding: 8px 0;
background: linear-gradient(90deg, #00f2ff22, #bd00ff22);
border: 1px solid rgba(0, 242, 255, 0.5);
border-radius: 8px;
color: #00f2ff;
font-family: inherit;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s ease;
}
.lab-open-labeler:hover {
background: linear-gradient(90deg, #00f2ff44, #bd00ff44);
color: #fff;
}
.lab-open-labeler:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ============================================================
LABELING STATION — centered modal overlay
============================================================ */
.lab-labeler {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 400px;
padding: 28px 32px;
background: rgba(10, 10, 20, 0.94);
border: 1px solid rgba(0, 242, 255, 0.35);
border-radius: 16px;
z-index: 20;
color: #fff;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
font-family: 'JetBrains Mono', ui-monospace, monospace;
display: none;
}
.lab-labeler.is-open { display: block; animation: labelerReveal 0.35s ease-out; }
@keyframes labelerReveal {
from { opacity: 0; transform: translate(-50%, -48%) scale(0.94); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.lab-labeler-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 20px;
}
.lab-labeler-title {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.lab-labeler-close {
all: unset;
cursor: pointer;
color: rgba(255, 255, 255, 0.55);
font-size: 16px;
padding: 2px 6px;
border-radius: 4px;
}
.lab-labeler-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.lab-labeler-item {
text-align: center;
padding: 32px 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
margin-bottom: 16px;
}
.lab-labeler-icon { font-size: 44px; margin-bottom: 10px; }
.lab-labeler-name {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
}
.lab-labeler-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.lab-labeler-btn {
all: unset;
cursor: pointer;
padding: 14px 0;
text-align: center;
border-radius: 10px;
border: 2px solid;
font-family: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
transition: all 0.2s ease;
}
.lab-labeler-btn.class-a {
border-color: #00d2ff;
color: #00d2ff;
background: rgba(0, 210, 255, 0.05);
}
.lab-labeler-btn.class-b {
border-color: #bd00ff;
color: #bd00ff;
background: rgba(189, 0, 255, 0.05);
}
.lab-labeler-btn:hover { transform: translateY(-2px); filter: brightness(1.4); }
.lab-labeler-btn:active { transform: translateY(0); }
.lab-labeler-progress {
margin-top: 14px;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
text-align: center;
letter-spacing: 0.06em;
}
.lab-labeler-progress strong { color: #00f2ff; font-variant-numeric: tabular-nums; }
/* ============================================================
LIVE INFERENCE — drag-drop zone + prediction label
============================================================ */
#lab-container.is-drop-target {
box-shadow: inset 0 0 0 3px rgba(0, 242, 255, 0.5);
}
#lab-container.is-drop-target::after {
content: 'Drop image to run inference';
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
padding: 20px 32px;
background: rgba(0, 242, 255, 0.15);
border: 2px dashed #00f2ff;
border-radius: 16px;
color: #00f2ff;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 14px;
letter-spacing: 0.12em;
z-index: 30;
pointer-events: none;
}
.lab-prediction-label {
position: absolute;
pointer-events: none;
transform: translate(-50%, -100%);
padding: 14px 22px;
background: rgba(10, 10, 20, 0.95);
border: 2px solid #33ff00;
border-radius: 12px;
color: #fff;
font-family: 'JetBrains Mono', ui-monospace, monospace;
z-index: 14;
box-shadow: 0 0 32px rgba(51, 255, 0, 0.5);
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
margin-top: -14px;
}
.lab-prediction-label.is-visible { opacity: 1; animation: predictionReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes predictionReveal {
0% { transform: translate(-50%, -100%) scale(0.6); opacity: 0; }
60% { transform: translate(-50%, -100%) scale(1.1); opacity: 1; }
100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}
.lab-prediction-title {
font-size: 11px;
letter-spacing: 0.2em;
color: rgba(51, 255, 0, 0.7);
text-transform: uppercase;
margin-bottom: 4px;
}
.lab-prediction-class {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
}
.lab-prediction-confidence {
font-size: 11px;
color: rgba(255, 255, 255, 0.65);
margin-top: 3px;
}
/* Remote Qwen hologram — floating inference response panel */
.lab-hologram {
position: absolute;
left: 50%;
top: 14%;
transform: translate(-50%, 0) perspective(900px) rotateX(6deg);
min-width: 360px;
max-width: 560px;
padding: 18px 24px 16px;
background: linear-gradient(180deg, rgba(8, 22, 30, 0.86), rgba(5, 14, 20, 0.78));
border: 1px solid rgba(45, 230, 255, 0.55);
border-radius: 14px;
color: #d7fbff;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
line-height: 1.55;
letter-spacing: 0.02em;
box-shadow:
0 0 42px rgba(45, 230, 255, 0.35),
inset 0 0 24px rgba(45, 230, 255, 0.12);
z-index: 16;
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
.lab-hologram::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(45, 230, 255, 0.08) 0px,
rgba(45, 230, 255, 0.08) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: screen;
pointer-events: none;
animation: hologramScan 3.6s linear infinite;
}
.lab-hologram.is-visible {
opacity: 1;
transform: translate(-50%, 0) perspective(900px) rotateX(0deg);
}
.lab-hologram.is-error {
border-color: rgba(255, 180, 60, 0.55);
box-shadow:
0 0 42px rgba(255, 180, 60, 0.3),
inset 0 0 24px rgba(255, 180, 60, 0.12);
color: #ffe7b3;
}
.lab-hologram-title {
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(45, 230, 255, 0.85);
margin-bottom: 8px;
}
.lab-hologram.is-error .lab-hologram-title { color: rgba(255, 180, 60, 0.9); }
.lab-hologram-body {
white-space: pre-wrap;
word-break: break-word;
}
.lab-hologram-meta {
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed rgba(45, 230, 255, 0.25);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(215, 251, 255, 0.55);
}
.lab-hologram.is-error .lab-hologram-meta {
border-top-color: rgba(255, 180, 60, 0.25);
color: rgba(255, 231, 179, 0.6);
}
@keyframes hologramScan {
0% { background-position: 0 0; }
100% { background-position: 0 48px; }
}
/* Validation error tooltip — red holographic tag */
.lab-error-tooltip {
position: absolute;
padding: 10px 16px;
background: rgba(255, 48, 96, 0.14);
border: 1px solid #ff3060;
border-radius: 10px;
color: #ff3060;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
box-shadow: 0 0 30px rgba(255, 48, 96, 0.45);
white-space: nowrap;
z-index: 15;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -100%);
transition: opacity 0.25s ease;
margin-top: -12px;
user-select: none;
}
.lab-error-tooltip.is-visible { opacity: 1; animation: errorTooltipPulse 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.lab-error-tooltip::after {
content: '';
position: absolute;
bottom: -6px; left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px; height: 10px;
background: rgba(255, 48, 96, 0.14);
border-right: 1px solid #ff3060;
border-bottom: 1px solid #ff3060;
}
@keyframes errorTooltipPulse {
0% { transform: translate(-50%, -100%) scale(0.85); }
35% { transform: translate(-50%, -100%) scale(1.1); }
55% { transform: translate(calc(-50% - 6px), -100%) scale(1.05); }
70% { transform: translate(calc(-50% + 6px), -100%) scale(1.02); }
100% { transform: translate(-50%, -100%) scale(1); }
}
/* Mission overlay — top center */
.lab-mission {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
padding: 8px 22px;
background: rgba(0, 0, 0, 0.58);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
color: rgba(255, 255, 255, 0.78);
font-size: 13px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
z-index: 11;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
pointer-events: none;
user-select: none;
}
.lab-mission.is-complete {
background: rgba(16, 185, 129, 0.2);
border-color: #10b981;
color: #10b981;
box-shadow: 0 0 28px rgba(16, 185, 129, 0.55);
}
.lab-mission.is-flash {
animation: missionPop 0.9s ease-out;
}
@keyframes missionPop {
0% { transform: translateX(-50%) scale(1); }
45% { transform: translateX(-50%) scale(1.18); box-shadow: 0 0 64px rgba(16, 185, 129, 0.9); }
100% { transform: translateX(-50%) scale(1); }
}
/* ============================================================
AURORA HUD + MISSION TRACKER (dark mode / lab)
Frosted-glass violet panel instead of cyan console overlay.
Keeps the is-failure / is-complete state visuals, re-tinted.
============================================================ */
[data-theme='dark'] .lab-hud {
background: rgba(11, 7, 34, 0.55);
border: 1px solid var(--glass-edge);
border-radius: 16px;
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
color: var(--text-main);
padding: 14px 18px;
}
[data-theme='dark'] .hud-label {
color: var(--text-muted);
font-family: 'JetBrains Mono', monospace;
}
[data-theme='dark'] .hud-value {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 500;
color: var(--text-main);
}
[data-theme='dark'] .hud-status { color: var(--text-muted); }
[data-theme='dark'] .hud-status.is-connected {
color: var(--aurora-1);
text-shadow: 0 0 10px rgba(94, 234, 212, 0.55);
}
[data-theme='dark'] .hud-ekg { color: var(--aurora-3); }
[data-theme='dark'] .hud-stats {
border-top-color: var(--glass-edge);
}
[data-theme='dark'] .hud-row-label { color: var(--text-muted); }
[data-theme='dark'] .hud-row-bar {
background: rgba(255, 255, 255, 0.05);
border-color: var(--glass-edge);
}
/* Row fills pick up aurora colors — teal / violet / pink per row order */
[data-theme='dark'] .hud-row:nth-of-type(1) .hud-row-fill { background: var(--aurora-1); color: var(--aurora-1); }
[data-theme='dark'] .hud-row:nth-of-type(2) .hud-row-fill { background: var(--aurora-3); color: var(--aurora-3); }
[data-theme='dark'] .hud-row:nth-of-type(3) .hud-row-fill { background: var(--aurora-4); color: var(--aurora-4); }
[data-theme='dark'] .hud-row-value { color: var(--text-main); }
[data-theme='dark'] .lab-hud.is-failure {
border-color: rgba(244, 114, 182, 0.55);
color: var(--aurora-4);
box-shadow: 0 0 28px rgba(244, 114, 182, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .lab-hud.is-failure .hud-label { color: var(--aurora-4); }
[data-theme='dark'] .lab-hud.is-success {
border-color: rgba(94, 234, 212, 0.55);
color: var(--aurora-1);
box-shadow: 0 0 28px rgba(94, 234, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Mission tracker — glass pill */
[data-theme='dark'] .lab-mission {
background: rgba(11, 7, 34, 0.55);
border: 1px solid var(--glass-edge);
color: var(--text-soft, #c9c2e0);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
font-family: 'JetBrains Mono', monospace;
}
[data-theme='dark'] .lab-mission.is-complete {
background: linear-gradient(90deg,
rgba(94, 234, 212, 0.18),
rgba(167, 139, 250, 0.14),
rgba(94, 234, 212, 0.18));
border-color: rgba(94, 234, 212, 0.55);
color: var(--aurora-1);
box-shadow: 0 0 34px rgba(94, 234, 212, 0.55);
}
/* Surgical tray — glass dock at the bottom */
[data-theme='dark'] .surgical-tray {
background: rgba(11, 7, 34, 0.55);
border: 1px solid var(--glass-edge);
border-radius: 18px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .tray-slot {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--glass-edge);
}
[data-theme='dark'] .tray-slot:hover {
border-color: var(--glass-edge-br);
box-shadow: 0 0 20px var(--tray-glow, rgba(167, 139, 250, 0.3));
}
[data-theme='dark'] .tray-label { color: var(--text-muted); }
[data-theme='dark'] .tray-slot:hover .tray-label { color: var(--text-main); }
/* Lab Presentation Mode — hide every UI element, just the grid remains */
body.lab-presenting .navbar,
body.lab-presenting .sidebar,
body.lab-presenting .sidebar-overlay,
body.lab-presenting .lab-hud,
body.lab-presenting .surgical-tray,
body.lab-presenting .lab-hint-bar,
body.lab-presenting .xray-label,
body.lab-presenting .lab-mission,
body.lab-presenting .lab-error-tooltip,
body.lab-presenting .lab-data-lake,
body.lab-presenting .lab-labeler,
body.lab-presenting .lab-prediction-label,
body.lab-presenting .lab-hologram,
body.lab-presenting .lab-templates,
body.lab-presenting .lab-nested-panel,
body.lab-presenting .present-exit {
display: none !important;
}
body.lab-presenting.has-sidebar .main { padding-left: 0 !important; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 700px) {
.search-box { max-width: none; margin: 0 10px; }
#search-input { font-size: 0.82rem; padding: 8px 12px; }
.breadcrumb { display: none; }
}
@media (max-width: 600px) {
.hero h1 { font-size: 2.1rem; }
.hero .subtitle { font-size: 0.98rem; }
.page-header h1 { font-size: 1.7rem; }
.class-header h1 { font-size: 1.55rem; }
.section-title { font-size: 0.95rem; }
.section-body { padding: 0 18px 22px; }
.section-header { padding: 16px 18px; }
.mentors { gap: 16px; }
.class-nav { flex-direction: column; gap: 10px; }
.class-nav a { width: 100%; justify-content: center; }
.principle-grid, .tool-grid { grid-template-columns: 1fr; }
}