*{box-sizing:border-box}html,body{height:100%}body{color:#0f172a;background:#f1f5f9;flex-direction:column;margin:0;font:1rem/1.5 system-ui,-apple-system,Segoe UI,sans-serif;display:flex}.topbar{background:#fff;border-bottom:1px solid #d7dde5;align-items:center;gap:1rem;padding:.6rem 1.25rem;display:flex}.wordmark{color:#0f172a;font-size:1.15rem;font-weight:800;text-decoration:none}.topbar-title{color:#0f766e;letter-spacing:.05em;text-transform:uppercase;background:#ccfbf1;border-radius:999px;padding:.2rem .7rem;font-size:.78rem;font-weight:800}.example-picker{color:#475569;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;display:flex}.example-picker select{color:#0f172a;background:#fff;border:1px solid #d7dde5;border-radius:.4rem;max-width:18rem;padding:.35rem .5rem;font-size:.85rem}.example-description{color:#64748b;text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0;font-size:.8rem;overflow:hidden}.status-chip{white-space:nowrap;border-radius:999px;align-items:center;gap:.4rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.status-chip:before{content:"";background:currentColor;border-radius:999px;width:.5rem;height:.5rem}.status-chip[data-state=ready]{color:#0f766e;background:#ccfbf1}.status-chip[data-state=loading]{color:#475569;background:#e2e8f0}.status-chip[data-state=unavailable]{color:#b91c1c;background:#fee2e2}.topbar-link{color:#0f766e;font-size:.85rem;font-weight:700;text-decoration:none}.topbar-link:hover{text-decoration:underline}.workbench{flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;width:100%;max-width:100rem;min-height:0;margin:0 auto;padding:1rem 1.25rem 1.25rem;display:grid}.pane{background:#fff;border:1px solid #d7dde5;border-radius:.75rem;flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden;box-shadow:0 1px 2px #0f172a0d}.pane-header{background:#f8fafc;border-bottom:1px solid #e5eaf0;justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem 1rem;display:flex}.pane-header h2{color:#334155;letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:800}.pane-header-code{border-top:1px solid #e5eaf0}.pane-tools{align-items:center;gap:.6rem;display:flex}.pane-tools kbd{color:#64748b;border:1px solid #d7dde5;border-radius:.3rem;padding:.15rem .4rem;font-size:.7rem}.pane-tools button{color:#fff;cursor:pointer;background:#0f766e;border:0;border-radius:.4rem;min-height:1.9rem;padding:.3rem 1rem;font-size:.82rem;font-weight:700;transition:background .12s}.pane-tools button:hover{background:#115e59}.pane-tools button:disabled{opacity:.55;cursor:default}.editor-host{flex:1;min-height:0}.editor-host .cm-editor{height:100%}.tag-chip{color:#0f766e;font-size:.82rem;font-weight:600}.stage{background:radial-gradient(circle at 1px 1px,#dbe3ec 1px,#0000 0) 0 0/18px 18px,linear-gradient(#fbfdff,#f2f6fa);flex:none;place-items:center;min-height:10rem;padding:1.5rem;display:grid}.notice{color:#9a3412;background:#fff7ed;border:1px solid #f4c7ab;border-radius:.5rem;margin:.75rem;padding:.75rem 1rem}.notice-page{margin:0 1.25rem 1.25rem}.diagnostics{color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:.5rem;margin:.75rem;padding:.75rem}.diagnostics h3{letter-spacing:.05em;text-transform:uppercase;margin:0 0 .5rem;font-size:.8rem}.diagnostics ul{margin:0;padding-left:1.1rem;font-size:.85rem}.core-chip{color:#94a3b8;font-size:.75rem;font-weight:600}.generated{flex:1;min-height:8rem;display:grid;overflow:hidden}.generated pre,.generated .shiki{margin:0;padding:1rem;font-size:.8rem;line-height:1.55;overflow:auto}.generated pre{color:#abb2bf;background:#282c34;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}@media (width<=960px){.topbar{flex-wrap:wrap}.example-description{display:none}.workbench{grid-template-columns:1fr}.pane-editor{min-height:24rem}}