*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#171717;--surface:#1e1e1e;--surface-alt:#262626;--border:#333;--text:#e0e0e0;--text-muted:#888;--accent:#a3e635;--accent-hover:#bef264;--radius:10px;--font-mono:"SF Mono","Fira Code","Cascadia Code",monospace;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--transition:.2s ease}html,body{font-family:var(--font-sans);background:var(--bg);color:var(--text);overflow:hidden;height:100%}#panels{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--border);gap:1px;height:100vh}.panel{display:flex;background:var(--surface);overflow:hidden;flex-direction:column;transition:all .3s}.panel.fullscreen{position:fixed;z-index:100;grid-column:unset;inset:0}.panel.hidden{display:none}.panel-restore{display:flex;background:var(--surface);cursor:pointer;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;writing-mode:vertical-lr;transition:background var(--transition),color var(--transition);border:none;justify-content:center;align-items: center;min-width:2.5rem;padding:.75rem 0;font-size:.7rem;font-weight:600}.panel-restore:hover{background:var(--surface-alt);color:var(--accent)}.panel-header{display:flex;background:var(--surface-alt);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items: center;padding:.5rem 1rem}.panel-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.75rem;font-weight:600}.panel-actions{display:flex;gap:.25rem}.btn-icon{display:inline-flex;color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items: center;padding:.3rem;line-height:1}.btn-icon:hover{color:var(--accent);border-color:var(--accent);background:#a3e6351a}.btn-icon:active{transform:scale(.92)}.btn-correct.active{color:var(--accent);border-color:var(--accent);background:#a3e63526}.btn-icon svg{display:block}textarea,#preview{background:var(--bg);color:var(--text);font-family:var(--font-mono);resize:none;overflow-y:auto;overflow-x:hidden;outline:none;scrollbar-width:thin;scrollbar-color:var(--border)transparent;border:none;flex:1;padding:1rem 1.25rem;font-size:.875rem;line-height:1.65}textarea::placeholder{color:var(--text-muted);font-style:italic}textarea:focus{box-shadow:inset 0 0 0 1px var(--accent)}#preview{font-family:var(--font-sans);scroll-snap-type:y proximity}#preview h1,#preview h2,#preview h3,#preview h4{scroll-snap-align:start;color:var(--accent-hover);margin-top:1.25em;margin-bottom:.5em;line-height:1.3}#preview h1{font-size:1.75rem}#preview h2{font-size:1.4rem}#preview h3{font-size:1.15rem}#preview h4{font-size:1rem}#preview p{margin-bottom:.75em}#preview hr{border:none;border-top:1px solid var(--border);margin:1.5em 0}#preview code{font-family:var(--font-mono);background:#a3e63514;border-radius:4px;padding:.15em .4em;font-size:.85em}#preview pre{border-radius:var(--radius);overflow-x:auto;background:#0d1117;margin:.75em 0;padding:1rem}#preview pre code{background:0 0;padding:0}#preview blockquote{border-left:3px solid var(--accent);color:var(--text-muted);border-radius:0 var(--radius)var(--radius)0;background:#a3e6350a;margin:.75em 0;padding:.5em 1em}#preview ul,#preview ol{margin-bottom:.75em;padding-left:1.5em}#preview li{margin-bottom:.25em}#preview a{color:var(--accent);text-decoration:none}#preview a:hover{text-decoration:underline}#preview table{border-collapse:collapse;width:100%;margin:.75em 0}#preview th,#preview td{border:1px solid var(--border);text-align:left;padding:.5em .75em}#preview th{background:var(--surface-alt);font-weight:600}#preview img{border-radius:var(--radius);max-width:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (max-width:900px){#panels{grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr}}.toast{position:fixed;background:var(--surface-alt);color:var(--accent);border:1px solid var(--accent);opacity:0;pointer-events:none;z-index:200;border-radius:999px;padding:.5rem 1.25rem;transition:all .3s;font-size:.8rem;font-weight:500;bottom:1.5rem;left:50%;transform:translate(-50%)translateY(100%)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}