:root{--bg-primary: #0d0d0d;--bg-secondary: #1a1a1a;--bg-tertiary: #262626;--text: #e0e0e0;--text-muted: #9ca3af;--border: #333;--accent: #3b82f6;--accent-hover: #2563eb;--brave-cyan: #01b7af;--brave-cyan-hover: #00d4c4}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text);-webkit-font-smoothing:antialiased}*{scrollbar-color:var(--border) var(--bg-primary);scrollbar-width:thin}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:var(--bg-primary)}*::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}*::-webkit-scrollbar-thumb:hover{background:var(--bg-tertiary)}.editor-line-numbers{scrollbar-width:none;-ms-overflow-style:none}.editor-line-numbers::-webkit-scrollbar{display:none}.preview-content{font-size:1rem;line-height:1.7;word-wrap:break-word}.preview-content>*:first-child{margin-top:0}.preview-content>*:last-child{margin-bottom:0}.preview-content h1,.preview-content h2,.preview-content h3,.preview-content h4,.preview-content h5,.preview-content h6{margin-top:1.6em;margin-bottom:.6em;font-weight:600;line-height:1.3}.preview-content h1{font-size:1.9rem}.preview-content h2{font-size:1.5rem;padding-bottom:.3em;border-bottom:1px solid var(--border)}.preview-content h3{font-size:1.25rem}.preview-content h4{font-size:1.05rem}.preview-content h5{font-size:.95rem}.preview-content h6{font-size:.9rem;color:var(--text-muted)}.preview-content p{margin:.9em 0}.preview-content ul,.preview-content ol{margin:.9em 0;padding-left:1.6em}.preview-content li{margin:.3em 0}.preview-content li>ul,.preview-content li>ol{margin:.3em 0}.preview-content code{background:var(--bg-tertiary);padding:.15em .4em;border-radius:5px;font-size:.875em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.preview-content pre{background:var(--bg-tertiary);padding:1em 1.1em;border-radius:8px;overflow:auto;margin:1em 0;line-height:1.5}.preview-content pre code{background:none;padding:0;font-size:.85em}.preview-content a{color:var(--accent);text-decoration:none}.preview-content a:hover{text-decoration:underline}.preview-content blockquote{border-left:3px solid var(--brave-cyan);margin:1em 0;padding:.2em 0 .2em 1.1em;color:var(--text-muted)}.preview-content blockquote>*:first-child{margin-top:0}.preview-content blockquote>*:last-child{margin-bottom:0}.preview-content img{max-width:100%;height:auto;border-radius:6px}.preview-content hr{border:none;border-top:1px solid var(--border);margin:1.8em 0}.preview-content table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.95em}.preview-content th,.preview-content td{border:1px solid var(--border);padding:.5em .8em;text-align:left}.preview-content th{background:var(--bg-tertiary);font-weight:600}.preview-content tr:nth-child(2n) td{background:#ffffff05}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.split-controls{position:absolute;top:50%;display:flex;flex-direction:column;gap:8px;z-index:10;max-height:calc(100vh - 40px);padding:4px 0}.split-controls-center{left:50%;transform:translate(-50%,-50%)}.split-controls-left{left:50%;transform:translate(-100%,-50%);margin-left:-6px}.split-controls-right{left:50%;transform:translateY(-50%);margin-left:6px}.split-control-button{background:#0d0d0de6;border:1px solid #01b7af;border-radius:4px;padding:6px;cursor:pointer;color:#01b7af;display:flex;align-items:center;justify-content:center;transition:all .2s ease;width:32px;height:32px;position:relative}.split-control-button:hover{background:#01b7af;color:#0d0d0d;transform:scale(1.1)}.split-control-button:active{transform:scale(.95)}.split-control-button svg{pointer-events:none}header[role=toolbar] button{position:relative}header[role=toolbar] button[aria-label]:hover:after,.split-control-button[aria-label]:hover:after{content:attr(aria-label);position:absolute;background:var(--brave-cyan);color:#0d0d0d;border:1px solid var(--brave-cyan);border-radius:6px;padding:4px 8px;font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;pointer-events:none;z-index:1100;box-shadow:0 4px 12px #0006}header[role=toolbar] button[aria-label]:hover:after{top:calc(100% + 8px);left:50%;transform:translate(-50%)}.split-control-button[aria-label]:hover:after{left:calc(100% + 10px);top:50%;transform:translateY(-50%)}.cm-editor .cm-scroller{padding-right:50px!important}.preview-content{padding-right:50px!important;padding-left:50px!important;max-width:860px;margin:0 auto}@keyframes toast-slide-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes toast-fade-out{0%{opacity:1}to{opacity:0;transform:translate(50%)}}@keyframes xp-pulse{0%{box-shadow:0 0 #01b7af66}70%{box-shadow:0 0 0 6px #01b7af00}to{box-shadow:0 0 #01b7af00}}@keyframes level-up{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.achievement-toast{animation:toast-slide-in .3s ease-out}.xp-bar-fill{animation:xp-pulse 1s ease-out}.xp-pulse{animation:xp-pulse .6s ease-out}.level-up{animation:level-up .5s ease-out}.code-block-wrapper{position:relative}.copy-code-button{position:absolute;top:8px;right:8px;background:transparent;border:none;border-radius:4px;padding:6px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:all .2s ease;opacity:0}.code-block-wrapper:hover .copy-code-button{opacity:1}.copy-code-button:hover{background:transparent;color:var(--brave-cyan)}.copy-code-button.copied{color:#10b981}