.example-quick-nav { display:flex; gap:1.4rem; justify-content:space-between; border-block:1px solid currentColor; border-color:color-mix(in srgb,currentColor 18%,transparent); padding-block:.9rem; }
.example-quick-nav a { display:inline-flex; align-items:center; gap:.8rem; font-size:.75rem; min-height:34px; }.example-quick-nav svg { width:14px; height:14px; }
.example-more { position:relative; }.example-more summary { cursor:pointer; font-size:.8rem; list-style:none; padding:.6rem 0; white-space:nowrap; }.example-more summary::after { content:'+'; margin-left:.5rem; }.example-more[open] summary::after { content:'−'; }.example-more summary::-webkit-details-marker { display:none; }
.example-more > nav { position:absolute; z-index:35; top:100%; right:-1rem; padding:1rem; width:270px; max-height:65vh; overflow:auto; border:1px solid color-mix(in srgb,currentColor 25%,transparent); background:var(--demo-menu-bg,#fff); color:var(--demo-menu-text,#202727); box-shadow:0 8px 25px #0002; display:grid; gap:.15rem; }
.example-more > nav a { display:block; padding:.65rem; font-size:.82rem; }.example-more > nav a:hover { background:color-mix(in srgb,currentColor 8%,transparent); }
.theme-olive { --demo-menu-bg:#252d23; --demo-menu-text:#e4e4ce; }.theme-current { --demo-menu-bg:#142e40; --demo-menu-text:#fff; }.theme-form { --demo-menu-bg:#e9e2ef; --demo-menu-text:#403247; }.theme-clearflow { --demo-menu-bg:#fff; --demo-menu-text:#14364a; }.theme-ridgeline { --demo-menu-bg:#f5f1e8; --demo-menu-text:#302e29; }
.demo-nav { gap:1.3rem; }.demo-nav > .demo-button { white-space:nowrap; }.demo-footer-top > nav { display:grid; grid-template-columns:1fr 1fr; gap:.5rem 2rem; min-width:45%; }.demo-footer-top > nav a { font-size:.8rem; }
.example-feature { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }.example-feature img { width:100%; height:460px; object-fit:cover; }.example-feature p:not(.demo-kicker) { font-size:1rem; line-height:1.8; margin-top:1.5rem; max-width:440px; }.theme-clearflow .example-feature img { border-radius:18px; }.theme-form .example-feature img { border-radius:130px 130px 8px 8px; }
.example-section-title { display:flex; justify-content:space-between; align-items:end; gap:3rem; margin-bottom:2rem; }.example-section-title h2 { max-width:770px; }.example-section-title > a { flex-shrink:0; }
.example-gallery-teaser { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }.example-gallery-teaser img { width:100%; height:285px; object-fit:cover; }.example-gallery-teaser a:nth-child(2) { margin-top:2rem; }.example-photo-note { font-size:.7rem; margin-top:1.3rem; opacity:.8; }
.example-breadcrumb { display:flex; gap:.75rem; padding-top:1.6rem; font-size:.73rem; flex-wrap:wrap; }.example-breadcrumb a { text-decoration:underline; text-underline-offset:4px; }
.example-detail-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:4rem; padding-block:3rem 4rem; align-items:center; }.example-detail-hero h1 { font-size:clamp(3.6rem,5.2vw,5.7rem); }.example-detail-hero p:not(.demo-kicker) { font-size:1.04rem; line-height:1.8; margin-top:1.5rem; max-width:520px; }.example-detail-hero .demo-button { margin-top:1.5rem; }.example-detail-hero figure { margin:0; }.example-detail-hero figure img { width:100%; height:490px; object-fit:cover; }.example-detail-hero figcaption { font-size:.64rem; margin-top:.7rem; opacity:.75; }
.theme-current .example-detail-hero h1,.theme-clearflow .example-detail-hero h1 { font-size:clamp(3rem,4.3vw,4.6rem); }.theme-clearflow .example-detail-hero figure img { border-radius:20px; }.theme-form .example-detail-hero figure img { border-radius:130px 130px 0 0; }
.example-detail-body { display:grid; grid-template-columns:1.6fr .85fr; gap:5rem; padding-block:2rem 3rem; }.example-detail-body > div > article { display:grid; grid-template-columns:35px 1fr; gap:1.4rem; border-top:1px solid color-mix(in srgb,currentColor 25%,transparent); padding-block:2rem; }.example-detail-body article > span { font-size:.67rem; opacity:.7; padding-top:.5rem; }.example-detail-body article h2 { font-size:2.5rem; margin-bottom:1.4rem; line-height:1.1; }.example-detail-body article p { line-height:1.85; font-size:1rem; }.example-detail-body li { font-size:.92rem; line-height:1.65; padding-left:.3rem; margin-top:.6rem; }
.theme-clearflow .example-detail-body article h2,.theme-current .example-detail-body article h2 { font-size:2rem; }
.example-help { align-self:start; position:sticky; top:6rem; border:1px solid color-mix(in srgb,currentColor 25%,transparent); padding:2rem; }.example-help h2 { font-size:2.25rem; }.example-help p:not(.demo-kicker) { margin-top:1.3rem; font-size:.86rem; }.example-help .demo-button { margin-top:1.5rem; font-size:.75rem; padding-inline:1rem; gap:.7rem; width:100%; }.example-help .demo-text-link { font-size:.8rem; }
.theme-clearflow .example-help { border-radius:15px; background:#eef7fb; }.theme-ridgeline .example-help { background:#e9e2d5; }.theme-form .example-help { border-radius:18px; }
.example-related { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }.example-related a { border-top:1px solid color-mix(in srgb,currentColor 25%,transparent); padding-top:1.3rem; display:flex; flex-direction:column; }.example-related a > span { font-size:1.1rem; font-weight:550; }.example-related p { margin:1rem 0; font-size:.87rem; }.example-related svg { width:21px; height:21px; margin-top:auto; }
.example-page-closing { display:flex; justify-content:space-between; align-items:center; gap:3rem; padding-block:4rem; border-top:1px solid color-mix(in srgb,currentColor 25%,transparent); }.example-page-closing h2 { font-size:3.2rem; }.example-page-closing p { margin-top:1rem; font-size:.95rem; }.example-page-closing .demo-button { flex-shrink:0; }
.example-gallery { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 1.5rem; padding-bottom:4rem; }.example-gallery figure { margin:0; }.example-gallery figure:nth-child(3n+1) { grid-column:1/-1; }.example-gallery a { display:block; position:relative; overflow:hidden; }.example-gallery img { height:400px; width:100%; object-fit:cover; transition:transform .4s; }.example-gallery figure:nth-child(3n+1) img { height:520px; }.example-gallery a:hover img { transform:scale(1.025); }.example-gallery figcaption { font-size:.73rem; margin-top:.8rem; opacity:.8; }.gallery-zoom { display:flex; gap:.5rem; align-items:center; position:absolute; right:1rem; bottom:1rem; background:#fff; color:#202727; padding:.55rem .8rem; font-size:.7rem; border-radius:3px; }.gallery-zoom svg { width:15px; height:15px; }
.gallery-dialog { max-width:min(1100px,94vw); width:100%; max-height:94dvh; padding:1rem; border:0; background:#fff; color:#202727; border-radius:5px; }.gallery-dialog::backdrop { background:#081010d9; }.gallery-dialog > button { display:flex; align-items:center; gap:.6rem; margin-left:auto; border:0; background:#fff; padding:.5rem; min-height:44px; font-size:.8rem; }.gallery-dialog > button svg { width:18px; height:18px; }.gallery-dialog > img { max-height:70dvh; object-fit:contain; width:100%; background:#f6f8f8; }.gallery-dialog > p { font-size:.8rem; margin-top:.8rem; }.gallery-dialog > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.7rem; }.gallery-dialog > div button { background:#fff; border:1px solid #cbd2d3; padding:.6rem 1rem; font-size:.8rem; min-height:44px; }.gallery-dialog [data-gallery-position] { font-size:.75rem; }.gallery-dialog :focus-visible { outline:3px solid #ad3c1e; }
.example-faq-page { max-width:960px; padding-top:0; }.example-faq-page .faq-item summary { font-size:1.1rem; padding-block:1.6rem; }.example-faq-page .faq-item p { font-size:1rem; line-height:1.8; }
.example-mobile-action { display:none; }
.demo-request-form .field label span { color:inherit; }
.menu-category-photo { width:100%; height:230px; object-fit:cover; margin-bottom:1.8rem; }
@media(max-width:1150px) { .demo-header { gap:1rem; }.demo-nav { gap:1rem; font-size:.75rem; }.demo-nav .demo-button { padding-inline:1rem; gap:.8rem; font-size:.75rem; }.example-more summary { font-size:.75rem; }.example-feature,.example-detail-hero,.example-detail-body { gap:3rem; }.example-help { padding:1.5rem; } }
@media(max-width:950px) and (min-width:761px) { .demo-header { flex-wrap:wrap; padding-block:1.2rem; gap:1rem; }.demo-header .demo-nav { width:100%; justify-content:space-between; }.example-detail-hero h1 { font-size:3.7rem; }.theme-current .example-detail-hero h1,.theme-clearflow .example-detail-hero h1 { font-size:3rem; }.example-detail-body { grid-template-columns:1.3fr .9fr; gap:2rem; }.example-help h2 { font-size:1.8rem; } }
@media(max-width:760px) {
  .demo-request-form input,.demo-request-form select,.demo-request-form textarea { font-size:1rem; }
  .demo-body { padding-bottom:70px; }.demo-header { min-height:83px; }.demo-mobile nav { max-height:65dvh; overflow:auto; overscroll-behavior:contain; top:calc(100% - 1px); }.demo-mobile nav a { font-size:.88rem; min-height:44px; }
  .example-quick-nav { display:grid; grid-template-columns:1fr 1fr; gap:.2rem 1rem; padding-block:.65rem; }.example-quick-nav a { font-size:.68rem; justify-content:space-between; min-height:39px; }.example-quick-nav svg { flex-shrink:0; }
  .example-feature,.example-detail-hero,.example-detail-body { grid-template-columns:1fr; gap:2rem; }.example-feature img { height:300px; }.example-feature p:not(.demo-kicker) { font-size:.95rem; }.example-section-title { display:block; margin-bottom:1.5rem; }.example-section-title h2 { font-size:2.6rem; }.example-section-title > a { margin-top:1rem; }
  .example-gallery-teaser { grid-template-columns:1fr 1fr; gap:.8rem; }.example-gallery-teaser a:first-child { grid-column:1/-1; }.example-gallery-teaser a:nth-child(2) { margin-top:0; }.example-gallery-teaser img { height:190px; }.example-gallery-teaser a:first-child img { height:250px; }
  .example-detail-hero { padding-block:2rem 3rem; }.example-detail-hero h1 { font-size:clamp(3.2rem,10vw,4rem); }.theme-current .example-detail-hero h1,.theme-clearflow .example-detail-hero h1 { font-size:clamp(2.6rem,8.4vw,3.4rem); }.example-detail-hero p:not(.demo-kicker) { font-size:.98rem; }.example-detail-hero figure img { height:310px; }.example-detail-hero .demo-button { width:100%; }
  .example-detail-body { padding-top:0; }.example-detail-body > div > article { grid-template-columns:25px 1fr; gap:.8rem; padding-block:1.6rem; }.example-detail-body article h2 { font-size:2.1rem; }.theme-current .example-detail-body article h2,.theme-clearflow .example-detail-body article h2 { font-size:1.7rem; }.example-detail-body article p { font-size:.94rem; }.example-help { position:static; }.example-help .demo-button { width:auto; }.example-help .demo-text-link { display:flex; max-width:230px; }
  .example-related { grid-template-columns:1fr; gap:1.6rem; }.example-related p { margin-bottom:.7rem; }.example-page-closing { display:block; padding-block:3rem; }.example-page-closing h2 { font-size:2.5rem; }.example-page-closing .demo-button { margin-top:1.5rem; width:100%; }
  .example-gallery { grid-template-columns:1fr; gap:1.7rem; }.example-gallery figure:nth-child(3n+1) { grid-column:auto; }.example-gallery img,.example-gallery figure:nth-child(3n+1) img { height:310px; }.example-faq-page .faq-item summary { font-size:1rem; }.example-faq-page .faq-item p { font-size:.94rem; }
  .demo-footer-top > nav { gap:.3rem 1rem; }.demo-footer-top > nav a { font-size:.75rem; min-height:39px; }.demo-footer-bottom { padding-bottom:1rem; }
  .example-mobile-action { position:fixed; inset:auto 0 0; z-index:42; display:grid; grid-template-columns:.6fr 1fr; gap:.7rem; align-items:center; padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); border-top:1px solid color-mix(in srgb,currentColor 25%,transparent); background:var(--demo-menu-bg); color:var(--demo-menu-text); }.example-mobile-action > a:first-child { font-size:.78rem; text-align:center; min-height:44px; display:grid; place-items:center; }.example-mobile-action .demo-button { padding:.7rem .8rem; font-size:.74rem; gap:.6rem; min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { .example-gallery img { transition:none; } }