:root{--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--background:#0a0a0a;--foreground:#fafafa;--card:#0a0a0a;--muted:#171717;--muted-foreground:#a3a3a3;--border:#262626;--input:#262626;--primary:#fafafa;--primary-foreground:#171717;--destructive:#f87171;--ring:#d4d4d4;--accent:#e34f26;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}[data-framework=html]{--accent:#e34f26}[data-framework=react]{--accent:#61dafb}[data-framework=nextjs]{--accent:#fafafa}*{box-sizing:border-box}html,body{height:100%;font-family:var(--font);color:var(--foreground);background:var(--background);margin:0}.showcase{flex-direction:column;height:100vh;display:flex}.showcase-header{background:var(--background);border-bottom:1px solid var(--border);height:64px;box-shadow:inset 0 -2px 0 var(--accent);grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 20px;transition:box-shadow .2s;display:grid}.showcase-title{color:var(--muted-foreground);align-items:center;gap:12px;font-size:14px;display:flex}.showcase-title svg{color:var(--foreground)}.showcase-title strong{color:var(--foreground);font-weight:600}.showcase-title-divider{background:var(--border);width:1px;height:20px}.showcase-toggle{border:1px solid var(--border);background:var(--muted);border-radius:10px;gap:4px;padding:4px;display:flex}.showcase-toggle-option{min-width:168px;color:var(--muted-foreground);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:center;gap:10px;padding:7px 12px;transition:background .15s,color .15s;display:flex;position:relative}.showcase-toggle-option:hover{color:var(--foreground)}.showcase-toggle-option[aria-pressed=true]{background:var(--background);color:var(--foreground);box-shadow:0 1px 2px #00000080, 0 0 0 1px var(--border)}.showcase-toggle-option:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.showcase-toggle-logo{background:var(--muted);border-radius:6px;flex:none;place-items:center;width:28px;height:28px;display:grid}.showcase-toggle-logo svg{width:20px;height:20px}.showcase-toggle-text{flex-direction:column;line-height:1.2;display:flex}.showcase-toggle-text span{font-size:14px;font-weight:600}.showcase-toggle-text small{color:var(--muted-foreground);font-size:11px}.showcase-toggle-offline{background:#f59e0b;border-radius:50%;width:7px;height:7px;position:absolute;top:8px;right:8px}.showcase-actions{justify-content:flex-end;align-items:center;gap:12px;display:flex}.showcase-stage{flex:1;min-height:0;position:relative}.showcase-frame{position:absolute;inset:0}.showcase-frame[hidden]{display:none}.showcase-frame iframe{background:var(--background);border:0;width:100%;height:100%;display:block}.showcase-offline{text-align:center;height:100%;color:var(--muted-foreground);place-content:center;justify-items:center;gap:8px;display:grid}.showcase-offline-logo svg{width:48px;height:48px}.showcase-offline h2{color:var(--foreground);margin:8px 0 0;font-size:18px}.showcase-offline code{background:var(--muted);font-family:var(--mono);border-radius:6px;padding:2px 6px;font-size:13px}.user-menu{position:relative}.user-menu-avatar{border:1px solid var(--border);background:var(--muted);width:34px;height:34px;color:var(--foreground);font:600 14px var(--font);cursor:pointer;border-radius:50%;place-items:center;display:grid}.user-menu-popover{z-index:10;border:1px solid var(--border);background:var(--background);width:240px;color:var(--foreground);border-radius:8px;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 10px 30px #00000080}.user-menu-identity{border-bottom:1px solid var(--border);color:var(--muted-foreground);flex-direction:column;gap:2px;padding:12px 14px;font-size:12px;display:flex}.user-menu-identity strong{color:var(--foreground);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.user-menu-signout{width:100%;color:var(--foreground);font:14px var(--font);text-align:left;cursor:pointer;background:0 0;border:0;padding:10px 14px}.user-menu-signout:hover{background:var(--muted)}.login{background:var(--background);place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{border:1px solid var(--border);background:var(--card);text-align:center;border-radius:12px;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:500px;padding:52px 48px;display:flex;box-shadow:0 1px 2px #0006}.login-brand{color:var(--foreground)}.login-logos{gap:8px;display:flex}.login-logos span{border:1px solid var(--border);background:var(--muted);border-radius:8px;place-items:center;width:40px;height:40px;display:grid}.login-logos svg{width:24px;height:24px}.login-card h1{letter-spacing:-.02em;margin:4px 0 0;font-size:24px;font-weight:600}.login-card p{color:var(--muted-foreground);margin:0;font-size:15px;line-height:1.55}.login-actions{flex-direction:column;align-items:center;gap:10px;margin-top:8px;display:flex}.login-actions iframe{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}.login-error{color:var(--destructive);font-size:13px}