/* Generated from the studio prototype's pages.css by tools/import-studio.mjs; every selector is scoped to this page's body class (tools/css-scope.mjs). */
/* ===== round 4b: the dab cooler, the dystopian series, the C1D1 re-rack, the SUN demo collection (shared) ===== */
/* Round 4b · the follow-ups to section 8 (dab cooler, dystopian showcase, C1D1 re-rack, the SUN demo collection)
   on round 4's chrome: r4.css (which imports r3.css and r2.css) is the base: the rail, the status bar, the path line,
   the dithered previews, the page top, the sections, the slots, the gaps, the asks, the footer.
   Below: what the four pages of this round share. Each page carries its own world in its own stylesheet. */

:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 { font-family: var(--body); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 h1, :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 h2, :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 h3 { font-family: var(--display); font-weight: 400; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .p-top h1 { font-size: clamp(44px, 6.4vw, 96px); letter-spacing: .005em; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .p-top { border-bottom: var(--rule); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .sec .head { border-bottom: var(--rule); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .sec .head h2 { font-size: clamp(28px, 3.4vw, 44px); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .p-top .three { margin: 0; display: grid; gap: 10px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .p-top .three div { border-top: var(--dots); padding-top: 8px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .p-top .three dt { font: 10px var(--meta); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .p-top .three dd { margin: 3px 0 0; font-size: 14px; line-height: 1.45; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .p-top .three .tc { font: 10px var(--meta); letter-spacing: .05em; text-transform: uppercase; border: 1px dotted var(--ink); padding: 2px 5px; white-space: nowrap; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .switches { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .sec[hidden] { display: none; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .prose { max-width: 62ch; font-size: 15.5px; line-height: 1.55; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .prose p { margin: 0 0 12px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .sub-release { font: 12px var(--pixel); text-transform: uppercase; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .spec td.num { white-space: normal; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .spec { table-layout: fixed; }

/* a permission or fact label the reader cannot miss: one ink, a hard box */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .permit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 2px solid var(--ink); background: var(--paper); padding: 10px 14px; margin: 18px 0 0; font: 12px/1.5 var(--meta); letter-spacing: .04em; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .permit b { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; background: var(--ink); color: var(--paper); padding: 4px 7px; white-space: nowrap; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .permit span { max-width: 78ch; }

/* the stage: one clean main object, a caption strip, a thumb strip under it */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 20px 32px; align-items: start; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .stage .main { position: relative; border: var(--rule); background: var(--w-media); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .stage .main img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: contain; background: var(--w-media); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .stage .main .cap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: var(--rule); padding: 8px 12px; font: 10px/1.5 var(--meta); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); background: var(--paper); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .stage .main .cap b { color: var(--ink); font-weight: 600; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .thumbs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .thumbs button { display: block; width: 100%; padding: 0; border: 1px solid var(--hair); background: var(--w-media); cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .thumbs button[aria-pressed="true"] { border: 2px solid var(--ink); box-shadow: var(--shadow-card); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .thumbs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the variant rail (data-driven): every edition and option is one card from the data file; adding one is adding a record */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vrail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vrail li { min-width: 0; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard { display: grid; grid-template-rows: auto 1fr; width: 100%; text-align: left; padding: 0; border: var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; height: 100%; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard .pic { aspect-ratio: 4 / 3; border-bottom: var(--rule); background: var(--w-media); overflow: hidden; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard .pic.none { display: grid; place-items: center; font: 9px/1.5 var(--meta); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); text-align: center; padding: 8px; border-bottom-style: dotted; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard .txt { padding: 8px 10px 10px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard .txt b { display: block; font: 400 17px/1.1 var(--display); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard .txt small { display: block; font: 9px/1.5 var(--meta); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin-top: 4px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard .txt .slot { margin-top: 6px; font-size: 9px; padding: 4px 6px; white-space: normal; line-height: 1.3; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard[aria-pressed="true"] { box-shadow: var(--shadow-card); transform: translate(-1px, -1px); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard[aria-pressed="true"] .txt { background: var(--ink); color: var(--paper); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard[aria-pressed="true"] .txt small { color: var(--paper); opacity: .8; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vrail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; font: 11px var(--meta); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vrail-head b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vcard[aria-pressed="true"] { transform: none; } }

/* the option chips (a toggle each; the detail figures follow) */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .chips { display: flex; flex-wrap: wrap; gap: 6px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .chips .wbtn { padding: 8px 10px; font-size: 11px; }

/* plates: the drawings, the parts, the sheets; clean, numbered, a caption under each */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates li { border: var(--rule); background: var(--paper); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates figure { margin: 0; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates .img { display: block; width: 100%; border: 0; padding: 0; background: var(--w-media); cursor: zoom-in; border-bottom: var(--rule); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates .img img { width: 100%; height: auto; display: block; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates figcaption { padding: 10px 12px 12px; font-size: 13.5px; line-height: 1.45; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates figcaption .no { font: 11px var(--pixel); text-transform: uppercase; display: block; margin-bottom: 4px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates figcaption small { display: block; font: 10px/1.5 var(--meta); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* the lightbox: one plate at full size */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) dialog.lb { border: var(--rule); padding: 0; max-width: min(96vw, 1600px); width: auto; background: var(--paper); box-shadow: var(--shadow-hard); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) dialog.lb::backdrop { background: rgba(0,0,0,.6); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) dialog.lb img { display: block; max-width: 96vw; max-height: 84vh; width: auto; height: auto; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) dialog.lb .lb-bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 12px; border-top: var(--rule); font: 11px var(--meta); text-transform: uppercase; letter-spacing: .06em; }

/* the 3D viewer frame: a canvas in a ruled box, a toolbar under it, a fallback beside it */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .viewer { border: var(--rule); background: var(--w-media); position: relative; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .viewer canvas { display: block; width: 100%; height: 100%; touch-action: none; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .viewer .vw { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .viewer .vw.tall { aspect-ratio: 4 / 5; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .viewer .hint { position: absolute; left: 10px; bottom: 10px; z-index: 2; font: 10px/1 var(--meta); letter-spacing: .07em; text-transform: uppercase; padding: 5px 7px; background: var(--paper); border: 1px solid var(--ink); pointer-events: none; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .viewer .vbar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; border-top: var(--rule); padding: 8px 10px; background: var(--paper); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .viewer .vbar .lbl { font: 10px var(--meta); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .viewer .fallback { display: grid; place-items: center; text-align: center; padding: 24px; aspect-ratio: 4 / 3; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .viewer .fallback span { font: 11px/1.6 var(--meta); text-transform: uppercase; letter-spacing: .05em; max-width: 40ch; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .viewer input[type=range] { accent-color: #000; width: 120px; }

/* facts and specs */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .facts .spec { max-width: none; }

/* a dated log (the build story) */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 260px; gap: 12px 24px; padding: 16px 0; border-bottom: var(--dots); align-items: start; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log .d { font: 12px/1.5 var(--pixel); text-transform: uppercase; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log h3 { font-size: 22px; margin: 0 0 6px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log p { margin: 0; font-size: 14.5px; line-height: 1.5; max-width: 60ch; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log .src { display: block; margin-top: 6px; font: 10px/1.5 var(--meta); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log .fig { border: var(--rule); background: var(--w-media); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log .fig img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log .fig .pv { width: 100%; aspect-ratio: 4 / 3; border: 0; }

/* three rendered options for one decision */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt { border: var(--rule); background: var(--paper); display: grid; grid-template-rows: auto 1fr auto; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt > .oh { padding: 12px 14px 10px; border-bottom: var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt > .oh b { font: 400 22px/1.1 var(--display); flex: 1; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt > .oh .letter { font: 14px var(--pixel); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt .mock { padding: 14px; background: var(--ground); border-bottom: var(--rule); min-height: 220px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt .if { padding: 12px 14px 14px; font-size: 13.5px; line-height: 1.5; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt .if b { font-weight: 600; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt.rec > .oh { background: var(--ink); color: var(--paper); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt .rec-chip { font: 9px var(--pixel); text-transform: uppercase; border: 1px solid currentColor; padding: 4px 6px; }
/* mini mocks: the site's own row and page furniture at a small scale */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; border-top: var(--rule); border-bottom: var(--rule); padding: 10px 0; background: var(--paper); padding: 10px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mrow .n { font: 10px var(--pixel); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mrow .n small { display: block; font: 7px var(--pixel); color: var(--ink-2); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mrow .pennant { display: inline-flex; margin: 6px 0 0; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mrow .t { font: 400 20px/1 var(--display); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mrow .w { display: block; font-size: 11px; color: var(--ink-2); margin-top: 3px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mrow .status { font-size: 9px; padding: 4px 6px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mpage { margin-top: 10px; border: var(--rule); background: var(--paper); padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mpage img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--hair); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mpage b { display: block; font: 400 16px/1.1 var(--display); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mpage small { display: block; font: 9px/1.5 var(--meta); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin-top: 4px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .mnone { border: 1px dotted var(--ink); padding: 14px; font: 10px/1.6 var(--meta); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); text-align: center; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .mock .pennant { margin-left: 6px; }

/* the study's tool embed: an original file in a frame, loaded on press */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .embed { border: var(--rule); background: var(--w-media); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .embed .eh { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: var(--rule); background: var(--paper); font: 10px/1.5 var(--meta); text-transform: uppercase; letter-spacing: .05em; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .embed .eh b { font-weight: 600; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .embed .ebody { position: relative; aspect-ratio: 16 / 10; background: #11141a; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .embed .ebody iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .embed .ebody .arm { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; background: var(--w-media); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .embed .ebody .arm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .embed .ebody .arm .wbtn { position: relative; z-index: 1; background: var(--paper); }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .embed .ebody .arm .note { position: absolute; left: 10px; bottom: 10px; z-index: 1; background: var(--paper); border: 1px solid var(--ink); padding: 5px 7px; font: 10px var(--meta); text-transform: uppercase; letter-spacing: .05em; }

/* the legend chips for the room (one ink; the columns keep the tool's own colours) */
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 10px var(--meta); letter-spacing: .05em; text-transform: uppercase; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .legend li { display: inline-flex; align-items: center; gap: 6px; }
:is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .legend i { width: 12px; height: 12px; border: 1px solid var(--ink); display: inline-block; }


@media (max-width: 1100px) {
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .facts { grid-template-columns: 1fr 1fr; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .opt3 { grid-template-columns: 1fr; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log li { grid-template-columns: 110px minmax(0, 1fr); }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log li .fig { grid-column: 2; }
}
@media (max-width: 860px) {
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .rail-label { font-size: 10px; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .rail-back { white-space: nowrap; font-size: 10px; padding: 6px 4px; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .p-top h1 { font-size: clamp(38px, 11vw, 56px); }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection).b4 .stage { grid-template-columns: 1fr; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates, :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates.four, :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .plates.three { grid-template-columns: 1fr; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .facts { grid-template-columns: 1fr; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log li { grid-template-columns: 1fr; gap: 8px; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .log li .fig { grid-column: 1; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .vrail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .permit { font-size: 11px; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) .embed .ebody { aspect-ratio: 4 / 5; }
  :is(body.page-dab-cooler,body.page-dystopian,body.page-c1d1,body.page-demo-collection) dialog.lb img { max-height: 70vh; }
}