.App{min-height:100vh;overflow-x:hidden}.hero-gradient{background:linear-gradient(#f2f8f8 0%,#f5f9f9 50%,#f9fbfb 100%)}.feature-card{transition:transform .3s,box-shadow .3s,border-color .3s}.feature-card:hover{border-color:#8b5cf64d;transform:translateY(-6px);box-shadow:0 20px 40px -15px #8b5cf633}.syntax-keyword{color:#c792ea}.syntax-string{color:#c3e88d}.syntax-function{color:#82aaff}.syntax-comment{color:#546e7a}.syntax-number{color:#f78c6c}.countdown-box{background:#fff;border:1px solid #8b5cf61a;box-shadow:0 4px 20px -5px #8b5cf626}.sidebar-link{transition:background-color .2s,color .2s}.sidebar-link:hover{background-color:#8b5cf614}.sidebar-link.active{color:#6b26d9;background-color:#8b5cf61f;border-left:3px solid #6b26d9}.bento-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}@media (max-width:768px){.bento-grid{grid-template-columns:1fr}}.journey-card{background:#fff;border:1px solid #8b5cf61a;border-radius:20px;padding:2rem;transition:all .3s;position:relative;box-shadow:0 4px 20px -5px #00000014}.journey-card:hover{border-color:#8b5cf64d;transform:translateY(-4px);box-shadow:0 15px 30px -10px #8b5cf633}.journey-connector{background:linear-gradient(90deg,#6b26d9 0%,#2eb8b8 100%);width:40px;height:2px;position:absolute;top:50%;right:-40px}.skill-path{position:relative}.skill-path:before{content:"";background:linear-gradient(#6b26d9 0%,#2eb8b8 100%);width:2px;position:absolute;top:48px;bottom:0;left:24px}.learning-feature-images{width:100%;height:100%;position:relative}.learning-feature-images img{object-fit:cover;opacity:0;border-radius:16px;width:100%;height:100%;transition:opacity .5s;position:absolute;inset:0}.learning-feature-images img.active{opacity:1}.creative-card{background:#fff;border-radius:24px;transition:all .4s;overflow:hidden;box-shadow:0 10px 40px -10px #0000001a}.creative-card:hover{transform:scale(1.02);box-shadow:0 20px 50px -15px #8b5cf640}.stats-card{background:linear-gradient(135deg,#6b26d9 0%,#2eb8b8 100%);border-radius:20px;padding:2px;position:relative}.stats-card-inner{background:#fff;border-radius:18px;padding:1.5rem}.category-card{background:#fff;border:1px solid #0000000d;border-radius:20px;padding:1.5rem;transition:all .3s}.category-card:hover{border-color:#8b5cf64d;box-shadow:0 10px 30px -10px #8b5cf633}@media (max-width:1024px){.tutorial-sidebar{z-index:50;transition:left .3s;position:fixed;left:-280px}.tutorial-sidebar.open{left:0}}html,body{max-width:100vw!important;overflow-x:hidden!important}#root,.App{max-width:100vw;overflow-x:hidden}
.tutorials-page{background-color:var(--background);color:#fff;font-family:Inter,sans-serif}.tutorials-page h1,.tutorials-page h2,.tutorials-page h3,.tutorials-page .font-heading{font-family:Poppins,sans-serif!important}.bento-grid-tutorials{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(320px,auto);gap:1.5rem;display:grid}.category-card-bento{background:var(--card);border:1px solid var(--border);border-radius:0;flex-direction:column;justify-content:flex-end;padding:3rem;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.category-card-bento:hover{border-color:#00e676;transform:translateY(-10px);box-shadow:0 0 40px #00e6761a}.category-card-bento .bg-icon{opacity:.02;color:#00e676;pointer-events:none;width:200px;height:200px;transition:all .5s;position:absolute;top:-30px;right:-30px;transform:rotate(-15deg)}.category-card-bento:hover .bg-icon{opacity:.05;transform:rotate(0)scale(1.15)}.featured-1{grid-column:span 2}.subcategory-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.subcategory-card{background:var(--card);border:1px solid var(--border);border-radius:0;padding:2.5rem;transition:all .3s;position:relative;overflow:hidden}.subcategory-card:hover{background:#1c2128;border-color:#00e676;transform:translateY(-4px);box-shadow:0 0 20px #00e6761a}.lesson-layout{height:100vh;display:flex;position:relative;overflow:hidden}.lesson-sidebar{background:var(--card);border-right:1px solid var(--border);flex-direction:column;width:350px;display:flex}.lesson-content-area{background:var(--background);z-index:10;flex:1;position:relative;overflow-y:auto}.lesson-row{border-bottom:1px solid var(--border);cursor:pointer;background:0 0;align-items:center;gap:1rem;padding:.75rem 1.5rem;transition:all .2s;display:flex;position:relative}.lesson-row:hover{background:var(--background)}.lesson-row.active{background:#00e67611;border-left:4px solid #00e676}.search-container{max-width:700px;margin:0 auto;position:relative}.search-input{background:var(--card);border:1px solid var(--border);color:#fff;letter-spacing:.05em;border-radius:0;width:100%;padding:1.5rem 1.5rem 1.5rem 4rem;font-family:Inter,sans-serif;font-size:14px;font-weight:500;transition:all .3s}.search-input:focus{border-color:#00e676;outline:none;box-shadow:0 0 30px #00e6761a}.tutorial-html-content pre{border:1px solid var(--border,#1f2937);background:#0d1117;border-radius:.75rem;margin:2.5rem 0;padding:3.5rem 1.5rem 1.5rem;position:relative;overflow:hidden;box-shadow:0 10px 30px -10px #00000080}.tutorial-html-content pre:before{content:"terminal";background-color:var(--card,#161b22);border-bottom:1px solid var(--border,#30363d);height:2.5rem;color:var(--muted-foreground,#8b949e);letter-spacing:.1em;text-transform:uppercase;background-image:radial-gradient(circle at 1rem 1.25rem,#ff5f56 .35rem,#0000 .4rem),radial-gradient(circle at 2.25rem 1.25rem,#ffbd2e .35rem,#0000 .4rem),radial-gradient(circle at 3.5rem 1.25rem,#27c93f .35rem,#0000 .4rem);background-repeat:no-repeat;justify-content:center;align-items:center;font-family:JetBrains Mono,monospace;font-size:.75rem;display:flex;position:absolute;top:0;left:0;right:0}.tutorial-html-content pre code{color:#00e676;background:0 0;border:none;padding:0;font-size:14px;line-height:1.7;font-family:JetBrains Mono,monospace!important}@media (max-width:1024px){.bento-grid-tutorials,.subcategory-grid{grid-template-columns:repeat(2,1fr)}.lesson-sidebar{width:320px}}@media (max-width:768px){.bento-grid-tutorials{grid-template-columns:1fr}.featured-1{grid-column:span 1}.subcategory-grid{grid-template-columns:1fr}.lesson-layout{flex-direction:column;height:auto;overflow:visible}.lesson-sidebar{border-right:1px solid var(--border);border-bottom:none;width:85%;max-width:350px;height:100vh}}.lesson-count-pill{color:#f59e0b;text-transform:uppercase;letter-spacing:.1em;background:#f59e0b11;border:1px solid #f59e0b33;padding:4px 12px;font-family:Poppins,sans-serif;font-size:10px;font-weight:900}.btn-outlined-green{color:#00e676;background:0 0;border:1px solid #00e676;border-radius:0;font-family:Poppins,sans-serif;font-weight:900;transition:all .3s}.btn-outlined-green:hover{background:#00e67611;box-shadow:0 0 12px #00e67633}.btn-amber-filled{color:var(--background);background:#f59e0b;border-radius:0;font-family:Poppins,sans-serif;font-weight:900;transition:all .3s}.btn-amber-filled:hover{background:#fbbf24;transform:translateY(-4px);box-shadow:0 4px 15px #f59e0b33}.tutorial-html-content p{color:var(--muted-foreground,#9ca3af);margin-bottom:2rem;font-family:Sora,sans-serif;font-size:1rem;line-height:1.625}.tutorial-html-content h1{color:#fff;letter-spacing:-.025em;text-shadow:0 0 10px #00e6761a;margin-top:4rem;margin-bottom:2.5rem;font-size:1.5rem;font-weight:700}@media (min-width:768px){.tutorial-html-content h1{font-size:1.875rem}}.tutorial-html-content h2{color:#fff;letter-spacing:-.025em;margin-top:3rem;margin-bottom:2rem;font-size:1.5rem;font-weight:700}.tutorial-html-content h3{color:#fff;letter-spacing:-.025em;margin-top:2.5rem;margin-bottom:1.5rem;font-size:1.25rem;font-weight:700}.tutorial-html-content ul:not([data-type=taskList]){color:var(--muted-foreground,#9ca3af);flex-direction:column;gap:1rem;margin-bottom:2rem;font-size:1rem;list-style:none;display:flex}.tutorial-html-content ul:not([data-type=taskList])>li{align-items:flex-start;gap:.75rem;display:flex}.tutorial-html-content ul:not([data-type=taskList])>li:before{content:"→";color:var(--primary,#00e676);margin-top:.25rem}.tutorial-html-content ol{color:var(--muted-foreground,#9ca3af);flex-direction:column;gap:1rem;margin-bottom:2rem;padding-left:1.5rem;font-size:1rem;list-style-type:decimal;display:flex}.tutorial-html-content ol>li{margin-bottom:.5rem}.tutorial-html-content a{color:var(--primary,#00e676);font-weight:700;text-decoration:underline}.tutorial-html-content code:not(pre code){color:var(--primary,#00e676);background-color:#00e6761a;border:1px solid #00e67633;border-radius:.375rem;padding:.2rem .4rem;font-family:JetBrains Mono,monospace;font-size:.85em;font-weight:500}.tutorial-html-content table{border-collapse:collapse;table-layout:fixed;width:100%;margin:0 0 2rem;overflow:hidden}.tutorial-html-content td,.tutorial-html-content th{border:2px solid var(--border,#334155);vertical-align:top;box-sizing:border-box;background-color:var(--card,#111827);min-width:1em;color:var(--foreground,#fff);padding:8px 12px;position:relative}.tutorial-html-content th{text-align:left;color:#fff;background-color:#000;font-weight:700}.tutorial-html-content ul[data-type=taskList]{margin-bottom:2rem;padding:0;list-style:none}.tutorial-html-content ul[data-type=taskList] p{margin:0}.tutorial-html-content ul[data-type=taskList] li{margin-bottom:.5rem;display:flex}.tutorial-html-content ul[data-type=taskList] li>label{-webkit-user-select:none;user-select:none;flex:none;margin-right:.5rem;padding-top:.25rem}.tutorial-html-content ul[data-type=taskList] li>div{flex:auto}.tutorial-html-content iframe{aspect-ratio:16/9;border-radius:.5rem;width:100%;margin-bottom:2rem}.tutorial-html-content blockquote{border-left:4px solid var(--primary,#00e676);color:var(--foreground,#fff);background:linear-gradient(90deg,#00e67614 0%,#00e67600 100%);border-radius:0 .75rem .75rem 0;margin:2rem 0;padding:1.5rem 1.5rem 1.5rem 3.5rem;font-size:1.1rem;font-style:italic;position:relative}.tutorial-html-content blockquote:before{content:"\"";color:var(--primary,#00e676);opacity:.3;font-family:serif;font-size:3rem;line-height:1;position:absolute;top:1rem;left:1rem}.tutorial-html-content hr{border:none;border-top:2px solid var(--border,#1f2937);margin:3rem 0}.tutorial-html-content img{border:1px solid var(--border,#1f2937);border-radius:.5rem;max-width:100%;height:auto;margin-bottom:2rem}.tutorial-html-content mark{color:inherit;background-color:#f59e0b33;border-radius:.25rem;padding:.1rem .3rem}.tutorial-html-content details{background-color:var(--card,#111827);border:1px solid var(--border,#1f2937);border-radius:.5rem;margin-bottom:2rem;padding:1rem}.tutorial-html-content summary{cursor:pointer;color:var(--primary,#00e676);outline:none;font-weight:700}.tutorial-html-content sub,.tutorial-html-content sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}.tutorial-html-content sub{bottom:-.25em}.tutorial-html-content sup{top:-.5em}