*{margin:0;padding:0;box-sizing:border-box}body.theme-light{--bg-color: #f5f5f5;--text-color: #333;--header-color: #2c3e50;--card-bg: white;--border-color: #ddd;--code-bg: #f4f4f4;--code-text: #2c3e50;--code-block-bg: #2c3e50;--code-block-text: #ecf0f1;--panel-header-bg: #ecf0f1;--shadow: rgba(0, 0, 0, .1)}body.theme-dark{--bg-color: #1a1a1a;--text-color: #e0e0e0;--header-color: #60a5fa;--card-bg: #2d2d2d;--border-color: #444;--code-bg: #3d3d3d;--code-text: #60a5fa;--code-block-bg: #1e1e1e;--code-block-text: #e0e0e0;--panel-header-bg: #383838;--shadow: rgba(0, 0, 0, .3)}body.theme-paper{--bg-color: #f4f1e8;--text-color: #2b2b2b;--header-color: #8b4513;--card-bg: #fffef9;--border-color: #d4c5a9;--code-bg: #ebe6d9;--code-text: #8b4513;--code-block-bg: #3e3428;--code-block-text: #f4f1e8;--panel-header-bg: #ebe6d9;--shadow: rgba(139, 69, 19, .1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg-color);color:var(--text-color);transition:background .3s,color .3s}.container,.view-container{max-width:1400px;margin:0 auto;padding:20px;min-height:100vh}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:20px;border-bottom:2px solid var(--border-color)}.header h1{font-size:2rem;color:var(--header-color);font-weight:600}.header-actions{display:flex;gap:10px;align-items:center}.btn{padding:10px 20px;background:#3498db;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1rem;font-weight:500;transition:background .3s;text-decoration:none;display:inline-block}.btn:hover{background:#2980b9}.btn:disabled{background:#95a5a6;cursor:not-allowed}.btn-secondary{padding:10px 20px;background:#95a5a6;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1rem;font-weight:500;transition:background .3s;text-decoration:none;display:inline-block}.btn-secondary:hover{background:#7f8c8d}.btn-icon{padding:8px 12px;background:var(--card-bg);color:var(--text-color);border:2px solid var(--border-color);border-radius:5px;cursor:pointer;font-size:1.2rem;transition:all .3s}.btn-icon:hover{transform:scale(1.1);border-color:#3498db}.btn-small{padding:6px 12px;background:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.85rem;font-weight:500;transition:background .3s}.btn-small:hover{background:#2980b9}.editor-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:calc(100vh - 140px)}.editor-panel,.preview-panel{display:flex;flex-direction:column;background:var(--card-bg);border-radius:8px;box-shadow:0 2px 8px var(--shadow);overflow:hidden}.editor-panel h2,.preview-panel h2{padding:15px 20px;background:var(--panel-header-bg);font-size:1.1rem;font-weight:600;color:var(--header-color);border-bottom:1px solid var(--border-color)}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:var(--panel-header-bg);border-bottom:1px solid var(--border-color)}.preview-header h2{padding:0;border:none;background:none;margin:0}#editor{flex:1;padding:20px;border:none;font-family:Monaco,Courier New,monospace;font-size:14px;line-height:1.6;resize:none;outline:none;background:var(--card-bg);color:var(--text-color)}.preview{flex:1;padding:20px;overflow-y:auto;line-height:1.8}.preview h1,.preview h2,.preview h3,.preview h4,.preview h5,.preview h6{margin-top:1.5em;margin-bottom:.5em;color:var(--header-color)}.preview h1{font-size:2em}.preview h2{font-size:1.5em}.preview h3{font-size:1.3em}.preview p{margin-bottom:1em}.preview code{background:var(--code-bg);color:var(--code-text);padding:2px 6px;border-radius:3px;font-family:Monaco,Courier New,monospace;font-size:.9em}.preview pre{background:var(--code-block-bg);color:var(--code-block-text);padding:15px;border-radius:5px;overflow-x:auto;margin:1em 0}.preview pre code{background:none;padding:0;color:inherit}.preview ul,.preview ol{margin-left:2em;margin-bottom:1em}.preview blockquote{border-left:4px solid #3498db;padding-left:1em;margin:1em 0;color:#666;font-style:italic}.preview a{color:#3498db;text-decoration:none}.preview a:hover{text-decoration:underline}.preview img{max-width:100%;height:auto}.preview table{border-collapse:collapse;width:100%;margin:1em 0}.preview th,.preview td{border:1px solid var(--border-color);padding:8px 12px;text-align:left}.preview th{background:var(--code-bg);font-weight:600}.placeholder{color:#999;font-style:italic}.loading{display:flex;align-items:center;justify-content:center;color:#666}.error{color:#e74c3c}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--card-bg);padding:30px;border-radius:10px;box-shadow:0 4px 20px #0000004d;max-width:500px;width:90%}.modal-content h2{margin-bottom:15px;color:var(--header-color)}.modal-content p{margin-bottom:15px;color:var(--text-color)}.modal-content input{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:5px;font-size:14px;margin-bottom:20px;background:var(--card-bg);color:var(--text-color)}.modal-actions{display:flex;gap:10px;justify-content:flex-end}.view-container .preview{background:var(--card-bg);border-radius:8px;box-shadow:0 2px 8px var(--shadow);padding:40px;max-width:900px;margin:0 auto}.explore-page{min-height:100vh}.explore-content{padding:40px 20px;text-align:center}.explore-title{font-size:2.5rem;color:var(--header-color);margin-bottom:10px}.explore-subtitle{font-size:1.2rem;color:var(--text-color);opacity:.8;margin-bottom:50px}.floating-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:900px;margin:0 auto;padding:20px}.float-box{position:relative;background:var(--card-bg);border-radius:15px;padding:40px 30px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px var(--shadow);overflow:hidden;animation:float 3s ease-in-out infinite}.float-box:nth-child(1){animation-delay:0s}.float-box:nth-child(2){animation-delay:1.5s}.float-box:nth-child(3){animation-delay:.75s}.float-box:nth-child(4){animation-delay:0s}.float-box:nth-child(5){animation-delay:0s}.float-box:nth-child(6){animation-delay:2.25s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.float-box:hover{transform:translateY(-15px) scale(1.02);box-shadow:0 8px 25px var(--shadow)}.box-icon{font-size:4rem;margin-bottom:20px}.float-box h3{font-size:1.5rem;color:var(--header-color);margin-bottom:10px}.float-box p{color:var(--text-color);opacity:.8;font-size:1rem}.box-shine{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);transform:rotate(45deg);transition:all .5s}.float-box:hover .box-shine{left:100%}.how-to-page{min-height:100vh}.content-wrapper{max-width:900px;margin:0 auto}.cheatsheet{background:var(--card-bg);border-radius:8px;padding:40px;box-shadow:0 2px 8px var(--shadow)}.cheatsheet h2{font-size:2rem;color:var(--header-color);margin-bottom:30px;text-align:center}.cheat-section{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.cheat-section:last-child{border-bottom:none}.cheat-section h3{font-size:1.3rem;color:var(--header-color);margin-bottom:15px}.cheat-section pre{background:var(--code-block-bg);color:var(--code-block-text);padding:15px;border-radius:5px;overflow-x:auto;font-size:.9rem;line-height:1.6}.cheat-section code{font-family:Monaco,Courier New,monospace}.latex-highlight{background:linear-gradient(135deg,#3498db0d,#9b59b60d);border:2px solid rgba(52,152,219,.3);border-radius:10px;padding:25px!important;margin-bottom:40px!important;position:relative}.latex-highlight:before{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg,#3498db,#9b59b6);border-radius:10px;opacity:0;z-index:-1;transition:opacity .3s}.latex-highlight:hover:before{opacity:.1}.latex-highlight h3{font-size:1.5rem!important;color:#3498db!important;margin-bottom:15px!important}.latex-highlight p{font-size:1rem;margin-bottom:15px}.katex{font-size:1.1em}.katex-display{margin:1em 0;overflow-x:auto;overflow-y:hidden}.footer{text-align:center;padding:20px;color:#999;font-size:.85rem;border-top:1px solid var(--border-color);margin-top:20px}@media(max-width:768px){.editor-container{grid-template-columns:1fr;height:auto}.editor-panel,.preview-panel{min-height:400px}.header{flex-direction:column;gap:15px;align-items:flex-start}.header h1{font-size:1.5rem}.header-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.modal-actions{flex-direction:column}.modal-actions button{width:100%}.floating-boxes{grid-template-columns:1fr;padding:10px}.explore-title{font-size:2rem}.cheatsheet{padding:20px}}