@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--background:#fcfcf9;--foreground:#14343b;--card:#fffffc;--popover:#fffffc;--primary:#007b86;--primary-foreground:#fff;--accent:#e0efef;--border:#e6e8e6;--muted:#e3e9ea;--muted-foreground:#626e71;--ring:#3699a5;--radius:.75rem;--font-sans:Rubik, sans-serif;--shadow-sm:0px 2px 1px 0px oklch(0% 0 0/.07), 0px 1px 2px -1px oklch(0% 0 0/.07);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--background)}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--background);min-height:100%;color:var(--foreground);font-family:var(--font-sans);margin:0}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}.app-shell{background:radial-gradient(900px 420px at 92% -16%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 65%), linear-gradient(180deg, color-mix(in srgb, var(--background) 92%, var(--accent)), var(--background));min-height:100vh}.theme-header{z-index:20;border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--card) 88%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0}.theme-header__inner{justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;display:flex}.theme-header__brand{align-items:center;gap:12px;display:flex}.brand-mark{background:color-mix(in srgb, var(--primary) 12%, transparent);border-radius:999px;width:32px;height:32px}.theme-header__title{font-weight:700}.theme-header__actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.theme-picker{border:1px solid var(--border);background:var(--card);border-radius:999px;gap:8px;padding:4px;display:inline-flex}.theme-picker button{cursor:pointer;background:0 0;border:none;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}.theme-picker button.active{background:var(--primary);color:var(--primary-foreground)}.page{padding:24px}.studio-page{max-width:1600px;margin:0 auto}.studio-shell{grid-template-columns:minmax(0,1.6fr) minmax(320px,380px);align-items:start;gap:16px;display:grid}.card{border-radius:calc(var(--radius) + 2px);border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-sm);padding:20px}.preview-card{flex-direction:column;gap:16px;display:flex}.preview-card__head{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.eyebrow{color:var(--primary);font-size:12px;font-weight:700}.preview-card h1{margin:6px 0 8px;font-size:clamp(1.9rem,3vw,3rem);line-height:1}.preview-card__meta{color:var(--muted-foreground);margin:0;font-size:13px}.preview-stage-shell{border-radius:calc(var(--radius) + 8px);background:#10171e;padding:16px}.preview-host-shell{border-radius:calc(var(--radius) + 2px);aspect-ratio:var(--preview-aspect);background:#0d1218;position:relative;overflow:hidden}.preview-host{position:absolute;inset:0}.preview-canvas{max-width:100%;max-height:100%;display:block;width:100%!important;height:100%!important}.preview-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.preview-summary__item{color:var(--muted-foreground);font-size:13px;line-height:1.55}.sidebar-stack{gap:16px;display:grid}.controls-card{position:sticky;top:88px}.panel-section+.panel-section{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}.panel-section{gap:12px;display:grid}.panel-section--copy{padding-inline:12px}.field,.theme-choice__copy{flex-direction:column;gap:6px;display:flex}.field-label,.field-legend{font-size:14px;font-weight:700;line-height:1.35}.field-legend{margin:0 0 2px}.field-title{font-size:14px;font-weight:700}.field-description{color:var(--muted-foreground);margin:0;font-size:12px;line-height:1.55}.field-hint{color:var(--muted-foreground);font-size:12px;line-height:1.45}.button-row{flex-wrap:wrap;gap:8px;display:flex}.btn{border-radius:calc(var(--radius) - 2px);background:var(--primary);color:var(--primary-foreground);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:8px 14px;font-size:13px;font-weight:700;display:inline-flex}.btn--outline{border-color:var(--border);color:var(--foreground);background:0 0}.switch-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.switch{width:40px;height:22px;position:relative}.switch input{opacity:0;width:0;height:0}.switch span{background:var(--muted);border-radius:999px;position:absolute;inset:0}.switch span:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.switch input:checked+span{background:var(--primary)}.switch input:checked+span:after{transform:translate(18px)}.range-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.theme-choice-list,.choice-card-list{gap:10px;display:grid}.theme-choice,.choice-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--background);text-align:left;cursor:pointer;align-items:center;gap:12px;width:100%;padding:12px 14px;display:flex}.choice-card{flex-direction:column;align-items:flex-start}.theme-choice--active,.choice-card--active{border-color:var(--ring);background:color-mix(in srgb, var(--accent) 28%, var(--background))}.theme-choice__swatch{background:radial-gradient(circle at 24% 26%, var(--swatch-b), transparent 46%), radial-gradient(circle at 76% 72%, var(--swatch-c), transparent 42%), linear-gradient(160deg, var(--swatch-a), #ffffff14);border-radius:14px;width:52px;height:52px}.theme-choice strong,.choice-card strong{font-size:14px;display:block}.theme-choice small,.choice-card span{color:var(--muted-foreground);font-size:12px}.input,.textarea{border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:var(--popover);width:100%;padding:10px 12px;font-size:14px;line-height:1.45}.textarea{resize:vertical;min-height:90px}.copy-grid{grid-template-columns:1fr;gap:14px;display:grid}input[type=range]{width:100%;accent-color:var(--primary)}@media (width<=1180px){.studio-shell{grid-template-columns:1fr}.controls-card{position:static}.preview-summary,.copy-grid{grid-template-columns:1fr}}@media (width<=760px){.theme-header__inner,.preview-card__head{flex-direction:column;align-items:stretch}.page{padding:16px}}
