.sidebar{position:fixed;top:0;left:0;height:100vh;background:#ffffff47;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-right:1px solid rgba(255,255,255,.4);display:flex;flex-direction:column;z-index:100;transition:width .3s ease;box-shadow:4px 0 24px #0000000f}.sidebar.open{width:var(--sidebar-width)}.sidebar.closed{width:64px}.sidebar-content{flex:1;overflow-y:auto;padding:12px 8px}.sidebar-header{display:flex;align-items:center;gap:10px;padding:12px 8px 16px}.sidebar-logo{font-size:1.6rem}.sidebar-header h2{font-size:.95rem;font-weight:700;color:#333;white-space:nowrap}.sidebar-nav{display:flex;flex-direction:column;gap:2px}.nav-divider{font-size:.7rem;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.05em;padding:14px 12px 4px}.nav-divider-line{height:1px;background:#fff6;margin:8px 12px}.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:none;background:none;border-radius:10px;font-size:.85rem;color:#444;cursor:pointer;text-align:left;transition:background .2s,color .2s,transform .15s;white-space:nowrap}.nav-item:hover{background:#3b82f61a;color:#3b82f6;transform:translate(3px)}.nav-item.active{background:linear-gradient(135deg,#3b82f64d,#93c5fd4d);color:#1e40af;font-weight:600;box-shadow:0 2px 8px #3b82f626}.nav-icon{width:20px;height:20px;flex-shrink:0}.nav-label{flex:1;overflow:hidden;text-overflow:ellipsis}.sidebar-toggle{position:absolute;top:20px;right:-14px;width:28px;height:28px;border-radius:50%;background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #00000014;z-index:101}.toggle-icon{width:16px;height:16px;color:#666}.sidebar-overlay{display:none}@media (max-width: 1024px) and (min-width: 601px){.sidebar.open,.sidebar.closed{width:64px}.sidebar .nav-label,.sidebar .nav-divider,.sidebar .sidebar-header h2{display:none}.sidebar .nav-item{justify-content:center;padding:10px}.sidebar .sidebar-toggle{display:none}.main-content,.main-content.sidebar-closed{margin-left:64px!important}}@media (max-width: 600px){.sidebar.open{width:280px}.sidebar.closed{width:0;overflow:hidden}.sidebar-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0003;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:99}.main-content{margin-left:0!important;padding:20px 16px}}.lesson-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:calc(100vh - 80px)}.lesson-theory{max-height:calc(100vh - 80px);overflow-y:auto;padding-right:10px}.lesson-theory::-webkit-scrollbar{width:6px}.lesson-theory::-webkit-scrollbar-track{background:transparent}.lesson-theory::-webkit-scrollbar-thumb{background:#3b82f640;border-radius:999px}.lesson-playground-panel{position:sticky;top:0;display:flex;flex-direction:column;max-height:calc(100vh - 80px)}.lesson-playground-panel .panel-title{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#ffffff4d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px 14px 0 0;border:1px solid rgba(255,255,255,.4);border-bottom:none;font-weight:700;font-size:.9rem;color:#333}.lesson-playground-panel .mini-editor{flex:1;display:flex;flex-direction:column;background:#1e293beb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:0 0 14px 14px;border:1px solid rgba(59,130,246,.2);border-top:none;overflow:hidden;position:relative}.lesson-playground-panel .mini-editor:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#f5a623,#f7dc6f,#f5a623,#e67e22)}.lesson-playground-panel .mini-toolbar{display:flex;gap:6px;padding:8px 12px;background:#33415580;align-items:center}.lesson-playground-panel .mini-toolbar button{padding:5px 14px;border:none;border-radius:8px;font-weight:600;font-size:.8rem;cursor:pointer;transition:all .15s}.mini-btn-run{background:#f5a623;color:#1e293b}.mini-btn-run:hover{background:#e67e22}.mini-btn-run:disabled{opacity:.5;cursor:wait}.mini-btn-clear{background:#ffffff1a;color:#94a3b8}.mini-btn-clear:hover{background:#fff3}.mini-hint{font-size:.7rem;color:#64748b;margin-left:auto}.lesson-playground-panel .mini-code{flex:1;min-height:200px;background:transparent;color:#e2e8f0;padding:12px 16px;border:none;resize:none;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.82rem;line-height:1.6;outline:none;-moz-tab-size:2;tab-size:2}.lesson-playground-panel .mini-output{min-height:100px;max-height:180px;overflow-y:auto;padding:10px 16px;background:#0f172a99;border-top:1px solid rgba(245,166,35,.15);font-family:Cascadia Code,Fira Code,monospace;font-size:.8rem;line-height:1.5;color:#a3e635;white-space:pre-wrap}.lesson-playground-panel .mini-output.has-error{color:#f87171}@media (max-width: 1024px){.lesson-split{grid-template-columns:1fr}.lesson-theory{max-height:none;padding-right:0}.lesson-playground-panel{position:relative;max-height:500px}}.lesson-page{max-width:100%}.lesson-page h2{font-size:1.5rem;margin-bottom:6px;color:#333;background:linear-gradient(90deg,#f5a623,#e67e22,#f39c12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}.lesson-page .subtitle{font-size:.85rem;color:#666;margin-bottom:20px}.lesson-page h3{font-size:1.15rem;margin:28px 0 10px;color:#333}.lesson-page h4{font-size:1rem;margin:20px 0 8px;color:#444}.lesson-page p{margin-bottom:12px;line-height:1.7;color:#333}.lesson-page ul,.lesson-page ol{margin:8px 0 16px 24px}.lesson-page li{margin-bottom:4px;line-height:1.6;color:#333}.lesson-page kbd{display:inline-block;padding:2px 8px;font-size:.82em;background:#ffffff80;border:1px solid rgba(0,0,0,.15);border-radius:5px;font-family:inherit;box-shadow:0 1px 2px #00000014}.lesson-page code:not([class*=language-]){background:#f5a6231f;padding:2px 6px;border-radius:5px;font-size:.85em;color:#e67e22}.code-block{background:#1e293beb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius);margin:12px 0 20px;overflow:hidden;position:relative;border:1px solid rgba(245,166,35,.2)}.code-block:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#f5a623,#f7dc6f,#e67e22,#f39c12,#f5a623)}.code-title{background:#33415599;color:#94a3b8;padding:6px 16px;font-size:.75rem;font-weight:600;letter-spacing:.03em}.code-block pre{margin:0;padding:16px 16px 12px;overflow-x:auto}.code-block code{font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.82rem;line-height:1.6;color:#e2e8f0}.console-block:before{background:linear-gradient(90deg,#64748b,#94a3b8,#64748b)}.callout{border-radius:var(--radius);padding:16px 20px;margin:16px 0;background:#ffffff4d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.4);position:relative;overflow:hidden}.callout:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}.callout-info:before{background:linear-gradient(180deg,#3b82f6,#60a5fa)}.callout-tip:before{background:linear-gradient(180deg,#10b981,#34d399)}.callout-warning:before{background:linear-gradient(180deg,#f59e0b,#fbbf24)}.callout-danger:before{background:linear-gradient(180deg,#ef4444,#f87171)}.callout-fun:before{background:linear-gradient(180deg,#f5a623,#f7dc6f,#e67e22)}.callout .callout-title{font-weight:700;margin-bottom:6px;font-size:.9rem;color:#333}.callout p{color:#333}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0 20px}@media (max-width: 700px){.grid2{grid-template-columns:1fr}}.step-by-step{margin:16px 0}.step-item{display:flex;gap:16px;margin-bottom:20px;background:#fff3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);border-radius:var(--radius);padding:16px;position:relative;overflow:hidden}.step-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#f5a623,#f7dc6f)}.step-number{width:36px;height:36px;flex-shrink:0;background:linear-gradient(135deg,#f5a623,#e67e22);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem}.step-content{flex:1}.step-content h4{margin-top:0;margin-bottom:8px;color:#333}.home-page{max-width:900px;margin:0 auto}.home-hero{text-align:center;padding:40px 0 30px}.home-hero h1{font-size:2.4rem;margin-bottom:10px}.home-subtitle{font-size:1.1rem;color:#555;font-weight:400}.home-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}.home-card{background:#ffffff4d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.45);border-radius:16px;padding:28px 24px;text-align:center;cursor:pointer;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}.home-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#f5a623,#f7dc6f,#e67e22)}.home-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px #0000001a}.card-emoji{font-size:2.5rem;margin-bottom:12px}.home-card h3{font-size:1rem;margin-bottom:8px;color:#333}.home-card p{font-size:.85rem;color:#555;line-height:1.5;margin-bottom:12px}.card-time{display:inline-block;font-size:.75rem;color:#e67e22;font-weight:600;background:#f5a6231f;padding:3px 10px;border-radius:999px}.home-footer{text-align:center;padding:20px 0;font-size:.9rem;color:#555}@media (max-width: 700px){.home-cards{grid-template-columns:1fr}.home-hero h1{font-size:1.8rem}}.main-content{flex:1;margin-left:var(--sidebar-width);padding:32px 40px;max-width:100%;min-height:100vh;transition:margin-left .3s ease;overflow-x:hidden;position:relative;z-index:1}.main-content.sidebar-closed{margin-left:64px}@media (max-width: 600px){.main-content{margin-left:0;padding:20px 16px}}:root{--prism-red: rgba(37, 99, 235, .35);--prism-orange: rgba(59, 130, 246, .35);--prism-yellow: rgba(96, 165, 250, .35);--prism-green: rgba(147, 197, 253, .35);--prism-cyan: rgba(30, 58, 138, .35);--prism-blue: rgba(30, 64, 175, .35);--prism-violet: rgba(37, 99, 235, .35);--glass-bg: rgba(255, 255, 255, .3);--glass-border: rgba(255, 255, 255, .5);--glass-blur: 12px;--text-dark: #333;--text-medium: #444;--text-subtle: #666}.rainbow-text{background:linear-gradient(90deg,#1e40af,#3b82f6,#60a5fa,#93c5fd,#2563eb,#1e3a8a,#1e40af);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rainbowText 6s ease-in-out infinite;font-weight:800}@keyframes rainbowFloat{0%{transform:translate(0) translateY(0) scale(1)}33%{transform:translate(20px) translateY(-15px) scale(1.05)}66%{transform:translate(-15px) translateY(10px) scale(.98)}to{transform:translate(10px) translateY(-5px) scale(1.02)}}@keyframes rainbowText{0%{background-position:0% center}50%{background-position:100% center}to{background-position:0% center}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#ffffff14;border-radius:999px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3b82f659,#93c5fd59,#1e3a8a59);border-radius:999px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3b82f68c,#93c5fd8c,#1e3a8a8c);background-clip:padding-box}::-webkit-scrollbar-corner{background:transparent}.code-block ::-webkit-scrollbar-track,.mini-editor ::-webkit-scrollbar-track,pre ::-webkit-scrollbar-track{background:#0f172a4d}.code-block ::-webkit-scrollbar-thumb,.mini-editor ::-webkit-scrollbar-thumb,pre ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3b82f673,#93c5fd73,#1e3a8a73)}*{scrollbar-width:thin;scrollbar-color:rgba(59,130,246,.35) rgba(255,255,255,.08)}code[class*=language-],pre[class*=language-]{color:#e2e8f0;text-shadow:none}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8b9fc7!important;font-style:italic}.token.punctuation{color:#a0aec0!important}.token.keyword,.token.tag,.token.boolean,.token.constant{color:#bfdbfe!important;font-weight:600}.token.string,.token.attr-value,.token.char{color:#86efac!important}.token.function{color:#fbbf24!important}.token.number{color:#fca5a5!important}.token.operator{color:#fcd34d!important}.token.builtin,.token.class-name{color:#93c5fd!important}.token.property,.token.symbol,.token.regex,.token.important{color:#bfdbfe!important}.token.template-string,.token.template-punctuation,.token.inserted{color:#86efac!important}.token.deleted{color:#fca5a5!important}code[class*=language-]::selection,code[class*=language-] *::selection,pre[class*=language-]::selection,pre[class*=language-] *::selection{background:#3b82f64d}:root{--panel: rgba(255, 255, 255, .3);--text: #333;--text-light: #555;--accent: #3b82f6;--accent-hover: #1e40af;--accent-light: rgba(59, 130, 246, .12);--green: #10b981;--green-light: rgba(16, 185, 129, .12);--red: #ef4444;--border: rgba(255, 255, 255, .45);--radius: 14px;--shadow: 0 4px 16px rgba(0, 0, 0, .06);--sidebar-width: 280px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#eff6ff,#dbeafe,#dbeafe,#bfdbfe,#93c5fd);background-attachment:fixed;color:var(--text);line-height:1.6;min-height:100vh;position:relative}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 15% 25%,rgba(59,130,246,.18) 0%,transparent 35%),radial-gradient(circle at 85% 20%,rgba(147,197,253,.18) 0%,transparent 30%),radial-gradient(circle at 50% 80%,rgba(30,58,138,.14) 0%,transparent 35%),radial-gradient(circle at 20% 70%,rgba(37,99,235,.14) 0%,transparent 30%),radial-gradient(circle at 75% 60%,rgba(96,165,250,.14) 0%,transparent 30%);animation:rainbowFloat 45s ease-in-out infinite alternate;pointer-events:none;z-index:0}#root{display:flex;min-height:100vh;position:relative;z-index:1}h1,h2,h3,h4,h5,h6,p,li,td,th,label{color:#333}code:not([class*=language-]){color:#3b82f6}