:root{--primary: #5046e5;--primary-hover: #4338ca;--primary-light: #e0e7ff;--accent: #06b6d4;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--white: #ffffff;--gray-50: #fafafa;--gray-100: #f4f4f5;--gray-200: #e4e4e7;--gray-300: #d4d4d8;--gray-400: #a1a1aa;--gray-500: #71717a;--gray-600: #52525b;--gray-700: #3f3f46;--gray-800: #27272a;--gray-900: #18181b;--sidebar-width: 56px;--sidebar-expanded: 200px;--text-2xs: .625rem;--text-xs: .6875rem;--text-sm: .75rem;--text-base: .8125rem;--text-lg: .875rem;--text-xl: 1rem;--text-2xl: 1.25rem;--text-3xl: 1.5rem;--space-0: 0;--space-px: 1px;--space-0-5: .125rem;--space-1: .25rem;--space-1-5: .375rem;--space-2: .5rem;--space-2-5: .625rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;font-size:var(--text-base);line-height:1.4;color:var(--gray-900);background:var(--white)}.app-container{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--gray-50);border-right:1px solid var(--gray-200);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;overflow-x:hidden;transition:width .2s ease;z-index:40}.sidebar:hover{width:var(--sidebar-expanded);box-shadow:var(--shadow-md)}.sidebar-header{height:48px;display:flex;align-items:center;padding:0 var(--space-2);border-bottom:1px solid var(--gray-200)}.sidebar-logo{display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}.logo-icon{width:24px;height:24px;background:var(--primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);color:var(--white);font-weight:600;flex-shrink:0}.logo-icon-svg{width:24px;height:24px;flex-shrink:0;opacity:.9}.logo-text{opacity:0;transition:opacity .15s}.sidebar:hover .logo-text{opacity:1}.logo-title{font-size:var(--text-xs);font-weight:600;color:var(--gray-900);line-height:1}.logo-subtitle{font-size:var(--text-2xs);color:var(--gray-500);line-height:1;margin-top:2px}.nav-section{padding:var(--space-1) 0}.nav-section-title{padding:var(--space-1) var(--space-2);font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);opacity:0;transition:opacity .15s;height:20px}.sidebar:hover .nav-section-title{opacity:1}.nav-item{display:flex;align-items:center;height:28px;padding:0 var(--space-2);color:var(--gray-600);text-decoration:none;font-size:var(--text-2xs);font-weight:400;transition:all .15s;position:relative;cursor:pointer}.nav-item:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:0;background:var(--primary);transition:height .15s}.nav-item:hover{background:var(--gray-100);color:var(--gray-900)}.nav-item.active{background:var(--primary-light);color:var(--primary)}.nav-item.active:before{height:14px}.nav-item.locked{opacity:.4;cursor:not-allowed}.nav-item-content{display:flex;align-items:center;gap:var(--space-2);width:100%}.nav-item-icon{width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);flex-shrink:0}.nav-chapter-title{font-size:var(--text-2xs);font-weight:400;opacity:0;transition:opacity .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar:hover .nav-chapter-title{opacity:1}.lock-icon{font-size:var(--text-2xs);margin-left:auto;opacity:.5}.nav-footer{padding:var(--space-2);border-top:1px solid var(--gray-200);margin-top:auto}.progress-section{display:none}.sidebar:hover .progress-section{display:block}.progress-title{font-size:var(--text-2xs);color:var(--gray-500);font-weight:500;margin-bottom:var(--space-0-5)}.quiz-progress .progress-bar{height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden;margin-bottom:var(--space-2);max-width:300px;margin-left:auto;margin-right:auto}.quiz-progress .progress-fill{height:100%;background:var(--primary);transition:width .4s ease}.quiz-progress .progress-text{font-size:var(--text-sm);color:var(--gray-600);font-weight:500}.main-content{margin-left:var(--sidebar-width);flex:1;min-height:100vh;transition:margin-left .2s}.sidebar:hover~.main-content{margin-left:var(--sidebar-expanded)}.content-container{max-width:1200px;margin:0 auto;padding:var(--space-4) var(--space-5)}.chapter{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.chapter-header{margin-bottom:var(--space-8);max-width:640px}.chapter-number{font-size:var(--text-2xs);font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin-bottom:var(--space-2)}.chapter-title{font-size:var(--text-2xl);font-weight:600;color:var(--gray-900);line-height:1.3;margin-bottom:var(--space-3);display:block}.chapter-intro{font-size:var(--text-base);color:var(--gray-600);font-weight:400;line-height:1.5;margin:0}.intro-card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-3)}.intro-card h2{font-size:var(--text-xl);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-2)}.intro-card p{font-size:var(--text-base);line-height:1.5;color:var(--gray-700);margin-bottom:var(--space-2)}.intro-card p:last-child{margin-bottom:0}.section{margin-bottom:var(--space-6)}.section h2{font-size:var(--text-xl);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-3)}.fun-types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-3);margin-top:var(--space-3)}.fun-type-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--space-3);cursor:pointer;transition:all .15s;position:relative}.fun-type-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}.fun-type-card.selected{background:var(--primary-light);border-color:var(--primary)}.fun-type-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.fun-type-icon{width:24px;height:24px;background:var(--primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);color:var(--white)}.fun-type-name{font-size:var(--text-lg);font-weight:600;color:var(--gray-900)}.fun-type-video{margin:var(--space-2) 0;border-radius:var(--radius-sm);overflow:hidden;background:var(--gray-100)}.fun-type-video video{width:100%;height:auto;max-height:200px;object-fit:cover;border:none;border-radius:var(--radius-sm);background:var(--gray-900)}.fun-type-video video:focus{outline:2px solid var(--primary);outline-offset:2px}.fun-type-description{font-size:var(--text-sm);color:var(--gray-600);line-height:1.4;margin-bottom:var(--space-2)}.fun-type-example{font-size:var(--text-xs);color:var(--gray-500);padding:var(--space-1-5);background:var(--gray-50);border-radius:var(--radius-sm);border-left:2px solid var(--primary)}.selected-indicator{position:absolute;top:var(--space-2);right:var(--space-2);background:var(--success);color:var(--white);padding:2px 6px;border-radius:var(--radius-sm);font-size:var(--text-2xs);font-weight:600}.personality-result{margin-top:var(--space-4);padding:var(--space-3);background:var(--primary-light);border-radius:var(--radius-md);border:1px solid var(--primary)}.result-card{background:var(--white);padding:var(--space-3);border-radius:var(--radius-sm);margin-top:var(--space-2)}.selected-types-list{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2)}.selected-type-badge{background:var(--primary);color:var(--white);padding:var(--space-0-5) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500}.reference-section{background:var(--gray-50);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--gray-200);margin-top:var(--space-3)}.reference-button{padding:var(--space-1-5) var(--space-3);background:var(--primary);color:var(--white);border:none;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .15s}.reference-button:hover{background:var(--primary-hover)}.pdf-info{margin-top:var(--space-3)}.pdf-card{background:var(--white);padding:var(--space-3);border-radius:var(--radius-sm);border-left:2px solid var(--primary)}.pdf-card h4{font-size:var(--text-lg);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-2)}.pdf-card ul{margin:var(--space-2) 0;padding-left:var(--space-4)}.pdf-card li{font-size:var(--text-sm);margin-bottom:var(--space-1)}.pdf-note{background:var(--gray-50);padding:var(--space-2);border-radius:var(--radius-sm);margin-top:var(--space-2);font-size:var(--text-sm);font-style:italic}.demo-selector{margin-bottom:var(--space-4);text-align:center}.demo-buttons{display:flex;gap:var(--space-1);margin-top:var(--space-2);justify-content:center}.demo-button{padding:var(--space-1-5) var(--space-3);background:var(--white);color:var(--gray-700);border:1px solid var(--gray-300);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .15s}.demo-button:hover{border-color:var(--primary);color:var(--primary)}.demo-button.active{background:var(--primary);color:var(--white);border-color:var(--primary)}.concept-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-3)}.challenge-card{border-left:3px solid var(--error)}.discovery-card{border-left:3px solid var(--success)}.cycle-card{border-left:3px solid var(--primary)}.concept-definition{background:var(--gray-50);padding:var(--space-2);border-radius:var(--radius-sm);margin-bottom:var(--space-2)}.concept-definition p{font-size:var(--text-base);font-weight:500;margin:0}.examples-section{margin-bottom:var(--space-2)}.examples-section h4{font-size:var(--text-lg);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-2)}.examples-list{display:flex;flex-direction:column;gap:var(--space-1)}.example-item{font-size:var(--text-sm);background:var(--gray-50);padding:var(--space-2);border-radius:var(--radius-sm);border-left:2px solid var(--primary)}.key-insight{background:var(--primary-light);padding:var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--primary)}.key-insight h4{font-size:var(--text-base);font-weight:600;color:var(--primary);margin-bottom:var(--space-1)}.key-insight p{font-size:var(--text-sm);margin:0}.cycle-flow{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-3) 0}.cycle-step{flex:1;max-width:160px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--space-2);text-align:center}.step-number{width:20px;height:20px;background:var(--primary);color:var(--white);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-2xs);font-weight:600;margin-bottom:var(--space-1)}.cycle-step h4{font-size:var(--text-sm);font-weight:600;color:var(--gray-900);margin-bottom:2px}.cycle-step p{font-size:var(--text-xs);color:var(--gray-600)}.arrow{color:var(--gray-400);font-size:var(--text-lg)}.cycle-explanation{margin-top:var(--space-3)}.cycle-explanation ul{padding-left:var(--space-4)}.cycle-explanation li{font-size:var(--text-sm);margin-bottom:var(--space-1)}.real-example{margin-top:var(--space-3)}.mario-example{background:var(--gray-50);padding:var(--space-2);border-radius:var(--radius-sm);margin-top:var(--space-2)}.mario-example p{font-size:var(--text-sm);margin-bottom:var(--space-1);font-family:monospace}.importance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-3)}.importance-card{background:var(--gray-50);padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--gray-200);text-align:center}.importance-card h3{font-size:var(--text-base);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-1)}.importance-card p{font-size:var(--text-sm);color:var(--gray-600)}.quiz-progress{margin:0 auto var(--space-8);max-width:900px}.progress-bar{height:8px;background:var(--gray-100);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-3);box-shadow:inset 0 1px 3px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);transition:width .3s ease;border-radius:var(--radius-full)}.progress-text{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm);color:var(--gray-600);font-weight:500}.progress-text strong{color:var(--primary)}.quiz-question{display:flex;justify-content:center;padding:0 var(--space-4)}.question-card{background:var(--white);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-10);max-width:900px;width:100%;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.question-number-badge{display:inline-block;background:var(--primary-light);color:var(--primary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4)}.question-text{font-size:var(--text-2xl);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-8);line-height:1.5;text-align:left}.answer-options{display:flex;flex-direction:column;gap:var(--space-3)}.answer-button{display:flex;align-items:center;padding:var(--space-4) var(--space-5);background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius-lg);text-align:left;font-size:var(--text-base);font-weight:500;color:var(--gray-700);cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.answer-button:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:background .2s ease}.answer-button:hover:not(:disabled){border-color:var(--primary);background:var(--primary-light);color:var(--gray-900);transform:translate(4px)}.answer-button:hover:not(:disabled):before{background:var(--primary)}.answer-button:active:not(:disabled){transform:translate(4px) scale(.98)}.answer-button.selected{border-color:var(--primary);background:var(--primary);color:var(--white)}.answer-button:disabled{opacity:.6;cursor:not-allowed}.feedback-card{position:relative}.feedback-header{margin-bottom:var(--space-6)}.feedback-icon{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;margin:0 auto var(--space-4);font-size:2.5rem}.feedback-header.correct .feedback-icon{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 10px 25px -5px #10b9814d}.feedback-header.incorrect .feedback-icon{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 10px 25px -5px #f59e0b4d}.feedback-title{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-2);color:var(--gray-900)}.feedback-content{margin-bottom:var(--space-6);max-width:540px;margin-left:auto;margin-right:auto}.feedback-content p{font-size:var(--text-base);line-height:1.6;margin-bottom:var(--space-3);color:var(--gray-700)}.feedback-content p strong{color:var(--gray-900);font-weight:600}.explanation{background:linear-gradient(135deg,var(--primary-light) 0%,rgba(80,70,229,.05) 100%);padding:var(--space-4);border-radius:var(--radius-lg);border-left:4px solid var(--primary);margin-top:var(--space-4);font-size:var(--text-base);line-height:1.6;color:var(--gray-700)}.encouragement{display:inline-block;background:var(--success);color:var(--white);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-weight:600;font-size:var(--text-sm);margin-top:var(--space-3)}.next-button{padding:var(--space-3) var(--space-8);background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);color:var(--white);border:none;border-radius:var(--radius-full);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 6px -1px #5046e54d;display:inline-flex;align-items:center;gap:var(--space-2)}.next-button:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #5046e54d}.next-button:active{transform:translateY(0)}.quiz-results{max-width:1000px;margin:0 auto;padding:0}.score-card{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:var(--white);padding:var(--space-8);border-radius:var(--radius-xl);text-align:center;margin-bottom:var(--space-6);box-shadow:0 20px 25px -5px #5046e54d}.score-emoji{font-size:4rem;margin-bottom:var(--space-4);display:inline-block;animation:bounce 1s ease}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.score-card h2{font-size:var(--text-3xl);margin-bottom:var(--space-2);font-weight:700}.score-card p{font-size:var(--text-lg);opacity:.95;max-width:400px;margin:0 auto}.questions-review{text-align:left}.questions-review h3{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-5);color:var(--gray-900);display:flex;align-items:center;gap:var(--space-2)}.question-review{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);transition:all .2s ease;position:relative;overflow:hidden}.question-review:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}.question-review.correct:before{background:var(--success)}.question-review.incorrect:before{background:var(--warning)}.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}.question-number{display:inline-flex;align-items:center;justify-content:center;background:var(--gray-100);color:var(--gray-700);width:28px;height:28px;border-radius:50%;font-size:var(--text-xs);font-weight:600}.result-icon{font-size:var(--text-xl)}.result-icon.correct{color:var(--success)}.result-icon.incorrect{color:var(--warning)}.question-text{font-size:var(--text-base);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-3);line-height:1.5}.answer-info{font-size:var(--text-sm);margin-bottom:var(--space-3);padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-md)}.answer-info p{margin-bottom:var(--space-1);color:var(--gray-700)}.answer-info p strong{color:var(--gray-900)}.reveal-button{padding:var(--space-2) var(--space-4);background:var(--white);color:var(--primary);border:2px solid var(--primary);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all .2s ease}.reveal-button:hover{background:var(--primary);color:var(--white)}.quiz-actions{text-align:center;margin-top:var(--space-8)}.retry-button{padding:var(--space-3) var(--space-6);background:var(--white);color:var(--primary);border:2px solid var(--primary);border-radius:var(--radius-full);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:var(--space-2)}.retry-button:hover{background:var(--primary);color:var(--white);transform:translateY(-2px)}.game-card{background:var(--gray-50);padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--gray-200);text-align:center;margin-bottom:var(--space-3)}.game-link{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--success);color:var(--white);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);text-decoration:none;font-weight:500;font-size:var(--text-base);transition:all .15s;margin:var(--space-2) 0}.game-link:hover{background:#059669}.game-link-small{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--primary);color:var(--white);padding:var(--space-1-5) var(--space-3);border-radius:var(--radius-sm);text-decoration:none;font-weight:500;font-size:var(--text-sm);transition:all .15s;margin-top:var(--space-2)}.game-link-small:hover{background:var(--primary-hover)}.game-note{font-size:var(--text-sm);color:var(--gray-600);font-style:italic;margin-top:var(--space-2)}.analysis-instructions{background:var(--gray-50);padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--gray-200);margin-bottom:var(--space-3)}.analysis-instructions h3{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-2)}.discovery-examples{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2)}.example-badge{background:var(--white);color:var(--gray-600);padding:var(--space-0-5) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);border:1px solid var(--gray-200)}.analysis-progress{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);padding:var(--space-2);background:var(--gray-50);border-radius:var(--radius-sm)}.progress-info{font-size:var(--text-sm);font-weight:600;color:var(--primary)}.analysis-table{display:flex;flex-direction:column;gap:var(--space-2)}.discovery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin:var(--space-4) 0}.discovery-cell{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--space-2);overflow:hidden}.level-screenshot{margin:calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) var(--space-2);background:var(--gray-100);display:flex;align-items:center;justify-content:center;overflow:hidden}.screenshot-image{width:100%;height:auto;object-fit:contain;border-radius:0}.cell-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-1)}.level-number{font-size:var(--text-xs);font-weight:600;color:var(--gray-700)}.cell-completed{font-size:var(--text-sm);color:var(--success);font-weight:600}.discovery-input{width:100%;padding:var(--space-1-5);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:var(--text-2xs);color:var(--gray-700);resize:vertical;min-height:50px;transition:all .15s}.discovery-input:focus{outline:none;border-color:var(--primary);background:var(--white)}.progress-summary{text-align:center;margin-top:var(--space-2)}.progress-text{font-size:var(--text-sm);font-weight:600;color:var(--primary)}.level-controls{margin-bottom:var(--space-2);display:flex;flex-direction:column;gap:var(--space-1-5)}.checkbox-section{display:flex;align-items:center}.checkbox-label{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-2xs);color:var(--gray-700);cursor:pointer}.mechanic-checkbox{width:14px;height:14px;accent-color:var(--primary)}.difficulty-section{display:flex;align-items:center;gap:var(--space-1)}.difficulty-label{font-size:var(--text-2xs);color:var(--gray-600);font-weight:500}.star-rating{display:flex;gap:2px}.star{background:none;border:none;font-size:var(--text-sm);color:var(--gray-300);cursor:pointer;padding:0;transition:color .15s}.star:hover,.star.active{color:var(--warning)}@media (max-width: 768px){.discovery-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}}.level-analysis{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--space-3)}.level-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.level-header h4{font-size:var(--text-base);font-weight:600;color:var(--gray-900)}.completed-badge{background:var(--success);color:var(--white);padding:2px 6px;border-radius:var(--radius-sm);font-size:var(--text-2xs);font-weight:600}.notes-section label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--gray-700);margin-bottom:var(--space-1)}.notes-textarea{width:100%;padding:var(--space-2);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--gray-700);resize:vertical;min-height:60px;transition:all .15s}.notes-textarea:focus{outline:none;border-color:var(--primary);background:var(--white)}.analysis-summary{background:var(--primary-light);padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--primary);text-align:center;margin-bottom:var(--space-3)}.analysis-summary h2{font-size:var(--text-xl);font-weight:600;margin-bottom:var(--space-1)}.analysis-summary p{font-size:var(--text-sm)}.completion-badge{background:var(--success);color:var(--white);padding:var(--space-3);border-radius:var(--radius-md);margin-top:var(--space-2)}.completion-badge h3{font-size:var(--text-lg);margin-bottom:var(--space-1)}.completion-badge p{font-size:var(--text-sm)}.reflection-questions{display:flex;flex-direction:column;gap:var(--space-2)}.question-card{background:var(--gray-50);padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--gray-200);border-left:3px solid var(--primary)}.question-card h4{font-size:var(--text-base);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-1)}.question-card p{font-size:var(--text-sm);color:var(--gray-600)}.chapter-navigation{margin-top:var(--space-4);padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-md);border:1px solid var(--gray-200);text-align:center}.nav-info{font-size:var(--text-base);font-weight:500;color:var(--gray-600)}.completion-message{font-size:var(--text-base);font-weight:600}.success-message{color:var(--success);background:#10b9811a;padding:var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--success)}.encouragement-message{color:var(--primary)}.chapter-locked{text-align:center;padding:var(--space-8) var(--space-4);background:var(--gray-50);border-radius:var(--radius-md);border:1px solid var(--gray-200)}.chapter-locked .lock-icon{font-size:2rem;margin-bottom:var(--space-2);opacity:.3}.chapter-locked h2{font-size:var(--text-xl);color:var(--gray-600);margin-bottom:var(--space-1)}.chapter-locked p{font-size:var(--text-sm);color:var(--gray-500)}@media (max-width: 768px){.sidebar,.sidebar:hover{width:var(--sidebar-width)}.main-content{margin-left:var(--sidebar-width)}.content-container{padding:var(--space-3) var(--space-2)}.fun-types-grid,.importance-grid{grid-template-columns:1fr}.cycle-flow{flex-direction:column}}@media (min-width: 1400px){.content-container{max-width:1400px}.fun-types-grid{grid-template-columns:repeat(4,1fr)}}.quiz-cover{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-lg)}.quiz-cover-background{position:absolute;inset:0;z-index:1}.quiz-cover-image{width:100%;height:100%;object-fit:cover;object-position:center}.quiz-cover-overlay{position:absolute;inset:0;background:#0000004d}.quiz-cover-content{position:relative;z-index:2;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:var(--space-8);padding:0 var(--space-6)}.quiz-cover-title{font-size:clamp(2.5rem,6vw,3.5rem);font-weight:700;margin:0;text-shadow:2px 4px 8px rgba(0,0,0,.5);line-height:1.2}.quiz-start-button{background:#ffffff26;color:#fff;padding:var(--space-4) var(--space-8);border:2px solid rgba(255,255,255,.3);border-radius:var(--radius-lg);font-size:var(--text-2xl);font-weight:600;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(10px);text-shadow:1px 2px 4px rgba(0,0,0,.3)}.quiz-start-button:hover{background:#ffffff40;border-color:#ffffff80;transform:translateY(-2px)}