*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--color-bg: #0f1117;--color-surface: #1a1d26;--color-surface-2: #22263a;--color-border: #2d3248;--color-text: #e2e5f0;--color-text-muted: #8990aa;--color-text-faint: #4a506a;--color-accent: #6c8fff;--color-accent-hover: #8ca8ff;--color-correct: #4ade80;--color-incorrect: #f87171;--color-warning: #fbbf24;--stage-1: #a78bfa;--stage-2: #60a5fa;--stage-3: #34d399;--stage-4: #f59e0b;--stage-5: #f472b6;--radius: 8px;--radius-lg: 12px;--shadow: 0 2px 16px rgba(0, 0, 0, .4)}html,body{height:100%;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4{line-height:1.3;color:var(--color-text)}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-hover)}.container{max-width:760px;margin:0 auto;padding:0 24px;width:100%}.disclaimer-banner{background:#fbbf241a;border-bottom:1px solid rgba(251,191,36,.25);padding:8px 24px;font-size:12px;color:var(--color-warning);text-align:center;letter-spacing:.02em}.app-header{border-bottom:1px solid var(--color-border);padding:16px 24px}.app-header__inner{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.app-header__title{font-size:18px;font-weight:700;color:var(--color-accent);letter-spacing:-.02em}.app-header__subtitle{font-size:12px;color:var(--color-text-muted);margin-top:2px}.nav{display:flex;gap:8px;flex-wrap:wrap}.nav-btn{padding:6px 14px;border-radius:var(--radius);border:1px solid var(--color-border);background:transparent;color:var(--color-text-muted);font-size:13px;cursor:pointer;transition:all .15s}.nav-btn:hover{border-color:var(--color-accent);color:var(--color-text)}.nav-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.main-content{flex:1;padding:32px 24px}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow)}.session-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;font-size:13px;color:var(--color-text-muted)}.session-progress-bar{width:100%;height:3px;background:var(--color-surface-2);border-radius:2px;margin-bottom:28px;overflow:hidden}.session-progress-bar__fill{height:100%;background:var(--color-accent);border-radius:2px;transition:width .3s ease}.framework-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--color-surface-2);color:var(--color-text-muted);margin-bottom:16px}.difficulty-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.04em;margin-left:6px}.difficulty-badge.easy{background:#4ade801f;color:#4ade80}.difficulty-badge.medium{background:#fbbf241f;color:#fbbf24}.difficulty-badge.hard{background:#f871711f;color:#f87171}.prompt-text{font-size:16px;line-height:1.75;color:var(--color-text);margin-bottom:28px;padding:20px;background:var(--color-surface-2);border-left:3px solid var(--color-accent);border-radius:0 var(--radius) var(--radius) 0;font-style:italic}.stage-choices{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.stage-choice-btn{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:14px;line-height:1.5;cursor:pointer;text-align:left;transition:all .15s}.stage-choice-btn:hover:not(:disabled){border-color:var(--color-accent);background:#6c8fff14}.stage-choice-btn.selected{border-color:var(--color-accent);background:#6c8fff26}.stage-choice-btn:disabled{cursor:not-allowed;opacity:.7}.stage-pill{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:6px;font-size:13px;font-weight:700;flex-shrink:0}.stage-pill[data-stage="1"]{background:#a78bfa2e;color:var(--stage-1)}.stage-pill[data-stage="2"]{background:#60a5fa2e;color:var(--stage-2)}.stage-pill[data-stage="3"]{background:#34d3992e;color:var(--stage-3)}.stage-pill[data-stage="4"]{background:#f59e0b2e;color:var(--stage-4)}.stage-pill[data-stage="5"]{background:#f472b62e;color:var(--stage-5)}.stage-choice-label{font-weight:600;display:block;margin-bottom:1px}.stage-choice-sub{font-size:12px;color:var(--color-text-muted)}.submit-btn{width:100%;padding:14px;border-radius:var(--radius);border:none;background:var(--color-accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s}.submit-btn:hover:not(:disabled){background:var(--color-accent-hover)}.submit-btn:disabled{opacity:.4;cursor:not-allowed}.feedback-result{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:var(--radius);margin-bottom:24px;font-size:16px;font-weight:700}.feedback-result.correct{background:#4ade801a;border:1px solid rgba(74,222,128,.3);color:var(--color-correct)}.feedback-result.incorrect{background:#f871711a;border:1px solid rgba(248,113,113,.3);color:var(--color-incorrect)}.feedback-result-icon{font-size:22px}.feedback-stage-line{font-size:14px;color:var(--color-text-muted);margin-bottom:20px}.feedback-explanation{background:var(--color-surface-2);border-radius:var(--radius);padding:18px 20px;font-size:14px;line-height:1.75;color:var(--color-text);margin-bottom:24px;border-left:3px solid var(--color-accent)}.feedback-explanation strong{color:var(--color-accent)}.feedback-actions{display:flex;gap:10px;flex-wrap:wrap}.btn{padding:11px 22px;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid var(--color-border)}.btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.btn-secondary{background:transparent;color:var(--color-text-muted)}.btn-secondary:hover{color:var(--color-text);border-color:var(--color-accent)}.session-complete{text-align:center}.score-circle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:120px;border-radius:50%;border:3px solid var(--color-accent);margin:24px auto}.score-circle__pct{font-size:28px;font-weight:800;color:var(--color-accent)}.score-circle__label{font-size:11px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.stage-breakdown{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:24px 0}.stage-breakdown-item{background:var(--color-surface-2);border-radius:var(--radius);padding:14px 8px;text-align:center}.stage-breakdown-item__label{font-size:11px;color:var(--color-text-muted);margin-bottom:6px}.stage-breakdown-item__bar{height:4px;background:var(--color-border);border-radius:2px;margin:6px 0 4px;overflow:hidden}.stage-breakdown-item__bar-fill{height:100%;border-radius:2px;transition:width .4s ease}.stage-breakdown-item__count{font-size:12px;color:var(--color-text-muted)}.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;text-align:center}.stat-card__value{font-size:32px;font-weight:800;color:var(--color-accent);line-height:1;margin-bottom:6px}.stat-card__label{font-size:12px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.section-title{font-size:14px;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}.by-stage-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}.by-stage-row{display:flex;align-items:center;gap:14px}.by-stage-row__label{width:120px;font-size:13px;color:var(--color-text-muted);flex-shrink:0}.by-stage-row__bar-wrap{flex:1;height:6px;background:var(--color-surface-2);border-radius:3px;overflow:hidden}.by-stage-row__bar-fill{height:100%;border-radius:3px;transition:width .4s ease}.by-stage-row__pct{width:44px;text-align:right;font-size:13px;color:var(--color-text-muted)}.rubric-list{display:flex;flex-direction:column;gap:16px}.rubric-item{background:var(--color-surface-2);border-radius:var(--radius-lg);padding:20px;border-left:4px solid}.rubric-item[data-stage="1"]{border-left-color:var(--stage-1)}.rubric-item[data-stage="2"]{border-left-color:var(--stage-2)}.rubric-item[data-stage="3"]{border-left-color:var(--stage-3)}.rubric-item[data-stage="4"]{border-left-color:var(--stage-4)}.rubric-item[data-stage="5"]{border-left-color:var(--stage-5)}.rubric-item__header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.rubric-item__title{font-size:16px;font-weight:700}.rubric-item__frameworks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.rubric-item__fw-tag{padding:2px 8px;border-radius:4px;font-size:11px;background:var(--color-surface);color:var(--color-text-muted);border:1px solid var(--color-border)}.rubric-item__summary{font-size:14px;line-height:1.7;color:var(--color-text);margin-bottom:10px}.rubric-item__example{font-size:13px;color:var(--color-text-muted);font-style:italic;padding:10px 14px;background:var(--color-surface);border-radius:6px}.empty-state{text-align:center;padding:40px 0;color:var(--color-text-muted)}.empty-state h3{font-size:18px;color:var(--color-text);margin-bottom:8px}.intro-hero{text-align:center;padding:48px 0 32px}.intro-hero h2{font-size:26px;font-weight:800;margin-bottom:12px;letter-spacing:-.02em}.intro-hero p{font-size:15px;color:var(--color-text-muted);max-width:480px;margin:0 auto 28px;line-height:1.7}.intro-hero .start-btn{padding:14px 36px;font-size:16px;font-weight:700;border-radius:var(--radius-lg);border:none;background:var(--color-accent);color:#fff;cursor:pointer;transition:background .15s,transform .1s}.intro-hero .start-btn:hover{background:var(--color-accent-hover);transform:translateY(-1px)}.intro-frameworks{display:flex;justify-content:center;gap:20px;margin:24px 0;flex-wrap:wrap}.intro-fw-tag{padding:4px 12px;border-radius:20px;font-size:13px;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted)}@media(max-width:600px){.dashboard-grid{grid-template-columns:1fr 1fr}.stage-breakdown{grid-template-columns:repeat(3,1fr)}.app-header__inner{flex-direction:column;align-items:flex-start}.card{padding:20px}}