.toolbar{display:flex;align-items:center;gap:10px;padding:10px 14px}.toolbar .btn{appearance:none;display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#0e1627,#0b1220);color:#e5e7eb;font-weight:600;letter-spacing:.2px;cursor:pointer;box-shadow:inset 0 1px #ffffff0d,0 6px 14px #00000059;transition:transform .12s ease,box-shadow .12s ease,border-color .2s ease,background .2s ease,filter .2s ease}.toolbar .btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffffff14,0 10px 20px #00000073,0 0 0 3px #60a5fa2e}.toolbar .btn:active{transform:translateY(0);box-shadow:inset 0 1px #ffffff0d,0 6px 14px #00000059,0 0 0 2px #60a5fa2e}.toolbar .btn:focus-visible{outline:none;box-shadow:0 0 0 3px #60a5fa59,0 6px 14px #00000059}.toolbar .btn:before{content:"";width:16px;height:16px;display:inline-block;background:currentColor}.toolbar .btn--reset{color:#fbbf24;border-color:#fbbf2440}.toolbar .btn--reset:hover{background:linear-gradient(180deg,#131b2d,#0d1424)}.toolbar .btn--reset:before{-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23000" viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.309 0 6 2.691 6 6s-2.691 6-6 6a5.996 5.996 0 0 1-5.65-4H4.061a8.003 8.003 0 0 0 7.939 6c4.411 0 8-3.589 8-8s-3.589-8-8-8z"/></svg>') center / contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23000" viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.309 0 6 2.691 6 6s-2.691 6-6 6a5.996 5.996 0 0 1-5.65-4H4.061a8.003 8.003 0 0 0 7.939 6c4.411 0 8-3.589 8-8s-3.589-8-8-8z"/></svg>') center / contain no-repeat}.toolbar .btn--download{color:#93c5fd;border-color:#93c5fd40}.toolbar .btn--download:hover{background:linear-gradient(180deg,#131b2d,#0d1424)}.toolbar .btn--download:before{-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23000" viewBox="0 0 24 24"><path d="M11 3h2v8h3l-4 4-4-4h3z"/><path d="M5 19h14v2H5z"/></svg>') center / contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23000" viewBox="0 0 24 24"><path d="M11 3h2v8h3l-4 4-4-4h3z"/><path d="M5 19h14v2H5z"/></svg>') center / contain no-repeat}.theme-icon{margin-left:auto;font-size:18px;line-height:1;padding:6px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px}.theme-icon:focus-visible{outline:2px solid rgba(96,165,250,.6);outline-offset:2px}:root{--bg: #0b1220;--panel: #0f172a;--panel-2: #0c1224;--text: #e5e7eb;--muted: #9ca3af;--accent: #60a5fa;--border: rgba(255, 255, 255, .08);--shadow: 0 10px 30px rgba(0, 0, 0, .35)}html,body,#root{height:100%;margin:0}body{min-height:100svh;background:radial-gradient(80vmax 80vmax at 10% 10%,#15213a 0%,transparent 45%),radial-gradient(80vmax 80vmax at 90% 0%,#0b3a5c 0%,transparent 40%),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background-attachment:fixed;overflow-x:hidden}.app-shell{min-height:100%;display:grid;grid-template-rows:auto 1fr}.app-header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,#0f172ae6,#0f172ab3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;min-height:0}.pane{border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,var(--panel),var(--panel-2));box-shadow:var(--shadow);min-height:0;display:flex;flex-direction:column}@media (max-width: 1024px){.split{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr)}}.editor{flex:1;width:100%;min-height:0;padding:16px 18px;resize:none;border:0;outline:none;background:transparent;color:var(--text);font:500 14px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;caret-color:var(--accent);tab-size:2;-moz-tab-size:2}.editor::-webkit-scrollbar{width:10px}.editor::-webkit-scrollbar-thumb{background:#223150;border-radius:8px;border:2px solid transparent;background-clip:content-box}.preview{flex:1;overflow:auto;padding:18px 20px}.preview h1{font-size:clamp(1.6rem,3vw,2rem);margin:0 0 12px}.preview h2{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:18px 0 10px}.preview h3{font-size:1.15rem;margin:16px 0 8px}.preview p,.preview ul,.preview ol,.preview blockquote,.preview pre,.preview table{margin:8px 0 12px}.preview a{color:#93c5fd;text-decoration:none}.preview a:hover{text-decoration:underline}.preview blockquote{margin:12px 0;padding:10px 14px;border-left:3px solid #334155;background:#94a3b80f;color:#cbd5e1;border-radius:8px}.preview code{font:500 13px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;background:#94a3b81f;padding:2px 6px;border-radius:6px}.preview pre{background:#0b1220;padding:14px;border-radius:10px;border:1px solid var(--border);overflow:auto}.preview img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--border)}.preview ul,.preview ol{padding-left:24px}.preview li{margin:4px 0}:root[data-theme=light]{--bg: #f4f6fb;--panel: #ffffff;--panel-2: #f8fafc;--text: #0f172a;--muted: #475569;--accent: #2563eb;--border: rgba(0, 0, 0, .08);--shadow: 0 8px 20px rgba(0, 0, 0, .08)}:root[data-theme=light] body{background:radial-gradient(80vmax 80vmax at 12% 8%,#e7efff 0%,transparent 45%),radial-gradient(80vmax 80vmax at 90% 0%,#e0fbff 0%,transparent 40%),var(--bg);color:var(--text);background-attachment:fixed}:root[data-theme=light] .pane{background:linear-gradient(180deg,var(--panel),var(--panel-2));box-shadow:var(--shadow)}:root[data-theme=light] .preview a{color:#2563eb}:root[data-theme=light] .preview blockquote{border-left-color:#cbd5e1;background:#f1f5f9;color:#334155}:root[data-theme=light] .preview code{background:#e2e8f0;color:#0f172a}:root[data-theme=light] .preview pre{background:#f8fafc;border-color:#00000014}:root[data-theme=light] .editor::-webkit-scrollbar-thumb{background:#cbd5e1}:root[data-theme=light] .app-header{background:linear-gradient(180deg,#ffffffd9,#ffffffb3);border-bottom-color:#0000000f}:root[data-theme=light] .toolbar .btn{background:linear-gradient(180deg,#fff,#f8fafc);color:#0f172a;border-color:#0000001a}:root[data-theme=light] .toolbar .btn--reset{color:#b45309;border-color:#b4530940}:root[data-theme=light] .toolbar .btn--download{color:#2563eb;border-color:#2563eb40}:root[data-theme=light] .toolbar .btn--theme{color:#4338ca;border-color:#4338ca40}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}