/* Inner-page extension of the approved October homepage. Loaded only on public content pages. */
:root {
 --navy:#071214; --navy-deep:#071214; --band-navy:#071214;
 --ink:#203438; --ink-2:#4b6064; --body-ink-2:#4b6064;
 --band-pale:#f2f5f4; --band-rule:#d8e0de;
 --page-max:1400px; --page-inset:clamp(24px,6vw,112px);
 --sec-pad:clamp(48px,6vw,88px); --sec-pad-lg:clamp(56px,7vw,100px);
 --head-size:clamp(30px,3vw,44px); --head-intro:18px;
 --body-text:17px; --body-title:22px; --measure:65ch;
}
body{background:#071214}
html{scroll-padding-top:112px}
.hdr{position:fixed;inset:0 0 auto;background:#071214;box-shadow:none;transition:background .2s}
body.has-photo-hero .hdr{background:rgba(7,18,20,var(--inner-nav-opacity,0))}
.hdr-in{min-height:88px;gap:28px}
.hdr-logo img{height:62px}
.hdr-right{border:0;padding:0;margin-left:0;gap:12px}
/* Header phone: shown (Eugene, 2026-10-17); styled by home-presentation.css. */
.hdr .engineering-header-cta{font-size:14px;min-height:44px;padding-inline:22px}
.nav-link,.nav-btn{font-weight:500}
.menu{border-radius:16px}
.btn{border-radius:30px;font-size:16px;font-weight:600;min-height:52px;box-shadow:none}
.hero-simple .btn-primary,.close .btn-primary{min-height:54px;padding-inline:28px;font-size:16px}
.hero-simple{background:#071214;color:#fff}
.hero-simple[data-photo]{background:linear-gradient(90deg,rgba(3,12,15,.85),rgba(3,12,15,.57) 52%,rgba(3,12,15,.2)),linear-gradient(180deg,rgba(3,12,15,.28),transparent 35%,rgba(3,12,15,.22)),var(--hero-photo) center/cover no-repeat}
.hero-simple:not([data-photo]){background:#071214}
.hero-simple .wrap,.hero-simple[data-photo] .wrap{min-height:0;max-width:var(--page-max);padding:148px var(--page-inset) 90px;display:flex;align-items:flex-end}
.hero-simple[data-photo] .wrap{min-height:640px}
.hero-card{padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-radius:0}
.hero-card .crumb{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;margin:0 0 28px}
.hero-card .crumb,.hero-card .crumb a,.hero-card .crumb span,.hero-card .crumb span:last-child{color:#c2d0d0}
.hero-card .crumb a:hover{color:#fff}
.hero-card .eyebrow{font-size:13px;font-weight:500;letter-spacing:.06em;color:#d2dddd;margin-bottom:12px}
.hero-card .eyebrow::before{display:none}
.hero-card h1{font-size:clamp(44px,4.8vw,72px);font-weight:400;line-height:1.04;letter-spacing:-.045em;color:#fff;max-width:20ch;margin:0;text-wrap:balance}
.hero-card .lead,.hero-card .lead-support{font-size:19px;line-height:1.5;color:#e4ebea;max-width:57ch;margin-top:24px}
.hero-card .acts{margin-top:28px;gap:14px}
.hero-card .btn-secondary{background:transparent;border-color:#9bafae;color:#fff}
.hero-card .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero-card .acts a:not(.btn){color:#fff}
.engineering-body{position:relative;background:#f2f5f4;border-radius:38px 38px 0 0;margin-top:-32px;z-index:1;overflow:clip}
.engineering-body h2,.engineering-body h3{font-weight:400;letter-spacing:-.035em}
.spoke-body .sec-head h2,.chapters .chapter h2,.contact h2,.faq-sec h2{font-weight:400;line-height:1.12;letter-spacing:-.035em}
.spoke-body .sec-head::before,.chapters .chapter h2::before,.contact>.wrap>div:first-child h2::before{display:none}
.spoke-body .sec-head{margin-bottom:28px}
.spoke-body .sec-head .intro,.chapters .chapter .p,.contact .lead{font-size:18px;line-height:1.6;margin-top:20px}
.spoke-body .sec:first-child{padding-top:var(--sec-pad)}
.row .t{font-weight:500;letter-spacing:-.02em}
.row .d{line-height:1.6}
.rows.cards{gap:0 32px}
.rows.cards .row{background:none;border:0;border-top:1px solid var(--band-rule);border-radius:0;padding:24px 0}
.rows.cards .divider{grid-column:1/-1}
table.tbl{background:#fff;font-size:16px}
table.tbl th{font-size:13px;text-transform:none;letter-spacing:0;background:#e8eeeb}
table.tbl td,table.tbl th{padding:18px 20px}
.tbl-wrap{border:1px solid var(--band-rule);border-radius:16px;overflow:auto}
.faq summary,details>summary{font-size:20px;font-weight:500;letter-spacing:-.015em;padding-block:24px}
.faq p{font-size:17px;line-height:1.65;max-width:70ch}
.close{background:#071214;border-radius:28px;box-shadow:none;padding:clamp(28px,4vw,56px);gap:32px}
.close h2{font-weight:400;line-height:1.12;letter-spacing:-.035em}
.close .lead{font-size:18px;line-height:1.6}
.close .note{font-size:14px}
.stmt-band,.foot{background:#071214}
.stmt-band p{font-weight:400;letter-spacing:-.035em}
.form-card{background:#fff;border:1px solid var(--band-rule);border-radius:20px;box-shadow:none}
.form-card h3{font-weight:400}
.contact{border:0;background:transparent}
.engineering-body .chapters{padding-top:0}
@media(max-width:980px){
 .hdr-in{min-height:76px;gap:16px;padding-inline:24px}
 .hdr-right{margin-left:auto}
 .nav.open{background:#f2f5f4}
 .nav.open .nav-link,.nav.open .nav-btn{color:#203438}
 .nav.open .menu{background:transparent}
 .hero-simple[data-photo] .wrap{min-height:600px}
}
@media(max-width:600px){
 :root{--page-inset:24px}
 .hdr-in{padding-inline:20px}
 .hdr-logo img{height:46px}
 .hdr .engineering-header-cta{font-size:12px;min-height:40px;padding-inline:14px}
 .hdr-right{gap:8px}
 .menu-btn{font-size:14px;padding-inline:10px;min-height:40px}
 .hero-simple .wrap,.hero-simple[data-photo] .wrap{padding:116px 24px 72px;min-height:0}
 .hero-simple[data-photo]{background-position:center,right center}
 .hero-card h1{font-size:44px;max-width:18ch;line-height:1.06}
 .hero-card .crumb{margin-bottom:24px;font-size:13px}
 .hero-card .lead,.hero-card .lead-support{font-size:17px;margin-top:20px}
 .hero-card .acts{gap:12px}
 .hero-card .acts .btn{width:100%}
 .engineering-body{border-radius:32px 32px 0 0}
 .spoke-body .sec-head h2,.chapters .chapter h2,.contact h2{font-size:32px}
 .spoke-body .sec-head .intro,.chapters .chapter .p,.contact .lead{font-size:17px}
 .rows.cards .row{padding-block:22px}
 .close{border-radius:24px;padding:28px 24px}
 .close .acts{width:100%}
 .close .acts .btn{width:100%;white-space:normal;text-align:center}
 table.tbl td,table.tbl th{padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){.hdr{transition:none}}

/* Structural patterns: opening → system story → technical working surface.
   Story dimensions/crops follow home-film.css; paper/title blocks follow planner.css. */
.hero-simple[data-photo] .wrap{min-height:76svh;padding-top:160px;padding-bottom:100px}
.hero-card h1{max-width:18ch}
.hero-card .acts{margin-top:32px}
.pattern-story{position:relative;z-index:2;margin-top:-32px;border-radius:38px 38px 0 0;background:#071214;padding:64px 0 48px;color:#adbabd}
.pattern-statement{max-width:48ch;font-size:clamp(25px,2.6vw,40px);font-weight:400;line-height:1.3;letter-spacing:-.025em}
.pattern-statement p+p{margin-top:20px}
.pattern-statement strong{color:#fff;font-weight:400}
.pattern-gallery{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#59686c transparent;overscroll-behavior-x:contain;padding-bottom:14px;margin-top:36px}
.pattern-gallery figure{flex:0 0 clamp(300px,38vw,560px);margin:0;scroll-snap-align:start;border-radius:14px;overflow:hidden;background:#26383b;aspect-ratio:4/3}
.pattern-gallery img{display:block;width:100%;height:100%;object-fit:cover}
.pattern-gallery [data-detail="hinge"] img{object-position:50% 38%}
.pattern-gallery [data-detail="evaporator"] img{transform:scale(2.35);transform-origin:65% 0%}
.pattern-gallery [data-detail="plant"] img{object-position:100% 50%;transform:scale(2.6);transform-origin:100% 60%}
.pattern-gallery [data-detail="racking"] img{object-position:100% 50%;transform:scale(1.8);transform-origin:100% 40%}
.pattern-gallery-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.pattern-gallery-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #647478;border-radius:50%;background:transparent;color:#fff;font-size:24px;cursor:pointer}
.pattern-gallery-controls button:disabled{opacity:.3;cursor:default}
.pattern-gallery:focus-visible,.pattern-gallery-controls button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.engineering-body{margin-top:0;border-radius:0;background:#edf1ef;padding:64px 28px;overflow:clip}
.engineering-body>.pattern-sheet,.engineering-body>.contact>.pattern-sheet{
 max-width:1120px;margin:0 auto;padding:40px;border:1px solid #bfcccb;border-radius:4px;box-shadow:none;
 background-color:#f9fbfa;background-image:linear-gradient(#dbe4df45 1px,transparent 1px),linear-gradient(90deg,#dbe4df45 1px,transparent 1px);background-size:24px 24px;
 color:#182e34;font-size:16px;
}
.pattern-sheet .sec,.pattern-sheet .sec:first-child,.pattern-sheet .sec.last{padding:32px 0;border-top:1px solid #bfcccb}
.pattern-sheet .sec:first-child{padding-top:0;border-top:0}
.pattern-sheet .sec:last-child{padding-bottom:0}
.pattern-sheet .sec-head.pattern-titleblock{display:grid;grid-template-columns:minmax(0,1fr) 104px;margin-bottom:24px;border:1px solid #718487;gap:0;background:#f9fbfa}
.pattern-sheet .pattern-titleblock h2{grid-column:1;grid-row:1;align-self:center;margin:0;max-width:none;padding:20px;font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.25;color:#182e34}
.pattern-sheet .pattern-titleblock .no{display:flex;grid-column:2;grid-row:1;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #718487;font-size:24px;font-weight:500;letter-spacing:0;padding:16px 8px;color:#182e34}
.pattern-titleblock .no>span{font-size:14px;font-weight:400;color:#53686d;margin-bottom:6px}
.pattern-sheet .pattern-titleblock .intro{grid-column:1/-1;grid-row:2;margin:0;padding:20px;border-top:1px solid #bfcccb;max-width:none;font-size:16px;line-height:1.6}
.pattern-titleblock .pattern-drawing{display:none}
.pattern-sheet .sec:first-child .pattern-titleblock:has(.intro){grid-template-columns:minmax(0,1fr) 144px}
.pattern-sheet .sec:first-child .pattern-titleblock:has(.intro) .intro{grid-column:1;grid-row:2}
.pattern-sheet .sec:first-child .pattern-titleblock:has(.intro) .pattern-drawing{display:block;grid-column:2;grid-row:2;border-left:1px solid #bfcccb;border-top:1px solid #bfcccb;width:100%;height:100%;max-height:240px;padding:16px;align-self:start}
.pattern-drawing{color:#536e72;width:112px;max-width:100%;height:auto}
.pattern-drawing .accent{stroke:#b7352d}
.pattern-sheet :is(.row .d,.intro,.index,.soft,.faq p,.chapter .p){font-size:16px;line-height:1.6}
.pattern-sheet .row .t,.pattern-sheet .faq summary{font-size:24px;font-weight:500;line-height:1.3}
.pattern-sheet :is(.note,.label,.tbl-note){font-size:14px}
.pattern-sheet table.tbl{background:#f9fbfa;font-size:16px}
.pattern-sheet table.tbl th{font-size:14px;background:#edf1ef}
.pattern-sheet .tbl-wrap{border-radius:4px;border-color:#bfcccb}
.pattern-sheet .rows.cards{gap:0 32px}
.pattern-sheet .rows.cards .row{background:none}
.pattern-sheet .close{border-radius:4px}
.pattern-sheet .close .btn,.pattern-contact .btn{border-radius:4px}
.pattern-sheet .close h2{font-size:32px}
.pattern-sheet .close .lead{font-size:16px}
.pattern-sheet .pattern-chapter{display:grid;grid-template-columns:144px minmax(0,1fr);gap:20px 32px;padding:32px 0;border-top:1px solid #bfcccb}
.pattern-sheet .pattern-chapter:first-child{padding-top:0;border-top:0}
.pattern-chapter-index{grid-column:1;grid-row:1/3;border-right:1px solid #bfcccb;font-size:14px;color:#53686d;padding-right:24px}
.pattern-chapter-index .pattern-drawing{margin-top:20px}
.pattern-sheet .pattern-chapter>div:not(.pattern-chapter-index){grid-column:2}
.pattern-sheet .pattern-chapter h2{font-size:24px;font-weight:600}
.pattern-sheet .pattern-chapter .stmt{font-size:32px;font-weight:400;line-height:1.3}
.engineering-body>.stmt-band{margin:48px -28px}
.pattern-contact .form-card{background:none;border:0;border-left:1px solid #bfcccb;border-radius:0;padding:0 0 0 32px}
.pattern-contact h2{font-size:32px}
.pattern-contact .field{border-radius:3px;font-size:16px}
.pattern-contact .lead{font-size:16px}
/* Contact: what happens next, where we work (2026-10-17) */
.pattern-contact .contact-sub{font-size:17px;margin:28px 0 8px}
.pattern-contact .contact-next{margin:0;padding-left:20px;display:grid;gap:6px;font-size:16px;line-height:1.5}
.pattern-contact .contact-next li::marker{color:var(--red,#B7352D);font-weight:700}
@media(max-width:600px){
 .hero-simple[data-photo] .wrap{min-height:70svh;padding:124px 24px 92px}
 .pattern-story{padding:44px 0 36px}
 .pattern-statement{font-size:30px;line-height:1.15;letter-spacing:-.035em}
 .pattern-gallery{gap:12px;margin-top:28px;margin-right:-24px;padding-right:24px}
 .pattern-gallery figure{flex-basis:82vw;border-radius:10px}
 .engineering-body{padding:28px 16px}
 .engineering-body>.pattern-sheet,.engineering-body>.contact>.pattern-sheet{padding:20px}
 .pattern-sheet .sec-head.pattern-titleblock,.pattern-sheet .sec:first-child .pattern-titleblock:has(.intro){grid-template-columns:minmax(0,1fr) 64px}
 .pattern-sheet .pattern-titleblock h2{padding:16px;font-size:24px;overflow-wrap:break-word}
 .pattern-sheet .pattern-titleblock .no{padding:12px 6px}
 .pattern-sheet .pattern-titleblock .intro,.pattern-sheet .sec:first-child .pattern-titleblock:has(.intro) .intro{grid-column:1/-1;padding:16px}
 .pattern-sheet .sec:first-child .pattern-titleblock:has(.intro) .pattern-drawing{display:none}
 .pattern-sheet .row .t,.pattern-sheet .faq summary{font-size:24px}
 .pattern-sheet table.tbl td{padding:12px}
 .pattern-sheet .close{padding:24px 20px}
 .pattern-sheet .pattern-chapter{grid-template-columns:1fr;gap:16px}
 .pattern-chapter-index{grid-column:1;grid-row:auto;display:flex;justify-content:space-between;align-items:center;border:0;border-bottom:1px solid #bfcccb;padding:0 0 16px}
 .pattern-chapter-index .pattern-drawing{width:64px;margin:0}
 .pattern-sheet .pattern-chapter>div:not(.pattern-chapter-index){grid-column:1}
 .engineering-body>.stmt-band{margin:32px -16px}
 .pattern-contact .form-card{border:0;border-top:1px solid #bfcccb;padding:24px 0 0}
}
@media(max-width:900px){.pattern-contact .form-card{border-left:0;padding-left:0}}

/* One title block per working surface; technical sections stay inside it, unboxed. */
.pattern-story-detail{max-width:66ch;font-size:18px;line-height:1.6;color:#c3d0d0;margin-top:24px}
.pattern-sheet-header{display:grid;grid-template-columns:minmax(0,1fr) 144px;border:1px solid #718487;background:#f9fbfa;margin-bottom:32px;align-items:center}
.pattern-sheet-header>div{padding:20px}
.pattern-sheet-header p{font-size:14px;line-height:1.4;color:#53686d;margin-bottom:6px}
.pattern-sheet .pattern-sheet-header h2{font-size:32px;font-weight:500;line-height:1.15;letter-spacing:-.035em;margin:0;color:#182e34}
.pattern-sheet-header .pattern-drawing{padding:12px;width:100%;height:120px;border-left:1px solid #718487}
.engineering-body>.pattern-sheet:has(>.sec:only-child){border:0;background:none;padding:0;margin-top:48px}
.pattern-sheet .sec-head.pattern-titleblock,.pattern-sheet .sec:first-child .pattern-titleblock:has(.intro){display:block;border:0;background:none}
.pattern-sheet .pattern-titleblock .no{display:none}
.pattern-sheet .pattern-titleblock h2{padding:0;font-size:24px;max-width:none}
.pattern-sheet .pattern-titleblock .intro,.pattern-sheet .sec:first-child .pattern-titleblock:has(.intro) .intro{padding:0;margin-top:16px;border:0;max-width:65ch}
.pattern-sheet .sec:first-child .pattern-titleblock:has(.intro) .pattern-drawing{display:none}
.pattern-sheet .sec:first-of-type{border-top:0;padding-top:0}
.pattern-chapter-index .pattern-drawing{display:none}
.pattern-sheet .pattern-chapter{grid-template-columns:88px minmax(0,1fr)}
@media(max-width:600px){
 .pattern-story-detail{font-size:16px;margin-top:20px}
 .pattern-sheet-header{grid-template-columns:minmax(0,1fr) 76px;margin-bottom:24px}
 .pattern-sheet-header>div{padding:16px}
 .pattern-sheet .pattern-sheet-header h2{font-size:24px;overflow-wrap:break-word}
 .pattern-sheet-header .pattern-drawing{height:100px;padding:8px}
 .pattern-sheet .pattern-chapter{grid-template-columns:1fr}
 .hdr .menu-btn{font-size:0;width:44px;height:44px;min-width:44px;border:0;background:transparent;position:relative;padding:12px}
 .hdr .menu-btn::before{content:"";display:block;height:2px;width:20px;background:#fff;box-shadow:0 -6px #fff,0 6px #fff}
}

/* The same full-bleed paper section as the planner. Content remains bounded. */
.engineering-body{
 position:relative;z-index:3;margin-top:-32px;border-radius:38px 38px 0 0;padding:64px 28px;
 background-color:#f9fbfa;background-image:linear-gradient(#dbe4df45 1px,transparent 1px),linear-gradient(90deg,#dbe4df45 1px,transparent 1px);background-size:24px 24px;
}
.pattern-story{padding-bottom:80px}
.engineering-body>.pattern-sheet,.engineering-body>.contact>.pattern-sheet{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
@media(max-width:600px){
 .engineering-body{padding:40px 24px;border-radius:38px 38px 0 0}
 .engineering-body>.pattern-sheet,.engineering-body>.contact>.pattern-sheet{padding:0}
 .pattern-story{padding-bottom:68px}
 .engineering-body>.stmt-band{margin-inline:-24px}
}

/* Equipment studies act as quiet margin marks on wide squared-paper sections. */
@media(min-width:1320px){
 .engineering-body::before,.engineering-body::after{content:"";position:absolute;z-index:0;top:96px;width:min(220px,calc((100vw - 1120px)/2 - 28px));height:360px;background-repeat:no-repeat;background-size:contain;opacity:.62;pointer-events:none}
 .engineering-body::before{left:max(8px,calc((100vw - 1120px)/2 - 236px));background-image:var(--drawing-left)}
 .engineering-body::after{right:max(8px,calc((100vw - 1120px)/2 - 236px));top:520px;background-image:var(--drawing-right)}
 .engineering-body>.pattern-sheet,.engineering-body>.contact>.pattern-sheet,.engineering-body>.stmt-band{position:relative;z-index:1}
}
body[data-drawing="evaporator"] .engineering-body{--drawing-left:url('/images/equipment-drawings/evaporator-motif.svg')}
body[data-drawing="condensing-unit"] .engineering-body{--drawing-left:url('/images/equipment-drawings/condensing-unit-motif.svg')}
body[data-drawing="panel-joint"] .engineering-body{--drawing-left:url('/images/equipment-drawings/panel-joint-motif.svg')}
body[data-drawing="hinged-door"] .engineering-body{--drawing-left:url('/images/equipment-drawings/hinged-door-motif.svg')}
body[data-drawing="sliding-door"] .engineering-body{--drawing-left:url('/images/equipment-drawings/sliding-door-motif.svg')}
body[data-drawing="floor-wall"] .engineering-body{--drawing-left:url('/images/equipment-drawings/floor-wall-motif.svg')}
body[data-drawing="pallet-racking"] .engineering-body{--drawing-left:url('/images/equipment-drawings/pallet-racking-motif.svg')}
body[data-drawing="controls"] .engineering-body{--drawing-left:url('/images/equipment-drawings/controls-motif.svg')}
body[data-drawing-alt="evaporator"] .engineering-body{--drawing-right:url('/images/equipment-drawings/evaporator-motif.svg')}
body[data-drawing-alt="condensing-unit"] .engineering-body{--drawing-right:url('/images/equipment-drawings/condensing-unit-motif.svg')}
body[data-drawing-alt="panel-joint"] .engineering-body{--drawing-right:url('/images/equipment-drawings/panel-joint-motif.svg')}
body[data-drawing-alt="hinged-door"] .engineering-body{--drawing-right:url('/images/equipment-drawings/hinged-door-motif.svg')}
body[data-drawing-alt="sliding-door"] .engineering-body{--drawing-right:url('/images/equipment-drawings/sliding-door-motif.svg')}
body[data-drawing-alt="floor-wall"] .engineering-body{--drawing-right:url('/images/equipment-drawings/floor-wall-motif.svg')}
body[data-drawing-alt="pallet-racking"] .engineering-body{--drawing-right:url('/images/equipment-drawings/pallet-racking-motif.svg')}
body[data-drawing-alt="controls"] .engineering-body{--drawing-right:url('/images/equipment-drawings/controls-motif.svg')}

/* Text links beside or under a primary action keep a 44px touch area on phones (2026-10-02). */
@media(max-width:760px){
 .acts a:not(.btn),.ledger a{display:inline-flex;align-items:center;min-height:44px}
 .ledger>div{align-items:center}
}
/* Smallest phones: logo, header button and menu fit inside 320px without pushing the menu off-screen. */
@media(max-width:360px){
 .hdr-in{gap:8px;padding-inline:16px}
 .hdr-right{gap:4px}
 .hdr .engineering-header-cta{padding-inline:10px}
 .hdr .menu-btn{width:40px;min-width:40px;padding:10px}
}

/* Header button is a white outline on every page (Eugene, 2026-10-03: two red buttons side by side don't work).
   Red stays for the page's own main action. */

/* Gallery arrows (Eugene, 2026-10-03): one button everywhere, a white disc with a drawn chevron, both arrows
   always shown (the one with nowhere to go is faded). Wider than 600px they sit on the row's left and right
   edges, centred on the pictures; phones swipe and keep them below the row. */
.pattern-gallery-stage{position:relative}
.pattern-gallery-controls button{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:#0b1a1d;font-size:0;line-height:0;cursor:pointer;box-shadow:0 2px 4px #0000001f,0 8px 24px #00000040;transition:transform .15s ease,background-color .15s ease,opacity .15s ease;pointer-events:auto}
.pattern-gallery-controls button::before{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.pattern-gallery-controls button[data-gallery-step="-1"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.pattern-gallery-controls button:hover:not(:disabled){transform:scale(1.06);background:#eef3f3}
.pattern-gallery-controls button:disabled{opacity:.4;cursor:default;box-shadow:0 2px 4px #0000001f;visibility:visible}
.pattern-gallery-controls button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(min-width:601px){.pattern-gallery-controls button{width:52px;height:52px}}
@media(min-width:601px){
 .pattern-gallery-controls{position:absolute;inset:36px 0 14px;margin:0;padding-inline:20px;justify-content:space-between;align-items:center;pointer-events:none}
}