@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/8a480f0b521d4e75-s.06d3mdzz5bre_.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7178b3e590c64307-s.11.cyxs5p-0z~.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/caa3a2e1cccd8315-s.p.16t1db8_9y2o~.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Fallback;src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.0%;size-adjust:104.76%}.geist_2ae47f08-module__h69qWW__className{font-family:Geist,Geist Fallback;font-style:normal}.geist_2ae47f08-module__h69qWW__variable{--font-geist-sans:"Geist", "Geist Fallback"}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/4fa387ec64143e14-s.0q3udbd2bu5yp.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/bbc41e54d2fcbd21-s.0gw~uztddq1df.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/797e433ab948586e-s.p.0.q-h669a_dqa.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono Fallback;src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}.geist_mono_eb58308d-module__w_p2Lq__className{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.geist_mono_eb58308d-module__w_p2Lq__variable{--font-geist-mono:"Geist Mono", "Geist Mono Fallback"}
*,:before,:after{box-sizing:border-box}html,body{color:#f3f4f6;-webkit-font-smoothing:antialiased;background-color:#302e33;width:100%;min-height:100vh;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden auto}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#302e33}::-webkit-scrollbar-thumb{background:#374151;border:2px solid #302e33;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#4b5563}body{--keyboard-background:#111827f2;--keyboard-toolbar-text:#f3f4f6;--keycap-background:#1f2937;--keycap-text:#f3f4f6;--keycap-secondary-text:#9ca3af;--keycap-border:#374151;--keycap-background-hover:#374151}.layout-container{color:#f3f4f6;background:#302e33;flex-direction:column;width:100%;min-height:100vh;padding-top:70px;display:flex;position:relative}.top-nav{z-index:100;-webkit-backdrop-filter:blur(16px);background-color:#302e33bf;border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;height:70px;padding:0 2rem;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 4px 30px #0003}.nav-brand{align-items:center;gap:12px;display:flex}.brand-icon{justify-content:center;align-items:center;width:48px;min-width:48px;height:48px;display:inline-flex}.brand-icon img{width:100%;height:100%;display:block}.nav-brand h1{background:linear-gradient(90deg,#f8fafc,#94a3b8);-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;margin:0;font-size:1.25rem;font-weight:700}.nav-actions{gap:12px;display:flex}.action-btn{border-radius:8px;align-items:center;gap:6px;padding:6px 14px;font-size:.75rem;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.primary-btn{color:#fff;background:#1976d2;border:1px solid #1976d266;box-shadow:0 4px 15px #1976d240}.primary-btn:hover{background:#1565c0;border-color:#1976d2b3;transform:translateY(-2px);box-shadow:0 8px 25px #1976d266}.secondary-btn{color:#e2e8f0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1e293b99;border:1px solid #47556999}.secondary-btn:hover{color:#fff;background:#334155cc;border-color:#94a3b8cc;transform:translateY(-2px)}.split-view{flex:1;align-items:stretch;width:100%;height:calc(100vh - 70px);min-height:calc(100vh - 70px);display:flex}.editor-panel{-webkit-backdrop-filter:blur(16px);background:#1e1e1e66;flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.code-side{background:linear-gradient(#1e1e1e99 0%,#141414cc 100%);border-right:1px solid #ffffff14;min-height:0}.visual-side{background-color:#302e33;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:24px 24px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;min-height:0}.panel-header{background:#1e1e1e99;border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;height:48px;padding:.75rem 1.5rem;display:flex}.panel-header-left{align-items:center;gap:10px;display:flex}.panel-header h2{text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;margin:0;font-size:.85rem;font-weight:600}.panel-icon{color:#38bdf8}.live-badge{color:#34d399;background:#10b98126;border:1px solid #10b9814d;border-radius:20px;align-items:center;gap:6px;padding:4px 12px;font-size:.75rem;font-weight:600;display:flex;box-shadow:0 0 10px #10b9811a}.live-badge:before{content:"";background-color:#34d399;border-radius:50%;width:6px;height:6px;animation:2s infinite pulse-dot;display:block;box-shadow:0 0 8px #34d399}@keyframes pulse-dot{0%{opacity:1;transform:scale(.95)}50%{opacity:.5;transform:scale(1.4)}to{opacity:1;transform:scale(.95)}}.code-textarea{color:#7dd3fc;resize:none;background:0 0;border:none;outline:none;flex:1;width:100%;padding:2rem 1.5rem;font-family:JetBrains Mono,monospace;font-size:1.1rem;line-height:1.8}.code-textarea::placeholder{color:#38bdf84d}.preview-container{flex:1;justify-content:center;align-items:stretch;min-height:0;padding:0;display:flex;overflow:auto}math-field{--selection-background-color:#8b5cf666!important;--selection-color:#f3f4f6!important;--caret-color:#38bdf8!important;--placeholder-color:#ffffff4d!important}.math-live-display{text-align:left;border-radius:0;outline:none;width:100%;height:100%;padding:2rem;font-size:2.5rem;transition:all .3s;display:block;color:#f8fafc!important;box-shadow:none!important;background-color:#302e33!important;border:none!important}.math-live-display:focus-within{box-shadow:inset 0 0 0 2px #38bdf84d!important}.math-live-display.export-mode{color:#000!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;--color:#000!important;--math-color:#000!important;background-color:#fff!important;border:none!important;position:relative!important}@media (max-width:1024px){.split-view{flex-direction:column;height:auto;min-height:auto}.editor-panel{height:400px;min-height:400px}}@media (max-width:768px){.top-nav{flex-direction:column;gap:1rem;height:auto;padding:1.5rem 1rem;position:relative}.nav-actions{grid-template-columns:repeat(2,1fr);gap:.5rem;width:100%;display:grid}.nav-actions .action-btn{justify-content:center;padding:.5rem;font-size:.75rem}.nav-actions .action-btn:first-child{display:none}.layout-container{padding-top:0}.split-view{gap:1rem;padding:1rem}.panel-header{flex-direction:column;align-items:flex-start;gap:.5rem;height:auto;padding:1rem}.math-live-display{padding:1rem;font-size:1.6rem}math-field::part(menu-toggle){display:none!important}.code-textarea{padding:1.5rem 1rem}.tutorial-method pre{padding:1rem;font-size:.9rem}}.tutorials-section{background:#302e33;border-top:1px solid #ffffff0d;padding:5rem 2rem}.tutorials-container{max-width:1100px;margin:0 auto}.tutorials-title{background:linear-gradient(90deg,#f8fafc,#94a3b8);-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;margin-bottom:3rem;font-size:2.25rem;font-weight:700}.tutorial-methods{flex-direction:column;gap:2rem;display:flex}.tutorial-method pre{background:#14141499;border:1px solid #ffffff0d;border-radius:8px;padding:1.5rem;overflow-x:auto}.tutorial-method{overflow-wrap:break-word;word-wrap:break-word;flex-direction:column;padding:0 0 3rem;display:flex}.method-header{border-bottom:1px solid #ffffff14;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.method-icon{color:#a855f7;font-size:1.5rem}.visual-icon,.keyboard-icon{font-size:1.5rem}.tutorial-method h3{color:#f8fafc;margin:0;font-size:1.25rem;font-weight:600}.method-content p{color:#94a3b8;margin-bottom:1.5rem;font-size:.95rem;line-height:1.7}.code-example,.visual-tips,.shortcut-category{background:#0f172a99;border:1px solid #334155cc;border-radius:10px;flex:1;padding:1.5rem}.code-example strong,.visual-tips strong,.shortcut-category strong{color:#e2e8f0;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;font-size:.9rem;display:block}.code-example ul,.visual-tips ul,.shortcut-category ul{color:#cbd5e1;margin:0;padding-left:1.2rem}.code-example li,.visual-tips li,.shortcut-category li{margin-bottom:.75rem;font-size:.95rem;line-height:1.5}.code-example code{color:#7dd3fc;background:#38bdf826;border:1px solid #38bdf840;border-radius:6px;padding:.2rem .5rem;font-family:JetBrains Mono,monospace;font-size:.85em;font-weight:500}.keyboard-shortcuts{grid-template-columns:1fr;gap:1.5rem;display:grid}@media (min-width:600px){.keyboard-shortcuts{grid-template-columns:1fr 1fr}}kbd{color:#f8fafc;background:linear-gradient(#334155 0%,#1e293b 100%);border:1px solid #475569;border-bottom-width:2px;border-radius:6px;margin:0 .2rem;padding:.2rem .6rem;font-family:Inter,sans-serif;font-size:.75rem;font-weight:600;display:inline-block;box-shadow:0 2px #0003}.tutorial-actions{text-align:center;border-top:1px solid #ffffff0d;margin-top:3rem;padding-top:3rem}.tutorial-note{color:#64748b;max-width:600px;margin:0 auto;font-size:.95rem;line-height:1.6}