:root{--text:#475569;--text-h:#0f172a;--bg:#f8fafc;--border:#e2e8f0;--code-bg:#f1f5f9;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f1f5f980;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#94a3b8;--text-h:#f8fafc;--bg:#0f172a;--border:#1e293b;--code-bg:#1e293b;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#1e293b80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{background-color:var(--bg);margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0f18;--bg2:#131620;--bg3:#1c2035;--border:#252a40;--text:#eceef8;--text2:#8890bb;--accent:#7f77dd;--accent2:#1d9e75;--warn:#d85a30;--radius:10px;--font:"Inter", system-ui, sans-serif;--shadow:0 4px 24px #0006}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;font-size:14px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}.app{flex-direction:column;min-height:100vh;display:flex}@keyframes blob1{0%,to{transform:translate(0)scale(1)}33%{transform:translate(30px,-20px)scale(1.08)}66%{transform:translate(-15px,15px)scale(.95)}}@keyframes blob2{0%,to{transform:translate(0)scale(1)}33%{transform:translate(-25px,18px)scale(1.06)}66%{transform:translate(20px,-12px)scale(.97)}}@keyframes blob3{0%,to{transform:translate(0)scale(1)}50%{transform:translate(18px,-22px)scale(1.1)}}.tab-bar{background:var(--bg2);border-bottom:1px solid var(--border);scrollbar-width:none;z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;overflow-x:auto}.tab-bar::-webkit-scrollbar{display:none}.tab-bar-inner{gap:2px;max-width:1200px;margin:0 auto;padding:0 20px;display:flex}.tab-btn{font-size:12.5px;font-family:var(--font);color:var(--text2);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;padding:10px 14px;transition:color .15s,border-color .15s;position:relative}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);text-shadow:0 0 12px #7f77dd73;font-weight:500}.main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:28px 24px}.module-loader{color:var(--text2);flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:100px 0;font-size:13px;display:flex}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:30px;height:30px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.coming-soon{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:90px 20px;display:flex}.coming-soon-icon{font-size:52px}.coming-soon h3{font-size:18px;font-weight:500}.coming-soon p{color:var(--text2);max-width:420px;font-size:13px;line-height:1.7}.badge{background:var(--bg3);border:1px solid var(--border);color:var(--text2);letter-spacing:.5px;border-radius:20px;padding:4px 14px;font-size:11px;display:inline-block}.module{width:100%}.module-title{color:var(--text);letter-spacing:-.2px;margin-bottom:5px;font-size:17px;font-weight:600}.module-desc{color:var(--text2);max-width:760px;margin-bottom:20px;font-size:13px;line-height:1.7}.controls{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:14px 20px;margin-bottom:12px;padding:12px 16px;display:flex}.control-group{color:var(--text2);align-items:center;gap:8px;font-size:13px;display:flex}.control-group b{color:var(--text);text-align:right;min-width:38px;font-weight:500}.control-group label{color:var(--text2);-webkit-user-select:none;user-select:none}input[type=range]{accent-color:var(--accent);cursor:pointer;height:4px}input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:14px;height:14px}.pill-group{flex-wrap:wrap;gap:5px;display:flex}.pill{border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:12px;font-family:var(--font);white-space:nowrap;border-radius:20px;padding:4px 12px;transition:all .15s}.pill:hover{border-color:var(--accent);color:var(--text)}.pill:disabled{opacity:.4;cursor:default}.pill.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}.pill.active-green{background:var(--accent2);border-color:var(--accent2);color:#fff;font-weight:500}.pill.active-warn{background:var(--warn);border-color:var(--warn);color:#fff;font-weight:500}.icon-btn{border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;font-size:13px;font-family:var(--font);white-space:nowrap;border-radius:8px;padding:6px 16px;transition:all .15s}.icon-btn:hover{border-color:var(--accent);color:var(--accent)}.icon-btn:disabled{opacity:.4;cursor:default}.icon-btn.primary{background:linear-gradient(135deg, var(--accent), #534ab7);border-color:var(--accent);color:#fff;box-shadow:0 2px 10px #7f77dd4d}.icon-btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px #7f77dd73}.canvas-panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);display:block;overflow:hidden;box-shadow:inset 0 1px #ffffff08}.info-box{background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);color:var(--text2);margin-top:10px;padding:10px 14px;font-size:12.5px;line-height:1.75}.info-box b{color:var(--text);font-weight:500}.legend{color:var(--text2);flex-wrap:wrap;gap:14px;margin-top:8px;font-size:12px;display:flex}.legend span{align-items:center;gap:5px;display:flex}.dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;display:inline-block}.tut-card-hover{transition:transform .15s,box-shadow .15s}.tut-card-hover:hover{transform:translateY(-1px);box-shadow:0 6px 24px #00000059}.footer{text-align:center;color:var(--text2);border-top:1px solid var(--border);background:var(--bg2);letter-spacing:.2px;padding:16px;font-size:11.5px}@media (width<=768px){.main{padding:16px 14px}.controls{gap:10px;padding:10px 12px}.tab-btn{padding:8px 10px;font-size:11px}.module-title{font-size:15px}}@media (width<=480px){.main{padding:12px 10px}.tab-btn{padding:7px 8px;font-size:10.5px}.pill{padding:3px 9px;font-size:11px}.icon-btn{padding:5px 12px;font-size:12px}}