:root{color:#172033;background:#f3f6fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button,textarea{font:inherit}button{border:1px solid #c8d1dc;border-radius:6px;background:#fff;color:#172033;cursor:pointer;font-weight:700;min-height:38px;padding:0 14px}button:hover:not(:disabled){border-color:#0f766e;color:#0f766e}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{min-height:100vh;padding:24px}.topbar{align-items:center;display:flex;gap:20px;justify-content:space-between;margin:0 auto 16px;max-width:1480px}.eyebrow{color:#59657a;font-size:12px;font-weight:800;letter-spacing:0;margin:0 0 4px;text-transform:uppercase}h1,h2,p{margin:0}h1{font-size:28px;line-height:1.15}h2{font-size:15px;line-height:1.2}.actions{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.toggle{align-items:center;color:#3a4658;display:inline-flex;font-size:14px;font-weight:700;gap:8px;min-height:38px}.toggle input{accent-color:#0f766e;height:16px;width:16px}.status-row{align-items:center;color:#4a566b;display:flex;flex-wrap:wrap;gap:14px;margin:0 auto 16px;max-width:1480px}.status-row span{font-size:13px;font-weight:700}.status-dot{background:#0f766e;border-radius:999px;display:inline-block;height:10px;width:10px}.status-dot.warning{background:#b45309}.workspace{display:grid;gap:16px;grid-template-columns:minmax(320px,.9fr) minmax(360px,1.1fr);margin:0 auto;max-width:1480px}.editor-pane,.output-pane,.diagnostics{background:#fff;border:1px solid #d8e0ea;border-radius:8px;box-shadow:0 18px 42px #1c273914}.editor-pane,.output-pane{min-height:68vh;overflow:hidden}.pane-header{align-items:center;border-bottom:1px solid #d8e0ea;display:flex;justify-content:space-between;min-height:50px;padding:0 14px}.subtle{background:#f7f9fc;min-height:32px}textarea{background:#121826;border:0;color:#e6edf6;display:block;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:14px;height:calc(68vh - 50px);line-height:1.55;outline:none;padding:16px;resize:none;tab-size:2;width:100%}.tabs,.preview-switch{background:#eef2f7;border:1px solid #d8e0ea;border-radius:7px;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px}.tabs button,.preview-switch button{background:transparent;border:0;min-height:32px}.tabs button.active,.preview-switch button.active{background:#fff;box-shadow:0 1px 4px #1c273929}.preview-switch{min-width:168px}.preview-switch button{font-size:13px;padding:0 10px}.preview-frame{align-items:stretch;background:#e8edf4;display:flex;height:calc(68vh - 50px);justify-content:center;overflow:auto;padding:0}.preview-frame.desktop{background:#fff}.preview-frame.mobile{padding:18px}.preview-frame iframe{background:#fff;border:0;display:block;min-height:100%;width:100%}.preview-frame.mobile iframe{border:1px solid #cad4e1;border-radius:8px;box-shadow:0 16px 32px #1c273929;flex:0 0 390px;max-width:100%;width:390px}.html-output{background:#121826;color:#e6edf6;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:13px;height:calc(68vh - 50px);line-height:1.5;margin:0;overflow:auto;padding:16px;white-space:pre-wrap}.diagnostics{margin:16px auto 0;max-width:1480px;padding:14px}.diagnostics h2{margin-bottom:10px}.diagnostics p{color:#4a566b;font-size:14px}.diagnostics ul{display:grid;gap:8px;list-style:none;margin:0;padding:0}.diagnostics li{border-left:3px solid #b45309;padding:2px 0 2px 10px}.diagnostics span{color:#7c2d12;display:block;font-size:12px;font-weight:800;margin-bottom:3px}@media(max-width:900px){.app-shell{padding:16px}.topbar{align-items:flex-start;flex-direction:column}.actions{justify-content:flex-start}.pane-header{align-items:flex-start;flex-direction:column;gap:10px;padding:10px 14px}.workspace{grid-template-columns:1fr}.editor-pane,.output-pane{min-height:52vh}textarea,.preview-frame,.html-output{height:calc(52vh - 70px)}.preview-frame.mobile{padding:12px}}