:root { color: #183846; background: #f3f0e9; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: radial-gradient(circle at 80% 0, #d7eee6 0, transparent 31rem), #f3f0e9; }
main { width: min(100% - 44px, 1320px); margin: 0 auto; padding: 28px 0 76px; }
.studio-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 78px; color: #557078; font-size: 13px; font-weight: 800; }.brand { color: #183846; font-size: 15px; letter-spacing: -.03em; text-decoration: none; }.brand:hover { color: #227465; }
.intro { max-width: 740px; }.eyebrow { margin: 0 0 12px; color: #4d7d79; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }.intro h1 { margin: 0; color: #0d2c3a; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(48px, 6vw, 80px); font-weight: 500; letter-spacing: -.065em; line-height: .9; }.intro h1 em { color: #2d7c72; }.intro > p:last-child { max-width: 650px; margin: 25px 0 42px; color: #4a6770; font-size: 16px; line-height: 1.7; }
.studio { display: grid; grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr); overflow: hidden; border: 1px solid #bdd4cd; border-radius: 16px; background: #f8fcfa; box-shadow: 0 24px 60px rgb(11 48 55 / 12%); }.editor-pane, .preview-pane { min-width: 0; }.editor-pane { display: flex; flex-direction: column; color: #caeee0; background: #102e37; }.preview-pane { padding: 0 24px 30px; background: #f8fcfa; }.pane-bar { display: flex; justify-content: space-between; align-items: center; min-height: 50px; color: #6f918d; border-bottom: 1px solid rgb(172 211 202 / 35%); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.editor-pane .pane-bar { padding: 0 20px; color: #a7d1c4; border-color: rgb(184 229 217 / 18%); }.secure { color: #287866; }
textarea { width: 100%; flex: 1; min-height: 600px; padding: 22px 20px; resize: vertical; color: #e6fff5; border: 0; outline: 0; background: transparent; caret-color: #55d6b2; font: 13px/1.65 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; tab-size: 2; } textarea:focus-visible { box-shadow: inset 0 0 0 2px #55d6b2; } #studio-help { margin: 0; padding: 0 20px 16px; color: #94bab1; font-size: 12px; line-height: 1.5; }.editor-actions { display: flex; gap: 10px; padding: 0 20px 16px; }.editor-actions button { min-height: 38px; padding: 8px 12px; color: #062b32; border: 1px solid #55d6b2; border-radius: 8px; background: #55d6b2; cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; }.editor-actions .quiet { color: #d6f8ee; border-color: #628e87; background: transparent; }.editor-actions button:focus-visible { outline: 3px solid #f4ca70; outline-offset: 2px; } output { min-height: 42px; padding: 0 20px 18px; color: #b9ddd3; font-size: 12px; line-height: 1.45; } output[data-state='error'] { color: #ffaca1; } output[data-state='success'] { color: #82e8bf; }
wisp-grid { display: block; margin: 24px 0 30px; }.integration { padding-top: 24px; border-top: 1px solid #d5e5e0; }.integration-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }.integration h2 { margin: 0; color: #153943; font-size: 21px; letter-spacing: -.04em; }.copy-code { min-height: 36px; padding: 7px 11px; color: #1c6259; border: 1px solid #8fc8bd; border-radius: 8px; background: #eff9f5; cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; }.copy-code:hover { color: #0d443d; border-color: #55a99a; background: #dff2eb; }.copy-code:focus-visible, .framework-tabs button:focus-visible { outline: 3px solid #e1ad3e; outline-offset: 2px; }.framework-tabs { display: flex; gap: 4px; margin-top: 18px; padding-bottom: 1px; overflow-x: auto; border-bottom: 1px solid #d5e5e0; }.framework-tabs button { min-height: 34px; padding: 6px 10px; color: #547176; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; }.framework-tabs button[aria-selected='true'] { color: #176b60; border-bottom-color: #2d9f8c; }.integration pre { max-height: 360px; margin: 16px 0 0; overflow: auto; padding: 18px; color: #c8eee2; border-radius: 10px; background: #102e37; font: 12px/1.6 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }.integration code { white-space: pre; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .studio { grid-template-columns: 1fr; }.preview-pane { padding-bottom: 24px; } textarea { min-height: 480px; }.studio-header { padding-bottom: 54px; } }
@media (max-width: 560px) { main { width: min(100% - 28px, 1320px); padding-top: 20px; }.studio-header { padding-bottom: 45px; }.intro h1 { font-size: 49px; }.intro > p:last-child { font-size: 15px; }.preview-pane { padding-inline: 14px; }.editor-pane .pane-bar, textarea, #studio-help, .editor-actions, output { padding-inline: 15px; }.editor-actions { flex-wrap: wrap; }.integration-heading { align-items: start; flex-direction: column; gap: 12px; }.copy-code { width: 100%; } textarea { min-height: 430px; font-size: 12px; } }