/* Generated by scripts/build_assets.py; edit the sources, not this file. */
/* /assets/creations/magnetic-slider-v1.css */
/* Magnetic engagement is shown visually; previews never autoplay sound. */
.model-snap-cue{position:absolute;left:50%;bottom:23%;z-index:4;transform:translate(-50%,5px);opacity:0;pointer-events:none;font:500 italic 16px/1.2 "DM Sans",sans-serif;letter-spacing:.04em;color:#484d52;text-shadow:0 0 12px #fff;transition:opacity .14s,transform .2s}
.model-snap-cue.is-snapping{opacity:1;transform:translate(-50%,0)}
.model-snap-cue::before,.model-snap-cue::after{content:"";position:absolute;top:50%;width:12px;height:1px;background:currentColor;opacity:.55}
.model-snap-cue::before{right:calc(100% + 9px);transform:rotate(-18deg)}
.model-snap-cue::after{left:calc(100% + 9px);transform:rotate(18deg)}
.model-slide-play{position:absolute;top:14px;right:18px;z-index:4;border:1px solid #c6c8c9;border-radius:20px;background:#fafaf8e6;color:#34383b;font:500 12px/1.2 "DM Sans",sans-serif;padding:10px 15px;cursor:pointer}
.model-slide-play[hidden]{display:none}
.model-slide-play:hover{background:#fff;border-color:#767c82}
.model-slide-play:focus-visible{outline:2px solid #798491;outline-offset:3px}
#modelPreview.model-slide .turn-wheel-drum{clip-path:inset(0 max(0px,calc(50% - var(--height-above))) 0 max(0px,calc(50% - var(--height-below))))}
#modelPreview.model-slide .model-turn-wheel::before{left:max(0px,calc(50% - var(--height-below)))}
#modelPreview.model-slide .model-turn-wheel::after{right:max(0px,calc(50% - var(--height-above)))}
@media(max-width: 0px){.model-snap-cue{transition:none}}
/* /assets/creations/assembly-wheel-v1.css */
/* Installation wheels end where the sequence ends, using the magnetic slider's travel treatment. */
#modelPreview.model-assembly .turn-wheel-drum{clip-path:inset(0 max(0px,calc(50% - var(--height-above))) 0 max(0px,calc(50% - var(--height-below))))}
#modelPreview.model-assembly .model-turn-wheel::before{left:max(0px,calc(50% - var(--height-below)))}
#modelPreview.model-assembly .model-turn-wheel::after{right:max(0px,calc(50% - var(--height-above)))}
/* /assets/creations/variant-groups-v1.css */
#modelPreview .model-variant-control:has(.has-groups){display:block}
#modelPreview .model-variant-buttons.has-groups{display:grid;gap:8px;width:100%}
.model-variant-row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px}
.model-variant-row-label{font-size:12px;font-weight:500;color:#555550}
.model-variant-row-options{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
@media(max-width:600px){.model-variant-row{grid-template-columns:64px minmax(0,1fr);gap:6px}#modelPreview .model-variant-row-options button{min-height:36px}}
/* /assets/creations/category-render-v2.css */
/* Replaces category-render-v1.css (2026-10-07). The category heading brackets are now static drawn brackets
   (category-headers-v1.css), so only v1's render-surface rules for the hero and header remain. */
@media(min-width:761px) and (hover:hover){
 .page-creations .page-hero .creations-hero-mark,
 .page-creations .page-hero .creations-wordmark,
 .page-creations .page-hero .creations-letter-light,
 .page-creations #mainNav{transform:translateZ(0);will-change:transform}
}
/* /assets/creations/product-guides-v1.css */
.product-guidance{border-top:1px solid #d6d6d1;margin-top:20px;padding-top:16px;font-family:'DM Sans',sans-serif}
#modelPreview .product-guidance h3{font-family:inherit;font-size:14px;font-weight:500;margin:0 0 8px}
#modelPreview .product-guidance p,#modelPreview .product-guidance li{font-size:13px;line-height:1.65;color:#555550}
.product-guidance ul{padding-left:18px;margin:12px 0}.product-guidance li+li{margin-top:8px}
.product-fit{border-block:1px solid #deded8;margin:16px 0;padding:12px 0}
.product-fit summary,.product-measurement summary{cursor:pointer;font-size:13px;font-weight:500;min-height:28px}
.product-measurement{margin:14px 0}.product-measurement svg{display:block;max-width:100%;width:320px;height:auto;fill:none;stroke:#59616a;stroke-width:1.5}
.product-measurement svg text{fill:#444;stroke:none;font:12px 'DM Sans',sans-serif}
.product-guidance a{color:inherit;font-size:13px;text-underline-offset:4px}.product-guide-link{display:block;margin:12px 0}
#modelPreview .product-media-tabs{display:flex;gap:6px;padding:0 16px 8px;flex:none}
#modelPreview .product-media-tabs[hidden],#modelPreview .model-browser[hidden],#modelPreview .model-controls[hidden],#modelPreview .product-installation-photo[hidden]{display:none!important}
.product-media-tabs button{background:transparent;color:#494947;border:1px solid #c6c6bf;border-radius:7px;padding:8px 12px;font:500 12px 'DM Sans',sans-serif;min-height:36px;cursor:pointer}
.product-media-tabs button[aria-pressed="true"]{background:#343432;color:#fff;border-color:#343432}
.product-media-tabs button:focus-visible,.product-guidance a:focus-visible{outline:2px solid #596b80;outline-offset:3px}
#modelPreview .model-visual:has(.product-media-tabs:not([hidden])){display:flex;flex-direction:column}
#modelPreview .model-visual:has(.product-media-tabs:not([hidden])) .model-browser{flex:1;min-height:0}
.product-installation-photo{margin:0;padding:0 16px 12px;min-height:0;flex:1;display:flex;flex-direction:column;gap:8px}
.product-installation-photo img{display:block;min-height:0;flex:1;object-fit:contain;width:100%;height:100%;border-radius:4px}
.product-installation-photo figcaption{font-size:12px;line-height:1.5;color:#5b5b55;flex:none}
.product-help-item{scroll-margin-top:110px}.product-help-item h3{font:500 16px 'DM Sans',sans-serif;margin:20px 0 8px}.product-help-item li{margin-bottom:8px}.product-help-item ul,.product-help-item ol{padding-left:22px}
.fan-comparison{overflow-x:auto;margin:24px 0;scroll-margin-top:110px}.fan-comparison table{border-collapse:collapse;width:100%;font:14px/1.6 'DM Sans',sans-serif}.fan-comparison th,.fan-comparison td{text-align:left;vertical-align:top;padding:14px 12px;border-bottom:1px solid #d4d4ce}.fan-comparison th{font-weight:500}.fan-comparison caption{text-align:left;margin-bottom:12px;font-weight:500}.fan-comparison a{color:inherit}
@media(max-width:760px){#modelPreview .product-media-tabs{padding:0 12px 6px}.product-installation-photo{padding:0 12px 8px}.product-guidance{margin-top:12px;padding-top:12px}.fan-comparison table{min-width:570px}}
.collection-fan-compare{border-bottom:1px solid #d4d4ce;margin:-12px 0 28px;padding:0 0 16px;font:14px/1.65 'DM Sans',sans-serif}
.collection-fan-compare>summary{cursor:pointer;width:fit-content;padding:8px 0;min-height:44px;font-weight:500}
.collection-fan-compare p{max-width:760px;color:#555550;margin:12px 0}.collection-fan-compare a{color:inherit;text-underline-offset:4px}
.post-body #fan-comparison,.post-body #test-notes{scroll-margin-top:110px}
.product-guide-copy,.product-guide-print{font:inherit;font-size:13px;background:none;border:1px solid #bbb;border-radius:5px;padding:8px 12px;cursor:pointer;color:inherit;transition:border-color .15s,color .15s}
.product-guide-copy:hover,.product-guide-print:hover{border-color:#777;color:#171717}
.product-guide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid #deded8}
.product-guide-status{font-size:12px;color:#666}
.product-guide-print-source{display:none}

.fan-comparison-hint{display:none}@media(max-width:760px){.fan-comparison-hint{display:block;font-size:12px;font-weight:400;color:#666;margin-top:6px}}
/* /assets/css/bankasi-refresh-v1.css */
/* Editorial refresh. Scoped additions leave the Creations motion and card effects intact. */
.workbench-editorial{display:block!important;background:none!important;border:0!important}
.workbench-chapter{margin:0 0 clamp(48px,7vw,100px)}
.chapter-heading{font:400 clamp(28px,3vw,40px)/1.15 'Cormorant Garamond',serif;border-top:1px solid #c9ccc6;padding-top:22px;margin:0 0 28px;color:#30332f}
.chapter-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.workbench-editorial .workbench-card{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.workbench-editorial .workbench-card:hover{background:transparent}
.workbench-editorial .workbench-card-image,.workbench-editorial .workbench-feature-image{border:0;border-radius:3px;overflow:hidden;background:#edeeea}
.workbench-editorial .workbench-card-body{padding:24px 0!important}
.workbench-editorial .card-title{font:400 clamp(27px,3vw,38px)/1.15 'Cormorant Garamond',serif;color:#30332f;margin:14px 0}
.workbench-editorial .card-excerpt{max-width:52ch;line-height:1.75}
.workbench-editorial .card-footer{padding-top:16px;margin-top:24px}
.workbench-editorial .chapter-featured .chapter-stories{display:block}
.workbench-editorial .chapter-featured .workbench-card{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.workbench-editorial .chapter-featured .card-title{font-size:clamp(36px,4.5vw,60px)}
.workbench-editorial .chapter-featured img{width:100%;height:100%;max-height:520px;object-fit:cover;aspect-ratio:5/4}
.workbench-editorial .chapter-guides .workbench-card{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.workbench-editorial .chapter-guides .workbench-card-body{padding:0!important}
.workbench-editorial .chapter-guides img{width:100%;height:150px;object-fit:cover;padding:0}
.workbench-editorial .chapter-guides .card-title{font-size:30px}
.workbench-editorial .chapter-studio img{height:auto;aspect-ratio:3/2;object-fit:cover}
.chapter-archive .chapter-stories{display:block}
.workbench-editorial .archive-card{display:grid;grid-template-columns:1fr;min-height:0;border-bottom:1px solid #d6d8d2}
.workbench-editorial .archive-card .workbench-card-image,.workbench-editorial .archive-card .card-excerpt,.workbench-editorial .archive-card .card-footer{display:none}
.workbench-editorial .archive-card .workbench-card-body{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:baseline;padding:22px 0!important}
.workbench-editorial .archive-card .card-meta{flex-direction:column;align-items:flex-start;gap:6px}
.workbench-editorial .archive-card .card-title{font-size:27px;margin:0}
.workbench-editorial.is-filtered .chapter-heading{display:none}
.workbench-editorial.is-filtered .workbench-chapter{margin:0}
.workbench-editorial.is-filtered .chapter-stories{display:block}
.workbench-editorial.is-filtered .workbench-card{display:grid;grid-template-columns:140px 1fr;gap:28px;padding:24px 0!important;border-bottom:1px solid #d4d6d0}
.workbench-editorial.is-filtered .workbench-card-body{display:block;padding:0!important}
.workbench-editorial.is-filtered .workbench-card img{width:100%;height:120px;aspect-ratio:auto;object-fit:cover}
.workbench-editorial.is-filtered .workbench-card .card-title{font-size:30px}
.workbench-editorial.is-filtered .archive-card{grid-template-columns:1fr}
.workbench-editorial [hidden]{display:none!important}
/* Reading layouts: wide material, narrow prose. */
.article-refresh .post-body{max-width:1120px!important;margin-inline:auto}
.article-refresh .post-body>p,.article-refresh .post-body>h2,.article-refresh .post-body>ul,.article-refresh .post-body>ol,.article-refresh .post-body>.article-toc,.article-refresh .post-body>.archive-context,.article-refresh .post-body>.test-notebook{max-width:712px;margin-left:auto;margin-right:auto}
.article-refresh .post-body>figure{max-width:900px;margin:44px auto}
.article-refresh .post-body>figure img{width:100%;height:auto;max-height:640px;object-fit:contain;border-radius:3px}
.article-refresh .post-body figcaption{font-size:13px;line-height:1.65;color:#62675f;max-width: 70ch;margin-top:12px}
.article-refresh .post-body>.fan-comparison{max-width:100%;margin:32px 0 48px}
.article-refresh .archive-context{padding:18px 0;border-block:1px solid #cfd2ca;font:400 14px/1.7 'DM Sans',sans-serif;color:#62665e;margin-bottom:32px}
.article-refresh .test-notebook{padding:24px;border-left:2px solid #8b9388;background:#edeFE9}
.article-refresh .post-body .test-notebook p{font-size:15px;line-height:1.75}
.article-refresh .post-body .test-notebook h3{font:500 15px/1.5 'DM Sans',sans-serif;margin:22px 0 8px}
.article-refresh .post-body>h2{margin-top:56px}
/* Static instructional figures. */
.fit-illustration{margin:24px 0 28px;padding:20px 24px;background:#eeefea;border:1px solid #d8dbd3;border-radius:3px;break-inside:avoid}
.fit-illustration img{width:100%;max-width:540px;height:auto;display:block;margin:auto}
.fit-illustration figcaption{font:400 12px/1.7 'DM Sans',sans-serif;color:#62675e;margin:10px 0 0}
.help-answer .fit-illustration{max-width:620px}
.help-answer .fit-illustration img{max-height:250px}
/* Concise model reading hierarchy. */
#modelPreview #modelDescription{font-size:15px;line-height:1.7;margin:0 0 12px}
#modelPreview .model-essential{font-size:13px;font-weight:500;margin:0 0 18px;color:#3b4038}
#modelPreview .model-note-details{border-top:1px solid #d6d8d1;padding:14px 0;margin:0}
#modelPreview .model-note-details>summary{display:list-item;cursor:pointer;font:500 13px/1.6 'DM Sans',sans-serif}
#modelPreview .model-note-details p{font-size:13px;line-height:1.7;color:#5b6057;margin:12px 0}
#modelPreview .product-guidance{border-top:0;margin-top:0;padding-top:0}
#modelPreview .product-fit{margin-top:0}
#modelPreview .model-design-credit{margin-bottom:14px}
.page-creations .creation-card .model-spec{min-height:2.8em;display:flex;align-items:flex-end}
/* Comparison is only present within the existing fan comparison. */
.fan-visual-comparison{margin:24px 0 32px}
.fan-compare-intro{font-size:13px!important;color:#62675f}
.fan-compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.fan-compare-side{min-width:0;border-top:1px solid #c9cdc4;padding-top:20px}
.fan-compare-side h3{font:500 16px/1.4 'DM Sans',sans-serif;margin:16px 0}
.fan-compare-options{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 20px}
.fan-compare-options button{font:400 12px/1.5 'DM Sans',sans-serif;border:0;border-bottom:1px solid transparent;background:none;color:#64695f;padding:6px 0;cursor:pointer}
.fan-compare-options button[aria-pressed=true]{color:#20261c;border-color:#20261c;font-weight:500}
.fan-compare-options button:focus-visible{outline:2px solid #545c50;outline-offset:4px}
/* Phones: one sideways row of size tabs with full-height tap targets, as in the [creations] comparison (audit 2026-10-13). */
@media (max-width:760px){.fan-compare-options{flex-wrap:nowrap;gap:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.fan-compare-options::-webkit-scrollbar{display:none}.fan-compare-options button{flex:none;min-height:44px;min-width:24px;white-space:nowrap}.fan-compare-options button:focus-visible{outline-offset:-2px}}
.fan-compare-side img{display:block;width:100%;height:240px;object-fit:contain;background:#f7f8f4;border-radius:3px}
.fan-compare-side dl{display:grid;grid-template-columns:100px 1fr;font:13px/1.6 'DM Sans',sans-serif;margin:16px 0}
.fan-compare-side dt,.fan-compare-side dd{border-top:1px solid #d7dad1;padding:9px 0;margin:0}
.fan-compare-side dt{color:#62685c}
.fan-compare-side a{font-size:13px;text-underline-offset:4px}
/* Founder-led About. */
.page-about .founder{border-block:1px solid #d4d7cf}
.about-closing{padding:48px var(--page-gutter,5vw) 64px;border-top:1px solid #cfd3c9}
.about-closing h2{font:400 42px/1.1 'Cormorant Garamond',serif;margin:12px 0 24px}
.editorial-links{display:flex;flex-wrap:wrap;gap:18px 30px;font:400 14px/1.5 'DM Sans',sans-serif}
.editorial-links a{color:inherit;text-underline-offset:5px}
/* Contact form leads in DOM and visual order. */
.page-contact .page-hero{padding-top:128px!important;padding-bottom:38px!important;min-height:0}
.page-contact .page-hero h1{font-size:clamp(42px,5vw,64px);margin-bottom:16px}
.page-contact .contact-section{padding-top:48px!important}
.page-contact .contact-grid{grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);gap:clamp(32px,7vw,100px);align-items:start}
.inquiry-design-reference{margin:0 0 26px;padding:0 0 20px;border-bottom:1px solid #cbd0c5;font:14px/1.65 'DM Sans',sans-serif}
.inquiry-design-reference p{margin:6px 0}.inquiry-design-reference a{color:inherit;text-underline-offset:4px;font-size:13px}
/* A statement rather than a title page. */
.page-mission .mission-hero{padding-top:140px;padding-bottom:36px;min-height:0}
.page-mission .mission-hero h1{max-width:20ch;font-size:clamp(58px,7vw,100px)}
.page-mission .statement-section{padding-top:0!important;padding-bottom:64px!important}
.page-mission .statement-body{max-width:760px}
.page-mission .pillars-section{padding-top:32px!important;padding-bottom:64px!important}
.page-mission .pillar{background:none;border:0;border-top:1px solid #555850;border-radius:0;box-shadow:none;padding:26px 0}
.page-mission .pillar::before,.page-mission .pillar::after{display:none}
.page-mission .pillars-grid{background:none;gap:40px}
.page-mission .cta-section{padding-top:40px;padding-bottom:48px}
/* Short recovery and readable privacy. */
.recovery-simple{max-width:1000px;margin:auto;padding:160px 32px 90px;min-height:65vh;color:#343830}
.recovery-simple h1{font:400 clamp(48px,7vw,80px)/1.05 'Cormorant Garamond',serif;margin:20px 0 24px}
.recovery-simple>p{max-width: 50ch;font:16px/1.7 'DM Sans',sans-serif}
.recovery-simple nav{display:flex;flex-wrap:wrap;gap:20px 40px;margin:36px 0;border-block:1px solid #d0d4c9;padding:24px 0}
.recovery-simple a{color:inherit;text-underline-offset:5px}
.recovery-simple .recovery-contact{font-size:14px}
.page-privacy{background:#f4f4f0;color:#343830;font-family:'DM Sans',sans-serif}
.privacy-reading{max-width:776px;margin:auto;padding:56px 32px 80px}
.privacy-wordmark{color:inherit;text-decoration:none;font-size:16px;letter-spacing:.18em}
.privacy-wordmark sup{font-size:8px}
.privacy-reading h1{font:400 clamp(40px,6vw,60px)/1.05 'Cormorant Garamond',serif;margin:48px 0 24px}
.privacy-reading h2{font:400 30px/1.2 'Cormorant Garamond',serif;margin:0 0 18px}
.privacy-reading p{font-size:16px;line-height:1.85;margin:0 0 22px}
.privacy-reading .panel{border:0;border-top:1px solid #cdd2c5;border-radius:0;background:none;box-shadow:none;padding:32px 0 10px;margin-top:32px}
.privacy-reading a{color:inherit;text-underline-offset:4px}
.privacy-reading .muted{font-size:13px;color:#62675e}
.metric-context{display:block;font:400 11px/1.5 'DM Sans',sans-serif;margin-top:5px;color:inherit;opacity:.8}
.service-period-inline{font:400 12px/1.7 'DM Sans',sans-serif;color:#c5c8c1;max-width:36ch}
.page-home .service-feature{margin-top:40px;padding-top:40px}
@media(max-width:760px){
 .chapter-stories{grid-template-columns:1fr;gap:32px}
 .workbench-editorial .chapter-featured .workbench-card{grid-template-columns:1fr;gap:0}
 .workbench-editorial .chapter-featured img{max-height:320px;aspect-ratio:3/2}
 .workbench-editorial .chapter-guides .workbench-card{grid-template-columns:90px 1fr;gap:18px}
 .workbench-editorial .chapter-guides img{height:110px}
 .workbench-editorial .chapter-guides .card-title{font-size:27px}
 .workbench-editorial .archive-card .workbench-card-body{grid-template-columns:1fr;gap:8px}
 .workbench-editorial .archive-card .card-meta{flex-direction:row}
 .workbench-editorial.is-filtered .workbench-card{grid-template-columns:80px 1fr;gap:16px}
 .workbench-editorial.is-filtered .workbench-card img{height:90px}
 .workbench-editorial.is-filtered .workbench-card .card-title{font-size:26px}
 .workbench-editorial.is-filtered .archive-card{grid-template-columns:1fr}
 .fan-compare-pair{gap:16px}.fan-compare-side img{height:150px}.fan-compare-side dl{display:block}.fan-compare-side dd{border-top:0;padding-top:0}.fan-compare-side dt{padding-bottom:2px}.fan-compare-options{gap:2px 10px}.fan-compare-side h3{font-size:14px}
 .article-refresh .post-body>figure{margin-block:30px}
 .fit-illustration{padding:14px 8px}.article-refresh .test-notebook{padding:18px}
 .page-contact .contact-grid{grid-template-columns:1fr}.page-contact .page-hero{padding-top:114px!important}
 .page-mission .mission-hero{padding-top:120px}.page-mission .pillars-grid{grid-template-columns:1fr;gap:16px}
 .recovery-simple{padding:130px 24px 64px}.recovery-simple nav{gap:20px 26px}
 .privacy-reading{padding:36px 24px 60px}
}
@media print{.fit-illustration{background:none;max-width:420px;padding:10pt;margin:12pt 0}.fit-illustration img{max-height:150pt}.fan-compare-options{display:none}.article-refresh .post-body{max-width:100%!important}}
.article-refresh .tour-chapter{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;border-top:1px solid #cdd0c8;padding:36px 0;margin:40px 0}
.article-refresh .tour-chapter h2{margin-top:0}.article-refresh .tour-chapter figure{margin:0}.article-refresh .tour-chapter img{width:100%;height:auto;border-radius:3px}
.article-refresh .tour-text{display:block;max-width:712px;margin-inline:auto}
@media(max-width:760px){.article-refresh .tour-chapter{grid-template-columns:1fr;gap:20px}}
/* Keep expanded preview copy inside its allocated grid row, so overflow can scroll. */
#modelPreview .model-details{align-self:stretch;overscroll-behavior-y:contain}
@media(min-width:761px){#modelPreview .model-details{height:100%;max-height:100%;box-sizing:border-box}}
/* /assets/creations/collection-bento-v1.css */
/* Bento-inspired collection: varied card sizes in one even rhythm. Existing card surface, type and halo stay as they are. */
.page-creations .product-group:has(> .is-bento) { container-type: inline-size; }
/* One rhythm from the group's width: a row is a square poster plus a fixed name band. */
.page-creations .creations-grid.is-bento {
  --gap: 20px;
  --band: 128px;
  --col: calc((100cqw - 3 * var(--gap)) / 4);
  --row: calc(var(--col) + var(--band));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--row);
  grid-auto-flow: dense;
  gap: var(--gap);
  align-items: stretch;
}
.page-creations .is-bento > .model-card { overflow: visible; }
.page-creations .is-bento > .model-card .creation-body { overflow: hidden; }
.page-creations .is-bento > .model-card { display: flex; flex-direction: column; min-width: 0; }
.page-creations .is-bento > .model-card .model-image-open { display: block; width: 100%; padding: 0; }
.page-creations .is-bento > .model-card .creation-body { flex: 1 1 auto; }
.page-creations .is-bento .model-poster img,
.page-creations .is-bento .model-hover-frame { object-fit: cover; }

/* Square cards: name and spec only, so every row keeps one height. The preview carries the full detail. */
.page-creations .is-bento > .model-card:not(.bento-xl):not(.bento-wide):not(.bento-tall) .creation-desc { display: none; }
.page-creations .is-bento > .model-card .creation-body { padding: 18px 20px 22px !important; }

/* Feature card: two columns by two rows. Square poster, editorial body beneath. */
.page-creations .is-bento > .bento-xl { grid-column: span 2; grid-row: span 2; }
.page-creations .is-bento > .bento-xl .creation-body { display: flex; flex-direction: column; justify-content: center; padding: 28px 34px 32px !important; }
.page-creations .is-bento > .bento-xl .creation-title { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.035em; }
.page-creations .is-bento > .bento-xl .creation-desc { font-size: 15px; max-width: 46ch; }

/* Tall card: one column by two rows, for tall products. The poster fills the height; the product is cropped in, not shrunk. */
.page-creations .is-bento > .bento-tall { grid-row: span 2; }
.page-creations .is-bento > .bento-tall .model-image-open { flex: 1 1 auto; display: flex; }
.page-creations .is-bento > .bento-tall .model-poster { flex: 1 1 auto; display: flex; width: 100%; min-width: 0; }
.page-creations .is-bento > .bento-tall .model-poster img { width: 100%; min-width: 0; height: 100%; aspect-ratio: auto; }
.page-creations .is-bento > .bento-tall .creation-body { flex: none; }

/* Wide card: two columns. A square poster as tall as the row, with the description beside it. */
.page-creations .is-bento > .bento-wide { grid-column: span 2; display: grid; grid-template-columns: calc(var(--col) + 40px) minmax(0, 1fr); }
.page-creations .is-bento > .bento-wide .model-image-open { height: 100%; border-radius: 14px 0 0 14px !important; }
.page-creations .is-bento > .bento-wide .model-poster { height: 100%; border-bottom: 0; display: flex; align-items: center; background: #f2f2f0; }
/* The square render sits centred; its own backdrop fades into the card at the top and bottom. */
.page-creations .is-bento > .bento-wide .model-poster img,
.page-creations .is-bento > .bento-wide .model-hover-frame {
  width: 100%; height: auto; aspect-ratio: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
.page-creations .is-bento > .bento-wide .model-hover-frame { top: 50%; bottom: auto; transform: translateY(-50%); }
.page-creations .is-bento > .bento-wide .creation-body { border-radius: 0 14px 14px 0 !important; display: flex; flex-direction: column; justify-content: center; padding: 24px 28px !important; }

/* A quiet "New" mark for the newest design. */
.bento-badge {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 10px;
  border: 1px solid #bfc4c9;
  border-radius: 999px;
  font: 500 11px/1.2 "DM Sans", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #3d4246;
  background: #fff;
}

/* Documented owner test results, set like a bento figure tile. */
.bento-note {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 32px 36px;
  border-radius: 14px;
  background: radial-gradient(120% 140% at 0% 0%, #34373a 0%, #1d1f21 60%, #161718 100%);
  color: #ecedea;
}
.bento-note-kicker { margin: 0; font: 500 11px/1.4 "DM Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #a9afb6; }
.bento-note-figure {
  margin: 0;
  font: 300 clamp(56px, 6vw, 88px)/1 "DM Sans", sans-serif;
  letter-spacing: -.05em;
  color: #fbfbf8;
  text-shadow: 0 0 22px rgba(205, 222, 240, .55), 0 0 4px rgba(255, 255, 255, .5);
}
.bento-note-text { margin: 0; max-width: 44ch; font: 400 14px/1.6 "DM Sans", sans-serif; color: #c4c8cc; }
.bento-note-link { align-self: flex-start; margin-top: 6px; font: 500 13px/1.4 "DM Sans", sans-serif; color: #f3f3ed; text-underline-offset: 4px; }

/* Tablets: two columns keep the same spans. From 900 px the desktop rows apply (owner 2026-10-11: the two-column
   bento made the iPad landscape page the longest of all widths). */
@media (max-width: 899px) {
  .page-creations .creations-grid.is-bento { --gap: 16px; --col: calc((100cqw - var(--gap)) / 2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: wide cards become full-width square posters with text beneath. */
@media (max-width: 760px) {
  .page-creations .creations-grid.is-bento { --gap: 12px; grid-auto-rows: auto; }
  .page-creations .is-bento > .bento-tall .model-poster { aspect-ratio: 1 / 1.75; flex: none; }
  .page-creations .is-bento > .bento-wide { display: flex; flex-direction: column; }
  .page-creations .is-bento > .bento-wide .model-image-open { height: auto; border-radius: 14px 14px 0 0 !important; }
  .page-creations .is-bento > .bento-wide .model-poster img,
  .page-creations .is-bento > .bento-wide .model-hover-frame { -webkit-mask-image: none; mask-image: none; }
  .page-creations .is-bento > .bento-wide .creation-body { border-radius: 0 0 14px 14px !important; padding: 20px 22px 24px !important; }
  .page-creations .is-bento > .model-card:not(.bento-xl):not(.bento-wide) .creation-body { padding: 14px 14px 16px !important; }
  .page-creations .is-bento > .model-card:not(.bento-xl):not(.bento-wide) .creation-title { font-size: 15px; }
  .page-creations .is-bento > .model-card:not(.bento-xl):not(.bento-wide) .creation-desc { display: none; }
  .page-creations .is-bento .model-spec { min-height: 0 !important; }
  .page-creations .is-bento > .bento-xl .creation-body { padding: 22px 22px 26px !important; }
  .bento-note { padding: 26px 24px; }
}

/* Icy results tile: glacier blue, frost grain, cold glowing figures and a slow sheen across the ice. */
.bento-note.bento-ice {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: 14px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(150, 214, 255, .30) 0%, rgba(150, 214, 255, 0) 55%),
    radial-gradient(70% 90% at 0% 100%, rgba(95, 170, 230, .22) 0%, rgba(95, 170, 230, 0) 60%),
    linear-gradient(155deg, #0c1a2a 0%, #13314c 48%, #1d4f73 100%);
  box-shadow: inset 0 1px 0 rgba(220, 242, 255, .35), inset 0 0 0 1px rgba(170, 220, 255, .16), 0 18px 40px -18px rgba(20, 70, 120, .55);
  color: #e6f4ff;
}
.bento-note.bento-ice::before {
  /* Frost grain */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .82 0 0 0 0 .93 0 0 0 0 1 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.bento-note.bento-ice::after {
  /* Light catching the ice */
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: -1;
  background: linear-gradient(115deg, transparent 42%, rgba(225, 245, 255, .16) 49%, rgba(255, 255, 255, .26) 50%, rgba(225, 245, 255, .16) 51%, transparent 58%);
  animation: ice-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ice-sheen { 0%, 55% { transform: translateX(-38%); } 100% { transform: translateX(38%); } }
.bento-ice .bento-note-kicker { color: #9fd2f5; }
.bento-ice .ice-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 26px; align-items: end; }
.bento-ice .ice-side { display: grid; gap: 14px; padding-left: 22px; border-left: 1px solid rgba(170, 220, 255, .22); }
.bento-ice .bento-note-figure,
.bento-ice .ice-figure {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #e8f7ff 40%, #9bd6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(120, 200, 255, .55)) drop-shadow(0 0 2px rgba(255, 255, 255, .6));
}
.bento-ice .bento-note-figure { font-size: clamp(60px, 6.4vw, 96px); }
.bento-ice .ice-figure { font-size: clamp(34px, 3.2vw, 46px); }
.bento-ice .ice-label { margin: 6px 0 0; font: 400 13px/1.5 "DM Sans", sans-serif; color: #c9e6fa; }
.bento-ice .ice-label strong { font-weight: 500; color: #f2faff; }
.bento-ice .ice-label span { display: block; color: #9cc7e6; font-size: 12px; }
.bento-ice .bento-note-text { color: #b9d9ef; font-size: 13px; }
.bento-ice .bento-note-link { color: #eaf7ff; }
.bento-result { display: block; margin-top: 10px; font-weight: 500; color: #23506f; }
@media (max-width: 0px) { .bento-note.bento-ice::after { animation: none; transform: translateX(-38%); } }
@media (max-width: 760px) {
  .bento-ice .ice-grid { grid-template-columns: 1fr; }
  .bento-ice .ice-side { grid-template-columns: 1fr 1fr; padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid rgba(170, 220, 255, .22); }
}

/* EliteDesk: CPU peak and chipset as figures of their own under the drive result (owner 2026-10-04). */
.bento-ice .ice-pair { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 14px 0 4px; }
.bento-ice .ice-pair .ice-figure { font-size: clamp(30px, 2.8vw, 40px); }
.bento-ice .ice-pair .ice-label { margin-top: 4px; }

/* Frozen into the page (owner 2026-10-04): no edge at all. The ice dissolves into the page on every side (a feathered
   mask, intersected horizontally and vertically; Safari takes the -webkit- composite), so it reads as a patch of the
   page that froze over, not a card placed on it. Colours, grain, sheen and copy are unchanged; padding grows so the
   text stays clear of the thaw. */
.bento-note.bento-ice {
  --thaw: 34px;
  --spill: 44px;
  border-radius: 0;
  box-shadow: none;
  margin: calc(var(--spill) * -1);
  padding: calc(32px + var(--spill)) calc(36px + var(--spill));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--thaw), #000 calc(100% - var(--thaw)), transparent 100%), linear-gradient(180deg, transparent 0, #000 var(--thaw), #000 calc(100% - var(--thaw)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--thaw), #000 calc(100% - var(--thaw)), transparent 100%), linear-gradient(180deg, transparent 0, #000 var(--thaw), #000 calc(100% - var(--thaw)), transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 760px) { .bento-note.bento-ice { --thaw: 24px; } }
/* The ice spills a little into the gutters, so the fade sits outside the text and the grid keeps its cell. */

/* ice-tile-v1.js draws the real frost edge (mask) and crystal highlights (.ice-frost) at the tile's size. */
/* 2 px over every edge (clipped by the tile) so the canvas's resampled outermost pixels never show the dark ice
   behind them as a hairline along the tile's edge (owner 2026-10-07). */
.bento-note.bento-ice .ice-frost { position: absolute; inset: -2px; z-index: 0; width: calc(100% + 4px); height: calc(100% + 4px); pointer-events: none; }
/* Once frozen (ice-tile-v1.js), the canvas paints the frost and the page around the ice, so no mask is needed;
   the text sits above it. */
.bento-note.bento-ice.is-frozen { -webkit-mask-image: none; mask-image: none; }
.bento-note.bento-ice > :not(.ice-frost) { position: relative; z-index: 1; }
/* The frost creeps under the neighbouring cards rather than over them. */
.creations-grid:has(.bento-ice) > .creation-card { position: relative; z-index: 1; }
.creations-grid > .bento-note.bento-ice { z-index: 0; }
@media (max-width: 760px) { .bento-note.bento-ice { --spill: 30px; } }

/* Square cards share one name band per row (2026-10-09): the poster takes what the band leaves, so a one-line title
   no longer gets a taller poster than its two-line neighbour and badges, specs and names line up across each row. */
@media (min-width: 761px) {
  .page-creations .is-bento > .model-card:not(.bento-xl):not(.bento-wide):not(.bento-tall) .model-image-open { flex: 1 1 0; min-height: 0; overflow: hidden; }
  .page-creations .is-bento > .model-card:not(.bento-xl):not(.bento-wide):not(.bento-tall) .creation-body { flex: none; min-height: 134px; }
}
/* Band = the tallest square body at each width (two-line titles; measured 160 px at 1061, 168 at 1280, 170 from 1440). */
@media (min-width: 761px) and (max-width: 800px) {
  .page-creations .is-bento > .model-card:not(.bento-xl):not(.bento-wide):not(.bento-tall) .creation-body { min-height: 158px; }
}
@media (min-width: 900px) {
  .page-creations .is-bento > .model-card:not(.bento-xl):not(.bento-wide):not(.bento-tall) .creation-body { min-height: clamp(160px, 5.5vw + 102px, 170px); }
}
/* 900-1399 px: the desktop rows are narrower here, so wide cards keep badge, spec and name (like the square cards;
   the preview carries the description; the longer made-to-order texts overflowed the card from 1061 px before).
   900-1060 px (iPad landscape) also sets the tested and quality-control tiles a size down. */
@media (min-width: 900px) and (max-width: 1399px) {
  .page-creations .is-bento > .bento-wide .creation-desc,
  .page-creations .is-bento > .bento-wide .creation-fit-note { display: none; }
}
@media (min-width: 900px) and (max-width: 1060px) {
  .page-creations .creations-grid.is-bento { --band: 176px; }
  .page-creations .is-bento > .bento-wide .creation-body { padding: 20px 22px !important; }
  .page-creations .is-bento > .bento-qc { padding: 20px 22px; column-gap: 16px; }
  .page-creations .is-bento > .bento-qc .qc-copy { gap: 6px; }
  .page-creations .is-bento > .bento-qc .qc-seal { width: 84px; }
  .bento-ice .bento-note-figure { font-size: 50px; }
  .bento-ice .ice-figure, .bento-ice .ice-pair .ice-figure { font-size: 28px; }
  .bento-ice .ice-label { font-size: 12px; margin-top: 2px; }
  .bento-ice .bento-note-text { font-size: 12.5px; line-height: 1.45; }
}
/* /assets/css/site-refresh-v1.css */
/* 2026-10 site-wide refresh: same-origin page transitions and the site search dialog. */

/* Cross-document view transitions (Chromium/Safari 18.2+; other browsers navigate normally). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media(max-width: 0px){@view-transition{navigation:none}}

/* Site search (⌘K / Ctrl+K / "/"). */
.site-search-open{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:6px;padding:0;border:1px solid transparent;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:border-color .2s,background-color .2s}
.site-search-open:hover{border-color:currentColor}
#mainNav .site-search-open{color:#f5f5f5}
#mainNav .site-search-open:hover{border-color:#ffffff66;background:#ffffff12}
.site-search-open:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site-search-open svg{width:17px;height:17px}

/* Desktop header: logo left, links centred, search bar and CTA grouped on the right. The links sit centred in the
   space between logo and search, and exactly on the page centre once there is room (>=1400px). The bar matches
   the CTA's height and corner radius; below 1101px it is a square icon button. */
@media(min-width:769px){
 #mainNav .nav-links{margin:0 auto}
 #mainNav .site-search-open{width:40px;height:40px;margin:0 12px 0 auto;border:1px solid #ffffff2e;border-radius:8px;background:#ffffff0d;color:#f5f5f5c2;transition:border-color .2s,background-color .2s,color .2s}
 #mainNav .site-search-open:hover{border-color:#ffffff66;background:#ffffff17;color:#f5f5f5}
 #mainNav .site-search-open svg{width:16px;height:16px;flex:none}
}
@media(min-width:769px) and (max-width:900px){#mainNav .nav-links{gap:1rem}}
@media(min-width:1101px){
 #mainNav .site-search-open{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;width:180px;padding:0 14px;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;text-align:left}
 #mainNav .site-search-open::after{content:"Search"}
}
@media(min-width:1400px){
 #mainNav .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
 #mainNav .site-search-open{width:220px}
}
.site-search{width:min(640px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 96px));margin:72px auto auto;padding:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 30px 80px #0000004d;overflow:hidden}
.site-search::backdrop{background:#0c0c0c8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.site-search form{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e3e0da}
.site-search form svg{flex:none;width:18px;height:18px;color:#6b6b6b}
.site-search input{flex:1;min-width:0;border:0;background:none;color:#151515;font:400 17px 'DM Sans',sans-serif;outline:none}
.site-search input::placeholder{color:#6b6b6b}
.site-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.site-search kbd{font:500 11px 'DM Sans',sans-serif;padding:3px 6px;border:1px solid #d7d4ce;border-radius:5px;color:#6b6b6b;background:#fff}
.site-search-results{list-style:none;margin:0;padding:8px;max-height:min(520px,calc(100vh - 170px));overflow:auto}
.site-search-results li{margin:0}
.site-search-results a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 12px;border-radius:9px;color:inherit;text-decoration:none}
.site-search-results a[aria-selected="true"],.site-search-results a:hover{background:#ecebe6}
.site-search-type{grid-row:span 2;align-self:center;min-width:76px;font:500 10px 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6b675f}
.site-search-title{font:500 15px/1.3 'DM Sans',sans-serif}
.site-search-text{font:400 13px/1.4 'DM Sans',sans-serif;color:#5f5f5f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-empty{padding:22px 16px;font:400 14px 'DM Sans',sans-serif;color:#5f5f5f}
@media(max-width:760px){.site-search{margin-top:16px;max-height:calc(100vh - 32px)}.site-search-type{min-width:0;grid-row:auto}.site-search-results a{grid-template-columns:1fr}.site-search kbd{display:none}}
/* Site search v2 (site-search-v2.js, owner-approved 2026-10-06): start view, grouped results with headers,
   design thumbnails (their [creations] card image), a Cancel button on phones, and the inline variant (404 page). */
dialog.site-search-v2[open]{display:flex;flex-direction:column}
.site-search-v2 form{flex:none}
.site-search-v2 .site-search-results{flex:1 1 auto;min-height:0;max-height:none;padding:6px 8px 12px}
.site-search-v2 .site-search-group{margin:14px 12px 6px;font:500 10.5px/1.3 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b675f}
.site-search-v2 .site-search-group:first-child{margin-top:8px}
.site-search-v2 .site-search-results a.site-search-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:8px 10px;border-radius:11px;color:inherit;text-decoration:none}
.site-search-v2 .site-search-results a.site-search-item[aria-selected="true"],.site-search-v2 .site-search-results a.site-search-item:hover{background:#ecebe6}
.site-search-thumb{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#f6f6f5;box-shadow:inset 0 0 0 1px #15151512;color:#6b675f;overflow:hidden}
.site-search-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.site-search-thumb.is-video{width:80px;background:#151515}
.site-search-thumb svg{width:22px;height:22px}
.site-search-body{display:grid;gap:2px;min-width:0}
.site-search-v2 .site-search-title{font:500 15px/1.3 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-v2 .site-search-text{font:400 13px/1.4 'DM Sans',sans-serif;color:#66625b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-tag{display:inline-block;margin-right:8px;padding:2px 7px;border:1px solid #15151533;border-radius:999px;font:500 9.5px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;vertical-align:2px}
.site-search-v2 .site-search-results a.site-search-more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:12px 12px;font:500 14px/1.3 'DM Sans',sans-serif;color:#151515}
.site-search-more svg{width:18px;height:18px;flex:none}
.site-search-v2 .site-search-results .site-search-empty a{display:inline;padding:0;border-radius:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:3px}
.site-search-cancel{display:none;flex:none;padding:8px 2px 8px 8px;border:0;background:none;color:#151515;font:500 15px 'DM Sans',sans-serif;cursor:pointer}
.site-search-cancel:focus-visible{outline:2px solid #151515;outline-offset:2px;border-radius:6px}
@media(max-width:760px){
 .site-search-v2{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 .site-search-v2 form{padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
 .site-search-v2 input{font-size:16px}
 .site-search-v2 kbd{display:none}
 .site-search-cancel{display:block}
 .site-search-v2 .site-search-results{padding:4px 6px calc(16px + env(safe-area-inset-bottom))}
 .site-search-v2 .site-search-results a.site-search-item{grid-template-columns:auto minmax(0,1fr);gap:12px}
}
.site-search-inline{display:block;width:100%;max-width:640px;margin:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 18px 48px #00000014;overflow:hidden;text-align:left}
.site-search-inline .site-search-results{max-height:420px;overflow:auto}
@media(max-width:760px){.site-search-inline{border-radius:12px}.site-search-inline .site-search-results{max-height:none}}

/* Footer edges follow the nav (owner 2026-10-06: the footer reached past the nav's edge on wide screens). */
body>footer{padding-left:var(--page-gutter,clamp(24px,5vw,80px));padding-right:var(--page-gutter,clamp(24px,5vw,80px))}

/* iOS 26 Safari tints the status bar and bottom bar from the page's root background (theme-color is ignored).
   The root is therefore the header/footer charcoal, and the light page surface moves onto <main>, which with the
   footer fills the whole page, so nothing else changes visually. Mission (already dark) and privacy (no header) keep theirs. */
body[data-surface="light"]{--page-surface:#f4f4f2}
body.page-product{--page-surface:#f4f2ee}
html:has(body[data-surface="light"]){background-color:#151515!important}
body[data-surface="light"]{background-color:#151515!important}
body[data-surface="light"]>#main-content{background-color:var(--page-surface)}

/* Phone/tablet header: logo, search and menu share one centre line; the menu lines end on the page gutter
   and search sits beside the menu (desktop layout is unchanged). */
@media(max-width:768px){
 #mainNav .site-search-open{margin-left:auto;margin-right:4px}
 body:not(.page-creations) #hamburgerBtn{justify-content:center;align-items:center;width:44px;height:44px;padding:0;margin-right:-11px}
}

/* Phone menu on the main site, matching the [creations] menu (owner 2026-10-05): a frosted panel that drops under
   the header, left-aligned DM Sans rows with dividers, a "Menu / Close" text toggle, and the last two links
   (Shop on Etsy, YouTube; Old tech above them since 2026-10-10) as quieter secondary links. [creations] keeps its own rules (88 px header). */
@media (max-width: 768px) {
 body:not(.page-creations) #hamburgerBtn { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 0; min-width: 64px; min-height: 44px; padding: 10px 0 10px 12px; color: #f2f2ec; font: 400 13px/1 'DM Sans', sans-serif; letter-spacing: .04em; }
 body:not(.page-creations) #hamburgerBtn::after { content: "Menu"; }
 body:not(.page-creations) #hamburgerBtn.open::after { content: "Close"; }
 body:not(.page-creations) #hamburgerBtn span { display: none; }
 body:not(.page-creations) #hamburgerBtn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
 body:not(.page-creations) #mobileMenu {
  display: flex; flex-direction: column; position: fixed; inset: var(--nav-h, 80px) 0 auto; height: auto; max-height: calc(100dvh - var(--nav-h, 80px));
  padding: 18px 24px 26px; gap: 0; align-items: stretch; justify-content: flex-start; text-align: left;
  background: #20201ff5; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid #ffffff22; box-shadow: 0 18px 32px #0003;
  overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
 }
 body:not(.page-creations) #mobileMenu.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
 body:not(.page-creations) #mobileMenu a {
  display: flex; align-items: center; justify-content: flex-start; min-height: 54px; padding: 12px 0; margin: 0;
  font: 400 17px/1.4 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; color: #edede7;
  border-bottom: 1px solid #ffffff14; text-decoration: none; opacity: 1; transform: none;
 }
 body:not(.page-creations) #mobileMenu a:nth-last-child(2) { margin-top: 14px; }
 body:not(.page-creations) #mobileMenu a:nth-last-child(-n+2) { font-size: 14px; color: #bdbdb7; border: 0; min-height: 44px; }
 body:not(.page-creations) #mobileMenu a:focus-visible { outline: 1px solid #edede7; outline-offset: 3px; }
}
@media (max-width: 0px) { body:not(.page-creations) #mobileMenu { transition: none; } }

/* Wayfinding (site-wayfinding-v1.js, owner-approved 2026-10-06). */
/* 1. You are here (owner 2026-10-07: no dot, the page name glows): the current section's header link and phone-menu
   row are lit white with a soft silver-white glow, the [creations] wordmark's light language kept quiet; no underline
   (Contact: the CTA is lit instead). */
#mainNav .nav-links a[aria-current="page"],
html body.page-creations #mainNav .nav-links a[href][aria-current="page"]{color:#fff!important;text-decoration:none!important;text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866,0 0 28px #dce5f533}
#mainNav .nav-cta[aria-current="page"]{text-decoration:none;background:#ffffff26!important;border-color:#f2f2f0!important;color:#fff;text-shadow:0 0 7px #ffffff8c,0 0 16px #e6ecf855}
#mobileMenu a[aria-current="page"]{color:#fff!important;font-weight:500;text-shadow:0 0 1px #ffffffb3,0 0 9px #ffffff99,0 0 20px #e6ecf880,0 0 36px #dce5f540}
#mobileMenu a[aria-current="page"]::after{content:none}
/* 2. Phone menu backdrop: dims the page under the open menu; a tap on it closes the menu. */
.menu-scrim{display:none}
@media(max-width:768px){
 .menu-scrim{display:block;position:fixed;inset:0;z-index:198;background:#0c0c0c73;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s;-webkit-tap-highlight-color:transparent}
 .menu-scrim.is-shown{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
}
/* 3. Back to top: one rounded, frosted button in the right page gutter; colour-only hover, no lift. The script
   sets --to-top-lift to rise above the footer or the product pages' action bar. */
.to-top{position:fixed;z-index:190;right:max(12px,calc(env(safe-area-inset-right) + 12px),calc((var(--to-top-gutter,var(--page-gutter,clamp(24px,5vw,80px))) - 44px) / 2));bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0;border:1px solid #15151524;border-radius:50%;background:#faf9f6c9;-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);color:#151515;box-shadow:0 8px 24px #00000026,0 1px 0 #ffffffb3 inset;cursor:pointer;transform:translateY(calc(-1 * var(--to-top-lift,0px)));opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s,background-color .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.to-top.is-shown{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s,background-color .2s,border-color .2s,box-shadow .2s}
.to-top:hover{background:#fff;border-color:#15151566;box-shadow:0 8px 24px #0000002e,0 0 0 3px #1515150f}
.to-top:focus-visible{outline:2px solid #151515;outline-offset:2px;box-shadow:0 0 0 5px #faf9f6}
.to-top svg{width:18px;height:18px}
@media print{.to-top,.menu-scrim{display:none}}

/* Footer (owner-approved 2026-10-06): four columns (Explore, Designs, Connect, Good to know) beside the brand on
   wide screens, a 2 x 2 grid on phones. "Privacy" sits on the copyright line (owner 2026-10-11; it was a lone
   "Analytics privacy" row under a filler line). */
body>footer .footer-nav{gap:clamp(28px,3.4vw,52px)}
body>footer .footer-privacy{display:inline-flex;align-items:center;min-height:32px;color:#cecece;font-size:13px;text-decoration:none;transition:color .2s}
body>footer .footer-privacy::before{content:"\00b7";margin:0 .7em 0 .4em;color:#8a8a8a}
body>footer .footer-privacy:hover{color:#fff}
@media(max-width:760px){
 body>footer .footer-top>div:first-child{flex:0 0 auto}
 body>footer .footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;width:100%}
}

/* Chrome system (2026-10-09 audit): one header, menu and footer across the main site, Workbench, Help and [creations].
   1. Header labels share one centre line: nav links are 40 px flex boxes like the search bar and the CTA (they sat
      1.5-2 px low because the inline padding box hung off the text baseline). */
@media(min-width:769px){
 #mainNav .nav-links li{display:flex}
 #mainNav .nav-links a{display:inline-flex;align-items:center;min-height:40px;padding-block:0}
}
/* 2. Phones: [creations] and product pages end "Menu" on the page gutter like the main site (it sat 11 px inside). */
@media(max-width:768px){
 html body.page-creations #hamburgerBtn{margin-right:-11px}
}
/* 3. Footer: the same column headings and brand line everywhere (Workbench headings were light, the homepage brand
      line was larger and narrower than every other page's). */
html body>footer .footer-col .footer-heading{font-weight:700}
html body>footer .footer-top>div>p.footer-shop-copy{max-width:40ch;font-size:.85rem;line-height:1.8}
/* 4. One focus ring weight: the phone menu toggle, menu rows and the footer privacy link drew 1 px rings while every other
      header, footer and search control draws 2 px. */
html body #hamburgerBtn:focus-visible,
html body #mobileMenu a:focus-visible,
html body>footer .footer-privacy:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Six header links since "Partnerships" (2026-10-10): at 769-900px the links tighten and the search button keeps its
   square, so the logo, links, search and CTA never touch. */
@media(min-width:769px) and (max-width:900px){
 #mainNav .nav-links{gap:.8rem;margin:0 10px 0 22px}
 #mainNav .nav-links a{font-size:11.5px;letter-spacing:.05em}
 #mainNav .site-search-open{flex:none;margin-left:8px}
}
/* Same reason at 1101-1279px (the search becomes a bar) and 1400-1599px (links centred on the page; the [creations]
   labels are longer): a little less space between links so they never run into the search bar. */
@media(min-width:1101px) and (max-width:1279px){#mainNav .nav-links{gap:1.25rem}#mainNav .site-search-open{width:150px}}
@media(min-width:1400px) and (max-width:1599px){#mainNav .nav-links{gap:1.5rem}body.page-creations #mainNav .nav-links{gap:1.1rem}}
/* Old tech in the desktop header (owner 2026-10-10: "without adding too much clutter"): not a seventh centred link but a
   quiet utility link (box icon + label, no frame) on the right, beside the search bar, so the six section links keep
   their spacing. Shown from 1280px where the right group has room; the phone menu lists it after Partnerships. */
#mainNav .nav-util{display:none}
@media(min-width:1280px){
 #mainNav .nav-util{display:inline-flex;align-items:center;gap:7px;height:40px;margin:0 14px 0 auto;padding:0 2px;flex:none;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;color:#f5f5f5a8;text-decoration:none;white-space:nowrap;transition:color .2s}
 #mainNav .nav-util svg{width:16px;height:16px;flex:none}
 #mainNav .nav-util:hover,#mainNav .nav-util[aria-current="page"]{color:#fff}
 #mainNav .nav-util[aria-current="page"]{text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866}
 #mainNav .nav-util:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
 #mainNav .nav-util+.site-search-open{margin-left:0}
}
@media(min-width:1280px) and (max-width:1399px){#mainNav .nav-util+.site-search-open{width:150px}}
/* With the extra link the right group is wider, so the links stay centred between logo and search (as below 1400px)
   until 1900px, where page-centred links clear it again (the homepage's wider gutter included). */
@media(min-width:1400px) and (max-width:1899px){#mainNav:has(.nav-util) .nav-links{position:static;transform:none;margin:0 auto}}

/* Phone footer (owner 2026-10-11): the Designs column is dropped on phones; [creations] in Explore leads there. */
@media (max-width: 760px) { body > footer .footer-col:has(a[href$="#cooling"]) { display: none; } }
/* ...so Good to know spans the row and lists its four links in two columns under Explore and Connect (owner 2026-10-11). */
@media (max-width: 760px) {
 body > footer .footer-nav > .footer-col:last-child { grid-column: 1 / -1; }
 body > footer .footer-nav > .footer-col:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 24px; }
}


/* Link buttons (owner 2026-10-11: "every one"): every standalone link and link button is a rounded button with a
   filled circle in the text colour; the arrow is cut out of the circle, so it shows the button's own colour and
   contrasts on dark and light. Arrow: up-right to another page, toward the target on the same page, right for a
   pop-up preview. Plain text links (first list) get the whole button; existing pill buttons (second list) keep their
   own fill and get the radius and the circle. Add new standalone links to one of the two lists. */
html body.page-home .text-link,html body .model-contact,html body .product-secondary>a,html body.page-home .home-build-story .feature-actions a:not(.build-watch),html body .review-design-link,html body .help-back,html body .journey-link,html body .editorial-links a,html body .founder-links a,html body .fan-compare-side>a:not(.fan-compare-image-link),html body.page-creations p>a[href$="#test-notes"]:only-child,html body .pw-all,html body .rail-all,html body .wb-rail-all,html body .product-guide-link a,html body .bento-note-link,html body .custom-note-link,html body .wwu-review-link a,html body .wwu-kit-link,html body.page-work .wwu-go,html body.page-work .wwu-direct ul a,html body.page-work .wwu-review figcaption a,html body.page-work .wwu-proof-link a,html body.page-work .wwu-case-rel,html body .product-case-more,html body .pr-all,html body .workbench-rss-link,html body .privacy-end p>a,html body .channel-link,html body .contact-setup-note a,html body .contact-detail-value a,html body .post-back,html body .post-3d-link,html body .help-toc-back,html body .help-toc-help,html body .help-toc-close,html body .help-shop{display:inline-block!important;position:relative!important;width:fit-content!important;max-width:100%;align-self:flex-start;padding:12px 54px 12px 18px!important;min-height:46px;box-sizing:border-box;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;border-radius:12px!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;background-image:none!important;font-family:'DM Sans',sans-serif;font-size:14px!important;font-weight:500!important;line-height:1.45!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;white-space:normal!important;opacity:1!important;transition:border-color .2s,background-color .2s}
html body.page-home .home-build-story .feature-actions a.build-watch:hover,html body.page-home .text-link:hover,html body .model-contact:hover,html body .product-secondary>a:hover,html body.page-home .home-build-story .feature-actions a:not(.build-watch):hover,html body .review-design-link:hover,html body .help-back:hover,html body .journey-link:hover,html body .editorial-links a:hover,html body .founder-links a:hover,html body .fan-compare-side>a:not(.fan-compare-image-link):hover,html body.page-creations p>a[href$="#test-notes"]:only-child:hover,html body .pw-all:hover,html body .rail-all:hover,html body .wb-rail-all:hover,html body .product-guide-link a:hover,html body .bento-note-link:hover,html body .custom-note-link:hover,html body .wwu-review-link a:hover,html body .wwu-kit-link:hover,html body.page-work .wwu-go:hover,html body.page-work .wwu-direct ul a:hover,html body.page-work .wwu-review figcaption a:hover,html body.page-work .wwu-proof-link a:hover,html body.page-work .wwu-case-rel:hover,html body .product-case-more:hover,html body .pr-all:hover,html body .workbench-rss-link:hover,html body .privacy-end p>a:hover,html body .channel-link:hover,html body .contact-setup-note a:hover,html body .contact-detail-value a:hover,html body .post-back:hover,html body .post-3d-link:hover,html body .help-toc-back:hover,html body .help-toc-help:hover,html body .help-toc-close:hover,html body .help-shop:hover{border-color:color-mix(in srgb,currentColor 70%,transparent)!important;background-color:color-mix(in srgb,currentColor 11%,transparent)!important}
html body .home-oldtech-link,html body .model-page-cta,html body .studio-details-link,html body .home-forum-cta,html body a.ot-btn,html body a.wwu-btn,html body a.btn-primary,html body .product-buy,html body a.product-actionbar-btn,html body .review-etsy-button,html body .hero-shop-link,html body .model-shop,html body .rb-all,html body .wb-link,html body .help-contact>a,html body .post-cta>a,html body .help-end-link,html body .mto-cta a,html body .help-toc-page,html body .sv-start{position:relative!important;display:inline-flex!important;align-items:center;min-height:46px;box-sizing:border-box;padding-right:54px!important;border-radius:12px!important;text-decoration:none!important}
html body.page-home .text-link *,html body .model-contact *,html body .product-secondary>a *,html body.page-home .home-build-story .feature-actions a:not(.build-watch) *,html body .review-design-link *,html body .help-back *,html body .journey-link *,html body .editorial-links a *,html body .founder-links a *,html body .fan-compare-side>a:not(.fan-compare-image-link) *,html body.page-creations p>a[href$="#test-notes"]:only-child *,html body .pw-all *,html body .rail-all *,html body .wb-rail-all *,html body .product-guide-link a *,html body .bento-note-link *,html body .custom-note-link *,html body .wwu-review-link a *,html body .wwu-kit-link *,html body.page-work .wwu-go *,html body.page-work .wwu-direct ul a *,html body.page-work .wwu-review figcaption a *,html body.page-work .wwu-proof-link a *,html body.page-work .wwu-case-rel *,html body .product-case-more *,html body .pr-all *,html body .workbench-rss-link *,html body .privacy-end p>a *,html body .channel-link *,html body .contact-setup-note a *,html body .contact-detail-value a *,html body .post-back *,html body .post-3d-link *,html body .home-oldtech-link *,html body .model-page-cta *,html body .studio-details-link *,html body .home-forum-cta *,html body a.ot-btn *,html body a.wwu-btn *,html body a.btn-primary *,html body .product-buy *,html body a.product-actionbar-btn *,html body .review-etsy-button *,html body .hero-shop-link *,html body .model-shop *,html body .rb-all *,html body .wb-link *,html body .help-contact>a *,html body .post-cta>a *,html body .help-end-link *,html body .mto-cta a *,html body .help-toc-back *,html body .help-toc-help *,html body .help-toc-close *,html body .help-shop *,html body .help-toc-page *,html body .sv-start *{text-decoration:none!important}
html body.page-home .text-link svg,html body .model-contact svg,html body .product-secondary>a svg,html body.page-home .home-build-story .feature-actions a:not(.build-watch) svg,html body .review-design-link svg,html body .help-back svg,html body .journey-link svg,html body .editorial-links a svg,html body .founder-links a svg,html body .fan-compare-side>a:not(.fan-compare-image-link) svg,html body.page-creations p>a[href$="#test-notes"]:only-child svg,html body .pw-all svg,html body .rail-all svg,html body .wb-rail-all svg,html body .product-guide-link a svg,html body .bento-note-link svg,html body .custom-note-link svg,html body .wwu-review-link a svg,html body .wwu-kit-link svg,html body.page-work .wwu-go svg,html body.page-work .wwu-direct ul a svg,html body.page-work .wwu-review figcaption a svg,html body.page-work .wwu-proof-link a svg,html body.page-work .wwu-case-rel svg,html body .product-case-more svg,html body .pr-all svg,html body .workbench-rss-link svg,html body .privacy-end p>a svg,html body .channel-link svg,html body .contact-setup-note a svg,html body .contact-detail-value a svg,html body .post-back svg,html body .post-3d-link svg,html body .home-oldtech-link svg,html body .model-page-cta svg,html body .studio-details-link svg,html body .home-forum-cta svg,html body a.ot-btn svg,html body a.wwu-btn svg,html body a.btn-primary svg,html body .product-buy svg,html body a.product-actionbar-btn svg,html body .review-etsy-button svg,html body .hero-shop-link svg,html body .model-shop svg,html body .rb-all svg,html body .wb-link svg,html body .help-contact>a svg,html body .post-cta>a svg,html body .help-end-link svg,html body .mto-cta a svg,html body .help-toc-back svg,html body .help-toc-help svg,html body .help-toc-close svg,html body .help-shop svg,html body .help-toc-page svg,html body .sv-start svg{display:none!important}
html body.page-home .text-link::before,html body .model-contact::before,html body .product-secondary>a::before,html body.page-home .home-build-story .feature-actions a:not(.build-watch)::before,html body .review-design-link::before,html body .help-back::before,html body .journey-link::before,html body .editorial-links a::before,html body .founder-links a::before,html body .fan-compare-side>a:not(.fan-compare-image-link)::before,html body.page-creations p>a[href$="#test-notes"]:only-child::before,html body .pw-all::before,html body .rail-all::before,html body .wb-rail-all::before,html body .product-guide-link a::before,html body .bento-note-link::before,html body .custom-note-link::before,html body .wwu-review-link a::before,html body .wwu-kit-link::before,html body.page-work .wwu-go::before,html body.page-work .wwu-direct ul a::before,html body.page-work .wwu-review figcaption a::before,html body.page-work .wwu-proof-link a::before,html body.page-work .wwu-case-rel::before,html body .product-case-more::before,html body .pr-all::before,html body .workbench-rss-link::before,html body .privacy-end p>a::before,html body .channel-link::before,html body .contact-setup-note a::before,html body .contact-detail-value a::before,html body .post-back::before,html body .post-3d-link::before,html body .home-oldtech-link::before,html body .model-page-cta::before,html body .studio-details-link::before,html body .home-forum-cta::before,html body a.ot-btn::before,html body a.wwu-btn::before,html body a.btn-primary::before,html body .product-buy::before,html body a.product-actionbar-btn::before,html body .review-etsy-button::before,html body .hero-shop-link::before,html body .model-shop::before,html body .rb-all::before,html body .wb-link::before,html body .help-contact>a::before,html body .post-cta>a::before,html body .help-end-link::before,html body .mto-cta a::before,html body .help-toc-back::before,html body .help-toc-help::before,html body .help-toc-close::before,html body .help-shop::before,html body .help-toc-page::before,html body .sv-start::before{display:none!important}
html body.page-home .home-build-story .feature-actions a.build-watch::after,html body.page-home .text-link::after,html body .model-contact::after,html body .product-secondary>a::after,html body.page-home .home-build-story .feature-actions a:not(.build-watch)::after,html body .review-design-link::after,html body .help-back::after,html body .journey-link::after,html body .editorial-links a::after,html body .founder-links a::after,html body .fan-compare-side>a:not(.fan-compare-image-link)::after,html body.page-creations p>a[href$="#test-notes"]:only-child::after,html body .pw-all::after,html body .rail-all::after,html body .wb-rail-all::after,html body .product-guide-link a::after,html body .bento-note-link::after,html body .custom-note-link::after,html body .wwu-review-link a::after,html body .wwu-kit-link::after,html body.page-work .wwu-go::after,html body.page-work .wwu-direct ul a::after,html body.page-work .wwu-review figcaption a::after,html body.page-work .wwu-proof-link a::after,html body.page-work .wwu-case-rel::after,html body .product-case-more::after,html body .pr-all::after,html body .workbench-rss-link::after,html body .privacy-end p>a::after,html body .channel-link::after,html body .contact-setup-note a::after,html body .contact-detail-value a::after,html body .post-back::after,html body .post-3d-link::after,html body .home-oldtech-link::after,html body .model-page-cta::after,html body .studio-details-link::after,html body .home-forum-cta::after,html body a.ot-btn::after,html body a.wwu-btn::after,html body a.btn-primary::after,html body .product-buy::after,html body a.product-actionbar-btn::after,html body .review-etsy-button::after,html body .hero-shop-link::after,html body .model-shop::after,html body .rb-all::after,html body .wb-link::after,html body .help-contact>a::after,html body .post-cta>a::after,html body .help-end-link::after,html body .mto-cta a::after,html body .help-toc-back::after,html body .help-toc-help::after,html body .help-toc-close::after,html body .help-shop::after,html body .help-toc-page::after,html body .sv-start::after{content:""!important;display:block!important;position:absolute!important;inset:50% 7px auto auto!important;translate:0 -50%;width:32px!important;height:32px!important;margin:0!important;border:0!important;border-radius:50%;background:currentColor!important;box-shadow:none!important;opacity:1!important;transform:none!important;filter:none!important;animation:none!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html body.page-home .home-build-story .feature-actions a.build-watch:focus-visible,html body.page-home .text-link:focus-visible,html body .model-contact:focus-visible,html body .product-secondary>a:focus-visible,html body.page-home .home-build-story .feature-actions a:not(.build-watch):focus-visible,html body .review-design-link:focus-visible,html body .help-back:focus-visible,html body .journey-link:focus-visible,html body .editorial-links a:focus-visible,html body .founder-links a:focus-visible,html body .fan-compare-side>a:not(.fan-compare-image-link):focus-visible,html body.page-creations p>a[href$="#test-notes"]:only-child:focus-visible,html body .pw-all:focus-visible,html body .rail-all:focus-visible,html body .wb-rail-all:focus-visible,html body .product-guide-link a:focus-visible,html body .bento-note-link:focus-visible,html body .custom-note-link:focus-visible,html body .wwu-review-link a:focus-visible,html body .wwu-kit-link:focus-visible,html body.page-work .wwu-go:focus-visible,html body.page-work .wwu-direct ul a:focus-visible,html body.page-work .wwu-review figcaption a:focus-visible,html body.page-work .wwu-proof-link a:focus-visible,html body.page-work .wwu-case-rel:focus-visible,html body .product-case-more:focus-visible,html body .pr-all:focus-visible,html body .workbench-rss-link:focus-visible,html body .privacy-end p>a:focus-visible,html body .channel-link:focus-visible,html body .contact-setup-note a:focus-visible,html body .contact-detail-value a:focus-visible,html body .post-back:focus-visible,html body .post-3d-link:focus-visible,html body .home-oldtech-link:focus-visible,html body .model-page-cta:focus-visible,html body .studio-details-link:focus-visible,html body .home-forum-cta:focus-visible,html body a.ot-btn:focus-visible,html body a.wwu-btn:focus-visible,html body a.btn-primary:focus-visible,html body .product-buy:focus-visible,html body a.product-actionbar-btn:focus-visible,html body .review-etsy-button:focus-visible,html body .hero-shop-link:focus-visible,html body .model-shop:focus-visible,html body .rb-all:focus-visible,html body .wb-link:focus-visible,html body .help-contact>a:focus-visible,html body .post-cta>a:focus-visible,html body .help-end-link:focus-visible,html body .mto-cta a:focus-visible,html body .help-toc-back:focus-visible,html body .help-toc-help:focus-visible,html body .help-toc-close:focus-visible,html body .help-shop:focus-visible,html body .help-toc-page:focus-visible,html body .sv-start:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Same page: toward the target (down unless it sits above). */
html body.page-home .text-link[href^="#"]::after,html body .model-contact[href^="#"]::after,html body .product-secondary>a[href^="#"]::after,html body.page-home .home-build-story .feature-actions a:not(.build-watch)[href^="#"]::after,html body .review-design-link[href^="#"]::after,html body .help-back[href^="#"]::after,html body .journey-link[href^="#"]::after,html body .editorial-links a[href^="#"]::after,html body .founder-links a[href^="#"]::after,html body .fan-compare-side>a:not(.fan-compare-image-link)[href^="#"]::after,html body.page-creations p>a[href$="#test-notes"]:only-child[href^="#"]::after,html body .pw-all[href^="#"]::after,html body .rail-all[href^="#"]::after,html body .wb-rail-all[href^="#"]::after,html body .product-guide-link a[href^="#"]::after,html body .bento-note-link[href^="#"]::after,html body .custom-note-link[href^="#"]::after,html body .wwu-review-link a[href^="#"]::after,html body .wwu-kit-link[href^="#"]::after,html body.page-work .wwu-go[href^="#"]::after,html body.page-work .wwu-direct ul a[href^="#"]::after,html body.page-work .wwu-review figcaption a[href^="#"]::after,html body.page-work .wwu-proof-link a[href^="#"]::after,html body.page-work .wwu-case-rel[href^="#"]::after,html body .product-case-more[href^="#"]::after,html body .pr-all[href^="#"]::after,html body .workbench-rss-link[href^="#"]::after,html body .privacy-end p>a[href^="#"]::after,html body .channel-link[href^="#"]::after,html body .contact-setup-note a[href^="#"]::after,html body .post-back[href^="#"]::after,html body .post-3d-link[href^="#"]::after,html body .home-oldtech-link[href^="#"]::after,html body .model-page-cta[href^="#"]::after,html body .studio-details-link[href^="#"]::after,html body .home-forum-cta[href^="#"]::after,html body a.ot-btn[href^="#"]::after,html body a.wwu-btn[href^="#"]::after,html body a.btn-primary[href^="#"]::after,html body .product-buy[href^="#"]::after,html body a.product-actionbar-btn[href^="#"]::after,html body .review-etsy-button[href^="#"]::after,html body .hero-shop-link[href^="#"]::after,html body .model-shop[href^="#"]::after,html body .rb-all[href^="#"]::after,html body .wb-link[href^="#"]::after,html body .help-contact>a[href^="#"]::after,html body .post-cta>a[href^="#"]::after,html body .help-end-link[href^="#"]::after,html body .mto-cta a[href^="#"]::after,html body .help-toc-help[href^="#"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
html body .help-back[href="#your-product"]::after,html body .help-toc-back[href="#your-product"]::after,html body .help-toc-close::after,html body .help-end-link[href="#your-product"]::after,html body.page-work .wwu-review figcaption a[href^="#"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 23V9'/%3E%3Cpath d='M10 15l6-6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 23V9'/%3E%3Cpath d='M10 15l6-6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* [creations] comparison "Explore this mount" opens the preview: a pop-up. */
html body.page-creations:not(.page-product) .fan-compare-side>a:not(.fan-compare-image-link)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* "Start step-by-step setup" (Help and product pages) opens the step viewer: a pop-up. */
html body .sv-start::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* Smaller versions: inside review cards and the sticky product action bar. */
html body .review-design-link{padding:8px 40px 8px 14px!important;min-height:36px;font-size:12.5px!important;border-radius:10px!important}
html body .review-design-link::after,html body a.product-actionbar-btn::after{width:24px!important;height:24px!important;right:6px!important}
html body a.product-actionbar-btn{min-height:36px;padding-right:38px!important}
html body .review-design-link strong{font-weight:600}
/* Hero chapter tiles: same filled circle; Channel and Community scroll down the page. */
.page-home .hero-chapters a:not(.hero-chapter-out) .ui-arrow{background:#f4f4f1;color:#151515;border-color:#f4f4f1!important}

/* Plain text links that sat in the pill list: give them the whole button. */
html body .rb-all,html body .hero-shop-link{padding:12px 54px 12px 18px!important;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;font-size:14px!important;font-weight:500!important}
/* The forum call to action keeps its own padding rule; make room for the circle. */
html body.page-home .forum-stage .forum-stage-cta .home-forum-cta{padding-right:62px!important}
/* [creations] preview: keep the studio's own show/hide for these two (single-column studio shows Details, hides Ask). */
html body #modelPreview.is-studio .studio-details-link{display:none!important}
html body #modelPreview .model-contact{display:none!important}
@media (min-width: 761px) and (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  html body #modelPreview .model-contact{display:inline-block!important}
}
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  html body #modelPreview.is-studio .studio-details-link{display:inline-flex!important}
  html body #modelPreview .model-contact{display:none!important}
}
@media (max-width: 760px) {
  html body #modelPreview .studio-details-link,html body #modelPreview .model-shop{padding-right:40px!important;white-space:nowrap}
  html body #modelPreview .studio-details-link::after,html body #modelPreview .model-shop::after{width:26px!important;height:26px!important;right:7px!important}
}
html body .channel-link{white-space:nowrap!important;flex:none}

/* Header: [creations] keeps its lowercase brand spelling inside the uppercase nav (owner 2026-10-11). */
html body #mainNav .nav-links a[href="https://creations.bankasimedia.com/"]{text-transform:none!important;letter-spacing:.02em!important;font-size:13px!important}
/* Footer column headings glow like the current-page link (owner 2026-10-11; weight stays 700). */
html body .footer-col .footer-heading{color:#fff!important;text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866,0 0 28px #dce5f533}

/* BANKASI MEDIA lockup (owner 2026-10-13): 800 extra bold, MEDIA cap-top on BANKASI's cap-top line.
   MEDIA sits on the baseline and is raised by cap height x (size ratio - 1), in its own em:
   main 0.71 x (16.8/7.36 - 1) = .911em (Geist); [creations] 0.70 x (1/.58 - 1) = .507em (DM Sans).
   [creations] uses 'DM Sans Print' (same DM Sans file, 100-1000) because its 'DM Sans' face stops at 700. */
html body #mainNav .nav-logo,html body footer .nav-logo{align-items:baseline!important}
html body .nav-logo .logo-main{font-weight:800!important}
html body .nav-logo .logo-sup{font-weight:800!important;vertical-align:baseline!important;position:relative!important;top:-.911em!important;margin-top:0!important}
html body .creations-parent-name,html body .creations-parent-name sup{font-weight:800!important;font-family:'DM Sans Print','DM Sans',sans-serif!important}
html body .creations-parent-name sup{vertical-align:baseline!important;position:relative!important;top:-.507em!important}
/* [creations] wordmark (owner 2026-10-13): 500 medium in the header, hero (incl. the loading mark and typewriter layers) and footer, was 300. */
html body.page-creations .creations-bracket{font-weight:500!important}
/* /assets/creations/creations-refresh-v1.css */
/* 2026-10 refresh for [creations]: stock badges, dialog stock line and the "Notify me" form. */
.stock-badge{display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;font:500 10px/1.2 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#4d5a50}
.stock-badge .stock-dot{width:6px;height:6px;border-radius:50%;background:#3f9a5c;box-shadow:0 0 0 3px #3f9a5c1f}
.stock-badge[data-stock="out"],.stock-badge[data-stock="gone"]{color:#6d6a66}
.stock-badge[data-stock="out"] .stock-dot,.stock-badge[data-stock="gone"] .stock-dot{background:#a3a09b;box-shadow:0 0 0 3px #a3a09b1f}
.creation-body .bento-badge+.stock-badge{margin-left:10px}
.creation-body>.stock-badge{display:flex;width:fit-content}
.creation-body .bento-badge+.stock-badge{display:inline-flex}
#modelPreview .model-stock{margin:0 12px 0 0;align-self:center}
#modelPreview .model-stock[hidden]{display:none}

/* Notify me */
#modelPreview .model-notify{flex-basis:100%;margin:10px 0 0;max-width:420px}
#modelPreview .model-notify[hidden]{display:none}
#modelPreview .model-notify-title{margin:0 0 6px;font:500 11px/1.3 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#4a4a4a}
#modelPreview .model-notify-row{display:flex;gap:6px}
#modelPreview .model-notify input[type=email]{flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid #c9c6c0;border-radius:0;background:#fff;color:#151515;font:400 14px 'DM Sans',sans-serif}
#modelPreview .model-notify input[type=email]:focus-visible{outline:2px solid #151515;outline-offset:1px}
#modelPreview .model-notify button{height:36px;padding:0 16px;border:1px solid #555;border-radius:0;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 11px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s}
#modelPreview .model-notify button:hover{border-color:#999}
#modelPreview .model-notify button:focus-visible{outline:2px solid #151515;outline-offset:2px}
#modelPreview .model-notify button:disabled{opacity:.6;cursor:progress}
#modelPreview .model-notify-status{min-height:1em;margin:6px 0 0;font:400 12px/1.4 'DM Sans',sans-serif;color:#4a4a4a}
#modelPreview .model-notify.is-sent .model-notify-row{display:none}
#modelPreview .model-notify-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media(max-width:760px){#modelPreview .model-notify{margin-top:6px}#modelPreview .model-notify-title{display:none}}


/* Preview: no dropdowns; the design's page is the clear next step (owner 2026-10-02). */
#modelPreview .model-details.is-flat>summary{display:none}
#modelPreview .model-details.is-flat{border:0}
#modelPreview .model-page-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 6px;padding:14px 18px;border:1px solid #222;border-radius:10px;background:#faf9f6;color:#151515;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
#modelPreview .model-page-cta[hidden]{display:none}
#modelPreview .model-page-cta strong{display:block;font:500 15px/1.3 'DM Sans',sans-serif;letter-spacing:-.005em}
#modelPreview .model-page-cta small{display:block;margin-top:3px;font:400 12px/1.4 'DM Sans',sans-serif;color:#5f5c57;transition:color .2s}
#modelPreview .model-page-cta svg{flex:none;width:20px;height:20px;transition:transform .2s}
#modelPreview .model-page-cta:hover{background:#222;color:#fff}
#modelPreview .model-page-cta:hover small{color:#cfcac2}
#modelPreview .model-page-cta:hover svg{transform:translateX(3px)}
#modelPreview .model-page-cta:focus-visible{outline:2px solid #151515;outline-offset:3px}
@media(max-width:760px){#modelPreview .model-details.is-flat #modelDescription{display:none}#modelPreview .model-page-cta{margin:10px 0 4px;padding:12px 14px}#modelPreview .model-page-cta strong{font-size:14px}}

/* Not on Etsy yet: one button opens the notify popup (the disabled "Coming soon" pill is folded into it). */
#modelPreview.is-awaiting-etsy .model-shop.is-unavailable{display:none}
#modelPreview .model-notify-open{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid #555;border-radius:8px;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 13px/1.2 'DM Sans',sans-serif;cursor:pointer;transition:border-color .2s,box-shadow .2s}
#modelPreview .model-notify-open[hidden]{display:none}
#modelPreview .model-notify-open:hover{border-color:#aaa;box-shadow:0 0 0 3px #1515151a}
#modelPreview .model-notify-open:focus-visible{outline:2px solid #151515;outline-offset:2px}
#modelPreview .model-notify-soon{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#c9c6c0}
#modelPreview .model-notify-soon:after{content:"·";margin-left:10px;color:#8d8a85}
.notify-sheet{width:min(440px,calc(100vw - 32px));margin:auto;padding:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 30px 80px #0000004d}
.notify-sheet::backdrop{background:#0c0c0c8c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.notify-sheet-form{position:relative;padding:26px 24px 20px}
.notify-sheet-close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #cfccc6;border-radius:50%;background:#fff;color:#151515;cursor:pointer}
.notify-sheet-close svg{width:16px;height:16px}
.notify-sheet-close:focus-visible{outline:2px solid #151515;outline-offset:2px}
.notify-sheet-kicker{margin:0 0 6px;font:500 11px/1.3 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6862}
.notify-sheet h3{margin:0 44px 8px 0;font:500 22px/1.2 'DM Sans',sans-serif;letter-spacing:-.01em}
.notify-sheet-intro{margin:0 0 16px;font:400 14px/1.55 'DM Sans',sans-serif;color:#4a4844}
.notify-sheet-row{display:flex;gap:8px}
.notify-sheet-row input[type=email]{flex:1;min-width:0;height:46px;padding:0 14px;border:1px solid #c9c6c0;border-radius:8px;background:#fff;color:#151515;font:400 16px 'DM Sans',sans-serif}
.notify-sheet-row input[type=email]:focus-visible{outline:2px solid #151515;outline-offset:1px}
.notify-sheet-row button{height:46px;padding:0 18px;border:1px solid #555;border-radius:8px;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 12px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.notify-sheet-row button:disabled{opacity:.6;cursor:progress}
.notify-sheet-status{min-height:1.2em;margin:10px 0 0;font:400 13px/1.5 'DM Sans',sans-serif;color:#2f2e2b}
.notify-sheet.is-sent .notify-sheet-row,.notify-sheet.is-sent .notify-sheet-intro{display:none}
.notify-sheet-note{margin:6px 0 0;font:400 11px/1.5 'DM Sans',sans-serif;color:#7a7771}
.notify-sheet-note a{color:inherit}
@media(max-width:420px){.notify-sheet-row{flex-direction:column}.notify-sheet-row button{width:100%}}

/* Phones: the model gets the room. Only the essentials remain under it: one slim "Full details" row and one
   action row (copy link as an icon, plus Etsy or Notify me). The essentials line and "Ask about this design"
   live on the design's own page. */
@media(max-width:760px){
 #modelPreview .model-details.is-flat{padding-top:6px;padding-bottom:6px}
 #modelPreview .model-details.is-flat #modelEssential,#modelPreview .model-details.is-flat .model-design-credit{display:none!important}
 #modelPreview .model-page-cta{margin:0;padding:10px 14px;border-radius:8px}
 #modelPreview .model-page-cta small{display:none}
 #modelPreview .model-page-cta strong{font-size:14px}
 #modelPreview .model-page-cta svg{width:18px;height:18px}
 #modelPreview .model-purchase{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
 #modelPreview .model-contact{display:none}
 #modelPreview .model-copy-link{flex:none;width:44px;min-width:44px;height:44px;padding:0;justify-content:center}
 #modelPreview .model-copy-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 #modelPreview .model-purchase .model-shop:not(.is-unavailable),#modelPreview .model-notify-open{flex:1;min-height:44px}
 #modelPreview .model-stock{flex:none;margin:0}
 #modelPreview .model-notify{display:none}
}
.notify-sheet .model-notify-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#modelPreview .model-copy-link{font-family:'DM Sans',sans-serif}
/* /assets/creations/preview-studio-v1.css */
/* Preview studio (see preview-studio-v1.js). Loaded last on Creations; every rule is scoped to #modelPreview.is-studio
   so it outranks the older preview layers without editing them. Warm off-white / charcoal, DM Sans, no hover lift. */

#modelPreview.is-studio { --stage-bg: #f6f6f5; --ink: #151515; --muted: #63625d; --line: #e3e1dc; --dock-h: 64px; }

/* ---------- Frame: a full-window studio ---------- */
#modelPreview.is-studio[open] { display: block; position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
#modelPreview.is-studio::backdrop { background: rgba(12, 13, 15, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#modelPreview.is-studio > .model-neighbor { display: none !important; }
#modelPreview.is-studio .model-panel {
  position: absolute; inset: 14px; width: auto; height: auto; max-width: none; max-height: none; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 440px); grid-template-rows: auto minmax(0, 1fr) auto;
  border: 0; border-radius: 22px; overflow: hidden; background: #fbfbf9; box-shadow: 0 40px 120px rgba(0, 0, 0, .45);
}
#modelPreview.is-studio .model-dialog-grid { display: contents; }

/* ---------- Stage: edge to edge, no box ---------- */
#modelPreview.is-studio .model-visual { grid-column: 1; grid-row: 1 / 4; position: relative; display: block; min-width: 0; min-height: 0; background: var(--stage-bg); transition: background-color .4s ease; }
#modelPreview.is-studio .model-browser { position: absolute; inset: 0; display: block; padding: 0; height: auto; }
#modelPreview.is-studio .model-browser .model-stage {
  position: absolute; inset: 0; width: auto; height: auto; margin: 0; aspect-ratio: auto; box-sizing: border-box; border: 0; border-radius: 0;
  padding: 76px 40px calc(var(--dock-h) + 118px); background: transparent;
}
#modelPreview.is-studio .model-stage-label { display: none; }
#modelPreview.is-studio:not(.model-height) .model-turn-wheel { bottom: calc(var(--dock-h) + 34px); width: min(260px, 60%); }
#modelPreview.is-studio.model-height .model-browser .model-stage { padding-right: 104px; padding-bottom: calc(var(--dock-h) + 70px); }
#modelPreview.is-studio.model-height .model-stage .rotation-control { top: 84px; bottom: calc(var(--dock-h) + 46px); right: 34px; }
#modelPreview.is-studio .model-slide-play { top: 20px; right: 24px; z-index: 6; }
#modelPreview.is-studio .product-installation-photo:not([hidden]) { position: absolute; inset: 76px 40px calc(var(--dock-h) + 40px); margin: 0; display: flex; flex-direction: column; justify-content: center; }
#modelPreview.is-studio .product-installation-photo img { max-height: 100%; object-fit: contain; border-radius: 14px; }

/* ---------- Top of the stage: ‹ 3 / 19 ›, photo tabs, drag hint ---------- */
#modelPreview.is-studio .studio-nav {
  position: absolute; z-index: 6; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 2px; padding: 4px;
  border: 1px solid rgba(0, 0, 0, .07); border-radius: 999px; background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
#modelPreview.is-studio .studio-nav-button {
  flex: none; display: inline-flex; align-items: center; justify-content: center; line-height: 0; width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 0; cursor: pointer; transition: background-color .2s;
}
#modelPreview.is-studio .studio-nav-button .ui-arrow { width: 18px; height: 18px; }
#modelPreview.is-studio .studio-nav-button .model-mobile-product-name { display: none; }
#modelPreview.is-studio .studio-nav-button:hover { background: rgba(0, 0, 0, .07); }
#modelPreview.is-studio .studio-nav-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
#modelPreview.is-studio .studio-count { min-width: 52px; text-align: center; font: 500 12px/1 "DM Sans", sans-serif; letter-spacing: .04em; color: #3c3c39; font-variant-numeric: tabular-nums; }
#modelPreview.is-studio .product-media-tabs { position: absolute; z-index: 6; top: 20px; left: 50%; transform: translateX(-50%); margin: 0; }
#modelPreview.is-studio .studio-hint {
  position: absolute; z-index: 5; left: 50%; bottom: calc(var(--dock-h) + 88px); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 80%; padding: 0; background: none; color: #4a4a46; font: 400 12.5px/1.35 "DM Sans", sans-serif; text-align: center; text-shadow: 0 0 6px var(--stage-bg), 0 0 2px var(--stage-bg);
  pointer-events: none; transition: opacity .35s ease, visibility 0s linear .35s;
}
#modelPreview.is-studio .studio-hint svg { flex: none; width: 18px; height: 18px; }
#modelPreview.is-studio .studio-hint #modelStatus { margin: 0; padding: 0; font: inherit; color: inherit; }
#modelPreview.is-studio.studio-touched .studio-hint, #modelPreview.is-studio.model-interacted .studio-hint { opacity: 0; visibility: hidden; }
#modelPreview.is-studio.model-height .studio-hint { bottom: calc(var(--dock-h) + 22px); }
#modelPreview.is-studio .studio-hint #modelStatus:empty { display: none; }

/* ---------- The dock: every choice in one floating, frosted bar ---------- */
#modelPreview.is-studio .model-controls {
  position: absolute; z-index: 6; left: 50%; bottom: 22px; transform: translateX(-50%); box-sizing: border-box; width: max-content; max-width: calc(100% - 40px);
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 8px;
  border: 1px solid rgba(0, 0, 0, .07); border-radius: 20px; background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 14px 44px rgba(0, 0, 0, .13), 0 1px 0 rgba(255, 255, 255, .7) inset;
}
#modelPreview.is-studio .model-variant-control { display: block; margin: 0; }
#modelPreview.is-studio .model-variant-control[hidden] { display: none; }
#modelPreview.is-studio #modelVariantLabel { display: none; }
#modelPreview.is-studio .model-variant-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
#modelPreview.is-studio .model-variant-buttons.has-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; width: auto; }
#modelPreview.is-studio .model-variant-row { display: flex; align-items: center; gap: 6px; }
#modelPreview.is-studio .model-variant-row + .model-variant-row { padding-left: 14px; border-left: 1px solid rgba(0, 0, 0, .1); }
#modelPreview.is-studio .model-variant-row-label { padding: 0 4px 0 6px; font: 500 10.5px/1 "DM Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
#modelPreview.is-studio .model-variant-row-options { display: flex; flex-wrap: wrap; gap: 4px; }
#modelPreview.is-studio .model-variant-buttons button {
  min-height: 38px; padding: 9px 15px; border: 0; border-radius: 13px; background: transparent; color: #33332f;
  font: 500 13.5px/1.2 "DM Sans", sans-serif; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s;
}
#modelPreview.is-studio .model-variant-buttons button:hover { background: rgba(0, 0, 0, .06); }
#modelPreview.is-studio .model-variant-buttons button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
#modelPreview.is-studio .model-variant-buttons button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Installation stages: a stepper track along the top of the dock. */
#modelPreview.is-studio .model-sequence-steps:not([hidden]) {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 2px 4px 2px; padding: 0;
}
#modelPreview.is-studio .model-sequence-steps button:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 9px; left: calc(50% + 6px); width: calc(100% - 12px); height: 2px; border-radius: 2px; background: rgba(0, 0, 0, .14); pointer-events: none; }
#modelPreview.is-studio .model-sequence-steps button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; min-height: 0; padding: 4px 6px 2px;
  border: 0; border-radius: 10px; background: transparent; color: #63625d; font: 500 12px/1.25 "DM Sans", sans-serif; white-space: nowrap; cursor: pointer;
}
#modelPreview.is-studio .model-sequence-steps button::before { content: ""; position: relative; z-index: 1; flex: none; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid #a9a8a3; border-radius: 50%; background: #fbfbf9; transition: background-color .2s, border-color .2s, transform .2s; }
#modelPreview.is-studio .model-sequence-steps button:hover { color: var(--ink); }
#modelPreview.is-studio .model-sequence-steps button[aria-current="true"] { color: var(--ink); background: transparent; }
#modelPreview.is-studio .model-sequence-steps button[aria-current="true"]::before { border-color: var(--ink); background: var(--ink); transform: scale(1.15); }
#modelPreview.is-studio .model-sequence-steps:not([hidden]) + #modelStatus { display: none; }

/* ---------- Info column ---------- */
#modelPreview.is-studio .model-close {
  position: absolute; z-index: 8; top: 18px; right: 18px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 22px; line-height: 1; box-shadow: none; transition: background-color .2s, border-color .2s;
}
#modelPreview.is-studio .model-close:hover { background: #f1f0ec; border-color: #cfcdc7; }
#modelPreview.is-studio .model-heading { grid-column: 2; grid-row: 1; margin: 0; padding: 30px 70px 0 34px; background: none; border: 0; }
#modelPreview.is-studio #modelTitle { margin: 0 0 10px; font: 500 clamp(26px, 2.3vw, 34px)/1.1 "DM Sans", sans-serif; letter-spacing: -.02em; color: var(--ink); }
#modelPreview.is-studio #modelSpec { margin: 0; font: 400 14px/1.5 "DM Sans", sans-serif; color: var(--muted); }
#modelPreview.is-studio .model-details { grid-column: 2; grid-row: 2; min-height: 0; overflow: auto; margin: 0; padding: 22px 34px 24px; border: 0; background: none; scrollbar-width: thin; }
#modelPreview.is-studio .model-details > summary { display: none; }
#modelPreview.is-studio #modelDescription { margin: 0 0 16px; font: 400 15px/1.7 "DM Sans", sans-serif; color: #33332f; }
#modelPreview.is-studio #modelEssential { margin: 0 0 22px; padding: 12px 14px; border-radius: 12px; background: #f1f0ec; font: 500 13px/1.5 "DM Sans", sans-serif; color: #3c3c39; }
#modelPreview.is-studio .model-page-cta { margin-top: 4px; border-radius: 14px; }
#modelPreview.is-studio .model-purchase {
  grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; padding: 18px 34px 26px; border-top: 1px solid var(--line); background: #fbfbf9;
}
#modelPreview.is-studio .model-stock { order: 0; flex: 1 0 100%; margin: 0; }
#modelPreview.is-studio .model-shop:not(.is-unavailable), #modelPreview.is-studio .model-notify-open {
  order: 1; flex: 1 0 100%; display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 54px; margin: 0; border-radius: 14px; font-size: 14px; letter-spacing: .02em;
}
#modelPreview.is-studio .model-copy-link { order: 2; min-height: 40px; margin: 0; border-radius: 12px; }
#modelPreview.is-studio .model-contact { order: 3; margin: 0 0 0 auto; white-space: nowrap; }
#modelPreview.is-studio .model-stock[hidden], #modelPreview.is-studio .model-stock:empty { display: none; }

/* ---------- Phones: full-screen stage, the same dock, a compact sheet ---------- */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #modelPreview.is-studio .model-panel { inset: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; box-shadow: none; }
  #modelPreview.is-studio .model-visual { grid-column: 1; grid-row: 1; }
  #modelPreview.is-studio .model-browser .model-stage { padding: 64px 10px calc(var(--dock-h) + 96px); }
  #modelPreview.is-studio.model-height .model-browser .model-stage { padding-right: 70px; padding-bottom: calc(var(--dock-h) + 56px); }
  #modelPreview.is-studio.model-height .model-stage .rotation-control { top: 70px; right: 14px; bottom: calc(var(--dock-h) + 30px); }
  #modelPreview.is-studio:not(.model-height) .model-turn-wheel { bottom: calc(var(--dock-h) + 20px); }
  #modelPreview.is-studio .studio-nav { top: max(12px, env(safe-area-inset-top)); left: 12px; }
  #modelPreview.is-studio .studio-nav-button { width: 34px; height: 34px; }
  #modelPreview.is-studio .studio-count { min-width: 46px; }
  #modelPreview.is-studio .model-close { top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; background: rgba(255, 255, 255, .82); border-color: rgba(0, 0, 0, .07); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  #modelPreview.is-studio .product-media-tabs { top: 64px; }
  #modelPreview.is-studio .studio-hint { bottom: calc(var(--dock-h) + 68px); font-size: 12px; }
  #modelPreview.is-studio .model-slide-play { top: 64px; right: 12px; }
  #modelPreview.is-studio .model-variant-row-label { width: 78px; box-sizing: border-box; }
  #modelPreview.is-studio .model-notify-soon { display: none; }
  #modelPreview.is-studio .model-controls { bottom: 12px; max-width: calc(100% - 20px); width: calc(100% - 20px); padding: 6px; border-radius: 18px; gap: 6px; }
  #modelPreview.is-studio .model-variant-buttons, #modelPreview.is-studio .model-variant-buttons.has-groups { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
  #modelPreview.is-studio .model-variant-row + .model-variant-row { padding-left: 0; border-left: 0; border-top: 1px solid rgba(0, 0, 0, .07); padding-top: 4px; }
  #modelPreview.is-studio .model-variant-row { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  #modelPreview.is-studio .model-variant-row-options, #modelPreview.is-studio .model-variant-buttons:not(.has-groups) {
    display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  /* Only a row that really overflows fades at its end (set by preview-studio-v1.js). */
  #modelPreview.is-studio .studio-scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); padding-right: 16px !important; }
  #modelPreview.is-studio .model-variant-buttons:not(.has-groups) { justify-content: flex-start; }
  #modelPreview.is-studio .model-variant-row-options::-webkit-scrollbar, #modelPreview.is-studio .model-variant-buttons::-webkit-scrollbar { display: none; }
  #modelPreview.is-studio .model-variant-buttons button { flex: none; min-height: 36px; padding: 8px 13px; font-size: 13px; }
  #modelPreview.is-studio .model-sequence-steps:not([hidden]) { display: grid !important; }
  #modelPreview.is-studio .model-sequence-steps button { font-size: 11px; padding: 4px 2px 2px; white-space: normal; text-align: center; }

  #modelPreview.is-studio .model-heading { grid-column: 1; grid-row: 2; padding: 14px 18px 0; }
  #modelPreview.is-studio #modelTitle { margin: 0 0 4px; font-size: 21px; }
  #modelPreview.is-studio #modelSpec { font-size: 12.5px; }
  #modelPreview.is-studio .model-details { display: none; }
  #modelPreview.is-studio .model-purchase { grid-column: 1; grid-row: 3; flex-wrap: nowrap; gap: 8px; padding: 12px 18px max(14px, env(safe-area-inset-bottom)); border-top: 0; }
  #modelPreview.is-studio .model-shop:not(.is-unavailable), #modelPreview.is-studio .model-notify-open { order: 3; flex: 1 1 auto; min-width: 0; min-height: 50px; }
  #modelPreview.is-studio .model-copy-link { order: 1; flex: none; }
  #modelPreview.is-studio .studio-details-link { order: 2; flex: none; }
  #modelPreview.is-studio .model-stock, #modelPreview.is-studio .model-contact { display: none; }
  #modelPreview.is-studio .model-copy-link { width: 50px; height: 50px; min-height: 50px; padding: 0; display: grid; place-items: center; }
  #modelPreview.is-studio .studio-details-link { grid-area: details; }
}
#modelPreview.is-studio .studio-details-link { display: none; }
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #modelPreview.is-studio .studio-details-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 50px; padding: 0 16px; box-sizing: border-box;
    border: 1px solid #cfcdc7; border-radius: 14px; background: #fff; color: var(--ink); font: 500 13px/1 "DM Sans", sans-serif; text-decoration: none; white-space: nowrap;
  }
}
@media (max-width: 0px) {
  #modelPreview.is-studio .model-visual, #modelPreview.is-studio .studio-hint, #modelPreview.is-studio .model-variant-buttons button, #modelPreview.is-studio .model-sequence-steps button::before { transition: none; }
}
/* The engine sizes the canvas to the stage box; its intrinsic size must never feed back into the layout. */
#modelPreview.is-studio #modelFrame { min-width: 0; max-width: 100%; max-height: 100%; }
#modelPreview.is-studio .model-visual:has(.product-installation-photo:not([hidden])) .studio-hint { display: none; }

/* Height (GPU supports): one aligned column at the stage's right edge: "Height" on top, the vertical lined wheel,
   the value underneath. The direction arrows are dropped (the wheel already reads as vertical). */
#modelPreview.is-studio.model-height { --h-top: 84px; --h-bottom: calc(var(--dock-h) + 40px); --h-right: 26px; }
#modelPreview.is-studio.model-height .model-stage .rotation-control {
  position: absolute; z-index: 4; top: var(--h-top); bottom: var(--h-bottom); right: var(--h-right); left: auto; width: 58px; margin: 0; padding: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 0;
  font: 500 10.5px/1 "DM Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); pointer-events: none; text-align: center;
}
#modelPreview.is-studio.model-height .rotation-control output { grid-row: 3; margin: 0 !important; font: 500 12.5px/1 "DM Sans", sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
#modelPreview.is-studio.model-height .height-direction-arrows { display: none !important; }
#modelPreview.is-studio.model-height .model-turn-wheel {
  top: calc(var(--h-top) + 22px); bottom: calc(var(--h-bottom) + 24px); right: calc(var(--h-right) + 12px); left: auto; width: 34px; height: auto; transform: none;
}
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #modelPreview.is-studio.model-height { --h-top: 66px; --h-bottom: calc(var(--dock-h) + 22px); --h-right: 10px; }
  #modelPreview.is-studio.model-height .model-browser .model-stage { padding-right: 76px; }
}

/* Phones: the choices fill the dock evenly (a segmented control), instead of sitting at the left of an empty bar. */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #modelPreview.is-studio .model-variant-buttons:not(.has-groups) button,
  #modelPreview.is-studio .model-variant-row-options button { flex: 1 0 auto; justify-content: center; text-align: center; }
  #modelPreview.is-studio .model-variant-buttons:not(.has-groups), #modelPreview.is-studio .model-variant-row-options { padding-right: 0; }
}
/* Photo tabs: one line, compact, on the same frosted ground as the other stage controls. */
#modelPreview.is-studio .product-media-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(0, 0, 0, .07); border-radius: 999px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#modelPreview.is-studio .product-media-tabs[hidden] { display: none; }
#modelPreview.is-studio .product-media-tabs button { min-height: 32px; padding: 6px 14px; border: 0; border-radius: 999px; white-space: nowrap; font: 500 12.5px/1 "DM Sans", sans-serif; }
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) { #modelPreview.is-studio .product-media-tabs { top: max(14px, env(safe-area-inset-top)); left: 50%; } #modelPreview.is-studio .product-media-tabs button { padding: 6px 11px; font-size: 12px; } }
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) { #modelPreview.is-studio .product-media-tabs { top: 62px; } #modelPreview.is-studio .product-media-tabs ~ .model-browser .model-stage { padding-top: 104px; } }

/* Info column (owner 2026-10-04): a short synopsis, and "Full details, fit & setup" always in view. If a small window
   still needs to scroll, the button sticks to the bottom of the column instead of scrolling away. */
@media (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  #modelPreview.is-studio .model-details { display: flex; flex-direction: column; }
  #modelPreview.is-studio #modelDescription { font-size: 16px; line-height: 1.6; color: #2a2a27; }
  #modelPreview.is-studio .model-page-cta { position: sticky; bottom: 0; z-index: 2; margin-top: auto; box-shadow: 0 -18px 18px -6px #fbfbf9; background: #fbfbf9; }
}
/* The sticky button keeps its own hover: charcoal fill, white text (the sticky rule above sets a light background). */
#modelPreview.is-studio .model-page-cta:hover { background: #222; color: #fff; }
#modelPreview.is-studio .model-page-cta:hover small { color: #cfcac2; }

/* Airflow pause/play (collection-v38): airflow views loop on their own; this is their only control besides the wheel.
   Light frosted twin of the hero video's pause button, top right of the stage. */
#modelPreview.is-studio .model-air-toggle{position:absolute;top:18px;right:18px;z-index:6;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid rgba(21,21,21,.12);border-radius:50%;background:rgba(255,255,255,.62);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 16px rgba(0,0,0,.08);color:#151515;cursor:pointer;transition:background .2s,border-color .2s}
#modelPreview.is-studio .model-air-toggle:hover{background:rgba(255,255,255,.9);border-color:rgba(21,21,21,.24)}
#modelPreview.is-studio .model-air-toggle:focus-visible{outline:2px solid #151515;outline-offset:3px}
#modelPreview.is-studio .model-air-toggle svg{width:16px;height:16px}
#modelPreview.is-studio .model-air-toggle .motion-play{display:none;transform:translateX(1px)}
#modelPreview.is-studio .model-air-toggle[aria-pressed="true"] .motion-play{display:block}
#modelPreview.is-studio .model-air-toggle[aria-pressed="true"] .motion-pause{display:none}
#modelPreview.is-studio .model-air-toggle[hidden]{display:none}
/* Phones: the close button owns the top right corner, so the toggle sits beside the lined bar instead. */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait){#modelPreview.is-studio .model-air-toggle{top:auto;bottom:calc(var(--dock-h) + 23px);right:14px;width:38px;height:38px}}

/* ---------- Audit fixes 2026-10-07 (preview-studio-v2.js, collection-v41.js) ---------- */
/* Keyboard focus on the stage: an inset ring, so the panel's rounded clip can't hide it. */
#modelPreview.is-studio .model-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: -8px; border-radius: 18px; }

/* Wide layouts whose grouped rows would wrap: stacked one-line rows with aligned group names (set by preview-studio-v2). */
#modelPreview.is-studio.studio-stacked .model-variant-buttons.has-groups { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
#modelPreview.is-studio.studio-stacked .model-variant-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
#modelPreview.is-studio.studio-stacked .model-variant-row + .model-variant-row { padding: 4px 0 0; border-left: 0; border-top: 1px solid rgba(0, 0, 0, .07); }
#modelPreview.is-studio.studio-stacked .model-variant-row-label { width: 96px; box-sizing: border-box; }
#modelPreview.is-studio.studio-stacked .model-variant-row-options, #modelPreview.is-studio.studio-stacked .model-variant-buttons:not(.has-groups) {
  flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
#modelPreview.is-studio.studio-stacked .model-variant-row-options::-webkit-scrollbar, #modelPreview.is-studio.studio-stacked .model-variant-buttons::-webkit-scrollbar { display: none; }
#modelPreview.is-studio.studio-stacked .studio-scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); padding-right: 16px !important; }
#modelPreview.is-studio .model-variant-row-options, #modelPreview.is-studio .model-variant-buttons { scroll-behavior: auto; }

/* Group tabs exist only in the single-column layout. */
#modelPreview.is-studio .studio-group-tabs { display: none; }

/* Buffered autoplay: a thin ring around pause/play fills while the next frames load (collection-v41). */
#modelPreview.is-studio .model-air-toggle svg.air-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); opacity: 0; pointer-events: none; transition: opacity .25s; }
#modelPreview.is-studio .model-air-toggle .air-ring circle { fill: none; stroke: #151515; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--buffer, 0) * 100); transition: stroke-dashoffset .2s linear; }
#modelPreview.is-studio .model-air-toggle.is-buffering svg.air-ring { opacity: .75; }

/* "Copy link" without clipboard access: the link in a selected field (no prompt()). */
#modelPreview.is-studio .model-share-field { order: 4; flex: 1 0 100%; min-width: 0; box-sizing: border-box; height: 42px; margin: 0; padding: 0 12px; border: 1px solid #cfcdc7; border-radius: 12px; background: #fff; color: var(--ink); font: 400 13px/1 "DM Sans", sans-serif; }
#modelPreview.is-studio .model-share-field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#modelPreview.is-studio .model-share-field[hidden] { display: none; }

/* Single column (phones and portrait tablets), model first (W2): title and spec in the top bar between the
   ‹ n / 19 › pill and the close button, one group's row at a time under quiet underline tabs, the hint beside the
   lined wheel. Nothing is removed; the stage gets the room the sheet heading, hint line and second row used. */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #modelPreview.is-studio .studio-nav { padding: 3px; }
  #modelPreview.is-studio .studio-nav-button { width: 32px; height: 32px; }
  #modelPreview.is-studio .studio-count { min-width: 40px; }
  #modelPreview.is-studio .model-heading {
    position: absolute; z-index: 7; grid-area: auto; top: max(12px, env(safe-area-inset-top)); left: 134px; right: 66px; min-height: 40px; margin: 0; padding: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 2px; background: none; pointer-events: none;
  }
  #modelPreview.is-studio #modelTitle { margin: 0; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
  #modelPreview.is-studio #modelSpec { font-size: 11.5px; line-height: 1.3; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-wrap: pretty; }
  #modelPreview.is-studio .model-browser .model-stage { padding-top: max(66px, calc(var(--studio-head-b, 52px) + 14px)); padding-bottom: calc(var(--dock-h) + 72px); }
  #modelPreview.is-studio .model-purchase { padding-top: 10px; }
  /* Controls pinned under the top bar (height label and wheel, Press key / Slide puck) move down with a wrapped heading. */
  @media (max-width: 760px) {
    #modelPreview.is-studio .model-stage .model-slide-play { top: max(64px, calc(var(--studio-head-b, 52px) + 10px)); }
    #modelPreview.is-studio.model-height .model-stage .rotation-control { top: max(66px, calc(var(--studio-head-b, 52px) + 12px)); }
    #modelPreview.is-studio.model-height .model-stage .model-turn-wheel { top: max(88px, calc(var(--studio-head-b, 52px) + 34px)); }
  }
  /* Photo tabs ("3D preview / In a build") sit just below the title bar. */
  #modelPreview.is-studio .product-media-tabs { top: max(calc(max(12px, env(safe-area-inset-top)) + 62px), calc(var(--studio-head-b, 52px) + 10px)); }
  #modelPreview.is-studio .product-media-tabs ~ .model-browser .model-stage { padding-top: max(116px, calc(var(--studio-head-b, 52px) + 64px)); }
  #modelPreview.is-studio .model-purchase:has(.model-share-field:not([hidden])) { flex-wrap: wrap; }
  /* The copy button is an icon here (its label stays for screen readers), on portrait tablets too. */
  #modelPreview.is-studio .model-copy-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* The hint sits on the wheel's line, to its left (the pause/play button is on its right). */
  #modelPreview.is-studio:not(.model-height) .model-turn-wheel { width: min(200px, 50%); }
  #modelPreview.is-studio:not(.model-height) .studio-hint {
    left: 10px; right: calc(50% + min(100px, 25%) + 10px); bottom: calc(var(--dock-h) + 20px); transform: none; box-sizing: border-box; width: auto; max-width: none; height: 44px;
    justify-content: flex-end; text-align: right; font-size: 11px; line-height: 1.25;
  }
  #modelPreview.is-studio:not(.model-height) .studio-hint svg { display: none; }
  /* Grouped designs: tabs with the group names, then only that group's choices. */
  #modelPreview.is-studio .studio-group-tabs:not([hidden]) { display: flex; justify-content: center; gap: 2px; margin: 0 4px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
  #modelPreview.is-studio .studio-group-tabs button {
    min-height: 34px; margin: 0 0 -1px; padding: 6px 12px 7px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
    color: #5f5e5a; font: 500 12.5px/1.2 "DM Sans", sans-serif; white-space: nowrap; cursor: pointer; transition: color .2s, border-color .2s;
  }
  #modelPreview.is-studio .studio-group-tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
  #modelPreview.is-studio .studio-group-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  #modelPreview.is-studio.has-group-tabs .model-variant-row:not(.is-active-group) { display: none; }
  #modelPreview.is-studio.has-group-tabs .model-variant-row { grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; }
  #modelPreview.is-studio.has-group-tabs .model-variant-row-label { display: none; }
}

/* Preview action row (owner 2026-10-11).
   1. Designs not on Etsy show ONE button: the disabled shop pill stays hidden (the site-wide link-button rule forces
      .model-shop to display, which brought it back) and "Coming soon / Unavailable · Notify me" takes its place.
   2. Notify me has the same shape as the shop button: 12 px radius, same height, the filled circle with a right
      arrow (it opens a pop-up). On phones both use the Details button's 13 px type so the labels fit beside the circle. */
html body #modelPreview.is-awaiting-etsy .model-shop.is-unavailable{display:none!important}
html body #modelPreview .model-notify-open{position:relative;box-sizing:border-box;min-height:54px;padding:0 54px 0 20px;border-radius:12px}
html body #modelPreview .model-notify-open::after{content:"";position:absolute;top:50%;right:7px;translate:0 -50%;width:32px;height:32px;border-radius:50%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  html body #modelPreview.is-studio .model-notify-open,html body #modelPreview.is-studio .model-shop:not(.is-unavailable){min-height:50px;height:50px;padding:0 38px 0 12px!important;border-radius:12px!important;font-size:13px!important;letter-spacing:0!important;white-space:nowrap}
  html body #modelPreview .model-notify-open::after{width:26px;height:26px}
  /* The height reading sits clear of the view dock (the grouped dock is taller than --dock-h). */
  #modelPreview.is-studio.model-height{--h-bottom:calc(var(--dock-h) + 46px)}
}
/* No double-tap zoom on [creations] (owner 2026-10-11: a quick second tap on the preview arrows zoomed the page and
   the interactive stage made it hard to zoom back out). manipulation keeps scrolling and pinch-zoom. */
html:has(body.page-creations),body.page-creations,#modelPreview{touch-action:manipulation}
/* Very narrow phones (under 360 px): Details keeps its circle only, so the main button's label still fits. */
@media (max-width: 359px) {
  html body #modelPreview.is-studio .studio-details-link{width:50px;min-width:50px;padding:0!important;font-size:0!important;gap:0}
  html body #modelPreview.is-studio .studio-details-link::after{right:50%!important;translate:50% -50%}
}
/* /assets/creations/creations-polish-v1.css */
/* [creations] card and preview polish (2026-10-06); see creations-polish-v1.js. */
/* Wide cards: the panel takes the render's own edge colours, and the render fades into it over a softer band. */
.page-creations .is-bento > .bento-wide .model-poster.has-card-ground{background:linear-gradient(180deg,var(--card-ground-top),var(--card-ground-bottom))}
.page-creations .is-bento > .bento-wide .model-poster img,
.page-creations .is-bento > .bento-wide .model-hover-frame{
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
 mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
@media (max-width:760px){
 .page-creations .is-bento > .bento-wide .model-poster img,
 .page-creations .is-bento > .bento-wide .model-hover-frame{-webkit-mask-image:none;mask-image:none}
}
/* Corsair holder card: the cropped close-up fills the panel edge to edge. */
.page-creations .model-card[data-model="case-headphone-holder"] .model-poster{background:#17181a}
/* Close button: no ring after a pointer, deep-link or scripted open; keyboard users keep it. */
#modelPreview.is-quiet-focus .model-close:focus-visible{outline:none!important;box-shadow:none!important}
/* /assets/creations/creations-nav-v1.css */
/* [creations] category navigation that follows you (owner-approved 2026-10-06); built by creations-nav-v1.js.
   Wide screens: the product pages' "Browse [creations]" rail look (product-page-v1.css), fixed beside the catalog.
   Everywhere else: a slim frosted bar of quiet underline tabs under the site header. No pills, no lift (house rule). */
.page-creations .product-group{scroll-margin-top:var(--cnav-offset,140px)}

/* Wide rail */
.cnav-rail{display:none}
.cnav-wide .cnav-rail{display:block;position:fixed;z-index:20;left:28px;top:calc(var(--cnav-header,83px) + 12px);max-height:calc(100vh - var(--cnav-header,83px) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
 -webkit-mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 36px),transparent);
 opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.cnav-wide .cnav-rail::-webkit-scrollbar{display:none}
.cnav-wide.cnav-in-catalog .cnav-rail{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.cnav-rail-inner{padding:16px 4px 28px;font-family:'DM Sans',sans-serif}
.cnav-eyebrow{margin:0 0 16px;padding-left:8px;font:500 11px/1.4 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b675f}
.cnav-rail ul{list-style:none;margin:0;padding:0}
.cnav-group{margin:0 0 14px}
.cnav-group-name{display:block;margin:0 0 6px;padding:2px 8px;font:500 10.5px/1.4 'DM Sans',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#6b675f;text-decoration:none;transition:color .2s}
.cnav-group-name:hover,.cnav-group-name.is-current{color:#151515}
.cnav-item{display:flex;align-items:center;gap:11px;padding:4px 8px;border-radius:11px;color:#3a3833;text-decoration:none;font:400 13.5px/1.25 'DM Sans',sans-serif;transition:background-color .2s,color .2s,box-shadow .2s}
.cnav-item:hover{background:rgba(21,21,21,.05);color:#151515}
.cnav-item[aria-current="true"]{background:#fff;color:#151515;font-weight:500;box-shadow:0 0 0 1px rgba(21,21,21,.08),0 6px 18px rgba(0,0,0,.05)}
.cnav-item:focus-visible,.cnav-group-name:focus-visible{outline:2px solid #151515;outline-offset:2px}
.cnav-thumb{flex:none;width:38px;height:38px;border-radius:9px;background:#fbfbfa;box-shadow:inset 0 0 0 1px rgba(21,21,21,.06);overflow:hidden}
.cnav-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cnav-name{min-width:0}
@media (max-height:820px){
 .cnav-thumb{width:32px;height:32px;border-radius:8px}
 .cnav-item{padding-top:3px;padding-bottom:3px;font-size:13px}
 .cnav-group{margin-bottom:10px}
}

/* Slim bar */
.cnav-bar{position:fixed;z-index:150;left:0;right:0;top:var(--cnav-header,83px);background:rgba(246,246,244,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(21,21,21,.09);
 opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
.cnav-in-catalog:not(.cnav-wide) .cnav-bar{opacity:1;visibility:visible;transform:none;transition:opacity .28s ease,transform .28s ease,visibility 0s}
.cnav-wide .cnav-bar{display:none}
.cnav-bar-track{display:flex;gap:34px;overflow-x:auto;scrollbar-width:none;padding:0 24px;max-width:1360px;margin:0 auto}
.cnav-bar-track::-webkit-scrollbar{display:none}
.cnav-tab{flex:none;padding:13px 0 11px;border-bottom:2px solid transparent;color:#6b675f;text-decoration:none;font:500 13.5px/1.2 'DM Sans',sans-serif;letter-spacing:.01em;white-space:nowrap;transition:color .2s,border-color .2s}
.cnav-tab:first-child{margin-left:auto}
.cnav-tab:last-child{margin-right:auto}
.cnav-tab:hover{color:#151515}
.cnav-tab[aria-current="true"]{color:#151515;border-bottom-color:#151515}
.cnav-tab:focus-visible{outline:2px solid #151515;outline-offset:-2px;border-radius:2px}
@media (max-width:760px){
 .cnav-bar-track{gap:22px;padding:0 20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
 .cnav-tab{font-size:13px;padding:12px 0 10px}
}

/* Never over the startup screen, an open preview, the phone menu or search. */
.creations-loading .cnav-bar,.creations-loading .cnav-rail,
body:has(#modelPreview[open]) .cnav-bar,body:has(#modelPreview[open]) .cnav-rail,
body:has(#mobileMenu[aria-hidden="false"]) .cnav-bar,
body:has(dialog[open]) .cnav-bar{opacity:0!important;visibility:hidden!important}
@media print{.cnav-bar,.cnav-rail{display:none!important}}
/* /assets/css/review-designs-v1.css */
/* "See this design" link under a review's attribution (review-designs-v1.js). Quiet, inherits the review's colour. */
.review-design-link{display:inline-block;align-self:flex-start;margin-top:12px;padding:2px 0;color:inherit;opacity:.78;text-decoration:none;font:400 12.5px/1.4 'DM Sans',sans-serif;letter-spacing:.01em;transition:opacity .2s}
.review-design-link strong{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .2s}
.review-design-link:hover{opacity:1}
.review-design-link:hover strong{text-decoration-color:currentColor}
.review-design-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px;opacity:1}
.review-design-arrow{display:inline-block;width:14px;height:14px;margin-left:5px;vertical-align:-2px}
.review-spotlight .review-design-link{margin-top:16px;font-size:13.5px}
/* Photo cards: their copy sits on the photo, so the link takes the attribution's light colour. */
.photo-review-card .review-design-link{color:#ddd;opacity:.9;margin-top:10px}
.photo-review-card .review-design-link:hover{color:#fff;opacity:1}
/* The review viewer (review-gallery-v4.js) carries the link too, under "Verified purchase on Etsy". */
.review-lightbox .review-viewer-design{display:block;width:fit-content;margin-top:10px;color:#e6e6e6;opacity:.9}
.review-lightbox .review-viewer-design:hover{color:#fff;opacity:1}
/* /assets/creations/creations-qol-v1.css */
/* [creations] quick wins (2026-10-06): icy tile figures as links, "More in <Category>" strip and "Compare fan mounts"
   in the preview's info column (creations-qol-v1.js). No lift: hovers change colour, border or glow only. */

/* Icy results tile: every figure opens what it measured. The frost canvas stays underneath (pointer-events: none). */
.bento-ice .ice-link { display: block; position: relative; z-index: 1; color: inherit; text-decoration: none; border-radius: 10px; cursor: pointer; }
.bento-ice .ice-pair .ice-link, .bento-ice .ice-side .ice-link { display: block; }
.bento-ice .ice-link .ice-label { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s; }
.bento-ice .ice-link .bento-note-figure, .bento-ice .ice-link .ice-figure { transition: filter .25s; }
.bento-ice .ice-link:hover .ice-label { color: #f2faff; text-decoration-color: rgba(214, 238, 255, .7); }
.bento-ice .ice-link:hover .bento-note-figure, .bento-ice .ice-link:hover .ice-figure { filter: brightness(1.12) drop-shadow(0 0 14px rgba(160, 215, 255, .45)); }
.bento-ice .ice-link:focus-visible { outline: 2px solid #cfeaff; outline-offset: 6px; }

/* The comparison is linked to by id; keep it clear of the sticky header and category bar. */
#compare-fan-mounts { scroll-margin-top: calc(var(--cnav-offset, 140px) + 12px); }

/* "More in <Category>": quiet thumbnails below the page button. */
#modelPreview .studio-more { margin: 26px 0 0; padding: 0; }
#modelPreview .studio-more[hidden] { display: none; }
#modelPreview .studio-more-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
#modelPreview .studio-more-title { margin: 0; white-space: nowrap; font: 500 11px/1.4 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #64615b; }
#modelPreview .studio-more-compare { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 500 13px/1.4 "DM Sans", sans-serif; color: #151515; text-decoration: underline; text-decoration-color: rgba(21, 21, 21, .25); text-underline-offset: 3px; transition: text-decoration-color .2s; }
#modelPreview .studio-more-compare svg { width: 14px; height: 14px; }
#modelPreview .studio-more-compare:hover { text-decoration-color: currentColor; }
#modelPreview .studio-more-compare:focus-visible { outline: 2px solid #151515; outline-offset: 3px; border-radius: 4px; }
#modelPreview .studio-more-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
#modelPreview .studio-more-item { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(21, 21, 21, .1); border-radius: 10px; background: #f4f4f2; transition: border-color .2s, box-shadow .2s; }
#modelPreview .studio-more-item img { display: block; width: 100%; height: 100%; object-fit: contain; filter: contrast(1.06); }
#modelPreview .studio-more-item:hover { border-color: rgba(21, 21, 21, .38); }
#modelPreview .studio-more-item[aria-current="true"] { border-color: #151515; box-shadow: inset 0 0 0 1px #151515; cursor: default; }
#modelPreview .studio-more-item:focus-visible { outline: 2px solid #151515; outline-offset: 2px; }
/* Phones keep the compact sheet (the info column is hidden there). */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) { #modelPreview .studio-more { display: none; } }

.studio-more-compare[hidden] { display: none; }

/* 2026-10-07 (creations-qol-v2.js): whole-tile thumbnails cropped to the view's model box. */
#modelPreview .studio-more-item.is-cropped { position: relative; }
#modelPreview .studio-more-item.is-cropped img { position: absolute; max-width: none; object-fit: fill; }
/* Short desktop windows: the description is capped at three lines (the design's page has it in full), so the
   "More in" strip stays in view, e.g. at 1280 x 800. */
@media (min-width: 761px) and (max-height: 860px) and (orientation: landscape), (min-width: 1025px) and (max-height: 860px) {
  #modelPreview.is-studio #modelDescription { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
  #modelPreview.is-studio #modelEssential { margin-bottom: 16px; }
  #modelPreview .studio-more { margin-top: 18px; }
}
/* /assets/creations/category-headers-v1.css */
/* [creations] intro and category headers (owner 2026-10-07: "revamp"; every heading its own material, one family).
   One structure for all four: eyebrow (n / 04 + count), bracketed heading, a lede that says what is in the section,
   and its designs (each opens its preview). Each category adds a quiet material in the house palette:
   Cooling = frost (canvas from category-headers-v1.js + a cool breath of air), Inside the build = machined (grid,
   crop marks, a dimension line, label-plate eyebrow), Desk & setup = warm lamp light on a soft desk surface,
   Everyday carry = a stitched tag with an eyelet; its brackets snap shut. Colour-only hovers, no lift. */

/* ---------- Shared ---------- */
.page-creations .cat-head{
 --head-ink:#1f2020;--head-soft:#4b4e4d;--head-rule:#1515151c;--chip-line:#1515152e;--chip-glow:#ffffff;
 --bracket-ink:#2c2c2b;
 --bracket-filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #b3b3aeaa);
 position:relative;isolation:isolate;display:grid;
 grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);
 grid-template-areas:"eyebrow designs" "title designs" "lede designs" "actions designs";
 grid-template-rows:auto auto auto 1fr;
 column-gap:clamp(36px,5vw,96px);align-items:start;justify-content:stretch;
 margin:0 0 30px;padding:clamp(36px,3.6vw,54px) clamp(28px,3.4vw,56px) clamp(34px,3.4vw,50px);
 border:0;border-radius:28px;color:var(--head-ink);
}
.page-creations .product-group{margin-top:clamp(56px,6vw,96px)}
.page-creations .product-group:first-of-type{margin-top:0}
.page-creations .cat-head::before,.page-creations .cat-head::after{content:"";position:absolute;pointer-events:none;border-radius:inherit}
.page-creations .cat-head::before{inset:0;z-index:-3}
.page-creations .cat-head::after{inset:0;z-index:-2}

.page-creations .cat-head>h2{
 grid-area:title;justify-self:start;position:relative;display:flex;align-items:baseline;gap:.1em;margin:0;
 font:400 clamp(42px,4.5vw,70px)/1.04 "DM Sans",sans-serif;letter-spacing:-.045em;color:var(--head-ink);
 text-shadow:var(--head-glow,none);
}
/* Brackets (owner 2026-10-07): static, the heading's own weight, so stem (.085em), height (ascender to descender)
   and spacing come from the same type design as the letters; a soft halo in the category's light. */
.page-creations .cat-head h2 .category-silver-bracket{
 display:inline-block;font-weight:400;letter-spacing:0;color:var(--bracket-ink);
 background:none;-webkit-text-fill-color:currentColor;animation:none;text-shadow:none;
 filter:var(--bracket-filter);
}
.page-creations .cat-head h2 .category-silver-bracket:first-child{margin-right:-.02em}
.page-creations .cat-head h2 .category-silver-bracket:last-child{margin-left:.02em}

.page-creations .cat-head .cat-eyebrow{
 grid-area:eyebrow;display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0 0 16px;max-width:none;
 font:500 11.5px/1.2 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:#5b5e5d;
}
.page-creations .cat-head .cat-index::after{content:"";display:inline-block;width:26px;height:1px;margin:0 12px;vertical-align:middle;background:currentColor;opacity:.45}
.page-creations .cat-head .cat-lede{
 grid-area:lede;margin:20px 0 0;max-width:58ch;font:400 16px/1.68 "DM Sans",sans-serif;color:var(--head-soft);
}
.page-creations .cat-head .cat-designs-wrap{
 grid-area:designs;align-self:center;min-width:0;padding:6px 0 6px clamp(26px,2.8vw,44px);border-left:1px solid var(--head-rule);
}
.page-creations .cat-head .cat-designs-title{
 margin:0 0 14px;max-width:none;font:500 11px/1.2 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6a6d6c;
}
.page-creations .cat-designs{list-style:none;margin:0 -8px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
.page-creations .cat-designs[data-size="3"]{grid-template-columns:minmax(0,1fr)}
.page-creations .cat-designs li{margin:0;min-width:0}
.page-creations .cat-design{
 display:flex;align-items:center;gap:13px;min-height:44px;padding:6px 12px 6px 6px;border:1px solid transparent;border-radius:16px;
 color:inherit;text-decoration:none;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent;
}
.page-creations .cat-design-thumb{
 position:relative;flex:none;width:54px;height:54px;overflow:hidden;border-radius:var(--thumb-radius,12px);background:#fff;
 box-shadow:0 0 0 1px #15151512,var(--thumb-extra,0 0 #0000);
}
.page-creations .cat-design-thumb img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.22)}
.page-creations .cat-design-name{min-width:0;font:500 14.5px/1.3 "DM Sans",sans-serif;letter-spacing:-.005em;color:#222423}
.page-creations .cat-design:hover,.page-creations .cat-design:focus-visible{background:#ffffffb8;border-color:var(--chip-line);box-shadow:0 0 0 4px #ffffff59,0 0 22px var(--chip-glow)}
.page-creations .cat-design:focus-visible{outline:2px solid #555b5d;outline-offset:2px}

/* Cooling's "Compare fan mounts" disclosure: a quiet pill that drives <details id=compare-fan-mounts> below. */
.page-creations .cat-compare{
 grid-area:actions;justify-self:start;display:inline-flex;align-items:center;gap:9px;margin:24px 0 0;min-height:44px;padding:0 16px 0 14px;
 border:1px solid #87aec480;border-radius:999px;background:#ffffffa8;color:#1f2a30;cursor:pointer;
 font:500 14px/1 "DM Sans",sans-serif;letter-spacing:0;transition:border-color .25s,box-shadow .25s,background-color .25s;-webkit-tap-highlight-color:transparent;
}
.page-creations .cat-compare[hidden]{display:none}
.page-creations .cat-compare svg{width:18px;height:18px;flex:none}
.page-creations .cat-compare .cat-compare-chev{width:16px;height:16px;margin-left:2px;transition:transform .3s ease}
.page-creations .cat-compare[aria-expanded="true"] .cat-compare-chev{transform:rotate(180deg)}
.page-creations .cat-compare:hover,.page-creations .cat-compare:focus-visible,.page-creations .cat-compare[aria-expanded="true"]{border-color:#5f93b0;background:#fff;box-shadow:0 0 0 4px #d3e8f466,0 0 20px #d9eef9}
.page-creations .cat-compare:focus-visible{outline:2px solid #3f6f8b;outline-offset:3px}
.page-creations .collection-fan-compare.is-head-driven>summary{display:none}
.page-creations .collection-fan-compare.is-head-driven:not([open]){margin:0;padding:0;border:0}
.page-creations .collection-fan-compare.is-head-driven[open]{margin:-6px 0 34px;padding:0 0 18px}
.page-creations .collection-fan-compare.is-head-driven[open] .fan-visual-comparison{margin-top:0}

/* ---------- Cooling: frozen over (frost canvas from category-headers-v1.js) and a breath of cold air ---------- */
.page-creations .cat-head[data-cat="cooling"]{
 --head-ink:#18222a;--head-soft:#3e4d57;--head-rule:#7fa6bd59;--chip-line:#8fb7cc8c;--chip-glow:#d6eefb;
 --bracket-ink:#1d2a33;
 --bracket-filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #8fc4e3) drop-shadow(0 0 18px #b8def4);
 --head-glow:0 0 2px #fff,0 0 14px #d4ecf9,0 0 34px #c6e4f6;
 overflow:clip;
}
.page-creations .cat-head[data-cat="cooling"]::before{
 background:
  radial-gradient(70% 110% at 88% 0%,#cfe5f2 0%,#cfe5f200 62%),
  radial-gradient(60% 90% at 6% 100%,#d8e9f2 0%,#d8e9f200 60%),
  radial-gradient(35% 60% at 50% 50%,#f4fafd 0%,#f4fafd00 100%),
  linear-gradient(165deg,#e8f1f6 0%,#dde9f0 55%,#e6f0f5 100%);
}
.page-creations .cat-head[data-cat="cooling"]:not(.is-frosted)::before{
 -webkit-mask-image:radial-gradient(closest-side,#000 72%,#0000 100%);mask-image:radial-gradient(closest-side,#000 72%,#0000 100%);
 -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
/* A slow breath of cold air drifting across the ice (one transformed layer). */
.page-creations .cat-head[data-cat="cooling"]::after{
 inset:-10% auto -10% -45%;width:55%;border-radius:50%;
 background:radial-gradient(closest-side,#ffffffeb 0%,#f2faffa6 45%,#ffffff00 100%);
 filter:blur(6px);opacity:.85;animation:cat-breath 14s ease-in-out infinite alternate;will-change:transform;
}
@keyframes cat-breath{from{transform:translateX(0) scaleY(.9)}to{transform:translateX(250%) scaleY(1.05)}}
.page-creations .cat-head .cat-frost{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;border-radius:inherit}

/* ---------- Inside the build: a technical drawing ---------- */
.page-creations .cat-head[data-cat="gpu-supports"]{
 --head-ink:#1b1c1e;--head-soft:#45484c;--head-rule:#2224263d;--chip-line:#22242640;--chip-glow:#e3e4e6;--thumb-radius:5px;
 --draw:#2a2d31;
 --bracket-ink:#1f2124;
 --bracket-filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 5px #7d838a99) drop-shadow(0 0 12px #a9aeb466);
 border-radius:14px;
}
.page-creations .cat-head[data-cat="gpu-supports"]::before{
 background:
  linear-gradient(#22242617 1px,#0000 1px) -1px -1px/96px 96px,
  linear-gradient(90deg,#22242617 1px,#0000 1px) -1px -1px/96px 96px,
  linear-gradient(#2224260b 1px,#0000 1px) -1px -1px/16px 16px,
  linear-gradient(90deg,#2224260b 1px,#0000 1px) -1px -1px/16px 16px,
  linear-gradient(170deg,#eeeeec,#e7e8e7);
 box-shadow:inset 0 0 0 1px #2224262e,inset 0 0 0 7px #eeeeec,inset 0 0 0 8px #22242624;
}
/* Four screw heads at the corners. */
.page-creations .cat-head[data-cat="gpu-supports"]::after{
 --screw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='a' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23fdfdfd'/%3E%3Cstop offset='.55' stop-color='%23c3c6c9'/%3E%3Cstop offset='1' stop-color='%23878b90'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10.4' cy='11' r='8' fill='%2300000022'/%3E%3Ccircle cx='10' cy='10' r='7.6' fill='url%28%23a%29' stroke='%235d6166' stroke-width='.8'/%3E%3Cpath d='M6.6 10h6.8M10 6.6v6.8' stroke='%234a4e53' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
 background:var(--screw) left 18px top 18px/16px 16px no-repeat,var(--screw) right 18px top 18px/16px 16px no-repeat,var(--screw) left 18px bottom 18px/16px 16px no-repeat,var(--screw) right 18px bottom 18px/16px 16px no-repeat;
}
/* Easter egg (category-headers-v1.js): the screws are buttons; the CSS screws above stay as the no-JS fallback. */
.cat-js .page-creations .cat-head[data-cat="gpu-supports"]::after{background:none}
.page-creations .cat-screw{
 position:absolute;z-index:3;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
 display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
}
.page-creations .cat-screw.is-top-left{left:8px;top:8px}.page-creations .cat-screw.is-top-right{right:8px;top:8px}
.page-creations .cat-screw.is-bottom-left{left:8px;bottom:8px}.page-creations .cat-screw.is-bottom-right{right:8px;bottom:8px}
.page-creations .cat-screw svg{width:16px;height:16px;transition:filter .2s}
.page-creations .cat-screw:hover svg{filter:brightness(1.08) drop-shadow(0 0 3px #ffffffcc)}
.page-creations .cat-screw:focus-visible{outline:2px solid #2a2d31;outline-offset:-4px}
/* Unscrewing: it turns out, rises a touch, then drops away; an empty hole is left behind. */
.page-creations .cat-screw::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;opacity:0;background:radial-gradient(circle at 45% 40%,#2b2d30 0 45%,#7d8287 65%,#c9ccd0 100%);transition:opacity .3s .5s}
.page-creations .cat-screw.is-out{cursor:default}
.page-creations .cat-screw.is-out::before{opacity:1}
.page-creations .cat-screw.is-out svg{animation:screw-out 1s cubic-bezier(.4,0,.6,1) forwards}
.page-creations .cat-screw.is-back svg{animation:screw-in .8s cubic-bezier(.2,.7,.3,1) both}
@keyframes screw-out{
 0%{transform:rotate(0) scale(1)}
 65%{transform:rotate(-900deg) scale(1.22) translateY(0);opacity:1}
 100%{transform:rotate(-1080deg) scale(.7) translateY(46px);opacity:0}
}
@keyframes screw-in{from{transform:rotate(720deg) scale(1.25);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
/* All four out: the panel falls forward on its bottom edge and shows the wall (wall-hole-v1.css) behind it. */
.page-creations .product-group#gpu-supports{position:relative}
.page-creations .cat-head[data-cat="gpu-supports"]{transform-origin:50% 100%}
/* It falls flat toward you like a drawbridge, hinged on its bottom edge. Seen head-on (no perspective) it only
   foreshortens vertically, so it never grows past the card's width; it bounces once and rests as a narrow, shaded
   ledge at the wall's foot, its face darkened and softened as the underside turns toward you. */
.page-creations .cat-head[data-cat="gpu-supports"].is-loose{z-index:2;cursor:pointer;animation:panel-fall 1.1s cubic-bezier(.5,0,.5,1) forwards}
.page-creations .cat-head[data-cat="gpu-supports"].is-fixing{animation:panel-fix .75s cubic-bezier(.3,.7,.3,1) both}
.page-creations .cat-head[data-cat="gpu-supports"].is-loose>*{filter:blur(1.5px);opacity:.55;transition:filter .5s,opacity .5s}
.page-creations .cat-head[data-cat="gpu-supports"].is-loose .cat-screw,.page-creations .cat-head[data-cat="gpu-supports"].is-loose .cat-dim{opacity:0}
@keyframes panel-fall{
 0%{transform:rotateX(0);filter:brightness(1) drop-shadow(0 0 0 #0000)}
 12%{transform:rotateX(-5deg)}
 62%{transform:rotateX(-89deg);filter:brightness(.62) drop-shadow(0 2px 2px #0000)}
 78%{transform:rotateX(-79deg)}
 90%{transform:rotateX(-87deg)}
 100%{transform:rotateX(-85deg);filter:brightness(.72) drop-shadow(0 6px 3px #00000040)}
}
@keyframes panel-fix{from{transform:rotateX(-85deg);filter:brightness(.72)}to{transform:rotateX(0);filter:brightness(1)}}
.page-creations .cat-head[data-cat="gpu-supports"].is-loose .cat-screw{visibility:hidden}
.page-creations .cat-head[data-cat="gpu-supports"] .cat-eyebrow{
 justify-self:start;width:fit-content;padding:7px 22px 6px;border:1px solid #25272a59;border-radius:3px;
 background:linear-gradient(180deg,#fafafa,#e2e3e4);color:#33363a;box-shadow:inset 0 1px 0 #fff,0 1px 0 #ffffffb3;position:relative;
}
.page-creations .cat-head[data-cat="gpu-supports"] .cat-eyebrow::before{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(circle at 9px 50%,#9a9ea3 0 2px,#0000 2.6px),radial-gradient(circle at calc(100% - 9px) 50%,#9a9ea3 0 2px,#0000 2.6px);
}
/* The heading is dimensioned like a drawing: extension lines, arrowed dimension line and its value (category-headers-v1.js). */
.page-creations .cat-dim{
 position:absolute;z-index:1;height:30px;pointer-events:none;color:var(--draw);
 transform-origin:left center;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .15s,opacity .6s ease .15s;
}
.page-creations .cat-dim::before{content:"";position:absolute;left:0;right:0;top:14px;border-top:1px solid currentColor}
.page-creations .cat-dim-ext{position:absolute;top:-6px;height:28px;border-left:1px solid currentColor;opacity:.7}
.page-creations .cat-dim-ext:first-child{left:0}
.page-creations .cat-dim-ext:nth-child(2){right:0}
.page-creations .cat-dim-arrow{position:absolute;top:10.5px;width:11px;height:8px;background:currentColor}
.page-creations .cat-dim-arrow.is-l{left:0;clip-path:polygon(0 50%,100% 0,100% 100%)}
.page-creations .cat-dim-arrow.is-r{right:0;clip-path:polygon(100% 50%,0 0,0 100%)}
.page-creations .cat-dim-val{
 position:absolute;left:50%;top:14px;transform:translate(-50%,-50%);padding:2px 9px;
 background:#ebecea;border:1px solid #2a2d3159;border-radius:2px;
 font:500 11px/1.2 'DM Sans',sans-serif;letter-spacing:.1em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--draw);
}
.cat-js .page-creations .cat-head[data-cat="gpu-supports"]:not(.is-in) .cat-dim{transform:scaleX(0);opacity:0}
.page-creations .cat-head[data-cat="gpu-supports"] .cat-lede{margin-top:46px}
.page-creations .cat-head[data-cat="gpu-supports"] .cat-design-thumb{--thumb-extra:inset 0 0 0 1px #ffffff}
/* Drawing title block, bottom right. */
.page-creations .cat-titleblock{
 position:absolute;right:46px;bottom:12px;display:flex;margin:0;border:1px solid #2a2d3166;background:#eeeeecf2;pointer-events:none;
 font:500 9.5px/1 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:#4a4e53;
}
.page-creations .cat-titleblock span{padding:5px 8px}
.page-creations .cat-titleblock span+span{border-left:1px solid #2a2d3140}
.page-creations .cat-titleblock b{font-weight:500;color:#1f2124}

/* ---------- Desk & setup: a desk, a desk mat and the lamp ---------- */
.page-creations .cat-head[data-cat="desk"]{
 --head-ink:#211d18;--head-soft:#4a4239;--head-rule:#7a5f3a2e;--chip-line:#ffffff40;--chip-glow:#ffffff1f;--thumb-radius:14px;
 --bracket-ink:#2e2721;
 --bracket-filter:drop-shadow(0 0 2px #fff6e8) drop-shadow(0 0 8px #e7c48fcc) drop-shadow(0 0 20px #f0d6ad99);
 --head-glow:0 0 30px #fff1dc;
 overflow:clip;
}
/* Light oak desk top: grain, a mug ring, and a darker edge where the light falls off. */
.page-creations .cat-head[data-cat="desk"]::before{
 background:
  radial-gradient(circle at var(--mug-x,47%) var(--mug-y,30%),#0000 0 33px,#8a5f3524 34px,#8a5f3533 35.5px,#8a5f3514 37px,#0000 38.5px),
  radial-gradient(circle at calc(var(--mug-x,47%) + 5px) calc(var(--mug-y,30%) + 3px),#0000 0 31px,#8a5f3518 32px,#0000 33.5px),
  radial-gradient(130% 120% at 30% 20%,#0000 55%,#5a3d2026 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2600' height='1400'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .11' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .36 0 0 0 0 .2 0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23w%29'/%3E%3C/svg%3E") 0 0/2600px 1400px no-repeat,
  linear-gradient(175deg,#ecdec8,#e4d2b8);
}
/* The lamp: a warm pool of light from the top left, switched on the first time the header is on screen. */
.page-creations .cat-head[data-cat="desk"]::after{
 inset:-45% 30% 5% -15%;border-radius:50%;
 background:radial-gradient(closest-side,#fff8ecf2 0%,#fff0d8b3 35%,#fde6c247 65%,#fde6c200 100%);
 opacity:1;transition:opacity 1.4s ease .1s;
}
.cat-js .page-creations .cat-head[data-cat="desk"]:not(.is-in)::after{opacity:0}
/* The designs sit on a felt desk mat with a stitched edge; its cable runs off the desk. */
.page-creations .cat-head[data-cat="desk"] .cat-designs-wrap{
 position:relative;border:0;margin-left:0;padding:22px 18px 18px 24px;border-radius:20px;
 background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),
  linear-gradient(160deg,#36383b,#2b2c2f);
 box-shadow:0 1px 0 #ffffff59 inset,0 18px 30px -16px #3b2a1680,0 2px 4px #3b2a1640;
}
.page-creations .cat-head[data-cat="desk"] .cat-designs-wrap::before{content:"";position:absolute;inset:7px;border:1.5px dashed #ffffff33;border-radius:15px;pointer-events:none}
.page-creations .cat-head[data-cat="desk"] .cat-designs-wrap::after{
 content:"";position:absolute;left:-118px;bottom:-96px;width:150px;height:120px;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120'%3E%3Cpath d='M146 14C110 16 104 52 80 70S30 82 18 120' fill='none' stroke='%2300000026' stroke-width='6' stroke-linecap='round' transform='translate(2 4)'/%3E%3Cpath d='M146 14C110 16 104 52 80 70S30 82 18 120' fill='none' stroke='%23303134' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M146 13C110 15 104 51 80 69S30 81 18 119' fill='none' stroke='%23ffffff2e' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.page-creations .cat-head[data-cat="desk"] .cat-designs-title{color:#c9c2b6}
.page-creations .cat-head[data-cat="desk"] .cat-design-name{color:#f1ede6}
.page-creations .cat-head[data-cat="desk"] .cat-design-thumb{box-shadow:0 0 0 1px #00000040,0 6px 12px -4px #00000080}
.page-creations .cat-head[data-cat="desk"] .cat-design:hover,.page-creations .cat-head[data-cat="desk"] .cat-design:focus-visible{background:#ffffff14;border-color:#ffffff40;box-shadow:0 0 18px #ffe7c22e}
.page-creations .cat-head[data-cat="desk"] .cat-design:focus-visible{outline-color:#f1ede6}

/* ---------- Everyday carry: a stitched fabric tag on a keyring; its brackets snap shut ---------- */
.page-creations .cat-head[data-cat="on-the-go"]{
 --head-ink:#1d1d1d;--head-soft:#474746;--head-rule:#15151524;--chip-line:#15151538;--chip-glow:#ececec;
 --thumb-extra:inset 0 -3px 0 #1515150f;
 --bracket-ink:#232323;
 --bracket-filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #a9a9adb3) drop-shadow(0 0 16px #d3d3d899);
 --ring-x:calc(100% - 40px);--ring-y:40px;
}
.page-creations .cat-head[data-cat="on-the-go"]::before{
 background:
  radial-gradient(circle at var(--ring-x) var(--ring-y),#0000 0 calc(8px * var(--eye,1)),#8d8d8a calc(8.5px * var(--eye,1)),#ececea calc(9.5px * var(--eye,1)),#c3c3c0 calc(12px * var(--eye,1)),#6f6f6c calc(13px * var(--eye,1)),#00000014 calc(14.5px * var(--eye,1)),#0000 calc(16px * var(--eye,1))),
  repeating-linear-gradient(0deg,#1515150a 0 1px,#0000 1px 3px),
  repeating-linear-gradient(90deg,#ffffff4d 0 1px,#0000 1px 3px),
  radial-gradient(80% 120% at 0% 0%,#fbfbfa 0%,#fbfbfa00 60%),
  linear-gradient(160deg,#ecebe7,#e6e4df);
 box-shadow:inset 0 0 0 1px #15151514,inset 0 2px 0 #ffffffb3;
}
/* Bold stitching: the thread, with a lighter highlight beside it. */
.page-creations .cat-head[data-cat="on-the-go"]::after{
 inset:12px;border:2.5px dashed #2c2c2c80;border-radius:18px;
 box-shadow:0 1px 0 #ffffffcc,inset 0 1px 0 #ffffffcc;
}
.page-creations .cat-head[data-cat="on-the-go"] h2 .category-silver-bracket{transition:transform .5s cubic-bezier(.3,1.9,.45,1) .25s}
.cat-js .page-creations .cat-head[data-cat="on-the-go"]:not(.is-in) h2 .category-silver-bracket:first-child{transform:translateX(-.32em)}
.cat-js .page-creations .cat-head[data-cat="on-the-go"]:not(.is-in) h2 .category-silver-bracket:last-child{transform:translateX(.32em)}
/* The keyring (category-headers-v1.js): a split ring through the eyelet, out over the corner, with a short chain and
   a keycap fob swinging outside the tag. */
.page-creations .cat-keyring{position:absolute;z-index:2;left:var(--ring-x);top:var(--ring-y);width:0;height:0;pointer-events:none;transform:scale(var(--ring-s,1));transform-origin:0 0}
.page-creations .cat-keyring svg{position:absolute;overflow:visible}
.page-creations .cat-keyring .kr-ring{left:-60px;top:-70px;width:140px;height:120px}
/* The eyelet is punched through the tag, so the ring behind it shows through the hole. */
.page-creations .cat-head[data-cat="on-the-go"]::before{
 -webkit-mask-image:radial-gradient(circle at var(--ring-x) var(--ring-y),#0000 0 calc(7.6px * var(--eye,1)),#000 calc(8.2px * var(--eye,1)));mask-image:radial-gradient(circle at var(--ring-x) var(--ring-y),#0000 0 calc(7.6px * var(--eye,1)),#000 calc(8.2px * var(--eye,1)));
}
.page-creations .cat-keyring.kr-back{z-index:-4}
.page-creations .cat-keyring .kr-swing{position:absolute;left:64px;top:7px;width:0;height:0;transform-origin:0 0;animation:kr-swing-s 3.6s ease-in-out infinite alternate}
.page-creations .cat-keyring .kr-chain{left:-32px;top:-6px;width:64px;height:200px}
@keyframes kr-swing{from{transform:rotate(7deg)}to{transform:rotate(-7deg)}}
@keyframes kr-swing-s{from{transform:rotate(6deg)}to{transform:rotate(-1.5deg)}}

/* ---------- Intro: the collection and its four places ---------- */
.page-creations .collection-navigation.cat-intro{display:block;margin:0 0 clamp(64px,7vw,104px);padding-top:clamp(30px,3.2vw,44px);border-top:1px solid #d8d9d8}
.page-creations .cat-intro .collection-statement{max-width:none}
.page-creations .cat-intro-eyebrow{
 display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0 0 14px;
 font:500 11.5px/1.2 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5b5e5d;font-variant-numeric:tabular-nums;
}
.page-creations .cat-intro-eyebrow span:first-child::after{content:"";display:inline-block;width:26px;height:1px;margin:0 12px;vertical-align:middle;background:currentColor;opacity:.45}
.page-creations .cat-intro-eyebrow span+span:not(:nth-child(2))::before{content:"";display:inline-block;width:1px;height:11px;margin:0 11px 0 12px;vertical-align:-1px;background:currentColor;opacity:.35}
/* Headline (owner 2026-10-07: engineered, not italic): the heading face, tight, two weights of ink, set inside
   drawing crop marks like the Inside the build header. */
.page-creations .cat-intro .collection-statement .creations-intro{
 position:relative;display:inline-block;max-width:none;margin:6px 0 0 -22px;padding:14px 22px 16px;text-wrap:pretty;
 font:500 clamp(40px,5vw,78px)/1 "DM Sans",sans-serif!important;letter-spacing:-.052em;color:#1a1b1b!important;
}
.page-creations .cat-intro .creations-intro span{display:block}
.page-creations .cat-intro .creations-intro .cat-intro-l2{font-weight:400;color:#8b8e8d}
.page-creations .cat-intro .creations-intro::before,.page-creations .cat-intro .creations-intro::after{content:"";position:absolute;width:16px;height:16px;border:0 solid #1a1b1b8c;pointer-events:none}
.page-creations .cat-intro .creations-intro::before{left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.page-creations .cat-intro .creations-intro::after{right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.page-creations .cat-intro-sub{max-width:64ch;margin:18px 0 0;font:400 16px/1.68 "DM Sans",sans-serif;color:#4b4e4d}
/* A ruler over the four tiles: a major tick at each tile, minor ticks between. */
.page-creations .cat-ruler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(30px,3.2vw,44px);height:13px}
.page-creations .cat-ruler span{
 background:
  linear-gradient(#1515158c,#1515158c) left bottom/1px 13px no-repeat,
  linear-gradient(#15151559,#15151559) left bottom/100% 1px no-repeat,
  repeating-linear-gradient(90deg,#15151547 0 1px,#0000 1px 10px) left bottom/100% 5px no-repeat,
  linear-gradient(90deg,#0000 calc(50% - .5px),#15151566 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)) left bottom/100% 8px no-repeat;
}
.page-creations .cat-ruler span:last-child{background-image:linear-gradient(#1515158c,#1515158c),linear-gradient(#1515158c,#1515158c),linear-gradient(#15151559,#15151559),repeating-linear-gradient(90deg,#15151547 0 1px,#0000 1px 10px),linear-gradient(90deg,#0000 calc(50% - .5px),#15151566 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px));
 background-position:left bottom,right bottom,left bottom,left bottom,left bottom;background-size:1px 13px,1px 13px,100% 1px,100% 5px,100% 8px;background-repeat:no-repeat}
.page-creations .cat-intro nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:10px}
.page-creations .collection-navigation.cat-intro nav a.cat-tile{
 position:relative;isolation:isolate;display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;min-height:0;margin:0;
 padding:18px 20px 20px;border:1px solid #1515150f;border-radius:22px;overflow:hidden;
 color:#1f2020;text-decoration:none;font:inherit;text-shadow:none;animation:none;background:#efeeeb;
 transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease;-webkit-tap-highlight-color:transparent;
}
.page-creations .collection-navigation.cat-intro nav a.cat-tile::before,.page-creations .collection-navigation.cat-intro nav a.cat-tile::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;margin:0;filter:none;animation:none;background:none;background-clip:border-box;-webkit-background-clip:border-box;-webkit-text-fill-color:initial}
.page-creations .cat-tile-meta{display:flex;justify-content:space-between;align-items:center;font:500 11px/1.2 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:#5d605f}
.page-creations .cat-tile-thumbs{display:flex;margin:22px 0 20px}
.page-creations .cat-tile-thumb{position:relative;width:58px;height:58px;overflow:hidden;border-radius:var(--thumb-radius,13px);background:#fff;box-shadow:0 0 0 1px #15151512,0 0 0 4px var(--tile-ring,#efeeeb),var(--thumb-extra,0 0 #0000)}
.page-creations .cat-tile-thumb+.cat-tile-thumb{margin-left:-8px}
.page-creations .cat-tile-thumb img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.22)}
.page-creations .cat-tile-name{font:500 22px/1.15 "DM Sans",sans-serif;letter-spacing:-.025em;color:#1d1e1e}
.page-creations .cat-tile-name::before,.page-creations .cat-tile-name::after{font-weight:300;color:var(--tile-bracket,#77797a)}
.page-creations .cat-tile-name::before{content:"[ "}
.page-creations .cat-tile-name::after{content:" ]"}
.page-creations .cat-tile-desc{margin-top:8px;padding-right:38px;font:400 13.5px/1.55 "DM Sans",sans-serif;color:#555857}
.page-creations .cat-tile-go{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:32px;height:32px;border:1px solid #15151526;border-radius:50%;color:#2a2b2b;background:#ffffff8c;transition:background-color .25s,border-color .25s,color .25s}
.page-creations .cat-tile-go svg{width:15px;height:15px}
.page-creations .collection-navigation.cat-intro nav a.cat-tile:hover,.page-creations .collection-navigation.cat-intro nav a.cat-tile:focus-visible{
 color:#1f2020;transform:none;text-shadow:none;animation:none;border-color:var(--tile-line,#15151538);box-shadow:0 0 0 4px #ffffff80,0 0 28px var(--tile-glow,#e7e7e5);
}
.page-creations .collection-navigation.cat-intro nav a.cat-tile:hover .cat-tile-go,.page-creations .collection-navigation.cat-intro nav a.cat-tile:focus-visible .cat-tile-go{background:#1d1e1e;border-color:#1d1e1e;color:#f4f4f2}
.page-creations .collection-navigation.cat-intro nav a.cat-tile:focus-visible{outline:2px solid #555b5d;outline-offset:3px;border-radius:22px}
/* Tile materials: small versions of each header. */
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="cooling"]{--tile-ring:#e9f0f4;--tile-line:#8fb7cc;--tile-glow:#d7edf9;--tile-bracket:#6f8fa2;background:linear-gradient(165deg,#eef4f7,#e5eef2);border-color:#ffffffcc;box-shadow:inset 0 0 0 1px #ffffff,inset 0 0 22px #ffffffd9}
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="cooling"]::before{
 background:radial-gradient(60% 50% at 100% 0%,#ffffffe6 0%,#ffffff00 70%),radial-gradient(50% 45% at 0% 100%,#ffffffcc 0%,#ffffff00 70%),radial-gradient(40% 30% at 100% 100%,#d4e8f3 0%,#d4e8f300 70%);
}
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="cooling"]:hover{box-shadow:inset 0 0 0 1px #fff,inset 0 0 22px #ffffffd9,0 0 0 4px #ffffff80,0 0 28px #d7edf9}
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="gpu-supports"]{--tile-ring:#eeeeec;--tile-bracket:#6c7176;--thumb-radius:6px;
 background:linear-gradient(#2224260b 1px,#0000 1px) -1px -1px/16px 16px,linear-gradient(90deg,#2224260b 1px,#0000 1px) -1px -1px/16px 16px,#eeeeec}
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="gpu-supports"] .cat-tile-meta{font-variant-numeric:tabular-nums}
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="desk"]{--tile-ring:#f4eee6;--tile-line:#c9ad86;--tile-glow:#f4e4cb;--tile-bracket:#9a8467;--thumb-radius:18px;
 background:radial-gradient(90% 80% at 0% 0%,#fbf0de 0%,#fbf0de00 70%),linear-gradient(170deg,#f6f1ea,#f1ebe2)}
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="on-the-go"]{--tile-ring:#efeeeb;--thumb-extra:inset 0 -3px 0 #1515150f}
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="on-the-go"]::after{inset:7px;border:1.5px dashed #2929292b;border-radius:16px}

/* ---------- [creations] hero, a size up (owner 2026-10-07). The startup mark measures the hero live, so the
   loading handoff scales into the bigger wordmark unchanged. ---------- */
.page-creations .page-hero{padding-top:clamp(150px,13vw,230px)!important;padding-bottom:clamp(80px,8vw,150px)!important;min-height:min(74vh,820px)}
.page-creations .page-hero .creations-hero-mark{font-size:clamp(56px,10.2vw,176px)}
.page-creations .page-hero .creations-hero-brand>.creations-parent{margin-top:20px}
.page-creations .page-hero .creations-hero-brand>.creations-parent .creations-parent-name{font-size:clamp(17px,1.4vw,22px)}
.page-creations .creations-hero-content .creations-hero-tagline{font-size:clamp(32px,3.5vw,58px)}
.page-creations .creations-hero-content p{font-size:clamp(15px,1.1vw,17.5px);max-width:46ch}
@media (min-width:960px){.page-creations .creations-hero-content{flex-basis:clamp(440px,42vw,700px)}}
@media (max-width:959px) and (min-width:761px){.page-creations .page-hero{min-height:0}}

/* ---------- Laptops and tablets ---------- */
@media (max-width:1100px){
 .page-creations .cat-head[data-cat="desk"] .cat-designs-wrap{margin-top:30px}
 .page-creations .cat-head[data-cat="desk"] .cat-designs-wrap::after{display:none}
 .page-creations .cat-titleblock{right:40px;bottom:10px}
 .page-creations .cat-head[data-cat="on-the-go"]{--ring-x:calc(100% - 34px);--ring-y:34px;--ring-s:.72}
 .page-creations .cat-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "title" "lede" "actions" "designs";grid-template-rows:none}
 .page-creations .cat-head .cat-designs-wrap{align-self:stretch;margin-top:28px;padding:22px 0 0;border-left:0;border-top:1px solid var(--head-rule)}
 .page-creations .cat-designs,.page-creations .cat-designs[data-size="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
 .page-creations .cat-designs[data-size="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-creations .cat-intro nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- Phones ---------- */
@media (max-width:760px){
 .page-creations .cat-head{margin:0 0 22px;padding:30px 22px 24px;border-radius:22px}
 .page-creations .cat-head>h2{font-size:clamp(36px,10.4vw,46px);gap:.12em}
 .page-creations .cat-head .cat-eyebrow{margin-bottom:12px;font-size:10.5px}
 .page-creations .cat-head .cat-lede{margin-top:14px;font-size:15px;line-height:1.62;max-width:none}
 .page-creations .cat-compare{margin-top:18px}
 .page-creations .cat-head .cat-designs-wrap{margin:22px -22px 0;padding:18px 0 0;border-top:1px solid var(--head-rule)}
 .page-creations .cat-head .cat-designs-title{margin:0 22px 12px}
 .page-creations .cat-designs,.page-creations .cat-designs[data-size="3"]{
  display:flex;gap:10px;margin:0;padding:2px 22px 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:22px;scrollbar-width:none;
 }
 .page-creations .cat-designs::-webkit-scrollbar{display:none}
 .page-creations .cat-designs li{flex:none;width:92px;scroll-snap-align:start}
 .page-creations .cat-design,.page-creations .cat-designs[data-size="3"] .cat-design{flex-direction:column;align-items:flex-start;gap:8px;padding:0;border:0;border-radius:0;background:none!important;box-shadow:none!important}
 .page-creations .cat-design-thumb{width:92px;height:92px;border-radius:var(--thumb-radius-phone,16px)}
 .page-creations .cat-head[data-cat="gpu-supports"]{--thumb-radius-phone:8px}
 .page-creations .cat-head[data-cat="desk"]{--thumb-radius-phone:22px}
 .page-creations .cat-design-name{font-size:12.5px;line-height:1.3;color:#3a3c3b}
 .page-creations .cat-head[data-cat="on-the-go"]::after{inset:8px;border-radius:16px;border-width:2px}
 .page-creations .cat-screw.is-top-left{left:1px;top:1px}.page-creations .cat-screw.is-top-right{right:1px;top:1px}.page-creations .cat-screw.is-bottom-left{left:1px;bottom:1px}.page-creations .cat-screw.is-bottom-right{right:1px;bottom:1px}
 .page-creations .cat-screw svg{width:13px;height:13px}
 .page-creations .cat-head[data-cat="gpu-supports"]::after{background-size:13px 13px;background-position:left 11px top 11px,right 11px top 11px,left 11px bottom 11px,right 11px bottom 11px}

 .page-creations .collection-navigation.cat-intro{margin-bottom:56px;padding-top:28px}
 .page-creations .cat-intro .collection-statement .creations-intro{font-size:clamp(34px,10vw,44px);padding:12px 16px 14px;margin-left:-16px}
 .page-creations .cat-intro .creations-intro::before,.page-creations .cat-intro .creations-intro::after{width:12px;height:12px}
 .page-creations .cat-ruler{display:none}
 .page-creations .cat-intro nav{margin-top:26px}
 .page-creations .page-hero{min-height:0;padding-top:150px!important;padding-bottom:64px!important}
 .page-creations .page-hero .creations-hero-mark{font-size:clamp(46px,12.6vw,74px)}
 .page-creations .cat-head[data-cat="desk"] .cat-designs-wrap{margin:22px -8px 0;padding:18px 0 14px}
 .page-creations .cat-head[data-cat="desk"] .cat-designs-title{margin:0 18px 12px}
 .page-creations .cat-head[data-cat="desk"] .cat-designs{padding:2px 18px 6px;scroll-padding-inline:18px}
 .page-creations .cat-head[data-cat="desk"] .cat-design-name{color:#ece7df}
 .page-creations .cat-titleblock{right:auto;left:40px;bottom:10px;font-size:8.5px}
 .page-creations .cat-head[data-cat="desk"]{--mug-x:86%;--mug-y:7%}
 .page-creations .cat-titleblock span{padding:4px 6px}
 .page-creations .cat-titleblock span:nth-child(n+3){display:none}
 .page-creations .cat-head[data-cat="gpu-supports"]{padding-bottom:46px}
 .page-creations .cat-head[data-cat="gpu-supports"] .cat-lede{margin-top:42px}
 .page-creations .cat-head[data-cat="gpu-supports"] .cat-eyebrow{padding:6px 18px 5px}
 .page-creations .cat-head[data-cat="on-the-go"]{--ring-x:calc(100% - 26px);--ring-y:25px;--ring-s:.52;--eye:.72}
 .page-creations .cat-keyring .kr-swing{animation-name:kr-swing-s}
 .page-creations .cat-intro-sub{font-size:15px}
 .page-creations .cat-intro-eyebrow span:first-child{display:none}
 .page-creations .cat-intro nav{gap:10px;margin-top:24px}
 .page-creations .collection-navigation.cat-intro nav a.cat-tile{padding:14px 14px 16px;border-radius:18px}
 .page-creations .cat-tile-meta{font-size:10px;letter-spacing:.12em}
 .page-creations .cat-tile-thumbs{margin:14px 0 12px}
 .page-creations .cat-tile-thumb{width:44px;height:44px;border-radius:calc(var(--thumb-radius,13px) * .8)}
 .page-creations .cat-tile-thumb+.cat-tile-thumb{margin-left:-10px}
 .page-creations .cat-tile-name{font-size:17px;padding-right:0}
 .page-creations .cat-tile-name::before{content:"["}
 .page-creations .cat-tile-name::after{content:"]"}
 .page-creations .cat-tile-desc,.page-creations .cat-tile-go{display:none}
 .page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="on-the-go"]::after{inset:5px;border-radius:14px}
}
@media (max-width: 0px){
 .page-creations .cat-head[data-cat="cooling"]::after{animation:none}
 .page-creations .cat-head h2 .category-silver-bracket{animation:none}
}

/* ---------- Inside the build as a full engineering drawing sheet (category-headers-v3.js, owner 2026-10-08) ---------- */
.page-creations .cat-head[data-cat="gpu-supports"].is-sheet{
 --draw:#2a2d31;--paper:#f2f2ef;
 grid-template-columns:minmax(0,1fr) minmax(380px,1fr);
 grid-template-areas:"eyebrow bom" "title bom" "lede bom" "actions bom" "views views";
 grid-template-rows:auto auto auto 1fr auto;
 padding:56px 62px 92px 66px;
}
.page-creations .cat-head[data-cat="gpu-supports"].is-sheet::before{
 background:
  linear-gradient(#2224261c 1px,#0000 1px) -1px -1px/80px 80px,
  linear-gradient(90deg,#2224261c 1px,#0000 1px) -1px -1px/80px 80px,
  linear-gradient(#2224260c 1px,#0000 1px) -1px -1px/16px 16px,
  linear-gradient(90deg,#2224260c 1px,#0000 1px) -1px -1px/16px 16px,
  var(--paper);
 box-shadow:inset 0 0 0 1px #2224262e;
 -webkit-mask-image:none;mask-image:none;
}
/* the zoned drawing frame */
.page-creations .dw-frame{position:absolute;inset:8px;z-index:0;border:1.5px solid #2a2d3199;border-radius:8px;pointer-events:none}
.page-creations .dw-frame::after{content:"";position:absolute;inset:18px;border:1px solid #2a2d3166}
.page-creations .dw-z{position:absolute;display:flex;font:500 9.5px/1 "DM Sans",sans-serif;letter-spacing:.08em;color:#4a4e53;font-variant-numeric:tabular-nums}
.page-creations .dw-z i{flex:1;display:grid;place-items:center;font-style:normal;border-left:1px solid #2a2d3159}
.page-creations .dw-z i:first-child{border-left:0}
.page-creations .dw-top,.page-creations .dw-bottom{left:36px;right:36px;height:18px}
.page-creations .dw-top{top:0}.page-creations .dw-bottom{bottom:0}
.page-creations .dw-left,.page-creations .dw-right{top:36px;bottom:36px;width:18px;flex-direction:column}
.page-creations .dw-left{left:0}.page-creations .dw-right{right:0}
.page-creations .dw-left i,.page-creations .dw-right i{border-left:0;border-top:1px solid #2a2d3159}
.page-creations .dw-left i:first-child,.page-creations .dw-right i:first-child{border-top:0}
.page-creations .is-sheet .cat-screw.is-top-left{left:0;top:0}.page-creations .is-sheet .cat-screw.is-top-right{right:0;top:0}
.page-creations .is-sheet .cat-screw.is-bottom-left{left:0;bottom:0}.page-creations .is-sheet .cat-screw.is-bottom-right{right:0;bottom:0}
/* the heading's height dimension and datum */
.page-creations .dw-hdim{position:absolute;z-index:1;width:14px;pointer-events:none;color:var(--draw);transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .3s,opacity .6s ease .3s}
.page-creations .dw-hdim::before{content:"";position:absolute;left:7px;top:0;bottom:0;border-left:1px solid currentColor}
.page-creations .dw-hdim .cat-dim-ext{position:absolute;left:0;width:26px;height:0;top:auto;border:0;border-top:1px solid currentColor;opacity:.7}
.page-creations .dw-hdim .cat-dim-ext:first-child{top:0}
.page-creations .dw-hdim .cat-dim-ext:nth-child(2){bottom:0;right:auto}
.page-creations .dw-hdim .cat-dim-arrow{position:absolute;left:3px;width:8px;height:11px;background:currentColor}
.page-creations .dw-hdim .cat-dim-arrow.is-t{top:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.page-creations .dw-hdim .cat-dim-arrow.is-b{bottom:0;top:auto;clip-path:polygon(0 0,100% 0,50% 100%)}
.page-creations .dw-hval{position:absolute;left:7px;top:50%;transform:translate(-50%,-50%) rotate(-90deg);padding:2px 7px;background:var(--paper);border:1px solid #2a2d3159;border-radius:2px;white-space:nowrap;font:500 10.5px/1.2 "DM Sans",sans-serif;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.cat-js .page-creations .cat-head[data-cat="gpu-supports"]:not(.is-in) .dw-hdim{transform:scaleY(0);opacity:0}
.page-creations .dw-datum{position:absolute;z-index:1;display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--draw);background:var(--paper);pointer-events:none;font:600 10px/1 "DM Sans",sans-serif;color:var(--draw)}
.page-creations .dw-datum::before{content:"";position:absolute;left:3px;top:-8px;width:10px;height:7px;background:var(--draw);clip-path:polygon(50% 100%,0 0,100% 0)}
.page-creations .dw-datum b{font-weight:600}
/* the parts list (bill of materials) */
.page-creations .is-sheet .cat-designs-wrap.dw-bom{grid-area:bom;align-self:start;margin:4px 0 0;padding:0;border:1.5px solid #2a2d3199;border-radius:3px;background:#f7f7f5ee;box-shadow:0 1px 0 #fff}
.page-creations .dw-bom .cat-designs-title{margin:0;padding:9px 12px 8px;border-bottom:1.5px solid #2a2d3199;font:600 11px/1 "DM Sans",sans-serif;letter-spacing:.16em;color:#2a2d31;background:linear-gradient(#ececea,#e4e4e2)}
.page-creations .dw-bom-head,.page-creations .dw-bom .cat-design{display:grid;grid-template-columns:48px 48px minmax(0,1.3fr) 96px minmax(0,1fr);align-items:center}
.page-creations .cat-head .dw-bom-head{width:100%;max-width:none;box-sizing:border-box;margin:0;border-bottom:1px solid #2a2d3166;font:500 9.5px/1 "DM Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#4a4e53}
.page-creations .dw-bom-head span{padding:8px 10px}
.page-creations .dw-bom-head span:nth-child(2){grid-column:span 2}
.page-creations .dw-bom-head span+span,.page-creations .dw-bom .cat-design>*+*:not(.cat-design-name){border-left:1px solid #2a2d3133}
.page-creations .dw-bom .cat-designs{display:block;margin:0;padding:0}
.page-creations .dw-bom .cat-designs li+li{border-top:1px solid #2a2d3133}
.page-creations .dw-bom .cat-design{gap:0;min-height:54px;padding:0;border:0;border-radius:0;align-self:stretch}
.page-creations .dw-bom .cat-design>*{align-self:stretch;display:flex;align-items:center;padding:6px 10px}
.page-creations .dw-bom .cat-design-thumb{width:auto;height:auto;padding:6px 4px 6px 8px;border-radius:0;background:none;box-shadow:none;overflow:visible}
.page-creations .dw-bom .cat-design-thumb img{width:34px;height:34px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px #2a2d3126;transform:none;object-fit:cover}
.page-creations .dw-bom .cat-design-name{font:500 13.5px/1.25 "DM Sans",sans-serif;color:#1f2124}
.page-creations .dw-no{justify-content:center}
.page-creations .dw-no{font:600 11px/1 "DM Sans",sans-serif;color:var(--draw)}
.page-creations .dw-no::before{content:"";position:absolute}
.page-creations .dw-bom .dw-no{position:relative}
.page-creations .dw-bom .dw-no::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:1.3px solid var(--draw);border-radius:50%}
.page-creations .dw-var{font:500 12px/1.2 "DM Sans",sans-serif;color:#33363a;font-variant-numeric:tabular-nums}
.page-creations .dw-note{font:400 12.5px/1.35 "DM Sans",sans-serif;color:#4a4e53}
.page-creations .dw-bom .cat-design:hover,.page-creations .dw-bom .cat-design:focus-visible{background:#fff;box-shadow:inset 3px 0 0 var(--draw)}
.page-creations .dw-bom .cat-design:focus-visible{outline:2px solid var(--draw);outline-offset:-2px}
/* detail views, balloons on leaders, scale bar */
.page-creations .dw-views{grid-area:views;position:relative;z-index:1;display:flex;align-items:flex-end;gap:22px;margin-top:34px;padding-right:330px}
.page-creations .dw-view{position:relative;flex:0 1 210px;margin:0}
.page-creations .dw-view img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;padding:8px;box-sizing:border-box;border:1px solid #2a2d3166;background:#f7f7f5cc;filter:grayscale(1) contrast(1.25);mix-blend-mode:multiply}
.page-creations .dw-view figcaption{margin-top:7px;font:600 10px/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#2a2d31}
.page-creations .dw-view figcaption span{font-weight:400;color:#5d6166;letter-spacing:.1em}
.page-creations .dw-cm{position:absolute;inset:0 0 auto;aspect-ratio:4/3;pointer-events:none;
 background:linear-gradient(#2a2d3180,#2a2d3180) center/1px 46% no-repeat,linear-gradient(90deg,#2a2d3180,#2a2d3180) center/46% 1px no-repeat;opacity:.55}
.page-creations .dw-ball{position:absolute;left:var(--x);top:var(--y);z-index:2;display:grid;place-items:center;width:20px;height:20px;margin:-10px 0 0 -10px;border:1.3px solid var(--draw);border-radius:50%;background:var(--paper);font:600 10.5px/1 "DM Sans",sans-serif;color:var(--draw)}
.page-creations .dw-ball::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:hypot(var(--lx),var(--ly));height:1px;background:var(--draw);transform-origin:0 50%;transform:rotate(atan2(var(--ly),var(--lx)))}
.page-creations .dw-ball::after{content:"";position:absolute;left:calc(50% + var(--lx) - 2.5px);top:calc(50% + var(--ly) - 2.5px);width:5px;height:5px;border-radius:50%;background:var(--draw)}
.page-creations .dw-scale{flex:none;display:grid;gap:5px;margin:0 0 4px 6px;color:var(--draw)}
.page-creations .dw-scale-bar{display:flex;width:113.4px;height:7px;border:1px solid var(--draw)}
.page-creations .dw-scale-bar i{flex:1}
.page-creations .dw-scale-bar i:nth-child(odd){background:var(--draw)}
.page-creations .dw-scale-n{position:relative;display:flex;justify-content:space-between;width:calc(113.4px + 34px);margin-left:-3px;font:500 9.5px/1 "DM Sans",sans-serif;font-variant-numeric:tabular-nums}
.page-creations .dw-scale-n b{font-weight:500}
.page-creations .dw-scale-t{font:500 9px/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5d6166}
.page-creations .is-sheet .cat-titleblock{right:40px;bottom:36px}
.page-creations .is-sheet .cat-eyebrow{margin-bottom:22px}
@media (max-width:1100px){
 .page-creations .cat-head[data-cat="gpu-supports"].is-sheet{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "title" "lede" "actions" "bom" "views";grid-template-rows:none;padding:52px 46px 96px 60px}
 .page-creations .is-sheet .cat-designs-wrap.dw-bom{margin-top:28px}
 .page-creations .dw-views{padding-right:0;flex-wrap:wrap}
 .page-creations .is-sheet .cat-titleblock{left:auto;right:36px;bottom:34px}
}
@media (max-width:760px){
 .page-creations .cat-head[data-cat="gpu-supports"].is-sheet{padding:44px 26px 108px 46px}
 .page-creations .dw-top i:nth-child(n+5),.page-creations .dw-bottom i:nth-child(n+5),.page-creations .dw-left i:nth-child(n+3),.page-creations .dw-right i:nth-child(n+3){display:none}
 .page-creations .dw-top,.page-creations .dw-bottom{left:30px;right:30px;height:15px}
 .page-creations .dw-left,.page-creations .dw-right{top:30px;bottom:30px;width:15px}
 .page-creations .dw-frame::after{inset:15px}
 .page-creations .dw-z{font-size:8.5px}
 .page-creations .is-sheet .cat-designs-wrap.dw-bom{margin:24px 0 0;padding:0;border-top:1.5px solid #2a2d3199}
 .page-creations .dw-bom .cat-designs-title{margin:0}
 .page-creations .dw-bom-head{display:none}
 .page-creations .dw-bom .cat-designs{display:block;overflow:visible;padding:0}
 .page-creations .dw-bom .cat-designs li{width:auto}
 .page-creations .dw-bom .cat-design{grid-template-columns:38px 44px minmax(0,1fr);grid-template-areas:"no th name" "no th meta";flex-direction:row;align-items:center;min-height:60px}
 .page-creations .dw-bom .cat-design>*{padding:4px 8px}
 .page-creations .dw-bom .dw-no{grid-area:no;grid-row:1/3}
 .page-creations .dw-bom .cat-design-thumb{grid-area:th;grid-row:1/3;width:auto;height:auto;padding:4px}
 .page-creations .dw-bom .cat-design-name{grid-area:name;font-size:13.5px;padding-bottom:0;color:#1f2124}
 .page-creations .dw-bom .cat-design>.dw-var{display:block;grid-column:3;grid-row:2;padding-top:2px;border:0;font-size:12px;line-height:1.35}
 .page-creations .dw-bom .cat-design>.cat-design-name{align-self:end}
 .page-creations .cat-head[data-cat="gpu-supports"].is-sheet>h2{font-size:clamp(28px,8.2vw,36px)}
 .page-creations .dw-bom .cat-design>.dw-note{display:none}
 .page-creations .dw-bom .cat-design>*+*:not(.cat-design-name){border-left:0}
 .page-creations .dw-var::after{content:" · " attr(data-note);font-weight:400;color:#4a4e53}
 .page-creations .dw-views{gap:12px;margin-top:24px}
 .page-creations .dw-view{flex:1 1 calc(50% - 6px)}
 .page-creations .dw-scale{margin:6px 0 0}
 .page-creations .is-sheet .cat-titleblock{left:46px;right:auto;bottom:34px}
 .page-creations .dw-hval{font-size:9px;padding:2px 5px}
}

/* ---------- The page follows the category in view (category-headers-v3.js, owner 2026-10-08) ---------- */
.page-creations #designs{overflow:clip}
.page-creations .cat-env{position:sticky;top:0;z-index:0;display:block;height:100vh;margin:0 0 -100vh calc(50% - 50vw);width:100vw;pointer-events:none}
.has-env .page-creations #designs>:not(.cat-env):not(.cnav-rail):not(.cnav-bar){position:relative;z-index:1}
.page-creations .cat-env-l{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;will-change:opacity}
.page-creations .cat-env-l.is-on{opacity:1}
.page-creations .cat-env-l::before,.page-creations .cat-env-l::after{content:"";position:absolute;inset:0;pointer-events:none}
/* Cooling: cold air, frost creeping in at the page edges */
.page-creations .cat-env-l[data-cat="cooling"]{background:radial-gradient(16% 75% at 0% 50%,#c9e1f0,#c9e1f000 100%),radial-gradient(16% 75% at 100% 50%,#c9e1f0,#c9e1f000 100%),radial-gradient(60% 9% at 50% 0%,#dcecf5,#dcecf500 100%)}
.page-creations .cat-env-l[data-cat="cooling"]::before{
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.2 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
 -webkit-mask-image:linear-gradient(90deg,#000,#0000 6%,#0000 94%,#000);mask-image:linear-gradient(90deg,#000,#0000 6%,#0000 94%,#000)}
/* (The frost and ice in the Cooling header and results tile paint the plain page colour around themselves, so the
   cold stays in the page edges and gutters, never behind them.) */
/* Inside the build: graph paper behind the cards, ruler ticks and dimension marks in the gutters */
.page-creations .cat-env-l[data-cat="gpu-supports"]{background:
 linear-gradient(#22242614 1px,#0000 1px) -1px -1px/80px 80px,linear-gradient(90deg,#22242614 1px,#0000 1px) -1px -1px/80px 80px,
 linear-gradient(#2224260a 1px,#0000 1px) -1px -1px/16px 16px,linear-gradient(90deg,#2224260a 1px,#0000 1px) -1px -1px/16px 16px,#f0f0ee}
.page-creations .cat-env-l[data-cat="gpu-supports"]::before{
 background:
  repeating-linear-gradient(#0000 0 15px,#2a2d3159 15px 16px) 6px 0/10px 100% no-repeat,
  repeating-linear-gradient(#0000 0 79px,#2a2d3199 79px 80px) 0 0/18px 100% no-repeat,
  repeating-linear-gradient(#0000 0 15px,#2a2d3159 15px 16px) right 6px top 0/10px 100% no-repeat,
  repeating-linear-gradient(#0000 0 79px,#2a2d3199 79px 80px) right 0 top 0/18px 100% no-repeat}
.page-creations .cat-env-l[data-cat="gpu-supports"]::after{opacity:.55;background:
  linear-gradient(#2a2d31,#2a2d31) left 26px top 22%/1px 120px no-repeat,linear-gradient(90deg,#2a2d31,#2a2d31) left 22px top 22%/9px 1px no-repeat,linear-gradient(90deg,#2a2d31,#2a2d31) left 22px top calc(22% + 119px)/9px 1px no-repeat,
  linear-gradient(#2a2d31,#2a2d31) right 26px top 64%/1px 160px no-repeat,linear-gradient(90deg,#2a2d31,#2a2d31) right 22px top 64%/9px 1px no-repeat,linear-gradient(90deg,#2a2d31,#2a2d31) right 22px top calc(64% + 159px)/9px 1px no-repeat}
/* Desk & setup: lamp light on oak */
.page-creations .cat-env-l[data-cat="desk"]{background:
 radial-gradient(55% 60% at 22% 0%,#fff3dcf2,#fff3dc00 70%),
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2600' height='1500' preserveAspectRatio='none'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .11' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .36 0 0 0 0 .2 0 0 0 .38 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") 50% 50%/2600px 1500px no-repeat,
 linear-gradient(175deg,#f3ebdf,#eadfcf)}
.page-creations .cat-env-l[data-cat="desk"]::after{background:radial-gradient(70% 50% at 50% 110%,#7a5a3626,#0000 70%)}
/* Everyday carry: soft woven fabric, warm neutral, stitched seams at the edges */
.page-creations .cat-env-l[data-cat="on-the-go"]{background:repeating-linear-gradient(0deg,#1515150a 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#ffffff59 0 1px,#0000 1px 3px),linear-gradient(170deg,#f1efea,#e9e6df)}
.page-creations .cat-env-l[data-cat="on-the-go"]::before{inset:0 18px;border-left:2px dashed #2c2c2c33;border-right:2px dashed #2c2c2c33}
/* Per-category tints (owner 2026-10-08: no seams between categories; the ambient crossfade carries the change). */
.has-env .page-creations .product-group{position:relative;--g-accent:#9a9c9d}
.has-env .page-creations #cooling{--g-accent:#8fbcd6;--g-shadow:#5b8fae47;--g-line:#c8dfec}
.has-env .page-creations #gpu-supports{--g-prev:#8fbcd6;--g-accent:#55595e;--g-shadow:#2a2d3140;--g-line:#2a2d3126}
.has-env .page-creations #desk{--g-prev:#55595e;--g-accent:#c19a66;--g-shadow:#7a5a3647;--g-line:#c9ad8659}
.has-env .page-creations #on-the-go{--g-prev:#c19a66;--g-accent:#8a8986;--g-shadow:#2b2b2a38;--g-line:#2929291f}
/* Card surroundings take the environment's light; content, hover halo and layout are unchanged */
.has-env .page-creations .product-group .model-card{box-shadow:0 18px 36px -22px var(--g-shadow,#0000),0 0 0 1px var(--g-line,#0000)}
/* Accents: the sticky bin bar, the rail and the header pick up the tint */
html[data-env]{--env-accent:#9a9c9d;--env-bar:#f6f6f4e6}
html[data-env="cooling"]{--env-accent:#8fbcd6;--env-bar:#ecf3f7eb}
html[data-env="gpu-supports"]{--env-accent:#55595e;--env-bar:#efefede6}
html[data-env="desk"]{--env-accent:#c19a66;--env-bar:#f5ecdfeb}
html[data-env="on-the-go"]{--env-accent:#8a8986;--env-bar:#efede8eb}
.page-creations #mainNav{transition:box-shadow .8s ease}
html[data-env] .page-creations #mainNav{box-shadow:0 2px 0 var(--env-accent)}
.cnav-bar{transition:background-color .8s ease,border-color .8s ease,opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
.cnav-in-catalog:not(.cnav-wide) .cnav-bar{transition:background-color .8s ease,border-color .8s ease,opacity .28s ease,transform .28s ease,visibility 0s}
html[data-env] .cnav-bar{background:var(--env-bar);border-bottom-color:var(--env-accent)}
html[data-env] .cnav-rail .cnav-eyebrow{color:var(--env-accent);transition:color .8s}
@media (max-width:760px){
 .page-creations .cat-env-l[data-cat="cooling"]::before{-webkit-mask-image:linear-gradient(90deg,#000,#0000 7%,#0000 93%,#000);mask-image:linear-gradient(90deg,#000,#0000 7%,#0000 93%,#000)}
 .page-creations .cat-env-l[data-cat="gpu-supports"]::after{display:none}
 .page-creations .cat-env-l[data-cat="gpu-supports"]::before{opacity:.6}
 .page-creations .cat-env-l[data-cat="on-the-go"]::before{inset:0 8px}
}

/* ---------- End of [creations] (owner 2026-10-08): "In real builds" strip, then the workshop as the last chapter ---------- */
.page-creations .real-builds,.page-creations .workshop-band{background:var(--page-surface,#f4f4f2);color:#1f2020}
.page-creations .real-builds{padding-top:clamp(64px,7vw,110px);padding-bottom:clamp(40px,4vw,64px);scroll-margin-top:105px}
.page-creations .rb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 26px}
.page-creations .rb-eyebrow,.page-creations .wb-eyebrow{display:flex;align-items:center;margin:0 0 14px;font:500 11.5px/1.2 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5b5e5d}
.page-creations .rb-eyebrow span:first-child::after,.page-creations .wb-eyebrow span:first-child::after{content:"";display:inline-block;width:26px;height:1px;margin:0 12px;vertical-align:middle;background:currentColor;opacity:.45}
.page-creations .real-builds h2,.page-creations .workshop-band h2{display:block;margin:0;font:400 clamp(38px,4vw,62px)/1.04 "DM Sans",sans-serif;letter-spacing:-.045em;color:#1f2020}
.page-creations .rb-b,.page-creations .wb-b{display:inline-block;margin:0 .06em;color:#2c2c2b;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #b3b3aeaa)}
.page-creations .rb-lede{max-width:58ch;margin:14px 0 0;font:400 16px/1.65 "DM Sans",sans-serif;color:#4b4e4d}
.page-creations .rb-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:#1f2020;font:500 14px/1 "DM Sans",sans-serif;text-decoration:underline;text-decoration-color:#1f202055;text-underline-offset:5px}
.page-creations .rb-all svg{width:15px;height:15px}
.page-creations .rb-all:hover,.page-creations .rb-all:focus-visible{text-decoration-color:#1f2020}
.page-creations .rb-strip{list-style:none;margin:0 calc(-1 * var(--rb-pad,0px));padding:4px var(--rb-pad,0px) 18px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,23vw,310px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--rb-pad,0px);scrollbar-width:thin;scrollbar-color:#15151533 #0000}
.page-creations .rb-strip li{margin:0;scroll-snap-align:start;min-width:0}
.page-creations .rb-card{display:flex;flex-direction:column;height:100%;margin:0;border:1px solid #1515151a;border-radius:16px;background:#fafaf8;overflow:hidden}
.page-creations .rb-photo{display:block;aspect-ratio:4/3;overflow:hidden;background:#e9e8e4}
.page-creations .rb-photo img{display:block;width:100%;height:100%;object-fit:cover}
.page-creations .rb-card blockquote{flex:1;margin:0;padding:16px 18px 4px;font:400 14.5px/1.55 "DM Sans",sans-serif;color:#2b2d2c}
.page-creations .rb-card blockquote p{margin:0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.page-creations .rb-card blockquote p::before{content:"\201C"}
.page-creations .rb-card blockquote p::after{content:"\201D"}
/* Every quote holds its five lines, so names line up across the strip even when a design pill wraps (2026-10-09). */
.page-creations .rb-card blockquote{flex:none}
.page-creations .rb-card blockquote p{min-height:calc(5 * 1.55em)}
.page-creations .rb-card figcaption{flex:1;align-content:start}
.page-creations .rb-card figcaption{display:grid;gap:10px;padding:12px 18px 16px}
.page-creations .rb-who{display:grid;justify-items:start;gap:4px;font:400 13px/1.3 "DM Sans",sans-serif}
.page-creations .rb-who strong{font-weight:600;color:#1f2020}
.page-creations .rb-who small{display:block;font-size:11.5px;line-height:1.45;color:#5d605f}
.page-creations .rb-who small svg{display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-1px;color:#3d7a52}
.page-creations .rb-who time{white-space:nowrap}
.page-creations .rb-design{display:inline-block;width:fit-content;max-width:100%;min-height:36px;padding:10px 14px;border:1px solid #15151524;border-radius:18px;color:#1f2020;text-decoration:none;font:500 12.5px/1.3 "DM Sans",sans-serif;text-wrap:balance;transition:border-color .2s,background-color .2s}
.page-creations .rb-design .rb-b{font-weight:300;filter:none;color:#77797a}
.page-creations .rb-design .rb-b{display:inline;margin:0 .35em 0 0}
.page-creations .rb-design .rb-b:last-of-type{margin:0 0 0 .35em}
.page-creations .rb-design svg{display:inline-block;width:13px;height:13px;margin-left:6px;vertical-align:-2px}
.page-creations .rb-design:hover,.page-creations .rb-design:focus-visible{border-color:#15151566;background:#fff}
.page-creations .rb-design:focus-visible,.page-creations .rb-all:focus-visible{outline:2px solid #1f2020;outline-offset:2px}
/* The workshop (owner 2026-10-08): a rendered loop of the two P2S + AMS 2 Pro and the A1 mini + AMS lite in a concrete studio
   (workshop-film-v1.js). Charcoal band like the footer it leads into; the film is the star, the copy sits under it. */
.page-creations .workshop-band{background:#141414;color:#ece9e3;padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(72px,8vw,128px)}
.page-creations .wb-stage{display:grid;gap:clamp(30px,3.6vw,52px);max-width:1680px;margin:0 auto}
.page-creations .wb-film{position:relative;margin:0;aspect-ratio:2/1;border-radius:18px;overflow:hidden;background:#3b3b3a;box-shadow:0 0 0 1px #ffffff12,0 40px 90px -40px #000}
.page-creations .wb-poster,.page-creations .wb-poster img{display:block;width:100%;height:100%}
.page-creations .wb-poster img{object-fit:cover}
.page-creations .wb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none}
.page-creations .wb-film.is-playing .wb-video{opacity:1}
.page-creations .wb-cap{position:absolute;left:clamp(14px,1.8vw,22px);top:clamp(12px,1.6vw,20px);display:flex;align-items:center;margin:0;padding:0 4px;height:42px;border:1px solid #ffffff2e;border-radius:999px;background:#1515155c;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 #ffffff1f,0 4px 16px #00000029;color:#f4f2ee;font:500 13px/1 "DM Sans",sans-serif;letter-spacing:.02em;pointer-events:none}
.page-creations .wb-unit{display:inline-flex;align-items:baseline;gap:3px;padding:0 12px;white-space:nowrap}
.page-creations .wb-unit+.wb-unit{border-left:1px solid #ffffff2e}
.page-creations .wb-unit b{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.page-creations .wb-unit i{font-style:normal;font-weight:400;color:#f4f2ee8c;margin-right:3px}
.page-creations .wb-film-toggle{position:absolute;top:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);z-index:2;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #ffffff2e;border-radius:50%;background:#1515155c;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:#f4f2ee;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff1f,0 4px 16px #00000029;transition:background-color .2s,border-color .2s}
.page-creations .wb-film-toggle[hidden]{display:none}
.page-creations .wb-film-toggle svg{width:16px;height:16px}
.page-creations .wb-film-toggle .motion-play{display:none;transform:translateX(1px)}
.page-creations .wb-film.is-paused .wb-film-toggle .motion-play{display:block}
.page-creations .wb-film.is-paused .wb-film-toggle .motion-pause{display:none}
.page-creations .wb-film-toggle:hover{background:#151515a6;border-color:#ffffff59}
.page-creations .wb-film-toggle:focus-visible{outline:2px solid #f4f2ee;outline-offset:3px}
.page-creations .wb-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,96px);align-items:start}
.page-creations .wb-copy>.wb-eyebrow{grid-column:1;grid-row:1;color:#a9a6a0}
.page-creations .workshop-band .wb-copy>h2{grid-column:1;grid-row:2/span 3;color:#f3f1ec}
.page-creations .workshop-band .wb-b{color:#f3f1ec;filter:drop-shadow(0 0 2px #0000) drop-shadow(0 0 10px #ffffff4d)}
.page-creations .wb-copy>.wb-lede{grid-column:2;grid-row:2;margin:6px 0 0;font:500 17px/1.4 "DM Sans",sans-serif;color:#e6e3dd}
.page-creations .wb-copy>p:not([class]){grid-column:2;grid-row:3;max-width:56ch;margin:12px 0 0;font:400 16px/1.68 "DM Sans",sans-serif;color:#b8b5af}
.page-creations .wb-copy>.wb-link{grid-column:2;grid-row:4;justify-self:start}
.page-creations .wb-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:22px;padding:0 18px;border:1px solid #f2f1ec;border-radius:999px;background:#f2f1ec;color:#151515;text-decoration:none;font:500 14px/1 "DM Sans",sans-serif;transition:background-color .2s,border-color .2s}
.page-creations .wb-link svg{width:15px;height:15px}
.page-creations .wb-link:hover,.page-creations .wb-link:focus-visible{background:#fff;border-color:#fff}
.page-creations .wb-link:focus-visible{outline:2px solid #f2f1ec;outline-offset:3px}
@media (max-width:1000px){
 .page-creations .wb-copy{grid-template-columns:minmax(0,1fr)}
 .page-creations .wb-copy>*{grid-column:1!important;grid-row:auto!important}
 .page-creations .wb-copy>.wb-lede{margin-top:16px}
}
@media (max-width:760px){
 .page-creations .wb-film{border-radius:12px}
 .page-creations .wb-film-toggle{width:30px;height:30px;top:7px;right:8px}
 .page-creations .wb-cap{left:8px;top:8px;height:28px;padding:0 1px;font-size:10.5px}
 .page-creations .wb-unit{padding:0 8px}
 .page-creations .wb-unit b{font-size:12px}
}
@media (max-width:760px){
 .page-creations .real-builds{--rb-pad:24px;padding-top:56px}
 .page-creations .rb-strip{grid-auto-columns:78vw;gap:12px;scrollbar-width:none}
 .page-creations .rb-strip::-webkit-scrollbar{display:none}
 .page-creations .real-builds h2,.page-creations .workshop-band h2{font-size:clamp(32px,9vw,40px)}
}

/* "In real builds" previous / next (real-builds-v1.js): round frosted buttons beside "All reviews on Etsy"; hidden on phones */
.page-creations .rb-tools{display:flex;align-items:center;gap:18px}
.page-creations .rb-nav{display:flex;gap:8px}
.page-creations .rb-nav[hidden]{display:none}
.page-creations .rb-step{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1px solid #15151526;border-radius:50%;background:#fafaf8cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#1f2020;cursor:pointer;box-shadow:0 1px 0 #fff inset,0 4px 14px #0000000f;transition:background-color .2s,border-color .2s,color .2s,opacity .2s}
.page-creations .rb-step svg{width:18px;height:18px}
.page-creations .rb-step:hover:not(:disabled){background:#fff;border-color:#15151566}
.page-creations .rb-step:focus-visible{outline:2px solid #1f2020;outline-offset:3px}
.page-creations .rb-step:disabled{opacity:.38;cursor:default}
@media (max-width:760px){.page-creations .rb-nav{display:none}}
.page-creations .wb-nw{white-space:nowrap}

/* In real builds strip edges (real-builds-v2.js, 2026-10-09): where more cards sit beyond an edge, that edge fades
   out instead of cutting a card off hard at the page gutter. No fade when nothing is hidden on that side. */
.page-creations .rb-strip[data-more]{--rb-fade:clamp(28px,4vw,56px);-webkit-mask-image:linear-gradient(90deg,var(--rb-l,#000),#000 var(--rb-fade),#000 calc(100% - var(--rb-fade)),var(--rb-r,#000));mask-image:linear-gradient(90deg,var(--rb-l,#000),#000 var(--rb-fade),#000 calc(100% - var(--rb-fade)),var(--rb-r,#000))}
.page-creations .rb-strip[data-more~="start"]{--rb-l:#0000}
.page-creations .rb-strip[data-more~="end"]{--rb-r:#0000}

/* ---------- Made to order (owner 2026-10-10): a shipping box. Corrugated kraft, a printed packing tape that splits
   open when the header comes into view (click to reseal / reopen), a shipping label, the [creations] quality-control
   seal stamped over the gear logo (click to stamp again), box marks, and the designs packed in the box's inner
   compartment. category-headers-v4.js builds the tape, label, seal and marks. Colour-only hovers, no lift. ---------- */
.page-creations{--ink-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E")}
.page-creations .cat-head[data-cat="made-to-order"]{
 --kraft-ink:#3a2816;--kraft-soft:#5b4128;--stamp:#b23a2a;
 --head-ink:#2b1d10;--head-soft:#4e3820;--head-rule:#5b412833;--chip-line:#5b412840;--chip-glow:#f6e8d2;--thumb-radius:6px;
 padding-top:clamp(76px,6.6vw,96px);border-radius:10px;overflow:clip;
}
.page-creations .cat-head[data-cat="made-to-order"]::before{
 background:
  radial-gradient(120% 90% at 50% 0%,#0000 55%,#4a301726 100%),
  repeating-linear-gradient(90deg,#0000 0 6px,#6b4a2612 6px 7px,#0000 7px 11px),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .34 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .26 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E") 0 0/1600px 900px no-repeat,
  linear-gradient(172deg,#d4ae7f,#c39a69 60%,#b98f5e);
 box-shadow:inset 0 0 0 1px #5b41282e,inset 0 -3px 0 #8a633a33;
}
/* the box's top flaps meet in a seam under the tape */
.page-creations .cat-head[data-cat="made-to-order"]::after{inset:0 0 auto;height:clamp(58px,5.4vw,74px);border-radius:0;
 background:linear-gradient(#0000 calc(100% - 2px),#5b412840 calc(100% - 2px)),linear-gradient(90deg,#0000 calc(50% - 1px),#5b412859 calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px))}
.page-creations .cat-head[data-cat="made-to-order"]>h2{color:var(--head-ink);text-shadow:0 1px 0 #f2dcb880}
.page-creations .cat-head[data-cat="made-to-order"] .cat-eyebrow{color:var(--kraft-soft)}
.page-creations .cat-head[data-cat="made-to-order"] .cat-lede{color:var(--head-soft)}
.page-creations .cat-head[data-cat="made-to-order"] .mto-cta{grid-area:actions;align-self:start;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.page-creations .cat-head[data-cat="made-to-order"] .mto-cta a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:8px;border:1px solid #3a281659;color:var(--kraft-ink);text-decoration:none;
 font:500 14px/1 "DM Sans",sans-serif;background:#f3e3c766;transition:background .2s,border-color .2s}
.page-creations .cat-head[data-cat="made-to-order"] .mto-cta a:first-child{background:var(--kraft-ink);border-color:var(--kraft-ink);color:#f7ead4}
.page-creations .cat-head[data-cat="made-to-order"] .mto-cta a:hover{border-color:var(--kraft-ink);background:#f3e3c7b3}
.page-creations .cat-head[data-cat="made-to-order"] .mto-cta a:first-child:hover{background:#2a1c0e}
.page-creations .cat-head[data-cat="made-to-order"] .mto-cta a:focus-visible{outline:2px solid var(--kraft-ink);outline-offset:2px}
/* the designs, packed in the box's inner compartment */
.page-creations .cat-head[data-cat="made-to-order"] .cat-designs-wrap{position:relative;margin-top:clamp(132px,11vw,164px);padding:20px 18px 16px;border:0;border-radius:4px;
 background:repeating-linear-gradient(90deg,#0000 0 6px,#4a30170f 6px 7px,#0000 7px 11px),linear-gradient(#a57b4c,#b48a59 30%,#b88e5d);box-shadow:inset 0 10px 18px -8px #3a281666,inset 0 0 0 1px #3a281626}
.page-creations .cat-head[data-cat="made-to-order"] .cat-designs-wrap::before{content:"";position:absolute;inset:8px;border:1.5px dashed #f6e6cc59;border-radius:3px;pointer-events:none}
.page-creations .cat-head[data-cat="made-to-order"] .cat-designs-title{color:#f6e6cc}
.page-creations .cat-head[data-cat="made-to-order"] .cat-design-name{color:#fbf0dd}
.page-creations .cat-head[data-cat="made-to-order"] .cat-design-thumb{box-shadow:0 0 0 1px #00000033,0 5px 10px -4px #2a1c0e80}
.page-creations .cat-head[data-cat="made-to-order"] .cat-design:hover,.page-creations .cat-head[data-cat="made-to-order"] .cat-design:focus-visible{background:#ffffff1a;border-color:#f6e6cc59}
.page-creations .cat-head[data-cat="made-to-order"] .cat-design:focus-visible{outline-color:#fbf0dd}
/* packing tape: printed, glossy, split down the seam once the box is opened */
.page-creations .mto-tape{position:absolute;left:0;right:0;top:clamp(14px,1.6vw,22px);z-index:2;height:clamp(34px,3vw,42px);margin:0;padding:0;border:0;background:none;cursor:pointer;display:flex}
.page-creations .mto-tape span{flex:1;position:relative;overflow:hidden;
 background:linear-gradient(#ffffff3d,#ffffff00 45%,#00000014),repeating-linear-gradient(90deg,#9a6b37 0 1px,#0000 1px 4px),#b07c43;opacity:.93;
 box-shadow:0 1px 2px #3a28163d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.page-creations .mto-tape span::after{content:attr(data-print);position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;padding:0 14px;
 font:700 11px/1 "DM Sans",sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#3a2816b3}
.page-creations .mto-tape span:last-child::after{justify-content:flex-end}
.page-creations .cat-head[data-cat="made-to-order"].is-in .mto-tape:not(.is-sealed) span:first-child{transform:translateX(-12px) rotate(-1.2deg)}
.page-creations .cat-head[data-cat="made-to-order"].is-in .mto-tape:not(.is-sealed) span:last-child{transform:translateX(12px) rotate(1.2deg)}
.page-creations .mto-tape:focus-visible{outline:2px solid var(--kraft-ink);outline-offset:3px}
/* the shipping label */
.page-creations .mto-label{position:absolute;right:clamp(22px,3vw,56px);top:clamp(80px,6.6vw,96px);z-index:1;width:min(320px,30%);margin:0;padding:14px 16px 12px;border-radius:4px;
 background:#fbf7ef;color:#1e1a14;transform:rotate(1.6deg);box-shadow:0 10px 18px -12px #3a2816a6,0 1px 0 #3a281622;font:400 11.5px/1.4 "DM Sans",sans-serif}
.page-creations .mto-label b{display:block;font:600 10px/1.2 "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#5e5446}
.page-creations .mto-label .mto-row{margin:0 0 8px;padding-bottom:7px;border-bottom:1px dashed #1e1a1440;font-size:13px;color:#1e1a14}
.page-creations .mto-label .mto-bars{height:28px;margin:4px 72px 6px 0;background:repeating-linear-gradient(90deg,#1e1a14 0 2px,#0000 2px 3px,#1e1a14 3px 4px,#0000 4px 7px,#1e1a14 7px 10px,#0000 10px 11px,#1e1a14 11px 12px,#0000 12px 15px)}
.page-creations .mto-label .mto-success{margin:0 72px 0 0;font:600 12px/1.35 "DM Sans",sans-serif;letter-spacing:.02em}
.page-creations .mto-label .mto-success em{font-style:normal;color:var(--stamp)}
/* the [creations] quality-control seal: the gear logo with the red seal stamped over it */
.page-creations .mto-qc{position:absolute;right:-30px;bottom:-62px;width:118px;height:118px;margin:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.page-creations .mto-qc img,.page-creations .bento-qc .qc-seal img{position:absolute;inset:17%;width:66%;height:66%;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.92}
.page-creations .mto-qc svg,.page-creations .bento-qc .qc-seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--stamp,#b23a2a);
 -webkit-mask-image:var(--ink-mask);mask-image:var(--ink-mask);-webkit-mask-size:240px;mask-size:240px;mix-blend-mode:multiply;transform:rotate(-14deg);
 transition:opacity .2s ease,transform .36s cubic-bezier(.2,1.5,.35,1)}
.page-creations .mto-qc svg circle,.page-creations .bento-qc .qc-seal svg circle{fill:none;stroke:currentColor}
.page-creations .mto-qc svg text,.page-creations .bento-qc .qc-seal svg text{fill:currentColor;font:700 15px "DM Sans",sans-serif;letter-spacing:.2em}
.page-creations .mto-qc svg .qc-mid,.page-creations .bento-qc .qc-seal svg .qc-mid{font-size:16px;letter-spacing:.12em}
.cat-js .page-creations .cat-head[data-cat="made-to-order"]:not(.is-in) .mto-qc svg,.page-creations .mto-qc.is-restamp svg{opacity:0;transform:rotate(-14deg) scale(1.5)}
.page-creations .mto-qc:focus-visible{outline:2px solid var(--kraft-ink);outline-offset:4px}
/* box marks: this side up, fragile */
.page-creations .mto-marks{position:absolute;left:clamp(28px,3.4vw,56px);bottom:14px;z-index:0;display:flex;gap:18px;align-items:flex-end;margin:0;color:#3a2816;opacity:.55;pointer-events:none;
 font:700 10px/1 "DM Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase;-webkit-mask-image:var(--ink-mask);mask-image:var(--ink-mask);-webkit-mask-size:300px;mask-size:300px}
.page-creations .mto-marks svg{width:26px;height:30px;display:block}
.page-creations .mto-marks span{display:grid;justify-items:center;gap:5px}
.page-creations .cat-head[data-cat="made-to-order"]{padding-bottom:clamp(64px,5.6vw,80px)}
@media (max-width:1060px){
 .page-creations .mto-label{position:relative;right:auto;top:auto;grid-column:1/-1;width:auto;max-width:360px;margin:26px 0 30px}
 .page-creations .cat-head[data-cat="made-to-order"] .cat-designs-wrap{margin-top:24px}
}
@media (max-width:760px){
 .page-creations .cat-head[data-cat="made-to-order"]{padding-top:72px;padding-bottom:40px}
 .page-creations .mto-label{margin:20px 12px 26px 0;transform:rotate(1deg)}
 .page-creations .mto-qc{width:96px;height:96px;right:-18px;bottom:-40px}
 .page-creations .mto-label .mto-bars,.page-creations .mto-label .mto-success{margin-right:58px}
 .page-creations .cat-head[data-cat="made-to-order"] .cat-designs-wrap{margin:22px -8px 0}
 .page-creations .mto-marks{display:none}
 .page-creations .mto-tape span::after{letter-spacing:.2em;font-size:9.5px}
}
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="made-to-order"]{--tile-ring:#f1e2c8;--tile-line:#c9a273;--tile-glow:#f3dfbd;--tile-bracket:#8a633a;--thumb-radius:6px;
 background:repeating-linear-gradient(90deg,#0000 0 6px,#6b4a260d 6px 7px,#0000 7px 11px),linear-gradient(172deg,#f1e2c8,#ead6b4)}
.page-creations .cat-env-l[data-cat="made-to-order"]{background:repeating-linear-gradient(90deg,#0000 0 6px,#6b4a260a 6px 7px,#0000 7px 11px),linear-gradient(175deg,#f3e9d9,#ecdfca)}
.page-creations .cat-env-l[data-cat="made-to-order"]::before{inset:0 14px;background:linear-gradient(90deg,#b07c4359,#b07c4359) left top/22px 100% no-repeat,linear-gradient(90deg,#b07c4359,#b07c4359) right top/22px 100% no-repeat}
.has-env .page-creations #made-to-order{--g-prev:#8a8986;--g-accent:#b18656;--g-shadow:#6b4a2647;--g-line:#c9a27359}
html[data-env="made-to-order"]{--env-accent:#b18656;--env-bar:#f4e9d7eb}
/* Custom cards: a kraft "Custom order" tag; the hover halo is untouched */
.page-creations .bento-badge.is-custom-badge{background:#c9a273;color:#2b1d10;border-color:#a87f50}
/* The custom-order blocks in Cooling and Inside the build, and their note tiles */
.page-creations .custom-subblock{margin-top:clamp(28px,3vw,44px)}
.page-creations .custom-subblock-title{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 14px;padding:12px 0 0;border-top:1px dashed #8a633a66;
 font:500 11.5px/1.2 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6b4a26}
.page-creations .custom-subblock-title span:last-child{color:#8f7a63}
.page-creations .bento-custom-note,.page-creations .bento-qc{grid-column:span 2;position:relative;display:grid;align-content:center;gap:10px;padding:26px 28px;border-radius:22px;overflow:hidden;color:#2b1d10;
 background:repeating-linear-gradient(90deg,#0000 0 6px,#6b4a2612 6px 7px,#0000 7px 11px),linear-gradient(165deg,#d8b98e,#c79f6f)}
.page-creations .custom-note-kicker{margin:0;font:500 11px/1.2 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5b4128}
.page-creations .custom-note-figure{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.page-creations .custom-note-figure b{font:300 clamp(44px,4.2vw,62px)/1 "DM Sans",sans-serif;letter-spacing:-.04em;color:#2b1d10;font-variant-numeric:tabular-nums}
.page-creations .custom-note-figure span{max-width:26ch;font:500 14px/1.35 "DM Sans",sans-serif;color:#3a2816}
.page-creations .custom-note-copy{margin:0;max-width:44ch;font:400 14px/1.55 "DM Sans",sans-serif;color:#4e3820}
.page-creations .custom-note-link{justify-self:start;display:inline-flex;align-items:center;gap:8px;color:#2b1d10;font:500 14px/1 "DM Sans",sans-serif;text-decoration:underline;text-decoration-color:#2b1d1066;text-underline-offset:4px}
.page-creations .custom-note-link svg{width:15px;height:15px}
.page-creations .custom-note-link:focus-visible{outline:2px solid #2b1d10;outline-offset:3px;border-radius:2px}
.page-creations .bento-qc{grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:center}
.page-creations .bento-qc .qc-copy{display:grid;gap:10px;min-width:0}
.page-creations .bento-qc .qc-seal{position:relative;width:clamp(96px,9vw,128px);aspect-ratio:1}
.cat-js .page-creations .bento-qc:not(.is-in) .qc-seal svg{opacity:0;transform:rotate(-14deg) scale(1.5)}
@media (max-width:760px){.page-creations .bento-qc{grid-template-columns:minmax(0,1fr)}.page-creations .bento-custom-note,.page-creations .bento-qc{padding:22px}}
/* Five sections since Made to order (2026-10-10): five tiles and five ruler segments on wide screens; the tiles wrap
   to three then two columns as before on narrower ones. */
@media (min-width:1181px){.page-creations .cat-intro nav,.page-creations .cat-ruler{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:1180px) and (min-width:761px){.page-creations .cat-intro nav{grid-template-columns:repeat(3,minmax(0,1fr))}.page-creations .cat-ruler{display:none}}
@media (max-width:760px){.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="made-to-order"]{grid-column:1/-1}}

/* Carton print (owner 2026-10-10: "thicker and darker, like printed black on a shipping box"): every text printed on
   the Made to order cardboard uses DM Sans Print at heavy weights in near-black ink, uppercase for headings, labels
   and spec lines, with a fine speckle so the ink sits in the board (multiply). The white shipping label stays a label. */
.page-creations{--carton-ink:#140f09;
 --print-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.7 1.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.page-creations .cat-head[data-cat="made-to-order"] .cat-eyebrow,.page-creations .cat-head[data-cat="made-to-order"]>h2,.page-creations .cat-head[data-cat="made-to-order"] .cat-lede,
.page-creations .cat-head[data-cat="made-to-order"] .cat-designs-title,.page-creations .cat-head[data-cat="made-to-order"] .cat-design-name,
.page-creations .bento-custom-note>*:not(.custom-note-link),.page-creations .bento-qc .qc-copy>*:not(.custom-note-link),.page-creations .custom-subblock-title,
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="made-to-order"] .cat-tile-name{
 color:var(--carton-ink);font-family:"DM Sans Print","DM Sans",sans-serif;mix-blend-mode:multiply;
 -webkit-mask-image:var(--print-mask);mask-image:var(--print-mask);-webkit-mask-size:360px;mask-size:360px}
.page-creations .cat-head[data-cat="made-to-order"]>h2{font-weight:800;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(40px,4.4vw,68px);line-height:1;text-shadow:none}
.page-creations .cat-head[data-cat="made-to-order"] .cat-eyebrow{font-weight:800;letter-spacing:.2em;font-size:12px}
.page-creations .cat-head[data-cat="made-to-order"] .cat-index::after{opacity:.8}
.page-creations .cat-head[data-cat="made-to-order"] .cat-lede{font-weight:600;font-size:16.5px;line-height:1.62;max-width:56ch}
.page-creations .cat-head[data-cat="made-to-order"] .cat-designs-wrap{background:repeating-linear-gradient(90deg,#0000 0 6px,#4a30170d 6px 7px,#0000 7px 11px),linear-gradient(#bf946339,#bf946300 40%),linear-gradient(#c79d6b,#cda473);box-shadow:inset 0 10px 18px -10px #3a281659,inset 0 0 0 1px #3a281633}
.page-creations .cat-head[data-cat="made-to-order"] .cat-designs-wrap::before{border-color:#2b1d1033}
.page-creations .cat-head[data-cat="made-to-order"] .cat-designs-title{font-weight:800;letter-spacing:.2em}
.page-creations .cat-head[data-cat="made-to-order"] .cat-design-name{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px}
.page-creations .cat-head[data-cat="made-to-order"] .cat-design:hover,.page-creations .cat-head[data-cat="made-to-order"] .cat-design:focus-visible{background:#ffffff26;border-color:#2b1d1040}
.page-creations .cat-head[data-cat="made-to-order"] .cat-design:focus-visible{outline-color:var(--carton-ink)}
.page-creations .cat-head[data-cat="made-to-order"] .mto-cta a{font-family:"DM Sans Print","DM Sans",sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.page-creations .mto-marks{color:var(--carton-ink);opacity:.85;font-family:"DM Sans Print","DM Sans",sans-serif;font-weight:800}
.page-creations .mto-tape span::after{font-family:"DM Sans Print","DM Sans",sans-serif;font-weight:800;color:#2a1c0ed9}
/* tiles: kicker, figure, lines and spec printed on the board */
.page-creations .custom-note-kicker{font-weight:800!important;letter-spacing:.2em;font-size:11.5px}
.page-creations .custom-note-figure b{font-weight:800;letter-spacing:-.035em}
.page-creations .custom-note-figure span{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;line-height:1.4}
.page-creations .custom-note-copy{font-weight:600;font-size:14.5px}
.page-creations .custom-note-link{font-family:"DM Sans Print","DM Sans",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--carton-ink);text-decoration-color:#140f0999;text-decoration-thickness:2px}
.page-creations .carton-spec{display:grid;gap:4px;margin:2px 0 4px}
.page-creations .carton-spec div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:baseline}
.page-creations .carton-spec dt,.page-creations .carton-spec dd{margin:0;font:800 14.5px/1.45 "DM Sans Print","DM Sans",sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--carton-ink)}
.page-creations .carton-spec dd{font-weight:600}
.page-creations .custom-subblock-title{font-weight:800;letter-spacing:.2em;color:var(--carton-ink)}
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="made-to-order"] .cat-tile-name{font-weight:800;text-transform:uppercase;letter-spacing:.01em}
@media (max-width:760px){.page-creations .cat-head[data-cat="made-to-order"]>h2{font-size:clamp(34px,10vw,44px)}.page-creations .carton-spec dt,.page-creations .carton-spec dd{font-size:13px}}

/* Darker, real cardboard (owner 2026-10-10: "cardboard is darker, has more texture"): every kraft surface uses one
   tileable board texture (images/textures/kraft-board-v1.webp: pulp mottling, fibres, specks, faint flutes; drawn
   procedurally, no photo) over a darker kraft brown, with soft light from above. The printed ink is unchanged. */
.page-creations{--kraft-board:url("/images/textures/kraft-board-v1.webp")}
.page-creations .cat-head[data-cat="made-to-order"]::before{
 background:radial-gradient(120% 90% at 50% 0%,#0000 55%,#2e1c0c33 100%),linear-gradient(172deg,#ffffff12,#0000 45%,#0000001a),var(--kraft-board) 0 0/640px 640px,#ad875a}
.page-creations .cat-head[data-cat="made-to-order"] .cat-designs-wrap{
 background:linear-gradient(#00000038,#0000001a 26%,#0000000d),var(--kraft-board) 120px 80px/640px 640px,#a17b51;box-shadow:inset 0 10px 18px -10px #24160a80,inset 0 0 0 1px #24160a33}
.page-creations .bento-qc{background:linear-gradient(165deg,#ffffff14,#0000 50%,#00000014),var(--kraft-board) 0 0/640px 640px,#ad875a}
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="made-to-order"]{--tile-ring:#d7bd96;--tile-line:#8a633a;
 background:linear-gradient(172deg,#ffffff24,#ffffff0a),var(--kraft-board) 0 0/640px 640px,#b38c5e}
.page-creations .bento-badge.is-custom-badge{background:var(--kraft-board) 0 0/320px 320px,#b08a5c;color:#1c1209;border-color:#7e5a33;font-weight:600}
/* Made-to-order designs in a category's "In this section" list (owner 2026-10-10): a thin outline in the tag's
   kraft brown around the thumbnail; the Made to order box itself needs no marking. In the Inside the build parts list
   only the little picture is outlined, never the whole cell. */
.page-creations .cat-head:not([data-cat="made-to-order"]) .cat-designs-wrap:not(.dw-bom) .cat-design[data-design^="custom-"] .cat-design-thumb{box-shadow:0 0 0 2px #b08a5c,0 4px 10px -6px #2a1c0e66}
.page-creations .cat-head:not([data-cat="made-to-order"]) .dw-bom .cat-design[data-design^="custom-"] .cat-design-thumb img{box-shadow:0 0 0 2px #b08a5c}
/* No decorative dashes in eyebrows (owner 2026-10-10): parts are separated by a slash, or a dot after "01 / 05". */
.page-creations .cat-head .cat-index::after,.page-creations .cat-head[data-cat="made-to-order"] .cat-index::after{content:"·";width:auto;height:auto;margin:0 .7em;background:none;opacity:.7;vertical-align:baseline}
.page-creations .cat-intro-eyebrow span:first-child::after{content:"/";width:auto;height:auto;margin:0 .8em;background:none;opacity:.5;vertical-align:baseline}
.page-creations .cat-intro-eyebrow span+span:not(:nth-child(2))::before{content:"/";width:auto;height:auto;margin:0 .8em;background:none;opacity:.5;vertical-align:baseline}
.page-creations .rb-eyebrow span:first-child::after,.page-creations .wb-eyebrow span:first-child::after{content:"/";width:auto;height:auto;margin:0 .8em;background:none;opacity:.5;vertical-align:baseline}

/* Audit round (owner 2026-10-11). */
/* Phones: the intro line is "27 designs / 5 categories" (the fifth tile and the headline carry the made-to-order count),
   so no line starts with a "/". */
@media (max-width:760px){.page-creations .cat-intro-eyebrow span:nth-child(4){display:none}}
/* Tablets: five tiles fill two full rows (three, then two wider ones), no empty slot. */
@media (max-width:1180px) and (min-width:761px){
 .page-creations .cat-intro nav{grid-template-columns:repeat(6,minmax(0,1fr))}
 .page-creations .collection-navigation.cat-intro nav a.cat-tile{grid-column:span 2}
 .page-creations .collection-navigation.cat-intro nav a.cat-tile:nth-child(n+4){grid-column:span 3}
}
/* The Made to order tile name stays on one line, closing bracket included. */
.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="made-to-order"] .cat-tile-name{white-space:nowrap;letter-spacing:0}
@media (min-width:1181px){.page-creations .collection-navigation.cat-intro nav a.cat-tile[data-cat="made-to-order"] .cat-tile-name{font-size:clamp(16px,1.35vw,22px)}}
/* Headings at the house weight (600): category headings, In real builds, Made close to [home]. */
.page-creations .cat-head h2,.page-creations #real-builds-title,.page-creations #workshop-title{font-weight:600}
/* Fan comparison on phones: one sideways row of size tabs with full-height tap targets, short button label. */
@media (max-width:760px){
 .page-creations .fan-compare-options{flex-wrap:nowrap;gap:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .page-creations .fan-compare-options::-webkit-scrollbar{display:none}
 .page-creations .fan-compare-options button{flex:none;min-height:44px;white-space:nowrap}
 .page-creations .fan-compare-side .fc-long{display:none}
}
/* /assets/creations/creations-nav-v2.css */
/* [creations] wide rail as a file-explorer tree (owner 2026-10-07, after the Registry Editor tree); built by
   creations-nav-v2.js. Each category is a workshop parts bin, not a folder (owner): a bin icon and a bin-front row
   with a paper label slot, styled as a small version of its category header (category-headers-v1.css);
   file rows hang off dotted connectors (├ └) with their thumbnails. Colour-only hovers, no lift. */
.cnav-rail.is-tree .cnav-rail-inner{padding:16px 6px 34px 4px}
.cnav-rail.is-tree .cnav-eyebrow{margin-bottom:14px;padding-left:6px}
.cnav-tree,.cnav-files{list-style:none;margin:0;padding:0}
.cnav-folder{margin:0 0 6px}

/* Folder rows */
.cnav-rail .cnav-group-name{
 position:relative;isolation:isolate;display:flex;align-items:center;gap:4px;min-height:40px;margin:0;padding:6px 10px 6px 4px;
 border:1px solid #15151512;border-radius:10px;background:#efeeeb;overflow:hidden;
 font:500 14px/1.2 'DM Sans',sans-serif;letter-spacing:-.01em;text-transform:none;color:#2a2b2b;text-decoration:none;
 transition:border-color .25s,box-shadow .25s,color .25s;
}
.cnav-rail .cnav-group-name::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.cnav-chev{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;color:#55585a;cursor:pointer;transition:transform .25s ease,background-color .2s}
.cnav-chev svg{width:14px;height:14px}
.cnav-chev:hover{background:#15151512}
.cnav-folder.is-open .cnav-chev{transform:rotate(90deg)}
.cnav-folder-icon{flex:none;display:grid;width:22px;height:18px;margin-right:4px;color:var(--rail-icon,#6d6f70)}
.cnav-folder-icon svg{grid-area:1/1;width:22px;height:18px}
.cnav-folder-icon .is-open,.cnav-folder.is-open .cnav-folder-icon .is-closed{display:none}
.cnav-folder.is-open .cnav-folder-icon .is-open{display:block}
.cnav-folder-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnav-folder-name::before{content:"[ ";font-weight:400;color:var(--rail-bracket,#7d7f80)}
.cnav-folder-name::after{content:" ]";font-weight:400;color:var(--rail-bracket,#7d7f80)}
.cnav-count{flex:none;font:500 10.5px/1 'DM Sans',sans-serif;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#5d605f}
.cnav-rail .cnav-group-name:hover{color:#151515;border-color:var(--rail-line,#15151533)}
.cnav-rail .cnav-group-name.is-current{color:#151515;border-color:var(--rail-line,#15151540);box-shadow:0 0 0 3px #ffffffb3,0 0 18px var(--rail-glow,#e2e2df)}
.cnav-rail .cnav-group-name:focus-visible{outline:2px solid #151515;outline-offset:2px}

/* The bin front: a paper label slot holds the bracketed name. */
.cnav-folder-name{flex:0 1 auto;margin-right:auto;padding:3px 8px 3px;border:1px solid #1515151f;border-radius:3px;background:#fffffff2;box-shadow:inset 0 1px 2px #00000014,0 1px 0 #ffffffb3;font-size:13px}
.cnav-rail .cnav-group-name{box-shadow:inset 0 2px 0 #ffffff8c,inset 0 -2px 0 #00000008}
.cnav-folder.is-open .cnav-folder-icon{transform:translateY(-1px)}
/* Materials, after the headers */
.cnav-folder[data-cat="cooling"]{--rail-icon:#5f8ca6;--rail-bracket:#6f93a8;--rail-line:#8fb7cc;--rail-glow:#d3ebf8}
.cnav-folder[data-cat="cooling"] .cnav-group-name{background:linear-gradient(160deg,#eef5f9,#dfecf3);border-color:#ffffff;box-shadow:inset 0 0 0 1px #c8dfec,inset 0 0 12px #ffffff}
.cnav-folder[data-cat="cooling"] .cnav-group-name::before{background:radial-gradient(40% 70% at 100% 0%,#fff 0%,#fff0 70%),radial-gradient(30% 60% at 0% 100%,#ffffffd9 0%,#fff0 70%)}
.cnav-folder[data-cat="cooling"] .cnav-group-name.is-current{box-shadow:inset 0 0 0 1px #a9cde0,inset 0 0 12px #fff,0 0 0 3px #ffffffb3,0 0 18px #cfe8f6}
.cnav-folder[data-cat="gpu-supports"]{--rail-icon:#4f5459;--rail-bracket:#6c7176;--rail-line:#25272a66;--rail-glow:#dcdddf}
.cnav-folder[data-cat="gpu-supports"] .cnav-group-name{border-radius:4px;background:linear-gradient(#2224260f 1px,#0000 1px) -1px -1px/8px 8px,linear-gradient(90deg,#2224260f 1px,#0000 1px) -1px -1px/8px 8px,#eeeeec;border-color:#25272a33}
.cnav-folder[data-cat="gpu-supports"] .cnav-count::before{content:"P/N ";letter-spacing:.06em;color:#5d605f}
.cnav-folder[data-cat="desk"]{--rail-icon:#a07a4b;--rail-bracket:#9a7f5d;--rail-line:#c9ad86;--rail-glow:#f2dfc2}
.cnav-folder[data-cat="desk"] .cnav-group-name{border-radius:12px;background:radial-gradient(70% 120% at 0% 0%,#fdf2df 0%,#fdf2df00 70%),repeating-linear-gradient(178deg,#9a74450a 0 1px,#0000 1px 5px),linear-gradient(170deg,#efe3d0,#e8d9c2);border-color:#c9ad8659}
.cnav-folder[data-cat="on-the-go"]{--rail-icon:#636363;--rail-bracket:#77797a;--rail-line:#29292959;--rail-glow:#e4e4e2}
.cnav-folder[data-cat="on-the-go"] .cnav-group-name{background:#ecebe8}
.cnav-folder[data-cat="on-the-go"] .cnav-group-name::before{inset:3px;border:1.5px dashed #2929294d;border-radius:8px}

/* File rows and connectors */
.cnav-files{display:none;position:relative;margin:2px 0 6px 15px;padding:2px 0 0 0}
.cnav-folder.is-open .cnav-files{display:block}
.cnav-files>li{position:relative;padding-left:20px}
/* ├ vertical run (stops half way on the last row: └) and the elbow */
.cnav-files>li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px dotted #8f8b84}
.cnav-files>li:last-child::before{bottom:auto;height:22px}
.cnav-files>li::after{content:"";position:absolute;left:0;top:22px;width:15px;border-top:1px dotted #8f8b84}
.cnav-rail.is-tree .cnav-item{gap:9px;min-height:40px;padding:3px 8px 3px 3px;border-radius:9px;font-size:13px}
.cnav-rail.is-tree .cnav-thumb{width:32px;height:32px;border-radius:7px;background:#fff}
.cnav-rail.is-tree .cnav-thumb img{object-fit:cover;object-position:50% 50%;transform:scale(1.18)}
.cnav-rail.is-tree .cnav-item[aria-current="true"]{background:#fff;box-shadow:0 0 0 1px #15151514,0 6px 18px #0000000d}
.cnav-rail.is-tree .cnav-item:focus-visible{outline:2px solid #151515;outline-offset:1px}
.cnav-folder[data-cat="gpu-supports"] .cnav-thumb{border-radius:3px}
.cnav-folder[data-cat="desk"] .cnav-thumb{border-radius:10px}
@media (max-height:820px){
 .cnav-rail.is-tree .cnav-thumb{width:28px;height:28px}
 .cnav-rail.is-tree .cnav-item{min-height:34px}
 .cnav-files>li:last-child::before{height:19px}
 .cnav-files>li::after{top:19px}
}

/* Phone and tablet bar as parts bins (creations-nav-v3.js, owner 2026-10-07): each tab is a small bin front with a
   paper label slot in its category's mini theme; the current bin is lit and carries a chevron that pulls out a
   compact drawer of its designs. Same bar height as before; colour/border/glow only, no lift. */
.cnav-bar.is-bins .cnav-bar-track{gap:8px;padding:7px 16px;align-items:center}
.cnav-chip:first-child{margin-left:auto}
.cnav-chip:last-child{margin-right:auto}
.cnav-chip{position:relative;flex:none;display:inline-flex;align-items:center;height:32px;border:1px solid #15151524;border-radius:8px;background:#efeeeb;
 box-shadow:inset 0 2px 0 #ffffff8c,inset 0 -2px 0 #0000000a;transition:border-color .2s,box-shadow .2s}
.cnav-bar.is-bins .cnav-tab{display:inline-flex;align-items:center;gap:6px;height:100%;margin:0;padding:0 8px 0 7px;border:0;color:#3a3b3b;font:500 12.5px/1 'DM Sans',sans-serif;letter-spacing:0;white-space:nowrap}
.cnav-bin{display:grid;width:18px;height:15px;color:var(--chip-icon,#6d6f70)}
.cnav-bin svg{grid-area:1/1;width:18px;height:15px}
.cnav-bin .is-open,.cnav-chip.is-current .cnav-bin .is-closed{display:none}
.cnav-chip.is-current .cnav-bin .is-open{display:block}
.cnav-label{padding:3px 6px;border:1px solid #1515151c;border-radius:3px;background:#fffffff0;box-shadow:inset 0 1px 2px #00000012}
.cnav-label::before{content:"[ ";color:var(--chip-bracket,#8a8c8d)}
.cnav-label::after{content:" ]";color:var(--chip-bracket,#8a8c8d)}
.cnav-open{display:none;place-items:center;width:28px;height:30px;margin:0 2px 0 -4px;padding:0;border:0;border-radius:6px;background:none;color:#2a2b2b;cursor:pointer}
.cnav-open svg{width:14px;height:14px;transition:transform .25s}
.cnav-open[aria-expanded="true"] svg{transform:rotate(180deg)}
.cnav-chip.is-current .cnav-open{display:grid}
.cnav-chip.is-current{border-color:var(--chip-line,#15151559);box-shadow:inset 0 2px 0 #ffffffb3,0 0 0 3px #ffffffb3,0 0 14px var(--chip-glow,#dcdcd8)}
.cnav-chip.is-current .cnav-tab{color:#151515}
.cnav-bar.is-bins .cnav-tab[aria-current="true"]{border:0}
.cnav-bar.is-bins .cnav-tab:focus-visible,.cnav-open:focus-visible{outline:2px solid #151515;outline-offset:-2px;border-radius:7px}
.cnav-chip[data-cat="cooling"]{--chip-icon:#5f8ca6;--chip-bracket:#6f93a8;--chip-line:#8fb7cc;--chip-glow:#cfe8f6;background:linear-gradient(160deg,#eef5f9,#dfecf3);border-color:#c8dfec}
.cnav-chip[data-cat="gpu-supports"]{--chip-icon:#4f5459;--chip-bracket:#6c7176;--chip-line:#25272a80;--chip-glow:#dcdddf;border-radius:4px;background:linear-gradient(#2224260f 1px,#0000 1px) -1px -1px/7px 7px,linear-gradient(90deg,#2224260f 1px,#0000 1px) -1px -1px/7px 7px,#eeeeec}
.cnav-chip[data-cat="desk"]{--chip-icon:#a07a4b;--chip-bracket:#9a7f5d;--chip-line:#c9ad86;--chip-glow:#f2dfc2;border-radius:10px;border-color:#c9ad8659;background:radial-gradient(70% 120% at 0% 0%,#fdf2df 0%,#fdf2df00 70%),repeating-linear-gradient(178deg,#9a74450a 0 1px,#0000 1px 5px),linear-gradient(170deg,#efe3d0,#e8d9c2)}
.cnav-chip[data-cat="on-the-go"]{--chip-icon:#636363;--chip-bracket:#77797a;--chip-line:#29292973;background:#ecebe8}
.cnav-chip[data-cat="on-the-go"]::after{content:"";position:absolute;inset:2px;border:1px dashed #2929294d;border-radius:6px;pointer-events:none}
/* The drawer */
.cnav-drawer{max-height:min(52vh,360px);overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 12px;border-top:1px solid #15151514;scrollbar-width:thin}
.cnav-drawer[hidden]{display:none}
.cnav-drawer-list{list-style:none;margin:0 auto;padding:4px 0 0 14px;max-width:560px}
.cnav-drawer-list>li{position:relative;padding-left:20px}
.cnav-drawer-list>li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px dotted #8f8b84}
.cnav-drawer-list>li:last-child::before{bottom:auto;height:26px}
.cnav-drawer-list>li::after{content:"";position:absolute;left:0;top:26px;width:15px;border-top:1px dotted #8f8b84}
.cnav-ditem{display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 8px 4px 4px;border-radius:9px;color:#2f302f;text-decoration:none;font:400 13.5px/1.25 'DM Sans',sans-serif}
.cnav-ditem:hover,.cnav-ditem:focus-visible{background:#fff}
.cnav-ditem:focus-visible{outline:2px solid #151515;outline-offset:1px}
.cnav-ditem .cnav-thumb{width:38px;height:38px;border-radius:7px;background:#fff}
.cnav-ditem .cnav-thumb img{transform:scale(1.18)}
.cnav-drawer[data-cat="gpu-supports"] .cnav-thumb{border-radius:3px}
.cnav-drawer[data-cat="desk"] .cnav-thumb{border-radius:10px}
.creations-loading .cnav-drawer,body:has(#modelPreview[open]) .cnav-drawer{display:none}
@media (max-width:760px){
 .cnav-bar.is-bins .cnav-bar-track{gap:7px;padding:7px 14px}
}

/* Very wide screens (W10, 2026-10-07): with the wide rail beside it, the catalog is centred in the space to the right of
   the rail (rail 256 px + 40 px gap = 296 px, so the catalog moves right by half of that and rail + catalog sit centred). */
@media (min-width:2200px){
 html.cnav-wide body.page-creations #designs{padding-inline:calc(max(var(--page-gutter),calc((100vw - 1320px)/2)) + 148px) calc(max(var(--page-gutter),calc((100vw - 1320px)/2)) - 148px)}
}
/* Made to order (2026-10-10): a cardboard shipping box with a strip of packing tape. */
.cnav-folder[data-cat="made-to-order"]{--rail-icon:#8a633a;--rail-bracket:#7a5a36;--rail-line:#c9a273;--rail-glow:#f3dfbd}
.cnav-folder[data-cat="made-to-order"] .cnav-group-name{border-radius:6px;background:linear-gradient(90deg,#0000 calc(50% - 9px),#b07c4366 calc(50% - 9px) calc(50% + 9px),#0000 calc(50% + 9px)),repeating-linear-gradient(90deg,#0000 0 6px,#6b4a2612 6px 7px,#0000 7px 11px),linear-gradient(172deg,#ead2ad,#dcbd91);border-color:#a87f5066}
.cnav-folder[data-cat="made-to-order"] .cnav-thumb{border-radius:5px}
.cnav-chip[data-cat="made-to-order"]{--chip-icon:#8a633a;--chip-bracket:#7a5a36;--chip-line:#c9a273;--chip-glow:#f3dfbd;border-radius:6px;border-color:#a87f5066;background:linear-gradient(90deg,#0000 calc(50% - 6px),#b07c4359 calc(50% - 6px) calc(50% + 6px),#0000 calc(50% + 6px)),repeating-linear-gradient(90deg,#0000 0 6px,#6b4a2612 6px 7px,#0000 7px 11px),linear-gradient(172deg,#ead2ad,#dcbd91)}
.cnav-drawer[data-cat="made-to-order"] .cnav-thumb{border-radius:5px}
/* Darker, textured cardboard for the Made to order bin (2026-10-10; same board texture as the section). */
.cnav-folder[data-cat="made-to-order"] .cnav-group-name,.cnav-chip[data-cat="made-to-order"]{background:linear-gradient(90deg,#0000 calc(50% - 9px),#8a5a2a59 calc(50% - 9px) calc(50% + 9px),#0000 calc(50% + 9px)),linear-gradient(#ffffff1f,#ffffff1f),url("/images/textures/kraft-board-v1.webp") 0 0/320px 320px,#b38c5e;border-color:#7e5a3366}