@birdycom/omniaui-blocks 0.11.0 → 0.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +10 -10
  3. package/blocks/about-timeline.html +23 -23
  4. package/blocks/app-header.html +32 -32
  5. package/blocks/app-shell.html +84 -84
  6. package/blocks/auth-split.html +45 -45
  7. package/blocks/auth.html +21 -21
  8. package/blocks/contact-grid.html +38 -38
  9. package/blocks/cta.html +8 -8
  10. package/blocks/data-table.html +111 -111
  11. package/blocks/faq.html +33 -33
  12. package/blocks/features.html +18 -18
  13. package/blocks/footer.html +41 -41
  14. package/blocks/forgot-password.html +34 -34
  15. package/blocks/form-page.html +28 -28
  16. package/blocks/hero-code.html +27 -27
  17. package/blocks/hero-orbit.html +38 -38
  18. package/blocks/hero-split.html +12 -12
  19. package/blocks/hero.html +10 -10
  20. package/blocks/login-01.html +41 -41
  21. package/blocks/login-02.html +55 -55
  22. package/blocks/login-03.html +47 -47
  23. package/blocks/module-header.html +24 -24
  24. package/blocks/otp-01.html +36 -36
  25. package/blocks/otp-02.html +46 -46
  26. package/blocks/page-hero.html +10 -10
  27. package/blocks/portfolio-grid.html +31 -31
  28. package/blocks/pricing.html +42 -42
  29. package/blocks/process.html +19 -19
  30. package/blocks/product-grid.html +37 -37
  31. package/blocks/profile-header.html +27 -27
  32. package/blocks/reset-password.html +45 -45
  33. package/blocks/showcase.html +27 -27
  34. package/blocks/sidebar-01.html +56 -56
  35. package/blocks/sidebar-02.html +55 -55
  36. package/blocks/sidebar-03.html +53 -53
  37. package/blocks/sidebar-04.html +56 -56
  38. package/blocks/sidebar-05.html +68 -68
  39. package/blocks/signup-01.html +53 -53
  40. package/blocks/signup-02.html +56 -56
  41. package/blocks/site-footer.html +39 -39
  42. package/blocks/site-header.html +14 -14
  43. package/blocks/spotlight.html +22 -22
  44. package/blocks/stats-counter.html +15 -15
  45. package/blocks/stats.html +19 -19
  46. package/blocks/team-list.html +30 -30
  47. package/blocks/two-factor.html +33 -33
  48. package/blocks/wizard-dialog.html +36 -36
  49. package/dist/blocks.css +371 -343
  50. package/dist/blocks.min.css +1 -1
  51. package/dist/parts/site-about-timeline.css +61 -61
  52. package/dist/parts/site-contact-grid.css +58 -58
  53. package/dist/parts/site-faq.css +52 -52
  54. package/dist/parts/site-hero-orbit.css +62 -62
  55. package/dist/parts/site-portfolio-grid.css +23 -23
  56. package/dist/parts/site-profile-header.css +77 -77
  57. package/package.json +55 -55
@@ -1 +1 @@
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%}}
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{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-badge{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-sub{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-group-label{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar .oc-user-text{display:none}.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-brand--photo{color:var(--color-white-100);background:linear-gradient(to top, oklch(from var(--color-black-100) l c h / .8), oklch(from var(--color-black-100) l c h / .15) 55%, oklch(from var(--color-black-100) l c h / .5)), var(--oc-authsplit-photo,none) center / cover no-repeat, var(--oc-primary)}.oc-block-authsplit-brand--photo .oc-block-authsplit-quote{border-inline-start-color:oklch(from var(--color-white-100) l c h / .6)}.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{color:inherit;margin:0 0 .5rem;font-size:1.1rem;font-weight:500;line-height:1.55}.oc-block-authsplit-quote footer{opacity:.75;color:inherit;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-fields .oc-field:has(>.oc-otp){text-align:center;align-items:center}.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}.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--photo{color:var(--color-white-100);background:linear-gradient(to top, oklch(from var(--color-black-100) l c h / .8), oklch(from var(--color-black-100) l c h / .15) 55%, oklch(from var(--color-black-100) l c h / .5)), var(--oc-authduo-photo,none) center / cover no-repeat, var(--oc-primary)}@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>*{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{color:inherit;margin:0 0 .5rem;font-size:1.05rem;font-weight:500;line-height:1.55}.oc-block-authduo-quote footer{opacity:.8;color:inherit;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{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-badge{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-sub{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-group-label{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar .oc-user-text{display:none}.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);-webkit-backdrop-filter:blur(10px);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%}}
@@ -1,61 +1,61 @@
1
- /* File: packages/blocks/src/parts/site-about-timeline.css
2
- Map: section -> split grid -> media placeholder + badge -> copy -> timeline spacing -> reverse variant
3
- About block: a picture next to the story of the company, ending in the timeline component. */
4
-
5
- .oc-block-about {
6
- container-type: inline-size;
7
- max-inline-size: var(--oc-block-max-width, 1200px);
8
- margin-inline: auto;
9
- padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
10
- }
11
-
12
- .oc-block-about-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
13
- @container (min-width: 52rem) {
14
- .oc-block-about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
15
- /* Reverse: picture on the right. */
16
- .oc-block-about--reverse .oc-block-about-media { order: 2; }
17
- }
18
-
19
- /* Picture: an <img> inside, or the accent gradient placeholder when empty. */
20
- .oc-block-about-media {
21
- position: relative;
22
- margin: 0;
23
- aspect-ratio: 4 / 3;
24
- border: 1px solid var(--oc-border);
25
- border-radius: var(--oc-radius-lg, 1.25rem);
26
- background:
27
- radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%),
28
- linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));
29
- overflow: hidden;
30
- }
31
- .oc-block-about-media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
32
-
33
- /* Floating badge on the picture ("Since 2012"). */
34
- .oc-block-about-badge {
35
- position: absolute;
36
- inset: auto auto 1rem 1rem;
37
- display: grid;
38
- padding: 0.75rem 1rem;
39
- border: 1px solid var(--oc-border);
40
- border-radius: var(--oc-radius-md, 0.75rem);
41
- background: color-mix(in oklch, var(--oc-background) 85%, transparent);
42
- backdrop-filter: blur(10px);
43
- color: var(--oc-muted-foreground);
44
- font-size: 0.85rem;
45
- }
46
- .oc-block-about-badge strong { color: var(--oc-foreground); font-size: 1.4rem; line-height: 1.1; }
47
-
48
- .oc-block-about-title {
49
- margin: 0 0 1rem;
50
- font-size: clamp(1.75rem, 4vw, 2.6rem);
51
- font-weight: 700;
52
- line-height: 1.15;
53
- letter-spacing: -0.02em;
54
- text-wrap: balance;
55
- }
56
- .oc-block-about-copy > p:not([class]) {
57
- margin: 0 0 1rem;
58
- color: var(--oc-muted-foreground);
59
- line-height: 1.65;
60
- }
61
- .oc-block-about-copy .oc-timeline { margin-block-start: 1.75rem; }
1
+ /* File: packages/blocks/src/parts/site-about-timeline.css
2
+ Map: section -> split grid -> media placeholder + badge -> copy -> timeline spacing -> reverse variant
3
+ About block: a picture next to the story of the company, ending in the timeline component. */
4
+
5
+ .oc-block-about {
6
+ container-type: inline-size;
7
+ max-inline-size: var(--oc-block-max-width, 1200px);
8
+ margin-inline: auto;
9
+ padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
10
+ }
11
+
12
+ .oc-block-about-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
13
+ @container (min-width: 52rem) {
14
+ .oc-block-about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
15
+ /* Reverse: picture on the right. */
16
+ .oc-block-about--reverse .oc-block-about-media { order: 2; }
17
+ }
18
+
19
+ /* Picture: an <img> inside, or the accent gradient placeholder when empty. */
20
+ .oc-block-about-media {
21
+ position: relative;
22
+ margin: 0;
23
+ aspect-ratio: 4 / 3;
24
+ border: 1px solid var(--oc-border);
25
+ border-radius: var(--oc-radius-lg, 1.25rem);
26
+ background:
27
+ radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%),
28
+ linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));
29
+ overflow: hidden;
30
+ }
31
+ .oc-block-about-media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
32
+
33
+ /* Floating badge on the picture ("Since 2012"). */
34
+ .oc-block-about-badge {
35
+ position: absolute;
36
+ inset: auto auto 1rem 1rem;
37
+ display: grid;
38
+ padding: 0.75rem 1rem;
39
+ border: 1px solid var(--oc-border);
40
+ border-radius: var(--oc-radius-md, 0.75rem);
41
+ background: color-mix(in oklch, var(--oc-background) 85%, transparent);
42
+ backdrop-filter: blur(10px);
43
+ color: var(--oc-muted-foreground);
44
+ font-size: 0.85rem;
45
+ }
46
+ .oc-block-about-badge strong { color: var(--oc-foreground); font-size: 1.4rem; line-height: 1.1; }
47
+
48
+ .oc-block-about-title {
49
+ margin: 0 0 1rem;
50
+ font-size: clamp(1.75rem, 4vw, 2.6rem);
51
+ font-weight: 700;
52
+ line-height: 1.15;
53
+ letter-spacing: -0.02em;
54
+ text-wrap: balance;
55
+ }
56
+ .oc-block-about-copy > p:not([class]) {
57
+ margin: 0 0 1rem;
58
+ color: var(--oc-muted-foreground);
59
+ line-height: 1.65;
60
+ }
61
+ .oc-block-about-copy .oc-timeline { margin-block-start: 1.75rem; }
@@ -1,58 +1,58 @@
1
- /* File: packages/blocks/src/parts/site-contact-grid.css
2
- Map: section -> head -> card grid -> card (mark, title, lines) -> plain variant
3
- Contact grid block: contact info cards (e-mail, phone, address, hours). */
4
-
5
- .oc-block-contact {
6
- max-inline-size: var(--oc-block-max-width, 1200px);
7
- margin-inline: auto;
8
- padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
9
- }
10
-
11
- .oc-block-contact-head { max-inline-size: 40rem; margin-block-end: 2rem; }
12
- .oc-block-contact-heading {
13
- margin: 0 0 0.75rem;
14
- font-size: clamp(1.75rem, 4vw, 2.5rem);
15
- font-weight: 700;
16
- letter-spacing: -0.02em;
17
- }
18
- .oc-block-contact-lead { margin: 0; color: var(--oc-muted-foreground); font-size: 1.05rem; line-height: 1.6; }
19
-
20
- .oc-block-contact-grid {
21
- display: grid;
22
- grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
23
- gap: 1.25rem;
24
- }
25
-
26
- .oc-block-contact-card {
27
- display: grid;
28
- align-content: start;
29
- gap: 0.35rem;
30
- padding: 1.5rem;
31
- border: 1px solid var(--oc-border);
32
- border-radius: var(--oc-radius-lg, 1.25rem);
33
- background: var(--oc-surface);
34
- font-style: normal; /* the address card is an <address> */
35
- }
36
- .oc-block-contact-card > .oc-product-mark { margin-block-end: 0.75rem; }
37
- .oc-block-contact-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
38
-
39
- /* A line of info. As a link it turns to the foreground color on hover. */
40
- .oc-block-contact-line {
41
- margin: 0;
42
- color: var(--oc-muted-foreground);
43
- font-size: 0.95rem;
44
- line-height: 1.55;
45
- text-decoration: none;
46
- overflow-wrap: anywhere;
47
- }
48
- a.oc-block-contact-line { color: var(--oc-foreground); font-weight: 500; }
49
- a.oc-block-contact-line:hover { color: var(--oc-brand-1); }
50
-
51
- /* Plain: no card frames, a thin accent line on top of each item. */
52
- .oc-block-contact--plain .oc-block-contact-card {
53
- padding: 1.25rem 0 0;
54
- border: 0;
55
- border-block-start: 2px solid var(--oc-border-strong);
56
- border-radius: 0;
57
- background: none;
58
- }
1
+ /* File: packages/blocks/src/parts/site-contact-grid.css
2
+ Map: section -> head -> card grid -> card (mark, title, lines) -> plain variant
3
+ Contact grid block: contact info cards (e-mail, phone, address, hours). */
4
+
5
+ .oc-block-contact {
6
+ max-inline-size: var(--oc-block-max-width, 1200px);
7
+ margin-inline: auto;
8
+ padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
9
+ }
10
+
11
+ .oc-block-contact-head { max-inline-size: 40rem; margin-block-end: 2rem; }
12
+ .oc-block-contact-heading {
13
+ margin: 0 0 0.75rem;
14
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
15
+ font-weight: 700;
16
+ letter-spacing: -0.02em;
17
+ }
18
+ .oc-block-contact-lead { margin: 0; color: var(--oc-muted-foreground); font-size: 1.05rem; line-height: 1.6; }
19
+
20
+ .oc-block-contact-grid {
21
+ display: grid;
22
+ grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
23
+ gap: 1.25rem;
24
+ }
25
+
26
+ .oc-block-contact-card {
27
+ display: grid;
28
+ align-content: start;
29
+ gap: 0.35rem;
30
+ padding: 1.5rem;
31
+ border: 1px solid var(--oc-border);
32
+ border-radius: var(--oc-radius-lg, 1.25rem);
33
+ background: var(--oc-surface);
34
+ font-style: normal; /* the address card is an <address> */
35
+ }
36
+ .oc-block-contact-card > .oc-product-mark { margin-block-end: 0.75rem; }
37
+ .oc-block-contact-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
38
+
39
+ /* A line of info. As a link it turns to the foreground color on hover. */
40
+ .oc-block-contact-line {
41
+ margin: 0;
42
+ color: var(--oc-muted-foreground);
43
+ font-size: 0.95rem;
44
+ line-height: 1.55;
45
+ text-decoration: none;
46
+ overflow-wrap: anywhere;
47
+ }
48
+ a.oc-block-contact-line { color: var(--oc-foreground); font-weight: 500; }
49
+ a.oc-block-contact-line:hover { color: var(--oc-brand-1); }
50
+
51
+ /* Plain: no card frames, a thin accent line on top of each item. */
52
+ .oc-block-contact--plain .oc-block-contact-card {
53
+ padding: 1.25rem 0 0;
54
+ border: 0;
55
+ border-block-start: 2px solid var(--oc-border-strong);
56
+ border-radius: 0;
57
+ background: none;
58
+ }
@@ -1,52 +1,52 @@
1
- /* File: packages/blocks/src/parts/site-faq.css
2
- Map: section -> head (eyebrow, title, lead) -> accordion list -> "more" line -> split variant
3
- FAQ block: a title plus the accordion component on native <details name="…"> (one item open at a time). */
4
-
5
- .oc-block-faq {
6
- container-type: inline-size;
7
- max-inline-size: var(--oc-block-max-width, 1200px);
8
- margin-inline: auto;
9
- padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
10
- }
11
-
12
- .oc-block-faq-inner {
13
- display: grid;
14
- gap: 2rem;
15
- max-inline-size: 48rem;
16
- margin-inline: auto;
17
- }
18
-
19
- .oc-block-faq-head { text-align: center; }
20
- .oc-block-faq-title {
21
- margin: 0 0 0.75rem;
22
- font-size: clamp(1.75rem, 4vw, 2.5rem);
23
- font-weight: 700;
24
- letter-spacing: -0.02em;
25
- text-wrap: balance;
26
- }
27
- .oc-block-faq-lead {
28
- margin: 0;
29
- color: var(--oc-block-text-soft, var(--oc-muted-foreground));
30
- font-size: 1.05rem;
31
- line-height: 1.6;
32
- }
33
-
34
- /* The accordion fills the column (the component default is 46rem wide). */
35
- .oc-block-faq-list { --oc-accordion-width: 100%; background: var(--oc-block-surface, var(--oc-card)); }
36
-
37
- .oc-block-faq-more {
38
- margin: 0;
39
- color: var(--oc-block-text-soft, var(--oc-muted-foreground));
40
- text-align: center;
41
- }
42
-
43
- /* Split: head on the left, questions on the right (from 48rem container width). */
44
- @container (min-width: 48rem) {
45
- .oc-block-faq--split .oc-block-faq-inner {
46
- grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
47
- align-items: start;
48
- max-inline-size: none;
49
- }
50
- .oc-block-faq--split .oc-block-faq-head { text-align: start; position: sticky; inset-block-start: 1rem; }
51
- .oc-block-faq--split .oc-block-faq-more { grid-column: 2; text-align: start; }
52
- }
1
+ /* File: packages/blocks/src/parts/site-faq.css
2
+ Map: section -> head (eyebrow, title, lead) -> accordion list -> "more" line -> split variant
3
+ FAQ block: a title plus the accordion component on native <details name="…"> (one item open at a time). */
4
+
5
+ .oc-block-faq {
6
+ container-type: inline-size;
7
+ max-inline-size: var(--oc-block-max-width, 1200px);
8
+ margin-inline: auto;
9
+ padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
10
+ }
11
+
12
+ .oc-block-faq-inner {
13
+ display: grid;
14
+ gap: 2rem;
15
+ max-inline-size: 48rem;
16
+ margin-inline: auto;
17
+ }
18
+
19
+ .oc-block-faq-head { text-align: center; }
20
+ .oc-block-faq-title {
21
+ margin: 0 0 0.75rem;
22
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
23
+ font-weight: 700;
24
+ letter-spacing: -0.02em;
25
+ text-wrap: balance;
26
+ }
27
+ .oc-block-faq-lead {
28
+ margin: 0;
29
+ color: var(--oc-block-text-soft, var(--oc-muted-foreground));
30
+ font-size: 1.05rem;
31
+ line-height: 1.6;
32
+ }
33
+
34
+ /* The accordion fills the column (the component default is 46rem wide). */
35
+ .oc-block-faq-list { --oc-accordion-width: 100%; background: var(--oc-block-surface, var(--oc-card)); }
36
+
37
+ .oc-block-faq-more {
38
+ margin: 0;
39
+ color: var(--oc-block-text-soft, var(--oc-muted-foreground));
40
+ text-align: center;
41
+ }
42
+
43
+ /* Split: head on the left, questions on the right (from 48rem container width). */
44
+ @container (min-width: 48rem) {
45
+ .oc-block-faq--split .oc-block-faq-inner {
46
+ grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
47
+ align-items: start;
48
+ max-inline-size: none;
49
+ }
50
+ .oc-block-faq--split .oc-block-faq-head { text-align: start; position: sticky; inset-block-start: 1rem; }
51
+ .oc-block-faq--split .oc-block-faq-more { grid-column: 2; text-align: start; }
52
+ }
@@ -1,62 +1,62 @@
1
- /* File: packages/blocks/src/parts/site-hero-orbit.css
2
- Map: visual (square, container) -> dashed ring that turns -> marks on the ring (stay upright) -> center window -> reduced motion
3
- Hero orbit block: hero-code layout where product marks orbit around the code window.
4
- Place a mark with style="--oc-orbit-angle: 60deg". The ring turns once per --oc-orbit-duration (default 60s). */
5
-
6
- /* Square stage; container units (cqi) give the ring radius. */
7
- .oc-block-orbit-visual {
8
- position: relative;
9
- container-type: inline-size;
10
- display: grid;
11
- place-items: center;
12
- inline-size: 100%;
13
- max-inline-size: 32rem;
14
- aspect-ratio: 1;
15
- margin-inline: auto;
16
- }
17
-
18
- /* The ring: a dashed circle that slowly turns and carries the marks. */
19
- .oc-block-orbit-ring {
20
- position: absolute;
21
- inset: 6%;
22
- border: 1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);
23
- border-radius: 50%;
24
- animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite;
25
- }
26
- /* Second, inner ring for depth (no marks). */
27
- .oc-block-orbit-ring::before {
28
- content: "";
29
- position: absolute;
30
- inset: 18%;
31
- border: 1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);
32
- border-radius: 50%;
33
- }
34
-
35
- /* A mark sits on the ring at its angle. Radius = half the ring = 44% of the stage width. */
36
- .oc-block-orbit-mark {
37
- position: absolute;
38
- inset-block-start: 50%;
39
- inset-inline-start: 50%;
40
- translate: -50% -50%;
41
- transform: rotate(var(--oc-orbit-angle, 0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle, 0deg) * -1));
42
- }
43
- /* The mark turns back as fast as the ring turns, so its glyph stays upright. */
44
- .oc-block-orbit-mark > * {
45
- display: grid;
46
- animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite reverse;
47
- }
48
-
49
- /* Center: the code window (or any visual) above the ring. */
50
- .oc-block-orbit-center {
51
- position: relative;
52
- z-index: 1;
53
- inline-size: min(100%, 72cqi);
54
- }
55
- .oc-block-orbit-center.oc-code-window .oc-code-window__body { font-size: clamp(0.7rem, 2.6cqi, 0.9rem); }
56
-
57
- @keyframes oc-orbit-spin { to { rotate: 360deg; } }
58
-
59
- @media (prefers-reduced-motion: reduce) {
60
- .oc-block-orbit-ring,
61
- .oc-block-orbit-mark > * { animation: none; }
62
- }
1
+ /* File: packages/blocks/src/parts/site-hero-orbit.css
2
+ Map: visual (square, container) -> dashed ring that turns -> marks on the ring (stay upright) -> center window -> reduced motion
3
+ Hero orbit block: hero-code layout where product marks orbit around the code window.
4
+ Place a mark with style="--oc-orbit-angle: 60deg". The ring turns once per --oc-orbit-duration (default 60s). */
5
+
6
+ /* Square stage; container units (cqi) give the ring radius. */
7
+ .oc-block-orbit-visual {
8
+ position: relative;
9
+ container-type: inline-size;
10
+ display: grid;
11
+ place-items: center;
12
+ inline-size: 100%;
13
+ max-inline-size: 32rem;
14
+ aspect-ratio: 1;
15
+ margin-inline: auto;
16
+ }
17
+
18
+ /* The ring: a dashed circle that slowly turns and carries the marks. */
19
+ .oc-block-orbit-ring {
20
+ position: absolute;
21
+ inset: 6%;
22
+ border: 1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);
23
+ border-radius: 50%;
24
+ animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite;
25
+ }
26
+ /* Second, inner ring for depth (no marks). */
27
+ .oc-block-orbit-ring::before {
28
+ content: "";
29
+ position: absolute;
30
+ inset: 18%;
31
+ border: 1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);
32
+ border-radius: 50%;
33
+ }
34
+
35
+ /* A mark sits on the ring at its angle. Radius = half the ring = 44% of the stage width. */
36
+ .oc-block-orbit-mark {
37
+ position: absolute;
38
+ inset-block-start: 50%;
39
+ inset-inline-start: 50%;
40
+ translate: -50% -50%;
41
+ transform: rotate(var(--oc-orbit-angle, 0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle, 0deg) * -1));
42
+ }
43
+ /* The mark turns back as fast as the ring turns, so its glyph stays upright. */
44
+ .oc-block-orbit-mark > * {
45
+ display: grid;
46
+ animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite reverse;
47
+ }
48
+
49
+ /* Center: the code window (or any visual) above the ring. */
50
+ .oc-block-orbit-center {
51
+ position: relative;
52
+ z-index: 1;
53
+ inline-size: min(100%, 72cqi);
54
+ }
55
+ .oc-block-orbit-center.oc-code-window .oc-code-window__body { font-size: clamp(0.7rem, 2.6cqi, 0.9rem); }
56
+
57
+ @keyframes oc-orbit-spin { to { rotate: 360deg; } }
58
+
59
+ @media (prefers-reduced-motion: reduce) {
60
+ .oc-block-orbit-ring,
61
+ .oc-block-orbit-mark > * { animation: none; }
62
+ }