*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:#f5f6f8}.app{max-width:1100px;margin:0 auto;padding:0 24px 56px;font:14px/1.5 system-ui,-apple-system,sans-serif;color:#1a1a1a}.hero{text-align:center;padding:56px 0 32px}.hero h1{font-size:clamp(28px,4.5vw,42px);margin:0 0 4px;font-weight:700;letter-spacing:-.03em;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;color:#6a1b9a}.hero .tagline{font-size:clamp(15px,2vw,18px);font-weight:600;color:#1a1a1a;margin:0 0 14px}.hero .lead{font-size:17px;line-height:1.6;color:#444;max-width:660px;margin:0 auto 32px}.hero code{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;background:#ececf0;padding:1px 5px;border-radius:4px;font-size:.9em}.steps{list-style:none;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:0;padding:0;text-align:left}.step{flex:1 1 240px;max-width:320px;display:flex;gap:12px;background:#fff;border:1px solid #e6e6ea;border-radius:10px;padding:16px 18px}.step .num{flex:0 0 26px;height:26px;width:26px;display:grid;place-items:center;border-radius:50%;background:#6a1b9a;color:#fff;font-weight:700;font-size:13px}.step strong{display:block;margin-bottom:4px}.step p{margin:0;font-size:13px;color:#555;line-height:1.5}.step code{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.9em}.toolbar{display:flex;gap:12px;align-items:center;margin:8px 0 10px}.grow{flex:1}.status{font-size:13px;color:#555}.status.err{color:#c62828}.workspace{height:min(60vh,560px);border:1px solid #e2e2e2;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #0000000a}main{height:100%;display:flex;min-height:0;position:relative}.editor{flex:none;height:100%;border:0;padding:12px;font-family:ui-monospace,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:13px;line-height:1.45;resize:none;outline:none;-moz-tab-size:4;tab-size:4;white-space:pre;overflow:auto}.gutter{flex:0 0 6px;cursor:col-resize;background:#e6e6e6;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6}.gutter:hover{background:#cdcdcd}.drag-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;cursor:col-resize;-webkit-user-select:none;user-select:none}.preview{flex:1;min-width:0;background:#fafafa}.preview iframe{display:block;width:100%;height:100%;border:0}footer{margin-top:20px;text-align:center;font-size:12px;color:#888}footer a{color:#6a1b9a}select,button{font:inherit;padding:6px 10px;border:1px solid #ccc;border-radius:6px;background:#fff;cursor:pointer}button:disabled{opacity:.5;cursor:default}button.enhance{border-color:#6a1b9a;color:#6a1b9a;font-weight:600}button.enhance:not(:disabled):hover{background:#f5eefb}