.builder-breadcrumb{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;color:#94a3b8;font-size:.8rem}.builder-breadcrumb a{display:inline-flex;align-items:center;gap:.35rem;color:#475569;font-weight:700;text-decoration:none}.builder-breadcrumb a:hover{color:#2563eb}.builder-breadcrumb loomi-icon{width:.9rem;height:.9rem}.dark .builder-breadcrumb a{color:#cbd5e1}.builder-hero{display:grid;gap:2rem;overflow:hidden;border:1px solid rgb(219 234 254);border-radius:1.5rem;background:radial-gradient(circle at 92% 0%,rgb(191 219 254 / .7),transparent 30rem),linear-gradient(135deg,#f8fafc,#eff6ff);padding:clamp(1.5rem,4vw,3rem)}.builder-hero-copy h1{margin:.65rem 0 0;max-width:45rem;font-size:clamp(2.25rem,5vw,4.25rem);line-height:.98;letter-spacing:-.05em}.builder-hero-copy>p{max-width:45rem;margin:1rem 0 0;color:#475569;font-size:1.05rem;line-height:1.7}.builder-hero-meta{display:grid;gap:.75rem}.builder-hero-meta>div{display:grid;grid-template-columns:2.25rem 1fr;align-items:center;gap:.75rem;border:1px solid rgb(255 255 255 / .8);border-radius:.85rem;background:#ffffffb8;padding:.75rem;box-shadow:0 8px 24px #1e40af0f}.builder-hero-meta loomi-icon{width:1.1rem;height:1.1rem;margin:auto;color:#2563eb}.builder-hero-meta span{color:#64748b;font-size:.76rem}.builder-hero-meta strong{display:block;color:#1e293b;font-size:.82rem}.dark .builder-hero{border-color:#1e3a8a;background:radial-gradient(circle at 92% 0%,rgb(30 64 175 / .45),transparent 30rem),#0f172a}.dark .builder-hero-copy>p{color:#94a3b8}.dark .builder-hero-meta>div{border-color:#334155;background:#0f172abf}.dark .builder-hero-meta strong{color:#e2e8f0}@media(min-width:1180px){.builder-hero{grid-template-columns:minmax(0,1fr) 18rem;align-items:end}}.builder-layout{margin-top:1.5rem;display:grid;gap:1.5rem}@media(min-width:1024px){.builder-layout{grid-template-columns:20rem minmax(0,1fr);align-items:start}.builder-panel{position:sticky;top:5.5rem;max-height:calc(100vh - 7rem);overflow-y:auto}}.builder-panel,.builder-preview-wrap{border:1px solid rgb(226 232 240);border-radius:1.35rem;padding:1.35rem;background:#fff;box-shadow:0 16px 40px #0f172a0d}.dark .builder-panel,.dark .builder-preview-wrap{border-color:#334155;background:#0f172a73}.builder-panel-title{margin:.15rem 0 0;font-size:1.05rem;font-weight:700}.builder-panel-copy,.preview-heading p{margin:.55rem 0 0;color:#64748b;font-size:.78rem;line-height:1.5}.builder-panel-heading,.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.builder-panel-heading>div>span,.preview-heading>div>span{color:#64748b;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.builder-reset{display:inline-flex;align-items:center;gap:.35rem;border:0;background:transparent;color:#475569;font-size:.75rem;font-weight:700;cursor:pointer}.builder-reset loomi-icon{width:.9rem;height:.9rem}.builder-subtitle{margin:1.4rem 0 .75rem;padding-top:1.1rem;border-top:1px solid rgb(226 232 240);font-size:.82rem;font-weight:700;color:#64748b}.builder-field{display:grid;gap:.35rem;margin-bottom:.85rem;font-size:.82rem;font-weight:600;color:#334155}.dark .builder-field{color:#cbd5e1}.builder-field select,.builder-field loomi-select,.builder-field input[type=color],.builder-field input[type=text]{width:100%;min-height:2.35rem;border-radius:.6rem;border:1px solid rgb(226 232 240);background:#fff;padding:.35rem .55rem;font:inherit}.builder-field loomi-select{display:block;padding:0;border:0}.builder-field input[type=color]{height:3rem;padding:.3rem;cursor:pointer}.dark .builder-field select,.dark .builder-field input[type=text]{border-color:#334155;background:#0f172a;color:#fff}.builder-action{display:inline-flex;align-items:center;gap:.35rem;border:1px solid rgb(226 232 240);background:#fff;color:#334155;border-radius:999px;padding:.4rem .85rem;font-size:.82rem;cursor:pointer}.builder-action loomi-icon{width:.9rem;height:.9rem}.builder-action-primary{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}.preview-canvas{overflow:hidden;margin-top:1.25rem;border:1px solid var(--loomi-surface-border, rgb(203 213 225));border-radius:var(--loomi-radius-lg, 1rem);background:var(--loomi-surface-muted, rgb(241 245 249));color:var(--loomi-text, rgb(15 23 42));box-shadow:0 24px 55px #0f172a1f;transition:background-color .18s,border-color .18s,color .18s}.preview-browser-bar{display:grid;grid-template-columns:.55rem .55rem .55rem minmax(0,1fr);align-items:center;gap:.4rem;border-bottom:1px solid rgb(226 232 240);background:#fff;padding:.65rem .8rem}.preview-browser-bar>span{width:.55rem;height:.55rem;border-radius:999px;background:#cbd5e1}.preview-browser-bar>span:first-child{background:#f87171}.preview-browser-bar>span:nth-child(2){background:#fbbf24}.preview-browser-bar>span:nth-child(3){background:#4ade80}.preview-browser-bar>div{justify-self:center;width:min(18rem,70%);border-radius:999px;background:#f1f5f9;padding:.3rem .75rem;color:#64748b;font-size:.68rem;text-align:center}.dark .preview-canvas{border-color:#334155;background:#020617}.dark .preview-browser-bar{border-color:#334155;background:#0f172a}.dark .preview-browser-bar>div{background:#1e293b;color:#94a3b8}.dark .builder-field select{border-color:#334155;background:#0f172a;color:#fff}.mode-toggle{display:inline-flex;border:1px solid rgb(226 232 240);border-radius:999px;padding:.15rem;background:#fff}.dark .mode-toggle{border-color:#334155;background:#0f172a}.mode-btn{border:0;background:transparent;color:#475569;border-radius:999px;padding:.35rem .85rem;font-size:.82rem;cursor:pointer}.mode-btn.is-active{background:#eff6ff;color:#1d4ed8}.dark .mode-btn.is-active{background:#1e3a8a;color:#bfdbfe}.export-snippet{overflow-x:auto;border-radius:.75rem;background:#0f172a;color:#e2e8f0;padding:.85rem 1rem;font-size:.72rem;line-height:1.55;white-space:pre-wrap}.specimen-stack{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--builder-density-space, .75rem);padding:var(--builder-density-space, 1rem) var(--builder-density-space, 1rem) 0}.specimen-heading{margin:0;font-family:var(--loomi-font-font-family, inherit);font-size:1.45em;font-weight:700;letter-spacing:-.02em;color:var(--loomi-text, rgb(15 23 42))}.specimen-lead{margin:.6rem 0 0;color:var(--loomi-text-secondary, rgb(51 65 85));font-size:1em}.specimen-body{margin:.55rem 0 0;color:var(--loomi-text-muted, rgb(71 85 105));font-size:.92em}.specimen-code{display:block;margin-top:.75rem;padding:.5rem .65rem;border-radius:var(--loomi-radius-sm, .4rem);background:var(--loomi-surface-muted, rgb(241 245 249));border:1px solid var(--loomi-surface-border, rgb(226 232 240));font-family:var(--loomi-font-font-family-mono, ui-monospace, monospace);font-size:.82em;color:var(--loomi-text-secondary, rgb(51 65 85))}.specimen-readout{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-top:.9rem;padding-top:.75rem;border-top:1px dashed var(--loomi-surface-border, rgb(226 232 240))}.specimen-readout span{display:grid;gap:.1rem;color:var(--loomi-text-muted, rgb(100 116 139));font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.specimen-readout strong{font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--loomi-text, rgb(15 23 42))}.specimen-note{margin:0 0 .85rem;color:var(--loomi-text-muted, rgb(100 116 139));font-size:.78rem;line-height:1.5}.radius-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.radius-swatches>div{display:grid;justify-items:center;gap:.3rem}.radius-box{width:100%;height:3.25rem;border:2px solid var(--loomi-primary-500, #3b82f6);background:var(--loomi-primary-50, rgb(239 246 255))}.radius-swatches small{color:var(--loomi-text-muted, rgb(100 116 139));font-size:.68rem}.radius-swatches strong{color:var(--loomi-text, rgb(15 23 42));font-size:.74rem}.dark .specimen-code{background:#0f172a;border-color:#334155}@media(max-width:760px){.specimen-stack{grid-template-columns:1fr}}.component-showcase{display:grid;grid-template-columns:1fr;gap:var(--builder-density-space, .75rem);padding:var(--builder-density-space, 1rem)}.component-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem 1rem;align-items:start}.form-span{grid-column:1 / -1}.slider-field{display:grid;gap:.5rem}.field-label{color:var(--loomi-text-secondary, rgb(71 85 105));font-size:.78rem;font-weight:600}.tag-row{gap:.5rem}.alert-stack{display:grid;gap:.5rem;margin-top:1.1rem}.preview-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}.component-group{border:1px solid rgb(226 232 240);border-color:var(--loomi-surface-border, rgb(226 232 240));border-radius:var(--loomi-radius-lg, .85rem);background:var(--loomi-surface, white);padding:calc(var(--builder-density-space, .85rem) + .25rem);transition:background-color .18s,border-color .18s,padding .18s}.dark .component-group{border-color:#334155;background:#0f172a59}.component-group-label{margin-bottom:.85rem;color:#64748b;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.component-group-row{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}@media(max-width:760px){.component-form-grid{grid-template-columns:1fr}.preview-heading{align-items:flex-start;flex-direction:column}}