/* ================= THE SHELF UNITS =================
   The old mistake was one environment stretched around everything you own —
   260 items deep, so the art had no height to be composed for and every
   detail smeared into wallpaper. Now the page is a RACK: one room per pair,
   each a known shape, each designed for exactly two products.

   Every unit has three zones, and --deck is the line between the first two:

     0 → --deck    the display space: back wall, light, whatever's behind
     at --deck     the surface they stand on, drawn in .fg so it crosses
                   IN FRONT of their feet — that occlusion is what makes a
                   shelf read as a shelf and not a picture of one
     --deck → end  the recess underneath, kept dark so the labels sit on
                   something and read for free

   --deck is 34px room padding + 8px item padding + the 146px display box. The
   room's top padding buys the product headroom — at 16px the flaps and rails
   at the top of a unit were cutting across the artwork.
   Built with .env holding six layers and .fg holding two props in front. */

.shelfroom{position:relative;border-radius:20px;padding:34px 12px 14px;overflow:hidden;isolation:isolate;
  container-type:inline-size;transition:background .35s ease;--deck:188px}
.shelfroom>.env{position:absolute;inset:0;z-index:0;pointer-events:none}
.shelfroom>.env>i{position:absolute;inset:0;display:block}
.shelfroom>.fg{position:absolute;inset:0;z-index:3;display:block;pointer-events:none}
.shelfroom>.fg>b{position:absolute;display:block}
.shelfroom>.invgrid,.shelfroom>.emptystate{position:relative;z-index:2}
/* the products' own shadow is thrown by whatever lights that room */
.shelfroom .prodwrap .wrapimg{filter:var(--pshadow,drop-shadow(0 13px 16px rgba(0,0,0,.6)))}
.shelfroom .pshadow{background:var(--contact,radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%))}
/* the label halo is only needed where the recess isn't already dark */
.shelfroom .info::before{opacity:var(--halo,1)}

/* ===================================================================
   1 · CARDBOARD BOX — free
   Looking down into a carton. Side walls converge, the flaps hang over
   the top, and the labels sit on the front panel below the fold.
   =================================================================== */
.theme-cardboard{--pshadow:drop-shadow(0 12px 12px rgba(52,28,8,.6));
  --contact:radial-gradient(ellipse at center,rgba(48,26,8,.6),transparent 70%);--halo:.35;
  background:#3a2712}
.theme-cardboard>.env{background:
  radial-gradient(120% 70% at 50% -16%,rgba(255,238,208,.5),transparent 64%),
  linear-gradient(180deg,#cda875 0%,#b48f5e 34%,#8d6737 72%,#6b4d27 100%) 0 0/100% var(--deck) no-repeat,
  linear-gradient(180deg,#4a341a,#2c1e0d)}
/* kraft fibre, several periods so it never tiles visibly */
.theme-cardboard>.env>.e1{bottom:auto;height:var(--deck);opacity:.5;background:
  repeating-linear-gradient(84deg,rgba(72,44,16,.16) 0 1px,transparent 1px 5px),
  repeating-linear-gradient(96deg,rgba(255,236,206,.12) 0 1px,transparent 1px 9px),
  repeating-linear-gradient(88deg,rgba(72,44,16,.1) 0 2px,transparent 2px 17px)}
/* the inner side walls, angled away from you */
.theme-cardboard>.env>.e2{bottom:auto;height:var(--deck);
  clip-path:polygon(0 0,13% 10%,13% 100%,0 100%);
  background:linear-gradient(90deg,#453014,#6a4b26 78%,#7d5930)}
.theme-cardboard>.env>.e3{bottom:auto;height:var(--deck);
  clip-path:polygon(100% 0,87% 10%,87% 100%,100% 100%);
  background:linear-gradient(270deg,#3d290f,#5b3f1f 78%,#6b4c26)}
/* the corrugated cut edge at the top */
.theme-cardboard>.env>.e4{bottom:auto;height:2.2cqw;background:
  repeating-linear-gradient(90deg,#f2d7b2 0 .42cqw,#cfa871 .42cqw .9cqw,#96703c .9cqw 1.3cqw,#7a5a2f 1.3cqw 1.6cqw);
  box-shadow:0 .5cqw 1.2cqw rgba(0,0,0,.5)}
/* A shipping label used to sit here. It read as a white rectangle stuck to the
   wall rather than a prop, so it's gone — the crease down the back panel does
   the same job without putting a bright block behind the product. */
.theme-cardboard>.env>.e5{bottom:auto;height:var(--deck);background:
  linear-gradient(90deg,transparent 61.4%,rgba(38,24,8,.28) 62%,rgba(255,240,208,.1) 62.6%,transparent 63.2%),
  linear-gradient(90deg,transparent 29.6%,rgba(38,24,8,.2) 30%,transparent 30.7%)}
/* the fold, and the front panel the labels sit on */
.theme-cardboard>.env>.e6{top:var(--deck);background:
  linear-gradient(180deg,#7d5a2e 0 3px,#5e421f 3px 8px,#3f2c14 8px,#2a1c0c 100%),
  repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 1px,transparent 1px 18px)}
/* the flaps, hanging over everything */
.theme-cardboard>.fg>.f1{left:-8%;top:-15%;width:50%;height:22%;transform:rotate(-4.5deg);
  background:linear-gradient(196deg,#e0bb87,#c8a06d 44%,#96703f 100%),
    repeating-linear-gradient(90deg,rgba(80,50,18,.09) 0 1px,transparent 1px 7px);
  box-shadow:0 1.4cqw 2.4cqw rgba(0,0,0,.6),inset 0 -.22cqw 0 rgba(255,240,210,.45)}
.theme-cardboard>.fg>.f2{right:-8%;top:-15%;width:50%;height:22%;transform:rotate(4.5deg);
  background:linear-gradient(164deg,#d8b280,#bd9563 44%,#8b6739 100%),
    repeating-linear-gradient(90deg,rgba(80,50,18,.09) 0 1px,transparent 1px 7px);
  box-shadow:0 1.4cqw 2.4cqw rgba(0,0,0,.6),inset 0 -.22cqw 0 rgba(255,240,210,.4)}

/* ===================================================================
   2 · MILK CRATE — $500
   Moulded polypropylene. The holes are holes, the ribs are round, and
   the front rail crosses their feet.
   =================================================================== */
.theme-crate{--pshadow:drop-shadow(0 11px 11px rgba(30,4,2,.7));
  --contact:radial-gradient(ellipse at center,rgba(20,3,2,.7),transparent 70%);--halo:.3;
  background:#2a0c09}
.theme-crate>.env{background:
  radial-gradient(110% 66% at 50% -18%,#a03a31,#71221c 60%,#4a1511 100%) 0 0/100% var(--deck) no-repeat,
  linear-gradient(180deg,#3d100c,#220705)}
.theme-crate>.env>.e1{bottom:auto;height:var(--deck);background:
  repeating-linear-gradient(0deg,rgba(16,3,2,.92) 0 1.1cqw,transparent 1.1cqw 4.6cqw),
  repeating-linear-gradient(90deg,rgba(16,3,2,.92) 0 1.1cqw,transparent 1.1cqw 4.6cqw)}
/* the ribs, lit on top and shaded underneath so they read as moulded */
.theme-crate>.env>.e2{bottom:auto;height:var(--deck);background:
  repeating-linear-gradient(0deg,transparent 0 1.1cqw,rgba(255,150,130,.3) 1.1cqw 1.35cqw,
    transparent 1.35cqw 4.2cqw,rgba(38,8,5,.5) 4.2cqw 4.6cqw),
  repeating-linear-gradient(90deg,transparent 0 1.1cqw,rgba(255,150,130,.22) 1.1cqw 1.32cqw,
    transparent 1.32cqw 4.25cqw,rgba(38,8,5,.4) 4.25cqw 4.6cqw)}
.theme-crate>.env>.e3{bottom:auto;height:var(--deck);width:5.4cqw;right:auto;
  background:linear-gradient(90deg,#8e2b24,#c95a4f 22%,#a63a31 48%,#75211b 82%,#4d130f);
  box-shadow:1.3cqw 0 2.2cqw rgba(0,0,0,.6)}
.theme-crate>.env>.e4{bottom:auto;height:var(--deck);width:5.4cqw;left:auto;
  background:linear-gradient(270deg,#82261f,#bd5148 22%,#9a342c 48%,#6c1e18 82%,#460f0c);
  box-shadow:-1.3cqw 0 2.2cqw rgba(0,0,0,.6)}
.theme-crate>.env>.e5{bottom:auto;height:2.9cqw;
  background:linear-gradient(180deg,#d76257,#b0433a 36%,#8a2c25 74%,#5e1a15);
  box-shadow:0 1.1cqw 2.2cqw rgba(0,0,0,.65),inset 0 .2cqw 0 rgba(255,178,160,.55)}
/* the dark front panel below, where the labels live */
.theme-crate>.env>.e6{top:var(--deck);background:linear-gradient(180deg,#4a1512,#280907 60%,#180504)}
/* the front rail, crossing their feet, with the stamped hand-hole */
.theme-crate>.fg>.f1{left:0;right:0;top:calc(var(--deck) - 16px);height:24px;
  background:linear-gradient(180deg,#c2564b 0%,#a03b32 18%,#7a251f 54%,#521512 84%,#360d0a 100%);
  box-shadow:0 -1.4cqw 2.6cqw rgba(0,0,0,.7),inset 0 .28cqw 0 rgba(255,172,152,.5),
    inset 0 -.16cqw 0 rgba(18,3,2,.85)}
.theme-crate>.fg>.f2{left:38%;right:38%;top:calc(var(--deck) - 9px);height:8px;border-radius:2px;
  background:#230807;box-shadow:inset 0 2px 4px rgba(0,0,0,.95),0 1px 0 rgba(255,150,130,.22)}

/* ===================================================================
   3 · PINE SHELF — $1,750
   A plank with real thickness on steel brackets, hard warm light from
   the left, labels in the shadow underneath.
   =================================================================== */
.theme-pine{--pshadow:drop-shadow(7px 11px 10px rgba(28,14,4,.66));
  --contact:radial-gradient(ellipse at center,rgba(30,16,4,.58),transparent 70%);--halo:.45;
  background:#1c1206}
.theme-pine>.env{background:
  radial-gradient(66% 74% at 8% -16%,rgba(255,206,132,.6),transparent 66%) 0 0/100% var(--deck) no-repeat,
  linear-gradient(180deg,#6f5842 0%,#54432f 60%,#3b2f22 100%) 0 0/100% var(--deck) no-repeat,
  linear-gradient(180deg,#241a10,#120c06)}
.theme-pine>.env>.e1{bottom:auto;height:var(--deck);opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,240,215,.05) 0 1px,transparent 1px 4px)}
.theme-pine>.env>.e2{bottom:auto;height:var(--deck);width:4.2cqw;right:auto;background:
  linear-gradient(90deg,#4a3119,#7d552c 32%,#a2733d 74%,#c29151),
  repeating-linear-gradient(0deg,rgba(48,28,10,.22) 0 1px,transparent 1px 5px),
  repeating-linear-gradient(0deg,rgba(48,28,10,.14) 0 2px,transparent 2px 13px);
  box-shadow:1.6cqw 0 2.8cqw rgba(0,0,0,.6)}
.theme-pine>.env>.e3{bottom:auto;height:var(--deck);width:4.2cqw;left:auto;background:
  linear-gradient(270deg,#3a2613,#5e3f20 42%,#74502a),
  repeating-linear-gradient(0deg,rgba(38,22,8,.28) 0 1px,transparent 1px 5px);
  box-shadow:-1.6cqw 0 2.8cqw rgba(0,0,0,.62)}
/* the board above, throwing its shadow down the back */
.theme-pine>.env>.e4{bottom:auto;height:3.4cqw;background:
  linear-gradient(180deg,#c08f4f,#a3763f 32%,#7d5729 74%,#5a3d1c),
  repeating-linear-gradient(90deg,rgba(48,28,10,.2) 0 1px,transparent 1px 6px);
  box-shadow:0 1.6cqw 2.8cqw rgba(0,0,0,.68),inset 0 .2cqw 0 rgba(255,230,186,.6)}
/* one knot, off centre */
.theme-pine>.env>.e5{left:23%;right:auto;bottom:auto;top:calc(var(--deck) - 58px);
  width:2.6cqw;height:1.7cqw;border-radius:50%;
  background:radial-gradient(closest-side,#4b3115,#6d4a22 55%,transparent 72%);opacity:.9}
/* the recess under the shelf, and the steel brackets in it */
.theme-pine>.env>.e6{top:var(--deck);background:
  linear-gradient(180deg,#241a10,#120c06 70%),
  linear-gradient(90deg,transparent 12%,#4a4a54 12% 13.4%,#2c2c34 13.4%,transparent 14.6%),
  linear-gradient(90deg,transparent 85.4%,#3c3c46 85.4%,#24242c 86.6%,transparent 88%)}
/* the plank: lit top face, then end-grain on the front edge */
.theme-pine>.fg>.f1{left:0;right:0;top:calc(var(--deck) - 5px);height:5px;
  background:linear-gradient(180deg,#e0b471,#c2954f 48%,#a87f3e),
    repeating-linear-gradient(90deg,rgba(60,36,12,.16) 0 1px,transparent 1px 8px)}
.theme-pine>.fg>.f2{left:0;right:0;top:var(--deck);height:13px;background:
  linear-gradient(180deg,#8d6128,#734f20 34%,#553a17 76%,#33210d),
  repeating-linear-gradient(90deg,rgba(30,18,6,.3) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(255,220,170,.07) 0 1px,transparent 1px 11px);
  box-shadow:inset 0 .14cqw 0 rgba(255,224,176,.5),inset 0 -.14cqw 0 rgba(0,0,0,.7),
    0 .5cqw 1.2cqw rgba(0,0,0,.55)}

/* ===================================================================
   4 · GLASS CABINET — $6,000
   Real glass gives itself away on the EDGE: white specular line, bright
   rim, green-cyan core, deep teal, dark underside. Chrome standoffs hold
   the pane, and everything above it reflects below it.
   =================================================================== */
.theme-glass{--pshadow:drop-shadow(0 6px 7px rgba(0,10,26,.8));
  --contact:linear-gradient(180deg,rgba(150,215,235,.45),transparent);--halo:.25;
  background:radial-gradient(130% 84% at 50% 22%,#0e1a30,#050912 64%,#01030a 100%)}
.theme-glass>.env{background:
  radial-gradient(46% 40% at 50% -6%,rgba(178,214,255,.34),transparent 68%),
  radial-gradient(130% 96% at 50% 36%,transparent 42%,rgba(0,0,0,.74) 94%)}
/* the pane's top surface catching a long shallow rake */
.theme-glass>.env>.e1{bottom:auto;height:var(--deck);background:
  linear-gradient(100deg,transparent 20%,rgba(220,240,255,.13) 29%,transparent 37%,
    transparent 66%,rgba(220,240,255,.08) 72%,transparent 79%)}
/* chrome standoffs pinning it to the back wall */
.theme-glass>.env>.e2{left:4%;right:auto;bottom:auto;top:calc(var(--deck) - 22px);
  width:2.6cqw;height:3.4cqw;border-radius:.4cqw;
  background:linear-gradient(180deg,#eef4ff,#9fb0c8 38%,#5b6b84 70%,#c6d4e8);
  box-shadow:0 .3cqw .8cqw rgba(0,0,0,.6),inset 0 0 0 .08cqw rgba(255,255,255,.7)}
.theme-glass>.env>.e3{left:auto;right:4%;bottom:auto;top:calc(var(--deck) - 22px);
  width:2.6cqw;height:3.4cqw;border-radius:.4cqw;
  background:linear-gradient(180deg,#eef4ff,#9fb0c8 38%,#5b6b84 70%,#c6d4e8);
  box-shadow:0 .3cqw .8cqw rgba(0,0,0,.6),inset 0 0 0 .08cqw rgba(255,255,255,.7)}
/* the reflection zone under the pane */
.theme-glass>.env>.e4{top:var(--deck);background:
  linear-gradient(180deg,rgba(126,186,240,.2),rgba(126,186,240,.05) 44%,transparent 82%)}
/* the cabinet's own front pane, one diagonal over the lot */
.theme-glass>.env>.e5{background:
  linear-gradient(108deg,transparent 28%,rgba(198,226,255,.09) 35%,rgba(198,226,255,.03) 41%,
    transparent 47%,transparent 70%,rgba(198,226,255,.06) 75%,transparent 81%)}
/* THE EDGE — five bands, and the green core is the whole trick */
.theme-glass>.fg>.f1{left:0;right:0;top:calc(var(--deck) - 2px);height:11px;background:linear-gradient(180deg,
  rgba(255,255,255,.98) 0 10%,
  rgba(214,246,246,.9) 10% 24%,
  rgba(126,214,206,.72) 24% 52%,
  rgba(58,150,162,.6) 52% 76%,
  rgba(16,54,74,.72) 76% 100%);
  box-shadow:0 0 2.4cqw rgba(140,220,225,.55),0 0 6cqw rgba(90,170,240,.34),
    0 .3cqw .7cqw rgba(0,0,0,.6)}
.theme-glass>.fg>.f2{left:0;right:0;bottom:0;height:1.2cqw;background:linear-gradient(180deg,
  rgba(190,240,238,.5) 0 20%,rgba(70,150,160,.45) 20% 58%,rgba(2,10,20,.9) 58% 100%)}

/* ===================================================================
   5 · NEON ARCADE — $22,500
   A horizon. Banded sun behind everything, grid running at you, and a
   lit strip along the platform edge.
   =================================================================== */
.theme-neon{--pshadow:drop-shadow(0 6px 8px rgba(0,0,0,.8))
    drop-shadow(-3px 0 5px rgba(255,60,200,.5)) drop-shadow(3px 0 5px rgba(60,220,255,.45));
  --contact:radial-gradient(ellipse at center,rgba(255,80,215,.45),transparent 72%);--halo:.4;
  background:linear-gradient(180deg,#0a0220 0%,#280d48 46%,#12042c 66%,#050110 100%)}
.theme-neon>.env{background:radial-gradient(58% 26% at 50% 56%,rgba(255,70,205,.24),transparent 68%)}
/* the sun — bands tighten toward the bottom */
.theme-neon>.env>.e1{left:50%;right:auto;bottom:auto;top:calc(var(--deck) - 108px);
  width:104px;height:104px;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(180deg,#fff0a8 0%,#ffd25e 24%,#ff6ea8 60%,#c3239a 100%);
  -webkit-mask:linear-gradient(180deg,#000 0 40%,transparent 40%),
    repeating-linear-gradient(180deg,#000 0 5px,transparent 5px 9px);
  -webkit-mask-composite:source-over;mask-composite:add;
  box-shadow:0 0 8cqw rgba(255,94,168,.45)}
/* stars above the horizon */
.theme-neon>.env>.e2{bottom:auto;height:calc(var(--deck) - 60px);background:
  radial-gradient(1px 1px at 16% 26%,rgba(255,255,255,.8),transparent),
  radial-gradient(1px 1px at 71% 14%,rgba(255,255,255,.6),transparent),
  radial-gradient(1px 1px at 39% 9%,rgba(255,255,255,.7),transparent),
  radial-gradient(1px 1px at 87% 36%,rgba(255,255,255,.5),transparent),
  radial-gradient(1px 1px at 7% 48%,rgba(255,255,255,.45),transparent)}
/* the grid, running at you, below the horizon */
.theme-neon>.env>.e3{top:calc(var(--deck) - 58px);
  background:repeating-linear-gradient(90deg,rgba(130,245,255,.5) 0 1px,transparent 1px 6cqw),
    repeating-linear-gradient(0deg,rgba(130,245,255,.45) 0 1px,transparent 1px 16px);
  transform:perspective(130px) rotateX(64deg);transform-origin:top;
  -webkit-mask:linear-gradient(0deg,transparent,#000 46%);mask:linear-gradient(0deg,transparent,#000 46%);
  animation:neonrun 1.9s linear infinite}
@keyframes neonrun{to{background-position:0 6cqw,0 16px}}
/* the horizon tube */
.theme-neon>.env>.e4{bottom:auto;top:calc(var(--deck) - 58px);height:2px;
  background:linear-gradient(90deg,transparent,#ffe1f6 22%,#fff 50%,#d9f7ff 78%,transparent);
  box-shadow:0 0 1.2cqw #ff4dd8,0 0 3.4cqw #ff4dd8,0 0 7cqw rgba(77,230,255,.7)}
.theme-neon>.env>.e5{top:var(--deck);background:linear-gradient(180deg,rgba(5,1,16,.72),#050110 70%)}
/* the platform edge they're standing on */
.theme-neon>.fg>.f1{left:0;right:0;top:calc(var(--deck) - 3px);height:9px;
  background:linear-gradient(180deg,#ff8de6 0 22%,#a3277a 22% 52%,#3c0b2c 52%,#150318 100%);
  box-shadow:0 0 2cqw rgba(255,77,216,.75),0 .4cqw 1.4cqw rgba(0,0,0,.7)}
/* scanlines and a tube vignette over the lot */
.theme-neon>.fg>.f2{inset:0;opacity:.42;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,transparent 1px 3px),
  radial-gradient(122% 100% at 50% 50%,transparent 54%,rgba(0,0,0,.6) 100%)}
.theme-neon .invitem .iset{color:#ffe8ff}
.theme-neon .invitem .kick{color:#7df3ff}

/* ===================================================================
   6 · SUNKEN VAULT — $80,000
   Ten metres down behind tank glass. Two caustic nets at different
   angles and speeds, screen-blended, so their crossings burn and crawl.
   The only room whose light never holds still.
   =================================================================== */
.theme-deep{--pshadow:drop-shadow(0 8px 9px rgba(0,26,40,.8)) drop-shadow(0 -2px 8px rgba(120,240,255,.28));
  --contact:radial-gradient(ellipse at center,rgba(0,22,34,.6),transparent 72%);--halo:.3;
  background:linear-gradient(180deg,#0a4b63 0%,#07364c 30%,#052436 62%,#02141f 86%,#010a10 100%)}
.theme-deep>.env{background:
  radial-gradient(60% 40% at 50% -10%,rgba(150,244,255,.32),transparent 68%),
  radial-gradient(126% 100% at 50% 40%,transparent 42%,rgba(0,8,16,.74) 94%)}
/* shafts from the surface, swaying */
.theme-deep>.env>.e1{bottom:auto;height:var(--deck);background:repeating-linear-gradient(98deg,
  rgba(186,252,255,.17) 0 1.4cqw,transparent 1.4cqw 3.2cqw,rgba(186,252,255,.09) 3.2cqw 3.8cqw,transparent 3.8cqw 7.6cqw);
  -webkit-mask:linear-gradient(180deg,#000 4%,rgba(0,0,0,.35) 56%,transparent 88%);
  mask:linear-gradient(180deg,#000 4%,rgba(0,0,0,.35) 56%,transparent 88%);
  mix-blend-mode:screen;transform-origin:50% 0;animation:deepray 17s ease-in-out infinite alternate}
@keyframes deepray{from{transform:skewX(-3.5deg) translateX(-1.6cqw)}to{transform:skewX(4.5deg) translateX(2.4cqw)}}
/* Caustic nets A and B. These used to animate background-position, which drags
   a repeating gradient across its own painted tile and leaves a hard seam
   crawling down the room — the line you could see. The layer moves now instead
   of the paint, oversized so its edges are always outside the frame, and it
   eases back and forth rather than looping, so there's no jump to hide either. */
.theme-deep>.env>.e2{inset:-40%;mix-blend-mode:screen;opacity:.9;background:
  repeating-linear-gradient(74deg,transparent 0 3cqw,rgba(196,255,248,.2) 3cqw 4.2cqw,transparent 4.2cqw 8.6cqw),
  repeating-linear-gradient(-64deg,transparent 0 3.6cqw,rgba(196,255,248,.17) 3.6cqw 4.6cqw,transparent 4.6cqw 10cqw);
  animation:deepcausA 13s ease-in-out infinite alternate}
@keyframes deepcausA{from{transform:translate(-3cqw,-2cqw)}to{transform:translate(3cqw,2.4cqw)}}
.theme-deep>.env>.e3{inset:-40%;mix-blend-mode:screen;opacity:.7;background:
  repeating-linear-gradient(82deg,transparent 0 5.2cqw,rgba(150,246,255,.15) 5.2cqw 6.2cqw,transparent 6.2cqw 14cqw),
  repeating-linear-gradient(-52deg,transparent 0 5.8cqw,rgba(150,246,255,.12) 5.8cqw 6.6cqw,transparent 6.6cqw 16cqw);
  animation:deepcausB 19s ease-in-out infinite alternate-reverse}
@keyframes deepcausB{from{transform:translate(2.6cqw,-2.2cqw)}to{transform:translate(-2.8cqw,2cqw)}}
/* bubbles */
.theme-deep>.env>.e4{bottom:auto;height:var(--deck);background:
  radial-gradient(.6cqw .6cqw at 17% 74%,rgba(226,255,255,.62),transparent 70%),
  radial-gradient(.4cqw .4cqw at 23% 42%,rgba(226,255,255,.5),transparent 70%),
  radial-gradient(.5cqw .5cqw at 80% 62%,rgba(226,255,255,.55),transparent 70%),
  radial-gradient(.3cqw .3cqw at 85% 28%,rgba(226,255,255,.45),transparent 70%);
  animation:deepbub 9s linear infinite}
@keyframes deepbub{from{transform:translateY(4cqw);opacity:0}
  16%{opacity:1}84%{opacity:1}to{transform:translateY(-16cqw);opacity:0}}
/* kelp down one side, leaning */
.theme-deep>.env>.e5{left:auto;right:-1cqw;bottom:auto;top:0;height:var(--deck);width:12cqw;background:
  radial-gradient(1.3cqw 13cqw at 40% 100%,rgba(2,26,26,.85),transparent 72%),
  radial-gradient(1cqw 10cqw at 72% 100%,rgba(2,26,26,.7),transparent 72%);
  transform-origin:50% 100%;animation:deepkelp 8s ease-in-out infinite alternate}
@keyframes deepkelp{from{transform:skewX(3deg)}to{transform:skewX(-4deg)}}
/* the deep water under the ledge */
.theme-deep>.env>.e6{top:var(--deck);background:linear-gradient(180deg,#041a26,#010a10 74%)}
/* the sand ledge, and the tank's green-edged bottom rail */
.theme-deep>.fg>.f1{left:0;right:0;top:calc(var(--deck) - 3px);height:12px;background:
  linear-gradient(180deg,#5d8f9c 0 14%,#3d6d7a 14% 40%,#255260 40% 72%,#0f2c38 72%,#08171f 100%),
  repeating-linear-gradient(96deg,rgba(0,16,26,.28) 0 .6cqw,transparent .6cqw 2.2cqw);
  box-shadow:inset 0 .18cqw 0 rgba(190,252,255,.5),0 .4cqw 1.6cqw rgba(0,0,0,.55)}
.theme-deep>.fg>.f2{left:0;right:0;bottom:0;height:1.3cqw;background:linear-gradient(180deg,
  rgba(214,255,252,.55) 0 20%,rgba(72,196,190,.5) 20% 56%,rgba(2,18,26,.9) 56% 100%)}
.theme-deep .invitem .kick{color:#8ff0ff}

/* ===================================================================
   7 · MAGMA CORE — $280,000
   Rebuilt: the lake belongs BEHIND the products, not under them. It was
   filling the recess, which is the one zone that has to stay dark because
   the labels live there — so the labels sat on molten rock and the room
   read as broken.

   Now: cave wall up top, the lake burning across the back at deck height,
   a basalt ledge you stand on, and cold dark rock underneath for the type.
   Still the only room lit from below.
   =================================================================== */
.theme-magma{--pshadow:drop-shadow(0 -5px 10px rgba(255,146,30,.85)) drop-shadow(0 9px 9px rgba(0,0,0,.9));
  --contact:radial-gradient(ellipse at center,rgba(255,130,20,.55),transparent 72%);--halo:.3;
  background:linear-gradient(180deg,#0b0504 0%,#1a0906 40%,#2a0e05 66%,#160705 82%,#0a0403 100%)}
/* the heat washing up the cave wall from the lake */
.theme-magma>.env{background:
  radial-gradient(120% 30% at 50% calc(var(--deck) - 22px),rgba(255,140,40,.5),rgba(255,80,10,.12) 52%,transparent 78%),
  radial-gradient(120% 76% at 50% 30%,transparent 30%,rgba(0,0,0,.76) 96%)}
/* basalt plates in the wall, and the cooling cracks between them */
.theme-magma>.env>.e1{bottom:auto;height:calc(var(--deck) - 34px);opacity:.85;background:
  linear-gradient(72deg,transparent 21.6%,rgba(0,0,0,.75) 22%,transparent 22.7%),
  linear-gradient(-63deg,transparent 44.3%,rgba(0,0,0,.7) 44.6%,transparent 45.2%),
  linear-gradient(101deg,transparent 68.4%,rgba(0,0,0,.72) 68.7%,transparent 69.3%),
  repeating-linear-gradient(94deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3.4cqw)}
/* those cracks lit from behind, breathing */
.theme-magma>.env>.e2{bottom:auto;height:calc(var(--deck) - 34px);mix-blend-mode:screen;
  animation:magpulse 4.6s ease-in-out infinite;background:
  linear-gradient(72deg,transparent 21.8%,rgba(255,150,45,.6) 22.05%,transparent 22.35%),
  linear-gradient(-63deg,transparent 44.45%,rgba(255,130,30,.5) 44.65%,transparent 44.9%),
  linear-gradient(101deg,transparent 68.55%,rgba(255,170,60,.45) 68.75%,transparent 69%);
  -webkit-mask:linear-gradient(0deg,#000,rgba(0,0,0,.25) 70%,transparent);
  mask:linear-gradient(0deg,#000,rgba(0,0,0,.25) 70%,transparent)}
@keyframes magpulse{0%,100%{opacity:.55}50%{opacity:1}}
/* THE LAKE — a band burning across the back, right behind their feet.
   Melt underneath, dark crust plates drifting on top of it; the glowing
   gaps between the plates are the lake showing through. */
.theme-magma>.env>.e3{bottom:auto;top:calc(var(--deck) - 46px);height:50px;background:
  radial-gradient(9cqw 2.2cqw at 8% 34%,#150806 0 58%,rgba(21,8,6,0) 68%),
  radial-gradient(12cqw 2.6cqw at 33% 60%,#180b08 0 56%,rgba(24,11,8,0) 66%),
  radial-gradient(8cqw 2cqw at 58% 30%,#120705 0 58%,rgba(18,7,5,0) 68%),
  radial-gradient(13cqw 2.8cqw at 84% 62%,#160a07 0 56%,rgba(22,10,7,0) 66%),
  radial-gradient(10cqw 2.2cqw at 46% 84%,#0f0604 0 58%,rgba(15,6,4,0) 68%),
  linear-gradient(180deg,#4a1403 0%,#a83206 16%,#ff7a0c 40%,#ffb01f 62%,#ffe066 80%,#fff6cc 100%);
  box-shadow:0 0 3cqw rgba(255,140,30,.75),0 0 8cqw rgba(255,90,10,.4);
  animation:magflow 26s ease-in-out infinite alternate}
@keyframes magflow{to{background-position:5cqw 0,-6cqw 0,4cqw 0,-5cqw 0,3.4cqw 0,0 0}}
/* the hottest seams riding the plate edges */
.theme-magma>.env>.e4{bottom:auto;top:calc(var(--deck) - 46px);height:50px;mix-blend-mode:screen;opacity:.8;
  animation:magveins 9s ease-in-out infinite alternate;background:
  radial-gradient(9.3cqw 2.4cqw at 8% 34%,transparent 0 57%,rgba(255,206,96,.8) 60%,transparent 70%),
  radial-gradient(12.3cqw 2.8cqw at 33% 60%,transparent 0 55%,rgba(255,180,60,.75) 58%,transparent 68%),
  radial-gradient(13.3cqw 3cqw at 84% 62%,transparent 0 55%,rgba(255,190,70,.65) 58%,transparent 68%)}
@keyframes magveins{to{opacity:.4;filter:blur(.3cqw)}}
/* embers climbing off it, past the products */
.theme-magma>.env>.e5{bottom:auto;height:var(--deck);mix-blend-mode:screen;background:
  radial-gradient(.4cqw .4cqw at 21% 76%,rgba(255,206,110,.95),transparent 66%),
  radial-gradient(.28cqw .28cqw at 40% 58%,rgba(255,166,60,.85),transparent 66%),
  radial-gradient(.34cqw .34cqw at 68% 82%,rgba(255,220,140,.9),transparent 66%),
  radial-gradient(.24cqw .24cqw at 85% 50%,rgba(255,160,50,.8),transparent 66%),
  radial-gradient(.3cqw .3cqw at 54% 66%,rgba(255,186,80,.75),transparent 66%);
  animation:magember 7s linear infinite}
@keyframes magember{from{transform:translateY(5cqw);opacity:0}
  12%{opacity:1}82%{opacity:1}to{transform:translateY(-18cqw) translateX(2.4cqw);opacity:0}}
/* cold rock under the ledge — the labels need somewhere dark to sit */
.theme-magma>.env>.e6{top:var(--deck);background:
  linear-gradient(180deg,#1e0d09 0%,#120705 34%,#080302 100%),
  linear-gradient(66deg,transparent 27.6%,rgba(0,0,0,.7) 28%,transparent 28.8%),
  linear-gradient(-58deg,transparent 63.4%,rgba(0,0,0,.6) 63.7%,transparent 64.4%)}
/* the basalt ledge, its lip catching the lake */
.theme-magma>.fg>.f1{left:-3%;right:-3%;top:calc(var(--deck) - 5px);height:21px;
  background:linear-gradient(180deg,#3c1e17 0%,#26130f 20%,#150908 54%,#080302 100%);
  clip-path:polygon(0 24%,8% 7%,19% 22%,31% 4%,44% 20%,57% 2%,70% 19%,83% 6%,94% 21%,100% 9%,100% 100%,0 100%);
  box-shadow:0 .7cqw 2.2cqw rgba(0,0,0,.85)}
.theme-magma>.fg>.f2{left:-3%;right:-3%;top:calc(var(--deck) - 5px);height:21px;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,178,70,.95) 0 12%,rgba(255,110,20,.35) 12% 30%,transparent 48%);
  clip-path:polygon(0 24%,8% 7%,19% 22%,31% 4%,44% 20%,57% 2%,70% 19%,83% 6%,94% 21%,100% 9%,100% 100%,0 100%)}
.theme-magma .invitem .kick{color:#ffc06a}

/* ===================================================================
   8 · LOW ORBIT — $1,000,000
   Earth: ocean, continents, cloud swirls, the day/night terminator, and
   the cyan atmospheric hairline that separates a planet from a circle.
   Nothing stands on anything.
   =================================================================== */
.theme-orbit{--pshadow:drop-shadow(-4px 2px 8px rgba(96,196,255,.65)) drop-shadow(4px 2px 7px rgba(255,222,164,.45));
  --contact:none;--halo:.3;
  background:radial-gradient(150% 110% at 26% 2%,#0c142e 0%,#060a1c 34%,#02040e 68%,#000103 100%)}
/* nebula and the milky way */
.theme-orbit>.env{background:
  linear-gradient(74deg,transparent 26%,rgba(150,150,220,.08) 36%,rgba(200,190,255,.12) 43%,
    rgba(150,150,220,.07) 50%,transparent 62%),
  radial-gradient(40% 34% at 78% 10%,rgba(126,74,206,.2),transparent 70%),
  radial-gradient(32% 28% at 16% 22%,rgba(40,140,196,.16),transparent 72%)}
/* stars at three brightnesses, drifting */
.theme-orbit>.env>.e1{background:
  radial-gradient(1.5px 1.5px at 12% 14%,#fff,transparent),radial-gradient(1.6px 1.6px at 57% 17%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 88% 8%,#fff,transparent),radial-gradient(1.4px 1.4px at 33% 33%,#ffeede,transparent),
  radial-gradient(1.2px 1.2px at 30% 7%,rgba(255,255,255,.85),transparent),
  radial-gradient(1.1px 1.1px at 76% 12%,rgba(214,232,255,.9),transparent),
  radial-gradient(1.2px 1.2px at 44% 26%,rgba(255,255,255,.8),transparent),
  radial-gradient(1.1px 1.1px at 8% 38%,rgba(255,242,222,.9),transparent),
  radial-gradient(1px 1px at 66% 36%,rgba(255,255,255,.7),transparent),
  radial-gradient(1px 1px at 24% 23%,rgba(255,255,255,.6),transparent),
  radial-gradient(1px 1px at 94% 24%,rgba(255,255,255,.6),transparent),
  radial-gradient(1px 1px at 51% 9%,rgba(255,255,255,.5),transparent);
  animation:orbdrift 150s ease-in-out infinite alternate}
@keyframes orbdrift{to{transform:translateX(-3cqw)}}
/* EARTH — ocean, then land, sitting so its limb rises behind the products */
.theme-orbit>.env>.e2{left:-22%;right:-22%;bottom:auto;top:calc(var(--deck) - 26px);height:88cqw;border-radius:50%;
  background:
    radial-gradient(8cqw 3cqw at 27% 5%,#4a7a42 0 52%,rgba(74,122,66,0) 62%),
    radial-gradient(5cqw 2.1cqw at 36% 10%,#5d7f3e 0 50%,rgba(93,127,62,0) 62%),
    radial-gradient(10cqw 2.7cqw at 58% 4%,#3f6d3c 0 52%,rgba(63,109,60,0) 63%),
    radial-gradient(4.4cqw 1.8cqw at 68% 11%,#7d7a44 0 50%,rgba(125,122,68,0) 62%),
    radial-gradient(6cqw 2.3cqw at 14% 12%,#43713e 0 52%,rgba(67,113,62,0) 63%),
    radial-gradient(7cqw 2cqw at 82% 8%,#4d7540 0 52%,rgba(77,117,64,0) 63%),
    radial-gradient(120% 74% at 44% 2%,#2f83c4 0%,#1c5c98 22%,#12406f 44%,#0a2848 68%,#05152a 88%)}
/* cloud swirls, turning */
.theme-orbit>.env>.e3{left:-22%;right:-22%;bottom:auto;top:calc(var(--deck) - 26px);height:88cqw;border-radius:50%;overflow:hidden;
  background:
    radial-gradient(9cqw 1.8cqw at 20% 6%,rgba(255,255,255,.6) 0 44%,rgba(255,255,255,0) 66%),
    radial-gradient(11cqw 1.5cqw at 48% 9%,rgba(255,255,255,.5) 0 42%,rgba(255,255,255,0) 66%),
    radial-gradient(7cqw 1.3cqw at 73% 5%,rgba(255,255,255,.55) 0 44%,rgba(255,255,255,0) 66%),
    radial-gradient(5cqw 1.1cqw at 89% 12%,rgba(255,255,255,.45) 0 44%,rgba(255,255,255,0) 66%);
  animation:orbspin 200s ease-in-out infinite alternate}
@keyframes orbspin{to{background-position:-22cqw 0,-22cqw 0,-22cqw 0,-22cqw 0}}
/* The atmosphere goes on BEFORE the terminator, so night dims it the way it
   dims everything else. On top it stayed the same brightness clear across the
   night side, which is why it read as a drawn line instead of air. It's softer
   too — no hard 3px core, just the glow. */
.theme-orbit>.env>.e4{left:-22%;right:-22%;bottom:auto;top:calc(var(--deck) - 26px);height:88cqw;border-radius:50%;
  box-shadow:inset 0 1px 0 rgba(226,250,255,.65),inset 0 7px 12px rgba(120,214,255,.42),
    0 0 6px rgba(150,230,255,.5),0 0 22px rgba(84,186,255,.4),0 0 56px rgba(40,132,235,.3)}
/* the terminator, night creeping in from the right */
.theme-orbit>.env>.e5{left:-22%;right:-22%;bottom:auto;top:calc(var(--deck) - 26px);height:88cqw;border-radius:50%;
  background:linear-gradient(96deg,transparent 30%,rgba(0,4,14,.52) 60%,rgba(0,2,8,.9) 86%)}
/* The sun cresting the limb. The anamorphic streak is gone — it was a 2px line
   at a fixed height running the full width, which is a second straight line
   across the frame and reads as a glitch. The bloom does the job. */
.theme-orbit>.env>.e6{background:
  radial-gradient(3.4cqw 3.4cqw at 17% calc(var(--deck) - 14px),#fff 0 26%,#fff2cf 44%,rgba(255,208,128,.45) 68%,transparent 80%),
  radial-gradient(9cqw 5cqw at 17% calc(var(--deck) - 14px),rgba(255,226,168,.55) 0 10%,rgba(255,190,110,.18) 42%,transparent 74%),
  radial-gradient(1.8cqw 1.8cqw at 44% calc(var(--deck) - 46px),rgba(130,215,255,.18),transparent 70%),
  radial-gradient(1.2cqw 1.2cqw at 62% calc(var(--deck) - 74px),rgba(255,170,215,.14),transparent 70%)}
.theme-orbit>.fg>.f1{inset:0;background:radial-gradient(126% 100% at 50% 40%,transparent 52%,rgba(0,0,4,.55) 100%)}
/* Earth's ocean runs on down past the deck, and it's mid-blue rather than dark.
   Every other room has a dark recess for the labels; this one gets a scrim so
   the type reads the same here as everywhere else. */
.theme-orbit>.fg>.f2{left:0;right:0;top:var(--deck);bottom:0;
  background:linear-gradient(180deg,rgba(1,4,14,.35),rgba(1,3,10,.78) 46%,rgba(0,2,7,.9))}
/* nothing is standing on anything */
.theme-orbit .prodwrap{animation:orbfloat 7.4s ease-in-out infinite;
  animation-delay:calc(var(--n,0) * .7s)}
@keyframes orbfloat{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-9px) rotate(.8deg)}}
.theme-orbit .invitem .kick{color:#9fd8ff}

@media (prefers-reduced-motion:reduce){
  .theme-deep>.env>i,.theme-magma>.env>i,.theme-orbit>.env>i,.theme-neon>.env>.e3,
  .theme-orbit .prodwrap{animation:none}
}