@birdycom/omniaui-blocks 0.0.0-stage → 0.11.0

package/dist/blocks.min.css

@@ -0,0 +1 @@
+:root{--oc-block-max-width:1200px;--oc-block-gap:24px;--oc-block-radius:16px;--oc-block-surface:var(--oc-card);--oc-block-surface-soft:var(--oc-muted);--oc-block-border:var(--oc-border);--oc-block-text:var(--oc-foreground);--oc-block-text-soft:var(--oc-muted-foreground);--oc-block-accent:var(--oc-primary)}.oc-block-hero{text-align:center;padding:64px var(--oc-block-gap) 48px;max-width:var(--oc-block-max-width);margin:0 auto}.oc-block-hero-badge{border:1px solid var(--oc-block-border);color:var(--oc-block-accent);background:oklch(from var(--color-vividblue-50) l c h / .08);border-radius:999px;margin-bottom:16px;padding:4px 12px;font-size:.78rem;display:inline-block}.oc-block-hero h1{color:var(--oc-block-text);letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15}.oc-block-hero p{color:var(--oc-block-text-soft);max-width:640px;margin:0 auto 28px;font-size:1.1rem;line-height:1.6}.oc-block-hero-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.oc-block-hero-split{padding:48px var(--oc-block-gap);max-width:var(--oc-block-max-width);grid-template-columns:1fr 1fr;align-items:center;gap:40px;margin:0 auto;display:grid}.oc-block-hero-split h1{color:var(--oc-block-text);margin:0 0 14px;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;line-height:1.15}.oc-block-hero-split p{color:var(--oc-block-text-soft);margin:0 0 24px;font-size:1rem;line-height:1.6}.oc-block-hero-visual{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);min-height:280px;color:var(--oc-block-text-soft);justify-content:center;align-items:center;font-size:.9rem;display:flex}@media (width<=50rem){.oc-block-hero-split{text-align:center;grid-template-columns:1fr}}.oc-block-auth{max-width:400px;padding:0 var(--oc-block-gap);margin:48px auto}.oc-block-auth-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:32px 28px}.oc-block-auth-card h2{color:var(--oc-block-text);margin:0 0 6px;font-size:1.3rem}.oc-block-auth-card .oc-block-subtitle{color:var(--oc-block-text-soft);margin:0 0 24px;font-size:.88rem}.oc-block-auth-footer{text-align:center;color:var(--oc-block-text-soft);margin-top:16px;font-size:.85rem}.oc-block-auth-footer a{color:var(--oc-block-accent);text-decoration:none}.oc-block-auth-footer a:hover{text-decoration:underline}.oc-block-auth-divider{color:var(--oc-block-text-soft);align-items:center;gap:12px;margin:20px 0;font-size:.82rem;display:flex}.oc-block-auth-divider:before,.oc-block-auth-divider:after{content:"";background:var(--oc-block-border);flex:1;height:1px}.oc-block-pricing{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;margin:48px auto}.oc-block-pricing h2{color:var(--oc-block-text);margin:0 0 8px;font-size:1.8rem}.oc-block-pricing>p{color:var(--oc-block-text-soft);margin:0 0 32px;font-size:1rem}.oc-block-pricing-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;display:grid}.oc-block-pricing-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);text-align:left;flex-direction:column;padding:28px 24px;display:flex}.oc-block-pricing-card--featured{border-color:var(--oc-block-accent);box-shadow:0 0 0 1px var(--oc-block-accent)}.oc-block-pricing-name{color:var(--oc-block-text);margin:0 0 4px;font-size:1rem;font-weight:600}.oc-block-pricing-desc{color:var(--oc-block-text-soft);margin:0 0 16px;font-size:.85rem}.oc-block-pricing-price{color:var(--oc-block-text);margin:0 0 4px;font-size:2.2rem;font-weight:700}.oc-block-pricing-price span{color:var(--oc-block-text-soft);font-size:.9rem;font-weight:400}.oc-block-pricing-features{flex:1;margin:16px 0 24px;padding:0;list-style:none}.oc-block-pricing-features li{color:var(--oc-block-text-soft);border-bottom:1px solid var(--oc-border);padding:6px 0;font-size:.88rem}.oc-block-pricing-features li:before{content:"✓ ";color:var(--oc-block-accent);font-weight:600}.oc-block-features{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;margin:48px auto}.oc-block-features h2{color:var(--oc-block-text);margin:0 0 8px;font-size:1.6rem}.oc-block-features>p{color:var(--oc-block-text-soft);margin:0 0 32px}.oc-block-features-grid{text-align:left;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;display:grid}.oc-block-feature-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:24px}.oc-block-feature-icon{background:oklch(from var(--color-vividblue-50) l c h / .12);width:40px;height:40px;color:var(--oc-block-accent);border-radius:10px;justify-content:center;align-items:center;margin-bottom:14px;font-size:1.2rem;display:flex}.oc-block-feature-card h3{color:var(--oc-block-text);margin:0 0 8px;font-size:1rem}.oc-block-feature-card p{color:var(--oc-block-text-soft);margin:0;font-size:.88rem;line-height:1.55}.oc-block-testimonials{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);margin:48px auto}.oc-block-testimonial-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;display:grid}.oc-block-testimonial-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:24px}.oc-block-testimonial-card blockquote{color:var(--oc-block-text-soft);margin:0 0 16px;font-size:.92rem;font-style:italic;line-height:1.6}.oc-block-testimonial-author{align-items:center;gap:10px;display:flex}.oc-block-testimonial-author strong{color:var(--oc-block-text);font-size:.88rem;display:block}.oc-block-testimonial-author span{color:var(--oc-block-text-soft);font-size:.78rem}.oc-block-footer{border-top:1px solid var(--oc-block-border);inline-size:100%;padding:40px var(--oc-block-gap) 24px;max-width:var(--oc-block-max-width);margin:48px auto 0}.oc-block-footer-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px;margin-bottom:32px;display:grid}.oc-block-footer-col h4{text-transform:uppercase;letter-spacing:.06em;color:var(--oc-block-text-soft);margin:0 0 12px;font-size:.85rem}.oc-block-footer-col ul{margin:0;padding:0;list-style:none}.oc-block-footer-col li{margin-bottom:8px}.oc-block-footer-col a{color:var(--oc-block-text-soft);font-size:.88rem;text-decoration:none}.oc-block-footer-col a:hover{color:var(--oc-block-text)}.oc-block-footer-bottom{border-top:1px solid var(--oc-block-border);color:var(--oc-block-text-soft);flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:16px;font-size:.82rem;display:flex}.oc-block-cta{background:linear-gradient(135deg, oklch(from var(--color-vividblue-50) l c h / .12), oklch(from var(--color-indigo-10) l c h / .08));border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);text-align:center;max-width:var(--oc-block-max-width);margin:48px auto;padding:40px}.oc-block-cta h2{color:var(--oc-block-text);margin:0 0 10px;font-size:1.5rem}.oc-block-cta p{color:var(--oc-block-text-soft);max-width:520px;margin:0 auto 24px}.oc-block-stats{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin:48px auto;display:grid}.oc-block-stat{padding:20px}.oc-block-stat-value{color:var(--oc-block-accent);margin-bottom:4px;font-size:2rem;font-weight:700}.oc-block-stat-label{color:var(--oc-block-text-soft);font-size:.85rem}.oc-block-swatch-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px;display:grid}.oc-block-swatch-grid .oc-swatch--ral-group{border-color:var(--color-vividblue-70);background:oklch(from var(--color-vividblue-70) l c h / .12);min-height:88px}.oc-block-shell{--oc-block-shell-height:100dvh;block-size:var(--oc-block-shell-height);background:var(--oc-background);color:var(--oc-foreground);grid-template-columns:auto minmax(0,1fr);display:grid;overflow:hidden}.oc-block-shell-toggle{opacity:0;pointer-events:none;position:absolute}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar{inline-size:var(--oc-sidebar-width-icon)}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-label,.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-badge,.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-sub,.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-group-label,.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar .oc-user-text,.oc-block-shell:has(.oc-block-shell-toggle:checked) details.oc-sidebar-collapsible>summary:after{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-button{justify-content:center;padding-inline:0}.oc-block-shell-main{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.oc-block-shell-breadcrumbs{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;padding:.5rem 1rem}.oc-block-shell-content{overscroll-behavior-y:contain;flex:1;min-block-size:0;min-inline-size:0;padding:1rem;overflow:auto}.oc-block-shell-menu-button{display:none}@media (width<=47.99rem){.oc-block-shell{grid-template-columns:minmax(0,1fr)}.oc-block-shell>.oc-sidebar{display:none}.oc-block-shell-menu-button{display:inline-flex}}.oc-block-appbar{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;align-items:center;gap:.75rem;min-block-size:3.5rem;padding:.5rem 1rem;display:flex}.oc-block-appbar-nav{flex:1;min-inline-size:0;overflow-x:auto}.oc-block-appbar-actions{align-items:center;gap:.5rem;margin-inline-start:auto;display:flex}.oc-block-appbar-title{white-space:nowrap;font-size:1rem;font-weight:600}.oc-block-modulehead{padding:1.5rem 0 .5rem}.oc-block-modulehead-band{background:linear-gradient(100deg, oklch(from var(--oc-primary) l c h / .1), oklch(from var(--oc-primary) l c h / .02));border:1px solid oklch(from var(--oc-primary) l c h / .25);border-radius:calc(var(--oc-radius) + 4px);align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;display:flex}.oc-block-modulehead-icon{block-size:2.5rem;inline-size:2.5rem;color:var(--oc-primary);background:oklch(from var(--oc-primary) l c h / .12);border-radius:calc(var(--oc-radius) + 2px);flex-shrink:0;place-items:center;font-size:1.25rem;display:grid}.oc-block-modulehead-icon svg{block-size:1.25em;inline-size:1.25em}.oc-block-authsplit-logo svg{block-size:1.5rem;inline-size:1.5rem}.oc-block-modulehead-body{min-inline-size:0;max-inline-size:42rem}.oc-block-modulehead-title{letter-spacing:-.01em;color:var(--oc-foreground);margin:0;font-size:1.25rem;font-weight:600}.oc-block-modulehead-intro{color:var(--oc-muted-foreground);margin:.25rem 0 0;font-size:.875rem;line-height:1.55}.oc-block-modulehead-meta{flex-wrap:wrap;align-items:center;gap:.5rem;margin-block-start:.5rem;display:flex}.oc-block-modulehead-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding-block:1rem 0;display:flex}.oc-block-datatable{padding:0}.oc-block-datatable-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:1.25rem 1.5rem 0;display:flex}.oc-block-datatable-title{color:var(--oc-foreground);margin:0;font-size:1.1rem;font-weight:600}.oc-block-datatable-description{color:var(--oc-muted-foreground);margin:.125rem 0 0;font-size:.875rem}.oc-block-datatable-body{padding:1rem 1.5rem 1.25rem}.oc-block-datatable .oc-table-wrap{border:1px solid var(--oc-border)}.oc-block-datatable .oc-table{table-layout:auto}.oc-block-datatable .oc-table th,.oc-block-datatable .oc-table td{border-inline:0}.oc-block-datatable .oc-table tbody tr:last-child td{border-block-end:0}.oc-block-datatable .oc-table-wrap>.oc-table{min-inline-size:40rem}.oc-block-datatable-bulk{background:oklch(from var(--oc-primary) l c h / .08);border:1px solid oklch(from var(--oc-primary) l c h / .3);border-radius:var(--oc-radius);align-items:center;gap:.75rem;margin-block-end:.75rem;padding:.5rem .75rem;font-size:.8125rem;display:flex}.oc-block-authsplit{background:var(--oc-background);min-block-size:32rem;color:var(--oc-foreground);display:grid}@media (width>=62rem){.oc-block-authsplit{grid-template-columns:1fr 1fr}}.oc-block-authsplit-brand{color:var(--oc-primary-foreground);background:radial-gradient(ellipse 80% 60% at 20% -10%, oklch(from var(--oc-brand-2) l c h / .35), transparent 55%), var(--oc-primary);border-inline-end:1px solid var(--oc-border);flex-direction:column;justify-content:space-between;gap:2rem;padding:2.5rem;display:none;position:relative}@media (width>=62rem){.oc-block-authsplit-brand{display:flex}}.oc-block-authsplit-logo{letter-spacing:-.01em;color:inherit;align-items:center;gap:.75rem;font-size:1.1rem;font-weight:600;text-decoration:none;display:inline-flex}.oc-block-authsplit-quote{border-inline-start:2px solid oklch(from var(--oc-primary-foreground) l c h / .55);max-inline-size:28rem;margin:0;padding-inline-start:1.25rem}.oc-block-authsplit-quote p{margin:0 0 .5rem;font-size:1.1rem;font-weight:500;line-height:1.55}.oc-block-authsplit-quote footer{opacity:.75;font-size:.875rem}.oc-block-authsplit-form{justify-content:center;align-items:center;padding:2rem 1rem;display:flex}.oc-block-authsplit-card{inline-size:100%;max-inline-size:26rem}.oc-block-authsplit-title{letter-spacing:-.01em;text-align:center;margin:0 0 .25rem;font-size:1.5rem;font-weight:600}.oc-block-authsplit-subtitle{text-align:center;color:var(--oc-muted-foreground);margin:0 0 1.5rem;font-size:.875rem}.oc-block-authsplit-fields{flex-direction:column;gap:1rem;display:flex}.oc-block-authsplit-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.8125rem;display:flex}.oc-block-twofactor{gap:1.5rem;max-inline-size:28rem;margin-inline:auto;display:grid}.oc-block-twofactor-step{gap:.75rem;display:grid}.oc-block-twofactor-center{text-align:center;justify-items:center;gap:.75rem;display:grid}.oc-block-twofactor-qr{block-size:11rem;inline-size:11rem;color:var(--oc-muted-foreground);background:var(--oc-surface-strong);border:1px dashed var(--oc-border-strong);border-radius:var(--oc-radius);place-items:center;font-size:.75rem;display:grid}.oc-block-wizard{flex-direction:column;min-block-size:0;display:flex}@media (width>=48rem){.oc-block-wizard{flex-direction:row}}.oc-block-wizard-rail{border-block-end:1px solid var(--oc-border);flex-shrink:0;padding:.75rem;overflow-x:auto}@media (width>=48rem){.oc-block-wizard-rail{border-block-end:0;border-inline-end:1px solid var(--oc-border);inline-size:15rem;padding:1rem;overflow-y:auto}}.oc-block-wizard-main{flex-direction:column;flex:1;min-inline-size:0;display:flex}.oc-block-wizard-step{flex-direction:column;flex:1;gap:1rem;padding:1.25rem 1.5rem;display:flex}.oc-block-wizard-step[hidden]{display:none}.oc-block-team{border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);background:var(--oc-card);flex-direction:column;display:flex;overflow:hidden}.oc-block-team-row{align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.oc-block-team-row+.oc-block-team-row{border-block-start:1px solid var(--oc-border)}.oc-block-team-row .oc-user{flex:1}.oc-block-team-meta{align-items:center;gap:.5rem;display:flex}.oc-block-formpage{flex-direction:column;gap:1rem;max-inline-size:56rem;display:flex}.oc-block-formpage-grid{gap:1rem;display:grid}@media (width>=40rem){.oc-block-formpage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.oc-block-formpage-actions{background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 2px);box-shadow:0 -4px 16px oklch(from var(--color-black-60) l c h / .08);justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;display:flex;position:sticky;inset-block-end:0}.oc-block-authpage{min-block-size:30rem;color:var(--oc-foreground);background:var(--oc-muted);border-radius:calc(var(--oc-radius) + 4px);place-items:center;padding:2rem 1rem;display:grid}.oc-block-authpage--plain{background:var(--oc-background);border:1px solid var(--oc-border)}.oc-block-authcard{inline-size:100%;max-inline-size:24rem;color:var(--oc-foreground);background:var(--oc-card);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);box-shadow:0 1px 2px oklch(from var(--color-black-60) l c h / .06);flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.oc-block-authcard--flat{box-shadow:none;background:0 0;border:0;padding:0}.oc-block-authcard--wide{max-inline-size:28rem}.oc-block-authcard-logo{block-size:2.5rem;inline-size:2.5rem;color:var(--oc-primary-foreground);background:var(--oc-primary);border-radius:var(--oc-radius);place-items:center;margin-inline:auto;display:grid}.oc-block-authcard-logo svg{block-size:1.35rem;inline-size:1.35rem}.oc-block-authcard-head{text-align:center;flex-direction:column;gap:.25rem;display:flex}.oc-block-authcard-title{letter-spacing:-.01em;margin:0;font-size:1.375rem;font-weight:600}.oc-block-authcard-text{color:var(--oc-muted-foreground);margin:0;font-size:.875rem}.oc-block-authcard-fields{flex-direction:column;gap:1rem;display:flex}.oc-block-authcard-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.8125rem;display:flex}.oc-block-authcard-foot{text-align:center;color:var(--oc-muted-foreground);margin:0;font-size:.875rem}.oc-block-authcard-foot a{color:var(--oc-foreground);text-underline-offset:3px;font-weight:500;text-decoration:underline}.oc-block-authcard-legal{text-align:center;color:var(--oc-muted-foreground);margin:0;font-size:.75rem}.oc-block-authcard-legal a{color:inherit;text-underline-offset:3px;text-decoration:underline}.oc-block-authcard-submit{inline-size:100%}.oc-block-authcard-hint{color:var(--oc-muted-foreground);margin:0;font-size:.75rem}.oc-block-authcard-center{flex-direction:column;align-items:center;gap:.75rem;display:flex}.oc-block-authsocial{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem;display:grid}.oc-block-authsocial .oc-btn{inline-size:100%}.oc-block-authduo{color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);overflow:hidden;container:oc-authduo/inline-size}.oc-block-authduo-grid{min-block-size:34rem;display:grid}@container oc-authduo (width>=42rem){.oc-block-authduo-grid{grid-template-columns:1fr 1fr}.oc-block-authduo-panel{display:flex}.oc-block-authduo--reverse .oc-block-authduo-panel{order:2}}.oc-block-authduo-panel{color:var(--oc-primary-foreground);background:radial-gradient(ellipse 70% 55% at 85% 100%, oklch(from var(--oc-brand-2) l c h / .4), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 0%, oklch(from var(--oc-brand-3) l c h / .35), transparent 60%), var(--oc-primary);flex-direction:column;justify-content:space-between;gap:2rem;padding:2rem;display:none;position:relative}.oc-block-authduo-panel--image:before{content:"";background:repeating-linear-gradient(135deg, oklch(from var(--oc-primary-foreground) l c h / .07) 0 1px, transparent 1px 14px), linear-gradient(to top, oklch(from var(--oc-primary) l c h / .7), transparent 60%);pointer-events:none;position:absolute;inset:0}.oc-block-authduo-panel--muted{color:var(--oc-foreground);background:var(--oc-muted)}.oc-block-authduo-panel>*{position:relative}.oc-block-authduo-logo{color:inherit;align-items:center;gap:.6rem;font-weight:600;text-decoration:none;display:inline-flex}.oc-block-authduo-logo svg{block-size:1.4rem;inline-size:1.4rem}.oc-block-authduo-quote{max-inline-size:26rem;margin:0}.oc-block-authduo-quote p{margin:0 0 .5rem;font-size:1.05rem;font-weight:500;line-height:1.55}.oc-block-authduo-quote footer{opacity:.8;font-size:.8125rem}.oc-block-authduo-form{place-items:center;padding:2rem 1.25rem;display:grid}.oc-block-authmin{min-block-size:26rem;color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);place-items:center;padding:2rem 1rem;display:grid}.oc-block-sb{--oc-block-sb-height:26rem;block-size:var(--oc-block-sb-height);color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);grid-template-columns:auto minmax(0,1fr);display:grid;overflow:hidden}.oc-block-sb--floating{background:var(--oc-muted)}.oc-block-sb-main{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.oc-block-sb-bar{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;align-items:center;gap:.5rem;min-block-size:3rem;padding:.5rem .75rem;display:flex}.oc-block-sb-sep{background:var(--oc-border-strong);block-size:1rem;inline-size:1px}.oc-block-sb-body{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:4.5rem;gap:.75rem;min-block-size:0;padding:.75rem;display:grid;overflow:auto}.oc-block-sb-ph{background:var(--oc-muted);border-radius:var(--oc-radius)}.oc-block-sb-ph--wide{grid-area:span 3/1/auto/-1}.oc-block-sb-toggle{opacity:0;pointer-events:none;position:absolute}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar{inline-size:var(--oc-sidebar-width-icon)}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-label,.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-badge,.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-sub,.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-group-label,.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar .oc-user-text,.oc-block-sb:has(.oc-block-sb-toggle:checked) details.oc-sidebar-collapsible>summary:after{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-button{justify-content:center;padding-inline:0}.oc-block-sb-hint{color:var(--oc-muted-foreground);margin:0;padding:0 .75rem;font-size:.75rem}.oc-block-sb-group>summary{letter-spacing:.04em;text-transform:uppercase;color:var(--oc-muted-foreground);cursor:pointer;border-radius:var(--oc-radius);justify-content:space-between;align-items:center;padding:.5rem .625rem .25rem;font-size:.7rem;font-weight:600;list-style:none;display:flex}.oc-block-sb-group>summary::-webkit-details-marker{display:none}.oc-block-sb-group>summary:after{content:"";block-size:.4rem;inline-size:.4rem;transition:rotate var(--oc-transition-fast);border-block-end:1.5px solid;border-inline-end:1.5px solid;rotate:-45deg}.oc-block-sb-group[open]>summary:after{rotate:45deg}.oc-block-sb-group>summary:focus-visible{outline:2px solid var(--oc-ring);outline-offset:-2px}.oc-block-sb-rail{background:var(--oc-muted);border-inline-end:1px solid var(--oc-border);flex-direction:column;align-items:center;gap:.5rem;inline-size:3.5rem;padding:.75rem .5rem;display:flex}.oc-block-sb-rail .oc-sidebar-menu-button{justify-content:center;padding:.5rem}.oc-block-sb-switch{inline-size:100%;font:inherit;color:inherit;cursor:pointer;text-align:start;background:0 0;border:0}.oc-block-sb-tile{block-size:2rem;inline-size:2rem;color:var(--oc-primary-foreground);background:var(--oc-primary);border-radius:var(--oc-radius);flex:none;place-items:center;display:grid}.oc-block-sb-tile svg{block-size:1rem;inline-size:1rem}.oc-block-sb-sub{color:var(--oc-muted-foreground);font-size:.75rem;font-weight:400;display:block}.oc-block-dash-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;display:grid}.oc-block-dash-table{inline-size:100%}.oc-block-about{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto;container-type:inline-size}.oc-block-about-inner{align-items:center;gap:clamp(2rem,5vw,3.5rem);display:grid}@container (width>=52rem){.oc-block-about-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.oc-block-about--reverse .oc-block-about-media{order:2}}.oc-block-about-media{aspect-ratio:4/3;border:1px solid var(--oc-border);border-radius:var(--oc-radius-lg,1.25rem);background:radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%), linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));margin:0;position:relative;overflow:hidden}.oc-block-about-media>img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.oc-block-about-badge{border:1px solid var(--oc-border);border-radius:var(--oc-radius-md,.75rem);background:color-mix(in oklch, var(--oc-background) 85%, transparent);backdrop-filter:blur(10px);color:var(--oc-muted-foreground);padding:.75rem 1rem;font-size:.85rem;display:grid;position:absolute;inset:auto auto 1rem 1rem}.oc-block-about-badge strong{color:var(--oc-foreground);font-size:1.4rem;line-height:1.1}.oc-block-about-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 1rem;font-size:clamp(1.75rem,4vw,2.6rem);font-weight:700;line-height:1.15}.oc-block-about-copy>p:not([class]){color:var(--oc-muted-foreground);margin:0 0 1rem;line-height:1.65}.oc-block-about-copy .oc-timeline{margin-block-start:1.75rem}.oc-block-contact{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto}.oc-block-contact-head{max-inline-size:40rem;margin-block-end:2rem}.oc-block-contact-heading{letter-spacing:-.02em;margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.oc-block-contact-lead{color:var(--oc-muted-foreground);margin:0;font-size:1.05rem;line-height:1.6}.oc-block-contact-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1.25rem;display:grid}.oc-block-contact-card{border:1px solid var(--oc-border);border-radius:var(--oc-radius-lg,1.25rem);background:var(--oc-surface);align-content:start;gap:.35rem;padding:1.5rem;font-style:normal;display:grid}.oc-block-contact-card>.oc-product-mark{margin-block-end:.75rem}.oc-block-contact-title{margin:0 0 .25rem;font-size:1.05rem;font-weight:700}.oc-block-contact-line{color:var(--oc-muted-foreground);overflow-wrap:anywhere;margin:0;font-size:.95rem;line-height:1.55;text-decoration:none}a.oc-block-contact-line{color:var(--oc-foreground);font-weight:500}a.oc-block-contact-line:hover{color:var(--oc-brand-1)}.oc-block-contact--plain .oc-block-contact-card{border:0;border-block-start:2px solid var(--oc-border-strong);background:0 0;border-radius:0;padding:1.25rem 0 0}.oc-block-faq{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto;container-type:inline-size}.oc-block-faq-inner{gap:2rem;max-inline-size:48rem;margin-inline:auto;display:grid}.oc-block-faq-head{text-align:center}.oc-block-faq-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.oc-block-faq-lead{color:var(--oc-block-text-soft,var(--oc-muted-foreground));margin:0;font-size:1.05rem;line-height:1.6}.oc-block-faq-list{--oc-accordion-width:100%;background:var(--oc-block-surface,var(--oc-card))}.oc-block-faq-more{color:var(--oc-block-text-soft,var(--oc-muted-foreground));text-align:center;margin:0}@container (width>=48rem){.oc-block-faq--split .oc-block-faq-inner{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;max-inline-size:none}.oc-block-faq--split .oc-block-faq-head{text-align:start;position:sticky;inset-block-start:1rem}.oc-block-faq--split .oc-block-faq-more{text-align:start;grid-column:2}}.oc-block-orbit-visual{aspect-ratio:1;place-items:center;inline-size:100%;max-inline-size:32rem;margin-inline:auto;display:grid;position:relative;container-type:inline-size}.oc-block-orbit-ring{border:1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);animation:oc-orbit-spin var(--oc-orbit-duration,60s) linear infinite;border-radius:50%;position:absolute;inset:6%}.oc-block-orbit-ring:before{content:"";border:1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);border-radius:50%;position:absolute;inset:18%}.oc-block-orbit-mark{translate:-50% -50%;transform:rotate(var(--oc-orbit-angle,0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle,0deg) * -1));position:absolute;inset-block-start:50%;inset-inline-start:50%}.oc-block-orbit-mark>*{animation:oc-orbit-spin var(--oc-orbit-duration,60s) linear infinite reverse;display:grid}.oc-block-orbit-center{z-index:1;inline-size:min(100%,72cqi);position:relative}.oc-block-orbit-center.oc-code-window .oc-code-window__body{font-size:clamp(.7rem,2.6cqi,.9rem)}@keyframes oc-orbit-spin{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.oc-block-orbit-ring,.oc-block-orbit-mark>*{animation:none}}.oc-block-portfolio-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-block-end:2rem;display:flex}.oc-block-portfolio-head .oc-display{margin-block-end:0}.oc-block-portfolio-lead{color:var(--oc-muted-foreground);max-inline-size:36rem;margin:.75rem 0 0}.oc-block-portfolio-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--oc-portfolio-min,18rem)), 1fr));gap:1.5rem;display:grid}.oc-block-portfolio--two{--oc-portfolio-min:26rem}.oc-block-profile{max-inline-size:var(--oc-block-max-width,1200px);margin-inline:auto;container-type:inline-size}.oc-block-profile-banner{aspect-ratio:6;border-radius:var(--oc-block-radius,16px);background:var(--oc-profile-banner,radial-gradient(circle at 85% 30%, color-mix(in oklch, var(--color-white-50) 25%, transparent), transparent 40%)), linear-gradient(120deg, var(--oc-accent-from), var(--oc-accent-to));background-position:50%;background-size:cover;min-block-size:7rem}.oc-block-profile-bar{flex-wrap:wrap;align-items:flex-end;gap:1rem 1.25rem;padding-inline:clamp(1rem,3vw,1.5rem);display:flex}.oc-block-profile-avatar.oc-avatar{border:4px solid var(--oc-background);width:6.5rem;height:6.5rem;margin-block-start:-3.25rem;font-size:2rem}.oc-block-profile-info{flex:16rem;min-inline-size:0;padding-block-start:.75rem}.oc-block-profile-name{letter-spacing:-.02em;margin:0;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700}.oc-block-profile-meta{color:var(--oc-muted-foreground);margin:.2rem 0 0;font-size:.9rem}.oc-block-profile-bio{color:var(--oc-muted-foreground);max-inline-size:44rem;margin:.5rem 0 0;font-size:.95rem}.oc-block-profile-actions{flex-wrap:wrap;gap:.5rem;display:flex}.oc-block-profile-tabs{border-block-end:1px solid var(--oc-border);scrollbar-width:none;gap:.25rem;margin-block-start:1.25rem;padding-inline:clamp(1rem,3vw,1.5rem);display:flex;overflow-x:auto}.oc-block-profile-tab{color:var(--oc-muted-foreground);white-space:nowrap;transition:color var(--oc-transition-fast,.15s), border-color var(--oc-transition-fast,.15s);border-block-end:2px solid #0000;padding:.75rem 1rem;font-size:.92rem;font-weight:500;text-decoration:none}.oc-block-profile-tab:hover{color:var(--oc-foreground)}.oc-block-profile-tab[aria-current=page]{border-block-end-color:var(--oc-brand-1);color:var(--oc-foreground)}.oc-block-profile-tab:focus-visible{outline:2px solid var(--oc-ring);outline-offset:-2px}.oc-block-profile--compact .oc-block-profile-banner{aspect-ratio:10;min-block-size:4.5rem}.oc-block-profile--compact .oc-block-profile-avatar.oc-avatar{width:4.5rem;height:4.5rem;margin-block-start:-2.25rem;font-size:1.4rem}@container (width<=34rem){.oc-block-profile-actions{flex-basis:100%}}

package/dist/parts/site-about-timeline.css

@@ -0,0 +1,61 @@
+/* File: packages/blocks/src/parts/site-about-timeline.css
+   Map: section -> split grid -> media placeholder + badge -> copy -> timeline spacing -> reverse variant
+   About block: a picture next to the story of the company, ending in the timeline component. */
+
+.oc-block-about {
+  container-type: inline-size;
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
+}
+
+.oc-block-about-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
+@container (min-width: 52rem) {
+  .oc-block-about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  /* Reverse: picture on the right. */
+  .oc-block-about--reverse .oc-block-about-media { order: 2; }
+}
+
+/* Picture: an <img> inside, or the accent gradient placeholder when empty. */
+.oc-block-about-media {
+  position: relative;
+  margin: 0;
+  aspect-ratio: 4 / 3;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  background:
+    radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%),
+    linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));
+  overflow: hidden;
+}
+.oc-block-about-media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
+
+/* Floating badge on the picture ("Since 2012"). */
+.oc-block-about-badge {
+  position: absolute;
+  inset: auto auto 1rem 1rem;
+  display: grid;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-md, 0.75rem);
+  background: color-mix(in oklch, var(--oc-background) 85%, transparent);
+  backdrop-filter: blur(10px);
+  color: var(--oc-muted-foreground);
+  font-size: 0.85rem;
+}
+.oc-block-about-badge strong { color: var(--oc-foreground); font-size: 1.4rem; line-height: 1.1; }
+
+.oc-block-about-title {
+  margin: 0 0 1rem;
+  font-size: clamp(1.75rem, 4vw, 2.6rem);
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+.oc-block-about-copy > p:not([class]) {
+  margin: 0 0 1rem;
+  color: var(--oc-muted-foreground);
+  line-height: 1.65;
+}
+.oc-block-about-copy .oc-timeline { margin-block-start: 1.75rem; }

package/dist/parts/site-contact-grid.css

@@ -0,0 +1,58 @@
+/* File: packages/blocks/src/parts/site-contact-grid.css
+   Map: section -> head -> card grid -> card (mark, title, lines) -> plain variant
+   Contact grid block: contact info cards (e-mail, phone, address, hours). */
+
+.oc-block-contact {
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
+}
+
+.oc-block-contact-head { max-inline-size: 40rem; margin-block-end: 2rem; }
+.oc-block-contact-heading {
+  margin: 0 0 0.75rem;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.oc-block-contact-lead { margin: 0; color: var(--oc-muted-foreground); font-size: 1.05rem; line-height: 1.6; }
+
+.oc-block-contact-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
+  gap: 1.25rem;
+}
+
+.oc-block-contact-card {
+  display: grid;
+  align-content: start;
+  gap: 0.35rem;
+  padding: 1.5rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  background: var(--oc-surface);
+  font-style: normal; /* the address card is an <address> */
+}
+.oc-block-contact-card > .oc-product-mark { margin-block-end: 0.75rem; }
+.oc-block-contact-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
+
+/* A line of info. As a link it turns to the foreground color on hover. */
+.oc-block-contact-line {
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.95rem;
+  line-height: 1.55;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+a.oc-block-contact-line { color: var(--oc-foreground); font-weight: 500; }
+a.oc-block-contact-line:hover { color: var(--oc-brand-1); }
+
+/* Plain: no card frames, a thin accent line on top of each item. */
+.oc-block-contact--plain .oc-block-contact-card {
+  padding: 1.25rem 0 0;
+  border: 0;
+  border-block-start: 2px solid var(--oc-border-strong);
+  border-radius: 0;
+  background: none;
+}

package/dist/parts/site-faq.css

@@ -0,0 +1,52 @@
+/* File: packages/blocks/src/parts/site-faq.css
+   Map: section -> head (eyebrow, title, lead) -> accordion list -> "more" line -> split variant
+   FAQ block: a title plus the accordion component on native <details name="…"> (one item open at a time). */
+
+.oc-block-faq {
+  container-type: inline-size;
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
+}
+
+.oc-block-faq-inner {
+  display: grid;
+  gap: 2rem;
+  max-inline-size: 48rem;
+  margin-inline: auto;
+}
+
+.oc-block-faq-head { text-align: center; }
+.oc-block-faq-title {
+  margin: 0 0 0.75rem;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+.oc-block-faq-lead {
+  margin: 0;
+  color: var(--oc-block-text-soft, var(--oc-muted-foreground));
+  font-size: 1.05rem;
+  line-height: 1.6;
+}
+
+/* The accordion fills the column (the component default is 46rem wide). */
+.oc-block-faq-list { --oc-accordion-width: 100%; background: var(--oc-block-surface, var(--oc-card)); }
+
+.oc-block-faq-more {
+  margin: 0;
+  color: var(--oc-block-text-soft, var(--oc-muted-foreground));
+  text-align: center;
+}
+
+/* Split: head on the left, questions on the right (from 48rem container width). */
+@container (min-width: 48rem) {
+  .oc-block-faq--split .oc-block-faq-inner {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    align-items: start;
+    max-inline-size: none;
+  }
+  .oc-block-faq--split .oc-block-faq-head { text-align: start; position: sticky; inset-block-start: 1rem; }
+  .oc-block-faq--split .oc-block-faq-more { grid-column: 2; text-align: start; }
+}

package/dist/parts/site-hero-orbit.css

@@ -0,0 +1,62 @@
+/* File: packages/blocks/src/parts/site-hero-orbit.css
+   Map: visual (square, container) -> dashed ring that turns -> marks on the ring (stay upright) -> center window -> reduced motion
+   Hero orbit block: hero-code layout where product marks orbit around the code window.
+   Place a mark with style="--oc-orbit-angle: 60deg". The ring turns once per --oc-orbit-duration (default 60s). */
+
+/* Square stage; container units (cqi) give the ring radius. */
+.oc-block-orbit-visual {
+  position: relative;
+  container-type: inline-size;
+  display: grid;
+  place-items: center;
+  inline-size: 100%;
+  max-inline-size: 32rem;
+  aspect-ratio: 1;
+  margin-inline: auto;
+}
+
+/* The ring: a dashed circle that slowly turns and carries the marks. */
+.oc-block-orbit-ring {
+  position: absolute;
+  inset: 6%;
+  border: 1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);
+  border-radius: 50%;
+  animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite;
+}
+/* Second, inner ring for depth (no marks). */
+.oc-block-orbit-ring::before {
+  content: "";
+  position: absolute;
+  inset: 18%;
+  border: 1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);
+  border-radius: 50%;
+}
+
+/* A mark sits on the ring at its angle. Radius = half the ring = 44% of the stage width. */
+.oc-block-orbit-mark {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  translate: -50% -50%;
+  transform: rotate(var(--oc-orbit-angle, 0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle, 0deg) * -1));
+}
+/* The mark turns back as fast as the ring turns, so its glyph stays upright. */
+.oc-block-orbit-mark > * {
+  display: grid;
+  animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite reverse;
+}
+
+/* Center: the code window (or any visual) above the ring. */
+.oc-block-orbit-center {
+  position: relative;
+  z-index: 1;
+  inline-size: min(100%, 72cqi);
+}
+.oc-block-orbit-center.oc-code-window .oc-code-window__body { font-size: clamp(0.7rem, 2.6cqi, 0.9rem); }
+
+@keyframes oc-orbit-spin { to { rotate: 360deg; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-block-orbit-ring,
+  .oc-block-orbit-mark > * { animation: none; }
+}

package/dist/parts/site-portfolio-grid.css

@@ -0,0 +1,23 @@
+/* File: packages/blocks/src/parts/site-portfolio-grid.css
+   Map: section -> head (title left, "all projects" link right) -> card grid -> two-column variant
+   Portfolio grid block: a heading and a grid of project-card components. */
+
+.oc-block-portfolio-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem 2rem;
+  margin-block-end: 2rem;
+}
+.oc-block-portfolio-head .oc-display { margin-block-end: 0; }
+.oc-block-portfolio-lead { margin: 0.75rem 0 0; color: var(--oc-muted-foreground); max-inline-size: 36rem; }
+
+.oc-block-portfolio-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--oc-portfolio-min, 18rem)), 1fr));
+  gap: 1.5rem;
+}
+
+/* Two columns: bigger cards (fewer, more important projects). */
+.oc-block-portfolio--two { --oc-portfolio-min: 26rem; }

package/dist/parts/site-profile-header.css

@@ -0,0 +1,77 @@
+/* File: packages/blocks/src/parts/site-profile-header.css
+   Map: section -> banner -> bar (overhanging avatar, info, actions) -> tab bar -> compact variant
+   Profile header block: banner, an avatar that overlaps the banner edge, name + meta, actions and link tabs.
+   Banner image: style="--oc-profile-banner: url(...)" (default: an accent gradient). */
+
+.oc-block-profile {
+  container-type: inline-size;
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+}
+
+.oc-block-profile-banner {
+  aspect-ratio: 6 / 1;
+  min-block-size: 7rem;
+  border-radius: var(--oc-block-radius, 16px);
+  background:
+    var(--oc-profile-banner, radial-gradient(circle at 85% 30%, color-mix(in oklch, var(--color-white-50) 25%, transparent), transparent 40%)),
+    linear-gradient(120deg, var(--oc-accent-from), var(--oc-accent-to));
+  background-size: cover;
+  background-position: center;
+}
+
+.oc-block-profile-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem 1.25rem;
+  padding-inline: clamp(1rem, 3vw, 1.5rem);
+}
+
+/* The avatar component, made bigger and pulled up over the banner edge. */
+.oc-block-profile-avatar.oc-avatar {
+  width: 6.5rem;
+  height: 6.5rem;
+  margin-block-start: -3.25rem;
+  border: 4px solid var(--oc-background);
+  font-size: 2rem;
+}
+
+.oc-block-profile-info { flex: 1 1 16rem; min-inline-size: 0; padding-block-start: 0.75rem; }
+.oc-block-profile-name { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; }
+.oc-block-profile-meta { margin: 0.2rem 0 0; color: var(--oc-muted-foreground); font-size: 0.9rem; }
+.oc-block-profile-bio { margin: 0.5rem 0 0; color: var(--oc-muted-foreground); font-size: 0.95rem; max-inline-size: 44rem; }
+.oc-block-profile-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+
+/* Tab bar: links; the current one gets aria-current="page". Scrolls sideways on small screens. */
+.oc-block-profile-tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-block-start: 1.25rem;
+  padding-inline: clamp(1rem, 3vw, 1.5rem);
+  border-block-end: 1px solid var(--oc-border);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.oc-block-profile-tab {
+  padding: 0.75rem 1rem;
+  border-block-end: 2px solid transparent;
+  color: var(--oc-muted-foreground);
+  font-size: 0.92rem;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color var(--oc-transition-fast, 150ms), border-color var(--oc-transition-fast, 150ms);
+}
+.oc-block-profile-tab:hover { color: var(--oc-foreground); }
+.oc-block-profile-tab[aria-current="page"] { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
+.oc-block-profile-tab:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+
+/* Compact: low banner and a smaller avatar. */
+.oc-block-profile--compact .oc-block-profile-banner { aspect-ratio: 10 / 1; min-block-size: 4.5rem; }
+.oc-block-profile--compact .oc-block-profile-avatar.oc-avatar { width: 4.5rem; height: 4.5rem; margin-block-start: -2.25rem; font-size: 1.4rem; }
+
+/* Narrow: the actions go below the info, full width. */
+@container (max-width: 34rem) {
+  .oc-block-profile-actions { flex-basis: 100%; }
+}