.learn-nav{z-index:100;background:#fff;border-bottom:1px solid #e8e8e8;position:-webkit-sticky;position:sticky;top:0;box-shadow:0 2px 8px rgba(0,0,0,.05)}.nav-content{justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;padding:15px 20px;display:flex}.nav-logo{color:#4caf50;font-size:1.5rem;font-weight:700;text-decoration:none}.nav-links{align-items:center;gap:20px;display:flex}.nav-link{color:#666;font-weight:500;text-decoration:none;transition:color .2s}.nav-link:hover{color:#2196f3}.nav-cta{color:#fff;background:linear-gradient(135deg,#4caf50,#45a049);border-radius:6px;padding:8px 16px;font-weight:600;text-decoration:none;transition:all .3s}.nav-cta:hover{background:linear-gradient(135deg,#45a049,#3e8e41);transform:translateY(-1px)}.tutorial-layout{min-height:calc(100vh - 80px);display:flex}.content-panel{background:#f5f5f5;flex:1;max-width:none;padding:40px;overflow-y:auto}.code-panel{background:#1e1e1e;border-left:1px solid #333;flex-direction:column;flex:1;height:calc(100vh - 80px);display:flex;position:-webkit-sticky;position:sticky;top:80px}.hero-section{color:#fff;text-align:center;background:linear-gradient(135deg,#2196f3 0%,#1976d2 100%);margin:-40px -40px 40px;padding:60px 40px}.difficulty-badge{background:rgba(255,255,255,.2);border-radius:20px;margin-bottom:20px;padding:6px 16px;font-size:.9rem;font-weight:500;display:inline-block}.hero-title{margin-bottom:20px;font-size:3rem;font-weight:700}.hero-subtitle{opacity:.9;max-width:800px;margin-bottom:30px;margin-left:auto;margin-right:auto;font-size:1.2rem;line-height:1.6}.section-title{color:#333;border-bottom:3px solid #4caf50;margin-bottom:30px;padding-bottom:10px;font-size:2rem;font-weight:700}.concept-section{margin-bottom:50px}.concept-intro{color:#666;margin-bottom:30px;font-size:1.1rem;line-height:1.6}.function-explanation{background:#fff;border:1px solid #e8e8e8;border-radius:8px;margin-bottom:30px;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.08)}.function-title{color:#2196f3;margin-bottom:15px;font-size:1.5rem;font-weight:600}.function-description{color:#555;margin-bottom:20px;font-size:1rem;line-height:1.6}.syntax-block{color:#495057;background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;margin:20px 0;padding:20px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;overflow-x:auto}.sql-keyword{color:#d73a49;font-weight:600}.sql-function{color:#6f42c1;font-weight:600}.sql-string{color:#032f62}.sql-comment{color:#6a737d;font-style:italic}.sql-number{color:#005cc5}.example-cards{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:25px;margin:30px 0;display:grid}.example-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:25px;transition:all .3s;box-shadow:0 4px 15px rgba(0,0,0,.05)}.example-card:hover{border-color:#2196f3;box-shadow:0 8px 25px rgba(33,150,243,.15)}.example-title{color:#333;margin-bottom:15px;font-size:1.2rem;font-weight:600}.example-scenario{color:#666;margin-bottom:20px;line-height:1.5}.try-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff9800,#e68900);border:none;border-radius:4px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .3s}.try-button:hover{background:linear-gradient(135deg,#e68900,#d68000)}.key-points{background:#e8f5e8;border-left:4px solid #4caf50;border-radius:0 6px 6px 0;margin:20px 0;padding:20px}.key-points h4{color:#2e7d32;margin-bottom:15px;font-size:1.1rem;font-weight:600}.key-points ul{color:#555;padding-left:20px}.key-points li{margin-bottom:8px;line-height:1.5}.comparison-table{border-collapse:collapse;background:#fff;border-radius:6px;width:100%;margin:25px 0;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.05)}.comparison-table th{text-align:left;color:#495057;background:#f8f9fa;border-bottom:1px solid #e9ecef;padding:15px;font-weight:600}.comparison-table td{border-bottom:1px solid #f8f9fa;padding:12px 15px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px}.comparison-table tr:hover{background:#f8f9fa}.practice-callout{text-align:center;background:linear-gradient(135deg,#e8f5e8,#f1f8e9);border:2px solid #4caf50;border-radius:8px;margin:40px 0;padding:30px}.practice-title{color:#2e7d32;margin-bottom:15px;font-size:1.5rem;font-weight:600}.practice-description{color:#555;margin-bottom:25px;line-height:1.6}.cta-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4caf50,#45a049);border:none;border-radius:6px;padding:15px 30px;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block}.cta-button:hover{background:linear-gradient(135deg,#45a049,#3e8e41);transform:translateY(-2px)}.editor-header{color:#fff;background:#2d2d30;border-bottom:1px solid #3e3e42;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.editor-title{font-size:1rem;font-weight:600}.run-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4caf50,#45a049);border:none;border-radius:4px;padding:8px 16px;font-size:.9rem;font-weight:600;transition:all .3s}.run-button:hover{background:linear-gradient(135deg,#45a049,#3e8e41)}.code-editor{color:#d4d4d4;resize:none;background:#1e1e1e;border:none;outline:none;flex:1;padding:20px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.6;overflow-y:auto}.results-section{background:#2d2d30;border-top:1px solid #3e3e42;max-height:300px;overflow-y:auto}.results-header{color:#4caf50;background:#383838;border-bottom:1px solid #3e3e42;padding:12px 20px;font-size:.9rem;font-weight:600}.results-table{border-collapse:collapse;width:100%;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px}.results-table th{color:#fff;text-align:left;background:#404040;border-bottom:1px solid #3e3e42;padding:10px 15px;font-weight:600}.results-table td{color:#d4d4d4;border-bottom:1px solid #3e3e42;padding:8px 15px}.results-table tr:hover{background:rgba(76,175,80,.1)}.breadcrumb-nav{background:#fff;border-bottom:1px solid #e8e8e8;margin-bottom:20px;padding:10px 0}.breadcrumb{color:#666;max-width:1400px;margin:0 auto;padding:0 20px;font-size:.9rem}.breadcrumb a{color:#2196f3;text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.learn-hero{color:#fff;text-align:center;background:linear-gradient(135deg,#4caf50 0%,#45a049 100%);padding:80px 40px}.learn-hero h1{margin-bottom:20px;font-size:3.5rem;font-weight:700}.learn-hero p{opacity:.9;max-width:600px;margin:0 auto;font-size:1.3rem;line-height:1.6}.tutorial-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1400px;margin:0 auto;padding:60px 40px;display:grid}.tutorial-card{color:inherit;background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:30px;text-decoration:none;transition:all .3s;box-shadow:0 6px 30px rgba(0,0,0,.1)}.tutorial-card:hover{border-color:#4caf50;transform:translateY(-4px);box-shadow:0 12px 40px rgba(76,175,80,.15)}.tutorial-level{color:#2e7d32;text-transform:uppercase;letter-spacing:.5px;background:#e8f5e8;border-radius:16px;margin-bottom:15px;padding:4px 12px;font-size:.8rem;font-weight:600;display:inline-block}.tutorial-card h3{color:#333;margin-bottom:12px;font-size:1.4rem;font-weight:600}.tutorial-card p{color:#666;margin-bottom:20px;line-height:1.6}.tutorial-topics{flex-wrap:wrap;gap:8px;margin-top:auto;display:flex}.topic-tag{color:#495057;background:#f8f9fa;border-radius:4px;padding:4px 8px;font-size:.75rem;font-weight:500}@media (max-width:1024px){.tutorial-layout{flex-direction:column}.code-panel{border-top:1px solid #333;border-left:none;height:auto;min-height:400px;position:static}.hero-title{font-size:2rem}.content-panel{padding:20px}.hero-section{margin:-20px -20px 40px;padding:40px 20px}.nav-links{gap:15px}}@media (max-width:768px){.example-cards{grid-template-columns:1fr}.tutorial-grid{grid-template-columns:1fr;padding:40px 20px}.nav-content{flex-direction:column;gap:15px}.nav-links{flex-wrap:wrap;justify-content:center}.learn-hero h1{font-size:2.5rem}.hero-title{font-size:1.8rem}}