/* ============================================================
   LITTLE RELIEF - SINGLE FILE BUILD
   Everything inline. No imports, no modules, no external files.
   Every element is visible with zero JS: JS only adds motion
   and navigation on top of an already-complete page.
   ============================================================ */
:root{
  --ink-dark:#151310; --ink-light:#F1F2EE; --signal:#FF3B00;
  --cream:#F0E3D2; --menu-bg:#0B0B0C;
  --field:var(--cream); --ink:var(--ink-dark);
  --load:cubic-bezier(.7,0,.84,0);
  --relief:cubic-bezier(.16,1,.3,1);
  --snap:cubic-bezier(.2,1.6,.4,1);
  --blue:#2B57D6; --blue-d:#16308F; --blue-h:#7EA0F7;
  --purple:#8B4FD8; --purple-d:#512792; --purple-h:#C7A6F7;
  --yellow:#F8C81B; --yellow-d:#B58800; --yellow-h:#FFE894;
  --green:#7DC13E; --green-d:#4A8018; --green-h:#BCE889;
  --orange:#F2591F; --orange-d:#A32E05; --orange-h:#FF9E6C;
  --pink:#F0619C; --pink-d:#B32E62; --pink-h:#FFA8CB;
  --black:#2A2622; --black-d:#000000; --black-h:#5C544C;
  --lime:#CBDE21; --lime-d:#93A400; --lime-dd:#758400;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--field);color:var(--ink);font-family:"Space Mono",ui-monospace,monospace;
  overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  transition:background-color .28s var(--relief),color .28s var(--relief)}

/* the single mount point - always present, never display:none */
#app{position:relative;z-index:1;height:100dvh;width:100%}

.view{position:relative;height:100dvh;width:100%;opacity:1;transform:none}
.view.enter-anim{animation:viewIn .34s var(--relief) both}
@keyframes viewIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}

.u{font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(10px,1.55vmin,13px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

:where(button,a,[tabindex]):focus-visible{outline:3px solid var(--signal);outline-offset:4px;border-radius:2px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ============================================================
   ENTER
   ============================================================ */
.enterView{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2vh 5vw;overflow:hidden}

.eBlob{position:absolute;z-index:1;pointer-events:none;filter:drop-shadow(0 18px 26px rgba(96,64,32,.24))}
.eBlob--blue{left:-9vw;top:14%;width:min(26vw,330px);min-width:160px}
.eBlob--orange{right:-7vw;bottom:-10vh;width:min(32vw,420px);min-width:200px}

.eTitle{position:relative;z-index:8;font-family:"Fredoka",system-ui,sans-serif;font-weight:700;
  text-transform:uppercase;text-align:center;line-height:.87;user-select:none}
.eRow{display:block;white-space:nowrap}
.eRow--a{font-size:clamp(2.3rem,min(10.4vw,13vh),9.4rem);letter-spacing:-.035em}
.eRow--b{font-size:clamp(2.7rem,min(12.1vw,15.2vh),10.9rem);letter-spacing:-.03em;margin-top:-.09em}
.eL{display:inline-block;color:var(--c);transform:rotate(var(--r,0deg)) translateY(var(--y,0));
  text-shadow:-.010em -.012em 0 var(--hi),.014em .016em 0 var(--d),.028em .032em 0 var(--d),
   .042em .048em 0 var(--d),.056em .064em 0 var(--d),.070em .080em 0 var(--d),.084em .096em 0 var(--d),
   .098em .112em 0 var(--d),.112em .128em 0 var(--d),.126em .144em 0 var(--d),
   .13em .21em .17em rgba(96,64,32,.36)}

.eSun{position:absolute;z-index:9;pointer-events:none;left:-7%;top:-30%;width:clamp(42px,6.6vw,98px);
  transform:rotate(-8deg);filter:drop-shadow(0 .28em 0 var(--orange-d)) drop-shadow(0 .7em .9em rgba(96,64,32,.3))}
.eLines{position:absolute;z-index:9;right:-3%;top:-27%;pointer-events:none;display:flex;gap:.34em;align-items:flex-start}
.eLines i{display:block;background:#14110E;border-radius:99px;width:clamp(6px,.66vw,10px);
  height:clamp(18px,2.3vw,34px);box-shadow:0 .16em .28em rgba(96,64,32,.35)}
.eLines i:nth-child(1){transform:rotate(-27deg) translateY(.25em)}
.eLines i:nth-child(2){transform:rotate(-5deg)}
.eLines i:nth-child(3){transform:rotate(17deg) translateY(.25em)}

.eSub{position:relative;z-index:8;margin-top:clamp(18px,3.4vh,42px);font-family:"Space Mono",monospace;
  font-weight:700;font-size:clamp(10px,min(1.5vw,2vh),19px);letter-spacing:.19em;line-height:1.75;
  text-transform:uppercase;text-align:center;color:#14110E;max-width:32ch}

.eBtnWrap{position:relative;z-index:8;margin-top:clamp(20px,3.6vh,46px)}
.eBtn{--lift:0px;--sc:1;display:flex;align-items:center;justify-content:center;gap:.62em;
  font-family:"Fredoka",system-ui,sans-serif;font-weight:700;font-size:clamp(1.3rem,min(3.4vw,4.5vh),3.1rem);
  letter-spacing:.02em;text-transform:uppercase;color:#14110E;padding:.46em 1.18em .52em;border-radius:999px;
  background:linear-gradient(172deg,#E2EF63 0%,var(--lime) 44%,#B3C60F 100%);
  box-shadow:inset 0 -.15em .2em rgba(88,102,0,.34),inset 0 .15em .24em rgba(255,255,255,.58),
    0 .22em 0 var(--lime-d),0 .36em 0 var(--lime-dd),0 .52em 1.05em rgba(96,64,32,.34);
  transform:translate3d(0,var(--lift),0) scale(var(--sc));
  transition:transform .3s var(--snap),box-shadow .3s var(--relief),filter .3s var(--relief)}
.eBtn svg{width:1.04em;height:auto;transition:transform .3s var(--relief)}
.eBtn svg path{stroke:#14110E;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.eBtn:hover{--lift:-.11em;filter:brightness(1.05) saturate(1.06)}
.eBtn:hover svg{transform:translateX(.18em)}
.eBtn.is-press{--lift:.18em;--sc:.955;transition:transform .1s var(--load),box-shadow .1s var(--load)}
.eSign{position:relative;z-index:8;margin-top:clamp(12px,2.2vh,28px);width:clamp(74px,9vw,132px)}
.eSign path{stroke:#14110E;stroke-width:6;stroke-linecap:round;fill:none}

@media (max-width:820px){
  .eRow--a{font-size:clamp(2.3rem,14.5vw,5.6rem)}
  .eRow--b{font-size:clamp(2.7rem,17vw,6.6rem)}
  .eBlob--blue{width:44vw;left:-17vw;top:6%}
  .eBlob--orange{width:56vw;right:-17vw;bottom:-5vh}
  .eSub{font-size:clamp(9px,2.7vw,13px);letter-spacing:.16em;max-width:24ch}
  .eBtn{font-size:clamp(1.2rem,6.2vw,2rem)}
}

/* ============================================================
   ROOM MENU
   ============================================================ */
.menuView{overflow-y:auto;overflow-x:hidden;padding:clamp(8px,1.1vmin,14px);background:var(--menu-bg)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);
  gap:clamp(4px,.7vmin,8px);min-height:calc(100dvh - clamp(16px,2.2vmin,28px))}

.card{position:relative;overflow:hidden;border-radius:clamp(12px,1.6vmin,20px);
  background:var(--c);color:var(--ci);box-shadow:0 .4vmin 1vmin rgba(0,0,0,.35);
  transform:translate3d(0,0,0);transition:transform .26s var(--relief),box-shadow .26s var(--relief)}
.card:hover,.card:focus-visible{transform:translate3d(0,-6px,0);box-shadow:0 1.2vmin 2.4vmin rgba(0,0,0,.42)}
.card:active{transform:translate3d(0,-2px,0) scale(.99);transition:transform .1s var(--load)}

.card__head{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:baseline;gap:.6em;
  padding:clamp(9px,1.6vmin,18px) clamp(10px,1.8vmin,20px) 0;pointer-events:none}
.card__n{font-family:"Space Mono",monospace;font-weight:700;font-size:clamp(9px,1.25vmin,13px);
  letter-spacing:.14em;opacity:.62}
.card__title{font-family:"Fredoka",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1;font-size:clamp(11px,1.75vmin,17px);transition:transform .26s var(--relief)}
.card:hover .card__title{transform:translateX(3px)}

.card__grip{position:absolute;right:clamp(9px,1.6vmin,18px);top:clamp(10px,1.7vmin,19px);z-index:4;
  display:flex;flex-direction:column;gap:3px;pointer-events:none;opacity:.5}
.card__grip i{display:block;width:clamp(13px,1.7vmin,18px);height:2px;border-radius:1px;background:currentColor}

.card__hero{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:6% 6% 5%}
.card__hero svg{width:100%;height:100%;filter:drop-shadow(0 .9vmin 1vmin rgba(0,0,0,.22));
  transition:transform .32s var(--relief)}
.card:hover .card__hero svg{transform:scale(1.05) rotate(-2deg)}
.card__hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 32% 22%,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 60%)}
.card__hero::after{content:"";position:absolute;left:14%;right:14%;bottom:9%;height:14%;pointer-events:none;
  border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.20) 0%,rgba(0,0,0,0) 72%)}

.card__snd{position:absolute;right:clamp(8px,1.4vmin,14px);bottom:clamp(8px,1.4vmin,14px);z-index:5;
  width:clamp(22px,3vmin,30px);height:clamp(22px,3vmin,30px);border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.16);color:currentColor;
  transition:background .18s var(--relief),transform .18s var(--relief)}
.card__snd:hover{background:rgba(0,0,0,.28);transform:scale(1.08)}
.card__snd svg{width:52%;height:52%}
.card__snd path{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card__snd .wave{opacity:.28;transition:opacity .18s linear}
.card__snd[aria-pressed="true"] .wave{opacity:1}

@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:minmax(180px,1fr)}
}
@media (max-width:700px){
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(150px,1fr)}
}
@media (max-width:420px){ .grid{grid-template-columns:1fr;grid-auto-rows:minmax(160px,1fr)} }

/* ============================================================
   ACTIVE ROOM (placeholder)
   ============================================================ */
.roomView{position:relative}

/* HIERARCHY: 1 huge hero, 2 small room title, 3 tiny utility buttons. Nothing else. */
.room__title{position:absolute;z-index:10;left:0;right:0;top:3.4vmin;
  pointer-events:none;user-select:none;text-align:center}
.room__title span{font-family:"Space Mono",monospace;font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:clamp(10px,1.35vmin,14px);color:var(--ink);opacity:.82}

/* ============================================================
   CARD CAPSULE  (editorial pill, legible sans-serif)
   Lives below the room title inside each card. Never overlaps
   the hero. Decorative only - not independently clickable.
   ============================================================ */
.card__capsule{
  position:absolute;left:clamp(9px,1.5vmin,18px);right:clamp(9px,1.5vmin,18px);
  z-index:4;pointer-events:none;
  /* title row + card padding + 14px gap for breathing room */
  top:calc(clamp(9px,1.6vmin,18px) + clamp(18px,3vmin,32px) + clamp(12px,1.8vmin,16px));
  opacity:0;transform:translateY(8px);
  transition:opacity .38s var(--relief) .08s, transform .38s var(--relief) .08s
}
.card__capsule span{
  display:inline-block;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  padding:clamp(8px,1.2vmin,13px) clamp(14px,2vmin,18px);
  font-family:"Inter","Geist","General Sans","Instrument Sans","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:clamp(14px,1.55vmin,16px);
  font-weight:500;
  line-height:1.45;
  letter-spacing:0;
  color:var(--ci);
  opacity:.82;
  white-space:pre-line;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 6px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.09)
}
/* light-ink dark cards: slightly higher opacity for contrast */
.card[style*="--ci: #1"] .card__capsule span,
.card[style*="--ci: #0"] .card__capsule span{ opacity:.88 }
/* light-field cards: invert pill tint so border still reads */
.card[style*="--ci: #F"] .card__capsule span,
.card[style*="--ci: #E"] .card__capsule span{
  background:rgba(0,0,0,.07);
  border-color:rgba(0,0,0,.10)
}
.menuView .card .card__capsule{ opacity:1; transform:translateY(0) }
.card:hover .card__capsule span,
.card:focus-visible .card__capsule span{ opacity:.94 }

/* per-room capsule text color overrides */
.card[data-room="windows"] .card__capsule span{ color:#151310 }
.card[data-room="smash"]   .card__capsule span{ color:#F1F2EE }
.card[data-room="clean"]   .card__capsule span{ color:#F1F2EE }
@media (max-width:600px){
  .card__capsule span{ font-size:14px; padding:7px 13px }
}

/* tiny, icon-only utility buttons - one per corner, nothing wider */
.util{position:fixed;z-index:22;width:clamp(30px,3.6vmin,40px);height:clamp(30px,3.6vmin,40px);
  border-radius:50%;display:grid;place-items:center;color:var(--ink);
  background:rgba(0,0,0,.10);
  transition:background .18s var(--relief),transform .18s var(--relief),opacity .18s var(--relief)}
.util:hover{background:rgba(0,0,0,.2);transform:translateY(-1px)}
.util:disabled{opacity:.25;pointer-events:none}
.util svg{width:44%;height:44%}
.util path,.util circle{stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.util--tl{left:3vmin;top:3vmin} .util--tr{right:3vmin;top:3vmin}
.util--bl{left:3vmin;bottom:3vmin} .util--br1{right:calc(3vmin + 44px);bottom:3vmin}
.util--br2{right:3vmin;bottom:3vmin}

.util--snd .wave{opacity:.3;transition:opacity .18s linear}
.util--snd[aria-pressed="true"] .wave{opacity:1}
.util--snd[aria-pressed="true"]{background:rgba(255,59,0,.16);color:var(--signal)}

.ph{position:absolute;inset:0;display:grid;place-items:center}
.ph__obj{--lift:0px;width:min(58vmin,62vw);aspect-ratio:1;border-radius:22%;background:var(--ink);opacity:.92;
  box-shadow:0 1.6vmin 0 rgba(0,0,0,.22),0 3vmin 4vmin rgba(0,0,0,.22);display:grid;place-items:center;
  gap:1.4vmin;transform:translate3d(0,var(--lift),0);transition:transform .32s var(--relief)}
.ph__obj:hover{--lift:-.9vmin}
.ph__obj.is-press{--lift:1.2vmin;transition:transform .09s var(--load)}
.ph__n{font-family:"Fredoka",system-ui,sans-serif;font-weight:700;font-size:min(22vmin,24vw);
  line-height:.8;color:var(--field)}
.ph__t{font-family:"Space Mono",monospace;font-weight:700;font-size:clamp(9px,1.5vmin,13px);
  letter-spacing:.2em;color:var(--field);opacity:.6}

/* ============================================================
   ROOM 01 - BUBBLE POP
   One hero. The sheet occupies ~70% of the viewport, centered.
   ============================================================ */
.popStage{position:absolute;inset:0;display:grid;place-items:center}
.popSheet{position:relative;width:min(74vmin,86vw);height:min(74vmin,86vh);
  border-radius:clamp(14px,2vmin,26px);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),
             0 4vmin 8vmin rgba(0,10,60,.35);
  touch-action:none}
.popCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit;outline:0}
.popCanvas:focus-visible{outline:3px solid var(--signal);outline-offset:-6px;border-radius:inherit}

/* ============================================================
   ROOM 04 - WINDOWS
   ============================================================ */
.winFrame{position:relative;width:min(60vmin,72vw);height:min(60vmin,60vh);
  border-radius:clamp(28px,5vmin,60px);
  background:#EDE6DA;
  box-shadow:0 .5vmin 0 rgba(0,0,0,.14) inset, 0 4vmin 8vmin rgba(0,0,0,.30);
  padding:clamp(10px,1.6vmin,20px);flex:none}
.winCanvas{width:100%;height:100%;display:block;border-radius:clamp(18px,3.4vmin,42px);
  cursor:pointer;outline:0}
.winCanvas:focus-visible{outline:3px solid var(--signal);outline-offset:-6px;border-radius:clamp(18px,3.4vmin,42px)}
.winThumbs{display:flex;gap:clamp(8px,1.4vmin,16px);flex:none}
.winThumb{width:clamp(48px,7vmin,72px);height:clamp(34px,5vmin,50px);border:0;padding:0;
  border-radius:clamp(8px,1.2vmin,12px);overflow:hidden;cursor:pointer;background:var(--bg);
  box-shadow:0 .3vmin .8vmin rgba(0,0,0,.25);opacity:.72;
  transition:opacity .2s var(--relief),transform .2s var(--relief),box-shadow .2s var(--relief)}
.winThumb:hover{opacity:.92;transform:translateY(-2px)}
.winThumb[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2.5px var(--signal),0 .3vmin .8vmin rgba(0,0,0,.3)}
.winThumbCanvas{width:100%;height:100%;display:block;pointer-events:none}

/* ============================================================
   ROOM 07 - SWITCH  (real DOM controls, not canvas)
   ============================================================ */
.swRoot{position:relative;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(20px,3.6vmin,48px);
  padding:4vmin 4vmin 3vmin;box-sizing:border-box}

.swLever{-webkit-appearance:none;appearance:none;border:0;padding:0;background:none;
  cursor:grab;touch-action:none;width:clamp(260px,36vmin,480px);flex:none}
.swLever:active{cursor:grabbing}
.swLeverPlate{position:relative;display:block;width:100%;aspect-ratio:.82;
  border-radius:clamp(18px,2.6vmin,30px);
  background:linear-gradient(135deg,#B7BFCC 0%,#8890A0 45%,#5C6472 100%);
  box-shadow:0 .5vmin 0 rgba(0,0,0,.16) inset,0 3vmin 5vmin rgba(0,0,0,.38)}
.swLeverPlate::before,.swLeverPlate::after{content:"";position:absolute;
  width:2.6%;aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.28);top:6%}
.swLeverPlate::before{left:9%} .swLeverPlate::after{right:9%}
.swLeverSlot{position:absolute;left:50%;top:16%;width:30%;height:68%;
  transform:translateX(-50%);border-radius:999px;background:#262A32;
  box-shadow:inset 0 .6vmin 1.4vmin rgba(0,0,0,.6)}
.swLeverHandle{position:absolute;left:50%;bottom:4%;width:58%;height:88%;
  transform-origin:50% 100%;transform:translateX(-50%) rotate(-30deg);
  border-radius:999px;
  background:linear-gradient(90deg,#EDEFF2 0%,#B9C0C8 45%,#828A94 100%);
  box-shadow:0 .6vmin 1.4vmin rgba(0,0,0,.4)}
.swLeverHandle::after{content:"";position:absolute;left:50%;top:0;width:150%;
  aspect-ratio:1;border-radius:50%;transform:translate(-50%,-42%);background:#6B7280;
  box-shadow:inset 0 -.3vmin .6vmin rgba(0,0,0,.3)}
.swLeverLed{position:absolute;left:50%;top:11%;width:9%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;background:#3A4038}
.swLeverLed::after{content:"";position:absolute;inset:-160%;border-radius:50%;
  background:radial-gradient(circle,rgba(120,230,140,.75) 0%,rgba(120,230,140,0) 70%);
  opacity:0;transition:opacity .3s ease}
.swLeverLed.is-lit{background:#5CE87A}
.swLeverLed.is-lit::after{opacity:1}

.swPanel{position:relative;display:flex;align-items:center;justify-content:space-evenly;
  width:clamp(320px,58vmin,760px);padding:clamp(14px,2.4vmin,28px) clamp(10px,2vmin,20px);
  border-radius:clamp(20px,3vmin,34px);background:#241A38;
  box-shadow:0 1.4vmin 2.6vmin rgba(0,0,0,.32);flex:none;
  transition:background .3s ease}
.swPanel.is-lit{background:#2E2258}

.swBtn,.swRocker,.swKnob{-webkit-appearance:none;appearance:none;border:0;padding:0;
  background:none;cursor:pointer;touch-action:none;flex:none}

.swBtn{width:clamp(96px,13.5vmin,152px);aspect-ratio:1;position:relative}
.swBtnRing{position:absolute;inset:0;border-radius:50%;background:#101014;
  box-shadow:0 .6vmin 1.2vmin rgba(0,0,0,.4)}
.swBtnRing::after{content:"";position:absolute;inset:-10%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,120,90,.55) 0%,rgba(255,120,90,0) 70%);
  opacity:0;transition:opacity .12s linear}
.swBtnRing.is-flash::after{opacity:1}
.swBtnCap{position:absolute;inset:10%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FF9E7C 0%,#E8541F 55%,#C13A0E 100%);
  box-shadow:0 .9vmin 0 #9B2E0A,0 1.3vmin 2vmin rgba(0,0,0,.4);
  transform:translateY(0);
  transition:transform .38s cubic-bezier(.34,1.8,.64,1),box-shadow .38s cubic-bezier(.34,1.8,.64,1)}
.swBtnCap.is-pressed{transform:translateY(28%);
  box-shadow:0 .15vmin 0 #9B2E0A,0 .3vmin .6vmin rgba(0,0,0,.3);
  transition:transform .07s ease-out,box-shadow .07s ease-out}

.swRocker{width:clamp(78px,11vmin,128px);height:clamp(112px,15.6vmin,172px);position:relative}
.swRockerBase{position:absolute;inset:0;border-radius:clamp(12px,1.6vmin,18px);
  background:#17181D;box-shadow:inset 0 .3vmin .8vmin rgba(0,0,0,.5)}
.swRockerPaddle{position:absolute;left:8%;right:8%;top:12%;bottom:12%;
  border-radius:clamp(9px,1.2vmin,14px);
  background:linear-gradient(180deg,#5A5F6A 0%,#2C2F36 100%);
  box-shadow:0 .5vmin 1vmin rgba(0,0,0,.35);
  transform:rotate(-9deg) translateY(-6%);
  transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
.swRockerPaddle.is-on{transform:rotate(9deg) translateY(6%)}
.swRockerDot{position:absolute;left:50%;top:20%;width:14%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;background:rgba(255,216,107,.16);
  transition:background .2s linear}
.swRockerDot.is-lit{background:#FFD86B}

.swKnob{width:clamp(104px,14.6vmin,166px);aspect-ratio:1;position:relative}
.swKnobBase{position:absolute;inset:0;border-radius:50%;background:#101014;
  box-shadow:0 .7vmin 1.3vmin rgba(0,0,0,.4)}
.swKnobDial{position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#DDE1E6 0%,#9BA1AC 55%,#6B7280 100%);
  transform:rotate(0deg)}
.swKnobDial::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(rgba(0,0,0,.08) 0deg 1.2deg,transparent 1.2deg 18deg)}
.swKnobPointer{position:absolute;left:50%;top:8%;width:9%;height:34%;
  transform:translateX(-50%);border-radius:999px;background:#FF7A00}

.swLever:focus-visible,.swBtn:focus-visible,.swRocker:focus-visible,.swKnob:focus-visible{
  outline:3px solid var(--signal);outline-offset:6px;border-radius:12px}

@media (max-width:820px){
  .swPanel{flex-wrap:wrap;gap:16px}
}

/* ============================================================
   ROOM 02 - CRUMPLE  (SVG + CSS transforms, no canvas)
   ============================================================ */
.crStage{position:absolute;inset:0;display:grid;place-items:center}
.crSheetWrap{-webkit-appearance:none;appearance:none;border:0;padding:0;background:none;
  cursor:grab;touch-action:none;width:min(70vmin,80vw);aspect-ratio:1;
  filter:drop-shadow(0 2vmin 3vmin rgba(0,0,0,.22));
  transform-origin:50% 50%}
.crSheetWrap:active,.crSheetWrap.is-grabbed{cursor:grabbing}
.crSheetWrap:focus-visible{outline:3px solid var(--signal);outline-offset:10px;border-radius:14%}
.crSheet{width:100%;height:100%;display:block;animation:crBreathe 7s ease-in-out infinite}
body.paused .crSheet{animation-play-state:paused}
.crOrigami{position:absolute;width:min(70vmin,80vw);aspect-ratio:1;
  pointer-events:none;opacity:0;transform:scale(.5)}
@keyframes crBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.12s!important}
}