.learn-container{max-width:1200px;min-height:calc(100vh - 100px);margin:0 auto;padding:1.5rem 2rem}.learn-tabs{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2rem;display:flex}.learn-tab{color:#fff;cursor:pointer;background:#b0b0b0;border:none;border-radius:9999px;padding:.625rem 1.25rem;font-size:14px;font-weight:500;transition:all .15s}.learn-tab:hover,.learn-tab.active{background:var(--dcl-accent)}.learn-content{background:var(--dcl-card);border-radius:16px;padding:2rem;box-shadow:0 4px 24px #503c2814}.learn-section{max-width:900px;margin:0 auto}.learn-section h1{color:var(--dcl-foreground);margin-bottom:1rem;font-size:2rem}.learn-section h2{color:var(--dcl-foreground);margin-top:2rem;margin-bottom:1rem;font-size:1.5rem}.learn-section h3{color:var(--dcl-foreground);margin-top:1.5rem;margin-bottom:.75rem;font-size:1.125rem}.learn-section h4{color:var(--dcl-foreground);margin-top:1rem;margin-bottom:.5rem;font-size:1rem;font-weight:600}.learn-section p{color:var(--dcl-foreground);margin-bottom:1rem;line-height:1.6}.learn-section ul,.learn-section ol{margin-bottom:1rem;padding-left:1.5rem}.learn-section li{margin-bottom:.5rem;line-height:1.5}.learn-section code{background:var(--dcl-background);font-family:var(--dcl-font-mono);color:var(--dcl-accent);border-radius:4px;padding:.125rem .375rem;font-size:.875em}.learn-live-example{background:var(--dcl-background);border-radius:12px;overflow:hidden}.learn-example-title{color:var(--dcl-muted-foreground);text-transform:uppercase;letter-spacing:.05em;background:var(--dcl-background);padding:.75rem 1rem;font-size:13px;font-weight:600}.learn-syntax-block{background:var(--dcl-background);border:1px solid var(--dcl-border);border-radius:8px;margin:1rem 0;padding:1rem;overflow-x:auto}.learn-syntax-block code{font-family:var(--dcl-font-mono);color:var(--dcl-foreground);background:0 0;padding:0;font-size:13px;line-height:1.5}.learn-table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:14px}.learn-table th,.learn-table td{text-align:left;border-bottom:1px solid var(--dcl-border);padding:.75rem 1rem}.learn-table th{background:var(--dcl-background);color:var(--dcl-foreground);font-weight:600}.learn-table td{color:var(--dcl-foreground)}.learn-table td code{background:var(--dcl-background)}.learn-collapsible{border:1px solid var(--dcl-border);border-radius:8px;margin:1rem 0;overflow:hidden}.learn-collapsible-header{background:var(--dcl-background);cursor:pointer;border:none;justify-content:space-between;align-items:center;width:100%;padding:.875rem 1rem;transition:background .15s;display:flex}.learn-collapsible-header:hover{background:var(--dcl-border)}.learn-collapsible-title{color:var(--dcl-foreground);font-size:15px;font-weight:600}.learn-collapsible-icon{color:var(--dcl-muted-foreground);align-items:center;display:flex}.learn-collapsible-content{background:var(--dcl-card);padding:1rem}.learn-info,.learn-tip{border-radius:8px;margin:1.5rem 0;padding:1rem 1.25rem}.learn-info{background:#3b82f61a;border:1px solid #3b82f64d}.learn-tip{background:#22c55e1a;border:1px solid #22c55e4d}.learn-info-title,.learn-tip-title{text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:13px;font-weight:700}.learn-info-title{color:#3b82f6}.learn-tip-title{color:#22c55e}.learn-info p,.learn-tip p{margin-bottom:0}.learn-category-filter{flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;display:flex}.learn-category-btn{background:var(--dcl-background);color:var(--dcl-foreground);border:1px solid var(--dcl-border);cursor:pointer;border-radius:9999px;padding:.5rem 1rem;font-size:13px;font-weight:500;transition:all .15s}.learn-category-btn:hover{border-color:var(--dcl-accent)}.learn-category-btn.active{background:var(--dcl-accent);color:#fff;border-color:var(--dcl-accent)}.learn-btn{background:var(--dcl-background);color:var(--dcl-foreground);border:1px solid var(--dcl-border);cursor:pointer;border-radius:8px;padding:.5rem 1rem;font-size:13px;font-weight:500;transition:all .15s}.learn-btn:hover{border-color:var(--dcl-accent);background:var(--dcl-card)}.learn-examples-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;display:grid}.learn-example-card{background:var(--dcl-background);cursor:pointer;border:1px solid #0000;border-radius:12px;flex-direction:column;transition:all .2s;display:flex;overflow:hidden}.learn-example-card:hover{border-color:var(--dcl-accent);transform:translateY(-2px);box-shadow:0 4px 16px #503c281f}.learn-example-card-preview{background:var(--dcl-card);justify-content:flex-start;align-items:flex-start;min-height:100px;max-height:180px;padding:1rem;display:flex;overflow:hidden}.learn-example-card-preview pre{font-family:var(--dcl-font-mono);color:var(--dcl-muted-foreground);white-space:pre;text-align:left;width:100%;max-height:150px;margin:0;font-size:11px;line-height:1.5;overflow:hidden}.learn-example-card-info{flex-direction:column;flex:1;margin:0;padding:1rem;display:flex}.learn-example-card-info h4{color:var(--dcl-foreground);margin:0 0 .375rem;font-size:14px;font-weight:600}.learn-example-card-info p{color:var(--dcl-muted-foreground);margin:0;padding:0;font-size:12px;line-height:1.4}.learn-color-swatch{border:1px solid var(--dcl-border);vertical-align:middle;border-radius:4px;width:24px;height:24px;display:inline-block}.learn-navigation{border-top:1px solid var(--dcl-border);justify-content:space-between;align-items:center;gap:1rem;margin-top:3rem;padding-top:2rem;display:flex}.learn-nav-button{background:var(--dcl-background);color:var(--dcl-foreground);border:1px solid var(--dcl-border);cursor:pointer;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:14px;font-weight:500;transition:all .15s;display:flex}.learn-nav-button:hover{background:var(--dcl-accent);color:#fff;border-color:var(--dcl-accent);transform:translateY(-1px);box-shadow:0 2px 8px #503c2826}.learn-nav-prev{margin-right:auto}.learn-nav-next{margin-left:auto}@media (max-width:768px){.learn-container{padding:1rem}.learn-content{padding:1.5rem 1rem}.learn-section h1{font-size:1.5rem}.learn-section h2{font-size:1.25rem}.learn-examples-grid{grid-template-columns:1fr}.learn-navigation{flex-direction:column;gap:.75rem}.learn-nav-button{justify-content:center;width:100%}.learn-nav-prev,.learn-nav-next{margin:0}}