@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap');@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap");@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

   
/* ═══════════════════════════════════════════
   SF SmartLabs — LoadingScreen.css
   Matches ContactPage / FeaturesPage theme
   ═══════════════════════════════════════════ */
/* ── Root overlay ── */
.ls-root {
     position: fixed;
     inset: 0;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background: var(--bg, #0d0f14);
     overflow: hidden;
     transition: opacity 0.6s ease;
   }
.ls-root * { box-sizing: border-box; margin: 0; padding: 0; }
.ls-fade-out { opacity: 0; pointer-events: none; }
/* ── BG aurora — identical to ContactPage ── */
.ls-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ls-aurora { position: absolute; border-radius: 50%; filter: blur(1px); }
.ls-a1 {
     width: 640px; height: 640px;
     top: -180px; right: -180px;
     background: radial-gradient(circle, rgba(99,102,241,.13) 0%, transparent 65%);
     animation: lsF1 14s ease-in-out infinite;
   }
.ls-a2 {
     width: 480px; height: 480px;
     bottom: -80px; left: -120px;
     background: radial-gradient(circle, rgba(0,212,170,.1) 0%, transparent 65%);
     animation: lsF2 17s ease-in-out infinite;
   }
.ls-a3 {
     width: 320px; height: 320px;
     top: 45%; left: 30%;
     background: radial-gradient(circle, rgba(56,189,248,.08) 0%, transparent 65%);
     animation: lsF1 11s ease-in-out infinite reverse;
   }
@keyframes lsF1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,16px) scale(1.05)} }
@keyframes lsF2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(12px,-14px)} }
.ls-grid {
     position: absolute; inset: 0;
     background-image: radial-gradient(circle, rgba(99,102,241,.25) 1px, transparent 1px);
     background-size: 44px 44px;
     mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 20%, transparent 100%);
     -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 20%, transparent 100%);
     opacity: .22;
   }
[data-theme="light"] .ls-grid { opacity: .09; }
/* ── Center column ── */
.ls-center {
     position: relative; z-index: 2;
     display: flex; flex-direction: column;
     align-items: center; gap: 28px;
     width: min(460px, 90vw);
   }
/* ── Logo ── */
.ls-logo {
     display: flex; align-items: center; gap: 16px;
     opacity: 0; transform: translateY(-18px) scale(.96);
     transition: opacity .65s ease, transform .65s cubic-bezier(.2,.85,.3,1);
   }
.ls-logo-in { opacity: 1; transform: none; }
/* Mark — spinning rings */
.ls-logo-mark {
     position: relative; width: 52px; height: 52px;
     display: flex; align-items: center; justify-content: center;
   }
.ls-lm-ring {
     position: absolute; border-radius: 50%;
     border: 1.8px solid transparent;
   }
.ls-lm-r1 {
     inset: 0;
     border-top-color: #00d4aa; border-right-color: rgba(0,212,170,.2);
     animation: lsSpin 1.6s linear infinite;
   }
.ls-lm-r2 {
     inset: 7px;
     border-top-color: #818cf8; border-left-color: rgba(129,140,248,.2);
     animation: lsSpin 2.2s linear infinite reverse;
   }
.ls-lm-r3 {
     inset: 14px;
     border-top-color: #38bdf8; border-bottom-color: rgba(56,189,248,.15);
     animation: lsSpin 1s linear infinite;
   }
@keyframes lsSpin { to { transform: rotate(360deg); } }
.ls-lm-text {
     position: relative; z-index: 1;
     font-family: 'Bricolage Grotesque', sans-serif;
     font-size: 13px; font-weight: 800;
     background: linear-gradient(135deg, #00d4aa, #818cf8);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     background-clip: text;
     letter-spacing: -.3px;
   }
/* Wordmark */
.ls-logo-wordmark {
     font-family: 'Bricolage Grotesque', sans-serif;
     font-weight: 800; font-size: 1.5rem;
     letter-spacing: -1px; line-height: 1;
     display: flex; align-items: baseline; gap: 2px;
   }
.ls-lw-sf    { color: var(--tp, #fff); opacity: .45; }
.ls-lw-smart { color: var(--tp, #fff); }
.ls-lw-labs  {
     background: linear-gradient(110deg, #00d4aa 0%, #38bdf8 50%, #818cf8 100%);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     background-clip: text;
   }
/* ── Tagline ── */
.ls-tagline {
     font-family: 'DM Sans', sans-serif;
     font-size: 15px; font-weight: 300;
     color: var(--ts, rgba(255,255,255,.55));
     letter-spacing: .2px;
     opacity: 0; transform: translateY(8px);
     transition: opacity .7s ease .2s, transform .7s ease .2s;
   }
.ls-tagline-in { opacity: 1; transform: none; }
.ls-grad {
     font-style: normal;
     background: linear-gradient(110deg, #00d4aa, #38bdf8);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     background-clip: text;
   }
/* ── Progress ── */
.ls-progress-wrap { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.ls-progress-track {
     width: 100%; height: 5px;
     background: var(--bg-2, rgba(255,255,255,.07));
     border-radius: 99px; overflow: hidden;
     border: 1px solid var(--bs, rgba(255,255,255,.08));
   }
.ls-progress-fill {
     height: 100%; border-radius: 99px;
     background: linear-gradient(90deg, #6366f1 0%, #00d4aa 50%, #38bdf8 100%);
     position: relative; overflow: hidden;
     transition: width 0.1s ease-out;
     box-shadow: 0 0 10px rgba(0,212,170,.45);
   }
.ls-progress-sheen {
     position: absolute; inset: 0;
     background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
     animation: lsSheen 1.6s ease-in-out infinite;
   }
@keyframes lsSheen {
     0%   { transform: translateX(-100%); }
     100% { transform: translateX(300%); }
   }
.ls-progress-meta {
     display: flex; justify-content: space-between; align-items: center;
   }
.ls-phrase {
     font-family: 'DM Sans', sans-serif;
     font-size: 12.5px; font-weight: 300;
     color: var(--tm, rgba(255,255,255,.38));
     letter-spacing: .2px;
     animation: lsPhraseIn .35s ease forwards;
   }
@keyframes lsPhraseIn {
     from { opacity: 0; transform: translateY(4px); }
     to   { opacity: 1; transform: none; }
   }
.ls-pct {
     font-family: 'Bricolage Grotesque', sans-serif;
     font-size: 13px; font-weight: 700;
     background: linear-gradient(90deg, #00d4aa, #38bdf8);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     background-clip: text;
     min-width: 42px; text-align: right;
     letter-spacing: -.3px;
   }
.ls-pct-sym { font-size: 10px; }
/* ── Pill icons ── */
.ls-pills {
     display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
   }
.ls-pill {
     display: inline-flex; align-items: center; gap: 7px;
     border-radius: 99px; padding: 6px 14px;
     font-family: 'DM Sans', sans-serif;
     font-size: 12px; font-weight: 500;
     border: 1px solid;
     opacity: 0; transform: translateY(10px) scale(.96);
     transition: opacity .5s ease, transform .5s cubic-bezier(.2,.85,.3,1);
     backdrop-filter: blur(8px);
   }
.ls-pills-in .ls-pill { opacity: 1; transform: none; }
.ls-pill-teal   { background: rgba(0,212,170,.08);  border-color: rgba(0,212,170,.22);  color: #00d4aa; }
.ls-pill-sky    { background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.22); color: #38bdf8; }
.ls-pill-violet { background: rgba(99,102,241,.1);  border-color: rgba(99,102,241,.25); color: #818cf8; }
.ls-pill-icon   { font-size: 13px; }
.ls-pill-label  { font-size: 11.5px; letter-spacing: .1px; }
/* ── Footer ── */
.ls-footer {
     position: absolute; bottom: 28px;
     font-family: 'DM Sans', sans-serif;
     font-size: 11px; font-weight: 300;
     color: var(--tm, rgba(255,255,255,.22));
     letter-spacing: .6px;
     z-index: 2;
   }
/* ═══ LIGHT MODE overrides ═══ */
[data-theme="light"] .ls-root,

   
   [data-theme="light"] .ls-progress-track {
     background: rgba(0,0,0,.06);
     border-color: rgba(0,0,0,.08);
   }
[data-theme="light"] .ls-lw-sf    { color: #0d0f14; }
[data-theme="light"] .ls-lw-smart { color: #0d0f14; }
[data-theme="light"] .ls-tagline  { color: rgba(0,0,0,.5); }
[data-theme="light"] .ls-phrase   { color: rgba(0,0,0,.38); }
[data-theme="light"] .ls-footer   { color: rgba(0,0,0,.25); }
[data-theme="light"] .ls-pill-teal   { background: rgba(0,212,170,.1);  }
[data-theme="light"] .ls-pill-sky    { background: rgba(56,189,248,.1); }
[data-theme="light"] .ls-pill-violet { background: rgba(99,102,241,.1); }
[data-theme="light"] .ls-lm-r1 { border-right-color: rgba(0,212,170,.15); }
[data-theme="light"] .ls-lm-r2 { border-left-color:  rgba(129,140,248,.15); }
[data-theme="light"] .ls-lm-r3 { border-bottom-color:rgba(56,189,248,.12); }
/* ── Mobile ── */
@media (max-width: 480px) {
     .ls-logo-wordmark { font-size: 1.25rem; }
     .ls-lm-text { font-size: 11px; }
     .ls-pills { gap: 7px; }
     .ls-pill  { padding: 5px 11px; }
   }

   
/* ═══════════════════════════════════════════════════
   SF SmartLabs — About Page
   Matches Hero.css token system exactly
   ═══════════════════════════════════════════════════ */
/* ── reset ── */
.ab-page *, .ab-page *::before, .ab-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── layout ── */
.ab-page {
     position: relative;
     background: var(--bg);
     color: var(--tp);
     font-family: var(--_fb, 'DM Sans', sans-serif);
     overflow-x: hidden;
     min-height: 100vh;
   }
.ab-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2.2rem;
     position: relative;
     z-index: 2;
   }
/* ═══════ BACKGROUND ═══════ */
.ab-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.ab-aurora { position: absolute; border-radius: 50%; filter: blur(1px); }
.aa1 { width: 800px; height: 800px; top: -200px; right: -180px; background: radial-gradient(circle, rgba(99,102,241,.09) 0%, transparent 65%); animation: aFloat1 13s ease-in-out infinite; }
.aa2 { width: 600px; height: 600px; bottom: 0; left: -140px; background: radial-gradient(circle, rgba(0,212,170,.07) 0%, transparent 65%); animation: aFloat2 16s ease-in-out infinite; }
.aa3 { width: 400px; height: 400px; top: 50%; left: 30%; background: radial-gradient(circle, rgba(56,189,248,.06) 0%, transparent 65%); animation: aFloat1 10s ease-in-out infinite reverse; }
@keyframes aFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-28px,20px) scale(1.04)} }
@keyframes aFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(16px,-16px)} }
.ab-dotgrid {
     position: absolute; inset: 0;
     background-image: radial-gradient(circle, rgba(99,102,241,.25) 1px, transparent 1px);
     background-size: 44px 44px;
     mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 20%, transparent 100%);
     -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 20%, transparent 100%);
     opacity: .3;
   }
[data-theme="light"] .ab-dotgrid { opacity: .14; }
.ab-scanlines {
     position: absolute; inset: 0;
     background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.018) 2px,rgba(0,0,0,.018) 4px);
   }
/* ═══════ SHARED TOKENS ═══════ */
.ab-eyebrow {
     display: inline-flex; align-items: center; gap: 8px;
     background: var(--_tdim); border: 1px solid var(--_tbord);
     border-radius: 99px; padding: 6px 16px;
     font-size: 12px; font-weight: 500; color: var(--_teal);
     letter-spacing: .3px; margin-bottom: 20px; width: -moz-fit-content; width: fit-content;
     backdrop-filter: blur(10px);
   }
.ab-eyebrow-center { margin: 0 auto 20px; }
.ab-live-dot {
     width: 7px; height: 7px; border-radius: 50%;
     background: var(--_teal); flex-shrink: 0;
     animation: pdot 2.2s ease-in-out infinite;
   }
@keyframes pdot {
     0%   { box-shadow: 0 0 0 0 rgba(0,212,170,.4); }
     60%  { box-shadow: 0 0 0 7px rgba(0,212,170,0); }
     100% { box-shadow: 0 0 0 0 rgba(0,212,170,0); }
   }
/* gradient text */
.ab-grad  { font-style:normal; background:linear-gradient(110deg,#00d4aa 0%,#38bdf8 48%,#818cf8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ab-grad2 { font-style:normal; background:linear-gradient(110deg,#818cf8 0%,#38bdf8 60%,#00d4aa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ab-outline { -webkit-text-stroke: 1.5px var(--tp); color: transparent; opacity: .4; }
/* section headings */
.ab-section-head {
     text-align: center; margin-bottom: 56px;
     opacity: 0; transform: translateY(24px);
     transition: opacity .7s ease, transform .7s cubic-bezier(.2,.85,.3,1);
     display: flex; flex-direction: column; align-items: center;
   }
.ab-section-head.ab-in { opacity: 1; transform: none; }
.ab-section-title {
     font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: clamp(2rem, 4vw, 3.2rem);
     font-weight: 800; letter-spacing: -1.5px;
     color: var(--tp); margin-bottom: 14px; line-height: 1.1;
   }
.ab-section-sub { font-size: 16px; line-height: 1.7; color: var(--ts); max-width: 560px; text-align: center; font-weight: 300; }
/* entrance animation */
.ab-in { opacity: 1 !important; transform: none !important; }
/* pills */
.ab-pill {
     display: inline-flex; align-items: center; gap: 6px;
     padding: 5px 12px; border-radius: 99px; font-size: 12px;
     font-weight: 500; white-space: nowrap;
   }
.ab-pill-teal   { background:var(--_tdim); border:1px solid var(--_tbord); color:var(--_teal); }
.ab-pill-violet { background:var(--_vdim); border:1px solid var(--_vbord); color:var(--_viol); }
.ab-pill-sky    { background:var(--_sdim); border:1px solid var(--_sbord); color:var(--_sky);  }
.ab-pill-icon { font-size: 13px; }
/* ═══════ HERO ═══════ */
.ab-hero {
     padding: 130px 0 80px;
     position: relative; z-index: 2;
   }
.ab-hero-inner {
     max-width: 780px; margin: 0 auto; text-align: center;
     opacity: 0; transform: translateY(30px);
     transition: opacity .8s ease, transform .8s cubic-bezier(.2,.85,.3,1);
   }
.ab-hero-inner.ab-in { opacity: 1; transform: none; }
.ab-hero-title {
     font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: clamp(3rem, 6vw, 5.2rem);
     font-weight: 800; letter-spacing: -3px;
     line-height: 1.02; margin-bottom: 24px;
     display: flex; flex-direction: column; gap: 2px;
   }
.ab-hero-line {
     display: block;
     opacity: 0; transform: translateY(26px) skewX(-2deg);
     transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1);
   }
.ab-in .ab-delay-1 { opacity:1; transform:none; transition-delay:.1s; }
.ab-in .ab-delay-2 { opacity:1; transform:none; transition-delay:.2s; }
.ab-in .ab-delay-3 { opacity:1; transform:none; transition-delay:.3s; }
.ab-hero-sub {
     font-size: 17px; line-height: 1.75; color: var(--ts);
     font-weight: 300; margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto;
   }
.ab-hero-pills { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
/* ═══════ STATS ═══════ */
.ab-stats-section { padding: 40px 0 80px; position: relative; z-index: 2; }
.ab-stats-grid {
     display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
   }
.ab-stat {
     position: relative;
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 18px; padding: 28px 20px;
     text-align: center; overflow: hidden;
     backdrop-filter: blur(20px);
     transition: transform .3s, box-shadow .3s;
   }
.ab-stat:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.3); }
.ab-stat-ring {
     position: absolute; inset: -1px; border-radius: 18px;
     background: linear-gradient(135deg,rgba(99,102,241,.15),rgba(0,212,170,.15));
     mask-image: linear-gradient(black,black); -webkit-mask-image: linear-gradient(black,black);
     opacity: 0; transition: opacity .3s;
     pointer-events: none;
   }
.ab-stat:hover .ab-stat-ring { opacity: 1; }
.ab-stat-val {
     display: block; font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 8px;
   }
.ab-stat-lbl { font-size: 11px; color: var(--tm); letter-spacing: .8px; text-transform: uppercase; }
.ab-stat-teal   .ab-stat-val { color: var(--_teal); }
.ab-stat-violet .ab-stat-val { color: var(--_viol); }
.ab-stat-sky    .ab-stat-val { color: var(--_sky);  }
/* ═══════ MISSION / VISION ═══════ */
.ab-mv-section { padding: 40px 0 100px; position: relative; z-index: 2; }
.ab-mv-grid {
     display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
     opacity: 0; transform: translateY(28px);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
   }
.ab-mv-grid.ab-in { opacity: 1; transform: none; }
.ab-mv-card {
     position: relative; overflow: hidden;
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 22px; padding: 32px 28px;
     backdrop-filter: blur(24px);
     transition: transform .3s, box-shadow .3s;
   }
.ab-mv-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.ab-mv-card-glow {
     position: absolute; bottom: -60px; right: -60px;
     width: 200px; height: 200px; border-radius: 50%; filter: blur(60px); opacity: .25; pointer-events: none;
   }
.ab-mv-glow-teal   { background: var(--_teal); }
.ab-mv-glow-violet { background: var(--_viol); }
.ab-mv-glow-sky    { background: var(--_sky);  }
.ab-mv-icon-wrap {
     width: 52px; height: 52px; border-radius: 14px;
     display: flex; align-items: center; justify-content: center;
     font-size: 22px; margin-bottom: 20px;
   }
.ab-icon-teal   { background: var(--_tdim); border: 1px solid var(--_tbord); }
.ab-icon-violet { background: var(--_vdim); border: 1px solid var(--_vbord); }
.ab-icon-sky    { background: var(--_sdim); border: 1px solid var(--_sbord); }
.ab-mv-label { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 10px; }
.ab-label-teal   { color: var(--_teal); }
.ab-label-violet { color: var(--_viol); }
.ab-label-sky    { color: var(--_sky);  }
.ab-mv-title {
     font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: 1.35rem; font-weight: 700; letter-spacing: -.5px;
     color: var(--tp); margin-bottom: 14px; line-height: 1.25;
   }
.ab-mv-desc { font-size: 14.5px; line-height: 1.75; color: var(--ts); font-weight: 300; margin-bottom: 22px; }
.ab-mv-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ab-mv-tag { padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 500; }
.ab-tag-teal   { background:var(--_tdim); border:1px solid var(--_tbord); color:var(--_teal); }
.ab-tag-violet { background:var(--_vdim); border:1px solid var(--_vbord); color:var(--_viol); }
.ab-tag-sky    { background:var(--_sdim); border:1px solid var(--_sbord); color:var(--_sky);  }
/* ═══════ PRODUCTS ═══════ */
.ab-products-section { padding: 40px 0 100px; position: relative; z-index: 2; }
.ab-products-grid {
     display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
     margin-bottom: 40px;
     opacity: 0; transform: translateY(28px);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
   }
.ab-products-grid.ab-in { opacity: 1; transform: none; }
.ab-product-card {
     position: relative; overflow: hidden;
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 22px; padding: 28px;
     backdrop-filter: blur(24px);
     transition: transform .3s, box-shadow .3s;
     animation-fill-mode: both;
   }
.ab-product-card:hover { transform: translateY(-6px); }
.ab-pc-glow {
     position: absolute; top: -40px; right: -40px;
     width: 160px; height: 160px; border-radius: 50%; filter: blur(50px); opacity: .18; pointer-events: none;
   }
.ab-pcg-teal   { background: var(--_teal); }
.ab-pcg-violet { background: var(--_viol); }
.ab-pcg-sky    { background: var(--_sky);  }
.ab-pc-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.ab-pc-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.ab-pci-teal   { background:var(--_tdim); border:1px solid var(--_tbord); }
.ab-pci-violet { background:var(--_vdim); border:1px solid var(--_vbord); }
.ab-pci-sky    { background:var(--_sdim); border:1px solid var(--_sbord); }
.ab-pc-name { font-family:var(--_fd); font-size:15px; font-weight:700; color:var(--tp); letter-spacing:-.3px; }
.ab-pc-tag  { font-size:11px; color:var(--tm); margin-top:2px; }
.ab-pc-desc { font-size:13.5px; line-height:1.72; color:var(--ts); font-weight:300; margin-bottom:16px; }
.ab-pc-pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.ab-pc-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:1px solid var(--bs); padding-top:16px; }
.ab-pc-metric { text-align:center; }
.ab-pc-mv { display:block; font-family:var(--_fd); font-size:17px; font-weight:800; line-height:1; margin-bottom:4px; }
.ab-pc-mk { font-size:10px; color:var(--tm); letter-spacing:.4px; text-transform:uppercase; }
.ab-pcmv-teal   { color:var(--_teal); }
.ab-pcmv-violet { color:var(--_viol); }
.ab-pcmv-sky    { color:var(--_sky);  }
/* feature breakdown */
.ab-features-breakdown {
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 22px; padding: 36px 32px;
     backdrop-filter: blur(20px);
     opacity: 0; transform: translateY(20px);
     transition: opacity .7s ease .2s, transform .7s cubic-bezier(.2,.85,.3,1) .2s;
   }
.ab-features-breakdown.ab-in { opacity: 1; transform: none; }
.ab-fb-label {
     display: flex; align-items: center; gap: 8px;
     font-size: 11px; font-weight: 600; color: var(--_teal);
     text-transform: uppercase; letter-spacing: .8px; margin-bottom: 24px;
   }
.ab-fb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ab-fb-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--bs); transition: border-color .2s; }
.ab-fb-item:hover { border-color: var(--_tbord); }
.ab-fb-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.ab-fb-title { font-size: 12.5px; font-weight: 600; color: var(--tp); margin-bottom: 2px; }
.ab-fb-desc  { font-size: 11px; color: var(--tm); line-height: 1.5; }
/* ═══════ VALUES ═══════ */
.ab-values-section { padding: 40px 0 100px; position: relative; z-index: 2; }
.ab-values-grid {
     display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
     opacity: 0; transform: translateY(28px);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
   }
.ab-values-grid.ab-in { opacity: 1; transform: none; }
.ab-value-card {
     background: var(--bg-c); border: 1px solid var(--bs);
     border-radius: 18px; padding: 28px 24px;
     backdrop-filter: blur(18px);
     transition: transform .3s, border-color .25s, box-shadow .3s;
     animation-fill-mode: both;
   }
.ab-value-card:hover { transform: translateY(-4px); border-color: var(--_tbord); box-shadow: 0 14px 40px rgba(0,212,170,.08); }
.ab-value-icon { font-size: 26px; margin-bottom: 14px; display: block; }
.ab-value-title { font-family:var(--_fd); font-size:16px; font-weight:700; letter-spacing:-.3px; margin-bottom:10px; }
.ab-vt-teal   { color:var(--_teal); }
.ab-vt-violet { color:var(--_viol); }
.ab-vt-sky    { color:var(--_sky);  }
.ab-value-desc { font-size:13.5px; line-height:1.72; color:var(--ts); font-weight:300; }
/* ═══════ TIMELINE ═══════ */
.ab-timeline-section { padding: 40px 0 100px; position: relative; z-index: 2; }
.ab-timeline {
     position: relative; padding: 20px 0;
     opacity: 0; transform: translateY(24px);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
   }
.ab-timeline.ab-in { opacity: 1; transform: none; }
.ab-timeline-line {
     position: absolute; left: 50%; top: 0; bottom: 0;
     width: 1px; background: linear-gradient(to bottom, transparent, var(--_teal), var(--_viol), var(--_sky), transparent);
     transform: translateX(-50%); opacity: .35;
   }
.ab-tl-item {
     display: flex; align-items: flex-start; margin-bottom: 48px;
     position: relative; animation-fill-mode: both;
   }
.ab-tl-left  { justify-content: flex-end; padding-right: calc(50% + 40px); text-align: right; }
.ab-tl-right { justify-content: flex-start; padding-left: calc(50% + 40px); }
.ab-tl-dot {
     position: absolute; left: 50%; top: 12px;
     width: 14px; height: 14px; border-radius: 50%;
     transform: translateX(-50%); z-index: 2;
     border: 2px solid var(--bg);
     box-shadow: 0 0 0 3px rgba(0,212,170,.25);
   }
.ab-tld-teal   { background:var(--_teal); box-shadow:0 0 0 4px rgba(0,212,170,.2); }
.ab-tld-violet { background:var(--_viol); box-shadow:0 0 0 4px rgba(129,140,248,.2); }
.ab-tld-sky    { background:var(--_sky);  box-shadow:0 0 0 4px rgba(56,189,248,.2); }
.ab-tl-card {
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 16px; padding: 20px 22px;
     max-width: 340px; backdrop-filter: blur(18px);
     transition: transform .3s;
   }
.ab-tl-card:hover { transform: scale(1.02); }
.ab-tlc-teal   { border-color: rgba(0,212,170,.2); }
.ab-tlc-violet { border-color: rgba(129,140,248,.2); }
.ab-tlc-sky    { border-color: rgba(56,189,248,.2); }
.ab-tl-year { font-family:var(--_fd); font-size:12px; font-weight:700; letter-spacing:1px; margin-bottom:6px; }
.ab-tly-teal   { color:var(--_teal); }
.ab-tly-violet { color:var(--_viol); }
.ab-tly-sky    { color:var(--_sky);  }
.ab-tl-title { font-family:var(--_fd); font-size:16px; font-weight:700; color:var(--tp); margin-bottom:7px; letter-spacing:-.3px; }
.ab-tl-desc  { font-size:13px; color:var(--ts); line-height:1.65; font-weight:300; }
/* ═══════ TEAM ═══════ */
.ab-team-section { padding: 40px 0 100px; position: relative; z-index: 2; }
.ab-team-cards {
     display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
     margin-bottom: 32px;
     opacity: 0; transform: translateY(24px);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
   }
.ab-team-cards.ab-in { opacity: 1; transform: none; }
.ab-team-card {
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 18px; padding: 26px 20px; text-align: center;
     backdrop-filter: blur(18px); transition: transform .3s, box-shadow .3s;
     animation-fill-mode: both;
   }
.ab-team-card:hover { transform: translateY(-5px); box-shadow: 0 16px 44px rgba(0,0,0,.3); }
.ab-tc-avatar {
     width: 60px; height: 60px; border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     font-family: var(--_fd); font-size: 18px; font-weight: 800;
     margin: 0 auto 16px; color: #fff;
   }
.ab-tca-teal   { background: linear-gradient(135deg,#00d4aa,#38bdf8); }
.ab-tca-violet { background: linear-gradient(135deg,#818cf8,#6366f1); }
.ab-tca-sky    { background: linear-gradient(135deg,#38bdf8,#0ea5e9); }
.ab-tc-role { font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; margin-bottom:10px; }
.ab-tcr-teal   { color:var(--_teal); }
.ab-tcr-violet { color:var(--_viol); }
.ab-tcr-sky    { color:var(--_sky);  }
.ab-tc-desc { font-size:13px; line-height:1.65; color:var(--ts); font-weight:300; }
.ab-location-banner {
     display: flex; align-items: center; justify-content: center;
     flex-wrap: wrap; gap: 14px;
     background: var(--bg-2); border: 1px solid var(--bs);
     border-radius: 14px; padding: 16px 24px;
     font-size: 13.5px; color: var(--ts);
     opacity: 0; transform: translateY(16px);
     transition: opacity .65s ease .3s, transform .65s cubic-bezier(.2,.85,.3,1) .3s;
   }
.ab-location-banner.ab-in { opacity: 1; transform: none; }
.ab-lb-icon { font-size: 15px; }
.ab-lb-sep { width: 1px; height: 16px; background: var(--bs); }
.ab-location-banner strong { color: var(--tp); font-weight: 600; }
/* ═══════ CTA ═══════ */
.ab-cta-section { padding: 40px 0 120px; position: relative; z-index: 2; }
.ab-cta-box {
     position: relative; overflow: hidden;
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 28px; padding: 70px 40px;
     backdrop-filter: blur(28px); text-align: center;
     opacity: 0; transform: translateY(24px) scale(.98);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
     box-shadow: 0 0 0 1px rgba(0,212,170,.1), 0 32px 80px rgba(0,0,0,.4);
   }
.ab-cta-box.ab-in { opacity: 1; transform: none; }
.ab-cta-canvas {
     position: absolute; bottom: 0; left: 0; right: 0;
     width: 100%; height: 80px; display: block; opacity: .55;
   }
.ab-cta-content { position: relative; z-index: 2; }
.ab-cta-title {
     font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: clamp(2rem, 4.5vw, 3.4rem);
     font-weight: 800; letter-spacing: -2px;
     color: var(--tp); margin-bottom: 16px;
   }
.ab-cta-sub { font-size: 16px; line-height: 1.7; color: var(--ts); font-weight: 300; margin-bottom: 36px; max-width: 520px; margin-left: auto; margin-right: auto; }
.ab-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.ab-cta-btn-p {
     position: relative; display: inline-flex; align-items: center; gap: 8px;
     background: linear-gradient(135deg,#6366f1,#00d4aa,#38bdf8);
     border: none; border-radius: 12px; padding: 13px 28px;
     font-size: 14.5px; font-weight: 500; color: #fff; cursor: pointer;
     transition: transform .2s, box-shadow .2s; text-decoration: none;
     font-family: var(--_fb); overflow: hidden;
     box-shadow: 0 4px 24px rgba(0,212,170,.25);
   }
.ab-cta-btn-p:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,212,170,.35); }
.ab-btn-shim {
     position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
     animation: shimmer 3.5s ease infinite; pointer-events: none;
   }
@keyframes shimmer { 0%{left:-100%} 30%{left:120%} 100%{left:120%} }
.ab-cta-btn-g {
     display: inline-flex; align-items: center; gap: 8px;
     background: var(--bg-2); border: 1px solid var(--bm);
     border-radius: 12px; padding: 13px 24px;
     font-size: 14.5px; font-weight: 500; color: var(--ts);
     cursor: pointer; transition: all .2s; text-decoration: none;
     font-family: var(--_fb); backdrop-filter: blur(8px);
   }
.ab-cta-btn-g:hover { border-color: var(--_tbord); color: var(--_teal); background: var(--_tdim); }
.ab-cta-trust { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: var(--tm); }
.ab-cta-trust span { display: flex; align-items: center; gap: 5px; }
/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1100px) {
     .ab-stats-grid { grid-template-columns: repeat(2, 1fr); }
     .ab-fb-grid    { grid-template-columns: repeat(3, 1fr); }
     .ab-team-cards { grid-template-columns: repeat(2, 1fr); }
   }
@media (max-width: 900px) {
     .ab-mv-grid      { grid-template-columns: 1fr; }
     .ab-products-grid{ grid-template-columns: 1fr; }
     .ab-values-grid  { grid-template-columns: repeat(2, 1fr); }
     .ab-tl-left, .ab-tl-right { padding: 0 0 0 60px; justify-content: flex-start; text-align: left; }
     .ab-timeline-line { left: 20px; }
     .ab-tl-dot { left: 20px; }
   }
@media (max-width: 640px) {
     .ab-hero-title    { letter-spacing: -1.5px; }
     .ab-stats-grid    { grid-template-columns: repeat(2, 1fr); }
     .ab-fb-grid       { grid-template-columns: repeat(2, 1fr); }
     .ab-values-grid   { grid-template-columns: 1fr; }
     .ab-team-cards    { grid-template-columns: 1fr; }
     .ab-cta-box       { padding: 48px 24px; }
     .ab-cta-btns      { flex-direction: column; align-items: center; }
     .ab-cta-btn-p, .ab-cta-btn-g { width: 100%; justify-content: center; }
   }

   
/* ═══════════════════════════════════════════════════
   SF SmartLabs — Founder Page CSS
   Variables mapped to global index.css tokens
   ═══════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────
      VARIABLE BRIDGE
      Maps all the old fd-page private tokens (--_teal,
      --tp, --ts, --bg-c, --bm, --bs …) to the real global
      variables that are actually defined in index.css.
      Scoped to .fd-page so nothing else is affected.
      ───────────────────────────────────────────────────── */
.fd-page {
     /* text */
     --tp:      var(--text-primary);
     --ts:      var(--text-secondary);
     --tm:      var(--text-muted);
   
     /* backgrounds */
     --bg:      var(--bg-primary);
     --bg-2:    var(--bg-secondary);
     --bg-c:    var(--bg-card);
   
     /* borders */
     --bm:      var(--border-mid);
     --bs:      var(--border-subtle);
   
     /* brand colours */
     --_teal:   var(--teal);
     --_tdim:   var(--teal-dim);
     --_tbord:  var(--teal-border);
     --_viol:   var(--indigo-light);
     --_vdim:   var(--indigo-dim);
     --_vbord:  var(--indigo-border);
     --_sky:    #38bdf8;
     --_sdim:   rgba(56,189,248,.12);
     --_sbord:  rgba(56,189,248,.28);
   
     /* font families */
     --_fd:     'Bricolage Grotesque', 'Syne', sans-serif;
     --_fb:     'DM Sans', sans-serif;
   }
/* ─────────────────────────────────────────────────────
      PAGE SHELL
      overflow-x:clip instead of hidden — avoids creating a
      stacking context that traps position:fixed (Navbar).
      ───────────────────────────────────────────────────── */
.fd-page *, .fd-page *::before, .fd-page *::after {
     box-sizing: border-box; margin: 0; padding: 0;
   }
.fd-page {
     position: relative;
     background: var(--bg-primary);
     color: var(--text-primary);
     font-family: 'DM Sans', sans-serif;
     overflow-x: clip;
     min-height: 100vh;
   }
.fd-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2.2rem;
     position: relative;
     z-index: 2;
   }
/* ─────────────────────────────────────────────────────
      NAVBAR & FOOTER Z-INDEX FIX
      Force navbar above all founder-page layers always.
      ───────────────────────────────────────────────────── */
.sf-nav          { z-index: 1100 !important; }
.sf-mob-drawer   { z-index: 1099 !important; }
.sf-mob-overlay  { z-index: 1098 !important; }
.sf-footer       { position: relative; z-index: 2; }
/* ─────────────────────────────────────────────────────
      BACKGROUND DECORATION
      z-index:0 + pointer-events:none keeps aurora/dots
      strictly behind all page content.
      ───────────────────────────────────────────────────── */
.fd-bg {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
   }
.fd-aurora {
     position: absolute;
     border-radius: 50%;
     filter: blur(1px);
     z-index: 0;
   }
.fda1 {
     width: 700px; height: 700px; top: -160px; right: -140px;
     background: radial-gradient(circle, rgba(99,102,241,.1) 0%, transparent 65%);
     animation: fdF1 14s ease-in-out infinite;
   }
.fda2 {
     width: 500px; height: 500px; bottom: 15%; left: -120px;
     background: radial-gradient(circle, rgba(0,212,170,.08) 0%, transparent 65%);
     animation: fdF2 17s ease-in-out infinite;
   }
.fda3 {
     width: 380px; height: 380px; top: 52%; left: 32%;
     background: radial-gradient(circle, rgba(56,189,248,.06) 0%, transparent 65%);
     animation: fdF1 11s ease-in-out infinite reverse;
   }
@keyframes fdF1 {
     0%,100% { transform: translate(0,0) scale(1); }
     50%     { transform: translate(-22px,18px) scale(1.04); }
   }
@keyframes fdF2 {
     0%,100% { transform: translate(0,0); }
     50%     { transform: translate(14px,-14px); }
   }
.fd-dotgrid {
     position: absolute; inset: 0; z-index: 0;
     background-image: radial-gradient(circle, rgba(99,102,241,.22) 1px, transparent 1px);
     background-size: 44px 44px;
     mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 20%, transparent 100%);
     -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 20%, transparent 100%);
     opacity: .28;
   }
[data-theme="light"] .fd-dotgrid { opacity: .1; }
.fd-scanlines {
     position: absolute; inset: 0; z-index: 0;
     background: repeating-linear-gradient(
       0deg, transparent, transparent 2px,
       rgba(0,0,0,.015) 2px, rgba(0,0,0,.015) 4px
     );
   }
/* ═══════ SHARED TOKENS ═══════ */
.fd-eyebrow {
     display: inline-flex; align-items: center; gap: 8px;
     background: var(--teal-dim);
     border: 1px solid var(--teal-border);
     border-radius: 99px; padding: 6px 16px;
     font-size: 12px; font-weight: 500; color: var(--teal);
     letter-spacing: .3px; margin-bottom: 20px; width: -moz-fit-content; width: fit-content;
     backdrop-filter: blur(10px);
   }
.fd-ey-c { margin-left: auto; margin-right: auto; }
.fd-live-dot {
     width: 7px; height: 7px; border-radius: 50%;
     background: var(--teal); flex-shrink: 0;
     animation: fdDot 2.2s ease-in-out infinite;
   }
.fd-dot-green {
     background: #22c55e !important;
     animation: fdDotG 2.2s ease-in-out infinite !important;
   }
@keyframes fdDot {
     0%   { box-shadow: 0 0 0 0   rgba(0,212,170,.4); }
     60%  { box-shadow: 0 0 0 7px rgba(0,212,170,0); }
     100% { box-shadow: 0 0 0 0   rgba(0,212,170,0); }
   }
@keyframes fdDotG {
     0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.4); }
     60%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
     100% { box-shadow: 0 0 0 0   rgba(34,197,94,0); }
   }
.fd-grad {
     font-style: normal;
     background: linear-gradient(110deg,#00d4aa 0%,#38bdf8 48%,#818cf8 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
.fd-in { opacity: 1 !important; transform: none !important; }
/* ═══════ HERO ═══════ */
.fd-hero {
     padding: 130px 0 60px;
     position: relative;
     z-index: 2;
   }
.fd-hero-grid {
     display: grid;
     grid-template-columns: 1fr 440px;
     gap: 64px;
     align-items: center;
     opacity: 0;
     transform: translateY(28px);
     transition: opacity .85s ease, transform .85s cubic-bezier(.2,.85,.3,1);
   }
.fd-hero-grid.fd-in { opacity: 1; transform: none; }
.fd-name {
     font-family: var(--_fd);
     font-size: clamp(3.2rem, 5.5vw, 5.4rem);
     font-weight: 800;
     letter-spacing: -3px;
     line-height: 1.02;
     margin-bottom: 16px;
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
.fd-name-first, .fd-name-last {
     display: block;
     opacity: 0;
     transform: translateY(22px) skewX(-2deg);
     transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1);
     color: var(--text-primary);
   }
.fd-nl-in { opacity: 1 !important; transform: none !important; }
.fd-name-first.fd-nl-in { transition-delay: .1s; }
.fd-name-last.fd-nl-in  { transition-delay: .22s; }
.fd-typed-row {
     font-size: 17px;
     font-weight: 400;
     color: var(--text-secondary);
     margin-bottom: 20px;
     min-height: 26px;
   }
.fd-typed-text { color: var(--teal); font-weight: 500; }
.fd-cursor {
     display: inline-block;
     color: var(--teal);
     animation: fdBlink 1s step-end infinite;
   }
@keyframes fdBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.fd-bio {
     font-size: 15.5px;
     line-height: 1.78;
     color: var(--text-secondary);
     font-weight: 300;
     margin-bottom: 22px;
     max-width: 500px;
   }
/* badges */
.fd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.fd-badge {
     display: inline-flex; align-items: center; gap: 6px;
     padding: 5px 13px; border-radius: 99px;
     font-size: 12px; font-weight: 500;
   }
.fd-bt { background: var(--teal-dim);   border: 1px solid var(--teal-border);   color: var(--teal); }
.fd-bv { background: var(--indigo-dim); border: 1px solid var(--indigo-border); color: var(--indigo-light); }
.fd-bs { background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.28); color: #38bdf8; }
/* socials */
.fd-socials { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.fd-soc {
     display: inline-flex; align-items: center; gap: 9px;
     background: var(--bg-card);
     border: 1px solid var(--border-mid);
     border-radius: 10px; padding: 9px 14px;
     font-size: 13px; font-weight: 400;
     color: var(--text-secondary);
     text-decoration: none;
     transition: all .2s;
     backdrop-filter: blur(10px);
     width: -moz-fit-content;
     width: fit-content;
   }
.fd-soc:hover {
     border-color: var(--teal-border);
     color: var(--teal);
     background: var(--teal-dim);
     transform: translateX(4px);
   }
/* CTAs */
.fd-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.fd-btn-primary {
     position: relative;
     display: inline-flex; align-items: center; gap: 8px;
     background: linear-gradient(135deg,#6366f1,#00d4aa,#38bdf8);
     border: none; border-radius: 12px; padding: 12px 26px;
     font-size: 14px; font-weight: 500; color: #fff;
     cursor: pointer;
     transition: transform .2s, box-shadow .2s;
     text-decoration: none;
     font-family: var(--_fb);
     overflow: hidden;
     box-shadow: 0 4px 24px rgba(0,212,170,.2);
   }
.fd-btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 32px rgba(0,212,170,.32);
   }
.fd-btn-shim {
     position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
     background: linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
     animation: fdShim 3.5s ease infinite;
     pointer-events: none;
   }
@keyframes fdShim { 0%{left:-100%} 30%{left:120%} 100%{left:120%} }
.fd-btn-ghost {
     display: inline-flex; align-items: center;
     background: var(--bg-secondary);
     border: 1px solid var(--border-mid);
     border-radius: 12px; padding: 12px 22px;
     font-size: 14px; font-weight: 500;
     color: var(--text-secondary);
     text-decoration: none;
     transition: all .2s;
     font-family: var(--_fb);
   }
.fd-btn-ghost:hover {
     border-color: var(--teal-border);
     color: var(--teal);
     background: var(--teal-dim);
   }
/* ═══════ PHOTO SCENE ═══════ */
.fd-hero-right { display: flex; align-items: center; justify-content: center; }
.fd-photo-scene { position: relative; width: 100%; max-width: 400px; }
.fd-ambient {
     position: absolute; border-radius: 50%;
     pointer-events: none; z-index: 0;
     transition: opacity .4s;
   }
.fd-amb-teal {
     width: 320px; height: 320px; top: 20px; left: 50%;
     transform: translateX(-50%);
     background: radial-gradient(circle, rgba(0,212,170,.18) 0%, transparent 65%);
     animation: fdAmb 5s ease-in-out infinite;
   }
.fd-amb-violet {
     width: 260px; height: 260px; top: 60px; left: 50%;
     transform: translateX(-50%);
     background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 65%);
     animation: fdAmb 6s ease-in-out infinite .8s;
   }
[data-theme="light"] .fd-amb-teal   { opacity: .5; }
[data-theme="light"] .fd-amb-violet { opacity: .4; }
@keyframes fdAmb {
     0%,100% { transform: translateX(-50%) scale(1); }
     50%     { transform: translateX(-50%) scale(1.06); }
   }
.fd-photo-card {
     position: relative; z-index: 2;
     border-radius: 20px; overflow: hidden;
     border: 1px solid var(--border-mid);
     background: var(--bg-card);
     backdrop-filter: blur(24px);
     box-shadow:
       0 0 0 1px rgba(0,212,170,.1),
       0 24px 64px rgba(0,0,0,.28),
       0 8px 24px rgba(0,0,0,.16);
     transition: box-shadow .3s, transform .3s;
   }
.fd-photo-card:hover {
     transform: translateY(-4px);
     box-shadow:
       0 0 0 1px rgba(0,212,170,.18),
       0 32px 72px rgba(0,0,0,.32),
       0 12px 32px rgba(0,0,0,.2);
   }
[data-theme="light"] .fd-photo-card {
     border-color: rgba(0,0,0,.1);
     background: #fff;
     box-shadow:
       0 0 0 1px rgba(0,212,170,.12),
       0 20px 50px rgba(0,0,0,.1),
       0 6px 16px rgba(0,0,0,.07);
   }
[data-theme="light"] .fd-photo-card:hover {
     box-shadow:
       0 0 0 1px rgba(0,212,170,.22),
       0 28px 60px rgba(0,0,0,.14),
       0 8px 20px rgba(0,0,0,.09);
   }
.fd-card-bar {
     display: flex; align-items: center; justify-content: space-between;
     padding: 10px 14px;
     border-bottom: 1px solid var(--border-subtle);
     background: var(--bg-secondary);
   }
[data-theme="light"] .fd-card-bar {
     background: #f5f5f7;
     border-bottom-color: rgba(0,0,0,.08);
   }
.fd-bar-dots { display: flex; gap: 6px; align-items: center; }
.fd-bd { width: 11px; height: 11px; border-radius: 50%; display: block; }
.fd-bd-r { background: #ff5f57; }
.fd-bd-y { background: #febc2e; }
.fd-bd-g { background: #28c840; }
.fd-bar-pill {
     font-size: 11px; font-weight: 500;
     color: var(--text-muted);
     background: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: 99px; padding: 3px 12px;
     letter-spacing: .2px;
   }
[data-theme="light"] .fd-bar-pill {
     background: rgba(0,0,0,.05);
     border-color: rgba(0,0,0,.08);
     color: #666;
   }
.fd-bar-right { width: 52px; }
.fd-img-wrap { position: relative; overflow: hidden; display: block; line-height: 0; }
.fd-photo-img {
     display: block; width: 100%; height: auto;
     max-height: 430px;
     -o-object-fit: cover;
        object-fit: cover; -o-object-position: top center; object-position: top center;
   }
.fd-img-fade {
     position: absolute; bottom: 0; left: 0; right: 0; height: 140px;
     background: linear-gradient(to bottom, transparent 0%, var(--bg-card) 100%);
     pointer-events: none;
   }
[data-theme="light"] .fd-img-fade {
     background: linear-gradient(to bottom, transparent 0%, #fff 100%);
   }
.fd-id-strip {
     display: flex; align-items: center; gap: 12px;
     padding: 14px 16px 16px;
     border-top: 1px solid var(--border-subtle);
     background: var(--bg-card);
   }
[data-theme="light"] .fd-id-strip {
     background: #fff;
     border-top-color: rgba(0,0,0,.07);
   }
.fd-id-avatar {
     width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
     background: linear-gradient(135deg,#00d4aa,#818cf8);
     display: flex; align-items: center; justify-content: center;
     font-family: var(--_fd); font-size: 14px; font-weight: 800; color: #fff;
   }
.fd-id-text { flex: 1; min-width: 0; }
.fd-id-name {
     font-size: 13.5px; font-weight: 600;
     color: var(--text-primary);
     line-height: 1.2; white-space: nowrap;
     overflow: hidden; text-overflow: ellipsis;
   }
.fd-id-sub {
     font-size: 11px; color: var(--text-muted); margin-top: 2px;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   }
[data-theme="light"] .fd-id-name { color: #111; }
[data-theme="light"] .fd-id-sub  { color: #888; }
.fd-id-badge {
     display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
     background: rgba(34,197,94,.1);
     border: 1px solid rgba(34,197,94,.25);
     border-radius: 99px; padding: 4px 10px;
     font-size: 11px; font-weight: 500; color: #22c55e;
   }
[data-theme="light"] .fd-id-badge {
     background: rgba(34,197,94,.08);
     border-color: rgba(34,197,94,.2);
   }
/* floating chips */
.fd-chip {
     position: absolute; z-index: 10;
     display: flex; align-items: center; gap: 8px;
     background: var(--bg-card);
     border: 1px solid var(--border-mid);
     border-radius: 12px; padding: 9px 13px;
     backdrop-filter: blur(20px);
     box-shadow: 0 8px 28px rgba(0,0,0,.2);
   }
[data-theme="light"] .fd-chip {
     background: #fff; border-color: rgba(0,0,0,.1);
     box-shadow: 0 6px 20px rgba(0,0,0,.1);
   }
.fd-chip-tl { top: 48px; left: -36px; animation: fdChip 3.6s ease-in-out infinite; }
.fd-chip-tr { top: 28px; right: -34px; animation: fdChip 4.4s ease-in-out infinite .6s; }
.fd-chip-br { bottom: 90px; right: -34px; animation: fdChip 3.9s ease-in-out infinite 1.1s; }
@keyframes fdChip { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.fd-chi { font-size: 18px; }
.fd-chv {
     font-family: var(--_fd); font-size: 13px; font-weight: 800;
     color: var(--text-primary); line-height: 1;
   }
.fd-chk { font-size: 10px; color: var(--text-muted); margin-top: 2px; letter-spacing: .2px; }
[data-theme="light"] .fd-chv { color: #111; }
[data-theme="light"] .fd-chk { color: #888; }
/* ═══════ MISSION & VISION ═══════ */
.fd-mv-section { padding: 60px 0 90px; position: relative; z-index: 2; }
.fd-mv-grid {
     display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
     opacity: 0; transform: translateY(28px);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
   }
.fd-mv-grid.fd-in { opacity: 1; transform: none; }
.fd-mv-card {
     position: relative; overflow: hidden;
     background: var(--bg-card);
     border: 1px solid var(--border-mid);
     border-radius: 22px; padding: 36px 32px;
     backdrop-filter: blur(20px);
     transition: transform .3s, box-shadow .3s;
   }
.fd-mv-card:hover { transform: translateY(-5px); box-shadow: 0 20px 52px rgba(0,0,0,.3); }
[data-theme="light"] .fd-mv-card {
     background: #fff; border-color: rgba(0,0,0,.08);
     box-shadow: 0 4px 16px rgba(0,0,0,.05);
   }
[data-theme="light"] .fd-mv-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.1); }
.fd-mvc-bg {
     position: absolute; bottom: -60px; right: -60px;
     width: 200px; height: 200px; border-radius: 50%;
     filter: blur(60px); opacity: .2; pointer-events: none;
   }
.fd-mvbg-t { background: var(--teal); }
.fd-mvbg-v { background: var(--indigo); }
.fd-mvc-icon-wrap {
     width: 52px; height: 52px; border-radius: 14px;
     display: flex; align-items: center; justify-content: center;
     font-size: 22px; margin-bottom: 18px;
   }
.fd-mciw-t { background: var(--teal-dim);   border: 1px solid var(--teal-border); }
.fd-mciw-v { background: var(--indigo-dim); border: 1px solid var(--indigo-border); }
.fd-mvc-lbl {
     font-size: 11px; font-weight: 700; letter-spacing: .8px;
     text-transform: uppercase; display: block; margin-bottom: 10px;
   }
.fd-mcl-t { color: var(--teal); }
.fd-mcl-v { color: var(--indigo-light); }
.fd-mvc-title {
     font-family: var(--_fd); font-size: 1.3rem; font-weight: 700;
     letter-spacing: -.4px; color: var(--text-primary);
     margin-bottom: 14px; line-height: 1.25;
   }
.fd-mvc-desc {
     font-size: 14.5px; line-height: 1.78;
     color: var(--text-secondary); font-weight: 300; margin-bottom: 20px;
   }
.fd-mvc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.fd-mvtag { padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 500; }
.fd-mvt-t { background: var(--teal-dim);   border: 1px solid var(--teal-border);   color: var(--teal); }
.fd-mvt-v { background: var(--indigo-dim); border: 1px solid var(--indigo-border); color: var(--indigo-light); }
/* ═══════ STORY ═══════ */
.fd-story-section { padding: 20px 0 90px; position: relative; z-index: 2; }
.fd-story-grid {
     display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
     opacity: 0; transform: translateY(28px);
     transition: opacity .8s ease, transform .8s cubic-bezier(.2,.85,.3,1);
   }
.fd-story-grid.fd-in { opacity: 1; transform: none; }
.fd-story-h {
     font-family: var(--_fd);
     font-size: clamp(1.9rem,3.5vw,2.8rem);
     font-weight: 800; letter-spacing: -1.5px;
     color: var(--text-primary); line-height: 1.1; margin-bottom: 24px;
   }
.fd-bq {
     font-family: var(--_fd); font-size: 1rem; font-weight: 500;
     color: var(--teal); line-height: 1.65;
     border-left: 3px solid var(--teal);
     padding-left: 16px; margin-top: 4px; font-style: italic;
   }
.fd-sp {
     font-size: 15px; line-height: 1.82;
     color: var(--text-secondary); font-weight: 300; margin-bottom: 16px;
   }
.fd-sp strong { color: var(--text-primary); font-weight: 600; }
.fd-sp em     { color: var(--teal); font-style: italic; }
.fd-story-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.fd-spill { padding: 5px 12px; border-radius: 99px; font-size: 11px; font-weight: 500; }
.fd-spt { background: var(--teal-dim);   border: 1px solid var(--teal-border);   color: var(--teal); }
.fd-spv { background: var(--indigo-dim); border: 1px solid var(--indigo-border); color: var(--indigo-light); }
.fd-sps { background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.28); color: #38bdf8; }
/* ═══════ TIMELINE ═══════ */
.fd-tl-section { padding: 20px 0 90px; position: relative; z-index: 2; }
.fd-tl-head {
     text-align: center; margin-bottom: 52px;
     display: flex; flex-direction: column; align-items: center;
     opacity: 0; transform: translateY(22px);
     transition: opacity .7s ease, transform .7s cubic-bezier(.2,.85,.3,1);
   }
.fd-tl-head.fd-in { opacity: 1; transform: none; }
.fd-tl-h {
     font-family: var(--_fd);
     font-size: clamp(2rem,3.5vw,3rem);
     font-weight: 800; letter-spacing: -1.5px;
     color: var(--text-primary); margin-bottom: 10px;
   }
.fd-tl-sub { font-size: 16px; color: var(--text-secondary); font-weight: 300; }
.fd-timeline {
     position: relative; padding: 20px 0;
     opacity: 0; transform: translateY(24px);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
   }
.fd-timeline.fd-in { opacity: 1; transform: none; }
.fd-tl-line {
     position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
     background: linear-gradient(to bottom, transparent, var(--teal), var(--indigo-light), #38bdf8, transparent);
     transform: translateX(-50%); opacity: .35;
   }
.fd-tl-item {
     display: flex; align-items: flex-start;
     margin-bottom: 44px; position: relative;
     animation-fill-mode: both;
   }
.fd-tl-l { justify-content: flex-end; padding-right: calc(50% + 40px); text-align: right; }
.fd-tl-r { justify-content: flex-start; padding-left: calc(50% + 40px); }
.fd-tl-dot {
     position: absolute; left: 50%; top: 14px;
     width: 13px; height: 13px; border-radius: 50%;
     transform: translateX(-50%); z-index: 2;
     border: 2px solid var(--bg-primary);
   }
.fd-tld-teal   { background: var(--teal);         box-shadow: 0 0 0 4px rgba(0,212,170,.2); }
.fd-tld-violet { background: var(--indigo-light);  box-shadow: 0 0 0 4px rgba(129,140,248,.2); }
.fd-tld-sky    { background: #38bdf8;              box-shadow: 0 0 0 4px rgba(56,189,248,.2); }
.fd-tl-card {
     background: var(--bg-card);
     border: 1px solid var(--border-mid);
     border-radius: 16px; padding: 20px 22px; max-width: 320px;
     backdrop-filter: blur(18px); transition: transform .3s;
   }
[data-theme="light"] .fd-tl-card { background: #fff; border-color: rgba(0,0,0,.08); }
.fd-tl-card:hover { transform: scale(1.02); }
.fd-tlc-teal   { border-color: rgba(0,212,170,.2); }
.fd-tlc-violet { border-color: rgba(129,140,248,.2); }
.fd-tlc-sky    { border-color: rgba(56,189,248,.2); }
.fd-tl-top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.fd-tl-icon { font-size: 18px; }
.fd-tl-year { font-family: var(--_fd); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.fd-tly-teal   { color: var(--teal); }
.fd-tly-violet { color: var(--indigo-light); }
.fd-tly-sky    { color: #38bdf8; }
.fd-tl-name {
     font-family: var(--_fd); font-size: 15.5px; font-weight: 700;
     color: var(--text-primary); margin-bottom: 7px; letter-spacing: -.3px;
   }
.fd-tl-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.65; font-weight: 300; }
/* ═══════ QUOTE ═══════ */
.fd-quote-section { padding: 20px 0 90px; position: relative; z-index: 2; }
.fd-quote-box {
     max-width: 800px; margin: 0 auto; text-align: center;
     background: var(--bg-card);
     border: 1px solid rgba(0,212,170,.18);
     border-radius: 26px; padding: 52px 48px;
     backdrop-filter: blur(24px);
     opacity: 0; transform: translateY(22px) scale(.98);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
   }
.fd-quote-box.fd-in { opacity: 1; transform: none; }
[data-theme="light"] .fd-quote-box {
     background: #fff; border-color: rgba(0,212,170,.2);
     box-shadow: 0 8px 32px rgba(0,0,0,.07);
   }
.fd-qmark {
     font-family: var(--_fd); font-size: 5.5rem; font-weight: 800;
     background: linear-gradient(110deg,#00d4aa,#818cf8);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: .8; display: block; margin-bottom: 18px;
   }
.fd-qtext {
     font-family: var(--_fd);
     font-size: clamp(1.05rem,2vw,1.35rem);
     font-weight: 600; color: var(--text-primary);
     line-height: 1.62; letter-spacing: -.3px; margin-bottom: 30px;
   }
.fd-qattr { display: inline-flex; align-items: center; gap: 13px; }
.fd-qav {
     width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
     background: linear-gradient(135deg,#00d4aa,#818cf8);
     display: flex; align-items: center; justify-content: center;
     font-family: var(--_fd); font-size: 14px; font-weight: 800; color: #fff;
   }
.fd-qname { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; text-align: left; }
.fd-qrole { font-size: 12px; color: var(--text-muted); text-align: left; }
/* ═══════ CONTACT ═══════ */
.fd-contact-section { padding: 20px 0 120px; position: relative; z-index: 2; }
.fd-contact-box {
     position: relative; overflow: hidden;
     background: var(--bg-card);
     border: 1px solid var(--border-mid);
     border-radius: 26px; padding: 64px 48px;
     backdrop-filter: blur(28px); text-align: center;
     box-shadow: 0 0 0 1px rgba(0,212,170,.1), 0 32px 80px rgba(0,0,0,.35);
     opacity: 0; transform: translateY(24px) scale(.98);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
   }
.fd-contact-box.fd-in { opacity: 1; transform: none; }
[data-theme="light"] .fd-contact-box {
     background: #fff; border-color: rgba(0,0,0,.08);
     box-shadow: 0 8px 40px rgba(0,0,0,.08);
   }
.fd-wave-canvas {
     position: absolute; bottom: 0; left: 0; right: 0;
     width: 100%; height: 80px; display: block; opacity: .45;
   }
.fd-contact-inner { position: relative; z-index: 2; }
.fd-contact-h {
     font-family: var(--_fd);
     font-size: clamp(2rem,4vw,3rem);
     font-weight: 800; letter-spacing: -2px;
     color: var(--text-primary); margin-bottom: 14px;
   }
.fd-contact-sub {
     font-size: 15.5px; line-height: 1.7;
     color: var(--text-secondary); font-weight: 300; margin-bottom: 36px;
     max-width: 480px; margin-left: auto; margin-right: auto;
   }
.fd-contact-links {
     display: flex; flex-direction: column; align-items: center;
     gap: 10px; margin-bottom: 32px;
   }
.fd-clink {
     display: inline-flex; align-items: center; gap: 12px;
     background: var(--bg-secondary);
     border: 1px solid var(--border-subtle);
     border-radius: 14px; padding: 14px 20px;
     text-decoration: none; transition: all .22s;
     width: -moz-fit-content;
     width: fit-content; min-width: 320px;
   }
[data-theme="light"] .fd-clink {
     background: #f7f7f8; border-color: rgba(0,0,0,.09);
   }
.fd-clink:hover {
     border-color: var(--teal-border);
     background: var(--teal-dim);
     transform: translateY(-2px);
   }
.fd-cl-lbl {
     font-size: 10px; color: var(--text-muted);
     text-transform: uppercase; letter-spacing: .8px;
     font-weight: 600; margin-bottom: 2px;
   }
.fd-cl-val { font-size: 13px; color: var(--teal); font-weight: 500; text-align: left; }
.fd-contact-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1100px) {
     .fd-hero-grid { grid-template-columns: 1fr 380px; gap: 48px; }
   }
@media (max-width: 900px) {
     .fd-hero-grid { grid-template-columns: 1fr; gap: 48px; }
     .fd-hero-right { order: -1; }
     .fd-photo-scene { max-width: 340px; margin: 0 auto; }
     .fd-mv-grid { grid-template-columns: 1fr; }
     .fd-story-grid { grid-template-columns: 1fr; gap: 32px; }
     .fd-tl-l, .fd-tl-r { padding: 0 0 0 52px; justify-content: flex-start; text-align: left; }
     .fd-tl-line { left: 18px; }
     .fd-tl-dot  { left: 18px; }
     .fd-chip-tl { left: -12px; }
     .fd-chip-tr { right: -12px; }
     .fd-chip-br { right: -12px; }
     .fd-contact-box { padding: 44px 24px; }
     .fd-clink { min-width: unset; width: 100%; max-width: 400px; }
   }
@media (max-width: 640px) {
     .fd-hero { padding: 100px 0 40px; }
     .fd-name { letter-spacing: -1.5px; }
     .fd-quote-box { padding: 36px 22px; }
     .fd-contact-btns { flex-direction: column; align-items: center; }
     .fd-btn-primary, .fd-btn-ghost { width: 100%; justify-content: center; }
     .fd-chip-tl, .fd-chip-tr { display: none; }
   }

   
/* ═══════════════════════════════════════════
   SF SmartLabs — Features Page
   Matches existing About/Hero token system
   ═══════════════════════════════════════════ */
/* ── reset ── */
.fp-page *, .fp-page *::before, .fp-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── page ── */
.fp-page {
     position: relative;
     background: var(--bg);
     color: var(--tp);
     font-family: var(--_fb, 'DM Sans', sans-serif);
     overflow-x: hidden;
     min-height: 100vh;
   }
.fp-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2.2rem;
     position: relative;
     z-index: 2;
   }
/* ═══ BACKGROUND ═══ */
.fp-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.fp-aurora {
     position: absolute; border-radius: 50%; filter: blur(1px);
   }
.fp-a1 { width: 700px; height: 700px; top: -150px; right: -160px; background: radial-gradient(circle, rgba(99,102,241,.09) 0%, transparent 65%); animation: fpFloat1 14s ease-in-out infinite; }
.fp-a2 { width: 550px; height: 550px; bottom: 80px; left: -120px; background: radial-gradient(circle, rgba(0,212,170,.07) 0%, transparent 65%); animation: fpFloat2 17s ease-in-out infinite; }
.fp-a3 { width: 380px; height: 380px; top: 45%; left: 35%; background: radial-gradient(circle, rgba(56,189,248,.06) 0%, transparent 65%); animation: fpFloat1 11s ease-in-out infinite reverse; }
@keyframes fpFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-26px,18px) scale(1.04)} }
@keyframes fpFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(14px,-14px)} }
.fp-grid {
     position: absolute; inset: 0;
     background-image: radial-gradient(circle, rgba(99,102,241,.22) 1px, transparent 1px);
     background-size: 44px 44px;
     mask-image: radial-gradient(ellipse 90% 90% at 50% 35%, black 20%, transparent 100%);
     -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 35%, black 20%, transparent 100%);
     opacity: .28;
   }
[data-theme="light"] .fp-grid { opacity: .12; }
/* ═══ SHARED TOKENS ═══ */
.fp-eyebrow {
     display: inline-flex; align-items: center; gap: 8px;
     background: var(--_tdim); border: 1px solid var(--_tbord);
     border-radius: 99px; padding: 6px 16px;
     font-size: 12px; font-weight: 500; color: var(--_teal);
     letter-spacing: .3px; margin-bottom: 20px; width: -moz-fit-content; width: fit-content;
     backdrop-filter: blur(10px);
   }
.fp-eyebrow-c { margin: 0 auto 20px; }
.fp-live {
     width: 7px; height: 7px; border-radius: 50%;
     background: var(--_teal); flex-shrink: 0;
     animation: fpDot 2.2s ease-in-out infinite;
   }
@keyframes fpDot {
     0%   { box-shadow: 0 0 0 0 rgba(0,212,170,.4); }
     60%  { box-shadow: 0 0 0 7px rgba(0,212,170,0); }
     100% { box-shadow: 0 0 0 0 rgba(0,212,170,0); }
   }
.fp-grad  { font-style:normal; background:linear-gradient(110deg,#00d4aa 0%,#38bdf8 48%,#818cf8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.fp-grad2 { font-style:normal; background:linear-gradient(110deg,#818cf8 0%,#38bdf8 60%,#00d4aa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.fp-in { opacity: 1 !important; transform: none !important; }
/* ═══ HERO ═══ */
.fp-hero {
     padding: 130px 0 72px;
     position: relative; z-index: 2;
   }
.fp-hero-inner {
     max-width: 800px; margin: 0 auto; text-align: center;
     opacity: 0; transform: translateY(28px);
     transition: opacity .8s ease, transform .8s cubic-bezier(.2,.85,.3,1);
   }
.fp-hero-title {
     font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: clamp(3rem, 6.5vw, 5.4rem);
     font-weight: 800; letter-spacing: -3px; line-height: 1.02;
     margin-bottom: 24px;
     display: flex; flex-direction: column; gap: 2px;
   }
.fp-line {
     display: block;
     opacity: 0; transform: translateY(24px) skewX(-2deg);
     transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1);
   }
.fp-in .fp-d1 { opacity:1; transform:none; transition-delay:.08s; }
.fp-in .fp-d2 { opacity:1; transform:none; transition-delay:.18s; }
.fp-in .fp-d3 { opacity:1; transform:none; transition-delay:.28s; }
.fp-hero-sub {
     font-size: 17px; line-height: 1.75; color: var(--ts);
     font-weight: 300; margin-bottom: 36px;
     max-width: 580px; margin-left: auto; margin-right: auto;
   }
/* Pillar badges */
.fp-pillar-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fp-badge {
     display: inline-flex; align-items: center; gap: 7px;
     padding: 8px 18px; border-radius: 99px; font-size: 13px; font-weight: 500;
     backdrop-filter: blur(10px);
   }
.fp-badge-teal   { background: var(--_tdim); border: 1px solid var(--_tbord); color: var(--_teal); }
.fp-badge-violet { background: var(--_vdim); border: 1px solid var(--_vbord); color: var(--_viol); }
.fp-badge-sky    { background: var(--_sdim); border: 1px solid var(--_sbord); color: var(--_sky); }
/* ═══ STAT STRIP ═══ */
.fp-stat-strip {
     padding: 28px 0; position: relative; z-index: 2;
     border-top: 1px solid var(--bs); border-bottom: 1px solid var(--bs);
     background: var(--bg-2);
   }
.fp-stats {
     display: flex; flex-wrap: wrap; gap: 0;
     justify-content: space-around; align-items: center;
   }
.fp-stat-item {
     display: flex; flex-direction: column; align-items: center;
     gap: 4px; padding: 6px 20px;
     border-right: 1px solid var(--bs);
     flex: 1 0 140px;
   }
.fp-stat-item:last-child { border-right: none; }
.fp-stat-v {
     font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: 1.8rem; font-weight: 800; color: var(--_teal);
     line-height: 1;
   }
.fp-stat-l { font-size: 11px; color: var(--tm); letter-spacing: .7px; text-transform: uppercase; }
/* ═══ TABS SECTION ═══ */
.fp-tabs-section { padding: 72px 0 100px; position: relative; z-index: 2; }
.fp-tab-nav {
     display: flex; gap: 12px; margin-bottom: 56px;
     opacity: 0; transform: translateY(20px);
     transition: opacity .65s ease, transform .65s cubic-bezier(.2,.85,.3,1);
   }
.fp-tab-nav.fp-in { opacity:1; transform:none; }
.fp-tab-btn {
     position: relative;
     display: flex; align-items: center; gap: 9px;
     padding: 12px 22px; border-radius: 14px;
     background: var(--bg-c); border: 1px solid var(--bm);
     font-family: var(--_fb, 'DM Sans', sans-serif);
     font-size: 14px; font-weight: 500; color: var(--ts);
     cursor: pointer; transition: all .25s; flex: 1;
     justify-content: center; backdrop-filter: blur(16px);
   }
.fp-tab-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.2); }
.fp-tab-teal.fp-tab-active   { background: var(--_tdim); border-color: var(--_tbord); color: var(--_teal); }
.fp-tab-violet.fp-tab-active { background: var(--_vdim); border-color: var(--_vbord); color: var(--_viol); }
.fp-tab-sky.fp-tab-active    { background: var(--_sdim); border-color: var(--_sbord); color: var(--_sky); }
.fp-tab-icon  { font-size: 16px; }
.fp-tab-label { font-weight: 600; }
.fp-tab-pip {
     position: absolute; bottom: -1px; left: 50%;
     transform: translateX(-50%);
     width: 32px; height: 2px; border-radius: 99px;
     background: var(--_teal);
   }
.fp-tab-violet.fp-tab-active .fp-tab-pip { background: var(--_viol); }
.fp-tab-sky.fp-tab-active    .fp-tab-pip { background: var(--_sky); }
/* Tab label row */
.fp-tab-label-row {
     margin-bottom: 48px;
     opacity: 0; transform: translateY(18px);
     transition: opacity .6s ease .05s, transform .6s cubic-bezier(.2,.85,.3,1) .05s;
   }
.fp-tab-label-row.fp-in { opacity:1; transform:none; }
.fp-pillar-title {
     font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: clamp(1.8rem, 3.5vw, 2.9rem);
     font-weight: 800; letter-spacing: -1.5px;
     color: var(--tp); margin-bottom: 12px; line-height: 1.1;
   }
.fp-pillar-sub {
     font-size: 15.5px; line-height: 1.72; color: var(--ts);
     font-weight: 300; max-width: 620px;
   }
/* Tab content slide animation */
.fp-tab-content {
     animation: fpSlideIn .45s cubic-bezier(.2,.85,.3,1) forwards;
   }
.fp-dir-1  { animation-name: fpSlideRight; }
.fp-dir--1 { animation-name: fpSlideLeft; }
@keyframes fpSlideRight {
     from { opacity:0; transform: translateX(32px); }
     to   { opacity:1; transform: translateX(0); }
   }
@keyframes fpSlideLeft {
     from { opacity:0; transform: translateX(-32px); }
     to   { opacity:1; transform: translateX(0); }
   }
/* ═══ FEATURE CARDS GRID ═══ */
.fp-cards-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
   }
.fp-cards-2col {
     grid-template-columns: repeat(2, 1fr);
   }
.fp-card {
     position: relative; overflow: hidden;
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 22px; padding: 30px 28px;
     backdrop-filter: blur(20px);
     transition: transform .3s, box-shadow .3s, opacity .6s ease, transform .6s cubic-bezier(.2,.85,.3,1);
     opacity: 0; transform: translateY(28px);
   }
.fp-card.fp-in { opacity:1; transform:none; }
.fp-card:hover { transform: translateY(-5px) !important; box-shadow: 0 20px 52px rgba(0,0,0,.28); }
.fp-card-glow {
     position: absolute; top: -50px; right: -50px;
     width: 160px; height: 160px; border-radius: 50%;
     filter: blur(48px); opacity: .16; pointer-events: none;
   }
.fp-card-teal   .fp-card-glow { background: var(--_teal); }
.fp-card-violet .fp-card-glow { background: var(--_viol); }
.fp-card-sky    .fp-card-glow { background: var(--_sky); }
.fp-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.fp-icon {
     width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
     display: flex; align-items: center; justify-content: center;
     font-size: 20px;
   }
.fp-icon-teal   { background: var(--_tdim); border: 1px solid var(--_tbord); }
.fp-icon-violet { background: var(--_vdim); border: 1px solid var(--_vbord); }
.fp-icon-sky    { background: var(--_sdim); border: 1px solid var(--_sbord); }
.fp-card-name { font-family: var(--_fd); font-size: 16px; font-weight: 700; color: var(--tp); letter-spacing: -.3px; }
.fp-card-tag  { font-size: 11px; color: var(--tm); margin-top: 2px; }
.fp-card-desc { font-size: 14px; line-height: 1.75; color: var(--ts); font-weight: 300; margin-bottom: 18px; }
.fp-bullets { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.fp-bullet {
     display: flex; align-items: center; gap: 9px;
     font-size: 12.5px; font-weight: 400; color: var(--ts);
   }
.fp-bullet-dot {
     width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
   }
.fp-bullet-teal   .fp-bullet-dot { background: var(--_teal); }
.fp-bullet-violet .fp-bullet-dot { background: var(--_viol); }
.fp-bullet-sky    .fp-bullet-dot { background: var(--_sky); }
/* ═══ MANAGE GRID ═══ */
.fp-manage-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     opacity: 0; transform: translateY(24px);
     transition: opacity .65s ease, transform .65s cubic-bezier(.2,.85,.3,1);
   }
.fp-manage-grid.fp-in { opacity:1; transform:none; }
.fp-manage-card {
     background: var(--bg-c); border: 1px solid var(--bs);
     border-radius: 16px; padding: 20px 18px;
     backdrop-filter: blur(16px);
     transition: transform .25s, border-color .22s, box-shadow .25s,
                 opacity .5s ease, transform .5s cubic-bezier(.2,.85,.3,1);
     opacity: 0; transform: translateY(20px);
   }
.fp-manage-card.fp-in { opacity:1; transform:translateY(0); }
.fp-manage-card:hover { transform: translateY(-4px) !important; border-color: var(--_vbord); box-shadow: 0 12px 36px rgba(129,140,248,.1); }
.fp-manage-icon { font-size: 22px; display: block; margin-bottom: 11px; }
.fp-manage-name { font-family: var(--_fd); font-size: 13.5px; font-weight: 700; color: var(--tp); letter-spacing: -.2px; margin-bottom: 7px; }
.fp-manage-desc { font-size: 12.5px; line-height: 1.65; color: var(--ts); font-weight: 300; }
/* ═══ WHY SECTION ═══ */
.fp-why-section { padding: 40px 0 90px; position: relative; z-index: 2; }
.fp-why-grid {
     display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
   }
.fp-why-card {
     background: var(--bg-c); border: 1px solid var(--bs);
     border-radius: 18px; padding: 26px 22px;
     backdrop-filter: blur(16px);
     opacity: 0; transform: translateY(22px);
     transition: opacity .65s ease, transform .65s cubic-bezier(.2,.85,.3,1), border-color .22s;
   }
.fp-why-card.fp-in { opacity:1; transform:none; }
.fp-why-card:hover { border-color: var(--_tbord); }
.fp-why-icon { font-size: 24px; display: block; margin-bottom: 14px; }
.fp-why-title { font-family: var(--_fd); font-size: 15px; font-weight: 700; color: var(--tp); letter-spacing: -.3px; margin-bottom: 9px; }
.fp-why-desc  { font-size: 13.5px; line-height: 1.7; color: var(--ts); font-weight: 300; }
/* ═══ CTA ═══ */
.fp-cta-section { padding: 40px 0 120px; position: relative; z-index: 2; }
.fp-cta-box {
     position: relative; overflow: hidden;
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 28px; padding: 72px 40px;
     backdrop-filter: blur(28px); text-align: center;
     opacity: 0; transform: translateY(24px) scale(.98);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
     box-shadow: 0 0 0 1px rgba(0,212,170,.1), 0 32px 80px rgba(0,0,0,.35);
   }
.fp-cta-box.fp-in { opacity:1; transform:none; }
.fp-cta-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.fp-cta-g1 { width: 300px; height: 300px; top: -80px; left: -60px; background: rgba(99,102,241,.14); }
.fp-cta-g2 { width: 280px; height: 280px; bottom: -60px; right: -40px; background: rgba(0,212,170,.1); }
.fp-cta-inner { position: relative; z-index: 2; }
.fp-cta-title {
     font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: clamp(2rem, 4.5vw, 3.4rem);
     font-weight: 800; letter-spacing: -2px; color: var(--tp); margin-bottom: 16px;
   }
.fp-cta-sub {
     font-size: 16px; line-height: 1.7; color: var(--ts); font-weight: 300;
     margin-bottom: 36px; max-width: 520px; margin-left: auto; margin-right: auto;
   }
.fp-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.fp-cta-primary {
     position: relative; display: inline-flex; align-items: center; gap: 8px;
     background: linear-gradient(135deg,#6366f1,#00d4aa,#38bdf8);
     border: none; border-radius: 12px; padding: 13px 28px;
     font-size: 14.5px; font-weight: 500; color: #fff; cursor: pointer;
     transition: transform .2s, box-shadow .2s; text-decoration: none;
     font-family: var(--_fb); overflow: hidden;
     box-shadow: 0 4px 24px rgba(0,212,170,.25);
   }
.fp-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,212,170,.38); }
.fp-shim {
     position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
     animation: fpShim 3.5s ease infinite; pointer-events: none;
   }
@keyframes fpShim { 0%{left:-100%} 30%{left:120%} 100%{left:120%} }
.fp-cta-ghost {
     display: inline-flex; align-items: center; gap: 8px;
     background: var(--bg-2); border: 1px solid var(--bm);
     border-radius: 12px; padding: 13px 24px;
     font-size: 14.5px; font-weight: 500; color: var(--ts);
     cursor: pointer; transition: all .2s; text-decoration: none;
     font-family: var(--_fb); backdrop-filter: blur(8px);
   }
.fp-cta-ghost:hover { border-color: var(--_tbord); color: var(--_teal); background: var(--_tdim); }
.fp-trust {
     display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
     font-size: 12.5px; color: var(--tm);
   }
.fp-trust span { display: flex; align-items: center; gap: 5px; }
/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
     .fp-manage-grid { grid-template-columns: repeat(3, 1fr); }
     .fp-why-grid    { grid-template-columns: repeat(2, 1fr); }
   }
@media (max-width: 860px) {
     .fp-tab-nav     { flex-direction: column; }
     .fp-cards-grid  { grid-template-columns: 1fr; }
     .fp-manage-grid { grid-template-columns: repeat(2, 1fr); }
   }
@media (max-width: 640px) {
     .fp-hero-title    { letter-spacing: -1.5px; }
     .fp-stats         { gap: 12px; }
     .fp-stat-item     { border-right: none; flex: 1 0 40%; }
     .fp-manage-grid   { grid-template-columns: 1fr; }
     .fp-why-grid      { grid-template-columns: 1fr; }
     .fp-cta-box       { padding: 48px 24px; }
     .fp-cta-btns      { flex-direction: column; align-items: center; }
     .fp-cta-primary,
     .fp-cta-ghost     { width: 100%; justify-content: center; }
   }

   
/* ═══════════════════════════════════════════
   SF SmartLabs — Contact Page  (fixed)
   ═══════════════════════════════════════════ */
.cp-page *, .cp-page *::before, .cp-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cp-page {
     position: relative;
     background: var(--bg);
     color: var(--tp);
     font-family: var(--_fb, 'DM Sans', sans-serif);
     overflow-x: hidden;
     min-height: 100vh;
   }
.cp-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2.2rem;
     position: relative;
     z-index: 2;
   }
/* ═══ BG ═══ */
.cp-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.cp-aurora { position: absolute; border-radius: 50%; filter: blur(1px); }
.cp-a1 { width: 700px; height: 700px; top: -150px; right: -150px; background: radial-gradient(circle, rgba(99,102,241,.09) 0%, transparent 65%); animation: cpF1 14s ease-in-out infinite; }
.cp-a2 { width: 520px; height: 520px; bottom: 0; left: -120px;     background: radial-gradient(circle, rgba(0,212,170,.07) 0%, transparent 65%); animation: cpF2 17s ease-in-out infinite; }
.cp-a3 { width: 360px; height: 360px; top: 50%; left: 32%;         background: radial-gradient(circle, rgba(56,189,248,.06) 0%, transparent 65%); animation: cpF1 11s ease-in-out infinite reverse; }
@keyframes cpF1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-24px,18px) scale(1.04)} }
@keyframes cpF2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(12px,-12px)} }
.cp-grid {
     position: absolute; inset: 0;
     background-image: radial-gradient(circle, rgba(99,102,241,.22) 1px, transparent 1px);
     background-size: 44px 44px;
     mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 20%, transparent 100%);
     -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 20%, transparent 100%);
     opacity: .27;
   }
[data-theme="light"] .cp-grid { opacity: .11; }
/* ═══ SHARED TOKENS ═══ */
.cp-eyebrow {
     display: inline-flex; align-items: center; gap: 8px;
     background: var(--_tdim); border: 1px solid var(--_tbord);
     border-radius: 99px; padding: 6px 16px;
     font-size: 12px; font-weight: 500; color: var(--_teal);
     letter-spacing: .3px; margin-bottom: 20px; width: -moz-fit-content; width: fit-content;
     backdrop-filter: blur(10px);
   }
.cp-live {
     width: 7px; height: 7px; border-radius: 50%;
     background: var(--_teal); flex-shrink: 0;
     animation: cpDot 2.2s ease-in-out infinite;
   }
@keyframes cpDot {
     0%   { box-shadow: 0 0 0 0 rgba(0,212,170,.4); }
     60%  { box-shadow: 0 0 0 7px rgba(0,212,170,0); }
     100% { box-shadow: 0 0 0 0 rgba(0,212,170,0); }
   }
.cp-grad  { font-style:normal; background:linear-gradient(110deg,#00d4aa 0%,#38bdf8 48%,#818cf8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cp-outline { -webkit-text-stroke:1.5px var(--tp); color:transparent; opacity:.4; }
/* ── Global "in" class ── */
.cp-in { opacity: 1 !important; transform: none !important; }
/* ═══ HERO ═══ */
.cp-hero { padding: 130px 0 60px; position: relative; z-index: 2; }
.cp-hero-inner {
     max-width: 680px; margin: 0 auto; text-align: center;
     opacity: 0; transform: translateY(28px);
     transition: opacity .7s ease, transform .7s cubic-bezier(.2,.85,.3,1);
   }
.cp-hero-title {
     font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: clamp(3rem, 6vw, 5rem);
     font-weight: 800; letter-spacing: -3px; line-height: 1.02;
     margin-bottom: 20px;
     display: flex; flex-direction: column; gap: 2px;
   }
/* ── Line animation: controlled directly via cp-line-in class ── */
.cp-line {
     display: block;
     opacity: 0;
     transform: translateY(24px) skewX(-2deg);
     transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1);
   }
/* These are added directly in JSX when heroVisible = true */
.cp-line-in        { opacity: 1; transform: none; }
.cp-d1.cp-line-in  { transition-delay: .08s; }
.cp-d2.cp-line-in  { transition-delay: .2s; }
.cp-hero-sub {
     font-size: 16px; line-height: 1.78; color: var(--ts); font-weight: 300;
     max-width: 520px; margin: 0 auto;
   }
/* ═══ MAIN LAYOUT ═══ */
.cp-main { padding: 56px 0 120px; position: relative; z-index: 2; }
.cp-layout {
     display: grid;
     grid-template-columns: 1fr 400px;
     gap: 32px;
     align-items: start;
   }
/* ═══ FORM CARD ═══ */
.cp-form-wrap {
     opacity: 0; transform: translateY(28px);
     transition: opacity .7s ease, transform .7s cubic-bezier(.2,.85,.3,1);
   }
.cp-form-card {
     position: relative; overflow: hidden;
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 24px; padding: 40px 36px;
     backdrop-filter: blur(24px);
   }
.cp-form-glow {
     position: absolute; top: -80px; right: -80px;
     width: 240px; height: 240px; border-radius: 50%;
     background: var(--_teal); filter: blur(80px); opacity: .07; pointer-events: none;
   }
.cp-form-header { margin-bottom: 28px; }
.cp-form-title {
     font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
     font-size: 1.7rem; font-weight: 800; letter-spacing: -.8px; color: var(--tp); margin-bottom: 6px;
   }
.cp-form-sub { font-size: 13.5px; color: var(--ts); font-weight: 300; }
/* Error banner */
.cp-err-banner {
     display: flex; align-items: center; gap: 10px;
     background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
     border-radius: 12px; padding: 12px 16px;
     font-size: 13.5px; color: #f87171; margin-bottom: 20px;
   }
.cp-err-close {
     margin-left: auto; background: none; border: none;
     color: #f87171; cursor: pointer; font-size: 12px; padding: 2px 4px; flex-shrink: 0;
   }
/* Fields */
.cp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cp-field-full { margin-bottom: 16px; }
.cp-label { font-size: 12.5px; font-weight: 500; color: var(--tp); letter-spacing: .2px; }
.cp-req { color: var(--_teal); }
.cp-opt { color: var(--tm); font-weight: 300; font-size: 11px; }
.cp-input,
   .cp-select,
   .cp-textarea {
     background: var(--bg-2); border: 1px solid var(--bs);
     border-radius: 12px; padding: 11px 14px;
     font-family: var(--_fb, 'DM Sans', sans-serif);
     font-size: 14px; color: var(--tp);
     transition: border-color .2s, box-shadow .2s;
     outline: none; width: 100%;
   }
.cp-input::-moz-placeholder, .cp-textarea::-moz-placeholder { color: var(--tm); }
.cp-input::placeholder, .cp-textarea::placeholder { color: var(--tm); }
.cp-input:focus, .cp-select:focus, .cp-textarea:focus {
     border-color: var(--_tbord);
     box-shadow: 0 0 0 3px rgba(0,212,170,.12);
   }
.cp-input-err {
     border-color: rgba(239,68,68,.5) !important;
     box-shadow: 0 0 0 3px rgba(239,68,68,.08) !important;
   }
.cp-select {
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none; cursor: pointer;
     background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300d4aa' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat; background-position: right 14px center;
     padding-right: 36px;
   }
.cp-select option { background: var(--bg); color: var(--tp); }
.cp-textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.cp-field-err { font-size: 11.5px; color: #f87171; margin-top: 2px; }
.cp-char-count { font-size: 11px; color: var(--tm); text-align: right; margin-top: 4px; }
/* Submit button */
.cp-submit {
     position: relative; overflow: hidden;
     display: inline-flex; align-items: center; justify-content: center; gap: 8px;
     width: 100%; padding: 13px 28px;
     background: linear-gradient(135deg,#6366f1,#00d4aa,#38bdf8);
     border: none; border-radius: 13px;
     font-family: var(--_fb, 'DM Sans', sans-serif);
     font-size: 14.5px; font-weight: 500; color: #fff;
     cursor: pointer; transition: transform .2s, box-shadow .2s;
     box-shadow: 0 4px 24px rgba(0,212,170,.25);
     margin-bottom: 16px;
   }
.cp-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,212,170,.38); }
.cp-submit:disabled { opacity: .7; cursor: not-allowed; }
.cp-shim {
     position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
     animation: cpShim 3.5s ease infinite; pointer-events: none;
   }
@keyframes cpShim { 0%{left:-100%} 30%{left:120%} 100%{left:120%} }
.cp-loading .cp-shim { display: none; }
.cp-spinner {
     width: 16px; height: 16px; border-radius: 50%;
     border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
     animation: cpSpin .7s linear infinite; flex-shrink: 0;
   }
@keyframes cpSpin { to { transform: rotate(360deg); } }
.cp-privacy { font-size: 12px; color: var(--tm); text-align: center; line-height: 1.6; }
/* Success state */
.cp-success {
     display: flex; flex-direction: column; align-items: center;
     text-align: center; padding: 24px 0;
   }
.cp-success-icon {
     width: 64px; height: 64px; border-radius: 50%;
     background: var(--_tdim); border: 1px solid var(--_tbord);
     color: var(--_teal); font-size: 26px; font-weight: 700;
     display: flex; align-items: center; justify-content: center;
     margin-bottom: 20px;
     animation: cpPop .4s cubic-bezier(.2,.85,.3,1.3) forwards;
   }
@keyframes cpPop { from{transform:scale(0)} to{transform:scale(1)} }
.cp-success-title {
     font-family: var(--_fd); font-size: 1.6rem; font-weight: 800;
     letter-spacing: -.6px; color: var(--tp); margin-bottom: 10px;
   }
.cp-success-sub { font-size: 14.5px; color: var(--ts); font-weight: 300; line-height: 1.7; margin-bottom: 28px; max-width: 380px; }
.cp-reset-btn {
     background: var(--_tdim); border: 1px solid var(--_tbord);
     color: var(--_teal); border-radius: 12px; padding: 10px 22px;
     font-family: var(--_fb); font-size: 13.5px; font-weight: 500;
     cursor: pointer; transition: all .2s;
   }
.cp-reset-btn:hover { background: rgba(0,212,170,.15); }
/* ═══ INFO SIDE ═══ */
.cp-info-side {
     display: flex; flex-direction: column; gap: 16px;
     opacity: 0; transform: translateX(28px);
     transition: opacity .7s ease .12s, transform .7s cubic-bezier(.2,.85,.3,1) .12s;
   }
.cp-info-card {
     position: relative; overflow: hidden;
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 18px; padding: 20px 22px;
     display: flex; align-items: center; gap: 16px;
     backdrop-filter: blur(18px);
     transition: transform .28s, box-shadow .28s;
   }
.cp-info-card:hover { transform: translateX(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.22); }
.cp-info-glow {
     position: absolute; right: -40px; bottom: -40px;
     width: 120px; height: 120px; border-radius: 50%;
     filter: blur(40px); opacity: .14; pointer-events: none;
   }
.cp-info-teal   .cp-info-glow { background: var(--_teal); }
.cp-info-violet .cp-info-glow { background: var(--_viol); }
.cp-info-sky    .cp-info-glow { background: var(--_sky); }
.cp-info-icon {
     width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
     display: flex; align-items: center; justify-content: center; font-size: 18px;
   }
.cp-icon-teal   { background: var(--_tdim); border: 1px solid var(--_tbord); }
.cp-icon-violet { background: var(--_vdim); border: 1px solid var(--_vbord); }
.cp-icon-sky    { background: var(--_sdim); border: 1px solid var(--_sbord); }
.cp-info-label { font-size: 11px; color: var(--tm); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.cp-info-value { font-size: 14.5px; font-weight: 600; text-decoration: none; margin-bottom: 3px; display: block; }
.cp-val-teal   { color: var(--_teal); }
.cp-val-violet { color: var(--_viol); }
.cp-val-sky    { color: var(--_sky); }
.cp-info-sub   { font-size: 12px; color: var(--tm); }
/* Response card */
.cp-response-card {
     background: var(--bg-c); border: 1px solid var(--bm);
     border-radius: 18px; padding: 22px; backdrop-filter: blur(18px);
   }
.cp-rc-head {
     display: flex; align-items: center; gap: 8px;
     font-size: 12px; font-weight: 600; color: var(--tp);
     text-transform: uppercase; letter-spacing: .6px; margin-bottom: 18px;
   }
.cp-rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--_teal); animation: cpDot 2.2s ease-in-out infinite; }
.cp-rc-bars { display: flex; flex-direction: column; gap: 13px; }
.cp-rc-meta { display: flex; justify-content: space-between; margin-bottom: 5px; }
.cp-rc-label { font-size: 12px; color: var(--ts); }
.cp-rc-time  { font-size: 12px; font-weight: 600; }
.cp-t-teal   { color: var(--_teal); }
.cp-t-violet { color: var(--_viol); }
.cp-t-sky    { color: var(--_sky); }
.cp-rc-track { height: 5px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.cp-rc-fill  { height: 100%; border-radius: 99px; animation: cpBar .9s cubic-bezier(.2,.85,.3,1) forwards; }
@keyframes cpBar { from{width:0} }
.cp-f-teal   { background: var(--_teal); }
.cp-f-violet { background: var(--_viol); }
.cp-f-sky    { background: var(--_sky); }
/* FAQ teaser */
.cp-faq-card {
     background: var(--bg-2); border: 1px solid var(--bs);
     border-radius: 16px; padding: 18px 20px;
     display: flex; align-items: flex-start; gap: 13px;
   }
.cp-faq-icon  { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.cp-faq-title { font-size: 13.5px; font-weight: 600; color: var(--tp); margin-bottom: 5px; }
.cp-faq-sub   { font-size: 12.5px; color: var(--ts); font-weight: 300; line-height: 1.6; }
/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
     .cp-layout { grid-template-columns: 1fr; }
     .cp-info-side {
       transform: translateY(24px);
       transition: opacity .7s ease .1s, transform .7s cubic-bezier(.2,.85,.3,1) .1s;
     }
   }
@media (max-width: 640px) {
     .cp-hero-title { letter-spacing: -1.5px; }
     .cp-form-card  { padding: 28px 20px; }
     .cp-row        { grid-template-columns: 1fr; }
   }

.bp-page *, .bp-page *::before, .bp-page *::after { box-sizing: border-box; margin: 0; padding: 0; }

.bp-page {
  position: relative;
  background: var(--bg);
  color: var(--tp);
  font-family: var(--_fb, 'DM Sans', sans-serif);
  overflow-x: hidden;
  min-height: 100vh;
}

.bp-container { max-width: 1200px; margin: 0 auto; padding: 0 2.2rem; position: relative; z-index: 2; }

/* BG */

.bp-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.bp-aurora { position: absolute; border-radius: 50%; filter: blur(1px); }

.bp-a1 { width: 700px; height: 700px; top: -150px; left: -150px;  background: radial-gradient(circle, rgba(99,102,241,.09) 0%, transparent 65%); animation: bpF1 14s ease-in-out infinite; }

.bp-a2 { width: 520px; height: 520px; bottom: 0; right: -120px;   background: radial-gradient(circle, rgba(0,212,170,.07) 0%, transparent 65%); animation: bpF2 17s ease-in-out infinite; }

.bp-a3 { width: 360px; height: 360px; top: 50%; right: 28%;       background: radial-gradient(circle, rgba(56,189,248,.06) 0%, transparent 65%); animation: bpF1 11s ease-in-out infinite reverse; }

@keyframes bpF1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,-16px) scale(1.04)} }

@keyframes bpF2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-12px,12px)} }

.bp-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(99,102,241,.22) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 20%, transparent 100%);
  opacity: .27;
}

[data-theme="light"] .bp-grid { opacity: .11; }

/* Tokens */

.bp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--_tdim); border: 1px solid var(--_tbord);
  border-radius: 99px; padding: 6px 16px;
  font-size: 12px; font-weight: 500; color: var(--_teal);
  letter-spacing: .3px; margin-bottom: 20px; width: -moz-fit-content; width: fit-content;
  backdrop-filter: blur(10px);
}

.bp-live { width: 7px; height: 7px; border-radius: 50%; background: var(--_teal); flex-shrink: 0; animation: bpDot 2.2s ease-in-out infinite; }

@keyframes bpDot { 0%{box-shadow:0 0 0 0 rgba(0,212,170,.4)} 60%{box-shadow:0 0 0 7px rgba(0,212,170,0)} 100%{box-shadow:0 0 0 0 rgba(0,212,170,0)} }

.bp-grad { font-style:normal; background:linear-gradient(110deg,#00d4aa 0%,#38bdf8 48%,#818cf8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.bp-outline { -webkit-text-stroke:1.5px var(--tp); color:transparent; opacity:.4; }

.bp-in { opacity: 1 !important; transform: none !important; }

/* Hero */

.bp-hero { padding: 130px 0 50px; position: relative; z-index: 2; }

.bp-hero-inner { max-width: 680px; margin: 0 auto; text-align: center; opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.85,.3,1); }

.bp-hero-title { font-family: var(--_fd, 'Bricolage Grotesque', sans-serif); font-size: clamp(3rem,6vw,5rem); font-weight: 800; letter-spacing: -3px; line-height: 1.02; margin-bottom: 20px; display: flex; flex-direction: column; gap: 2px; }

.bp-line { display: block; opacity: 0; transform: translateY(24px) skewX(-2deg); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1); }

.bp-in .bp-d1 { opacity:1; transform:none; transition-delay:.08s; }

.bp-in .bp-d2 { opacity:1; transform:none; transition-delay:.2s; }

.bp-hero-sub { font-size: 16px; line-height: 1.78; color: var(--ts); font-weight: 300; max-width: 520px; margin: 0 auto; }

/* Filter bar */

.bp-filter-wrap { padding: 0 0 32px; position: relative; z-index: 2; }

.bp-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.bp-filter-btn {
  background: var(--bg-c); border: 1px solid var(--bm);
  color: var(--ts); border-radius: 99px; padding: 7px 18px;
  font-family: var(--_fb, 'DM Sans', sans-serif);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .2s; backdrop-filter: blur(10px);
}

.bp-filter-btn:hover { border-color: var(--_tbord); color: var(--_teal); }

.bp-filter-active { background: var(--_tdim) !important; border-color: var(--_tbord) !important; color: var(--_teal) !important; }

/* Main */

.bp-main { padding: 0 0 120px; position: relative; z-index: 2; }

/* Loading / empty */

.bp-loading { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 80px 0; color: var(--ts); font-size: 15px; }

.bp-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bs); border-top-color: var(--_teal); animation: bpSpin .7s linear infinite; }

@keyframes bpSpin { to { transform: rotate(360deg); } }

.bp-empty { text-align: center; padding: 80px 0; color: var(--ts); }

.bp-empty-icon { font-size: 48px; margin-bottom: 16px; }

/* Grid layout */

.bp-grid-wrap { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1); }

.bp-featured { margin-bottom: 28px; }

.bp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }

/* Card */

.bp-card {
  position: relative; overflow: hidden;
  background: var(--bg-c); border: 1px solid var(--bm);
  border-radius: 20px; backdrop-filter: blur(20px);
  transition: transform .28s, box-shadow .28s, border-color .28s;
  display: flex; flex-direction: column;
}

.bp-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,.2); border-color: var(--_tbord); }

.bp-card-featured { flex-direction: row; align-items: stretch; border-radius: 24px; }

.bp-card-glow { position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--_teal); filter: blur(70px); opacity: .06; pointer-events: none; }

/* Thumbnail */

.bp-thumb-wrap { overflow: hidden; flex-shrink: 0; }

.bp-card:not(.bp-card-featured) .bp-thumb-wrap { border-radius: 20px 20px 0 0; height: 200px; }

.bp-card-featured .bp-thumb-wrap { width: 42%; border-radius: 24px 0 0 24px; height: auto; min-height: 260px; }

.bp-thumb { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .4s; display: block; }

.bp-card:hover .bp-thumb { transform: scale(1.04); }

/* Card body */

.bp-card-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* Tags */

.bp-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.bp-tag { padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .3px; }

/* Title */

.bp-card-title { font-family: var(--_fd, 'Bricolage Grotesque', sans-serif); font-size: 1.15rem; font-weight: 700; letter-spacing: -.3px; color: var(--tp); line-height: 1.35; }

.bp-card-title-lg { font-size: 1.55rem; letter-spacing: -.5px; }

/* Description */

.bp-card-desc { font-size: 14px; color: var(--ts); line-height: 1.7; font-weight: 300; display: -webkit-box;  -webkit-box-orient: vertical; overflow: hidden; }

/* Footer */

.bp-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--bs); gap: 12px; }

.bp-meta { display: flex; align-items: center; gap: 10px; }

.bp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--_tdim); border: 1px solid var(--_tbord); color: var(--_teal); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.bp-author { font-size: 12.5px; font-weight: 600; color: var(--tp); }

.bp-date { font-size: 11.5px; color: var(--tm); margin-top: 1px; }

.bp-read-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--_tdim); border: 1px solid var(--_tbord);
  color: var(--_teal); border-radius: 10px; padding: 7px 14px;
  font-family: var(--_fb, 'DM Sans', sans-serif);
  font-size: 12.5px; font-weight: 500; text-decoration: none;
  transition: all .2s; white-space: nowrap; flex-shrink: 0;
}

.bp-read-btn:hover { background: rgba(0,212,170,.15); transform: translateX(2px); }

/* Responsive */

@media (max-width: 860px) {
  .bp-card-featured { flex-direction: column; }
  .bp-card-featured .bp-thumb-wrap { width: 100%; border-radius: 20px 20px 0 0; height: 220px; min-height: unset; }
  .bp-card-title-lg { font-size: 1.25rem; }
}

@media (max-width: 640px) {
  .bp-cards { grid-template-columns: 1fr; }
  .bp-hero-title { letter-spacing: -1.5px; }
}


/* ─────────────────────────────────────────────────────────
   TeamPage.css  –  SF SmartLabs public team section
   Dark-mode aware (mirrors ContactPage.css token approach)
───────────────────────────────────────────────────────── */
/* ── Section wrapper ─────────────────────────────────── */
.team-section {
  padding: 90px 24px 110px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
}
/* ── Header ──────────────────────────────────────────── */
.team-header {
  text-align: center;
  margin-bottom: 70px;
}
.team-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #2563eb;
  background: #eff6ff;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 18px;
  border: 1px solid #bfdbfe;
  transition: background .2s, color .2s, border-color .2s;
}
[data-theme="dark"] .team-eyebrow {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.28);
}
.team-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 18px;
  line-height: 1.15;
  transition: color .2s;
}
[data-theme="dark"] .team-title {
  color: #f1f5f9;
}
.team-subtitle {
  font-size: 1.05rem;
  color: #64748b;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.75;
  font-weight: 400;
}
[data-theme="dark"] .team-subtitle {
  color: #64748b;
}
/* ── Grid ────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px;
}
/* ── Card ────────────────────────────────────────────── */
.team-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e8edf5;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px 28px;
  padding-top: 56px;
  position: relative;
  margin-top: 56px;
  transition: transform 0.28s ease, box-shadow 0.28s ease, background .2s, border-color .2s;
  animation: cardFadeUp 0.5s ease both;
}
[data-theme="dark"] .team-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(37, 99, 235, 0.14);
  border-color: #bfdbfe;
}
[data-theme="dark"] .team-card:hover {
  box-shadow: 0 16px 48px rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.4);
}
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}
/* ── Avatar — perfectly circular, overflows card top ── */
.team-card__avatar-wrap {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #dbeafe, #ede9fe);
  flex-shrink: 0;
  transition: box-shadow 0.28s ease, transform 0.28s ease, border-color .2s;
}
[data-theme="dark"] .team-card__avatar-wrap {
  border-color: #1e293b;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px #334155;
  background: linear-gradient(135deg, #1e3a5f, #2d1b69);
}
.team-card:hover .team-card__avatar-wrap {
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.28);
  transform: translateX(-50%) scale(1.05);
}
[data-theme="dark"] .team-card:hover .team-card__avatar-wrap {
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35), 0 0 0 1px rgba(99, 102, 241, 0.3);
}
.team-card__avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  display: block;
}
.team-card__avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .team-card__avatar-placeholder {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
/* ── Body ────────────────────────────────────────────── */
.team-card__body {
  width: 100%;
  padding-top: 8px;
}
.team-card__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  transition: color .2s;
}
[data-theme="dark"] .team-card__name {
  color: #f1f5f9;
}
.team-card__title {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2563eb;
  background: #eff6ff;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 14px;
  border: 1px solid #bfdbfe;
  transition: background .2s, color .2s, border-color .2s;
}
[data-theme="dark"] .team-card__title {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.28);
}
.team-card__desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}
[data-theme="dark"] .team-card__desc {
  color: #94a3b8;
}
/* ── Footer / LinkedIn ───────────────────────────────── */
.team-card__footer {
  margin-top: 18px;
  width: 100%;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
  transition: border-color .2s;
}
[data-theme="dark"] .team-card__footer {
  border-top-color: #1e293b;
}
.team-card__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: #0077b5;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 10px;
  border: 1.5px solid #d0e9f5;
  background: #f0f9ff;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
[data-theme="dark"] .team-card__linkedin {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.2);
}
.team-card__linkedin:hover {
  background: #0077b5;
  border-color: #0077b5;
  color: #fff;
  transform: translateY(-2px);
}
[data-theme="dark"] .team-card__linkedin:hover {
  background: #0369a1;
  border-color: #0369a1;
  color: #fff;
}
.team-card__linkedin svg { flex-shrink: 0; }
/* ── Skeleton loading ────────────────────────────────── */
.team-card--skeleton {
  pointer-events: none;
}
.skeleton-avatar {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf5 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border: 4px solid #fff;
}
[data-theme="dark"] .skeleton-avatar {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  border-color: #0f172a;
}
.skeleton-line {
  height: 14px;
  border-radius: 8px;
  margin: 8px auto;
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf5 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
[data-theme="dark"] .skeleton-line {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
.skeleton-line--name  { width: 55%; height: 18px; margin-top: 12px; }
.skeleton-line--title { width: 38%; height: 12px; }
.skeleton-line--desc  { width: 80%; height: 12px; margin-bottom: 24px; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ── States ──────────────────────────────────────────── */
.team-error,
.team-empty {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;
  font-size: 1rem;
}
.team-error { color: #ef4444; }
[data-theme="dark"] .team-empty { color: #475569; }
/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
  .team-section { padding: 60px 16px 80px; }
  .team-header  { margin-bottom: 48px; }
  .team-grid    { grid-template-columns: 1fr; gap: 56px; }
}

/* ── reset ── */

.fl-page *, .fl-page *::before, .fl-page *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── page ── */

.fl-page {
  position: relative;
  background: var(--bg);
  color: var(--tp);
  font-family: var(--_fb, 'DM Sans', sans-serif);
  overflow-x: hidden;
  min-height: 100vh;
}

.fl-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.2rem;
  position: relative;
  z-index: 2;
}

/* ══ BACKGROUND ══ */

.fl-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.fl-aurora { position: absolute; border-radius: 50%; filter: blur(1px); }

.fl-a1 { width: 650px; height: 650px; top: -100px; left: -160px;  background: radial-gradient(circle, rgba(0,212,170,.09) 0%, transparent 65%); animation: flFloat1 15s ease-in-out infinite; }

.fl-a2 { width: 500px; height: 500px; bottom: 100px; right: -120px; background: radial-gradient(circle, rgba(99,102,241,.07) 0%, transparent 65%); animation: flFloat2 18s ease-in-out infinite; }

.fl-a3 { width: 350px; height: 350px; top: 40%; right: 20%;        background: radial-gradient(circle, rgba(56,189,248,.06) 0%, transparent 65%); animation: flFloat1 12s ease-in-out infinite reverse; }

@keyframes flFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,-18px) scale(1.04)} }

@keyframes flFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-14px,14px)} }

.fl-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,212,170,.2) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 30%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 30%, black 20%, transparent 100%);
  opacity: .25;
}

[data-theme="light"] .fl-grid { opacity: .1; }

/* ══ TOKENS ══ */

.fl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--_tdim); border: 1px solid var(--_tbord);
  border-radius: 99px; padding: 6px 16px;
  font-size: 12px; font-weight: 500; color: var(--_teal);
  letter-spacing: .3px; margin-bottom: 18px; width: -moz-fit-content; width: fit-content;
  backdrop-filter: blur(10px);
}

.fl-eyebrow-c { margin: 0 auto 18px; }

.fl-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--_teal); flex-shrink: 0;
  animation: flDot 2.2s ease-in-out infinite;
}

@keyframes flDot {
  0%   { box-shadow: 0 0 0 0 rgba(0,212,170,.4); }
  60%  { box-shadow: 0 0 0 7px rgba(0,212,170,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,212,170,0); }
}

.fl-grad  { font-style:normal; background:linear-gradient(110deg,#00d4aa 0%,#38bdf8 48%,#818cf8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.fl-grad2 { font-style:normal; background:linear-gradient(110deg,#818cf8 0%,#38bdf8 60%,#00d4aa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.fl-in { opacity: 1 !important; transform: none !important; }

/* ══ HERO ══ */

.fl-hero { padding: 130px 0 64px; position: relative; z-index: 2; }

.fl-hero-inner {
  max-width: 820px; margin: 0 auto; text-align: center;
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.85,.3,1);
}

.fl-hero-title {
  font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(3rem, 6.5vw, 5.2rem);
  font-weight: 800; letter-spacing: -3px; line-height: 1.02;
  margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 2px;
}

.fl-line {
  display: block;
  opacity: 0; transform: translateY(24px) skewX(-2deg);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1);
}

.fl-in .fl-d1 { opacity:1; transform:none; transition-delay:.06s; }

.fl-in .fl-d2 { opacity:1; transform:none; transition-delay:.16s; }

.fl-in .fl-d3 { opacity:1; transform:none; transition-delay:.26s; }

.fl-hero-sub {
  font-size: 17px; line-height: 1.75; color: var(--ts);
  font-weight: 300; margin-bottom: 36px;
  max-width: 580px; margin-left: auto; margin-right: auto;
}

.fl-hero-stats {
  display: flex; flex-wrap: wrap; gap: 0;
  justify-content: center; margin-top: 0;
}

.fl-hero-stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 10px 28px;
  border-right: 1px solid var(--bs);
}

.fl-hero-stat:last-child { border-right: none; }

.fl-hero-stat-v {
  font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
  font-size: 1.6rem; font-weight: 800; color: var(--_teal); line-height: 1;
}

.fl-hero-stat-l { font-size: 11px; color: var(--tm); text-transform: uppercase; letter-spacing: .7px; }

/* ══ CATEGORY FILTER ══ */

.fl-filter-wrap {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--bs);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.fl-filter-scroll {
  display: flex; gap: 8px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 2px;
}

.fl-filter-scroll::-webkit-scrollbar { display: none; }

.fl-filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg-c); border: 1px solid var(--bm);
  font-family: var(--_fb, 'DM Sans', sans-serif);
  font-size: 13px; font-weight: 500; color: var(--ts);
  cursor: pointer; transition: all .22s; backdrop-filter: blur(12px);
}

.fl-filter-btn:hover { border-color: var(--_tbord); color: var(--_teal); background: var(--_tdim); }

.fl-filter-active {
  background: var(--_tdim) !important;
  border-color: var(--_tbord) !important;
  color: var(--_teal) !important;
}

.fl-filter-icon { font-size: 14px; }

/* ══ SECTION HEAD ══ */

.fl-section { padding: 72px 0 56px; position: relative; z-index: 2; }

.fl-section-head {
  margin-bottom: 44px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.85,.3,1);
}

.fl-section-head.fl-in { opacity:1; transform:none; }

.fl-section-title {
  font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800; letter-spacing: -1.5px;
  color: var(--tp); margin-bottom: 10px; line-height: 1.1;
}

.fl-section-sub {
  font-size: 15px; line-height: 1.72; color: var(--ts);
  font-weight: 300; max-width: 580px;
}

/* ══ FREE LAB CARDS ══ */

.fl-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.fl-card {
  position: relative; overflow: hidden;
  background: var(--bg-c); border: 1px solid var(--bm);
  border-radius: 22px; padding: 26px 24px;
  backdrop-filter: blur(20px);
  cursor: pointer;
  opacity: 0; transform: translateY(28px);
  transition: transform .3s, box-shadow .3s, border-color .25s,
              opacity .6s ease, transform .6s cubic-bezier(.2,.85,.3,1);
}

.fl-card.fl-in { opacity:1; transform:none; }

.fl-card:hover { transform: translateY(-6px) !important; box-shadow: 0 22px 56px rgba(0,0,0,.28); }

.fl-card-glow {
  position: absolute; top: -60px; right: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  filter: blur(52px); opacity: .13; pointer-events: none; z-index: 0;
}

.fl-card-teal   .fl-card-glow { background: var(--_teal); }

.fl-card-sky    .fl-card-glow { background: var(--_sky); }

.fl-card-amber  .fl-card-glow { background: #f59e0b; }

.fl-card-violet .fl-card-glow { background: var(--_viol); }

.fl-card-green  .fl-card-glow { background: #22c55e; }

.fl-card-orange .fl-card-glow { background: #f97316; }

.fl-card-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; position: relative; z-index: 1;
  flex-wrap: wrap;
}

.fl-card-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}

.fl-icon-teal   { background: var(--_tdim); border: 1px solid var(--_tbord); }

.fl-icon-sky    { background: var(--_sdim); border: 1px solid var(--_sbord); }

.fl-icon-violet { background: var(--_vdim); border: 1px solid var(--_vbord); }

.fl-icon-amber  { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); }

.fl-icon-green  { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.25); }

.fl-icon-orange { background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.25); }

.fl-card-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; border-radius: 99px;
  padding: 3px 10px; border: 1px solid;
}

.fl-badge-teal   { background: var(--_tdim); border-color: var(--_tbord); color: var(--_teal); }

.fl-badge-sky    { background: var(--_sdim); border-color: var(--_sbord); color: var(--_sky); }

.fl-badge-violet { background: var(--_vdim); border-color: var(--_vbord); color: var(--_viol); }

.fl-badge-amber  { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #d97706; }

.fl-badge-green  { background: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.3);  color: #16a34a; }

.fl-badge-orange { background: rgba(249,115,22,.1); border-color: rgba(249,115,22,.3); color: #ea580c; }

.fl-card-title {
  font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
  font-size: 16px; font-weight: 700; color: var(--tp);
  letter-spacing: -.3px; margin-bottom: 8px; position: relative; z-index: 1;
}

.fl-card-desc {
  font-size: 13.5px; line-height: 1.72; color: var(--ts);
  font-weight: 300; margin-bottom: 16px; position: relative; z-index: 1;
}

.fl-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
  position: relative; z-index: 1;
}

.fl-meta-chip {
  font-size: 11px; font-weight: 500; color: var(--ts);
  background: var(--bg-2); border: 1px solid var(--bs);
  border-radius: 99px; padding: 3px 10px;
}

.fl-free-pill {
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  background: rgba(0,212,170,.15); border: 1px solid rgba(0,212,170,.3);
  color: var(--_teal); border-radius: 99px; padding: 3px 10px;
}

.fl-card-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--_teal);
  position: relative; z-index: 1;
  transition: gap .2s;
}

.fl-card:hover .fl-card-cta { gap: 10px; }

/* ══ EMPTY STATE ══ */

.fl-empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--ts);
}

.fl-empty-icon { font-size: 2.5rem; display: block; margin-bottom: 12px; }

/* ══ DIVIDER ══ */

.fl-divider-section { padding: 16px 0; position: relative; z-index: 2; }

.fl-divider-inner { display: flex; align-items: center; gap: 16px; }

.fl-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--bm), transparent); }

.fl-divider-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-c); border: 1px solid var(--bm);
  border-radius: 99px; padding: 8px 18px;
  font-size: 12px; font-weight: 600; color: var(--ts);
  white-space: nowrap; backdrop-filter: blur(12px);
  flex-shrink: 0;
}

/* ══ LOCKED SECTION ══ */

.fl-locked-section { padding: 48px 0 0; position: relative; z-index: 2; }

.fl-locked-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 0;
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.85,.3,1);
}

.fl-locked-grid.fl-in { opacity:1; transform:none; }

.fl-locked-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--bg-c); border: 1px solid var(--bs);
  border-radius: 14px; padding: 14px 16px;
  cursor: pointer; backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(16px);
  transition: transform .25s, border-color .22s, box-shadow .25s,
              opacity .45s ease, transform .45s cubic-bezier(.2,.85,.3,1);
  filter: blur(0px);
}

.fl-locked-card.fl-in { opacity:1; transform:none; }

.fl-locked-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--_vbord);
  box-shadow: 0 10px 30px rgba(129,140,248,.12);
}

.fl-locked-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}

.fl-locked-info { flex: 1; min-width: 0; }

.fl-locked-title {
  font-family: var(--_fd); font-size: 13px; font-weight: 700;
  color: var(--tp); letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fl-locked-sub { font-size: 11px; color: var(--tm); margin-top: 2px; }

.fl-lock-badge {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 11px; font-weight: 600;
  background: var(--_vdim); border: 1px solid var(--_vbord);
  color: var(--_viol); border-radius: 99px; padding: 4px 10px;
  transition: background .2s;
}

.fl-locked-card:hover .fl-lock-badge {
  background: var(--_viol); color: #fff;
  border-color: var(--_viol);
}

/* Fade overlay */

.fl-locked-fade {
  position: relative; margin-top: -180px; padding-top: 40px; z-index: 3;
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 55%);
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 280px; padding-bottom: 72px;
}

.fl-locked-fade-inner {
  text-align: center; position: relative; z-index: 4;
}

.fl-locked-fade-icon { font-size: 2.2rem; display: block; margin-bottom: 12px; }

.fl-locked-fade-text {
  font-size: 15px; color: var(--ts); font-weight: 300;
  max-width: 460px; margin: 0 auto 22px; line-height: 1.65;
}

/* ══ BUTTONS ══ */

.fl-unlock-btn,
.fl-cta-primary {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg,#6366f1,#00d4aa,#38bdf8);
  border: none; border-radius: 12px; padding: 13px 28px;
  font-size: 14.5px; font-weight: 500; color: #fff; cursor: pointer;
  transition: transform .2s, box-shadow .2s; text-decoration: none;
  font-family: var(--_fb); overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,212,170,.25);
}

.fl-unlock-btn:hover,
.fl-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,212,170,.38); }

.fl-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--bm);
  border-radius: 12px; padding: 13px 24px;
  font-size: 14.5px; font-weight: 500; color: var(--ts);
  cursor: pointer; transition: all .2s; text-decoration: none;
  font-family: var(--_fb); backdrop-filter: blur(8px);
}

.fl-cta-ghost:hover { border-color: var(--_tbord); color: var(--_teal); background: var(--_tdim); }

.fl-btn-shim {
  position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: flShim 3.5s ease infinite; pointer-events: none;
}

@keyframes flShim { 0%{left:-100%} 30%{left:120%} 100%{left:120%} }

/* ══ CTA SECTION ══ */

.fl-cta-section { padding: 40px 0 120px; position: relative; z-index: 2; }

.fl-cta-box {
  position: relative; overflow: hidden;
  background: var(--bg-c); border: 1px solid var(--bm);
  border-radius: 28px; padding: 72px 40px;
  backdrop-filter: blur(28px); text-align: center;
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.85,.3,1);
  box-shadow: 0 0 0 1px rgba(0,212,170,.1), 0 32px 80px rgba(0,0,0,.3);
}

.fl-cta-box.fl-in { opacity:1; transform:none; }

.fl-cta-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }

.fl-cg1 { width: 300px; height: 300px; top: -80px; left: -60px; background: rgba(0,212,170,.12); }

.fl-cg2 { width: 280px; height: 280px; bottom: -60px; right: -40px; background: rgba(99,102,241,.12); }

.fl-cta-inner { position: relative; z-index: 2; }

.fl-cta-title {
  font-family: var(--_fd, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 800; letter-spacing: -2px; color: var(--tp); margin-bottom: 14px;
}

.fl-cta-sub {
  font-size: 16px; line-height: 1.7; color: var(--ts); font-weight: 300;
  margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto;
}

.fl-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }

.fl-trust { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: var(--tm); }

.fl-trust span { display: flex; align-items: center; gap: 5px; }

/* ══ MODAL ══ */

.fl-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: flFadeIn .25s ease;
}

@keyframes flFadeIn { from{opacity:0} to{opacity:1} }

.fl-modal {
  position: relative;
  background: var(--bg-c); border: 1px solid var(--bm);
  border-radius: 24px; padding: 44px 36px 36px;
  max-width: 400px; width: 100%; text-align: center;
  backdrop-filter: blur(24px);
  animation: flSlideUp .3s cubic-bezier(.2,.85,.3,1);
  box-shadow: 0 24px 72px rgba(0,0,0,.4);
}

@keyframes flSlideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

.fl-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 16px;
  color: var(--tm); cursor: pointer; padding: 4px 8px;
  border-radius: 8px; transition: background .2s;
}

.fl-modal-close:hover { background: var(--bg-2); }

.fl-modal-icon {
  width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}

.fl-modal-title {
  font-family: var(--_fd); font-size: 20px; font-weight: 800;
  color: var(--tp); letter-spacing: -.5px; margin-bottom: 6px;
}

.fl-modal-cat { font-size: 12px; color: var(--tm); margin-bottom: 14px; }

.fl-modal-body { font-size: 14px; line-height: 1.7; color: var(--ts); font-weight: 300; margin-bottom: 24px; }

.fl-modal-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.fl-modal-btns .fl-cta-primary,
.fl-modal-btns .fl-cta-ghost { width: 100%; justify-content: center; }

/* ══ RESPONSIVE ══ */

@media (max-width: 1100px) {
  .fl-cards-grid   { grid-template-columns: repeat(2, 1fr); }
  .fl-locked-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .fl-filter-scroll { gap: 6px; }
  .fl-cards-grid    { grid-template-columns: 1fr; }
  .fl-locked-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .fl-hero-title    { letter-spacing: -1.5px; }
  .fl-locked-grid   { grid-template-columns: 1fr; }
  .fl-cta-box       { padding: 48px 20px; }
  .fl-cta-btns      { flex-direction: column; align-items: center; }
  .fl-cta-primary,
  .fl-cta-ghost     { width: 100%; justify-content: center; }
  .fl-hero-stat     { border-right: none; flex: 1 0 45%; }
}

   
/* ═══════════════════════════════════════════════════════════
   SF SmartLabs · Variables & Data Types — Virtual Lab CSS
   Light Theme · Professional & Animated
   ═══════════════════════════════════════════════════════════ */
/* ── Tokens ── */
:root {
     --vl-bg:       #f8f9fc;
     --vl-surface:  #ffffff;
     --vl-surface2: #f3f4f8;
     --vl-border:   #e4e6ef;
     --vl-border2:  #d1d5e8;
     --vl-tp:       #0f1117;
     --vl-ts:       #4b5270;
     --vl-tm:       #8890aa;
     --vl-indigo:   #6366f1;
     --vl-teal:     #00d4aa;
     --vl-sky:      #38bdf8;
     --vl-amber:    #f59e0b;
     --vl-pink:     #ec4899;
     --vl-violet:   #a78bfa;
     --vl-red:      #ef4444;
     --vl-shadow:   0 2px 16px rgba(0,0,0,0.07);
     --vl-shadow-lg:0 8px 40px rgba(0,0,0,0.10);
     --fd: 'Bricolage Grotesque', sans-serif;
     --fb: 'DM Sans', sans-serif;
     --fm: 'JetBrains Mono', monospace;
   }
/* ── Reset ── */
.vl-root *, .vl-root *::before, .vl-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.vl-root { font-family: var(--fb); background: var(--vl-bg); color: var(--vl-tp); min-height: 100vh; position: relative; overflow-x: hidden; }
/* ═══ AMBIENT BG ═══ */
.vl-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.vl-amb-blob { position: absolute; border-radius: 50%; filter: blur(80px); }
.vl-blob1 { width: 600px; height: 600px; top: -100px; right: -150px; background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%); animation: vlFloat1 16s ease-in-out infinite; }
.vl-blob2 { width: 500px; height: 500px; bottom: 100px; left: -100px; background: radial-gradient(circle, rgba(0,212,170,0.05) 0%, transparent 70%); animation: vlFloat2 20s ease-in-out infinite; }
.vl-blob3 { width: 400px; height: 400px; top: 50%; left: 40%; background: radial-gradient(circle, rgba(56,189,248,0.04) 0%, transparent 70%); animation: vlFloat1 13s ease-in-out infinite reverse; }
.vl-amb-grid {
     position: absolute; inset: 0;
     background-image: radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px);
     background-size: 36px 36px;
     mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
     -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
     opacity: 0.3;
   }
@keyframes vlFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,15px)} }
@keyframes vlFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(15px,-10px)} }
/* ═══ HEADER ═══ */
.vl-header {
     position: sticky; top: 0; z-index: 100;
     background: rgba(248,249,252,0.92);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--vl-border);
     box-shadow: 0 1px 20px rgba(0,0,0,0.05);
   }
.vl-header-inner {
     max-width: 1200px; margin: 0 auto;
     padding: 20px 28px 0;
     display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
   }
.vl-badge {
     display: inline-flex; align-items: center; gap: 7px;
     background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25);
     color: var(--vl-indigo); border-radius: 99px; padding: 4px 12px;
     font-size: 11px; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 8px;
   }
.vl-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vl-indigo); animation: vlPulse 2s ease-in-out infinite; }
@keyframes vlPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
.vl-header-title { font-family: var(--fd); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.8px; color: var(--vl-tp); line-height: 1.1; }
.vl-header-accent { background: linear-gradient(110deg, var(--vl-indigo), var(--vl-teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.vl-header-sub { font-size: 12px; color: var(--vl-tm); margin-top: 4px; font-weight: 400; }
.vl-header-stats { display: flex; align-items: center; gap: 16px; padding-top: 4px; flex-shrink: 0; }
.vl-stat { display: flex; flex-direction: column; align-items: center; }
.vl-stat-num { font-family: var(--fd); font-size: 1.4rem; font-weight: 800; color: var(--vl-tp); line-height: 1; }
.vl-stat-label { font-size: 10px; color: var(--vl-tm); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.vl-stat-div { width: 1px; height: 32px; background: var(--vl-border); }
/* Tabs */
.vl-tabs {
     max-width: 1200px; margin: 0 auto; padding: 0 28px;
     display: flex; gap: 0; overflow-x: auto;
   }
.vl-tabs::-webkit-scrollbar { display: none; }
.vl-tab {
     display: flex; align-items: center; gap: 10px;
     padding: 14px 20px; background: none; border: none;
     cursor: pointer; position: relative; white-space: nowrap;
     color: var(--vl-ts); font-family: var(--fb);
     transition: color 0.2s;
   }
.vl-tab:hover { color: var(--vl-tp); }
.vl-tab-active { color: var(--vl-indigo); }
.vl-tab-icon { font-size: 16px; }
.vl-tab-label { font-size: 14px; font-weight: 600; display: block; }
.vl-tab-sub { font-size: 10px; color: var(--vl-tm); display: block; line-height: 1; }
.vl-tab-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 2.5px; background: linear-gradient(90deg, var(--vl-indigo), var(--vl-teal)); border-radius: 2px 2px 0 0; animation: vlBarIn 0.3s ease; }
@keyframes vlBarIn { from{transform:scaleX(0)} to{transform:scaleX(1)} }
/* ═══ CONTENT WRAPPER ═══ */
.vl-content { max-width: 1200px; margin: 0 auto; padding: 40px 28px; position: relative; z-index: 1; }
/* ═══ FOOTER ═══ */
.vl-footer {
     border-top: 1px solid var(--vl-border);
     padding: 20px 28px; display: flex; align-items: center; justify-content: space-between;
     font-size: 13px; color: var(--vl-tm); max-width: 1200px; margin: 0 auto;
   }
.vl-footer-cta {
     background: linear-gradient(135deg, var(--vl-indigo), var(--vl-teal));
     color: white; text-decoration: none; padding: 8px 18px; border-radius: 8px;
     font-size: 13px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s;
   }
.vl-footer-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
/* ═══════════════════════════════════════
      THEORY STYLES
      ═══════════════════════════════════════ */
.th-root { display: flex; flex-direction: column; gap: 60px; }
.th-section-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--vl-ts); margin-bottom: 12px; }
.th-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.th-section-title { font-family: var(--fd); font-size: 2rem; font-weight: 800; letter-spacing: -1px; color: var(--vl-tp); margin-bottom: 12px; }
.th-section-body { font-size: 15px; color: var(--vl-ts); line-height: 1.75; max-width: 680px; }
.th-section-body strong { color: var(--vl-tp); font-weight: 600; }
/* Intro */
.th-intro-section { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.th-concept-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.th-pill {
     display: flex; align-items: center; gap: 7px;
     background: rgba(0,0,0,0.03); border: 1px solid var(--vl-border);
     border-radius: 10px; padding: 8px 14px; font-size: 13.5px; font-weight: 500; color: var(--vl-tp);
     transition: all 0.2s;
   }
.th-pill:hover { border-color: var(--pc, #6366f1); background: color-mix(in srgb, var(--pc, #6366f1) 8%, white); }
/* Variable diagram */
.th-var-demo { display: flex; flex-direction: column; gap: 16px; }
.th-var-diagram { display: flex; gap: 20px; align-items: stretch; }
.th-var-box {
     background: white; border: 1.5px solid var(--vl-border2); border-radius: 16px;
     padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px;
     box-shadow: var(--vl-shadow); flex: 1;
     animation: vlFadeUp 0.6s cubic-bezier(.2,.85,.3,1) both;
   }
.th-var-box-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--vl-tm); }
.th-var-box-name { font-family: var(--fm); font-size: 1.1rem; font-weight: 600; color: var(--vl-indigo); }
.th-var-box-arrow { font-size: 20px; color: var(--vl-tm); }
.th-var-box-value {
     font-family: var(--fm); font-size: 2rem; font-weight: 700; color: var(--vl-tp);
     background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(0,212,170,0.1));
     border-radius: 12px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;
   }
.th-var-box-type { font-size: 11px; font-weight: 600; color: var(--vl-teal); background: rgba(0,212,170,0.1); border: 1px solid rgba(0,212,170,0.3); border-radius: 6px; padding: 2px 8px; }
.th-var-mem-block { background: #0f1117; border-radius: 12px; padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; animation: vlFadeUp 0.6s 0.1s cubic-bezier(.2,.85,.3,1) both; }
.th-var-mem-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.4); }
.th-var-mem-addr { font-family: var(--fm); font-size: 12px; color: var(--vl-teal); }
.th-var-mem-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.th-var-mem-bit {
     background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.2);
     border-radius: 4px; font-family: var(--fm); font-size: 11px; color: rgba(255,255,255,0.6);
     text-align: center; padding: 4px 2px;
     animation: vlBitIn 0.4s ease both;
   }
@keyframes vlBitIn { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }
.th-var-code-mini {
     background: white; border: 1px solid var(--vl-border); border-radius: 10px; padding: 12px 16px;
     font-family: var(--fm); font-size: 14px; text-align: center;
   }
/* Code syntax */
.kw  { color: var(--vl-indigo); font-weight: 600; }
.kw2 { color: var(--vl-indigo); font-weight: 600; }
.num { color: var(--vl-teal); }
.str { color: var(--vl-amber); }
.bool{ color: var(--vl-sky); }
.cm  { color: #9ca3af; font-style: italic; }
/* Rules */
.th-rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 8px; }
.th-rule-card {
     display: flex; align-items: flex-start; gap: 12px;
     background: white; border: 1px solid var(--vl-border); border-radius: 12px; padding: 14px 16px;
     animation: vlFadeUp 0.5s ease both;
   }
.th-rule-good { border-left: 3px solid var(--vl-teal); }
.th-rule-bad  { border-left: 3px solid var(--vl-red); }
.th-rule-tip  { border-left: 3px solid var(--vl-amber); }
.th-rule-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.th-rule-text { font-size: 13.5px; font-weight: 500; color: var(--vl-tp); margin-bottom: 4px; }
.th-rule-eg   { font-family: var(--fm); font-size: 12px; color: var(--vl-ts); }
/* Type cards */
.th-types-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 16px 0; }
.th-type-card {
     background: white; border: 1.5px solid var(--vl-border); border-radius: 14px; padding: 14px 10px;
     display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
     transition: all 0.2s; text-align: center;
   }
.th-type-card:hover { border-color: var(--tb, var(--vl-border2)); transform: translateY(-2px); box-shadow: var(--vl-shadow); }
.th-type-active { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-3px) !important; }
.th-type-icon { font-size: 22px; }
.th-type-name { font-size: 12px; font-weight: 600; color: var(--vl-tp); }
.th-type-keyword { font-family: var(--fm); font-size: 11px; color: var(--vl-tm); background: var(--vl-surface2); border-radius: 4px; padding: 2px 6px; }
/* Detail panel */
.th-detail-panel {
     display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
     background: white; border: 1.5px solid var(--tb, var(--vl-border)); border-radius: 20px; padding: 28px;
     box-shadow: var(--vl-shadow); animation: vlFadeIn 0.35s ease;
     margin-top: 4px;
   }
@keyframes vlFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes vlFadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.th-dp-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.th-dp-icon { font-size: 32px; }
.th-dp-title { font-family: var(--fd); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.5px; }
.th-dp-keyword { font-family: var(--fm); font-size: 13px; color: var(--vl-ts); background: var(--td, rgba(99,102,241,0.1)); border-radius: 6px; padding: 2px 8px; margin-top: 3px; display: inline-block; }
.th-dp-desc { font-size: 14px; color: var(--vl-ts); line-height: 1.7; margin-bottom: 18px; }
.th-dp-meta { display: flex; gap: 20px; margin-bottom: 16px; }
.th-dp-meta-item { display: flex; flex-direction: column; gap: 3px; }
.th-dp-meta-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--vl-tm); }
.th-dp-meta-val { font-size: 13px; font-weight: 700; }
.th-dp-range { font-size: 12px !important; color: var(--vl-ts) !important; font-family: var(--fm); }
.th-dp-uses { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.th-dp-uses-label { font-size: 12px; color: var(--vl-tm); font-weight: 500; }
.th-dp-use-chip { font-size: 11.5px; font-weight: 600; border: 1px solid; border-radius: 6px; padding: 3px 10px; }
/* Memory visual */
.th-memory { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.th-mem-cell {
     width: 32px; height: 32px; border-radius: 6px; border: 1.5px solid var(--vl-border);
     display: flex; align-items: center; justify-content: center;
     font-family: var(--fm); font-size: 11px; color: var(--vl-tm); background: var(--vl-surface2);
     animation: vlBitIn 0.3s ease both;
   }
.th-mem-filled { background: var(--td, rgba(99,102,241,0.1)); border-color: var(--tb, rgba(99,102,241,0.3)); color: var(--tc, var(--vl-indigo)); font-weight: 700; }
/* Code block */
.th-code-block { border-radius: 14px; overflow: hidden; border: 1px solid #1e2230; background: #0d1117; }
.th-code-header { background: #161b27; padding: 10px 16px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #1e2230; }
.th-dot { width: 11px; height: 11px; border-radius: 50%; }
.th-dot-r { background: #ff5f57; }
.th-dot-y { background: #febc2e; }
.th-dot-g { background: #28c840; }
.th-code-lang { font-size: 11px; color: rgba(255,255,255,0.3); font-family: var(--fm); margin-left: auto; }
.th-code-body { padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; }
.th-code-line { display: flex; gap: 12px; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s ease, transform 0.4s ease; font-family: var(--fm); font-size: 13.5px; }
.th-code-visible { opacity: 1; transform: none; }
.th-ln { color: rgba(255,255,255,0.2); font-size: 12px; flex-shrink: 0; width: 16px; text-align: right; }
/* Type conversion */
.th-conv-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.th-conv-card {
     background: white; border: 1px solid var(--vl-border); border-radius: 14px; padding: 16px;
     display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
     animation: vlFadeUp 0.5s ease both;
   }
.th-conv-from, .th-conv-to { font-family: var(--fm); font-size: 14px; font-weight: 700; color: var(--vl-tp); background: var(--vl-surface2); border-radius: 8px; padding: 6px 14px; }
.th-conv-arrow { display: flex; flex-direction: column; align-items: center; font-size: 18px; font-weight: 700; }
.th-conv-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.th-arr-safe  { color: var(--vl-teal); }
.th-arr-warn  { color: var(--vl-amber); }
.th-arr-info  { color: var(--vl-indigo); }
.th-conv-ex { font-family: var(--fm); font-size: 11px; color: var(--vl-ts); margin-top: 4px; text-align: center; }
/* ═══════════════════════════════════════
      SIMULATION STYLES
      ═══════════════════════════════════════ */
.sim-root { display: flex; flex-direction: column; gap: 40px; }
.sim-section { background: white; border-radius: 20px; border: 1px solid var(--vl-border); padding: 28px; box-shadow: var(--vl-shadow); }
.sim-section-head { margin-bottom: 20px; }
.sim-section-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--vl-ts); margin-bottom: 10px; }
.sim-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; }
.sim-section-title { font-family: var(--fd); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.7px; }
/* Creator */
.sim-creator { background: var(--vl-surface2); border-radius: 14px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--vl-border); }
.sim-creator-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.sim-creator-row + .sim-creator-row { margin-top: 14px; }
.sim-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px; }
.sim-field-name { flex: 1.2; }
.sim-field-val  { flex: 1.2; }
.sim-field-eq { font-family: var(--fd); font-size: 1.5rem; font-weight: 800; color: var(--vl-indigo); padding-bottom: 6px; }
.sim-label { font-size: 12px; font-weight: 600; color: var(--vl-ts); letter-spacing: 0.2px; }
.sim-input, .sim-select {
     background: white; border: 1.5px solid var(--vl-border); border-radius: 10px; padding: 10px 14px;
     font-family: var(--fb); font-size: 14px; color: var(--vl-tp); outline: none;
     transition: border-color 0.2s, box-shadow 0.2s;
   }
.sim-input:focus, .sim-select:focus {
     border-color: var(--vl-indigo);
     box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
   }
.sim-input-err { border-color: var(--vl-red) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.08) !important; }
.sim-err { font-size: 11.5px; color: var(--vl-red); }
.sim-type-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-type-btn {
     display: flex; align-items: center; gap: 5px;
     background: white; border: 1.5px solid var(--vl-border); border-radius: 8px; padding: 6px 12px;
     font-family: var(--fb); font-size: 12.5px; font-weight: 600; color: var(--vl-ts);
     cursor: pointer; transition: all 0.2s;
   }
.sim-type-btn:hover { border-color: var(--vl-border2); background: var(--vl-surface2); color: var(--vl-tp); }
.sim-type-sel { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.sim-add-btn {
     background: linear-gradient(135deg, var(--vl-indigo), var(--vl-teal)); border: none;
     color: white; border-radius: 10px; padding: 10px 20px; font-family: var(--fb);
     font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
     transition: transform 0.2s, box-shadow 0.2s;
   }
.sim-add-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
.sim-cancel-btn {
     background: none; border: 1.5px solid var(--vl-border); color: var(--vl-ts); border-radius: 10px;
     padding: 10px 16px; font-family: var(--fb); font-size: 13px; cursor: pointer; white-space: nowrap;
   }
.sim-cancel-btn:hover { border-color: var(--vl-red); color: var(--vl-red); }
/* Variables table */
.sim-vars-table { display: flex; flex-direction: column; gap: 1px; border-radius: 12px; overflow: hidden; border: 1px solid var(--vl-border); }
.sim-table-header {
     display: grid; grid-template-columns: 36px 90px 1fr 20px 1fr 1fr 80px;
     gap: 12px; align-items: center;
     background: var(--vl-surface2); padding: 10px 16px;
     font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vl-tm);
   }
.sim-var-row {
     display: grid; grid-template-columns: 36px 90px 1fr 20px 1fr 1fr 80px;
     gap: 12px; align-items: center;
     background: white; padding: 12px 16px; border-top: 1px solid var(--vl-border);
     animation: vlFadeIn 0.3s ease;
     transition: background 0.2s;
   }
.sim-var-row:hover { background: #fafbff; }
.sim-var-index { font-size: 12px; color: var(--vl-tm); font-weight: 700; text-align: center; }
.sim-var-type-badge { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.sim-var-name code { font-family: var(--fm); font-size: 13px; font-weight: 600; color: var(--vl-tp); }
.sim-var-eq { color: var(--vl-tm); font-weight: 700; }
.sim-var-value code { font-family: var(--fm); font-size: 13px; }
.sim-var-mem { display: flex; align-items: center; gap: 6px; }
.sim-mem-label { font-size: 9px; text-transform: uppercase; color: var(--vl-tm); letter-spacing: 0.5px; }
.sim-mem-bits { display: flex; gap: 2px; }
.sim-bit {
     width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--vl-border);
     display: flex; align-items: center; justify-content: center;
     font-family: var(--fm); font-size: 7px; color: var(--vl-tm); background: var(--vl-surface2);
     animation: vlBitIn 0.3s ease both;
   }
.sim-bit-on { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.3); color: var(--vl-indigo); font-weight: 700; }
.sim-mem-bytes { font-size: 10px; color: var(--vl-tm); font-family: var(--fm); white-space: nowrap; }
.sim-var-actions { display: flex; gap: 6px; }
.sim-action-btn { background: none; border: 1px solid var(--vl-border); border-radius: 7px; padding: 5px 8px; font-size: 13px; cursor: pointer; transition: all 0.15s; }
.sim-edit-btn:hover { border-color: var(--vl-indigo); background: rgba(99,102,241,0.08); }
.sim-del-btn:hover  { border-color: var(--vl-red);    background: rgba(239,68,68,0.08); }
.sim-empty { text-align: center; padding: 32px; color: var(--vl-tm); font-size: 14px; }
.sim-total-mem {
     background: var(--vl-surface2); padding: 10px 16px;
     font-size: 12.5px; color: var(--vl-ts); text-align: right; border-top: 1px solid var(--vl-border);
   }
.sim-total-mem b { color: var(--vl-indigo); }
/* Ops */
.sim-ops-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.sim-op-tab {
     background: var(--vl-surface2); border: 1.5px solid var(--vl-border); border-radius: 10px;
     padding: 8px 16px; font-family: var(--fb); font-size: 13px; font-weight: 600; color: var(--vl-ts);
     cursor: pointer; transition: all 0.2s;
   }
.sim-op-tab:hover { border-color: var(--vl-indigo); color: var(--vl-indigo); background: rgba(99,102,241,0.06); }
.sim-op-tab-active { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.4); color: var(--vl-indigo); }
.sim-ops-panel { background: var(--vl-surface2); border-radius: 14px; padding: 20px; border: 1px solid var(--vl-border); }
.sim-op-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.sim-select { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
.sim-operators { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-op-btn { background: white; border: 1.5px solid var(--vl-border); border-radius: 8px; padding: 6px 12px; font-family: var(--fm); font-size: 14px; font-weight: 700; color: var(--vl-ts); cursor: pointer; transition: all 0.15s; }
.sim-op-btn:hover { border-color: var(--vl-indigo); color: var(--vl-indigo); }
.sim-op-active { background: rgba(99,102,241,0.1); border-color: var(--vl-indigo); color: var(--vl-indigo); }
.sim-cast-arrow { font-size: 1.8rem; font-weight: 800; color: var(--vl-indigo); padding-bottom: 8px; }
.sim-run-btn { background: var(--vl-indigo); border: none; color: white; border-radius: 10px; padding: 10px 22px; font-family: var(--fb); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.sim-run-btn:hover { background: #5254cc; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99,102,241,0.35); }
.sim-result-box { margin-top: 16px; background: white; border: 1.5px solid rgba(0,212,170,0.3); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; animation: vlFadeIn 0.3s ease; }
.sim-result-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vl-teal); white-space: nowrap; }
.sim-result-code { font-family: var(--fm); font-size: 14px; color: var(--vl-tp); }
/* Console */
.sim-console-wrap { background: #0d1117; border-radius: 16px; overflow: hidden; border: 1px solid #1e2230; }
.sim-console-header { background: #161b27; padding: 10px 16px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #1e2230; }
.sim-con-dot { width: 11px; height: 11px; border-radius: 50%; }
.sim-con-dot.r { background: #ff5f57; }
.sim-con-dot.y { background: #febc2e; }
.sim-con-dot.g { background: #28c840; }
.sim-con-title { font-size: 12px; color: rgba(255,255,255,0.5); font-family: var(--fm); margin-left: 8px; }
.sim-con-clear { margin-left: auto; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); border-radius: 5px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.sim-con-clear:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }
.sim-console { padding: 14px 16px; min-height: 140px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.sim-console::-webkit-scrollbar { width: 4px; }
.sim-console::-webkit-scrollbar-track { background: transparent; }
.sim-console::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.sim-con-line { font-family: var(--fm); font-size: 12.5px; line-height: 1.5; animation: vlFadeIn 0.25s ease; }
.sim-con-output { color: rgba(255,255,255,0.85); }
.sim-con-info   { color: rgba(56,189,248,0.9); }
.sim-con-warn   { color: rgba(245,158,11,0.9); }
.sim-con-error  { color: rgba(239,68,68,0.9); }
/* ═══════════════════════════════════════
      QUIZ STYLES
      ═══════════════════════════════════════ */
.qz-root { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin: 0 auto; }
/* Progress */
.qz-progress { background: white; border-radius: 14px; padding: 16px 20px; border: 1px solid var(--vl-border); box-shadow: var(--vl-shadow); }
.qz-prog-info { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: var(--vl-ts); }
.qz-prog-score b { font-family: var(--fd); }
.qz-prog-track { height: 8px; background: var(--vl-surface2); border-radius: 99px; position: relative; overflow: hidden; }
.qz-prog-fill { height: 100%; background: linear-gradient(90deg, var(--vl-indigo), var(--vl-teal)); border-radius: 99px; transition: width 0.5s cubic-bezier(.2,.85,.3,1); }
.qz-prog-pip { position: absolute; top: -2px; width: 2px; height: 12px; background: white; border-radius: 1px; transform: translateX(-50%); }
.qz-pip-done { background: transparent; }
/* Timer */
.qz-timer { display: flex; align-items: center; gap: 12px; }
.qz-timer-track { flex: 1; height: 5px; background: var(--vl-surface2); border-radius: 99px; overflow: hidden; }
.qz-timer-fill { height: 100%; border-radius: 99px; }
.qz-timer-num { font-family: var(--fm); font-size: 13px; font-weight: 700; min-width: 30px; text-align: right; }
/* Question card */
.qz-card { background: white; border-radius: 20px; border: 1px solid var(--vl-border); padding: 32px; box-shadow: var(--vl-shadow-lg); animation: vlFadeIn 0.3s ease; }
.qz-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.qz-cat-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(99,102,241,0.1); color: var(--vl-indigo); border: 1px solid rgba(99,102,241,0.25); border-radius: 6px; padding: 3px 10px; }
.qz-diff-badge { font-size: 11px; font-weight: 700; border: 1px solid; border-radius: 6px; padding: 3px 10px; }
.qz-q-num { font-size: 11px; color: var(--vl-tm); margin-left: auto; font-family: var(--fm); }
.qz-question { font-family: var(--fd); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.4px; color: var(--vl-tp); line-height: 1.45; margin-bottom: 24px; }
.qz-timeout { text-align: center; font-size: 16px; font-weight: 700; color: var(--vl-red); padding: 8px; animation: vlFadeIn 0.3s ease; }
.qz-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.qz-option {
     display: flex; align-items: center; gap: 14px;
     background: var(--vl-surface2); border: 1.5px solid var(--vl-border);
     border-radius: 12px; padding: 13px 18px; cursor: pointer;
     font-family: var(--fb); font-size: 14.5px; color: var(--vl-tp); text-align: left;
     transition: all 0.2s; width: 100%;
   }
.qz-option:hover:not(:disabled) { border-color: var(--vl-indigo); background: rgba(99,102,241,0.06); transform: translateX(3px); }
.qz-option:disabled { cursor: default; }
.qz-opt-selected { border-color: var(--vl-indigo) !important; background: rgba(99,102,241,0.1) !important; }
.qz-opt-correct  { border-color: var(--vl-teal) !important; background: rgba(0,212,170,0.1) !important; }
.qz-opt-wrong    { border-color: var(--vl-red) !important; background: rgba(239,68,68,0.07) !important; }
.qz-opt-letter { width: 30px; height: 30px; border-radius: 8px; background: white; border: 1.5px solid var(--vl-border); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.qz-opt-text { flex: 1; }
.qz-opt-check { color: var(--vl-teal); font-weight: 800; margin-left: auto; }
.qz-opt-x     { color: var(--vl-red);  font-weight: 800; margin-left: auto; }
/* Explanation */
.qz-explanation {
     display: flex; align-items: flex-start; gap: 14px;
     border-radius: 14px; padding: 16px 18px; margin-bottom: 20px;
     animation: vlFadeIn 0.3s ease;
   }
.qz-exp-correct { background: rgba(0,212,170,0.08); border: 1.5px solid rgba(0,212,170,0.3); }
.qz-exp-wrong   { background: rgba(239,68,68,0.06); border: 1.5px solid rgba(239,68,68,0.2); }
.qz-exp-icon { font-size: 22px; flex-shrink: 0; }
.qz-exp-title { font-size: 14px; font-weight: 700; color: var(--vl-tp); margin-bottom: 5px; }
.qz-exp-text  { font-size: 13.5px; color: var(--vl-ts); line-height: 1.65; }
.qz-next-btn {
     width: 100%; background: linear-gradient(135deg, var(--vl-indigo), var(--vl-teal));
     border: none; color: white; border-radius: 13px; padding: 14px; font-family: var(--fb);
     font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s;
   }
.qz-next-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,0.35); }
/* Result screen */
.qz-result { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.qz-result-header { text-align: center; }
.qz-result-grade {
     font-family: var(--fd); font-size: 4rem; font-weight: 800;
     width: 100px; height: 100px; border-radius: 50%; border: 3px solid;
     display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
     animation: vlPop 0.4s cubic-bezier(.2,.85,.3,1.4) both;
   }
@keyframes vlPop { from{transform:scale(0)} to{transform:scale(1)} }
.qz-result-title { font-family: var(--fd); font-size: 2rem; font-weight: 800; letter-spacing: -0.8px; color: var(--vl-tp); margin-bottom: 8px; }
.qz-result-msg { font-size: 15px; color: var(--vl-ts); line-height: 1.6; }
.qz-result-stats { display: flex; justify-content: center; gap: 32px; background: white; border-radius: 16px; padding: 24px; border: 1px solid var(--vl-border); box-shadow: var(--vl-shadow); }
.qz-rs-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qz-rs-num { font-family: var(--fd); font-size: 2.4rem; font-weight: 800; color: var(--rc, var(--vl-indigo)); line-height: 1; }
.qz-rs-label { font-size: 12px; color: var(--vl-tm); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.qz-review { display: flex; flex-direction: column; gap: 8px; }
.qz-review-title { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--vl-tp); margin-bottom: 4px; }
.qz-review-item { display: flex; align-items: flex-start; gap: 12px; background: white; border-radius: 12px; padding: 12px 16px; border: 1px solid var(--vl-border); animation: vlFadeIn 0.3s ease both; }
.qz-rev-correct { border-left: 3px solid var(--vl-teal); }
.qz-rev-wrong   { border-left: 3px solid var(--vl-red); }
.qz-rev-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.qz-rev-q { font-size: 13px; color: var(--vl-tp); margin-bottom: 4px; }
.qz-rev-a { font-size: 12px; color: var(--vl-ts); }
.qz-retry-btn { background: linear-gradient(135deg, var(--vl-indigo), var(--vl-teal)); border: none; color: white; border-radius: 13px; padding: 14px 32px; font-family: var(--fb); font-size: 15px; font-weight: 700; cursor: pointer; align-self: center; transition: all 0.2s; }
.qz-retry-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,0.35); }
/* ═══════════════════════════════════════
      APPLICATION STYLES
      ═══════════════════════════════════════ */
.app-root { display: flex; flex-direction: column; gap: 36px; }
.app-section { background: white; border-radius: 20px; border: 1px solid var(--vl-border); padding: 28px; box-shadow: var(--vl-shadow); }
.app-section-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--vl-ts); margin-bottom: 10px; }
.app-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; }
.app-section-title { font-family: var(--fd); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.7px; color: var(--vl-tp); margin-bottom: 8px; }
.app-section-sub { font-size: 14px; color: var(--vl-ts); line-height: 1.6; max-width: 640px; }
.app-form-header { display: flex; align-items: center; justify-content: space-between; }
.app-reset-btn { background: none; border: 1.5px solid var(--vl-border); color: var(--vl-ts); border-radius: 8px; padding: 7px 14px; font-family: var(--fb); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.app-reset-btn:hover { border-color: var(--vl-red); color: var(--vl-red); }
/* Project cards */
.app-project-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.app-project-card {
     display: flex; align-items: flex-start; gap: 14px;
     background: var(--vl-surface2); border: 1.5px solid var(--vl-border); border-radius: 14px;
     padding: 16px 18px; cursor: pointer; text-align: left; transition: all 0.2s; width: 100%;
     font-family: var(--fb);
   }
.app-project-card:hover { box-shadow: var(--vl-shadow); transform: translateY(-2px); }
.app-proj-active { box-shadow: var(--vl-shadow-lg) !important; }
.app-proj-icon { font-size: 26px; flex-shrink: 0; }
.app-proj-title { font-size: 14px; font-weight: 700; color: var(--vl-tp); margin-bottom: 4px; }
.app-proj-desc { font-size: 12px; color: var(--vl-ts); line-height: 1.5; }
.app-proj-check { margin-left: auto; font-size: 18px; font-weight: 800; flex-shrink: 0; }
/* Fields grid */
.app-fields-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.app-field { display: flex; flex-direction: column; gap: 7px; }
.app-label { display: flex; align-items: center; justify-content: space-between; }
.app-label-text { font-size: 13px; font-weight: 600; color: var(--vl-tp); }
.app-type-tag { font-size: 11px; font-weight: 700; border: 1px solid; border-radius: 6px; padding: 2px 8px; }
.app-input {
     background: var(--vl-surface2); border: 1.5px solid var(--vl-border); border-radius: 10px;
     padding: 10px 14px; font-family: var(--fb); font-size: 14px; color: var(--vl-tp);
     outline: none; transition: border-color 0.2s, box-shadow 0.2s;
   }
.app-input:focus { border-color: var(--fc, var(--vl-indigo)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc, var(--vl-indigo)) 15%, transparent); }
.app-bool-toggle { display: flex; gap: 8px; }
.app-bool-btn {
     flex: 1; background: var(--vl-surface2); border: 1.5px solid var(--vl-border); border-radius: 10px;
     padding: 10px; font-family: var(--fb); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
   }
.app-field-hint { font-size: 11px; color: var(--vl-tm); }
/* Data cards */
.app-data-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; min-height: 80px; }
.app-data-card {
     background: var(--td, rgba(99,102,241,0.08)); border: 1.5px solid var(--tb, rgba(99,102,241,0.25));
     border-radius: 12px; padding: 12px 16px; min-width: 140px;
     animation: vlFadeIn 0.3s ease;
   }
.app-dc-type { font-size: 11px; font-weight: 700; margin-bottom: 5px; }
.app-dc-key { font-family: var(--fm); font-size: 12px; color: var(--vl-ts); margin-bottom: 4px; }
.app-dc-val { font-family: var(--fm); font-size: 15px; font-weight: 700; }
.app-data-empty { color: var(--vl-tm); font-size: 14px; padding: 20px; width: 100%; text-align: center; }
/* Code output */
.app-code-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.app-lang-tabs { display: flex; gap: 4px; }
.app-lang-tab { background: var(--vl-surface2); border: 1.5px solid var(--vl-border); border-radius: 8px; padding: 6px 14px; font-family: var(--fb); font-size: 13px; font-weight: 600; color: var(--vl-ts); cursor: pointer; transition: all 0.2s; }
.app-lang-tab:hover { border-color: var(--vl-indigo); color: var(--vl-indigo); }
.app-lang-active { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.4); color: var(--vl-indigo); }
.app-code-block { border-radius: 14px; overflow: hidden; border: 1px solid #1e2230; background: #0d1117; }
.app-code-header { background: #161b27; padding: 10px 16px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #1e2230; }
.app-dot { width: 11px; height: 11px; border-radius: 50%; }
.app-dot.r { background: #ff5f57; }
.app-dot.y { background: #febc2e; }
.app-dot.g { background: #28c840; }
.app-code-lang { font-size: 11px; color: rgba(255,255,255,0.3); font-family: var(--fm); }
.app-copy-btn { margin-left: auto; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: var(--fb); transition: all 0.2s; }
.app-copy-btn:hover { background: rgba(255,255,255,0.14); color: white; }
.app-code-body { padding: 20px 16px; display: flex; flex-direction: column; gap: 3px; max-height: 480px; overflow-y: auto; }
.app-code-body::-webkit-scrollbar { width: 4px; }
.app-code-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.app-code-line { display: flex; gap: 14px; font-family: var(--fm); font-size: 13px; animation: vlFadeIn 0.3s ease both; }
.app-ln { color: rgba(255,255,255,0.2); font-size: 11px; flex-shrink: 0; width: 18px; text-align: right; padding-top: 1px; }
.app-code-empty { text-align: center; padding: 32px; color: var(--vl-tm); font-size: 14px; font-style: italic; }
/* Summary */
.app-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
.app-summary-card {
     background: var(--td, rgba(99,102,241,0.07)); border: 1.5px solid var(--tb, rgba(99,102,241,0.2));
     border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
     animation: vlFadeUp 0.4s ease both;
   }
.app-sum-icon { font-size: 28px; }
.app-sum-type { font-family: var(--fm); font-size: 14px; font-weight: 800; }
.app-sum-fields { font-size: 11px; color: var(--vl-ts); font-family: var(--fm); }
.app-sum-count { font-size: 11px; font-weight: 600; color: var(--vl-tm); }
/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
     .th-intro-section { grid-template-columns: 1fr; }
     .th-detail-panel  { grid-template-columns: 1fr; }
     .th-types-grid    { grid-template-columns: repeat(3, 1fr); }
     .th-conv-flow     { grid-template-columns: repeat(2, 1fr); }
     .app-project-cards{ grid-template-columns: 1fr; }
   }
@media (max-width: 768px) {
     .vl-header-inner  { flex-direction: column; }
     .vl-tabs          { gap: 0; }
     .vl-tab           { padding: 12px 14px; }
     .vl-content       { padding: 24px 16px; }
     .th-types-grid    { grid-template-columns: repeat(2, 1fr); }
     .sim-table-header { display: none; }
     .sim-var-row      { grid-template-columns: 1fr 1fr; row-gap: 8px; padding: 14px; }
     .sim-var-index    { display: none; }
     .qz-result-stats  { gap: 20px; }
   }
@media (max-width: 480px) {
     .th-types-grid { grid-template-columns: repeat(2, 1fr); }
     .vl-stat { display: none; }
     .vl-stat:first-child { display: flex; }
   }

   
/* ═══════════════════════════════════════════════════════════
   SF SmartLabs · Bubble Sort Algorithm Lab — CSS
   Light Theme · Matches Variable Lab Aesthetic
   ═══════════════════════════════════════════════════════════ */
/* ── Tokens ── */
:root {
     --bg:        #f8f9fc;
     --surface:   #ffffff;
     --surface2:  #f3f4f8;
     --border:    #e4e6ef;
     --border2:   #d1d5e8;
     --tp:        #0f1117;
     --ts:        #4b5270;
     --tm:        #8890aa;
     --accent:    #6366f1;
     --accent2:   #00d4aa;
     --warn:      #f59e0b;
     --danger:    #ef4444;
     --pink:      #ec4899;
     --purple:    #a78bfa;
     --blue:      #38bdf8;
     --shadow:    0 2px 16px rgba(0,0,0,0.07);
     --shadow-lg: 0 8px 40px rgba(0,0,0,0.10);
     --radius:    12px;
     --radius-lg: 20px;
     --fd: 'Bricolage Grotesque', sans-serif;
     --fb: 'DM Sans', sans-serif;
     --fm: 'JetBrains Mono', monospace;
   }
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }
/* ════════════════════════════════
      MAIN LAYOUT
      ════════════════════════════════ */
.bsl-root {
     min-height: 100vh;
     background: var(--bg);
     color: var(--tp);
     font-family: var(--fb);
     position: relative;
     overflow-x: hidden;
   }
/* Ambient background */
.bsl-ambient {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
   }
.bsl-blob {
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
   }
.bsl-blob1 { width: 600px; height: 600px; top: -100px; right: -150px; background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%); animation: bslFloat1 16s ease-in-out infinite; }
.bsl-blob2 { width: 500px; height: 500px; bottom: 100px; left: -100px; background: radial-gradient(circle, rgba(0,212,170,0.05) 0%, transparent 70%); animation: bslFloat2 20s ease-in-out infinite; }
.bsl-blob3 { width: 400px; height: 400px; top: 50%; left: 40%; background: radial-gradient(circle, rgba(56,189,248,0.04) 0%, transparent 70%); animation: bslFloat1 13s ease-in-out infinite reverse; }
@keyframes bslFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,15px)} }
@keyframes bslFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(15px,-10px)} }
.bsl-grid {
     position: absolute; inset: 0;
     background-image: radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px);
     background-size: 36px 36px;
     mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
     -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
     opacity: 0.3;
   }
/* ── Header ── */
.bsl-header {
     position: sticky; top: 0; z-index: 100;
     background: rgba(248,249,252,0.92);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     box-shadow: 0 1px 20px rgba(0,0,0,0.05);
   }
.bsl-header-inner {
     max-width: 1200px; margin: 0 auto;
     padding: 20px 28px 0;
     display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
   }
.bsl-header-left { flex: 1; }
.bsl-badge {
     display: inline-flex; align-items: center; gap: 7px;
     background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25);
     color: var(--accent); border-radius: 99px; padding: 4px 12px;
     font-size: 11px; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 8px;
   }
.bsl-badge-dot {
     width: 6px; height: 6px; border-radius: 50%;
     background: var(--accent2); animation: bslPulse 2s ease-in-out infinite;
   }
@keyframes bslPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
.bsl-title {
     font-family: var(--fd);
     font-size: clamp(1.5rem, 3vw, 2rem);
     font-weight: 800; letter-spacing: -0.8px;
     color: var(--tp); line-height: 1.1;
   }
.bsl-title-accent {
     background: linear-gradient(110deg, var(--accent), var(--accent2));
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     background-clip: text;
   }
.bsl-subtitle { font-size: 12px; color: var(--tm); margin-top: 4px; }
.bsl-header-stats {
     display: flex; align-items: center; gap: 16px;
     padding-top: 4px; flex-shrink: 0;
   }
.bsl-stat { display: flex; flex-direction: column; align-items: center; }
.bsl-stat-num { font-family: var(--fd); font-size: 1.4rem; font-weight: 800; color: var(--tp); line-height: 1; }
.bsl-stat-label { font-size: 10px; color: var(--tm); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.bsl-stat-div { width: 1px; height: 32px; background: var(--border); }
/* Tabs */
.bsl-tabs {
     max-width: 1200px; margin: 0 auto; padding: 0 28px;
     display: flex; gap: 0; overflow-x: auto;
   }
.bsl-tabs::-webkit-scrollbar { display: none; }
.bsl-tab {
     display: flex; align-items: center; gap: 10px;
     padding: 14px 20px; background: none; border: none;
     cursor: pointer; position: relative; white-space: nowrap;
     color: var(--ts); font-family: var(--fb);
     transition: color 0.2s;
     border-bottom: 2px solid transparent;
   }
.bsl-tab:hover { color: var(--tp); background: rgba(0,0,0,0.02); }
.bsl-tab-active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.bsl-tab-icon { font-size: 16px; }
.bsl-tab-text { text-align: left; }
.bsl-tab-label { font-size: 14px; font-weight: 600; display: block; }
.bsl-tab-sub { font-size: 10px; color: var(--tm); display: block; line-height: 1; }
/* ── Content ── */
.bsl-content {
     max-width: 1200px; margin: 0 auto;
     padding: 40px 28px; position: relative; z-index: 1;
   }
/* ── Footer ── */
.bsl-footer {
     border-top: 1px solid var(--border);
     padding: 20px 28px;
     display: flex; align-items: center; justify-content: space-between;
     font-size: 13px; color: var(--tm);
     max-width: 1200px; margin: 0 auto;
   }
.bsl-footer-cta {
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     color: white; text-decoration: none;
     padding: 8px 18px; border-radius: 8px;
     font-size: 13px; font-weight: 600;
     transition: transform 0.2s, box-shadow 0.2s;
   }
.bsl-footer-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
/* ════════════════════════════════
      SHARED COMPONENTS
      ════════════════════════════════ */
.bs-eyebrow {
     display: flex; align-items: center; gap: 8px;
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 1px; color: var(--ts); margin-bottom: 0.5rem;
   }
.bs-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bs-section-title {
     font-family: var(--fd);
     font-size: clamp(1.4rem, 3vw, 2rem);
     font-weight: 800; letter-spacing: -0.8px;
     color: var(--tp); margin-bottom: 1.25rem;
   }
.bs-body-text { color: var(--ts); line-height: 1.75; margin-bottom: 1.5rem; }
.bs-body-text strong { color: var(--tp); font-weight: 600; }
/* Code block */
.bs-code-block {
     background: #0d1117;
     border: 1px solid #1e2230;
     border-radius: var(--radius-lg);
     overflow: hidden;
   }
.bs-code-header {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 16px; background: #161b27;
     border-bottom: 1px solid #1e2230;
   }
.bs-dot { width: 11px; height: 11px; border-radius: 50%; }
.bs-dot-r { background: #ff5f57; }
.bs-dot-y { background: #febc2e; }
.bs-dot-g { background: #28c840; }
.bs-code-lang { margin-left: auto; font-size: 11px; color: rgba(255,255,255,0.3); font-family: var(--fm); }
.bs-code-body { padding: 1.5rem; font-family: var(--fm); font-size: 13px; line-height: 1.8; overflow-x: auto; }
.bs-code-line { opacity: 0; transform: translateX(-8px); transition: opacity 0.35s, transform 0.35s; }
.bs-code-vis { opacity: 1; transform: translateX(0); }
.bs-ln { display: inline-block; width: 28px; color: rgba(255,255,255,0.2); -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 11px; }
/* ════════════════════════════════
      THEORY
      ════════════════════════════════ */
.bs-theory-root { display: flex; flex-direction: column; gap: 48px; }
/* Animations */
@keyframes bslFadeIn  { from{opacity:0;transform:translateY(8px)}  to{opacity:1;transform:translateY(0)} }
@keyframes bslFadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes bslPop     { from{transform:scale(0)}                   to{transform:scale(1)} }
@keyframes bslBarIn   { from{transform:scaleX(0)}                  to{transform:scaleX(1)} }
@keyframes bslBitIn   { from{opacity:0;transform:scale(0.5)}       to{opacity:1;transform:scale(1)} }
/* Hero */
.bs-hero-section {
     display: grid; grid-template-columns: 1fr auto;
     gap: 3rem; align-items: center;
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: var(--radius-lg);
     padding: 3rem;
     box-shadow: var(--shadow);
     animation: bslFadeIn 0.5s ease;
   }
.bs-concept-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; }
.bs-pill {
     display: flex; align-items: center; gap: 10px;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 10px 16px;
     font-size: 0.85rem; transition: all 0.2s;
   }
.bs-pill:hover { border-color: var(--border2); box-shadow: var(--shadow); }
.bs-pill b { color: var(--tp); }
.bs-pill span:last-child { color: var(--ts); font-size: 0.78rem; }
/* Bubble animation */
.bs-bubble-anim {
     display: flex; flex-direction: column; gap: 10px;
     align-items: center; padding: 1.5rem;
   }
.bs-bubble {
     width: 60px; height: 60px; border-radius: 50%; border: 2px solid;
     display: flex; align-items: center; justify-content: center;
     font-family: var(--fm); font-weight: 700; font-size: 1.1rem;
     animation: bubbleRise 2.5s ease-in-out infinite;
   }
@keyframes bubbleRise {
     0%   { transform: translateY(0) scale(1); }
     50%  { transform: translateY(-8px) scale(1.05); }
     100% { transform: translateY(0) scale(1); }
   }
.bs-bubble-label { font-size: 0.7rem; color: var(--tm); margin-top: 8px; text-align: center; }
/* Steps */
.bs-steps-section {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 3rem;
   }
.bs-steps-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; margin-top: 1.5rem; }
.bs-steps-list { display: flex; flex-direction: column; gap: 0.75rem; }
.bs-step-card {
     display: flex; align-items: flex-start; gap: 1rem;
     padding: 1rem 1.25rem;
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius); cursor: pointer; transition: all 0.2s;
     box-shadow: var(--shadow);
   }
.bs-step-card:hover { border-color: var(--border2); transform: translateX(3px); }
.bs-step-active { border-color: var(--sc, var(--accent)) !important; background: color-mix(in srgb, var(--sc, var(--accent)) 6%, white) !important; }
.bs-step-num {
     min-width: 28px; height: 28px; border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     font-family: var(--fd); font-weight: 800; font-size: 0.85rem; transition: all 0.2s;
   }
.bs-step-title { font-weight: 600; font-size: 0.9rem; color: var(--tp); margin-bottom: 4px; }
.bs-step-desc { font-size: 0.82rem; color: var(--ts); line-height: 1.5; }
.bs-steps-visual { display: flex; flex-direction: column; gap: 1rem; }
.bs-vis-demo {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
   }
.bs-bars-row { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 160px; }
.bs-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bs-bar {
     width: 36px; border: 2px solid; border-radius: 6px 6px 0 0;
     transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
.bs-bar-val { font-family: var(--fm); font-size: 12px; color: var(--ts); }
.bs-bar-idx { font-size: 10px; color: var(--tm); }
.bs-bar-val-active { color: var(--accent) !important; font-weight: 700; }
.bs-cmp-indicator {
     display: flex; align-items: center; justify-content: center; gap: 12px;
     font-family: var(--fm); font-size: 0.85rem; padding: 0.75rem;
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius); margin-top: 1rem; flex-wrap: wrap;
   }
.bs-cmp-op { color: var(--warn); font-weight: 700; }
.bs-swap   { color: var(--danger); font-weight: 700; }
.bs-noswap { color: var(--accent2); font-weight: 700; }
.bs-step-code {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 1rem 1.25rem;
     font-family: var(--fm); font-size: 12px; color: var(--accent); line-height: 1.6;
   }
/* Complexity */
.bs-complexity-section {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 3rem; box-shadow: var(--shadow);
   }
.bs-complexity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.bs-cx-card {
     background: var(--surface2);
     border: 1px solid color-mix(in srgb, var(--cc, var(--accent)) 25%, var(--border));
     border-radius: var(--radius-lg); padding: 1.75rem; text-align: center;
     animation: bslFadeUp 0.5s ease both;
   }
.bs-cx-case { font-size: 0.8rem; color: var(--tm); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; }
.bs-cx-time { font-family: var(--fd); font-size: 2rem; font-weight: 800; margin-bottom: 4px; }
.bs-cx-label { font-size: 0.75rem; color: var(--ts); margin-bottom: 1rem; }
.bs-cx-space { font-family: var(--fm); color: var(--accent2); font-size: 0.9rem; margin-bottom: 0.75rem; }
.bs-cx-note { font-size: 0.8rem; color: var(--ts); }
.bs-big-o-vis { margin-top: 2rem; }
.bs-growth-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 1rem; }
.bs-growth-row { display: flex; align-items: center; gap: 1rem; }
.bs-growth-label { min-width: 200px; font-family: var(--fm); font-size: 12px; color: var(--ts); }
.bs-growth-track { flex: 1; height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.bs-growth-fill { height: 100%; border-radius: 4px; transition: width 1s cubic-bezier(0.34,1.56,0.64,1); }
/* Pros/Cons */
.bs-proscons-section {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 3rem;
   }
.bs-proscons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.bs-pc-card {
     display: flex; align-items: flex-start; gap: 12px;
     padding: 1rem 1.25rem; border-radius: var(--radius);
     font-size: 0.9rem; border: 1px solid; background: var(--surface);
     box-shadow: var(--shadow); animation: bslFadeUp 0.4s ease both;
   }
.bs-pc-pro { border-left: 3px solid var(--accent2) !important; }
.bs-pc-con { border-left: 3px solid var(--danger) !important; }
.bs-pc-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
/* Compare table */
.bs-compare-section {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 3rem; box-shadow: var(--shadow);
   }
.bs-compare-table { border: 1px solid var(--border2); border-radius: var(--radius); overflow: hidden; margin-top: 1.5rem; }
.bs-ct-header {
     display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 0.5fr;
     background: var(--surface2); padding: 12px 20px;
     font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
     text-transform: uppercase; color: var(--tm);
     border-bottom: 1px solid var(--border); gap: 1rem;
   }
.bs-ct-row {
     display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 0.5fr;
     padding: 14px 20px; font-size: 0.85rem;
     border-bottom: 1px solid var(--border);
     align-items: center; gap: 1rem;
     font-family: var(--fm); transition: background 0.15s;
   }
.bs-ct-row:hover { background: var(--surface2); }
.bs-ct-highlight { background: rgba(99,102,241,0.05) !important; }
.bs-ct-name { font-family: var(--fb); font-weight: 600; color: var(--tp); }
.bs-ct-you {
     font-size: 11px; background: rgba(99,102,241,0.1);
     color: var(--accent); padding: 2px 8px; border-radius: 999px; margin-left: 8px;
   }
/* ════════════════════════════════
      SIMULATION
      ════════════════════════════════ */
.bs-sim-root {
     display: grid;
     grid-template-columns: 280px 1fr;
     grid-template-rows: auto auto;
     gap: 1.5rem;
   }
.bs-sim-console { grid-column: 1 / -1; }
/* Panel */
.bs-sim-panel {
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     display: flex; flex-direction: column; gap: 1.5rem;
     height: -moz-fit-content;
     height: fit-content;
     box-shadow: var(--shadow);
   }
.bs-panel-section { display: flex; flex-direction: column; gap: 0.75rem; }
.bs-panel-label {
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.1em; color: var(--tm);
   }
.bs-preset-grid { display: flex; flex-direction: column; gap: 6px; }
.bs-preset-btn {
     display: flex; justify-content: space-between; align-items: center;
     padding: 8px 12px;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: 8px; font-size: 0.8rem; color: var(--ts);
     transition: all 0.15s; text-align: left;
   }
.bs-preset-btn:hover { border-color: var(--border2); color: var(--tp); background: var(--surface); }
.bs-preset-active { border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(99,102,241,0.07) !important; }
.bs-preset-name { font-weight: 600; text-transform: capitalize; }
.bs-preset-arr { font-family: var(--fm); font-size: 10px; color: inherit; opacity: 0.7; }
.bs-custom-row { display: flex; gap: 8px; }
.bs-input {
     flex: 1; background: var(--surface2); border: 1.5px solid var(--border);
     border-radius: 8px; padding: 8px 12px; color: var(--tp);
     font-size: 0.85rem; outline: none; transition: border-color 0.15s;
   }
.bs-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.bs-input-err { border-color: var(--danger) !important; }
.bs-input-err-msg { font-size: 0.78rem; color: var(--danger); }
.bs-apply-btn {
     padding: 8px 14px;
     background: var(--accent); color: white;
     border-radius: 8px; font-size: 0.82rem; font-weight: 600;
     transition: opacity 0.15s, transform 0.15s;
   }
.bs-apply-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.bs-speed-row { display: flex; align-items: center; gap: 10px; }
.bs-speed-slider { flex: 1; accent-color: var(--accent); }
.bs-toggle-row {
     display: flex; align-items: center; gap: 10px;
     cursor: pointer; font-size: 0.85rem; color: var(--ts);
   }
.bs-toggle {
     width: 40px; height: 22px;
     background: var(--surface2); border: 1.5px solid var(--border2);
     border-radius: 999px; position: relative; transition: all 0.2s;
   }
.bs-toggle-on { background: var(--accent); border-color: var(--accent); }
.bs-toggle-thumb {
     position: absolute; width: 16px; height: 16px;
     background: white; border-radius: 50%; top: 2px; left: 2px;
     transition: transform 0.2s;
     box-shadow: 0 1px 4px rgba(0,0,0,0.15);
   }
.bs-toggle-on .bs-toggle-thumb { transform: translateX(18px); }
.bs-stats-box {
     display: flex; justify-content: space-around; align-items: center;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 1rem;
   }
.bs-stat-item { text-align: center; }
.bs-stat-num { display: block; font-family: var(--fd); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.bs-stat-lbl { display: block; font-size: 10px; color: var(--tm); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.bs-stat-div { width: 1px; height: 30px; background: var(--border); }
/* Main viz */
.bs-sim-main {
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: var(--radius-lg);
     padding: 2rem;
     display: flex; flex-direction: column; gap: 1.5rem;
     box-shadow: var(--shadow);
   }
.bs-phase-bar {
     display: flex; align-items: center; gap: 12px;
     padding: 12px 16px; border: 1px solid;
     border-radius: var(--radius);
   }
.bs-phase-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bs-phase-label { font-weight: 600; font-size: 0.9rem; flex: 1; color: var(--tp); }
.bs-step-counter { font-family: var(--fm); font-size: 0.78rem; color: var(--tm); }
.bs-viz-area {
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 2rem 2rem 1rem;
     display: flex; flex-direction: column; gap: 1rem;
     min-height: 280px;
   }
.bs-bars-container {
     display: flex; align-items: flex-end; justify-content: center;
     gap: 12px; height: 220px; padding-bottom: 0.5rem;
   }
.bs-sim-bar-wrap {
     display: flex; flex-direction: column; align-items: center;
     gap: 6px; position: relative;
   }
.bs-sim-bar {
     width: 44px; border: 2px solid; border-radius: 8px 8px 0 0;
     transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative;
   }
.bs-bar-comparing { animation: compareShake 0.3s ease-in-out; }
.bs-bar-swapping  { animation: swapBounce 0.4s ease-in-out; }
@keyframes compareShake { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes swapBounce   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15) translateY(-8px)} }
.bs-sim-bar-val { font-family: var(--fm); font-size: 13px; color: var(--ts); transition: color 0.2s; }
.bs-bv-active  { font-weight: 700; }
.bs-bv-sorted  { color: var(--accent2) !important; }
.bs-sim-bar-idx { font-size: 10px; color: var(--tm); }
.bs-compare-arrow { font-size: 1.2rem; animation: arrowPulse 0.6s infinite; }
@keyframes arrowPulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.bs-sorted-crown { position: absolute; top: -22px; font-size: 12px; }
.bs-legend { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.bs-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ts); }
.bs-legend-dot { width: 12px; height: 12px; border-radius: 3px; }
/* Pseudocode */
.bs-pseudo-panel {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 1rem 1.25rem;
   }
.bs-pseudo-title {
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.1em; color: var(--tm); margin-bottom: 0.75rem;
   }
.bs-pseudo-line {
     display: flex; align-items: center; gap: 10px;
     padding: 3px 0; border-radius: 4px; transition: all 0.2s;
   }
.bs-pseudo-active { background: rgba(245,158,11,0.08); padding-left: 8px; }
.bs-pln { min-width: 20px; font-family: var(--fm); font-size: 10px; color: var(--tm); }
.bs-pseudo-cursor { color: var(--warn); font-size: 0.7rem; margin-left: auto; animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.bs-desc-box {
     display: flex; align-items: flex-start; gap: 12px;
     padding: 1rem 1.25rem;
     background: var(--surface2); border: 1px solid; border-radius: var(--radius);
     font-size: 0.88rem; line-height: 1.6; color: var(--ts);
   }
.bs-desc-icon {
     min-width: 32px; height: 32px; border-radius: 8px;
     display: flex; align-items: center; justify-content: center; font-size: 1rem;
   }
.bs-desc-text { flex: 1; color: var(--tp); }
/* Controls */
.bs-controls {
     display: flex; align-items: center; justify-content: center;
     gap: 12px; padding: 1rem 0 0; border-top: 1px solid var(--border);
   }
.bs-ctrl-btn {
     width: 44px; height: 44px; border-radius: 50%;
     background: var(--surface2); border: 1.5px solid var(--border);
     font-size: 1rem; color: var(--tp);
     transition: all 0.15s;
     display: flex; align-items: center; justify-content: center;
   }
.bs-ctrl-btn:hover:not(:disabled) { background: var(--surface); border-color: var(--border2); transform: scale(1.05); box-shadow: var(--shadow); }
.bs-ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.bs-play-btn {
     width: 56px; height: 56px;
     background: linear-gradient(135deg, var(--accent), #5254cc) !important;
     border-color: transparent !important;
     font-size: 1.25rem; color: white !important;
     box-shadow: 0 4px 20px rgba(99,102,241,0.35);
   }
.bs-play-btn:hover:not(:disabled) { box-shadow: 0 6px 28px rgba(99,102,241,0.45) !important; transform: scale(1.05) !important; }
.bs-playing { background: #4f46e5 !important; }
.bs-progress-pill { flex: 1; max-width: 200px; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.bs-prog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 3px; transition: width 0.3s; }
/* Console */
.bs-sim-console {
     background: #0d1117;
     border: 1px solid #1e2230;
     border-radius: var(--radius-lg);
     overflow: hidden;
   }
.bs-console-head {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 16px; background: #161b27;
     border-bottom: 1px solid #1e2230;
   }
.bs-con-dot { width: 10px; height: 10px; border-radius: 50%; }
.bs-con-dot.r { background: #ff5f57; }
.bs-con-dot.y { background: #febc2e; }
.bs-con-dot.g { background: #28c840; }
.bs-con-title { margin-left: 4px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4); flex: 1; }
.bs-con-clear {
     font-size: 11px; color: rgba(255,255,255,0.4);
     padding: 4px 10px; border: 1px solid rgba(255,255,255,0.1);
     border-radius: 4px; transition: all 0.15s;
   }
.bs-con-clear:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); }
.bs-console-body {
     padding: 1rem 1.25rem;
     height: 140px; overflow-y: auto;
     font-family: var(--fm); font-size: 12px; line-height: 1.8;
   }
.bs-console-body::-webkit-scrollbar { width: 4px; }
.bs-console-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.bs-con-line { padding: 1px 0; }
.bs-con-info { color: rgba(255,255,255,0.6); }
.bs-con-swap { color: rgba(245,158,11,0.9); }
.bs-con-done { color: rgba(0,212,170,0.9); }
/* ════════════════════════════════
      QUIZ
      ════════════════════════════════ */
.bs-quiz-root {
     max-width: 760px; margin: 0 auto;
     display: flex; flex-direction: column; gap: 1.5rem;
   }
.bs-qz-progress { display: flex; flex-direction: column; gap: 8px; }
.bs-qz-prog-info { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ts); }
.bs-qz-prog-track {
     position: relative; height: 8px;
     background: var(--surface2); border-radius: 99px;
     border: 1px solid var(--border);
   }
.bs-qz-prog-fill {
     height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
     border-radius: 99px; transition: width 0.5s cubic-bezier(.2,.85,.3,1);
   }
.bs-qz-pip {
     position: absolute; top: 50%; transform: translate(-50%,-50%);
     width: 10px; height: 10px; border-radius: 50%;
     background: var(--surface2); border: 2px solid var(--border); transition: all 0.3s;
   }
.bs-pip-done { background: var(--accent) !important; border-color: var(--accent) !important; }
.bs-pip-cur  { border-color: var(--accent) !important; }
.bs-qz-timer { display: flex; align-items: center; gap: 12px; }
.bs-qz-timer-track { flex: 1; height: 5px; background: var(--surface2); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.bs-qz-timer-fill { height: 100%; border-radius: 99px; transition: width 1s linear, background 0.5s; }
.bs-qz-timer-num { font-family: var(--fm); font-size: 0.9rem; font-weight: 700; min-width: 40px; text-align: right; color: var(--tp); }
.bs-qz-card {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 2.5rem;
     display: flex; flex-direction: column; gap: 1.5rem;
     box-shadow: var(--shadow-lg); animation: bslFadeIn 0.3s ease;
   }
.bs-qz-meta { display: flex; align-items: center; gap: 10px; }
.bs-qz-cat {
     background: rgba(99,102,241,0.1); color: var(--accent);
     border: 1px solid rgba(99,102,241,0.25); border-radius: 999px;
     padding: 4px 12px; font-size: 11px; font-weight: 600;
   }
.bs-qz-diff { border: 1px solid; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600; }
.bs-qz-num { margin-left: auto; font-family: var(--fm); font-size: 0.85rem; color: var(--tm); }
.bs-qz-question { font-family: var(--fd); font-size: 1.2rem; font-weight: 700; line-height: 1.4; color: var(--tp); }
.bs-qz-timeout { color: var(--danger); font-weight: 700; text-align: center; font-size: 1.2rem; }
.bs-qz-options { display: flex; flex-direction: column; gap: 10px; }
.bs-qz-option {
     display: flex; align-items: center; gap: 14px;
     padding: 13px 16px;
     background: var(--surface2); border: 1.5px solid var(--border);
     border-radius: var(--radius); text-align: left;
     color: var(--tp); font-size: 0.9rem;
     transition: all 0.2s; font-family: var(--fb);
   }
.bs-qz-option:hover:not(:disabled):not(.bs-opt-dim) {
     border-color: var(--accent); background: rgba(99,102,241,0.06); transform: translateX(3px);
   }
.bs-opt-letter {
     min-width: 30px; height: 30px; border-radius: 8px;
     background: var(--surface); border: 1.5px solid var(--border);
     display: flex; align-items: center; justify-content: center;
     font-weight: 800; font-size: 0.78rem; transition: all 0.2s; color: var(--ts);
   }
.bs-opt-text { flex: 1; }
.bs-opt-check { color: var(--accent2); font-weight: 700; margin-left: auto; }
.bs-opt-x     { color: var(--danger);  font-weight: 700; margin-left: auto; }
.bs-opt-correct  { border-color: var(--accent2) !important; background: rgba(0,212,170,0.08) !important; }
.bs-opt-wrong    { border-color: var(--danger)  !important; background: rgba(239,68,68,0.07)  !important; }
.bs-opt-dim      { opacity: 0.45; }
.bs-opt-selected { border-color: var(--accent)  !important; background: rgba(99,102,241,0.08) !important; }
.bs-qz-exp {
     display: flex; align-items: flex-start; gap: 14px;
     padding: 1.25rem; border-radius: var(--radius); border: 1.5px solid;
     animation: bslFadeIn 0.35s ease;
   }
.bs-exp-ok { border-color: rgba(0,212,170,0.3); background: rgba(0,212,170,0.06); }
.bs-exp-no { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.05); }
.bs-exp-icon  { font-size: 1.3rem; }
.bs-exp-title { font-weight: 700; margin-bottom: 4px; color: var(--tp); }
.bs-exp-text  { font-size: 0.88rem; color: var(--ts); line-height: 1.6; }
.bs-qz-next {
     padding: 14px 28px;
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     color: white; border-radius: var(--radius);
     font-weight: 700; font-size: 0.95rem;
     transition: transform 0.2s, box-shadow 0.2s; align-self: flex-end;
   }
.bs-qz-next:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,0.35); }
/* Result */
.bs-result {
     display: flex; flex-direction: column; align-items: center; gap: 2rem;
     max-width: 760px; margin: 0 auto;
   }
.bs-result-ring {
     width: 140px; height: 140px; border-radius: 50%; border: 4px solid;
     display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
     animation: bslPop 0.5s cubic-bezier(.2,.85,.3,1.4) both;
   }
.bs-result-grade { font-family: var(--fd); font-size: 2.5rem; font-weight: 800; }
.bs-result-pct   { font-size: 0.9rem; font-weight: 600; }
.bs-result-title { font-family: var(--fd); font-size: 2rem; font-weight: 800; color: var(--tp); }
.bs-result-msg   { color: var(--ts); text-align: center; max-width: 480px; line-height: 1.65; }
.bs-result-stats {
     display: flex; gap: 2rem;
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 1.5rem 2.5rem;
     box-shadow: var(--shadow);
   }
.bs-rs-stat { text-align: center; }
.bs-rs-num  { display: block; font-family: var(--fd); font-size: 2.5rem; font-weight: 800; }
.bs-rs-lbl  { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tm); }
.bs-review { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.bs-review-title { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--tp); margin-bottom: 0.5rem; }
.bs-rev-item {
     display: flex; gap: 14px; padding: 1rem 1.25rem;
     border-radius: var(--radius); border: 1px solid; align-items: flex-start;
     background: var(--surface); box-shadow: var(--shadow);
     animation: bslFadeIn 0.3s ease both;
   }
.bs-rev-correct { border-left: 3px solid var(--accent2) !important; }
.bs-rev-wrong   { border-left: 3px solid var(--danger)  !important; }
.bs-rev-q   { font-size: 0.88rem; color: var(--tp); margin-bottom: 4px; }
.bs-rev-a   { font-size: 0.82rem; color: var(--ts); }
.bs-rev-exp { font-size: 0.82rem; color: var(--ts); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.bs-retry-btn {
     padding: 14px 36px;
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     color: white; border-radius: var(--radius);
     font-weight: 700; font-size: 0.95rem;
     transition: transform 0.2s, box-shadow 0.2s;
   }
.bs-retry-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,0.35); }
/* ════════════════════════════════
      APPLICATION
      ════════════════════════════════ */
.bs-app-root { display: flex; flex-direction: column; gap: 3rem; }
.bs-app-section {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 2.5rem;
     box-shadow: var(--shadow);
   }
.bs-challenge-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5rem 0; }
.bs-challenge-tab {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 18px;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); font-size: 0.85rem; color: var(--ts);
     transition: all 0.15s; position: relative;
   }
.bs-challenge-tab:hover { border-color: var(--border2); color: var(--tp); background: var(--surface); box-shadow: var(--shadow); }
.bs-ct-active { border-color: var(--accent) !important; color: var(--tp) !important; background: rgba(99,102,241,0.07) !important; }
.bs-ct-solved { border-color: rgba(0,212,170,0.5) !important; background: rgba(0,212,170,0.05) !important; }
.bs-ct-check { color: var(--accent2); font-weight: 700; }
.bs-ct-num   { font-family: var(--fm); font-size: 0.78rem; color: var(--tm); }
.bs-ct-name  { font-weight: 600; color: var(--tp); }
.bs-ct-diff  { font-size: 0.75rem; font-weight: 700; }
.bs-challenge-area { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem; align-items: start; }
.bs-challenge-info { display: flex; flex-direction: column; gap: 1rem; }
.bs-ch-title {
     font-family: var(--fd); font-size: 1.15rem; font-weight: 700;
     display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--tp);
   }
.bs-ch-badge { border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.bs-ch-desc { color: var(--ts); font-size: 0.9rem; line-height: 1.65; }
.bs-ch-expected {
     display: flex; align-items: center; gap: 10px;
     padding: 10px 14px; background: var(--surface2);
     border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap;
   }
.bs-ch-exp-label { font-size: 0.78rem; color: var(--tm); white-space: nowrap; }
.bs-ch-exp-val   { font-family: var(--fm); font-size: 0.82rem; color: var(--accent2); font-weight: 600; }
.bs-hints-box {
     background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.25);
     border-radius: var(--radius); padding: 1rem 1.25rem;
   }
.bs-hints-title { font-weight: 700; font-size: 0.85rem; color: var(--warn); margin-bottom: 0.5rem; }
.bs-hint-text   { font-size: 0.88rem; color: var(--ts); margin-bottom: 0.75rem; line-height: 1.6; }
.bs-hint-nav    { display: flex; gap: 8px; }
.bs-hint-nav button {
     padding: 5px 14px; background: var(--surface); border: 1px solid var(--border2);
     border-radius: 6px; font-size: 0.78rem; color: var(--ts); transition: all 0.15s;
   }
.bs-hint-nav button:hover:not(:disabled) { color: var(--tp); border-color: var(--border2); }
.bs-hint-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
/* Editor */
.bs-editor-area {
     background: #0d1117; border: 1px solid #1e2230;
     border-radius: var(--radius-lg); overflow: hidden;
     box-shadow: var(--shadow-lg);
   }
.bs-editor-header {
     display: flex; align-items: center; gap: 8px;
     padding: 12px 16px; background: #161b27;
     border-bottom: 1px solid #1e2230;
   }
.bs-editor-lang   { margin-left: 4px; font-size: 11px; color: rgba(255,255,255,0.3); flex: 1; font-family: var(--fm); }
.bs-editor-actions { display: flex; gap: 8px; }
.bs-action-btn {
     padding: 5px 12px; background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
     font-size: 0.78rem; color: rgba(255,255,255,0.5); transition: all 0.15s;
   }
.bs-action-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); }
.bs-sol-btn { color: rgba(0,212,170,0.8) !important; border-color: rgba(0,212,170,0.2) !important; }
.bs-editor {
     width: 100%; min-height: 260px;
     background: transparent; border: none;
     padding: 1.25rem 1.5rem;
     color: #a5f3d4;
     font-family: var(--fm); font-size: 12.5px; line-height: 1.8;
     resize: vertical; outline: none;
   }
.bs-editor:-moz-read-only { color: #6ee7b7; }
.bs-editor:read-only { color: #6ee7b7; }
.bs-editor-footer {
     display: flex; gap: 10px; padding: 12px 16px;
     background: #161b27; border-top: 1px solid #1e2230;
   }
.bs-run-btn {
     padding: 10px 24px;
     background: var(--accent2); color: #000;
     font-weight: 700; border-radius: 8px; font-size: 0.88rem;
     transition: opacity 0.15s, transform 0.15s;
   }
.bs-run-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.bs-reset-btn {
     padding: 10px 16px; background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
     font-size: 0.88rem; color: rgba(255,255,255,0.5); transition: all 0.15s;
   }
.bs-reset-btn:hover { color: rgba(255,255,255,0.8); }
/* Output */
.bs-output {
     border-radius: var(--radius-lg); overflow: hidden;
     border: 1.5px solid; margin-top: 1rem;
     animation: bslFadeIn 0.3s ease;
   }
.bs-out-ok   { border-color: rgba(0,212,170,0.35); }
.bs-out-err  { border-color: rgba(239,68,68,0.35); }
.bs-out-warn { border-color: rgba(245,158,11,0.35); }
.bs-out-header {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 16px; background: var(--surface2);
     border-bottom: 1px solid var(--border);
     font-size: 12px; font-weight: 600; color: var(--tm);
   }
.bs-out-body {
     padding: 1rem 1.25rem; font-family: var(--fm); font-size: 13px;
     line-height: 1.8; white-space: pre-wrap;
     background: var(--surface);
   }
.bs-out-ok   .bs-out-body { color: #059669; }
.bs-out-err  .bs-out-body { color: var(--danger); }
.bs-out-warn .bs-out-body { color: #92400e; }
/* Real World */
.bs-rw-tabs { display: flex; gap: 10px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.bs-rw-tab {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 18px; background: var(--surface2);
     border: 1.5px solid var(--border); border-radius: var(--radius);
     font-size: 0.88rem; color: var(--ts); transition: all 0.15s; font-weight: 500;
   }
.bs-rw-tab:hover { color: var(--tp); background: var(--surface); box-shadow: var(--shadow); }
.bs-rw-active { border-color: var(--accent2) !important; color: #047857 !important; background: rgba(0,212,170,0.07) !important; }
.bs-rw-desc { color: var(--ts); font-size: 0.9rem; margin-bottom: 1.25rem; line-height: 1.6; }
.bs-rw-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; }
.bs-rw-code-block {
     background: #0d1117; border: 1px solid #1e2230;
     border-radius: var(--radius-lg); overflow: hidden;
   }
.bs-rw-output {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 1.25rem;
   }
.bs-rw-out-label {
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.1em; color: var(--tm); margin-bottom: 0.75rem;
   }
.bs-rw-out-body {
     font-family: var(--fm); font-size: 13px;
     color: #059669; line-height: 1.8; white-space: pre-wrap;
   }
/* Decision */
.bs-decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.bs-dec-card { padding: 1.75rem; border-radius: var(--radius-lg); border: 1.5px solid; }
.bs-dec-yes { background: rgba(0,212,170,0.04); border-color: rgba(0,212,170,0.25); }
.bs-dec-no  { background: rgba(239,68,68,0.04);  border-color: rgba(239,68,68,0.2);  }
.bs-dec-title { font-weight: 700; font-size: 1rem; margin-bottom: 1rem; color: var(--tp); }
.bs-dec-list  { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bs-dec-list li { font-size: 0.88rem; color: var(--ts); padding-left: 16px; position: relative; line-height: 1.5; }
.bs-dec-list li::before { content: "•"; position: absolute; left: 0; }
.bs-dec-yes .bs-dec-list li::before { color: var(--accent2); }
.bs-dec-no  .bs-dec-list li::before { color: var(--danger); }
.bs-rec-box {
     display: flex; align-items: flex-start; gap: 14px;
     padding: 1.25rem 1.5rem; margin-top: 1.5rem;
     background: rgba(245,158,11,0.05); border: 1.5px solid rgba(245,158,11,0.2);
     border-radius: var(--radius); font-size: 0.9rem; line-height: 1.65; color: var(--ts);
   }
.bs-rec-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.bs-rec-box b    { color: #92400e; }
.bs-rec-box code { font-family: var(--fm); color: #059669; font-size: 0.88rem; }
/* ════════════════════════════════
      RESPONSIVE
      ════════════════════════════════ */
@media (max-width: 1100px) {
     .bs-sim-root { grid-template-columns: 1fr; }
     .bs-sim-panel { flex-direction: row; flex-wrap: wrap; }
     .bs-panel-section { min-width: 200px; }
   }
@media (max-width: 900px) {
     .bs-hero-section { grid-template-columns: 1fr; }
     .bs-steps-layout { grid-template-columns: 1fr; }
     .bs-complexity-grid { grid-template-columns: 1fr 1fr; }
     .bs-challenge-area { grid-template-columns: 1fr; }
     .bs-rw-layout { grid-template-columns: 1fr; }
     .bs-decision-grid { grid-template-columns: 1fr; }
     .bsl-header-inner { flex-direction: column; }
     .bs-ct-header { display: none; }
     .bs-ct-row { grid-template-columns: 1fr 1fr 1fr; }
   }
@media (max-width: 768px) {
     .bsl-tabs { gap: 0; }
     .bsl-tab { padding: 12px 14px; }
     .bsl-content { padding: 24px 16px; }
     .bs-app-section { padding: 1.5rem; }
     .bsl-header { padding: 0 1rem; }
   }
@media (max-width: 600px) {
     .bsl-content { padding: 1rem 1rem 3rem; }
     .bs-complexity-grid { grid-template-columns: 1fr; }
     .bsl-header-stats { display: none; }
   }

   
/* ═══════════════════════════════════════════════════════════
   SF SmartLabs · Ohm's Law Physics Virtual Lab — CSS
   Light Theme · Matching Bubble Sort Lab Aesthetic
   ═══════════════════════════════════════════════════════════ */
/* ── Tokens ── */
:root {
     --bg:        #f8f9fc;
     --surface:   #ffffff;
     --surface2:  #f3f4f8;
     --border:    #e4e6ef;
     --border2:   #d1d5e8;
     --tp:        #0f1117;
     --ts:        #4b5270;
     --tm:        #8890aa;
     --accent:    #6366f1;
     --accent2:   #00d4aa;
     --warn:      #f59e0b;
     --danger:    #ef4444;
     --pink:      #ec4899;
     --purple:    #a78bfa;
     --blue:      #38bdf8;
     --shadow:    0 2px 16px rgba(0,0,0,0.07);
     --shadow-lg: 0 8px 40px rgba(0,0,0,0.10);
     --radius:    12px;
     --radius-lg: 20px;
     --fd: 'Bricolage Grotesque', sans-serif;
     --fb: 'DM Sans', sans-serif;
     --fm: 'JetBrains Mono', monospace;
   }
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }
/* ════════════════════════════════
      MAIN LAYOUT
      ════════════════════════════════ */
.oll-root {
     min-height: 100vh;
     background: var(--bg);
     color: var(--tp);
     font-family: var(--fb);
     position: relative;
     overflow-x: hidden;
   }
.oll-ambient {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
   }
.oll-blob {
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
   }
.oll-blob1 { width: 600px; height: 600px; top: -100px; right: -150px; background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%); animation: ollFloat1 16s ease-in-out infinite; }
.oll-blob2 { width: 500px; height: 500px; bottom: 100px; left: -100px; background: radial-gradient(circle, rgba(0,212,170,0.05) 0%, transparent 70%); animation: ollFloat2 20s ease-in-out infinite; }
.oll-blob3 { width: 400px; height: 400px; top: 50%; left: 40%; background: radial-gradient(circle, rgba(245,158,11,0.04) 0%, transparent 70%); animation: ollFloat1 13s ease-in-out infinite reverse; }
@keyframes ollFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,15px)} }
@keyframes ollFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(15px,-10px)} }
.oll-grid {
     position: absolute; inset: 0;
     background-image: radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px);
     background-size: 36px 36px;
     mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
     -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
     opacity: 0.3;
   }
/* ── Header ── */
.oll-header {
     position: sticky; top: 0; z-index: 100;
     background: rgba(248,249,252,0.92);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     box-shadow: 0 1px 20px rgba(0,0,0,0.05);
   }
.oll-header-inner {
     max-width: 1200px; margin: 0 auto;
     padding: 20px 28px 0;
     display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
   }
.oll-header-left { flex: 1; }
.oll-badge {
     display: inline-flex; align-items: center; gap: 7px;
     background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25);
     color: var(--accent); border-radius: 99px; padding: 4px 12px;
     font-size: 11px; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 8px;
   }
.oll-badge-dot {
     width: 6px; height: 6px; border-radius: 50%;
     background: var(--accent2); animation: ollPulse 2s ease-in-out infinite;
   }
@keyframes ollPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
.oll-title {
     font-family: var(--fd);
     font-size: clamp(1.5rem, 3vw, 2rem);
     font-weight: 800; letter-spacing: -0.8px;
     color: var(--tp); line-height: 1.1;
   }
.oll-title-accent {
     background: linear-gradient(110deg, var(--accent), var(--warn));
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     background-clip: text;
   }
.oll-subtitle { font-size: 12px; color: var(--tm); margin-top: 4px; }
.oll-header-stats {
     display: flex; align-items: center; gap: 16px;
     padding-top: 4px; flex-shrink: 0;
   }
.oll-stat { display: flex; flex-direction: column; align-items: center; }
.oll-stat-num { font-family: var(--fd); font-size: 1.4rem; font-weight: 800; color: var(--tp); line-height: 1; }
.oll-stat-label { font-size: 10px; color: var(--tm); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.oll-stat-div { width: 1px; height: 32px; background: var(--border); }
/* Tabs */
.oll-tabs {
     max-width: 1200px; margin: 0 auto; padding: 0 28px;
     display: flex; gap: 0; overflow-x: auto;
   }
.oll-tabs::-webkit-scrollbar { display: none; }
.oll-tab {
     display: flex; align-items: center; gap: 10px;
     padding: 14px 20px; background: none; border: none;
     cursor: pointer; white-space: nowrap;
     color: var(--ts); font-family: var(--fb);
     transition: color 0.2s;
     border-bottom: 2px solid transparent;
   }
.oll-tab:hover { color: var(--tp); background: rgba(0,0,0,0.02); }
.oll-tab-active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.oll-tab-icon { font-size: 16px; }
.oll-tab-text { text-align: left; }
.oll-tab-label { font-size: 14px; font-weight: 600; display: block; }
.oll-tab-sub { font-size: 10px; color: var(--tm); display: block; line-height: 1; }
/* Content */
.oll-content {
     max-width: 1200px; margin: 0 auto;
     padding: 40px 28px; position: relative; z-index: 1;
   }
/* Footer */
.oll-footer {
     border-top: 1px solid var(--border);
     padding: 20px 28px;
     display: flex; align-items: center; justify-content: space-between;
     font-size: 13px; color: var(--tm);
     max-width: 1200px; margin: 0 auto;
   }
.oll-footer-cta {
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     color: white; text-decoration: none;
     padding: 8px 18px; border-radius: 8px;
     font-size: 13px; font-weight: 600;
     transition: transform 0.2s, box-shadow 0.2s;
   }
.oll-footer-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
/* ════════════════════════════════
      SHARED COMPONENTS
      ════════════════════════════════ */
.ol-eyebrow {
     display: flex; align-items: center; gap: 8px;
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 1px; color: var(--ts); margin-bottom: 0.5rem;
   }
.ol-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ol-section-title {
     font-family: var(--fd);
     font-size: clamp(1.4rem, 3vw, 2rem);
     font-weight: 800; letter-spacing: -0.8px;
     color: var(--tp); margin-bottom: 1.25rem;
   }
.ol-body-text { color: var(--ts); line-height: 1.75; }
.ol-body-text strong { color: var(--tp); font-weight: 600; }
.ol-body-text em { color: var(--accent); font-style: italic; }
/* ════════════════════════════════
      THEORY
      ════════════════════════════════ */
.ol-theory-root { display: flex; flex-direction: column; gap: 48px; }
@keyframes ollFadeIn  { from{opacity:0;transform:translateY(8px)}  to{opacity:1;transform:translateY(0)} }
@keyframes ollFadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
/* Hero */
.ol-hero-section {
     display: grid; grid-template-columns: 1fr auto;
     gap: 3rem; align-items: center;
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: var(--radius-lg);
     padding: 3rem;
     box-shadow: var(--shadow);
     animation: ollFadeIn 0.5s ease;
   }
.ol-law-banner {
     display: flex; align-items: center; gap: 16px;
     background: rgba(99,102,241,0.05); border: 1px solid rgba(99,102,241,0.2);
     border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0;
   }
.ol-law-eq {
     font-family: var(--fm); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px;
   }
.ol-law-desc { font-size: 0.9rem; color: var(--ts); }
.ol-concept-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ol-pill {
     display: flex; align-items: center; gap: 10px;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 10px 16px;
     font-size: 0.85rem; transition: all 0.2s;
   }
.ol-pill:hover { border-color: var(--border2); box-shadow: var(--shadow); }
.ol-pill b { color: var(--tp); display: block; font-size: 0.88rem; }
.ol-pill span:last-child { color: var(--ts); font-size: 0.78rem; }
/* Water analogy */
.ol-water-analogy {
     background: var(--surface2); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 1.5rem;
     display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
     box-shadow: var(--shadow);
   }
.ol-wa-title { font-size: 0.82rem; font-weight: 700; color: var(--tm); text-transform: uppercase; letter-spacing: 0.08em; }
/* Variable Explorer */
.ol-vars-section {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 3rem;
   }
.ol-vars-layout { display: grid; grid-template-columns: 200px 1fr 220px; gap: 2rem; margin-top: 1.5rem; }
.ol-var-tabs { display: flex; flex-direction: column; gap: 8px; }
.ol-var-tab {
     display: flex; align-items: center; gap: 12px;
     padding: 12px 14px;
     background: var(--surface); border: 1.5px solid var(--border);
     border-radius: var(--radius); cursor: pointer; transition: all 0.2s;
   }
.ol-var-tab:hover { transform: translateX(3px); }
.ol-vt-icon { font-size: 1.2rem; }
.ol-vt-name { font-weight: 600; font-size: 0.9rem; color: var(--tp); }
.ol-vt-unit { font-size: 0.75rem; color: var(--tm); }
.ol-var-detail {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow);
   }
.ol-vd-header {
     display: flex; align-items: center; gap: 1rem;
     padding: 1rem; border: 1px solid; border-radius: var(--radius);
     margin-bottom: 0; flex-wrap: wrap;
   }
.ol-vd-symbol {
     width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid;
     display: flex; align-items: center; justify-content: center;
     font-family: var(--fm); font-size: 1.5rem; font-weight: 800;
   }
.ol-vd-title { font-weight: 700; font-size: 1rem; color: var(--tp); }
.ol-vd-unit { font-size: 0.8rem; color: var(--ts); }
.ol-vd-formula {
     margin-left: auto; font-family: var(--fm); font-size: 0.9rem; font-weight: 700;
     padding: 6px 14px; border-radius: 8px; border: 1px solid;
   }
.ol-analogy-box, .ol-realworld-fact {
     display: flex; align-items: flex-start; gap: 10px;
     padding: 0.75rem 1rem; margin-top: 1rem;
     border-radius: 8px; font-size: 0.88rem; color: var(--ts);
   }
.ol-analogy-box { background: rgba(99,102,241,0.05); border: 1px solid rgba(99,102,241,0.15); }
.ol-realworld-fact { background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.15); }
.ol-analogy-box b, .ol-realworld-fact b { color: var(--tp); }
.ol-analogy-icon, .ol-rw-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
/* Triangle */
.ol-triangle-panel { display: flex; flex-direction: column; gap: 1rem; }
.ol-triangle-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ol-triangle-hint { font-size: 0.72rem; color: var(--tm); text-align: center; }
.ol-tri-formulas { display: flex; flex-direction: column; gap: 6px; }
.ol-tri-row {
     padding: 8px 12px; border-radius: 8px;
     background: var(--surface); border: 1px solid var(--border);
     display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem;
   }
.ol-tri-find { font-weight: 700; font-size: 0.78rem; }
.ol-tri-formula { font-family: var(--fm); font-size: 0.82rem; color: var(--ts); }
.ol-tri-ex { font-size: 0.75rem; color: var(--tm); }
.ol-tri-highlight { box-shadow: var(--shadow); }
/* Proportionality */
.ol-prop-section {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 3rem; box-shadow: var(--shadow);
   }
.ol-prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.ol-prop-card {
     padding: 1.75rem; border-radius: var(--radius-lg); border: 1.5px solid;
     background: var(--surface2); display: flex; flex-direction: column; gap: 0.75rem;
     animation: ollFadeUp 0.4s ease both;
   }
.ol-prop-direct { border-color: rgba(99,102,241,0.25); }
.ol-prop-inverse { border-color: rgba(245,158,11,0.25); }
.ol-prop-power { border-color: rgba(0,212,170,0.25); }
.ol-prop-icon { font-size: 1.5rem; font-weight: 800; font-family: var(--fd); }
.ol-prop-title { font-family: var(--fd); font-size: 1rem; font-weight: 700; color: var(--tp); }
.ol-prop-body { font-size: 0.88rem; color: var(--ts); line-height: 1.6; }
.ol-prop-formula { font-family: var(--fm); font-size: 0.9rem; color: var(--accent); font-weight: 700; }
/* Real World */
.ol-rw-section {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 3rem;
   }
.ol-rw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.ol-rw-card {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow);
     display: flex; flex-direction: column; gap: 0.75rem; transition: transform 0.2s, box-shadow 0.2s;
   }
.ol-rw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ol-rw-top { display: flex; align-items: center; gap: 10px; }
.ol-rw-emoji { font-size: 1.5rem; }
.ol-rw-name { font-weight: 700; font-size: 0.95rem; color: var(--tp); }
.ol-rw-vals { display: flex; gap: 8px; flex-wrap: wrap; }
.ol-rw-val {
     display: flex; align-items: center; gap: 4px;
     padding: 4px 10px; border-radius: 6px; font-family: var(--fm);
     font-size: 0.82rem; font-weight: 700; border: 1px solid currentColor;
     background: currentColor;
     background: color-mix(in srgb, currentColor 8%, white);
   }
.ol-rv-sym { font-weight: 800; font-size: 0.88rem; }
.ol-rw-desc { font-size: 0.8rem; color: var(--ts); line-height: 1.5; }
/* History */
.ol-history-section {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 3rem; box-shadow: var(--shadow);
   }
.ol-history-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 1.5rem; align-items: start; }
.ol-timeline { display: flex; flex-direction: column; gap: 0; }
.ol-tl-item {
     display: grid; grid-template-columns: 60px 20px 1fr;
     align-items: start; gap: 0.75rem; padding: 10px 0;
     border-left: none; position: relative;
   }
.ol-tl-item:not(:last-child)::after {
     content: ""; position: absolute; left: 73px; top: 26px; bottom: -10px;
     width: 1px; background: var(--border2);
   }
.ol-tl-year { font-family: var(--fm); font-size: 0.82rem; font-weight: 700; color: var(--accent); text-align: right; padding-top: 2px; }
.ol-tl-dot {
     width: 10px; height: 10px; border-radius: 50%;
     background: var(--accent); border: 2px solid var(--bg);
     flex-shrink: 0; margin-top: 4px; box-shadow: 0 0 0 2px rgba(99,102,241,0.3);
   }
.ol-tl-event { font-size: 0.88rem; color: var(--ts); line-height: 1.5; }
/* ════════════════════════════════
      SIMULATION
      ════════════════════════════════ */
.ol-sim-root {
     display: grid; grid-template-columns: 300px 1fr;
     gap: 1.5rem;
   }
/* Panel */
.ol-sim-panel {
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     display: flex; flex-direction: column; gap: 1.5rem;
     height: -moz-fit-content;
     height: fit-content;
     box-shadow: var(--shadow);
   }
.ol-sp-section { display: flex; flex-direction: column; gap: 0.75rem; }
.ol-sp-label {
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.1em; color: var(--tm);
   }
.ol-slider-group { display: flex; flex-direction: column; gap: 4px; }
.ol-slider-row { display: flex; align-items: center; gap: 12px; }
.ol-slider {
     border-radius: 3px; outline: none; cursor: pointer;
   }
.ol-slider-v { accent-color: #6366f1; background: linear-gradient(to right, rgba(99,102,241,0.4), rgba(99,102,241,0.15)); }
.ol-slider-r { accent-color: #f59e0b; background: linear-gradient(to right, rgba(245,158,11,0.4), rgba(245,158,11,0.15)); }
.ol-slider-val { font-family: var(--fm); font-size: 1.1rem; font-weight: 800; min-width: 70px; text-align: right; }
.ol-slider-val span { font-size: 0.75rem; font-weight: 600; margin-left: 2px; }
.ol-slider-desc { font-size: 0.75rem; color: var(--tm); }
.ol-computed-box {
     display: flex; align-items: center; justify-content: space-around;
     background: var(--surface2); border: 1px solid var(--border2);
     border-radius: var(--radius); padding: 1rem;
     gap: 0.75rem;
   }
.ol-cv-item { display: flex; align-items: center; gap: 10px; }
.ol-cv-icon {
     width: 32px; height: 32px; border-radius: 8px;
     display: flex; align-items: center; justify-content: center;
     font-family: var(--fm); font-weight: 800; font-size: 0.9rem;
   }
.ol-cv-val { font-family: var(--fd); font-size: 1.2rem; font-weight: 800; color: var(--tp); line-height: 1; }
.ol-cv-unit { font-size: 0.72rem; font-weight: 600; margin-left: 2px; color: inherit; }
.ol-cv-lbl { font-size: 0.7rem; color: var(--tm); margin-top: 2px; }
.ol-cv-div { width: 1px; height: 36px; background: var(--border); }
.ol-ohm-display {
     background: rgba(99,102,241,0.05); border: 1px solid rgba(99,102,241,0.2);
     border-radius: var(--radius); padding: 1rem; text-align: center;
   }
.ol-od-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tm); margin-bottom: 6px; }
.ol-od-eq { font-family: var(--fm); font-size: 1rem; font-weight: 700; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ol-od-eq-sep { color: var(--tm); }
.ol-od-check { font-size: 0.78rem; color: var(--accent2); margin-top: 6px; font-weight: 600; }
.ol-preset-list { display: flex; flex-direction: column; gap: 5px; }
.ol-preset-btn {
     display: flex; flex-direction: column; padding: 8px 12px;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: 8px; font-size: 0.82rem; color: var(--ts);
     transition: all 0.15s; text-align: left;
   }
.ol-preset-btn:hover { border-color: var(--border2); color: var(--tp); }
.ol-preset-active { border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(99,102,241,0.07) !important; }
.ol-preset-sub { font-size: 0.72rem; color: var(--tm); margin-top: 2px; }
.ol-toggle-row {
     display: flex; align-items: center; gap: 10px;
     cursor: pointer; font-size: 0.85rem; color: var(--ts);
   }
.ol-toggle {
     width: 40px; height: 22px;
     background: var(--surface2); border: 1.5px solid var(--border2);
     border-radius: 999px; position: relative; transition: all 0.2s;
   }
.ol-toggle-on { background: var(--accent); border-color: var(--accent); }
.ol-toggle-thumb {
     position: absolute; width: 16px; height: 16px;
     background: white; border-radius: 50%; top: 2px; left: 2px;
     transition: transform 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
   }
.ol-toggle-on .ol-toggle-thumb { transform: translateX(18px); }
/* Main viz */
.ol-sim-main { display: flex; flex-direction: column; gap: 1.5rem; }
/* Circuit card */
.ol-circuit-card {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow);
   }
.ol-circuit-title {
     display: flex; align-items: center; gap: 8px;
     font-weight: 700; font-size: 0.9rem; color: var(--tp);
     margin-bottom: 1rem;
   }
.ol-ct-dot { width: 8px; height: 8px; border-radius: 50%; transition: background 0.3s; }
.ol-ct-status { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--tm); }
.ol-circuit-svg { display: block; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); }
.ol-circuit-legend { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.ol-cl-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ts); }
.ol-cl-dot { width: 10px; height: 10px; border-radius: 3px; }
/* Graph card */
.ol-graph-card {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow);
   }
.ol-graph-title { font-weight: 700; font-size: 0.9rem; color: var(--tp); margin-bottom: 1rem; }
.ol-graph-wrap { border-radius: var(--radius); overflow: hidden; }
.ol-graph-info { display: flex; gap: 2rem; margin-top: 0.75rem; font-family: var(--fm); font-size: 0.78rem; flex-wrap: wrap; }
/* Log */
.ol-log-card {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow);
   }
.ol-log-title { font-weight: 700; font-size: 0.9rem; color: var(--tp); margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; }
.ol-log-count { font-size: 0.78rem; color: var(--tm); background: var(--surface2); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); }
.ol-log-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 0.75rem; }
.ol-lt-header {
     display: grid; grid-template-columns: repeat(4, 1fr);
     padding: 8px 12px; background: var(--surface2);
     border-bottom: 1px solid var(--border);
     font-size: 0.78rem; font-weight: 700;
   }
.ol-lt-body { max-height: 180px; overflow-y: auto; }
.ol-lt-row {
     display: grid; grid-template-columns: repeat(4, 1fr);
     padding: 7px 12px; font-family: var(--fm); font-size: 0.8rem;
     color: var(--ts); border-bottom: 1px solid var(--border);
     transition: background 0.15s;
   }
.ol-lt-row:last-child { border-bottom: none; }
.ol-lt-row:hover { background: var(--surface2); }
.ol-lt-latest { background: rgba(0,212,170,0.05); color: var(--tp); font-weight: 600; }
.ol-clear-btn {
     font-size: 0.78rem; color: var(--danger); padding: 5px 12px;
     border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; transition: all 0.15s;
   }
.ol-clear-btn:hover { background: rgba(239,68,68,0.06); }
/* ════════════════════════════════
      QUIZ
      ════════════════════════════════ */
.ol-quiz-root {
     max-width: 760px; margin: 0 auto;
     display: flex; flex-direction: column; gap: 1.5rem;
   }
.ol-qz-progress { display: flex; flex-direction: column; gap: 8px; }
.ol-qz-prog-info { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ts); }
.ol-qz-prog-track {
     position: relative; height: 8px;
     background: var(--surface2); border-radius: 99px; border: 1px solid var(--border);
   }
.ol-qz-prog-fill {
     height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
     border-radius: 99px; transition: width 0.5s cubic-bezier(.2,.85,.3,1);
   }
.ol-qz-pip {
     position: absolute; top: 50%; transform: translate(-50%,-50%);
     width: 10px; height: 10px; border-radius: 50%;
     background: var(--surface2); border: 2px solid var(--border); transition: all 0.3s;
   }
.ol-pip-done { background: var(--accent) !important; border-color: var(--accent) !important; }
.ol-pip-cur  { border-color: var(--accent) !important; }
.ol-qz-timer { display: flex; align-items: center; gap: 12px; }
.ol-qz-timer-track { flex: 1; height: 5px; background: var(--surface2); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.ol-qz-timer-fill { height: 100%; border-radius: 99px; transition: width 1s linear, background 0.5s; }
.ol-qz-timer-num { font-family: var(--fm); font-size: 0.9rem; font-weight: 700; min-width: 40px; text-align: right; }
.ol-qz-card {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 2.5rem;
     display: flex; flex-direction: column; gap: 1.5rem;
     box-shadow: var(--shadow-lg); animation: ollFadeIn 0.3s ease;
   }
.ol-qz-meta { display: flex; align-items: center; gap: 10px; }
.ol-qz-cat {
     background: rgba(99,102,241,0.1); color: var(--accent);
     border: 1px solid rgba(99,102,241,0.25); border-radius: 999px;
     padding: 4px 12px; font-size: 11px; font-weight: 600;
   }
.ol-qz-diff { border: 1px solid; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600; }
.ol-qz-num { margin-left: auto; font-family: var(--fm); font-size: 0.85rem; color: var(--tm); }
.ol-qz-question { font-family: var(--fd); font-size: 1.2rem; font-weight: 700; line-height: 1.4; color: var(--tp); }
.ol-qz-timeout { color: var(--danger); font-weight: 700; text-align: center; font-size: 1.2rem; }
.ol-qz-options { display: flex; flex-direction: column; gap: 10px; }
.ol-qz-option {
     display: flex; align-items: center; gap: 14px;
     padding: 13px 16px;
     background: var(--surface2); border: 1.5px solid var(--border);
     border-radius: var(--radius); text-align: left;
     color: var(--tp); font-size: 0.9rem;
     transition: all 0.2s; font-family: var(--fb);
   }
.ol-qz-option:hover:not(:disabled):not(.ol-opt-dim) {
     border-color: var(--accent); background: rgba(99,102,241,0.06); transform: translateX(3px);
   }
.ol-opt-letter {
     min-width: 30px; height: 30px; border-radius: 8px;
     background: var(--surface); border: 1.5px solid var(--border);
     display: flex; align-items: center; justify-content: center;
     font-weight: 800; font-size: 0.78rem; transition: all 0.2s; color: var(--ts);
   }
.ol-opt-text { flex: 1; }
.ol-opt-check { color: var(--accent2); font-weight: 700; margin-left: auto; }
.ol-opt-x { color: var(--danger); font-weight: 700; margin-left: auto; }
.ol-opt-correct { border-color: var(--accent2) !important; background: rgba(0,212,170,0.08) !important; }
.ol-opt-wrong { border-color: var(--danger) !important; background: rgba(239,68,68,0.07) !important; }
.ol-opt-dim { opacity: 0.45; }
.ol-opt-selected { border-color: var(--accent) !important; background: rgba(99,102,241,0.08) !important; }
.ol-qz-exp {
     display: flex; align-items: flex-start; gap: 14px;
     padding: 1.25rem; border-radius: var(--radius); border: 1.5px solid;
     animation: ollFadeIn 0.35s ease;
   }
.ol-exp-ok { border-color: rgba(0,212,170,0.3); background: rgba(0,212,170,0.06); }
.ol-exp-no { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.05); }
.ol-exp-icon { font-size: 1.3rem; }
.ol-exp-title { font-weight: 700; margin-bottom: 4px; color: var(--tp); }
.ol-exp-text { font-size: 0.88rem; color: var(--ts); line-height: 1.6; }
.ol-qz-next {
     padding: 14px 28px;
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     color: white; border-radius: var(--radius);
     font-weight: 700; font-size: 0.95rem;
     transition: transform 0.2s, box-shadow 0.2s; align-self: flex-end;
   }
.ol-qz-next:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,0.35); }
/* Quiz Result */
.ol-result { display: flex; flex-direction: column; align-items: center; gap: 2rem; max-width: 760px; margin: 0 auto; }
.ol-result-ring {
     width: 140px; height: 140px; border-radius: 50%; border: 4px solid;
     display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
   }
.ol-result-grade { font-family: var(--fd); font-size: 2.5rem; font-weight: 800; }
.ol-result-pct { font-size: 0.9rem; font-weight: 600; }
.ol-result-title { font-family: var(--fd); font-size: 2rem; font-weight: 800; color: var(--tp); }
.ol-result-msg { color: var(--ts); text-align: center; max-width: 480px; line-height: 1.65; }
.ol-result-stats {
     display: flex; gap: 2rem;
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 1.5rem 2.5rem; box-shadow: var(--shadow);
   }
.ol-rs-stat { text-align: center; }
.ol-rs-num { display: block; font-family: var(--fd); font-size: 2.5rem; font-weight: 800; }
.ol-rs-lbl { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tm); }
.ol-review { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.ol-review-title { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--tp); margin-bottom: 0.5rem; }
.ol-rev-item {
     display: flex; gap: 14px; padding: 1rem 1.25rem;
     border-radius: var(--radius); border: 1px solid; align-items: flex-start;
     background: var(--surface); box-shadow: var(--shadow);
   }
.ol-rev-correct { border-left: 3px solid var(--accent2) !important; }
.ol-rev-wrong { border-left: 3px solid var(--danger) !important; }
.ol-rev-q { font-size: 0.88rem; color: var(--tp); margin-bottom: 4px; }
.ol-rev-a { font-size: 0.82rem; color: var(--ts); }
.ol-rev-exp { font-size: 0.82rem; color: var(--ts); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.ol-retry-btn {
     padding: 14px 36px;
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     color: white; border-radius: var(--radius); font-weight: 700; font-size: 0.95rem;
     transition: transform 0.2s, box-shadow 0.2s;
   }
.ol-retry-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,0.35); }
/* ════════════════════════════════
      APPLICATION
      ════════════════════════════════ */
.ol-app-root { display: flex; flex-direction: column; gap: 2rem; }
.ol-ch-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.ol-ch-tab {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 18px;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); font-size: 0.85rem; color: var(--ts);
     transition: all 0.15s;
   }
.ol-ch-tab:hover { border-color: var(--border2); color: var(--tp); background: var(--surface); box-shadow: var(--shadow); }
.ol-ct-active { border-color: var(--accent) !important; color: var(--tp) !important; background: rgba(99,102,241,0.07) !important; }
.ol-ct-solved { border-color: rgba(0,212,170,0.5) !important; background: rgba(0,212,170,0.05) !important; }
.ol-ct-check { color: var(--accent2); font-weight: 800; }
.ol-ct-num { font-family: var(--fm); font-size: 0.75rem; color: var(--tm); }
.ol-ct-name { font-weight: 600; color: var(--tp); }
.ol-ct-diff { font-size: 0.75rem; font-weight: 700; }
.ol-ch-area { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem; align-items: start; }
.ol-ch-info { display: flex; flex-direction: column; gap: 1rem; }
.ol-chi-header {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow);
   }
.ol-chi-title {
     font-family: var(--fd); font-size: 1.1rem; font-weight: 700;
     display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--tp); margin-bottom: 0.75rem;
   }
.ol-chi-badge { border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.ol-chi-desc { color: var(--ts); font-size: 0.9rem; line-height: 1.65; }
.ol-expected-box {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
   }
.ol-ex-label {
     padding: 8px 12px; background: var(--surface2);
     border-bottom: 1px solid var(--border);
     font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tm);
   }
.ol-ex-code {
     padding: 1rem 1.25rem; font-family: var(--fm); font-size: 0.82rem;
     color: var(--accent2); line-height: 1.7; white-space: pre;
   }
.ol-hint-box {
     background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.25);
     border-radius: var(--radius); padding: 1rem 1.25rem;
   }
.ol-hint-title { font-weight: 700; font-size: 0.85rem; color: var(--warn); margin-bottom: 0.5rem; }
.ol-hint-text { font-size: 0.88rem; color: var(--ts); margin-bottom: 0.75rem; line-height: 1.6; }
.ol-hint-nav { display: flex; gap: 8px; }
.ol-hint-nav button {
     padding: 5px 12px; background: var(--surface); border: 1px solid var(--border2);
     border-radius: 6px; font-size: 0.78rem; color: var(--ts); transition: all 0.15s;
   }
.ol-hint-nav button:hover:not(:disabled) { color: var(--tp); }
.ol-hint-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.ol-hint-trigger {
     padding: 8px 14px; background: rgba(245,158,11,0.08);
     border: 1px solid rgba(245,158,11,0.3); border-radius: 8px;
     font-size: 0.82rem; color: var(--warn); transition: all 0.15s; width: -moz-fit-content; width: fit-content;
   }
.ol-hint-trigger:hover { background: rgba(245,158,11,0.12); }
.ol-circuit-mini {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
   }
.ol-cm-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tm); margin-bottom: 0.75rem; }
.ol-cm-formulas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ol-cmf {
     font-family: var(--fm); font-size: 0.82rem; color: var(--accent);
     padding: 6px 10px; background: rgba(99,102,241,0.06);
     border: 1px solid rgba(99,102,241,0.15); border-radius: 6px; text-align: center;
   }
/* Editor */
.ol-editor-area {
     background: #0d1117; border: 1px solid #1e2230;
     border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
   }
.ol-editor-header {
     display: flex; align-items: center; gap: 8px;
     padding: 12px 16px; background: #161b27; border-bottom: 1px solid #1e2230;
   }
.ol-eh-dots { display: flex; gap: 6px; }
.ol-eh-dot { width: 11px; height: 11px; border-radius: 50%; }
.ol-eh-dot.r { background: #ff5f57; }
.ol-eh-dot.y { background: #febc2e; }
.ol-eh-dot.g { background: #28c840; }
.ol-eh-lang { flex: 1; font-size: 11px; color: rgba(255,255,255,0.3); font-family: var(--fm); margin-left: 4px; }
.ol-eh-actions { display: flex; gap: 8px; }
.ol-ea-btn {
     padding: 5px 12px; background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
     font-size: 0.78rem; color: rgba(255,255,255,0.5); transition: all 0.15s;
   }
.ol-ea-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); }
.ol-sol-btn { color: rgba(0,212,170,0.8) !important; border-color: rgba(0,212,170,0.2) !important; }
.ol-editor {
     width: 100%; min-height: 280px;
     background: transparent; border: none;
     padding: 1.25rem 1.5rem;
     color: #a5f3d4;
     font-family: var(--fm); font-size: 12.5px; line-height: 1.8;
     resize: vertical; outline: none;
   }
.ol-editor-footer {
     display: flex; gap: 10px; padding: 12px 16px;
     background: #161b27; border-top: 1px solid #1e2230;
   }
.ol-run-btn {
     padding: 10px 24px;
     background: var(--accent2); color: #000;
     font-weight: 700; border-radius: 8px; font-size: 0.88rem;
     transition: opacity 0.15s, transform 0.15s;
   }
.ol-run-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.ol-reset-btn {
     padding: 10px 16px; background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
     font-size: 0.88rem; color: rgba(255,255,255,0.5); transition: all 0.15s;
   }
.ol-reset-btn:hover { color: rgba(255,255,255,0.8); }
.ol-output {
     border-radius: 0; overflow: hidden; border-top: 1.5px solid;
   }
.ol-out-ok { border-color: rgba(0,212,170,0.35); }
.ol-out-err { border-color: rgba(239,68,68,0.35); }
.ol-out-header {
     display: flex; align-items: center; gap: 8px;
     padding: 8px 16px; background: rgba(0,0,0,0.2);
     font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5);
   }
.ol-out-body {
     padding: 0.75rem 1.25rem; font-family: var(--fm); font-size: 12px;
     line-height: 1.8; white-space: pre-wrap;
   }
.ol-out-ok .ol-out-body { color: rgba(0,212,170,0.9); }
.ol-out-err .ol-out-body { color: rgba(239,68,68,0.9); }
.ol-progress-bar-section { padding: 0.5rem 0; }
.ol-pb-label { font-size: 0.82rem; color: var(--ts); margin-bottom: 8px; }
.ol-pb-track { display: flex; gap: 6px; }
.ol-pb-seg {
     flex: 1; height: 8px; border-radius: 4px; border: 1px solid; transition: all 0.3s;
   }
.ol-decision-section {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow);
   }
.ol-decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.ol-dec-card { padding: 1.75rem; border-radius: var(--radius-lg); border: 1.5px solid; }
.ol-dec-yes { background: rgba(0,212,170,0.04); border-color: rgba(0,212,170,0.25); }
.ol-dec-no { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.2); }
.ol-dec-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 1rem; color: var(--tp); }
.ol-dec-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ol-dec-list li { font-size: 0.88rem; color: var(--ts); padding-left: 16px; position: relative; line-height: 1.5; }
.ol-dec-list li::before { content: "•"; position: absolute; left: 0; }
.ol-dec-yes .ol-dec-list li::before { color: var(--accent2); }
.ol-dec-no .ol-dec-list li::before { color: var(--danger); }
.ol-rec-box {
     display: flex; align-items: flex-start; gap: 14px;
     padding: 1.25rem 1.5rem; margin-top: 1.5rem;
     background: rgba(245,158,11,0.05); border: 1.5px solid rgba(245,158,11,0.2);
     border-radius: var(--radius); font-size: 0.9rem; line-height: 1.65; color: var(--ts);
   }
.ol-rec-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.ol-rec-box b { color: #92400e; }
/* ════════════════════════════════
      RESPONSIVE
      ════════════════════════════════ */
@media (max-width: 1100px) {
     .ol-sim-root { grid-template-columns: 1fr; }
     .ol-vars-layout { grid-template-columns: 1fr; }
     .ol-rw-grid { grid-template-columns: repeat(2, 1fr); }
   }
@media (max-width: 900px) {
     .ol-hero-section { grid-template-columns: 1fr; }
     .ol-prop-grid { grid-template-columns: 1fr; }
     .ol-history-content { grid-template-columns: 1fr; }
     .ol-ch-area { grid-template-columns: 1fr; }
     .ol-decision-grid { grid-template-columns: 1fr; }
     .oll-header-inner { flex-direction: column; }
   }
@media (max-width: 768px) {
     .oll-content { padding: 24px 16px; }
     .ol-rw-grid { grid-template-columns: 1fr 1fr; }
     .ol-cm-formulas { grid-template-columns: 1fr; }
   }
@media (max-width: 600px) {
     .oll-content { padding: 1rem 1rem 3rem; }
     .oll-header-stats { display: none; }
     .ol-rw-grid { grid-template-columns: 1fr; }
     .ol-qz-card { padding: 1.5rem; }
   }

   
/* ═══════════════════════════════════════════════════════════
   SF SmartLabs · JJ Thomson Atomic Model Virtual Lab
   Dark Scientific Theme · Electron Blue Aesthetic
   ═══════════════════════════════════════════════════════════ */
/* ── Tokens ── */
:root {
     --bg:        #080c14;
     --surface:   #0d1424;
     --surface2:  #111927;
     --surface3:  #162035;
     --border:    #1e2d47;
     --border2:   #253652;
     --tp:        #e8f0ff;
     --ts:        #7e95c0;
     --tm:        #4a6090;
     --accent:    #4fc3f7;
     --accent2:   #00e5cc;
     --accent3:   #7c4dff;
     --warn:      #ffb74d;
     --danger:    #ef5350;
     --pink:      #f06292;
     --green:     #66bb6a;
     --electron:  #4fc3f7;
     --cathode:   #ef5350;
     --anode:     #66bb6a;
     --field-e:   #ffb74d;
     --field-b:   #7c4dff;
     --shadow:    0 4px 24px rgba(0,0,0,0.4);
     --shadow-lg: 0 12px 48px rgba(0,0,0,0.6);
     --glow:      0 0 20px rgba(79,195,247,0.3);
     --glow-lg:   0 0 40px rgba(79,195,247,0.5);
     --radius:    10px;
     --radius-lg: 18px;
     --fd: 'Syne', sans-serif;
     --fb: 'IBM Plex Sans', sans-serif;
     --fm: 'IBM Plex Mono', monospace;
   }
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }
/* ════════════════════════════════
      MAIN LAYOUT
      ════════════════════════════════ */
.jjt-root {
     min-height: 100vh;
     background: var(--bg);
     color: var(--tp);
     font-family: var(--fb);
     position: relative;
     overflow-x: hidden;
   }
/* Starfield ambient bg */
.jjt-ambient {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
     overflow: hidden;
   }
.jjt-stars {
     position: absolute;
     inset: 0;
     background-image:
       radial-gradient(circle, rgba(79,195,247,0.6) 1px, transparent 1px),
       radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px),
       radial-gradient(circle, rgba(124,77,255,0.4) 1px, transparent 1px);
     background-size: 200px 200px, 150px 150px, 300px 300px;
     background-position: 0 0, 80px 80px, 40px 120px;
     animation: jjtStarsDrift 60s linear infinite;
     opacity: 0.4;
   }
@keyframes jjtStarsDrift {
     from { transform: translate(0, 0); }
     to   { transform: translate(-200px, -200px); }
   }
.jjt-nebula1 {
     position: absolute;
     width: 800px; height: 600px;
     top: -200px; right: -200px;
     background: radial-gradient(ellipse, rgba(79,195,247,0.06) 0%, rgba(124,77,255,0.04) 40%, transparent 70%);
     animation: jjtNebulaFloat 20s ease-in-out infinite;
   }
.jjt-nebula2 {
     position: absolute;
     width: 600px; height: 600px;
     bottom: -100px; left: -150px;
     background: radial-gradient(ellipse, rgba(0,229,204,0.05) 0%, transparent 60%);
     animation: jjtNebulaFloat 25s ease-in-out infinite reverse;
   }
@keyframes jjtNebulaFloat {
     0%,100% { transform: translate(0,0) scale(1); }
     50% { transform: translate(20px,-15px) scale(1.05); }
   }
/* Scan line effect */
.jjt-scanlines {
     position: fixed;
     inset: 0;
     background: repeating-linear-gradient(
       0deg,
       transparent,
       transparent 2px,
       rgba(0,0,0,0.03) 2px,
       rgba(0,0,0,0.03) 4px
     );
     pointer-events: none;
     z-index: 1;
   }
/* ── Header ── */
.jjt-header {
     position: sticky; top: 0; z-index: 100;
     background: rgba(8,12,20,0.95);
     backdrop-filter: blur(24px);
     border-bottom: 1px solid var(--border);
     box-shadow: 0 1px 0 rgba(79,195,247,0.1), 0 4px 32px rgba(0,0,0,0.5);
   }
.jjt-header-inner {
     max-width: 1300px; margin: 0 auto;
     padding: 18px 32px 0;
     display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
   }
.jjt-header-left { flex: 1; }
.jjt-badge {
     display: inline-flex; align-items: center; gap: 8px;
     background: rgba(79,195,247,0.08);
     border: 1px solid rgba(79,195,247,0.2);
     color: var(--accent); border-radius: 99px;
     padding: 4px 14px;
     font-size: 11px; font-weight: 600; letter-spacing: 0.6px;
     margin-bottom: 10px; font-family: var(--fm);
   }
.jjt-badge-pulse {
     width: 7px; height: 7px; border-radius: 50%;
     background: var(--accent2);
     animation: jjtPulse 2s ease-in-out infinite;
     box-shadow: 0 0 6px var(--accent2);
   }
@keyframes jjtPulse {
     0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px var(--accent2); }
     50% { opacity: 0.6; transform: scale(0.8); box-shadow: 0 0 12px var(--accent2); }
   }
.jjt-title {
     font-family: var(--fd);
     font-size: clamp(1.4rem, 2.5vw, 1.9rem);
     font-weight: 800; letter-spacing: -0.5px;
     color: var(--tp); line-height: 1.1;
   }
.jjt-title-accent {
     background: linear-gradient(110deg, var(--accent), var(--accent2));
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     background-clip: text;
   }
.jjt-subtitle { font-size: 12px; color: var(--tm); margin-top: 5px; font-family: var(--fm); letter-spacing: 0.3px; }
.jjt-header-stats {
     display: flex; align-items: center; gap: 20px;
     padding-top: 4px; flex-shrink: 0;
   }
.jjt-stat { display: flex; flex-direction: column; align-items: center; }
.jjt-stat-num {
     font-family: var(--fd); font-size: 1.5rem; font-weight: 800;
     color: var(--accent); line-height: 1;
     text-shadow: 0 0 20px rgba(79,195,247,0.5);
   }
.jjt-stat-label { font-size: 10px; color: var(--tm); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 3px; }
.jjt-stat-div { width: 1px; height: 36px; background: var(--border); }
/* Tabs */
.jjt-tabs {
     max-width: 1300px; margin: 0 auto; padding: 0 32px;
     display: flex; gap: 0; overflow-x: auto;
   }
.jjt-tabs::-webkit-scrollbar { display: none; }
.jjt-tab {
     display: flex; align-items: center; gap: 12px;
     padding: 16px 22px; background: none; border: none;
     cursor: pointer; white-space: nowrap;
     color: var(--ts); font-family: var(--fb);
     transition: color 0.2s;
     border-bottom: 2px solid transparent;
     position: relative;
   }
.jjt-tab:hover { color: var(--tp); }
.jjt-tab-active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.jjt-tab-active::after {
     content: '';
     position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
     width: 40px; height: 2px;
     background: var(--accent);
     box-shadow: 0 0 12px var(--accent);
   }
.jjt-tab-icon { font-size: 18px; }
.jjt-tab-label { font-size: 14px; font-weight: 600; display: block; }
.jjt-tab-sub { font-size: 10px; color: var(--tm); display: block; }
/* ── Content ── */
.jjt-content {
     max-width: 1300px; margin: 0 auto;
     padding: 44px 32px; position: relative; z-index: 2;
   }
/* ── Footer ── */
.jjt-footer {
     border-top: 1px solid var(--border);
     padding: 22px 32px;
     display: flex; align-items: center; justify-content: space-between;
     font-size: 12px; color: var(--tm);
     max-width: 1300px; margin: 0 auto;
     font-family: var(--fm);
   }
.jjt-footer-cta {
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     color: #050c14; text-decoration: none;
     padding: 9px 20px; border-radius: 8px;
     font-size: 13px; font-weight: 700;
     font-family: var(--fd);
     transition: transform 0.2s, box-shadow 0.2s;
   }
.jjt-footer-cta:hover { transform: translateY(-1px); box-shadow: var(--glow-lg); }
/* ════════════════════════════════
      SHARED COMPONENTS
      ════════════════════════════════ */
.jjt-eyebrow {
     display: flex; align-items: center; gap: 8px;
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 1.2px; color: var(--ts); margin-bottom: 0.5rem;
     font-family: var(--fm);
   }
.jjt-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.jjt-section-title {
     font-family: var(--fd);
     font-size: clamp(1.5rem, 3vw, 2.2rem);
     font-weight: 800; letter-spacing: -0.8px;
     color: var(--tp); margin-bottom: 1.25rem;
   }
.jjt-body-text { color: var(--ts); line-height: 1.8; margin-bottom: 1.5rem; font-size: 0.95rem; }
.jjt-body-text strong { color: var(--accent); font-weight: 600; }
.jjt-body-text em { color: var(--accent2); font-style: normal; font-weight: 500; }
/* Cards */
.jjt-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 2rem;
     box-shadow: var(--shadow);
     position: relative;
     overflow: hidden;
   }
.jjt-card::before {
     content: '';
     position: absolute; top: 0; left: 0; right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(79,195,247,0.3), transparent);
   }
.jjt-card-glow::after {
     content: '';
     position: absolute; top: -40px; right: -40px;
     width: 150px; height: 150px;
     background: radial-gradient(circle, rgba(79,195,247,0.06) 0%, transparent 70%);
     pointer-events: none;
   }
/* Data values */
.jjt-data-val {
     font-family: var(--fm);
     color: var(--accent);
     font-weight: 600;
   }
/* Glow text */
.jjt-glow-text {
     color: var(--accent);
     text-shadow: 0 0 20px rgba(79,195,247,0.6);
   }
/* Animations */
@keyframes jjtFadeIn  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes jjtFadeUp  { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes jjtPop     { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes jjtSlideIn { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes jjtElectronOrbit {
     from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
     to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
   }
@keyframes jjtSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes jjtFloat {
     0%,100% { transform: translateY(0); }
     50% { transform: translateY(-8px); }
   }
/* ════════════════════════════════
      THEORY
      ════════════════════════════════ */
.jjt-theory-root { display: flex; flex-direction: column; gap: 52px; }
/* Hero */
.jjt-hero {
     display: grid;
     grid-template-columns: 1.3fr 1fr;
     gap: 3rem;
     align-items: start;
   }
.jjt-hero-text { animation: jjtFadeIn 0.5s ease; }
.jjt-hero-visual {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     animation: jjtFadeIn 0.7s ease;
   }
/* Thomson Model SVG */
.jjt-model-svg { width: 100%; max-width: 340px; }
/* Timeline */
.jjt-timeline {
     position: relative;
     padding-left: 2rem;
   }
.jjt-timeline::before {
     content: '';
     position: absolute; left: 0; top: 0; bottom: 0;
     width: 2px;
     background: linear-gradient(180deg, var(--accent), var(--accent3), transparent);
   }
.jjt-timeline-item {
     position: relative;
     margin-bottom: 2rem;
     animation: jjtSlideIn 0.4s ease both;
   }
.jjt-timeline-item::before {
     content: '';
     position: absolute; left: -2.35rem; top: 6px;
     width: 12px; height: 12px; border-radius: 50%;
     background: var(--accent);
     box-shadow: 0 0 10px var(--accent);
     border: 2px solid var(--bg);
   }
.jjt-timeline-year {
     font-family: var(--fm); font-size: 11px;
     color: var(--accent2); font-weight: 600;
     letter-spacing: 0.5px; margin-bottom: 4px;
   }
.jjt-timeline-title { font-weight: 700; color: var(--tp); font-size: 0.95rem; margin-bottom: 4px; }
.jjt-timeline-desc { font-size: 0.85rem; color: var(--ts); line-height: 1.6; }
/* Key facts */
.jjt-facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.jjt-fact-card {
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 1.5rem 1.25rem;
     text-align: center;
     transition: all 0.25s;
     cursor: default;
     animation: jjtFadeUp 0.4s ease both;
   }
.jjt-fact-card:hover {
     border-color: var(--border2);
     background: var(--surface3);
     transform: translateY(-3px);
     box-shadow: var(--glow);
   }
.jjt-fact-icon { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.jjt-fact-val {
     font-family: var(--fd); font-size: 1.4rem; font-weight: 800;
     color: var(--accent);
     text-shadow: 0 0 16px rgba(79,195,247,0.4);
     margin-bottom: 4px;
   }
.jjt-fact-label { font-size: 0.78rem; color: var(--ts); line-height: 1.5; }
/* Experiment setup */
.jjt-setup-section {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 3rem;
     box-shadow: var(--shadow);
     position: relative; overflow: hidden;
   }
.jjt-setup-section::before {
     content: '';
     position: absolute; top: 0; left: 0; right: 0; height: 2px;
     background: linear-gradient(90deg, var(--accent), var(--accent3), var(--accent2));
   }
.jjt-tube-diagram-wrap {
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     margin: 1.5rem 0;
   }
.jjt-tube-svg { width: 100%; }
/* Components list */
.jjt-components-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.jjt-component-card {
     display: flex; gap: 14px;
     padding: 1rem 1.25rem;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); align-items: flex-start;
     transition: all 0.2s;
   }
.jjt-component-card:hover { border-color: var(--border2); }
.jjt-comp-dot {
     min-width: 10px; height: 10px; border-radius: 50%;
     margin-top: 5px; flex-shrink: 0;
   }
.jjt-comp-name { font-weight: 700; font-size: 0.9rem; color: var(--tp); margin-bottom: 3px; }
.jjt-comp-desc { font-size: 0.8rem; color: var(--ts); line-height: 1.55; }
/* Physics section */
.jjt-physics-section {
     display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
   }
.jjt-formula-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 2rem;
     box-shadow: var(--shadow);
   }
.jjt-formula-card h4 {
     font-family: var(--fd); font-weight: 700; font-size: 1rem;
     color: var(--tp); margin-bottom: 1rem;
     display: flex; align-items: center; gap: 10px;
   }
.jjt-formula-box {
     background: rgba(79,195,247,0.06);
     border: 1px solid rgba(79,195,247,0.2);
     border-radius: 10px;
     padding: 1.25rem 1.5rem;
     font-family: var(--fm);
     font-size: 1.3rem; font-weight: 700;
     color: var(--accent);
     text-align: center;
     letter-spacing: 0.05em;
     margin-bottom: 1rem;
     text-shadow: 0 0 20px rgba(79,195,247,0.4);
   }
.jjt-formula-steps { display: flex; flex-direction: column; gap: 8px; }
.jjt-formula-step {
     display: flex; align-items: flex-start; gap: 10px;
     padding: 8px 12px;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: 8px; font-size: 0.82rem;
   }
.jjt-fs-num {
     min-width: 22px; height: 22px; border-radius: 50%;
     background: rgba(79,195,247,0.15); color: var(--accent);
     display: flex; align-items: center; justify-content: center;
     font-weight: 800; font-size: 0.7rem; flex-shrink: 0;
   }
.jjt-fs-text { color: var(--ts); line-height: 1.5; }
.jjt-fs-math { font-family: var(--fm); color: var(--accent2); font-size: 0.8rem; margin-top: 3px; }
/* Discoveries */
.jjt-discoveries { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.jjt-discovery-card {
     display: flex; gap: 1.25rem;
     padding: 1.25rem 1.5rem;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     border-left: 3px solid;
     transition: all 0.2s;
     animation: jjtFadeIn 0.4s ease both;
   }
.jjt-discovery-card:hover { background: var(--surface2); }
.jjt-disc-num {
     font-family: var(--fd); font-size: 2rem; font-weight: 800;
     line-height: 1; flex-shrink: 0; opacity: 0.6;
   }
.jjt-disc-title { font-weight: 700; font-size: 0.95rem; color: var(--tp); margin-bottom: 5px; }
.jjt-disc-text { font-size: 0.85rem; color: var(--ts); line-height: 1.65; }
.jjt-disc-formula {
     font-family: var(--fm); font-size: 0.82rem;
     margin-top: 6px; padding: 5px 10px;
     border-radius: 6px; display: inline-block;
   }
/* Models comparison */
.jjt-models-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.jjt-model-card {
     background: var(--surface2);
     border: 1.5px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 1.75rem 1.25rem;
     text-align: center;
     transition: all 0.3s;
   }
.jjt-model-card:hover { border-color: var(--border2); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.jjt-model-active { border-color: rgba(79,195,247,0.4) !important; background: rgba(79,195,247,0.04) !important; }
.jjt-model-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.jjt-model-name { font-family: var(--fd); font-weight: 700; font-size: 1rem; color: var(--tp); margin-bottom: 4px; }
.jjt-model-year { font-family: var(--fm); font-size: 11px; color: var(--accent2); margin-bottom: 0.75rem; }
.jjt-model-desc { font-size: 0.8rem; color: var(--ts); line-height: 1.55; }
/* ════════════════════════════════
      SIMULATION
      ════════════════════════════════ */
.jjt-sim-root {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
   }
.jjt-sim-layout {
     display: grid;
     grid-template-columns: 280px 1fr;
     gap: 1.5rem;
   }
/* Control Panel */
.jjt-control-panel {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     display: flex; flex-direction: column; gap: 1.5rem;
     height: -moz-fit-content;
     height: fit-content;
     box-shadow: var(--shadow);
   }
.jjt-panel-section { display: flex; flex-direction: column; gap: 0.75rem; }
.jjt-panel-label {
     font-size: 10px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.12em; color: var(--tm); font-family: var(--fm);
   }
/* Buttons */
.jjt-btn {
     display: flex; align-items: center; justify-content: center; gap: 8px;
     padding: 11px 18px;
     border-radius: var(--radius); font-weight: 700; font-size: 0.88rem;
     transition: all 0.2s; font-family: var(--fd);
   }
.jjt-btn:hover:not(:disabled) { transform: translateY(-2px); }
.jjt-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jjt-btn-start {
     background: linear-gradient(135deg, var(--accent2), var(--accent));
     color: #050c14;
     box-shadow: 0 4px 16px rgba(0,229,204,0.3);
   }
.jjt-btn-start:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(0,229,204,0.5); }
.jjt-btn-pause {
     background: rgba(255,183,77,0.15);
     color: var(--warn);
     border: 1.5px solid rgba(255,183,77,0.3);
   }
.jjt-btn-pause:hover:not(:disabled) { background: rgba(255,183,77,0.25); }
.jjt-btn-reset {
     background: rgba(239,83,80,0.12);
     color: var(--danger);
     border: 1.5px solid rgba(239,83,80,0.25);
   }
.jjt-btn-reset:hover:not(:disabled) { background: rgba(239,83,80,0.22); }
.jjt-btn-step {
     background: rgba(124,77,255,0.15);
     color: var(--accent3);
     border: 1.5px solid rgba(124,77,255,0.3);
     font-size: 0.82rem;
   }
.jjt-btn-step:hover:not(:disabled) { background: rgba(124,77,255,0.25); }
.jjt-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jjt-btn-row .jjt-btn { font-size: 0.8rem; padding: 9px 10px; }
/* Sliders */
.jjt-slider-row {
     display: flex; flex-direction: column; gap: 6px;
   }
.jjt-slider-header {
     display: flex; justify-content: space-between; align-items: center;
   }
.jjt-slider-label { font-size: 0.82rem; color: var(--ts); font-weight: 500; }
.jjt-slider-val { font-family: var(--fm); font-size: 0.82rem; font-weight: 700; }
.jjt-slider {
     width: 100%; height: 5px; border-radius: 99px;
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none; outline: none; cursor: pointer;
     background: var(--surface2); border: 1px solid var(--border);
   }
.jjt-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
             appearance: none;
     width: 18px; height: 18px; border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 2px 8px rgba(0,0,0,0.4);
     -webkit-transition: transform 0.15s;
     transition: transform 0.15s;
   }
.jjt-slider::-webkit-slider-thumb:active { transform: scale(1.2); }
.jjt-slider-voltage::-webkit-slider-thumb { background: var(--warn); }
.jjt-slider-efield::-webkit-slider-thumb  { background: var(--field-e); }
.jjt-slider-bfield::-webkit-slider-thumb  { background: var(--field-b); }
.jjt-slider-pressure::-webkit-slider-thumb { background: var(--ts); }
/* Measurements panel */
.jjt-measurements {
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 1rem;
     display: flex; flex-direction: column; gap: 8px;
   }
.jjt-meas-row {
     display: flex; justify-content: space-between; align-items: center;
   }
.jjt-meas-label { font-size: 0.78rem; color: var(--tm); }
.jjt-meas-val { font-family: var(--fm); font-size: 0.82rem; font-weight: 700; }
.jjt-meas-divider { height: 1px; background: var(--border); }
/* Step indicator */
.jjt-step-indicator {
     background: rgba(79,195,247,0.06);
     border: 1px solid rgba(79,195,247,0.2);
     border-radius: var(--radius);
     padding: 10px 14px;
   }
.jjt-step-num { font-family: var(--fm); font-size: 10px; color: var(--accent2); margin-bottom: 4px; }
.jjt-step-text { font-size: 0.82rem; color: var(--tp); line-height: 1.5; }
/* Canvas area */
.jjt-canvas-area {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     display: flex; flex-direction: column; gap: 1.25rem;
     box-shadow: var(--shadow);
   }
.jjt-canvas-header {
     display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
   }
.jjt-canvas-title { font-family: var(--fd); font-weight: 700; font-size: 1rem; color: var(--tp); }
.jjt-view-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.jjt-view-tab {
     padding: 6px 14px;
     background: var(--surface2); border: 1.5px solid var(--border);
     border-radius: 8px; font-size: 0.78rem; font-weight: 600; color: var(--ts);
     transition: all 0.2s; font-family: var(--fb);
   }
.jjt-view-tab:hover { color: var(--tp); }
.jjt-vtab-active { color: var(--accent) !important; border-color: rgba(79,195,247,0.4) !important; background: rgba(79,195,247,0.08) !important; }
.jjt-canvas-wrap {
     background: #040912;
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     position: relative; overflow: hidden;
     min-height: 300px;
   }
.jjt-main-canvas {
     width: 100%;
     display: block;
     border-radius: var(--radius-lg);
   }
/* Physics info row */
.jjt-physics-row {
     display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
   }
.jjt-phys-card {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 0.875rem 1rem; text-align: center;
   }
.jjt-phys-label { font-size: 10px; color: var(--tm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; font-family: var(--fm); }
.jjt-phys-val { font-family: var(--fm); font-size: 0.9rem; font-weight: 700; color: var(--tp); }
/* Discovery result */
.jjt-discovery-result {
     background: linear-gradient(135deg, rgba(0,229,204,0.08), rgba(79,195,247,0.06));
     border: 1.5px solid rgba(0,229,204,0.3);
     border-radius: var(--radius-lg);
     padding: 1.5rem 2rem;
     display: flex; align-items: flex-start; gap: 1.5rem;
     animation: jjtFadeIn 0.5s ease;
   }
.jjt-disc-icon-big { font-size: 3rem; flex-shrink: 0; animation: jjtFloat 3s ease-in-out infinite; }
.jjt-disc-content h3 { font-family: var(--fd); font-weight: 800; font-size: 1.1rem; color: var(--accent2); margin-bottom: 6px; }
.jjt-disc-content p { font-size: 0.88rem; color: var(--ts); line-height: 1.65; }
.jjt-disc-em-ratio {
     font-family: var(--fm); font-size: 1.4rem; font-weight: 700;
     color: var(--accent); margin: 8px 0;
     text-shadow: 0 0 20px rgba(79,195,247,0.5);
   }
/* ════════════════════════════════
      QUIZ
      ════════════════════════════════ */
.jjt-quiz-root {
     max-width: 780px; margin: 0 auto;
     display: flex; flex-direction: column; gap: 1.5rem;
   }
.jjt-qz-progress { display: flex; flex-direction: column; gap: 10px; }
.jjt-qz-info { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ts); }
.jjt-qz-track {
     position: relative; height: 8px;
     background: var(--surface2); border-radius: 99px;
     border: 1px solid var(--border); overflow: hidden;
   }
.jjt-qz-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--accent), var(--accent2));
     border-radius: 99px; transition: width 0.5s ease;
     box-shadow: 0 0 8px rgba(79,195,247,0.5);
   }
.jjt-qz-pip {
     position: absolute; top: 50%; transform: translate(-50%,-50%);
     width: 10px; height: 10px; border-radius: 50%;
     background: var(--surface2); border: 2px solid var(--border);
     transition: all 0.3s;
   }
.jjt-pip-done { background: var(--accent2) !important; border-color: var(--accent2) !important; box-shadow: 0 0 6px var(--accent2); }
.jjt-pip-cur  { border-color: var(--accent) !important; }
.jjt-qz-timer { display: flex; align-items: center; gap: 12px; }
.jjt-qz-timer-track { flex: 1; height: 5px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.jjt-qz-timer-fill { height: 100%; border-radius: 99px; transition: width 1s linear, background 0.5s; }
.jjt-qz-timer-num { font-family: var(--fm); font-size: 0.9rem; font-weight: 700; min-width: 44px; text-align: right; }
.jjt-qz-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 2.5rem;
     display: flex; flex-direction: column; gap: 1.5rem;
     box-shadow: var(--shadow-lg);
     animation: jjtFadeIn 0.3s ease;
     position: relative; overflow: hidden;
   }
.jjt-qz-card::before {
     content: '';
     position: absolute; top: 0; left: 0; right: 0; height: 2px;
     background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
   }
.jjt-qz-meta { display: flex; align-items: center; gap: 10px; }
.jjt-qz-cat {
     background: rgba(79,195,247,0.1); color: var(--accent);
     border: 1px solid rgba(79,195,247,0.2); border-radius: 999px;
     padding: 4px 12px; font-size: 11px; font-weight: 600;
     font-family: var(--fm);
   }
.jjt-qz-diff { border: 1px solid; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600; font-family: var(--fm); }
.jjt-qz-num { margin-left: auto; font-family: var(--fm); font-size: 0.85rem; color: var(--tm); }
.jjt-qz-question { font-family: var(--fd); font-size: 1.15rem; font-weight: 700; line-height: 1.4; color: var(--tp); }
.jjt-qz-eq {
     font-family: var(--fm); background: rgba(79,195,247,0.06);
     border: 1px solid rgba(79,195,247,0.2); border-radius: 8px;
     padding: 10px 16px; text-align: center; font-size: 1rem;
     color: var(--accent); font-weight: 600;
   }
.jjt-qz-timeout { color: var(--danger); font-weight: 700; text-align: center; font-size: 1.1rem; font-family: var(--fd); }
.jjt-qz-options { display: flex; flex-direction: column; gap: 10px; }
.jjt-qz-option {
     display: flex; align-items: center; gap: 14px;
     padding: 13px 16px;
     background: var(--surface2); border: 1.5px solid var(--border);
     border-radius: var(--radius); text-align: left;
     color: var(--tp); font-size: 0.9rem;
     transition: all 0.2s; font-family: var(--fb);
   }
.jjt-qz-option:hover:not(:disabled):not(.jjt-opt-dim) {
     border-color: rgba(79,195,247,0.4); background: rgba(79,195,247,0.06); transform: translateX(3px);
   }
.jjt-opt-letter {
     min-width: 30px; height: 30px; border-radius: 8px;
     background: var(--surface); border: 1.5px solid var(--border);
     display: flex; align-items: center; justify-content: center;
     font-weight: 800; font-size: 0.78rem; transition: all 0.2s; color: var(--ts);
     font-family: var(--fm);
   }
.jjt-opt-text { flex: 1; }
.jjt-opt-check { color: var(--accent2); font-weight: 700; margin-left: auto; }
.jjt-opt-x     { color: var(--danger); font-weight: 700; margin-left: auto; }
.jjt-opt-correct  { border-color: rgba(0,229,204,0.5) !important; background: rgba(0,229,204,0.08) !important; }
.jjt-opt-wrong    { border-color: rgba(239,83,80,0.4) !important; background: rgba(239,83,80,0.07) !important; }
.jjt-opt-dim      { opacity: 0.4; }
.jjt-opt-selected { border-color: rgba(79,195,247,0.5) !important; background: rgba(79,195,247,0.08) !important; }
.jjt-qz-exp {
     display: flex; align-items: flex-start; gap: 14px;
     padding: 1.25rem; border-radius: var(--radius); border: 1.5px solid;
     animation: jjtFadeIn 0.35s ease;
   }
.jjt-exp-ok { border-color: rgba(0,229,204,0.3); background: rgba(0,229,204,0.06); }
.jjt-exp-no { border-color: rgba(239,83,80,0.25); background: rgba(239,83,80,0.05); }
.jjt-exp-icon { font-size: 1.4rem; }
.jjt-exp-title { font-weight: 700; margin-bottom: 4px; color: var(--tp); font-family: var(--fd); }
.jjt-exp-text  { font-size: 0.88rem; color: var(--ts); line-height: 1.6; }
.jjt-exp-math  {
     font-family: var(--fm); color: var(--accent);
     background: rgba(79,195,247,0.08); padding: 5px 10px;
     border-radius: 6px; font-size: 0.85rem; margin-top: 6px; display: inline-block;
   }
.jjt-qz-next {
     padding: 14px 28px;
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     color: #050c14; border-radius: var(--radius);
     font-weight: 800; font-size: 0.95rem; font-family: var(--fd);
     transition: transform 0.2s, box-shadow 0.2s; align-self: flex-end;
   }
.jjt-qz-next:hover { transform: translateY(-2px); box-shadow: var(--glow-lg); }
/* Result */
.jjt-result {
     display: flex; flex-direction: column; align-items: center; gap: 2rem;
     max-width: 780px; margin: 0 auto;
   }
.jjt-result-ring {
     width: 150px; height: 150px; border-radius: 50%; border: 4px solid;
     display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
     animation: jjtPop 0.6s cubic-bezier(.2,.85,.3,1.4) both;
     position: relative;
   }
.jjt-result-ring::after {
     content: '';
     position: absolute; inset: -8px; border-radius: 50%;
     border: 1px solid; opacity: 0.3;
     animation: jjtSpin 8s linear infinite;
   }
.jjt-result-grade { font-family: var(--fd); font-size: 2.8rem; font-weight: 800; }
.jjt-result-pct   { font-size: 0.9rem; font-weight: 600; font-family: var(--fm); }
.jjt-result-title { font-family: var(--fd); font-size: 2.2rem; font-weight: 800; color: var(--tp); }
.jjt-result-msg   { color: var(--ts); text-align: center; max-width: 480px; line-height: 1.65; }
.jjt-result-stats {
     display: flex; gap: 2.5rem;
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 1.5rem 2.5rem;
     box-shadow: var(--shadow);
   }
.jjt-rs-stat { text-align: center; }
.jjt-rs-num  { display: block; font-family: var(--fd); font-size: 2.8rem; font-weight: 800; }
.jjt-rs-lbl  { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tm); font-family: var(--fm); }
.jjt-review { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.jjt-review-title { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--tp); margin-bottom: 0.5rem; }
.jjt-rev-item {
     display: flex; gap: 14px; padding: 1rem 1.25rem;
     border-radius: var(--radius); border: 1px solid var(--border);
     background: var(--surface); box-shadow: var(--shadow);
     animation: jjtFadeIn 0.3s ease both;
   }
.jjt-rev-correct { border-left: 3px solid rgba(0,229,204,0.6) !important; }
.jjt-rev-wrong   { border-left: 3px solid rgba(239,83,80,0.5) !important; }
.jjt-rev-q   { font-size: 0.88rem; color: var(--tp); margin-bottom: 4px; }
.jjt-rev-a   { font-size: 0.82rem; color: var(--ts); }
.jjt-rev-exp { font-size: 0.82rem; color: var(--ts); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.jjt-retry-btn {
     padding: 14px 36px;
     background: linear-gradient(135deg, var(--accent3), var(--accent));
     color: white; border-radius: var(--radius);
     font-weight: 800; font-size: 0.95rem; font-family: var(--fd);
     transition: transform 0.2s, box-shadow 0.2s;
   }
.jjt-retry-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(124,77,255,0.4); }
/* ════════════════════════════════
      APPLICATION
      ════════════════════════════════ */
.jjt-app-root { display: flex; flex-direction: column; gap: 3rem; }
.jjt-app-section {
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 2.5rem;
     box-shadow: var(--shadow);
     position: relative; overflow: hidden;
   }
.jjt-app-section::before {
     content: '';
     position: absolute; top: 0; left: 0; right: 0; height: 1px;
     background: linear-gradient(90deg, transparent, rgba(79,195,247,0.3), transparent);
   }
.jjt-challenge-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5rem 0; }
.jjt-challenge-tab {
     display: flex; align-items: center; gap: 8px;
     padding: 9px 18px;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); font-size: 0.85rem; color: var(--ts);
     transition: all 0.15s; font-family: var(--fb);
   }
.jjt-challenge-tab:hover { border-color: var(--border2); color: var(--tp); }
.jjt-ct-active { border-color: rgba(79,195,247,0.4) !important; color: var(--tp) !important; background: rgba(79,195,247,0.07) !important; }
.jjt-ct-solved { border-color: rgba(0,229,204,0.4) !important; background: rgba(0,229,204,0.05) !important; }
.jjt-ct-check { color: var(--accent2); font-weight: 700; }
.jjt-ct-num   { font-family: var(--fm); font-size: 0.78rem; color: var(--tm); }
.jjt-ct-name  { font-weight: 600; color: var(--tp); }
.jjt-ct-diff  { font-size: 0.75rem; font-weight: 700; font-family: var(--fm); }
.jjt-challenge-area { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem; align-items: start; }
.jjt-challenge-info { display: flex; flex-direction: column; gap: 1rem; }
.jjt-ch-title {
     font-family: var(--fd); font-size: 1.1rem; font-weight: 700;
     display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--tp);
   }
.jjt-ch-badge { border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; font-family: var(--fm); }
.jjt-ch-desc { color: var(--ts); font-size: 0.9rem; line-height: 1.65; }
.jjt-ch-expected {
     display: flex; align-items: flex-start; gap: 10px;
     padding: 10px 14px; background: var(--surface2);
     border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap;
   }
.jjt-ch-exp-label { font-size: 0.78rem; color: var(--tm); flex-shrink: 0; margin-top: 2px; font-family: var(--fm); }
.jjt-ch-exp-val   { font-family: var(--fm); font-size: 0.78rem; color: var(--accent2); font-weight: 600; white-space: pre; }
.jjt-hints-box {
     background: rgba(255,183,77,0.05); border: 1px solid rgba(255,183,77,0.2);
     border-radius: var(--radius); padding: 1rem 1.25rem;
   }
.jjt-hints-title { font-weight: 700; font-size: 0.85rem; color: var(--warn); margin-bottom: 0.5rem; font-family: var(--fd); }
.jjt-hint-text   { font-size: 0.88rem; color: var(--ts); margin-bottom: 0.75rem; line-height: 1.6; }
.jjt-hint-nav    { display: flex; gap: 8px; }
.jjt-hint-nav button {
     padding: 5px 14px; background: var(--surface2); border: 1px solid var(--border);
     border-radius: 6px; font-size: 0.78rem; color: var(--ts); transition: all 0.15s;
   }
.jjt-hint-nav button:hover:not(:disabled) { color: var(--tp); border-color: var(--border2); }
.jjt-hint-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.jjt-editor-area {
     background: #04090f; border: 1px solid #1a2640;
     border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
   }
.jjt-editor-header {
     display: flex; align-items: center; gap: 8px;
     padding: 11px 16px; background: #070e1c; border-bottom: 1px solid #1a2640;
   }
.jjt-editor-lang { margin-left: 4px; font-size: 11px; color: rgba(255,255,255,0.3); flex: 1; font-family: var(--fm); }
.jjt-editor-actions { display: flex; gap: 8px; }
.jjt-action-btn {
     padding: 5px 12px; background: rgba(255,255,255,0.05);
     border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
     font-size: 0.78rem; color: rgba(255,255,255,0.4); transition: all 0.15s;
   }
.jjt-action-btn:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.09); }
.jjt-sol-btn { color: rgba(0,229,204,0.7) !important; border-color: rgba(0,229,204,0.15) !important; }
.jjt-editor {
     width: 100%; min-height: 280px;
     background: transparent; border: none;
     padding: 1.25rem 1.5rem;
     color: #7dd3b0;
     font-family: var(--fm); font-size: 12.5px; line-height: 1.85;
     resize: vertical; outline: none;
   }
.jjt-editor:-moz-read-only { color: #4fc3a0; }
.jjt-editor:read-only { color: #4fc3a0; }
.jjt-editor-footer {
     display: flex; gap: 10px; padding: 12px 16px;
     background: #070e1c; border-top: 1px solid #1a2640;
   }
.jjt-run-btn {
     padding: 10px 24px; background: var(--accent2); color: #050c14;
     font-weight: 800; border-radius: 8px; font-size: 0.88rem; font-family: var(--fd);
     transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
   }
.jjt-run-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,229,204,0.4); }
.jjt-reset-btn {
     padding: 10px 16px; background: rgba(255,255,255,0.05);
     border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
     font-size: 0.88rem; color: rgba(255,255,255,0.4); transition: all 0.15s;
   }
.jjt-reset-btn:hover { color: rgba(255,255,255,0.7); }
.jjt-output {
     border-radius: var(--radius-lg); overflow: hidden;
     border: 1.5px solid; margin-top: 1rem; animation: jjtFadeIn 0.3s ease;
   }
.jjt-out-ok   { border-color: rgba(0,229,204,0.35); }
.jjt-out-err  { border-color: rgba(239,83,80,0.35); }
.jjt-out-warn { border-color: rgba(255,183,77,0.35); }
.jjt-out-header {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 16px; background: var(--surface2);
     border-bottom: 1px solid var(--border);
     font-size: 12px; font-weight: 600; color: var(--tm); font-family: var(--fm);
   }
.jjt-out-body {
     padding: 1rem 1.25rem; font-family: var(--fm); font-size: 13px;
     line-height: 1.8; white-space: pre-wrap; background: var(--surface);
   }
.jjt-out-ok   .jjt-out-body { color: var(--accent2); }
.jjt-out-err  .jjt-out-body { color: var(--danger); }
.jjt-out-warn .jjt-out-body { color: var(--warn); }
/* Dot styles for editor */
.jjt-dot   { width: 12px; height: 12px; border-radius: 50%; }
.jjt-dot-r { background: #ff5f57; }
.jjt-dot-y { background: #febc2e; }
.jjt-dot-g { background: #28c840; }
/* Applications legacy compat */
.jjt-rw-tabs { display: flex; gap: 10px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.jjt-rw-tab {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 18px; background: var(--surface2);
     border: 1.5px solid var(--border); border-radius: var(--radius);
     font-size: 0.88rem; color: var(--ts); transition: all 0.15s;
   }
.jjt-rw-tab:hover { color: var(--tp); background: var(--surface3); }
.jjt-rw-active { border-color: rgba(0,229,204,0.4) !important; color: var(--accent2) !important; background: rgba(0,229,204,0.06) !important; }
.jjt-rw-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; }
.jjt-rw-output {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 1.25rem;
   }
.jjt-rw-out-label {
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.1em; color: var(--tm); margin-bottom: 0.75rem; font-family: var(--fm);
   }
.jjt-rw-out-body { font-family: var(--fm); font-size: 13px; color: var(--accent2); line-height: 1.8; white-space: pre-wrap; }
/* Code block */
.jjt-code-block {
     background: #04090f; border: 1px solid #1a2640;
     border-radius: var(--radius-lg); overflow: hidden;
   }
.jjt-code-header {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 16px; background: #070e1c;
     border-bottom: 1px solid #1a2640;
   }
.jjt-code-lang { margin-left: auto; font-size: 11px; color: rgba(255,255,255,0.3); font-family: var(--fm); }
.jjt-code-body { padding: 1.5rem; font-family: var(--fm); font-size: 12.5px; line-height: 1.85; overflow-x: auto; }
/* ════════════════════════════════
      RESPONSIVE
      ════════════════════════════════ */
@media (max-width: 1100px) {
     .jjt-sim-layout { grid-template-columns: 1fr; }
   }
@media (max-width: 900px) {
     .jjt-hero { grid-template-columns: 1fr; }
     .jjt-physics-section { grid-template-columns: 1fr; }
     .jjt-facts-grid { grid-template-columns: 1fr 1fr; }
     .jjt-models-grid { grid-template-columns: 1fr; }
     .jjt-physics-row { grid-template-columns: 1fr 1fr; }
     .jjt-components-grid { grid-template-columns: 1fr; }
     .jjt-challenge-area { grid-template-columns: 1fr; }
     .jjt-rw-layout { grid-template-columns: 1fr; }
   }
@media (max-width: 768px) {
     .jjt-content { padding: 28px 16px; }
     .jjt-header-inner { flex-direction: column; }
     .jjt-app-section { padding: 1.5rem; }
   }
@media (max-width: 600px) {
     .jjt-content { padding: 1rem 1rem 3rem; }
     .jjt-header-stats { display: none; }
     .jjt-facts-grid { grid-template-columns: 1fr; }
     .jjt-physics-row { grid-template-columns: 1fr 1fr; }
   }

   
/* ═══════════════════════════════════════════════════════════
   SF SmartLabs · Quadratic Equation Lab — CSS
   Light Theme · Elevated Math-Lab Aesthetic
   ═══════════════════════════════════════════════════════════ */
/* ── Tokens ── */
:root {
     --bg:        #f8f9fc;
     --surface:   #ffffff;
     --surface2:  #f3f4f8;
     --border:    #e4e6ef;
     --border2:   #d1d5e8;
     --tp:        #0f1117;
     --ts:        #4b5270;
     --tm:        #8890aa;
     --accent:    #6366f1;
     --accent2:   #00d4aa;
     --warn:      #f59e0b;
     --danger:    #ef4444;
     --pink:      #ec4899;
     --purple:    #a78bfa;
     --blue:      #38bdf8;
     --orange:    #fb923c;
     --shadow:    0 2px 16px rgba(0,0,0,0.07);
     --shadow-lg: 0 8px 40px rgba(0,0,0,0.10);
     --radius:    12px;
     --radius-lg: 20px;
     --fd: 'Bricolage Grotesque', sans-serif;
     --fb: 'DM Sans', sans-serif;
     --fm: 'JetBrains Mono', monospace;
   }
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }
/* ════════════════════════════════
      MAIN LAYOUT
      ════════════════════════════════ */
.qel-root {
     min-height: 100vh;
     background: var(--bg);
     color: var(--tp);
     font-family: var(--fb);
     position: relative;
     overflow-x: hidden;
   }
/* Ambient background */
.qel-ambient {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
   }
.qel-blob {
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
   }
.qel-blob1 { width: 600px; height: 600px; top: -100px; right: -150px; background: radial-gradient(circle, rgba(99,102,241,0.07) 0%, transparent 70%); animation: qelFloat1 16s ease-in-out infinite; }
.qel-blob2 { width: 500px; height: 500px; bottom: 100px; left: -100px; background: radial-gradient(circle, rgba(0,212,170,0.06) 0%, transparent 70%); animation: qelFloat2 20s ease-in-out infinite; }
.qel-blob3 { width: 400px; height: 400px; top: 50%; left: 40%; background: radial-gradient(circle, rgba(245,158,11,0.04) 0%, transparent 70%); animation: qelFloat1 13s ease-in-out infinite reverse; }
@keyframes qelFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,15px)} }
@keyframes qelFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(15px,-10px)} }
.qel-grid {
     position: absolute; inset: 0;
     background-image: radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px);
     background-size: 36px 36px;
     mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
     -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
     opacity: 0.3;
   }
/* ── Header ── */
.qel-header {
     position: sticky; top: 0; z-index: 100;
     background: rgba(248,249,252,0.92);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     box-shadow: 0 1px 20px rgba(0,0,0,0.05);
   }
.qel-header-inner {
     max-width: 1200px; margin: 0 auto;
     padding: 20px 28px 0;
     display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
   }
.qel-header-left { flex: 1; }
.qel-badge {
     display: inline-flex; align-items: center; gap: 7px;
     background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25);
     color: var(--accent); border-radius: 99px; padding: 4px 12px;
     font-size: 11px; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 8px;
   }
.qel-badge-dot {
     width: 6px; height: 6px; border-radius: 50%;
     background: var(--accent2); animation: qelPulse 2s ease-in-out infinite;
   }
@keyframes qelPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
.qel-title {
     font-family: var(--fd);
     font-size: clamp(1.5rem, 3vw, 2rem);
     font-weight: 800; letter-spacing: -0.8px;
     color: var(--tp); line-height: 1.1;
   }
.qel-title-accent {
     background: linear-gradient(110deg, var(--accent), var(--warn));
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     background-clip: text;
   }
.qel-subtitle { font-size: 12px; color: var(--tm); margin-top: 4px; }
.qel-header-stats {
     display: flex; align-items: center; gap: 16px;
     padding-top: 4px; flex-shrink: 0;
   }
.qel-stat { display: flex; flex-direction: column; align-items: center; }
.qel-stat-num { font-family: var(--fd); font-size: 1.4rem; font-weight: 800; color: var(--tp); line-height: 1; }
.qel-stat-label { font-size: 10px; color: var(--tm); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.qel-stat-div { width: 1px; height: 32px; background: var(--border); }
/* Tabs */
.qel-tabs {
     max-width: 1200px; margin: 0 auto; padding: 0 28px;
     display: flex; gap: 0; overflow-x: auto;
   }
.qel-tabs::-webkit-scrollbar { display: none; }
.qel-tab {
     display: flex; align-items: center; gap: 10px;
     padding: 14px 20px; background: none; border: none;
     cursor: pointer; position: relative; white-space: nowrap;
     color: var(--ts); font-family: var(--fb);
     transition: color 0.2s;
     border-bottom: 2px solid transparent;
   }
.qel-tab:hover { color: var(--tp); background: rgba(0,0,0,0.02); }
.qel-tab-active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.qel-tab-icon { font-size: 16px; }
.qel-tab-text { text-align: left; }
.qel-tab-label { font-size: 14px; font-weight: 600; display: block; }
.qel-tab-sub { font-size: 10px; color: var(--tm); display: block; line-height: 1; }
/* ── Content ── */
.qel-content {
     max-width: 1200px; margin: 0 auto;
     padding: 40px 28px; position: relative; z-index: 1;
   }
/* ── Footer ── */
.qel-footer {
     border-top: 1px solid var(--border);
     padding: 20px 28px;
     display: flex; align-items: center; justify-content: space-between;
     font-size: 13px; color: var(--tm);
     max-width: 1200px; margin: 0 auto;
   }
.qel-footer-cta {
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     color: white; text-decoration: none;
     padding: 8px 18px; border-radius: 8px;
     font-size: 13px; font-weight: 600;
     transition: transform 0.2s, box-shadow 0.2s;
   }
.qel-footer-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
/* ════════════════════════════════
      SHARED COMPONENTS
      ════════════════════════════════ */
.qe-eyebrow {
     display: flex; align-items: center; gap: 8px;
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 1px; color: var(--ts); margin-bottom: 0.5rem;
   }
.qe-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.qe-section-title {
     font-family: var(--fd);
     font-size: clamp(1.4rem, 3vw, 2rem);
     font-weight: 800; letter-spacing: -0.8px;
     color: var(--tp); margin-bottom: 1.25rem;
   }
.qe-body-text { color: var(--ts); line-height: 1.75; margin-bottom: 1.5rem; }
.qe-body-text strong { color: var(--tp); font-weight: 600; }
/* Math display */
.qe-math {
     font-family: var(--fm);
     background: var(--surface2);
     border: 1px solid var(--border2);
     border-radius: 10px;
     padding: 1.5rem 2rem;
     text-align: center;
     font-size: 1.4rem;
     color: var(--tp);
     font-weight: 600;
     letter-spacing: 0.05em;
   }
.qe-math-accent { color: var(--accent); }
.qe-math-warn   { color: var(--warn); }
.qe-math-green  { color: var(--accent2); }
.qe-math-danger { color: var(--danger); }
/* Code block */
.qe-code-block {
     background: #0d1117;
     border: 1px solid #1e2230;
     border-radius: var(--radius-lg);
     overflow: hidden;
   }
.qe-code-header {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 16px; background: #161b27;
     border-bottom: 1px solid #1e2230;
   }
.qe-dot { width: 11px; height: 11px; border-radius: 50%; }
.qe-dot-r { background: #ff5f57; }
.qe-dot-y { background: #febc2e; }
.qe-dot-g { background: #28c840; }
.qe-code-lang { margin-left: auto; font-size: 11px; color: rgba(255,255,255,0.3); font-family: var(--fm); }
.qe-code-body { padding: 1.5rem; font-family: var(--fm); font-size: 13px; line-height: 1.8; overflow-x: auto; }
/* Animations */
@keyframes qelFadeIn  { from{opacity:0;transform:translateY(8px)}  to{opacity:1;transform:translateY(0)} }
@keyframes qelFadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes qelPop     { from{transform:scale(0)}                   to{transform:scale(1)} }
@keyframes qelSlideIn { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }
@keyframes qelBlink   { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes qelSpin    { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
/* ════════════════════════════════
      THEORY
      ════════════════════════════════ */
.qe-theory-root { display: flex; flex-direction: column; gap: 48px; }
/* Hero */
.qe-hero-section {
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: var(--radius-lg);
     padding: 3rem;
     box-shadow: var(--shadow);
     animation: qelFadeIn 0.5s ease;
     position: relative;
     overflow: hidden;
   }
.qe-hero-section::before {
     content: '';
     position: absolute; top: 0; right: 0;
     width: 300px; height: 300px;
     background: radial-gradient(circle, rgba(99,102,241,0.05) 0%, transparent 70%);
     pointer-events: none;
   }
.qe-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.qe-formula-showcase {
     background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(245,158,11,0.04));
     border: 1px solid rgba(99,102,241,0.2);
     border-radius: var(--radius-lg); padding: 2.5rem;
     text-align: center; position: relative;
   }
.qe-main-formula {
     font-family: var(--fm);
     font-size: 1.6rem; font-weight: 700;
     color: var(--tp); letter-spacing: 0.05em;
     margin-bottom: 1rem;
   }
.qe-formula-parts { display: flex; flex-direction: column; gap: 8px; margin-top: 1.5rem; }
.qe-formula-part {
     display: flex; align-items: center; gap: 12px;
     padding: 8px 14px;
     background: var(--surface); border: 1px solid var(--border);
     border-radius: 8px; font-size: 0.85rem;
   }
.qe-fp-sym { font-family: var(--fm); font-weight: 700; min-width: 20px; font-size: 1rem; }
.qe-fp-desc { color: var(--ts); flex: 1; }
.qe-concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 1.5rem; }
.qe-concept-card {
     padding: 1rem 1.25rem;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); transition: all 0.2s;
   }
.qe-concept-card:hover { border-color: var(--border2); box-shadow: var(--shadow); transform: translateY(-1px); }
.qe-cc-icon { font-size: 1.5rem; margin-bottom: 6px; }
.qe-cc-title { font-weight: 700; font-size: 0.9rem; color: var(--tp); margin-bottom: 3px; }
.qe-cc-desc { font-size: 0.78rem; color: var(--ts); line-height: 1.5; }
/* SVG Graph */
.qe-parabola-svg { width: 100%; max-width: 340px; }
/* Methods Section */
.qe-methods-section {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 3rem; box-shadow: var(--shadow);
   }
.qe-method-tabs { display: flex; gap: 8px; margin-bottom: 2rem; flex-wrap: wrap; }
.qe-method-tab {
     padding: 8px 18px;
     background: var(--surface2); border: 1.5px solid var(--border);
     border-radius: var(--radius); font-size: 0.88rem; font-weight: 600; color: var(--ts);
     transition: all 0.2s;
   }
.qe-method-tab:hover { color: var(--tp); background: var(--surface); }
.qe-mtab-active { color: var(--accent) !important; border-color: var(--accent) !important; background: rgba(99,102,241,0.07) !important; }
.qe-method-content { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.qe-method-steps { display: flex; flex-direction: column; gap: 1rem; }
.qe-method-step {
     display: flex; gap: 14px; padding: 1rem 1.25rem;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); align-items: flex-start;
     animation: qelFadeIn 0.3s ease;
   }
.qe-ms-num {
     min-width: 28px; height: 28px; border-radius: 50%;
     background: var(--accent); color: white;
     display: flex; align-items: center; justify-content: center;
     font-weight: 800; font-size: 0.82rem; flex-shrink: 0;
   }
.qe-ms-title { font-weight: 700; font-size: 0.9rem; color: var(--tp); margin-bottom: 4px; }
.qe-ms-body { font-size: 0.82rem; color: var(--ts); line-height: 1.55; }
.qe-ms-math { font-family: var(--fm); color: var(--accent); font-size: 0.88rem; margin-top: 5px; padding: 5px 10px; background: rgba(99,102,241,0.07); border-radius: 6px; }
/* Discriminant */
.qe-disc-section {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 3rem;
   }
.qe-disc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.qe-disc-card {
     padding: 2rem 1.5rem; border-radius: var(--radius-lg); border: 2px solid;
     text-align: center; transition: all 0.25s;
     animation: qelFadeUp 0.4s ease both;
   }
.qe-disc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.qe-disc-pos  { background: rgba(0,212,170,0.05);  border-color: rgba(0,212,170,0.35); }
.qe-disc-zero { background: rgba(99,102,241,0.05); border-color: rgba(99,102,241,0.35); }
.qe-disc-neg  { background: rgba(239,68,68,0.05);  border-color: rgba(239,68,68,0.3);  }
.qe-disc-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.qe-disc-cond { font-family: var(--fm); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.qe-disc-title { font-weight: 700; font-size: 1rem; margin-bottom: 6px; color: var(--tp); }
.qe-disc-desc { font-size: 0.82rem; color: var(--ts); line-height: 1.55; }
.qe-disc-pos  .qe-disc-cond { color: var(--accent2); }
.qe-disc-zero .qe-disc-cond { color: var(--accent); }
.qe-disc-neg  .qe-disc-cond { color: var(--danger); }
.qe-disc-svg  { width: 100%; height: 90px; margin: 1rem 0; }
/* Properties */
.qe-props-section {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 3rem; box-shadow: var(--shadow);
   }
.qe-props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.qe-prop-card {
     padding: 1.5rem; background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); transition: all 0.2s;
   }
.qe-prop-card:hover { border-color: var(--border2); box-shadow: var(--shadow); }
.qe-prop-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.qe-prop-icon { font-size: 1.4rem; }
.qe-prop-title { font-weight: 700; font-size: 0.95rem; color: var(--tp); }
.qe-prop-formula { font-family: var(--fm); font-size: 0.9rem; margin-bottom: 0.75rem; padding: 8px 12px; border-radius: 8px; }
.qe-prop-desc { font-size: 0.82rem; color: var(--ts); line-height: 1.55; }
/* Sum/Product */
.qe-sumproduct-section {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 3rem;
   }
.qe-sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
.qe-sp-card {
     background: var(--surface); border: 2px solid; border-radius: var(--radius-lg);
     padding: 2rem; text-align: center;
   }
.qe-sp-title { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tm); margin-bottom: 1rem; }
.qe-sp-formula { font-family: var(--fm); font-size: 1.8rem; font-weight: 700; margin-bottom: 0.75rem; }
.qe-sp-meaning { font-size: 0.85rem; color: var(--ts); }
/* ════════════════════════════════
      SIMULATION
      ════════════════════════════════ */
.qe-sim-root {
     display: grid;
     grid-template-columns: 300px 1fr;
     gap: 1.5rem;
   }
.qe-sim-full { grid-column: 1 / -1; }
/* Panel */
.qe-sim-panel {
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     display: flex; flex-direction: column; gap: 1.5rem;
     height: -moz-fit-content;
     height: fit-content;
     box-shadow: var(--shadow);
   }
.qe-panel-section { display: flex; flex-direction: column; gap: 0.75rem; }
.qe-panel-label {
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.1em; color: var(--tm);
   }
/* Sliders */
.qe-coeff-row { display: flex; align-items: center; gap: 10px; }
.qe-coeff-sym {
     min-width: 24px; font-family: var(--fm); font-weight: 700;
     font-size: 1rem; text-align: center;
   }
.qe-coeff-slider { flex: 1; accent-color: var(--accent); }
.qe-coeff-val {
     min-width: 40px; text-align: right; font-family: var(--fm);
     font-size: 0.9rem; font-weight: 700;
   }
/* Live equation display */
.qe-live-eq {
     background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(245,158,11,0.06));
     border: 1.5px solid rgba(99,102,241,0.25);
     border-radius: var(--radius); padding: 1rem 1.25rem; text-align: center;
     font-family: var(--fm); font-size: 1.1rem; font-weight: 700; color: var(--tp);
     letter-spacing: 0.03em;
   }
/* Results box */
.qe-results-box {
     display: flex; flex-direction: column; gap: 8px;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 1rem;
   }
.qe-res-row { display: flex; justify-content: space-between; align-items: center; }
.qe-res-label { font-size: 0.8rem; color: var(--tm); }
.qe-res-val { font-family: var(--fm); font-size: 0.88rem; font-weight: 600; }
.qe-res-divider { height: 1px; background: var(--border); }
/* Discriminant badge */
.qe-disc-badge {
     display: flex; align-items: center; justify-content: center; gap: 8px;
     padding: 10px 16px; border-radius: var(--radius); font-weight: 700; font-size: 0.9rem;
     border: 2px solid;
   }
/* Main graph area */
.qe-sim-main {
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     display: flex; flex-direction: column; gap: 1.5rem;
     box-shadow: var(--shadow);
   }
.qe-graph-tabs { display: flex; gap: 8px; }
.qe-graph-tab {
     padding: 6px 16px;
     background: var(--surface2); border: 1.5px solid var(--border);
     border-radius: 8px; font-size: 0.82rem; font-weight: 600; color: var(--ts);
     transition: all 0.2s;
   }
.qe-graph-tab:hover { color: var(--tp); }
.qe-gtab-active { color: var(--accent) !important; border-color: var(--accent) !important; background: rgba(99,102,241,0.07) !important; }
.qe-graph-wrap {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 1rem;
     display: flex; align-items: center; justify-content: center;
     min-height: 420px; position: relative;
   }
.qe-graph-svg { width: 100%; max-width: 680px; height: 420px; }
.qe-graph-info-row {
     display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
   }
.qe-gi-card {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 0.875rem 1rem; text-align: center;
   }
.qe-gi-label { font-size: 10px; color: var(--tm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.qe-gi-val { font-family: var(--fm); font-size: 0.9rem; font-weight: 700; color: var(--tp); }
/* Roots animation */
.qe-roots-section {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 1.25rem;
   }
.qe-roots-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tm); margin-bottom: 0.75rem; }
.qe-roots-display { display: flex; gap: 1rem; align-items: center; }
.qe-root-box {
     flex: 1; padding: 1rem; border-radius: var(--radius); border: 2px solid;
     text-align: center; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
.qe-root-label { font-size: 0.78rem; color: var(--tm); margin-bottom: 4px; }
.qe-root-val { font-family: var(--fm); font-size: 1.1rem; font-weight: 700; }
.qe-root-sep { font-size: 1.2rem; color: var(--tm); }
/* Step by step solution panel */
.qe-solution-steps {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 1.5rem;
   }
.qe-sol-title { font-size: 0.88rem; font-weight: 700; color: var(--tp); margin-bottom: 1rem; }
.qe-sol-step {
     display: flex; gap: 12px; padding: 0.75rem 0;
     border-bottom: 1px solid var(--border);
     animation: qelFadeIn 0.3s ease both;
   }
.qe-sol-step:last-child { border-bottom: none; }
.qe-sol-num {
     min-width: 24px; height: 24px; border-radius: 50%;
     background: rgba(99,102,241,0.12); color: var(--accent);
     display: flex; align-items: center; justify-content: center;
     font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
   }
.qe-sol-text { font-size: 0.85rem; color: var(--ts); }
.qe-sol-math { font-family: var(--fm); color: var(--accent); font-weight: 600; }
/* Nature of roots visual */
.qe-nature-badge {
     display: inline-flex; align-items: center; gap: 8px;
     padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
     border: 1.5px solid;
   }
/* ════════════════════════════════
      QUIZ
      ════════════════════════════════ */
.qe-quiz-root {
     max-width: 760px; margin: 0 auto;
     display: flex; flex-direction: column; gap: 1.5rem;
   }
.qe-qz-progress { display: flex; flex-direction: column; gap: 8px; }
.qe-qz-prog-info { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ts); }
.qe-qz-prog-track {
     position: relative; height: 8px;
     background: var(--surface2); border-radius: 99px; border: 1px solid var(--border);
   }
.qe-qz-prog-fill {
     height: 100%; background: linear-gradient(90deg, var(--accent), var(--warn));
     border-radius: 99px; transition: width 0.5s cubic-bezier(.2,.85,.3,1);
   }
.qe-qz-pip {
     position: absolute; top: 50%; transform: translate(-50%,-50%);
     width: 10px; height: 10px; border-radius: 50%;
     background: var(--surface2); border: 2px solid var(--border); transition: all 0.3s;
   }
.qe-pip-done { background: var(--accent) !important; border-color: var(--accent) !important; }
.qe-pip-cur  { border-color: var(--accent) !important; }
.qe-qz-timer { display: flex; align-items: center; gap: 12px; }
.qe-qz-timer-track { flex: 1; height: 5px; background: var(--surface2); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.qe-qz-timer-fill { height: 100%; border-radius: 99px; transition: width 1s linear, background 0.5s; }
.qe-qz-timer-num { font-family: var(--fm); font-size: 0.9rem; font-weight: 700; min-width: 40px; text-align: right; color: var(--tp); }
.qe-qz-card {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 2.5rem;
     display: flex; flex-direction: column; gap: 1.5rem;
     box-shadow: var(--shadow-lg); animation: qelFadeIn 0.3s ease;
   }
.qe-qz-meta { display: flex; align-items: center; gap: 10px; }
.qe-qz-cat {
     background: rgba(99,102,241,0.1); color: var(--accent);
     border: 1px solid rgba(99,102,241,0.25); border-radius: 999px;
     padding: 4px 12px; font-size: 11px; font-weight: 600;
   }
.qe-qz-diff { border: 1px solid; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600; }
.qe-qz-num { margin-left: auto; font-family: var(--fm); font-size: 0.85rem; color: var(--tm); }
.qe-qz-question { font-family: var(--fd); font-size: 1.15rem; font-weight: 700; line-height: 1.4; color: var(--tp); }
.qe-qz-eq { font-family: var(--fm); background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 10px 16px; text-align: center; font-size: 1.1rem; color: var(--accent); font-weight: 600; margin: 0.5rem 0; }
.qe-qz-timeout { color: var(--danger); font-weight: 700; text-align: center; font-size: 1.2rem; }
.qe-qz-options { display: flex; flex-direction: column; gap: 10px; }
.qe-qz-option {
     display: flex; align-items: center; gap: 14px;
     padding: 13px 16px;
     background: var(--surface2); border: 1.5px solid var(--border);
     border-radius: var(--radius); text-align: left;
     color: var(--tp); font-size: 0.9rem;
     transition: all 0.2s; font-family: var(--fb);
   }
.qe-qz-option:hover:not(:disabled):not(.qe-opt-dim) {
     border-color: var(--accent); background: rgba(99,102,241,0.06); transform: translateX(3px);
   }
.qe-opt-letter {
     min-width: 30px; height: 30px; border-radius: 8px;
     background: var(--surface); border: 1.5px solid var(--border);
     display: flex; align-items: center; justify-content: center;
     font-weight: 800; font-size: 0.78rem; transition: all 0.2s; color: var(--ts);
   }
.qe-opt-text { flex: 1; font-family: var(--fm); }
.qe-opt-check { color: var(--accent2); font-weight: 700; margin-left: auto; }
.qe-opt-x     { color: var(--danger);  font-weight: 700; margin-left: auto; }
.qe-opt-correct  { border-color: var(--accent2) !important; background: rgba(0,212,170,0.08) !important; }
.qe-opt-wrong    { border-color: var(--danger)  !important; background: rgba(239,68,68,0.07)  !important; }
.qe-opt-dim      { opacity: 0.45; }
.qe-opt-selected { border-color: var(--accent)  !important; background: rgba(99,102,241,0.08) !important; }
.qe-qz-exp {
     display: flex; align-items: flex-start; gap: 14px;
     padding: 1.25rem; border-radius: var(--radius); border: 1.5px solid;
     animation: qelFadeIn 0.35s ease;
   }
.qe-exp-ok { border-color: rgba(0,212,170,0.3); background: rgba(0,212,170,0.06); }
.qe-exp-no { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.05); }
.qe-exp-icon  { font-size: 1.3rem; }
.qe-exp-title { font-weight: 700; margin-bottom: 4px; color: var(--tp); }
.qe-exp-text  { font-size: 0.88rem; color: var(--ts); line-height: 1.6; }
.qe-exp-math  { font-family: var(--fm); color: var(--accent); background: rgba(99,102,241,0.07); padding: 4px 8px; border-radius: 4px; font-size: 0.85rem; margin-top: 4px; display: inline-block; }
.qe-qz-next {
     padding: 14px 28px;
     background: linear-gradient(135deg, var(--accent), var(--warn));
     color: white; border-radius: var(--radius);
     font-weight: 700; font-size: 0.95rem;
     transition: transform 0.2s, box-shadow 0.2s; align-self: flex-end;
   }
.qe-qz-next:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,0.35); }
/* Result */
.qe-result {
     display: flex; flex-direction: column; align-items: center; gap: 2rem;
     max-width: 760px; margin: 0 auto;
   }
.qe-result-ring {
     width: 140px; height: 140px; border-radius: 50%; border: 4px solid;
     display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
     animation: qelPop 0.5s cubic-bezier(.2,.85,.3,1.4) both;
   }
.qe-result-grade { font-family: var(--fd); font-size: 2.5rem; font-weight: 800; }
.qe-result-pct   { font-size: 0.9rem; font-weight: 600; }
.qe-result-title { font-family: var(--fd); font-size: 2rem; font-weight: 800; color: var(--tp); }
.qe-result-msg   { color: var(--ts); text-align: center; max-width: 480px; line-height: 1.65; }
.qe-result-stats {
     display: flex; gap: 2rem;
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 1.5rem 2.5rem;
     box-shadow: var(--shadow);
   }
.qe-rs-stat { text-align: center; }
.qe-rs-num  { display: block; font-family: var(--fd); font-size: 2.5rem; font-weight: 800; }
.qe-rs-lbl  { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tm); }
.qe-review { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.qe-review-title { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--tp); margin-bottom: 0.5rem; }
.qe-rev-item {
     display: flex; gap: 14px; padding: 1rem 1.25rem;
     border-radius: var(--radius); border: 1px solid; align-items: flex-start;
     background: var(--surface); box-shadow: var(--shadow);
     animation: qelFadeIn 0.3s ease both;
   }
.qe-rev-correct { border-left: 3px solid var(--accent2) !important; }
.qe-rev-wrong   { border-left: 3px solid var(--danger)  !important; }
.qe-rev-q   { font-size: 0.88rem; color: var(--tp); margin-bottom: 4px; }
.qe-rev-a   { font-size: 0.82rem; color: var(--ts); }
.qe-rev-exp { font-size: 0.82rem; color: var(--ts); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.qe-retry-btn {
     padding: 14px 36px;
     background: linear-gradient(135deg, var(--accent), var(--warn));
     color: white; border-radius: var(--radius);
     font-weight: 700; font-size: 0.95rem;
     transition: transform 0.2s, box-shadow 0.2s;
   }
.qe-retry-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,0.35); }
/* ════════════════════════════════
      APPLICATION
      ════════════════════════════════ */
.qe-app-root { display: flex; flex-direction: column; gap: 3rem; }
.qe-app-section {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: var(--radius-lg); padding: 2.5rem;
     box-shadow: var(--shadow);
   }
.qe-challenge-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5rem 0; }
.qe-challenge-tab {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 18px;
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius); font-size: 0.85rem; color: var(--ts);
     transition: all 0.15s;
   }
.qe-challenge-tab:hover { border-color: var(--border2); color: var(--tp); background: var(--surface); box-shadow: var(--shadow); }
.qe-ct-active { border-color: var(--accent) !important; color: var(--tp) !important; background: rgba(99,102,241,0.07) !important; }
.qe-ct-solved { border-color: rgba(0,212,170,0.5) !important; background: rgba(0,212,170,0.05) !important; }
.qe-ct-check { color: var(--accent2); font-weight: 700; }
.qe-ct-num   { font-family: var(--fm); font-size: 0.78rem; color: var(--tm); }
.qe-ct-name  { font-weight: 600; color: var(--tp); }
.qe-ct-diff  { font-size: 0.75rem; font-weight: 700; }
.qe-challenge-area { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem; align-items: start; }
.qe-challenge-info { display: flex; flex-direction: column; gap: 1rem; }
.qe-ch-title {
     font-family: var(--fd); font-size: 1.15rem; font-weight: 700;
     display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--tp);
   }
.qe-ch-badge { border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.qe-ch-desc { color: var(--ts); font-size: 0.9rem; line-height: 1.65; }
.qe-ch-expected {
     display: flex; align-items: center; gap: 10px;
     padding: 10px 14px; background: var(--surface2);
     border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap;
   }
.qe-ch-exp-label { font-size: 0.78rem; color: var(--tm); }
.qe-ch-exp-val   { font-family: var(--fm); font-size: 0.82rem; color: var(--accent2); font-weight: 600; }
.qe-hints-box {
     background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.25);
     border-radius: var(--radius); padding: 1rem 1.25rem;
   }
.qe-hints-title { font-weight: 700; font-size: 0.85rem; color: var(--warn); margin-bottom: 0.5rem; }
.qe-hint-text   { font-size: 0.88rem; color: var(--ts); margin-bottom: 0.75rem; line-height: 1.6; }
.qe-hint-nav    { display: flex; gap: 8px; }
.qe-hint-nav button {
     padding: 5px 14px; background: var(--surface); border: 1px solid var(--border2);
     border-radius: 6px; font-size: 0.78rem; color: var(--ts); transition: all 0.15s;
   }
.qe-hint-nav button:hover:not(:disabled) { color: var(--tp); }
.qe-hint-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.qe-editor-area {
     background: #0d1117; border: 1px solid #1e2230;
     border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
   }
.qe-editor-header {
     display: flex; align-items: center; gap: 8px;
     padding: 12px 16px; background: #161b27; border-bottom: 1px solid #1e2230;
   }
.qe-editor-lang   { margin-left: 4px; font-size: 11px; color: rgba(255,255,255,0.3); flex: 1; font-family: var(--fm); }
.qe-editor-actions { display: flex; gap: 8px; }
.qe-action-btn {
     padding: 5px 12px; background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
     font-size: 0.78rem; color: rgba(255,255,255,0.5); transition: all 0.15s;
   }
.qe-action-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); }
.qe-sol-btn { color: rgba(0,212,170,0.8) !important; border-color: rgba(0,212,170,0.2) !important; }
.qe-editor {
     width: 100%; min-height: 260px;
     background: transparent; border: none;
     padding: 1.25rem 1.5rem;
     color: #a5f3d4;
     font-family: var(--fm); font-size: 12.5px; line-height: 1.8;
     resize: vertical; outline: none;
   }
.qe-editor:-moz-read-only { color: #6ee7b7; }
.qe-editor:read-only { color: #6ee7b7; }
.qe-editor-footer {
     display: flex; gap: 10px; padding: 12px 16px;
     background: #161b27; border-top: 1px solid #1e2230;
   }
.qe-run-btn {
     padding: 10px 24px; background: var(--accent2); color: #000;
     font-weight: 700; border-radius: 8px; font-size: 0.88rem;
     transition: opacity 0.15s, transform 0.15s;
   }
.qe-run-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.qe-reset-btn {
     padding: 10px 16px; background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
     font-size: 0.88rem; color: rgba(255,255,255,0.5); transition: all 0.15s;
   }
.qe-reset-btn:hover { color: rgba(255,255,255,0.8); }
.qe-output {
     border-radius: var(--radius-lg); overflow: hidden;
     border: 1.5px solid; margin-top: 1rem; animation: qelFadeIn 0.3s ease;
   }
.qe-out-ok   { border-color: rgba(0,212,170,0.35); }
.qe-out-err  { border-color: rgba(239,68,68,0.35); }
.qe-out-warn { border-color: rgba(245,158,11,0.35); }
.qe-out-header {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 16px; background: var(--surface2);
     border-bottom: 1px solid var(--border);
     font-size: 12px; font-weight: 600; color: var(--tm);
   }
.qe-out-body {
     padding: 1rem 1.25rem; font-family: var(--fm); font-size: 13px;
     line-height: 1.8; white-space: pre-wrap; background: var(--surface);
   }
.qe-out-ok   .qe-out-body { color: #059669; }
.qe-out-err  .qe-out-body { color: var(--danger); }
.qe-out-warn .qe-out-body { color: #92400e; }
/* Real world */
.qe-rw-tabs { display: flex; gap: 10px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.qe-rw-tab {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 18px; background: var(--surface2);
     border: 1.5px solid var(--border); border-radius: var(--radius);
     font-size: 0.88rem; color: var(--ts); transition: all 0.15s; font-weight: 500;
   }
.qe-rw-tab:hover { color: var(--tp); background: var(--surface); box-shadow: var(--shadow); }
.qe-rw-active { border-color: var(--accent2) !important; color: #047857 !important; background: rgba(0,212,170,0.07) !important; }
.qe-rw-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; }
.qe-rw-code-block {
     background: #0d1117; border: 1px solid #1e2230;
     border-radius: var(--radius-lg); overflow: hidden;
   }
.qe-rw-output {
     background: var(--surface2); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 1.25rem;
   }
.qe-rw-out-label {
     font-size: 11px; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.1em; color: var(--tm); margin-bottom: 0.75rem;
   }
.qe-rw-out-body { font-family: var(--fm); font-size: 13px; color: #059669; line-height: 1.8; white-space: pre-wrap; }
/* Decision */
.qe-decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.qe-dec-card { padding: 1.75rem; border-radius: var(--radius-lg); border: 1.5px solid; }
.qe-dec-yes { background: rgba(0,212,170,0.04); border-color: rgba(0,212,170,0.25); }
.qe-dec-no  { background: rgba(239,68,68,0.04);  border-color: rgba(239,68,68,0.2);  }
.qe-dec-title { font-weight: 700; font-size: 1rem; margin-bottom: 1rem; color: var(--tp); }
.qe-dec-list  { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.qe-dec-list li { font-size: 0.88rem; color: var(--ts); padding-left: 16px; position: relative; line-height: 1.5; }
.qe-dec-list li::before { content: "•"; position: absolute; left: 0; }
.qe-dec-yes .qe-dec-list li::before { color: var(--accent2); }
.qe-dec-no  .qe-dec-list li::before { color: var(--danger); }
.qe-rec-box {
     display: flex; align-items: flex-start; gap: 14px;
     padding: 1.25rem 1.5rem; margin-top: 1.5rem;
     background: rgba(99,102,241,0.05); border: 1.5px solid rgba(99,102,241,0.2);
     border-radius: var(--radius); font-size: 0.9rem; line-height: 1.65; color: var(--ts);
   }
.qe-rec-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.qe-rec-box b    { color: var(--accent); }
.qe-rec-box code { font-family: var(--fm); color: #059669; font-size: 0.88rem; }
/* ════════════════════════════════
      RESPONSIVE
      ════════════════════════════════ */
@media (max-width: 1100px) {
     .qe-sim-root { grid-template-columns: 1fr; }
   }
@media (max-width: 900px) {
     .qe-hero-grid { grid-template-columns: 1fr; }
     .qe-method-content { grid-template-columns: 1fr; }
     .qe-disc-cards { grid-template-columns: 1fr; }
     .qe-props-grid { grid-template-columns: 1fr; }
     .qe-sp-grid { grid-template-columns: 1fr; }
     .qe-challenge-area { grid-template-columns: 1fr; }
     .qe-rw-layout { grid-template-columns: 1fr; }
     .qe-decision-grid { grid-template-columns: 1fr; }
     .qe-graph-info-row { grid-template-columns: 1fr 1fr; }
     .qel-header-inner { flex-direction: column; }
   }
@media (max-width: 768px) {
     .qel-content { padding: 24px 16px; }
     .qe-app-section { padding: 1.5rem; }
   }
@media (max-width: 600px) {
     .qel-content { padding: 1rem 1rem 3rem; }
     .qel-header-stats { display: none; }
     .qe-graph-info-row { grid-template-columns: 1fr 1fr; }
   }
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  }
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  }
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  }
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  }
  .container{
    max-width: 1536px;
  }
}
.\!visible{
  visibility: visible !important;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.bottom-\[-60px\]{
  bottom: -60px;
}
.left-1{
  left: 0.25rem;
}
.left-3\.5{
  left: 0.875rem;
}
.left-\[-80px\]{
  left: -80px;
}
.right-3\.5{
  right: 0.875rem;
}
.right-\[-40px\]{
  right: -40px;
}
.right-\[-60px\]{
  right: -60px;
}
.top-0{
  top: 0px;
}
.top-1\/2{
  top: 50%;
}
.top-\[-80px\]{
  top: -80px;
}
.top-\[45\%\]{
  top: 45%;
}
.isolate{
  isolation: isolate;
}
.-z-10{
  z-index: -10;
}
.z-10{
  z-index: 10;
}
.order-1{
  order: 1;
}
.m-1{
  margin: 0.25rem;
}
.m-4{
  margin: 1rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-\[52px\]{
  margin-left: 52px;
}
.ml-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-3{
  margin-right: 0.75rem;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-8{
  margin-top: 2rem;
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.h-1{
  height: 0.25rem;
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: 2.5rem;
}
.h-11{
  height: 2.75rem;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-3{
  height: 0.75rem;
}
.h-36{
  height: 9rem;
}
.h-4{
  height: 1rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-96{
  height: 24rem;
}
.h-\[180px\]{
  height: 180px;
}
.h-\[280px\]{
  height: 280px;
}
.h-\[340px\]{
  height: 340px;
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.h-px{
  height: 1px;
}
.h-screen{
  height: 100vh;
}
.max-h-full{
  max-height: 100%;
}
.min-h-\[32px\]{
  min-height: 32px;
}
.min-h-\[36px\]{
  min-height: 36px;
}
.min-h-screen{
  min-height: 100vh;
}
.w-1\.5{
  width: 0.375rem;
}
.w-10{
  width: 2.5rem;
}
.w-11{
  width: 2.75rem;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-3{
  width: 0.75rem;
}
.w-4{
  width: 1rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-8{
  width: 2rem;
}
.w-80{
  width: 20rem;
}
.w-9{
  width: 2.25rem;
}
.w-\[180px\]{
  width: 180px;
}
.w-\[280px\]{
  width: 280px;
}
.w-\[340px\]{
  width: 340px;
}
.w-auto{
  width: auto;
}
.w-full{
  width: 100%;
}
.w-px{
  width: 1px;
}
.w-screen{
  width: 100vw;
}
.min-w-0{
  min-width: 0px;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-5xl{
  max-width: 64rem;
}
.max-w-6xl{
  max-width: 72rem;
}
.max-w-7xl{
  max-width: 80rem;
}
.max-w-\[200px\]{
  max-width: 200px;
}
.max-w-\[380px\]{
  max-width: 380px;
}
.max-w-\[440px\]{
  max-width: 440px;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-shrink{
  flex-shrink: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink{
  flex-shrink: 1;
}
.shrink-0{
  flex-shrink: 0;
}
.flex-grow{
  flex-grow: 1;
}
.grow{
  flex-grow: 1;
}
.border-collapse{
  border-collapse: collapse;
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-105{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse{
  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-default{
  cursor: default;
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.list-inside{
  list-style-position: inside;
}
.list-decimal{
  list-style-type: decimal;
}
.list-disc{
  list-style-type: disc;
}
.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-center{
  align-items: center;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-2\.5{
  gap: 0.625rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-3\.5{
  gap: 0.875rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-14 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.self-end{
  align-self: flex-end;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-b-lg{
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-t-lg{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-2{
  border-width: 2px;
}
.border-4{
  border-width: 4px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-l-4{
  border-left-width: 4px;
}
.border-t{
  border-top-width: 1px;
}
.border-dashed{
  border-style: dashed;
}
.border-\[\#AFA9EC\]{
  --tw-border-opacity: 1;
  border-color: rgb(175 169 236 / var(--tw-border-opacity, 1));
}
.border-\[\#EEEDFE\]{
  --tw-border-opacity: 1;
  border-color: rgb(238 237 254 / var(--tw-border-opacity, 1));
}
.border-\[\#F7C1C1\]{
  --tw-border-opacity: 1;
  border-color: rgb(247 193 193 / var(--tw-border-opacity, 1));
}
.border-\[\#e0ddf5\]{
  --tw-border-opacity: 1;
  border-color: rgb(224 221 245 / var(--tw-border-opacity, 1));
}
.border-\[\#f0eef8\]{
  --tw-border-opacity: 1;
  border-color: rgb(240 238 248 / var(--tw-border-opacity, 1));
}
.border-\[\#f0eefb\]{
  --tw-border-opacity: 1;
  border-color: rgb(240 238 251 / var(--tw-border-opacity, 1));
}
.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-500{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-green-500{
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-orange-500{
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.border-purple-500{
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-red-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20{
  border-color: rgb(255 255 255 / 0.2);
}
.border-yellow-400{
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.border-yellow-500{
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-t-\[\#534AB7\]{
  --tw-border-opacity: 1;
  border-top-color: rgb(83 74 183 / var(--tw-border-opacity, 1));
}
.bg-\[\#0F6E56\]{
  --tw-bg-opacity: 1;
  background-color: rgb(15 110 86 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0e0b2e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(14 11 46 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1D9E75\]{
  --tw-bg-opacity: 1;
  background-color: rgb(29 158 117 / var(--tw-bg-opacity, 1));
}
.bg-\[\#534AB7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(83 74 183 / var(--tw-bg-opacity, 1));
}
.bg-\[\#7C3AED\]{
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E0F5F8\]{
  --tw-bg-opacity: 1;
  background-color: rgb(224 245 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E1F5EE\]{
  --tw-bg-opacity: 1;
  background-color: rgb(225 245 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E6F1FB\]{
  --tw-bg-opacity: 1;
  background-color: rgb(230 241 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EEEDFE\]{
  --tw-bg-opacity: 1;
  background-color: rgb(238 237 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FAECE7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(250 236 231 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FCEBEB\]{
  --tw-bg-opacity: 1;
  background-color: rgb(252 235 235 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e0ddf5\]{
  --tw-bg-opacity: 1;
  background-color: rgb(224 221 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f5f4fb\]{
  --tw-bg-opacity: 1;
  background-color: rgb(245 244 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#faf9fe\]{
  --tw-bg-opacity: 1;
  background-color: rgb(250 249 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-cyan-500{
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400{
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-200{
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}
.bg-green-400{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-orange-400{
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-orange-600{
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-200{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.bg-red-400{
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10{
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/20{
  background-color: rgb(255 255 255 / 0.2);
}
.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-200{
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-\[\#534AB7\]{
  --tw-gradient-from: #534AB7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(83 74 183 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#EEEDFE\]{
  --tw-gradient-from: #EEEDFE var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 237 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-50{
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500{
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-600{
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500{
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500{
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-200{
  --tw-gradient-from: #bae6fd var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(186 230 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-400{
  --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-purple-600{
  --tw-gradient-to: rgb(147 51 234 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#1D9E75\]{
  --tw-gradient-to: #1D9E75 var(--tw-gradient-to-position);
}
.to-\[\#E1F5EE\]{
  --tw-gradient-to: #E1F5EE var(--tw-gradient-to-position);
}
.to-blue-100{
  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
}
.to-green-600{
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}
.to-indigo-100{
  --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position);
}
.to-indigo-800{
  --tw-gradient-to: #3730a3 var(--tw-gradient-to-position);
}
.to-orange-400{
  --tw-gradient-to: #fb923c var(--tw-gradient-to-position);
}
.to-orange-600{
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}
.to-purple-50{
  --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);
}
.to-red-600{
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}
.bg-clip-text{
  -webkit-background-clip: text;
          background-clip: text;
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0{
  padding: 0px;
}
.p-1{
  padding: 0.25rem;
}
.p-12{
  padding: 3rem;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-5{
  padding-bottom: 1.25rem;
}
.pb-8{
  padding-bottom: 2rem;
}
.pl-1\.5{
  padding-left: 0.375rem;
}
.pl-10{
  padding-left: 2.5rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pr-10{
  padding-right: 2.5rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pt-10{
  padding-top: 2.5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.pt-8{
  padding-top: 2rem;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans{
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl{
  font-size: 3rem;
  line-height: 1;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[12\.5px\]{
  font-size: 12.5px;
}
.text-\[12px\]{
  font-size: 12px;
}
.text-\[13px\]{
  font-size: 13px;
}
.text-\[14px\]{
  font-size: 14px;
}
.text-\[15px\]{
  font-size: 15px;
}
.text-\[16px\]{
  font-size: 16px;
}
.text-\[17px\]{
  font-size: 17px;
}
.text-\[22px\]{
  font-size: 22px;
}
.text-\[24px\]{
  font-size: 24px;
}
.text-\[26px\]{
  font-size: 26px;
}
.text-\[28px\]{
  font-size: 28px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black{
  font-weight: 900;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.capitalize{
  text-transform: capitalize;
}
.italic{
  font-style: italic;
}
.leading-none{
  line-height: 1;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-snug{
  line-height: 1.375;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.tracking-widest{
  letter-spacing: 0.1em;
}
.text-\[\#0F6E56\]{
  --tw-text-opacity: 1;
  color: rgb(15 110 86 / var(--tw-text-opacity, 1));
}
.text-\[\#185FA5\]{
  --tw-text-opacity: 1;
  color: rgb(24 95 165 / var(--tw-text-opacity, 1));
}
.text-\[\#1D9E75\]{
  --tw-text-opacity: 1;
  color: rgb(29 158 117 / var(--tw-text-opacity, 1));
}
.text-\[\#26215C\]{
  --tw-text-opacity: 1;
  color: rgb(38 33 92 / var(--tw-text-opacity, 1));
}
.text-\[\#3C3489\]{
  --tw-text-opacity: 1;
  color: rgb(60 52 137 / var(--tw-text-opacity, 1));
}
.text-\[\#444441\]{
  --tw-text-opacity: 1;
  color: rgb(68 68 65 / var(--tw-text-opacity, 1));
}
.text-\[\#534AB7\]{
  --tw-text-opacity: 1;
  color: rgb(83 74 183 / var(--tw-text-opacity, 1));
}
.text-\[\#888780\]{
  --tw-text-opacity: 1;
  color: rgb(136 135 128 / var(--tw-text-opacity, 1));
}
.text-\[\#993C1D\]{
  --tw-text-opacity: 1;
  color: rgb(153 60 29 / var(--tw-text-opacity, 1));
}
.text-\[\#A32D2D\]{
  --tw-text-opacity: 1;
  color: rgb(163 45 45 / var(--tw-text-opacity, 1));
}
.text-\[\#AFA9EC\]{
  --tw-text-opacity: 1;
  color: rgb(175 169 236 / var(--tw-text-opacity, 1));
}
.text-\[\#B4B2A9\]{
  --tw-text-opacity: 1;
  color: rgb(180 178 169 / var(--tw-text-opacity, 1));
}
.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-indigo-100{
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}
.text-orange-500{
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-purple-500{
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-purple-600{
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700{
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-transparent{
  color: transparent;
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/40{
  color: rgb(255 255 255 / 0.4);
}
.text-white\/70{
  color: rgb(255 255 255 / 0.7);
}
.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-700{
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.overline{
  text-decoration-line: overline;
}
.placeholder-\[\#B4B2A9\]::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(180 178 169 / var(--tw-placeholder-opacity, 1));
}
.placeholder-\[\#B4B2A9\]::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(180 178 169 / var(--tw-placeholder-opacity, 1));
}
.opacity-15{
  opacity: 0.15;
}
.opacity-20{
  opacity: 0.2;
}
.opacity-30{
  opacity: 0.3;
}
.opacity-\[0\.06\]{
  opacity: 0.06;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline{
  outline-style: solid;
}
.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[60px\]{
  --tw-blur: blur(60px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[80px\]{
  --tw-blur: blur(80px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[90px\]{
  --tw-blur: blur(90px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-0{
  --tw-brightness: brightness(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter{
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.\!transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow{
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150{
  transition-duration: 150ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-300{
  transition-duration: 300ms;
}
.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* your existing styles below */
/* ─── THEME VARIABLES ─────────────────────────────── */
/* ─── ABOUT PAGE VARIABLE ALIASES ─────────────────── */
:root,
[data-theme="dark"] {
  --bg:     #06060f;
  --bg-c:   rgba(13, 13, 31, 0.85);
  --bg-2:   #0d0d1f;
  --tp:     #f0f0ff;
  --ts:     #a0a0c0;
  --tm:     #60607a;
  --bm:     rgba(99, 102, 241, 0.25);
  --bs:     rgba(99, 102, 241, 0.15);

  --_teal:  #00d4aa;
  --_tdim:  rgba(0, 212, 170, 0.15);
  --_tbord: rgba(0, 212, 170, 0.3);
  --_viol:  #818cf8;
  --_vdim:  rgba(129, 140, 248, 0.15);
  --_vbord: rgba(129, 140, 248, 0.25);
  --_sky:   #38bdf8;
  --_sdim:  rgba(56, 189, 248, 0.12);
  --_sbord: rgba(56, 189, 248, 0.25);

  --_fd:    'Bricolage Grotesque', sans-serif;
  --_fb:    'DM Sans', sans-serif;

  --bg-primary:    #06060f;
  --bg-secondary:  #0d0d1f;
  --bg-tertiary:   #111128;
  --bg-card:       rgba(13, 13, 31, 0.85);

  --nav-bg:         rgba(6, 6, 15, 0.0);
  --nav-bg-scrolled: rgba(6, 6, 15, 0.88);

  --teal:          #00d4aa;
  --teal-dim:      rgba(0, 212, 170, 0.15);
  --teal-border:   rgba(0, 212, 170, 0.3);
  --indigo:        #6366f1;
  --indigo-dim:    rgba(99, 102, 241, 0.15);
  --indigo-light:  #818cf8;

  --text-primary:   #f0f0ff;
  --text-secondary: #a0a0c0;
  --text-muted:     #60607a;

  --border-subtle: rgba(99, 102, 241, 0.15);
  --border-mid:    rgba(99, 102, 241, 0.25);

  --gradient-brand: linear-gradient(135deg, #00d4aa, #6366f1);
}
[data-theme="light"] {
  --bg:     #f3f3fc;
  --bg-c:   rgba(255, 255, 255, 0.9);
  --bg-2:   #eaeaf8;
  --tp:     #0d0d1f;
  --ts:     #3a3a6e;
  --tm:     #8080aa;
  --bm:     rgba(79, 70, 229, 0.2);
  --bs:     rgba(79, 70, 229, 0.12);

  --_teal:  #009977;
  --_tdim:  rgba(0, 153, 119, 0.1);
  --_tbord: rgba(0, 153, 119, 0.3);
  --_viol:  #6366f1;
  --_vdim:  rgba(99, 102, 241, 0.1);
  --_vbord: rgba(99, 102, 241, 0.2);
  --_sky:   #0ea5e9;
  --_sdim:  rgba(14, 165, 233, 0.1);
  --_sbord: rgba(14, 165, 233, 0.25);

  --_fd:    'Bricolage Grotesque', sans-serif;
  --_fb:    'DM Sans', sans-serif;

  --bg-primary:    #f3f3fc;
  --bg-secondary:  #eaeaf8;
  --bg-tertiary:   #ffffff;
  --bg-card:       rgba(255, 255, 255, 0.9);

  --nav-bg:         rgba(243, 243, 252, 0.0);
  --nav-bg-scrolled: rgba(243, 243, 252, 0.9);

  --teal:          #009977;
  --teal-dim:      rgba(0, 153, 119, 0.1);
  --teal-border:   rgba(0, 153, 119, 0.3);
  --indigo:        #4f46e5;
  --indigo-dim:    rgba(79, 70, 229, 0.08);
  --indigo-light:  #6366f1;

  --text-primary:   #0d0d1f;
  --text-secondary: #3a3a6e;
  --text-muted:     #8080aa;

  --border-subtle: rgba(79, 70, 229, 0.12);
  --border-mid:    rgba(79, 70, 229, 0.2);

  --gradient-brand: linear-gradient(135deg, #009977, #4f46e5);
}
/* ─── RESET & BASE ─────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ─── SCROLLBAR ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--indigo); }
/* ─── SELECTION ────────────────────────────────────── */
::-moz-selection { background: rgba(99, 102, 241, 0.3); color: var(--text-primary); }
::selection { background: rgba(99, 102, 241, 0.3); color: var(--text-primary); }
/* ─── REUSABLE UTILITY CLASSES ─────────────────────── */
.sf-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.sf-section {
  padding: 96px 0;
}
.sf-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sf-title {
  font-family: "Syne", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-primary);
}
.sf-subtitle {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.75;
  font-weight: 300;
}
.sf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  letter-spacing: 0.2px;
}
.sf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-teal);
}
.sf-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-teal);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  padding: 13px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}
.sf-btn-ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-dim);
}
/* ─── SCROLL REVEAL ────────────────────────────────── */
.sf-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sf-reveal.sf-visible {
  opacity: 1;
  transform: translateY(0);
}
.sf-reveal-d1 { transition-delay: 0.1s; }
.sf-reveal-d2 { transition-delay: 0.2s; }
.sf-reveal-d3 { transition-delay: 0.3s; }
.sf-reveal-d4 { transition-delay: 0.4s; }
/* ─── ANIMATED GRADIENT TEXT ───────────────────────── */
.sf-gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hover\:-translate-y-0\.5:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:transform:hover{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[\#AFA9EC\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(175 169 236 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#085041\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(8 80 65 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#3C3489\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(60 52 137 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#EEEDFE\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(238 237 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f5f3ff\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f5f4fb\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(245 244 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/20:hover{
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-yellow-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.hover\:from-green-600:hover{
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-orange-600:hover{
  --tw-gradient-from: #ea580c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-red-600:hover{
  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-green-700:hover{
  --tw-gradient-to: #15803d var(--tw-gradient-to-position);
}
.hover\:to-orange-700:hover{
  --tw-gradient-to: #c2410c var(--tw-gradient-to-position);
}
.hover\:to-red-700:hover{
  --tw-gradient-to: #b91c1c var(--tw-gradient-to-position);
}
.hover\:text-\[\#3C3489\]:hover{
  --tw-text-opacity: 1;
  color: rgb(60 52 137 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#534AB7\]:hover{
  --tw-text-opacity: 1;
  color: rgb(83 74 183 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.hover\:shadow-sm:hover{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-\[\#534AB7\]:focus{
  --tw-border-opacity: 1;
  border-color: rgb(83 74 183 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-\[\#534AB7\]\/10:focus{
  --tw-ring-color: rgb(83 74 183 / 0.1);
}
.active\:scale-\[0\.98\]:active{
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:bg-gray-300:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-green-400:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-orange-400:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.disabled\:hover\:scale-100:hover:disabled{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:focus-within .group-focus-within\:text-\[\#534AB7\]{
  --tw-text-opacity: 1;
  color: rgb(83 74 183 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:-translate-x-0\.5{
  --tw-translate-x: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-0\.5{
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-\[\#26215C\]{
  --tw-text-opacity: 1;
  color: rgb(38 33 92 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-\[\#534AB7\]{
  --tw-text-opacity: 1;
  color: rgb(83 74 183 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-70{
  opacity: 0.7;
}
@media (min-width: 640px){
  .sm\:inline{
    display: inline;
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:items-end{
    align-items: flex-end;
  }
  .sm\:justify-between{
    justify-content: space-between;
  }
}
@media (min-width: 768px){
  .md\:flex{
    display: flex;
  }
  .md\:hidden{
    display: none;
  }
  .md\:w-\[52\%\]{
    width: 52%;
  }
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:flex-row{
    flex-direction: row;
  }
  .md\:p-10{
    padding: 2.5rem;
  }
  .md\:px-12{
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (min-width: 1024px){
  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }
  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

   
/* ============================================================
   SF SMARTLAB - PREMIUM VIRTUAL LAB CONTAINER UI v2.0
   Full redesign - wider, richer, more professional
   ============================================================ */
/* ── Root Variables ─────────────────────────────────────── */
:root {
     --lab-bg:             #eef0f7;
     --lab-surface:        #ffffff;
     --lab-surface-2:      #f7f8fc;
     --lab-surface-3:      #f0f2fa;
     --lab-border:         #e2e5f0;
     --lab-border-2:       #c8cde0;
   
     --lab-primary:        #4f46e5;
     --lab-primary-2:      #6366f1;
     --lab-primary-3:      #818cf8;
     --lab-primary-glow:   rgba(79, 70, 229, 0.15);
     --lab-primary-soft:   rgba(79, 70, 229, 0.08);
   
     --lab-accent:         #06b6d4;
     --lab-accent-2:       #0ea5e9;
     --lab-success:        #10b981;
     --lab-warning:        #f59e0b;
     --lab-danger:         #ef4444;
     --lab-purple:         #8b5cf6;
   
     --lab-text-1:         #0f172a;
     --lab-text-2:         #1e293b;
     --lab-text-3:         #475569;
     --lab-text-4:         #94a3b8;
   
     --lab-font:           'Plus Jakarta Sans', -apple-system, sans-serif;
     --lab-mono:           'JetBrains Mono', monospace;
   
     --lab-radius-sm:      8px;
     --lab-radius-md:      12px;
     --lab-radius-lg:      18px;
     --lab-radius-xl:      24px;
     --lab-radius-2xl:     32px;
   
     --lab-shadow-sm:      0 1px 4px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
     --lab-shadow-md:      0 4px 20px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.05);
     --lab-shadow-lg:      0 12px 48px rgba(15,23,42,0.10), 0 4px 16px rgba(15,23,42,0.06);
     --lab-shadow-xl:      0 24px 80px rgba(15,23,42,0.14);
     --lab-shadow-glow:    0 0 0 3px var(--lab-primary-glow);
     --lab-shadow-primary: 0 8px 28px rgba(79,70,229,0.32);
   
     --lab-transition:        all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
     --lab-transition-bounce: all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
     --lab-transition-slow:   all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
   }
/* ── Reset helpers ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* ── ROOT CONTAINER ─────────────────────────────────────── */
.MainContainerSimRoot {
     font-family: var(--lab-font);
     color: var(--lab-text-1);
     background: var(--lab-bg);
     min-height: 100vh;
     position: relative;
   }
/* Animated mesh gradient background */
.MainContainerSimRoot::before {
     content: '';
     position: fixed;
     inset: 0;
     background:
       radial-gradient(ellipse 80% 50% at 10% 0%, rgba(99,102,241,0.08) 0%, transparent 60%),
       radial-gradient(ellipse 60% 40% at 90% 100%, rgba(6,182,212,0.06) 0%, transparent 60%),
       radial-gradient(ellipse 50% 30% at 50% 50%, rgba(139,92,246,0.04) 0%, transparent 70%);
     pointer-events: none;
     z-index: 0;
   }
/* Subtle grid pattern */
.MainContainerSimRoot::after {
     content: '';
     position: fixed;
     inset: 0;
     background-image:
       linear-gradient(rgba(79,70,229,0.04) 1px, transparent 1px),
       linear-gradient(90deg, rgba(79,70,229,0.04) 1px, transparent 1px);
     background-size: 40px 40px;
     pointer-events: none;
     z-index: 0;
   }
/* ── WRAPPER ────────────────────────────────────────────── */
.MainContainerSimWrapper {
     position: relative;
     z-index: 1;
     max-width: 1440px;
     margin: 0 auto;
     padding: 32px 40px 72px;
   }
/* ── LAB HERO HEADER AREA ───────────────────────────────── */
.MainContainerSimWrapper > h1,
   .MainContainerSimTitle {
     font-family: var(--lab-font) !important;
     font-size: clamp(1.75rem, 2.5vw, 2.6rem) !important;
     font-weight: 900 !important;
     color: var(--lab-text-1) !important;
     letter-spacing: -0.04em !important;
     margin: 0 0 8px 0 !important;
     line-height: 1.1 !important;
     display: flex !important;
     align-items: center !important;
     gap: 14px !important;
   }
/* Glowing left accent bar */
.MainContainerSimWrapper > h1::before,
   .MainContainerSimTitle::before {
     content: '' !important;
     display: inline-block !important;
     width: 5px !important;
     height: 1.1em !important;
     background: linear-gradient(180deg, var(--lab-primary) 0%, var(--lab-accent) 100%) !important;
     border-radius: 3px !important;
     flex-shrink: 0 !important;
     box-shadow: 0 0 16px rgba(79,70,229,0.5) !important;
   }
/* Lab subtitle / breadcrumb strip  */
.lab-meta-strip {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 28px;
     margin-top: 6px;
     flex-wrap: wrap;
   }
.lab-chip {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 4px 12px;
     border-radius: 100px;
     font-size: 0.78rem;
     font-weight: 600;
     letter-spacing: 0.02em;
     border: 1px solid var(--lab-border);
     background: var(--lab-surface);
     color: var(--lab-text-3);
   }
.lab-chip.active-chip {
     background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(99,102,241,0.08));
     border-color: rgba(79,70,229,0.25);
     color: var(--lab-primary);
   }
.lab-chip .dot {
     width: 6px; height: 6px;
     border-radius: 50%;
     background: var(--lab-success);
     animation: dot-pulse 2s ease-in-out infinite;
   }
@keyframes dot-pulse {
     0%,100% { opacity: 1; transform: scale(1); }
     50%      { opacity: 0.6; transform: scale(1.3); }
   }
/* ── TAB NAV ────────────────────────────────────────────── */
.MainContainerSimTabButtons {
     display: flex;
     gap: 0;
     margin-bottom: 28px;
     background: var(--lab-surface);
     border: 1.5px solid var(--lab-border);
     border-radius: var(--lab-radius-xl);
     padding: 5px;
     width: -moz-fit-content;
     width: fit-content;
     box-shadow: var(--lab-shadow-md);
     position: relative;
     overflow: hidden;
   }
.MainContainerSimButton {
     font-family: var(--lab-font);
     font-size: 0.9rem;
     font-weight: 700;
     padding: 12px 32px;
     border: none;
     border-radius: var(--lab-radius-lg);
     background: transparent;
     color: var(--lab-text-3);
     cursor: pointer;
     transition: var(--lab-transition);
     letter-spacing: 0.01em;
     position: relative;
     white-space: nowrap;
     display: flex;
     align-items: center;
     gap: 8px;
   }
.MainContainerSimButton:hover:not(.MainContainerSimButtonActive) {
     color: var(--lab-text-2);
     background: var(--lab-surface-3);
   }
/* Active pill with gradient + glow */
.MainContainerSimButtonActive {
     background: linear-gradient(135deg, var(--lab-primary) 0%, #5b57f0 50%, var(--lab-primary-2) 100%) !important;
     color: #ffffff !important;
     box-shadow: var(--lab-shadow-primary) !important;
     transform: none;
   }
.MainContainerSimButtonActive:hover {
     background: linear-gradient(135deg, #4338ca 0%, #5050e8 100%) !important;
     box-shadow: 0 10px 32px rgba(79,70,229,0.42) !important;
   }
/* Tab icons via content */
.MainContainerSimButton:nth-child(1)::before { content: '📖'; font-size: 1rem; }
.MainContainerSimButton:nth-child(2)::before { content: '⚗️'; font-size: 1rem; }
.MainContainerSimButton:nth-child(3)::before { content: '🧠'; font-size: 1rem; }
/* ── ANIMATED CONTENT AREA ──────────────────────────────── */
.MainContainerSimAnimatedContent {
     width: 100%;
   }
/* ── MAIN CONTENT CARD ──────────────────────────────────── */
.MainContainerSimContent {
     background: var(--lab-surface);
     border: 1.5px solid var(--lab-border);
     border-radius: var(--lab-radius-2xl);
     box-shadow: var(--lab-shadow-lg);
     overflow: hidden;
     position: relative;
     min-height: 600px;
   }
/* Rainbow top accent */
.MainContainerSimContent::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0;
     height: 4px;
     background: linear-gradient(
       90deg,
       var(--lab-primary)  0%,
       var(--lab-purple)   25%,
       var(--lab-accent)   50%,
       var(--lab-success)  75%,
       var(--lab-warning)  100%
     );
     z-index: 2;
   }
/* Inner padding for direct children */
.MainContainerSimContent > * {
     padding: 36px 40px;
   }
/* Remove double padding for nested containers */
.MainContainerSimContent .TheorySFsmartlab-container,
   .MainContainerSimContent .SfSmartlabQuiz-container {
     padding: 0;
   }
/* ── VIRTUALLABMAIN INNER STYLES ────────────────────────── */
.virtualLabMainContainer {
     font-family: var(--lab-font);
     color: var(--lab-text-1);
     background: transparent;
     min-height: auto;
   }
.virtualLabInnerContainer {
     margin: 0;
     padding: 0;
     background: transparent;
     border-radius: 0;
     box-shadow: none;
   }
.virtualLabTitle {
     font-family: var(--lab-font) !important;
     font-size: 1.6rem !important;
     font-weight: 800 !important;
     color: var(--lab-text-1) !important;
     margin-bottom: 1.5rem !important;
     text-align: center !important;
     border-bottom: 2px solid var(--lab-border) !important;
     padding-bottom: 1rem !important;
     letter-spacing: -0.03em !important;
   }
.virtualLabTabContainer {
     display: flex;
     justify-content: center;
     margin-bottom: 2rem;
     gap: 8px;
     flex-wrap: wrap;
   }
.virtualLabTabButton {
     font-family: var(--lab-font);
     padding: 10px 24px;
     border: 1.5px solid var(--lab-border-2);
     border-radius: var(--lab-radius-md);
     font-weight: 700;
     font-size: 0.875rem;
     cursor: pointer;
     transition: var(--lab-transition);
     background: var(--lab-surface-2);
     color: var(--lab-text-3);
   }
.virtualLabTabButton:hover {
     border-color: var(--lab-primary-3);
     color: var(--lab-primary);
     background: var(--lab-primary-soft);
     transform: translateY(-2px);
     box-shadow: var(--lab-shadow-sm);
   }
.virtualLabTabButton.active {
     background: linear-gradient(135deg, var(--lab-primary), var(--lab-primary-2));
     color: white;
     border-color: transparent;
     box-shadow: var(--lab-shadow-primary);
     transform: translateY(-2px);
   }
.virtualLabTabButton.active:hover {
     background: linear-gradient(135deg, #4338ca, #5254cc);
   }
.virtualLabTabHoverEffect {
     display: none;
   }
.virtualLabContentWrapper { width: 100%; }
.virtualLabContentContainer {
     padding: 1.5rem;
     border-radius: var(--lab-radius-lg);
     background: var(--lab-surface-2);
     border: 1px solid var(--lab-border);
   }
.virtualLabContentContainer.hidden { display: none; }
/* ── FINAL SIMULATION COMPONENT ─────────────────────────── */
.FinalSimulationComponentContainer {
     width: 100%;
     min-height: auto;
     background: transparent;
     display: flex;
     flex-direction: column;
     padding: 0;
   }
.FinalSimulationComponentWrapper {
     width: 100%;
     max-width: 100%;
     margin: 0;
     padding: 0;
   }
.FinalSimulationComponentTitle {
     font-family: var(--lab-font);
     font-size: 1.8rem;
     font-weight: 800;
     color: var(--lab-text-1);
     margin-bottom: 1.5rem;
     letter-spacing: -0.03em;
   }
.FinalSimulationComponentTabContainer {
     display: flex;
     gap: 8px;
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
     background: var(--lab-surface-2);
     border: 1.5px solid var(--lab-border);
     border-radius: var(--lab-radius-lg);
     padding: 5px;
     width: -moz-fit-content;
     width: fit-content;
   }
.FinalSimulationComponentTabButton {
     font-family: var(--lab-font);
     padding: 9px 22px;
     border: none;
     border-radius: var(--lab-radius-md);
     font-size: 0.875rem;
     font-weight: 700;
     cursor: pointer;
     transition: var(--lab-transition);
     background: transparent;
     color: var(--lab-text-3);
   }
.FinalSimulationComponentTabButton:hover {
     color: var(--lab-text-2);
     background: var(--lab-surface-3);
   }
.FinalSimulationComponentTabButton.active {
     background: linear-gradient(135deg, var(--lab-primary), var(--lab-primary-2));
     color: white;
     box-shadow: var(--lab-shadow-primary);
   }
.FinalSimulationComponentContent {
     width: 100%;
     background: var(--lab-surface-2);
     border-radius: var(--lab-radius-xl);
     padding: 2rem;
     border: 1.5px solid var(--lab-border);
   }
.FinalSimulationComponentInnerTitle {
     font-family: var(--lab-font);
     font-size: 1.4rem;
     font-weight: 800;
     color: var(--lab-text-1);
     margin-bottom: 1.25rem;
     letter-spacing: -0.02em;
   }
.FinalSimulationComponentSelect {
     width: 100%;
     padding: 13px 18px;
     border: 1.5px solid var(--lab-border-2);
     border-radius: var(--lab-radius-md);
     font-size: 0.95rem;
     font-family: var(--lab-font);
     font-weight: 500;
     margin-bottom: 1rem;
     transition: var(--lab-transition);
     background: var(--lab-surface);
     color: var(--lab-text-2);
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 14px center;
     padding-right: 42px;
     cursor: pointer;
     box-shadow: var(--lab-shadow-sm);
   }
.FinalSimulationComponentSelect:hover { border-color: var(--lab-primary-3); }
.FinalSimulationComponentSelect:focus {
     outline: none;
     border-color: var(--lab-primary);
     box-shadow: var(--lab-shadow-glow);
   }
.FinalSimulationComponentButton {
     font-family: var(--lab-font);
     padding: 13px 32px;
     background: linear-gradient(135deg, var(--lab-primary), var(--lab-primary-2));
     color: white;
     font-size: 0.95rem;
     font-weight: 800;
     border: none;
     border-radius: var(--lab-radius-md);
     cursor: pointer;
     transition: var(--lab-transition-bounce);
     box-shadow: var(--lab-shadow-primary);
     letter-spacing: 0.01em;
   }
.FinalSimulationComponentButton:hover:not(:disabled) {
     transform: translateY(-3px);
     box-shadow: 0 12px 32px rgba(79,70,229,0.42);
   }
.FinalSimulationComponentButton:active:not(:disabled) {
     transform: translateY(-1px);
   }
.FinalSimulationComponentButton:disabled {
     background: var(--lab-border-2);
     color: var(--lab-text-4);
     cursor: not-allowed;
     box-shadow: none;
     transform: none;
   }
.FinalSimulationComponentResultArea {
     margin-top: 1.5rem;
     padding: 1.75rem;
     background: var(--lab-surface);
     border-radius: var(--lab-radius-xl);
     border: 1.5px solid var(--lab-border);
     animation: labFadeUp 0.35s ease-out both;
     box-shadow: var(--lab-shadow-md);
   }
@keyframes labFadeUp {
     from { opacity: 0; transform: translateY(14px); }
     to   { opacity: 1; transform: translateY(0); }
   }
/* ── GENERIC TITLE CLASSES ──────────────────────────────── */
.lab-title,
   .MainTrigonometryTitle,
   .lei-lab-title {
     font-family: var(--lab-font) !important;
     font-size: 1.5rem !important;
     font-weight: 800 !important;
     color: var(--lab-text-1) !important;
     margin-bottom: 1.5rem !important;
     text-align: center !important;
     border-bottom: 2px solid var(--lab-border) !important;
     padding-bottom: 0.75rem !important;
     letter-spacing: -0.02em !important;
   }
/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--lab-bg); }
::-webkit-scrollbar-thumb { background: var(--lab-border-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--lab-primary-3); }
/* ── SELECTION ──────────────────────────────────────────── */
::-moz-selection {
     background: rgba(99,102,241,0.18);
     color: var(--lab-text-1);
   }
::selection {
     background: rgba(99,102,241,0.18);
     color: var(--lab-text-1);
   }
/* ── FOCUS RINGS ────────────────────────────────────────── */
.MainContainerSimButton:focus-visible,
   .virtualLabTabButton:focus-visible,
   .FinalSimulationComponentTabButton:focus-visible,
   .FinalSimulationComponentButton:focus-visible {
     outline: 2px solid var(--lab-primary);
     outline-offset: 3px;
   }
/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1200px) {
     .MainContainerSimWrapper {
       max-width: 100%;
       padding: 28px 32px 60px;
     }
   }
@media (max-width: 900px) {
     .MainContainerSimWrapper {
       padding: 24px 20px 48px;
     }
   
     .MainContainerSimTabButtons {
       width: 100%;
     }
   
     .MainContainerSimButton {
       flex: 1;
       padding: 12px 16px;
       font-size: 0.875rem;
       justify-content: center;
     }
   
     .MainContainerSimContent > * {
       padding: 28px 24px;
     }
   }
@media (max-width: 640px) {
     .MainContainerSimWrapper {
       padding: 16px 14px 40px;
     }
   
     .MainContainerSimTabButtons {
       flex-direction: row;
       width: 100%;
       border-radius: var(--lab-radius-lg);
     }
   
     .MainContainerSimButton {
       flex: 1;
       padding: 11px 8px;
       font-size: 0.8rem;
       gap: 4px;
     }
   
     .MainContainerSimButton::before {
       font-size: 0.85rem;
     }
   
     .MainContainerSimContent > * {
       padding: 20px 16px;
     }
   
     .FinalSimulationComponentContent {
       padding: 1.25rem;
     }
   
     .FinalSimulationComponentTabContainer {
       width: 100%;
     }
   
     .FinalSimulationComponentTabButton {
       flex: 1;
       text-align: center;
     }
   
     .virtualLabTabContainer {
       flex-direction: column;
       align-items: stretch;
     }
   
     .virtualLabTabButton {
       width: 100%;
       text-align: center;
     }
   
     .MainContainerSimWrapper > h1,
     .MainContainerSimTitle {
       font-size: 1.5rem !important;
     }
   }
/* Enhanced Educational Theory Component Styles */
/* ============================================================
   SF SMARTLAB - THEORY COMPONENT - FULL REDESIGN
   Matches the premium lab UI, removes awkward elements
   ============================================================ */
/* ── Main Container ─────────────────────────────────────── */
.TheorySFsmartlab-container {
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: transparent;
  min-height: auto;
  position: relative;
  overflow-x: hidden;
}
/* Remove the old purple gradient background */
.TheorySFsmartlab-container::before {
  display: none;
}
/* ── Header ─────────────────────────────────────────────── */
.TheorySFsmartlab-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2fc 100%);
  border-radius: 20px;
  box-shadow:
    0 1px 3px rgba(15,23,42,0.06),
    0 4px 16px rgba(79,70,229,0.06);
  border: 1.5px solid rgba(99,102,241,0.12);
  position: relative;
  overflow: hidden;
}
/* Subtle top-left glow accent */
.TheorySFsmartlab-header::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
  pointer-events: none;
}
/* Bottom-right accent */
.TheorySFsmartlab-header::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.TheorySFsmartlab-header-left {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.TheorySFsmartlab-book-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(79,70,229,0.3);
  flex-shrink: 0;
}
.TheorySFsmartlab-book-icon {
  width: 26px;
  height: 26px;
  color: white;
}
.TheorySFsmartlab-title-section {
  flex: 1;
}
.TheorySFsmartlab-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.03em;
  line-height: 1.2;
  /* Remove old gradient text - use solid for clarity */
  background: linear-gradient(135deg, #0f172a 0%, #4f46e5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.TheorySFsmartlab-subtitle {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0 0 12px 0;
  font-weight: 500;
}
.TheorySFsmartlab-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.TheorySFsmartlab-author {
  color: #475569;
  font-weight: 600;
  font-size: 0.875rem;
}
.TheorySFsmartlab-badges {
  display: flex;
  gap: 6px;
}
.TheorySFsmartlab-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: white;
  border-radius: 100px;
  font-size: 0.8rem;
  color: #475569;
  font-weight: 600;
  border: 1px solid #e2e5f0;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
.TheorySFsmartlab-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.TheorySFsmartlab-bookmark-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid #e2e5f0;
  border-radius: 12px;
  background: white;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
.TheorySFsmartlab-bookmark-btn:hover {
  background: #fffbeb;
  color: #f59e0b;
  border-color: #fbbf24;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245,158,11,0.2);
}
.TheorySFsmartlab-bookmark-btn.active {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: white;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(245,158,11,0.35);
}
.TheorySFsmartlab-toc-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border: none;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}
.TheorySFsmartlab-toc-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79,70,229,0.4);
}
/* ── Table of Contents Overlay ──────────────────────────── */
.TheorySFsmartlab-toc-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: overlayIn 0.2s ease-out;
}
@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.TheorySFsmartlab-toc-content {
  background: white;
  padding: 28px;
  border-radius: 24px;
  max-width: 500px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow:
    0 24px 64px rgba(15,23,42,0.2),
    0 0 0 1px rgba(99,102,241,0.1);
  animation: tocIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tocIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.TheorySFsmartlab-toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f1f5f9;
}
.TheorySFsmartlab-toc-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.02em;
}
.TheorySFsmartlab-toc-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: #f1f5f9;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}
.TheorySFsmartlab-toc-close:hover {
  background: #fee2e2;
  color: #ef4444;
}
.TheorySFsmartlab-toc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* TOC Items - FIXED colors */
.TheorySFsmartlab-toc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: none;
  background: #f8fafc !important;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  position: relative;
  border: 1.5px solid #e8ecf4 !important;
  color: #1e293b !important;
  width: 100%;
}
.TheorySFsmartlab-toc-item:hover {
  background: #f0f2fc !important;
  border-color: #c4b5fd !important;
  color: #4f46e5 !important;
  transform: translateX(4px);
}
.TheorySFsmartlab-toc-item.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(79,70,229,0.3);
  transform: translateX(2px);
}
.TheorySFsmartlab-toc-item.completed {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}
.TheorySFsmartlab-toc-item.completed:hover {
  background: #dcfce7 !important;
  color: #15803d !important;
}
.TheorySFsmartlab-toc-page-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.825rem;
  color: #4f46e5;
  flex-shrink: 0;
  border: 1.5px solid #e2e8f0;
}
.TheorySFsmartlab-toc-item.active .TheorySFsmartlab-toc-page-number {
  background: rgba(255,255,255,0.2) !important;
  color: white !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.TheorySFsmartlab-toc-item.completed .TheorySFsmartlab-toc-page-number {
  background: #10b981 !important;
  color: white !important;
  border-color: transparent !important;
}
.TheorySFsmartlab-toc-page-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
  color: inherit !important;
  line-height: 1.4;
}
.TheorySFsmartlab-completed-indicator {
  color: #10b981;
  font-weight: 700;
  font-size: 1rem;
}
.TheorySFsmartlab-toc-item.active .TheorySFsmartlab-completed-indicator {
  color: rgba(255,255,255,0.8);
}
/* ── Book / Page Container ──────────────────────────────── */
.TheorySFsmartlab-book {
  background: white;
  border-radius: 20px;
  box-shadow:
    0 1px 3px rgba(15,23,42,0.06),
    0 8px 32px rgba(15,23,42,0.08);
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  min-height: 580px;
  border: 1.5px solid #e8ecf4;
}
/* Remove old double-border book effect */
.TheorySFsmartlab-book-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #4f46e5 0%, #8b5cf6 50%, #06b6d4 100%);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.TheorySFsmartlab-page {
  padding: 40px 44px 44px 52px;
  min-height: 580px;
  position: relative;
}
/* Remove old margin line */
.TheorySFsmartlab-page::before {
  display: none;
}
/* ── Page Header ────────────────────────────────────────── */
.TheorySFsmartlab-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid #f1f5f9;
}
.TheorySFsmartlab-page-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.3;
  flex: 1;
  /* Clean solid gradient - no transparent fill color issues */
  background: linear-gradient(135deg, #0f172a 0%, #4f46e5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.TheorySFsmartlab-page-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 16px;
}
.TheorySFsmartlab-page-number {
  font-size: 0.825rem;
  color: #64748b;
  background: #f8fafc;
  padding: 6px 14px;
  border-radius: 100px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
.TheorySFsmartlab-bookmark-ribbon {
  width: 20px;
  height: 28px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  position: relative;
  border-radius: 3px 3px 0 0;
}
.TheorySFsmartlab-bookmark-ribbon::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 10px solid #ea580c;
  border-right: 10px solid #ea580c;
  border-bottom: 7px solid transparent;
}
/* ── Page Content ───────────────────────────────────────── */
.TheorySFsmartlab-page-content {
  line-height: 1.85;
  color: #334155;
  font-size: 1rem;
}
.TheorySFsmartlab-page-content h3 {
  color: #0f172a;
  font-size: 1.35rem;
  margin: 28px 0 14px 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-left: 14px;
  border-left: 4px solid #4f46e5;
  background: linear-gradient(135deg, #0f172a, #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.TheorySFsmartlab-page-content h4 {
  color: #1e293b;
  font-size: 1.1rem;
  margin: 20px 0 10px 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.TheorySFsmartlab-page-content h5 {
  color: #334155;
  font-size: 1rem;
  margin: 16px 0 8px 0;
  font-weight: 700;
}
.TheorySFsmartlab-page-content p {
  margin: 12px 0;
  line-height: 1.85;
}
.TheorySFsmartlab-page-content ul {
  margin: 14px 0;
  padding-left: 24px;
}
.TheorySFsmartlab-page-content li {
  margin: 8px 0;
}
.TheorySFsmartlab-page-content li::marker {
  color: #4f46e5;
  font-weight: 700;
}
.TheorySFsmartlab-page-content strong {
  color: #1e293b;
  font-weight: 700;
}
/* ── Content Boxes ──────────────────────────────────────── */
.TheorySFsmartlab-highlight-box,
.TheorySFsmartlab-info-box,
.TheorySFsmartlab-equation-box,
.TheorySFsmartlab-problem-box,
.TheorySFsmartlab-practice-box,
.TheorySFsmartlab-next-chapter {
  margin: 20px 0;
  padding: 18px 22px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
  border: none;
}
.TheorySFsmartlab-highlight-box {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-left: 4px solid #f59e0b;
}
.TheorySFsmartlab-info-box {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-left: 4px solid #3b82f6;
}
.TheorySFsmartlab-equation-box {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border-left: 4px solid #7c3aed;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.95rem;
}
.TheorySFsmartlab-equation-box p {
  margin: 6px 0;
  font-weight: 600;
  color: #4c1d95;
}
.TheorySFsmartlab-equation-box h4 {
  color: #5b21b6;
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-bottom: 12px;
}
.TheorySFsmartlab-problem-box {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-left: 4px solid #10b981;
}
.TheorySFsmartlab-practice-box {
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  border-left: 4px solid #f43f5e;
}
.TheorySFsmartlab-next-chapter {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-left: 4px solid #0ea5e9;
}
/* ── Navigation Bar ─────────────────────────────────────── */
.TheorySFsmartlab-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 4px 16px rgba(15,23,42,0.06);
  border: 1.5px solid #e8ecf4;
}
.TheorySFsmartlab-nav-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: white;
  border: none;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.875rem;
  box-shadow: 0 4px 12px rgba(79,70,229,0.28);
}
.TheorySFsmartlab-nav-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79,70,229,0.38);
}
.TheorySFsmartlab-nav-button:active:not(:disabled) {
  transform: translateY(0);
}
.TheorySFsmartlab-nav-button:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}
.TheorySFsmartlab-nav-icon {
  width: 16px;
  height: 16px;
}
/* ── Page Dots ──────────────────────────────────────────── */
.TheorySFsmartlab-page-indicator {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 60%;
}
.TheorySFsmartlab-page-dot {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.TheorySFsmartlab-page-dot:hover {
  background: #94a3b8;
  transform: scale(1.25);
}
.TheorySFsmartlab-page-dot.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  transform: scale(1.4);
  box-shadow: 0 3px 10px rgba(79,70,229,0.4);
  border-radius: 4px;
}
.TheorySFsmartlab-page-dot.completed {
  background: #10b981;
  transform: scale(1.15);
}
.TheorySFsmartlab-page-dot.completed::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
}
/* ── Progress Bar ───────────────────────────────────────── */
.TheorySFsmartlab-progress-container {
  height: 5px;
  background: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 4px;
}
.TheorySFsmartlab-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #8b5cf6, #06b6d4);
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.TheorySFsmartlab-progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: progressShine 2.5s infinite;
}
@keyframes progressShine {
  0%   { left: -100%; }
  100% { left: 100%; }
}
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .TheorySFsmartlab-header {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }

  .TheorySFsmartlab-header-right {
    align-self: flex-end;
  }

  .TheorySFsmartlab-title {
    font-size: 1.4rem;
  }

  .TheorySFsmartlab-page {
    padding: 24px 20px 28px 28px;
  }

  .TheorySFsmartlab-navigation {
    flex-direction: column;
    gap: 14px;
    padding: 16px;
  }

  .TheorySFsmartlab-nav-button {
    width: 100%;
    justify-content: center;
  }

  .TheorySFsmartlab-page-indicator {
    max-width: 100%;
    order: -1;
  }

  .TheorySFsmartlab-toc-content {
    margin: 12px;
    padding: 20px;
    max-height: 85vh;
  }
}
@media (max-width: 480px) {
  .TheorySFsmartlab-header {
    padding: 16px;
  }

  .TheorySFsmartlab-title {
    font-size: 1.25rem;
  }

  .TheorySFsmartlab-page {
    padding: 18px 16px 20px 22px;
  }

  .TheorySFsmartlab-page-title {
    font-size: 1.2rem;
  }

  .TheorySFsmartlab-page-content {
    font-size: 0.95rem;
  }

  .TheorySFsmartlab-navigation {
    padding: 12px;
  }
}
/* Quiz Component - Professional UI Styles */
:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --background-primary: #ffffff;
    --background-secondary: #f8fafc;
    --background-tertiary: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --border-hover: #cbd5e1;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
* {
    box-sizing: border-box;
  }
/* ============================================================
   QUIZ CSS VARIABLES — Define these at root so all 200+ quiz
   files pick them up automatically via index.css
   ============================================================ */
:root {
  /* Colors */
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --success-color: #10b981;
  --error-color:   #ef4444;
  --warning-color: #f59e0b;

  /* Backgrounds */
  --background-primary:   #ffffff;
  --background-secondary: #f1f5f9;
  --background-tertiary:  #e2e8f0;

  /* Text */
  --text-primary:   #0f172a;
  --text-secondary: #475569;

  /* Border */
  --border-color: #cbd5e1;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transition */
  --transition: all 0.2s ease;
}
/* ============================================================
   MAIN CONTAINER
   ============================================================ */
.SfSmartlabQuiz-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f1f5f9;
  min-height: 100vh;
  color: #0f172a;
  line-height: 1.6;
}
/* ============================================================
   QUIZ HEADER
   ============================================================ */
.SfSmartlabQuiz-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.875rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  margin-bottom: 2rem;
  border: 1px solid #cbd5e1;
}
.SfSmartlabQuiz-header-info h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #0f172a;
}
.SfSmartlabQuiz-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.SfSmartlabQuiz-subject {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.SfSmartlabQuiz-difficulty {
  background: #e2e8f0;
  color: #475569;
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid #cbd5e1;
}
.SfSmartlabQuiz-timer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #e2e8f0;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #0f172a;
  border: 2px solid #cbd5e1;
  transition: all 0.2s ease;
}
.SfSmartlabQuiz-time-warning {
  color: #ef4444 !important;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}
/* ============================================================
   PROGRESS BAR
   ============================================================ */
.SfSmartlabQuiz-progress-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: 1px solid #cbd5e1;
}
.SfSmartlabQuiz-progress-bar {
  flex: 1;
  height: 0.75rem;
  background: #e2e8f0;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #cbd5e1;
}
.SfSmartlabQuiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  border-radius: 0.5rem;
  transition: width 0.3s ease;
  position: relative;
}
.SfSmartlabQuiz-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.SfSmartlabQuiz-progress-text {
  font-weight: 600;
  color: #475569;
  font-size: 0.9rem;
  white-space: nowrap;
}
/* ============================================================
   QUESTION NAVIGATION DOTS
   ============================================================ */
.SfSmartlabQuiz-question-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.SfSmartlabQuiz-nav-btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  position: relative;
}
.SfSmartlabQuiz-nav-btn:hover {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.SfSmartlabQuiz-nav-active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.SfSmartlabQuiz-nav-answered {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}
.SfSmartlabQuiz-nav-answered::after {
  content: '✓';
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background: #10b981;
  color: #ffffff;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  font-size: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}
/* ============================================================
   QUESTION CARD
   ============================================================ */
.SfSmartlabQuiz-question-card {
  background: #ffffff;
  border-radius: 0.875rem;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: 1px solid #cbd5e1;
  transition: all 0.2s ease;
}
.SfSmartlabQuiz-question-card:hover {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.SfSmartlabQuiz-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #cbd5e1;
}
.SfSmartlabQuiz-question-number {
  font-size: 1rem;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Difficulty Badges */
.SfSmartlabQuiz-difficulty-badge {
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.SfSmartlabQuiz-difficulty-basic {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.SfSmartlabQuiz-difficulty-intermediate {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.SfSmartlabQuiz-difficulty-advanced {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.SfSmartlabQuiz-question-text {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 2rem 0;
  color: #0f172a;
  line-height: 1.7;
}
/* ============================================================
   OPTIONS
   ============================================================ */
.SfSmartlabQuiz-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.SfSmartlabQuiz-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid #cbd5e1;
  border-radius: 0.875rem;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  text-align: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.SfSmartlabQuiz-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.08), transparent);
  transition: left 0.5s;
}
.SfSmartlabQuiz-option:hover {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.SfSmartlabQuiz-option:hover::before {
  left: 100%;
}
.SfSmartlabQuiz-option-selected {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.SfSmartlabQuiz-option-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.875rem;
  color: #475569;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.SfSmartlabQuiz-option-selected .SfSmartlabQuiz-option-letter {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.SfSmartlabQuiz-option-text {
  flex: 1;
  font-weight: 500;
  color: #0f172a;
}
/* ============================================================
   CONTROLS (Prev / Next / Submit)
   ============================================================ */
.SfSmartlabQuiz-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 1.5rem 2rem;
  border-radius: 0.875rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  border: 1px solid #cbd5e1;
  flex-wrap: wrap;
  gap: 1rem;
}
.SfSmartlabQuiz-answer-status {
  font-weight: 600;
  color: #475569;
  font-size: 0.9rem;
  text-align: center;
  flex: 1;
}
/* Buttons */
.SfSmartlabQuiz-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.SfSmartlabQuiz-btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transition: width 0.6s, height 0.6s;
  transform: translate(-50%, -50%);
}
.SfSmartlabQuiz-btn:active::before {
  width: 300px;
  height: 300px;
}
.SfSmartlabQuiz-btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.SfSmartlabQuiz-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.SfSmartlabQuiz-btn-secondary {
  background: #ffffff;
  color: #475569;
  border: 2px solid #cbd5e1;
}
.SfSmartlabQuiz-btn-secondary:hover {
  border-color: #2563eb;
  color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.SfSmartlabQuiz-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.SfSmartlabQuiz-submit-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 1rem;
  padding: 1rem 2rem;
  font-weight: 700;
  animation: pulse-submit 2s infinite;
}
@keyframes pulse-submit {
  0%, 100% { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
  50%       { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
}
/* ============================================================
   RESULTS — Header
   ============================================================ */
.SfSmartlabQuiz-results-header {
  text-align: center;
  margin-bottom: 2rem;
}
.SfSmartlabQuiz-results-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.SfSmartlabQuiz-results-title h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
}
.SfSmartlabQuiz-trophy-icon {
  color: #f59e0b;
  width: 2rem;
  height: 2rem;
}
.SfSmartlabQuiz-lab-info {
  color: #475569;
  font-size: 1rem;
  font-weight: 500;
}
/* ============================================================
   RESULTS — Summary Card
   ============================================================ */
.SfSmartlabQuiz-results-summary {
  background: #ffffff;
  border-radius: 0.875rem;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border: 1px solid #cbd5e1;
}
.SfSmartlabQuiz-score-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.SfSmartlabQuiz-score-circle {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: conic-gradient(#10b981 0deg, #10b981 calc(var(--percentage, 75) * 3.6deg), #e2e8f0 calc(var(--percentage, 75) * 3.6deg));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.SfSmartlabQuiz-score-circle::before {
  content: '';
  position: absolute;
  width: 6rem;
  height: 6rem;
  background: #ffffff;
  border-radius: 50%;
}
.SfSmartlabQuiz-score-text {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0f172a;
  position: relative;
  z-index: 1;
}
.SfSmartlabQuiz-score-details {
  text-align: center;
  flex: 1;
  min-width: 200px;
}
.SfSmartlabQuiz-score-fraction {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.5rem 0;
}
.SfSmartlabQuiz-motivational-text {
  font-size: 1rem;
  color: #475569;
  margin: 0;
  font-style: italic;
}
.SfSmartlabQuiz-performance-breakdown {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.SfSmartlabQuiz-breakdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #e2e8f0;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  font-weight: 600;
  color: #475569;
}
/* ============================================================
   RESULTS — Detailed Review
   ============================================================ */
.SfSmartlabQuiz-detailed-results {
  background: #ffffff;
  border-radius: 0.875rem;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  border: 1px solid #cbd5e1;
}
.SfSmartlabQuiz-detailed-results h3 {
  margin: 0 0 2rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 2px solid #cbd5e1;
}
.SfSmartlabQuiz-result-item {
  background: #f1f5f9;
  border-radius: 0.875rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid #cbd5e1;
  transition: all 0.2s ease;
}
.SfSmartlabQuiz-result-item:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.SfSmartlabQuiz-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.SfSmartlabQuiz-result-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.SfSmartlabQuiz-correct-icon   { color: #10b981; }
.SfSmartlabQuiz-incorrect-icon { color: #ef4444; }
.SfSmartlabQuiz-result-question {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: #0f172a;
  line-height: 1.6;
}
.SfSmartlabQuiz-result-answers {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.SfSmartlabQuiz-result-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  font-weight: 500;
  color: #0f172a;
}
.SfSmartlabQuiz-correct-answer {
  background: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
  color: #065f46;
}
.SfSmartlabQuiz-wrong-answer {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #7f1d1d;
}
.SfSmartlabQuiz-option-icon { flex-shrink: 0; }
.SfSmartlabQuiz-explanation {
  background: #ffffff;
  padding: 1.25rem;
  border-radius: 0.5rem;
  border-left: 4px solid #2563eb;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #475569;
}
.SfSmartlabQuiz-explanation strong {
  color: #0f172a;
}
/* ============================================================
   RESULTS — Actions
   ============================================================ */
.SfSmartlabQuiz-results-actions {
  text-align: center;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .SfSmartlabQuiz-container  { padding: 1rem; }

  .SfSmartlabQuiz-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .SfSmartlabQuiz-question-card { padding: 1.5rem; }

  .SfSmartlabQuiz-controls {
    flex-direction: column;
    gap: 1rem;
  }

  .SfSmartlabQuiz-score-card {
    flex-direction: column;
    text-align: center;
  }

  .SfSmartlabQuiz-performance-breakdown {
    flex-direction: column;
    align-items: center;
  }

  .SfSmartlabQuiz-question-nav { gap: 0.25rem; }

  .SfSmartlabQuiz-nav-btn {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.8rem;
  }
}
@media (max-width: 480px) {
  .SfSmartlabQuiz-question-text { font-size: 1.1rem; }

  .SfSmartlabQuiz-option {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .SfSmartlabQuiz-score-circle {
    width: 6rem;
    height: 6rem;
  }

  .SfSmartlabQuiz-score-circle::before {
    width: 4.5rem;
    height: 4.5rem;
  }

  .SfSmartlabQuiz-score-text { font-size: 1.5rem; }
}
.formulamathsclasstwelth-main-container {
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
}
.formulamathsclasstwelth-header {
  background: white;
  padding: 25px 35px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 25px;
  border: 1px solid #e2e8f0;
}
.formulamathsclasstwelth-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.formulamathsclasstwelth-header-left h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}
.formulamathsclasstwelth-header-left p {
  color: #64748b;
  margin: 0;
  font-size: 1rem;
}
.formulamathsclasstwelth-badges {
  display: flex;
  gap: 8px;
}
.formulamathsclasstwelth-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}
.formulamathsclasstwelth-badge.jee {
  background: #dbeafe;
  color: #1d4ed8;
}
.formulamathsclasstwelth-badge.neet {
  background: #dcfce7;
  color: #166534;
}
.formulamathsclasstwelth-badge.cbse {
  background: #fce7f3;
  color: #be185d;
}
.formulamathsclasstwelth-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 25px;
}
.formulamathsclasstwelth-sidebar {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
  padding: 25px;
  height: -moz-fit-content;
  height: fit-content;
  position: sticky;
  top: 20px;
}
.formulamathsclasstwelth-sidebar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 20px;
}
.formulamathsclasstwelth-nav-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.formulamathsclasstwelth-nav-button {
  background: none;
  border: none;
  padding: 12px 16px;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  color: #64748b;
}
.formulamathsclasstwelth-nav-button:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.formulamathsclasstwelth-nav-button.active {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 500;
}
.formulamathsclasstwelth-main-content {
  display: flex;
  flex-direction: column;
}
.formulamathsclasstwelth-search-bar {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
  margin-bottom: 25px;
  overflow: hidden;
}
.formulamathsclasstwelth-search-input-wrapper {
  position: relative;
  padding: 20px;
}
.formulamathsclasstwelth-search-icon {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
}
.formulamathsclasstwelth-search-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 12px 16px 12px 40px;
  font-size: 1rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.formulamathsclasstwelth-search-input:focus {
  border-color: #3b82f6;
  background: white;
}
.formulamathsclasstwelth-section-header {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
  margin-bottom: 25px;
}
.formulamathsclasstwelth-section-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}
.formulamathsclasstwelth-formula-count {
  color: #64748b;
  font-size: 0.95rem;
  margin: 0;
}
.formulamathsclasstwelth-formula-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}
.formulamathsclasstwelth-formula-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
  padding: 25px;
  transition: all 0.2s;
}
.formulamathsclasstwelth-formula-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.formulamathsclasstwelth-formula-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 16px 0;
}
.formulamathsclasstwelth-formula-expression {
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 20px;
  margin: 16px 0;
  text-align: center;
}
.formulamathsclasstwelth-formula-text {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1e40af;
  margin: 0;
}
.formulamathsclasstwelth-conditions-section {
  margin-bottom: 16px;
}
.formulamathsclasstwelth-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.formulamathsclasstwelth-conditions-text {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #475569;
  margin: 0;
}
.formulamathsclasstwelth-example-section {
  margin-bottom: 0;
}
.formulamathsclasstwelth-example-text {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #15803d;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  margin: 0;
}
.formulamathsclasstwelth-pagination {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.formulamathsclasstwelth-pagination-button {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 8px;
}
.formulamathsclasstwelth-pagination-button:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.formulamathsclasstwelth-pagination-dots {
  display: flex;
  gap: 8px;
}
.formulamathsclasstwelth-pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s;
}
.formulamathsclasstwelth-pagination-dot.active {
  background: #3b82f6;
  transform: scale(1.25);
}
.formulamathsclasstwelth-pagination-dot:hover {
  background: #94a3b8;
}
/* Media Queries */
@media (max-width: 1024px) {
  .formulamathsclasstwelth-layout {
    grid-template-columns: 1fr;
  }
  
  .formulamathsclasstwelth-sidebar {
    position: static;
  }
  
  .formulamathsclasstwelth-nav-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .formulamathsclasstwelth-formula-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .formulamathsclasstwelth-main-container {
    padding: 15px;
  }
  
  .formulamathsclasstwelth-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .formulamathsclasstwelth-pagination {
    flex-direction: column;
    gap: 15px;
  }
}
/* ============================================
   PREVIOUS YEAR PAPER SOLUTION - ENHANCED CSS
   With Light/Dark Theme Support
   ============================================ */
/* CSS Variables for Light Theme */
:root {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --bg-header: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-inverse: #ffffff;
  
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-strong: #94a3b8;
  
  --accent-primary: #6366f1;
  --accent-secondary: #8b5cf6;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-info: #3b82f6;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}
/* Dark Theme Variables */
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --bg-header: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;
  
  --border-light: #334155;
  --border-medium: #475569;
  --border-strong: #64748b;
  
  --accent-primary: #818cf8;
  --accent-secondary: #a78bfa;
  --accent-success: #34d399;
  --accent-warning: #fbbf24;
  --accent-info: #60a5fa;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Main Container */
.PreviousYearPaperSolution-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  transition: background var(--transition-normal), color var(--transition-normal);
}
/* Header Section */
.PreviousYearPaperSolution-header {
  background: var(--bg-header);
  color: var(--text-inverse);
  padding: 32px 24px;
  box-shadow: var(--shadow-md);
}
.PreviousYearPaperSolution-header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.PreviousYearPaperSolution-header-left {
  flex: 1;
  min-width: 300px;
}
.PreviousYearPaperSolution-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.PreviousYearPaperSolution-meta {
  display: flex;
  gap: 24px;
  font-size: 14px;
  opacity: 0.95;
  flex-wrap: wrap;
}
.PreviousYearPaperSolution-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}
/* Theme Toggle Button */
.PreviousYearPaperSolution-theme-toggle {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  padding: 10px 18px;
  border-radius: 24px;
  cursor: pointer;
  font-size: 20px;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-inverse);
  font-weight: 600;
  backdrop-filter: blur(10px);
}
.PreviousYearPaperSolution-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Main Layout */
.PreviousYearPaperSolution-main {
  display: flex;
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  gap: 24px;
  padding: 24px;
}
/* Sidebar */
.PreviousYearPaperSolution-sidebar {
  width: 320px;
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-md);
  height: -moz-fit-content;
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
}
/* Section Navigation */
.PreviousYearPaperSolution-section-nav {
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border-light);
}
.PreviousYearPaperSolution-section-nav h3 {
  font-size: 12px;
  margin: 0 0 16px 0;
  color: var(--text-tertiary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.PreviousYearPaperSolution-section-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-light);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
}
.PreviousYearPaperSolution-section-btn:hover {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border-color: var(--accent-primary);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}
.PreviousYearPaperSolution-section-name {
  font-weight: 600;
}
.PreviousYearPaperSolution-section-marks {
  background: var(--bg-primary);
  color: var(--accent-primary);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.PreviousYearPaperSolution-section-btn:hover .PreviousYearPaperSolution-section-marks {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-inverse);
}
/* Question List */
.PreviousYearPaperSolution-question-list h3 {
  font-size: 12px;
  margin: 0 0 16px 0;
  color: var(--text-tertiary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.PreviousYearPaperSolution-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 8px;
}
.PreviousYearPaperSolution-list::-webkit-scrollbar {
  width: 6px;
}
.PreviousYearPaperSolution-list::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 10px;
}
.PreviousYearPaperSolution-list::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 10px;
}
.PreviousYearPaperSolution-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}
.PreviousYearPaperSolution-list-item {
  aspect-ratio: 1;
  border: 2px solid var(--border-light);
  background: var(--bg-tertiary);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all var(--transition-normal);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: inherit;
}
.PreviousYearPaperSolution-list-item:hover {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: var(--text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.PreviousYearPaperSolution-list-item.active {
  background: var(--bg-gradient);
  color: var(--text-inverse);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}
.PreviousYearPaperSolution-q-num {
  font-weight: 700;
  font-size: 14px;
}
.PreviousYearPaperSolution-q-marks {
  font-size: 10px;
  opacity: 0.8;
}
/* Main Content Area */
.PreviousYearPaperSolution-content {
  flex: 1;
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow-md);
  min-height: -moz-fit-content;
  min-height: fit-content;
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
}
.PreviousYearPaperSolution-question-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Question Header */
.PreviousYearPaperSolution-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  border-left: 4px solid var(--accent-primary);
  transition: all var(--transition-normal);
}
.PreviousYearPaperSolution-header-left,
.PreviousYearPaperSolution-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.PreviousYearPaperSolution-header-left {
  flex: 1;
}
.PreviousYearPaperSolution-q-number {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.PreviousYearPaperSolution-section-tag {
  background: var(--accent-primary);
  color: var(--text-inverse);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.PreviousYearPaperSolution-q-type {
  background: var(--accent-warning);
  color: #7c2d12;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
[data-theme="dark"] .PreviousYearPaperSolution-q-type {
  color: #fef3c7;
}
.PreviousYearPaperSolution-q-marks-large {
  background: var(--bg-gradient);
  color: var(--text-inverse);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
/* Question Text */
.PreviousYearPaperSolution-question-text {
  background: var(--bg-primary);
  padding: 28px;
  border-radius: 12px;
  border: 2px solid var(--border-light);
  transition: all var(--transition-normal);
}
.PreviousYearPaperSolution-question-text h2 {
  font-size: 13px;
  color: var(--accent-primary);
  margin: 0 0 16px 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.PreviousYearPaperSolution-question-text p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  color: var(--text-primary);
  font-weight: 500;
}
/* Options Display for MCQ */
.PreviousYearPaperSolution-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.PreviousYearPaperSolution-option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border: 2px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-tertiary);
  transition: all var(--transition-normal);
  cursor: pointer;
}
.PreviousYearPaperSolution-option:hover {
  border-color: var(--accent-primary);
  background: var(--bg-primary);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}
.PreviousYearPaperSolution-option.correct-answer {
  border-color: var(--accent-success);
  background: var(--bg-primary);
  position: relative;
}
[data-theme="dark"] .PreviousYearPaperSolution-option.correct-answer {
  background: rgba(16, 185, 129, 0.1);
}
.PreviousYearPaperSolution-option-label {
  font-weight: 700;
  color: var(--accent-primary);
  min-width: 28px;
  text-align: center;
  font-size: 16px;
}
.PreviousYearPaperSolution-option.correct-answer .PreviousYearPaperSolution-option-label {
  color: var(--accent-success);
}
.PreviousYearPaperSolution-option-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-primary);
}
.PreviousYearPaperSolution-correct-badge {
  background: var(--accent-success);
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto;
  box-shadow: var(--shadow-sm);
}
/* Solution Container */
.PreviousYearPaperSolution-solution-container {
  margin: 0;
}
.PreviousYearPaperSolution-solution-container.hidden {
  display: none;
}
.PreviousYearPaperSolution-solution {
  border: 2px solid var(--accent-success);
  border-radius: 12px;
  overflow: hidden;
  animation: slideDown 0.4s ease;
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-md);
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.PreviousYearPaperSolution-solution-header {
  background: var(--accent-success);
  color: white;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.PreviousYearPaperSolution-solution-header::before {
  content: "✓";
  font-size: 20px;
  font-weight: 700;
}
.PreviousYearPaperSolution-solution-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.PreviousYearPaperSolution-solution-content {
  padding: 24px;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.8;
  background: var(--bg-primary);
}
.PreviousYearPaperSolution-solution-content p {
  margin: 0;
  font-family: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* Action Buttons */
.PreviousYearPaperSolution-action-buttons {
  display: flex;
  gap: 16px;
  padding-top: 24px;
  border-top: 2px solid var(--border-light);
}
.PreviousYearPaperSolution-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
}
.PreviousYearPaperSolution-solution-btn {
  background: var(--bg-gradient);
  color: var(--text-inverse);
  flex: 1;
  box-shadow: var(--shadow-sm);
}
.PreviousYearPaperSolution-solution-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}
.PreviousYearPaperSolution-solution-btn:active {
  transform: translateY(0);
}
/* Navigation */
.PreviousYearPaperSolution-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  border-top: 2px solid var(--border-light);
}
.PreviousYearPaperSolution-nav-btn {
  padding: 14px 28px;
  border: 2px solid var(--border-medium);
  background: var(--bg-tertiary);
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  transition: all var(--transition-normal);
  flex: 1;
  font-family: inherit;
}
.PreviousYearPaperSolution-nav-btn:hover:not(:disabled) {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: var(--text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.PreviousYearPaperSolution-nav-btn:active:not(:disabled) {
  transform: translateY(0);
}
.PreviousYearPaperSolution-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--text-tertiary);
}
.PreviousYearPaperSolution-progress {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: -moz-fit-content;
  min-width: fit-content;
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border-radius: 20px;
}
/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1200px) {
  .PreviousYearPaperSolution-main {
    gap: 20px;
    padding: 20px;
  }

  .PreviousYearPaperSolution-sidebar {
    width: 280px;
  }

  .PreviousYearPaperSolution-content {
    padding: 32px;
  }
}
@media (max-width: 1024px) {
  .PreviousYearPaperSolution-main {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }

  .PreviousYearPaperSolution-sidebar {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .PreviousYearPaperSolution-content {
    padding: 28px;
  }

  .PreviousYearPaperSolution-list {
    grid-template-columns: repeat(5, 1fr);
    max-height: 250px;
  }
}
@media (max-width: 768px) {
  .PreviousYearPaperSolution-title {
    font-size: 24px;
  }

  .PreviousYearPaperSolution-meta {
    gap: 12px;
    font-size: 12px;
  }

  .PreviousYearPaperSolution-header {
    padding: 24px 16px;
  }

  .PreviousYearPaperSolution-sidebar {
    grid-template-columns: 1fr;
  }

  .PreviousYearPaperSolution-content {
    padding: 24px;
  }

  .PreviousYearPaperSolution-question-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .PreviousYearPaperSolution-header-right {
    width: 100%;
    justify-content: space-between;
  }

  .PreviousYearPaperSolution-question-text {
    padding: 20px;
  }

  .PreviousYearPaperSolution-question-text p {
    font-size: 15px;
  }

  .PreviousYearPaperSolution-option {
    padding: 14px;
    gap: 12px;
  }

  .PreviousYearPaperSolution-option-text {
    font-size: 14px;
  }

  .PreviousYearPaperSolution-navigation {
    flex-direction: column;
    gap: 12px;
  }

  .PreviousYearPaperSolution-nav-btn {
    width: 100%;
  }

  .PreviousYearPaperSolution-progress {
    width: 100%;
    text-align: center;
  }

  .PreviousYearPaperSolution-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
}
@media (max-width: 480px) {
  .PreviousYearPaperSolution-header {
    padding: 20px 12px;
  }

  .PreviousYearPaperSolution-title {
    font-size: 20px;
  }

  .PreviousYearPaperSolution-meta {
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
  }

  .PreviousYearPaperSolution-main {
    padding: 12px;
  }

  .PreviousYearPaperSolution-content {
    padding: 20px;
    border-radius: 12px;
  }

  .PreviousYearPaperSolution-question-text {
    padding: 16px;
  }

  .PreviousYearPaperSolution-question-text h2 {
    font-size: 12px;
  }

  .PreviousYearPaperSolution-question-text p {
    font-size: 14px;
  }

  .PreviousYearPaperSolution-option {
    padding: 12px;
    gap: 10px;
  }

  .PreviousYearPaperSolution-option-label {
    min-width: 24px;
  }

  .PreviousYearPaperSolution-option-text {
    font-size: 13px;
  }

  .PreviousYearPaperSolution-btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .PreviousYearPaperSolution-nav-btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .PreviousYearPaperSolution-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }

  .PreviousYearPaperSolution-solution-content {
    padding: 16px;
    font-size: 13px;
  }
}
/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .PreviousYearPaperSolution-sidebar {
    display: none;
  }

  .PreviousYearPaperSolution-theme-toggle {
    display: none;
  }

  .PreviousYearPaperSolution-main {
    margin: 0;
    padding: 0;
  }

  .PreviousYearPaperSolution-content {
    padding: 0;
    box-shadow: none;
  }
}