@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{color:#1f160e;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f7efe5;font-family:Space Grotesk,system-ui,sans-serif;font-weight:400;line-height:1.5}*,:before,:after{box-sizing:border-box}body{background:radial-gradient(circle at 0 0,#fff8ec 0%,#fff4dd66 40%,#0000 65%),radial-gradient(circle at 20% 30%,#ffd6aa66 0%,#0000 55%),linear-gradient(160deg,#f7efe5,#f2e2cc);min-width:320px;min-height:100vh;margin:0}a{color:inherit;text-decoration:none}#app{width:100%}pre code.hljs{padding:1em;display:block;overflow-x:auto}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#005cc5}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-comment,.hljs-code,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}.page{flex-direction:column;gap:28px;min-height:100vh;padding:36px clamp(20px,6vw,72px) 64px;display:flex}.hero{background:linear-gradient(120deg,#ffffffd1,#fff3e0e6);border:1px solid #fffc;border-radius:24px;justify-content:space-between;gap:24px;padding:28px 32px;display:flex;box-shadow:0 18px 50px #140c041f}.hero-actions{align-items:flex-start;gap:16px;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:#7c3f00;margin:0 0 8px;font-size:12px;font-weight:700}h1{color:#1c1208;margin:0;font-size:clamp(28px,4vw,44px)}.subtitle{color:#4a3120;max-width:520px;margin:10px 0 0;font-size:16px;line-height:1.6}.language-switch{background:#fff8ecd9;border:1px solid #7c3f0026;border-radius:14px;flex-direction:column;gap:8px;padding:10px 14px;display:flex}.language-label{color:#7c3f00;letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:700}.language-buttons{gap:8px;display:flex}.language-button{color:#5c3a1c;cursor:pointer;letter-spacing:.04em;background:#fffdf8;border:1px solid #1c120833;border-radius:10px;padding:6px 12px;font-size:12px;font-weight:700}.language-button:hover{background:#fce6c8}.language-button.active{color:#fff1dc;background:#1b120a;border-color:#1b120a}.badge{color:#fff1dc;letter-spacing:.08em;text-transform:uppercase;background:#1b120a;border-radius:999px;align-self:flex-start;padding:10px 16px;font-size:13px}.workspace{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}.pane{background:#ffffffd9;border:1px solid #ffffffa6;border-radius:20px;flex-direction:column;gap:18px;min-height:520px;padding:24px;display:flex;box-shadow:0 16px 40px #100c0614}.pane-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.pane-header h2{color:#1f160e;margin:0;font-size:20px}.pane-header p{color:#6b4c35;margin:6px 0 0;font-size:14px}.toolbar{flex-wrap:wrap;gap:8px;display:flex}.toolbar button{color:#1c1208;cursor:pointer;background:#fff8ec;border:1px solid #1c120833;border-radius:10px;padding:6px 10px;font-size:12px;font-weight:600}.toolbar button:hover{background:#fce6c8}.editor{color:#1f160e;resize:none;background:#fffdf8;border:1px solid #1c120826;border-radius:16px;flex:1;width:100%;padding:18px;font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;line-height:1.7;box-shadow:inset 0 1px 6px #1a140c14}.editor:focus{outline:2px solid #c7772a99}.preview{background:0 0;flex:1;padding:12px 6px 0;overflow:auto}.custom-preview-pane{grid-column:1/-1}.preview-custom{padding:12px 16px 0}.preview-custom h2.custom-title{color:#6b3a0b;letter-spacing:.02em;border-bottom:2px solid #f7a34659;margin-top:28px;padding-bottom:6px}.preview-custom blockquote.custom-quote{color:#5a3a1a;background:linear-gradient(90deg,#ffefdbb3,#ffffffe6);border-left:4px solid #f2a357;margin:18px 0;padding:12px 18px;font-style:italic}.preview-custom pre{background:#f6f8fa;border:1px solid #1b1f2414;border-radius:12px;padding:14px 16px;overflow:auto}.status{text-transform:uppercase;letter-spacing:.1em;color:#b05a00;background:#ffaa5633;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}@media (max-width:1024px){.hero{flex-direction:column}.hero-actions{flex-wrap:wrap;justify-content:space-between;width:100%}.workspace{grid-template-columns:1fr}.pane{min-height:420px}}