:root{
  --shell:#c7cbc2;
  --shell-hi:#dcded6;
  --shell-lo:#a6aba0;
  --bezel:#2e3136;
  --bezel-lo:#1c1e22;
  --lcd-off:#8b9175;
  --magenta:#a03a63;
  --blue:#20519e;
  --btn-berry:#8e3a62;
  --btn-berry-lo:#5f2442;
  --dpad:#2c2e33;
  --paper:#efe7d2;
  --ink:#3a3128;
  --wood-1:#6a4a30;
  --wood-2:#41301f;
  --felt-1:#3c4a39;
  --felt-2:#27311f;
  --card:#b06a2c;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Courier New",monospace;
  --display:"Avenir Next Condensed","Arial Narrow","Helvetica Neue",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#171310;
  color:#d8cfba;
  font-family:var(--mono);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible,[tabindex]:focus-visible{outline:2px dashed #d8a24a;outline-offset:3px}

/* ================= ROOM / ATMOSPHERE ================= */
.room{position:fixed;inset:0;z-index:0;pointer-events:none}
.wallpaper{
  position:absolute;inset:0;
  background:
    radial-gradient(135% 95% at 30% -12%, #4a3a2a 0%, #2c2118 42%, #1a140f 72%, #0d0a08 100%);
}
.wallpaper::after{
  content:"";position:absolute;inset:0;opacity:.55;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,236,200,.022) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 7px);
}
.blinds{
  position:absolute;inset:-10% -10% 40% -10%;
  background:repeating-linear-gradient(102deg, rgba(255,228,170,.06) 0 16px, transparent 16px 64px);
  mix-blend-mode:screen;opacity:.7;transform:skewY(-4deg);
  animation:blindShift 26s ease-in-out infinite alternate;
}
@keyframes blindShift{from{transform:skewY(-4deg) translateX(0)}to{transform:skewY(-4deg) translateX(22px)}}
.lamp-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(46% 40% at 24% 4%, rgba(255,196,110,.20), transparent 70%),
    radial-gradient(34% 30% at 80% 10%, rgba(120,160,255,.05), transparent 70%);
  animation:lampFlicker 9s ease-in-out infinite;
}
@keyframes lampFlicker{0%,100%{opacity:1}47%{opacity:.9}52%{opacity:1}83%{opacity:.95}}
.desk{
  position:absolute;left:0;right:0;bottom:0;height:50vh;min-height:240px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 16%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 96px),
    repeating-linear-gradient(0deg, rgba(255,220,170,.035) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--wood-1), var(--wood-2));
  border-top:1px solid rgba(255,225,170,.12);
  box-shadow:0 -22px 46px rgba(0,0,0,.55);
}
.desk::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(54% 80% at 30% 0%, rgba(255,208,140,.10), transparent 70%);
}
.desk::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,232,180,.22),transparent);
}
.dust i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(255,226,170,.5);filter:blur(1px);
  animation:dustFloat linear infinite;
}
.dust i:nth-child(1){left:12%;top:22%;animation-duration:17s}
.dust i:nth-child(2){left:26%;top:60%;animation-duration:23s;animation-delay:-6s}
.dust i:nth-child(3){left:44%;top:30%;animation-duration:19s;animation-delay:-11s;width:2px;height:2px}
.dust i:nth-child(4){left:63%;top:70%;animation-duration:26s;animation-delay:-3s}
.dust i:nth-child(5){left:74%;top:18%;animation-duration:21s;animation-delay:-14s;width:2px;height:2px}
.dust i:nth-child(6){left:86%;top:48%;animation-duration:18s;animation-delay:-8s}
.dust i:nth-child(7){left:35%;top:82%;animation-duration:24s;animation-delay:-17s;width:2px;height:2px}
.dust i:nth-child(8){left:55%;top:12%;animation-duration:29s;animation-delay:-5s}
.dust i:nth-child(9){left:90%;top:74%;animation-duration:22s;animation-delay:-9s;width:2px;height:2px}
.dust i:nth-child(10){left:8%;top:50%;animation-duration:27s;animation-delay:-13s}
@keyframes dustFloat{
  0%{transform:translate(0,0);opacity:0}
  12%{opacity:.7}
  50%{transform:translate(26px,-60px);opacity:.35}
  88%{opacity:.6}
  100%{transform:translate(-14px,-130px);opacity:0}
}
.vignette{
  position:absolute;inset:0;
  background:radial-gradient(125% 105% at 42% 38%, transparent 52%, rgba(0,0,0,.6) 100%);
}

.scene-head{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px 26px 6px;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:#a89877;
}
.scene-head em{font-style:normal;color:#6f6250}
.head-left{font-weight:700;color:#c9b78f}
@media (max-width:620px){.head-right{display:none}}

/* ================= STAGE LAYOUT ================= */
.stage{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(274px,398px) minmax(420px,1fr);
  gap:30px 50px;
  align-items:center;
  justify-content:center;
  max-width:1180px;
  margin:0 auto;
  padding:6px 22px 70px;
}
.device-zone{position:relative;display:flex;justify-content:center}
.right-zone{display:flex;flex-direction:column;gap:30px;min-width:0}

/* ================= DEVICE ================= */
.device{
  --w0:min(398px, 94vw, calc((100vh - 280px) / 1.66));
  --w:clamp(274px, var(--w0), 398px);
  width:var(--w);
  aspect-ratio:90 / 148;
  position:relative;
  container-type:inline-size;
  display:flex;
  flex-direction:column;
  border-radius:1.6cqw 1.6cqw 1.6cqw 7cqw;
  background:
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,0) 34%),
    linear-gradient(315deg, rgba(0,0,0,.16), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, var(--shell-hi) 0%, var(--shell) 22%, var(--shell) 74%, var(--shell-lo) 100%);
  box-shadow:
    inset 0 .4cqw 0 rgba(255,255,255,.5),
    inset 0 -.6cqw 1.2cqw rgba(0,0,0,.22),
    inset .5cqw 0 1cqw rgba(255,255,255,.18),
    inset -.6cqw 0 1.2cqw rgba(0,0,0,.14),
    0 2.4cqw 5cqw rgba(0,0,0,.55),
    0 9cqw 14cqw -4cqw rgba(0,0,0,.5);
  user-select:none;
  touch-action:manipulation;
}
.device::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.device-top{
  position:relative;flex:0 0 auto;height:7.4cqw;
  display:flex;align-items:center;gap:2cqw;
  padding:0 4cqw;
  border-radius:1.6cqw 1.6cqw 0 0;
  background:linear-gradient(180deg, #b7bcb1, #c7cbc2 70%);
  box-shadow:inset 0 .35cqw 0 rgba(255,255,255,.45), inset 0 -.3cqw .6cqw rgba(0,0,0,.14);
}
.power-group{display:flex;align-items:center;gap:1.1cqw;cursor:pointer}
.pw-cap{font-size:1.9cqw;letter-spacing:.14em;color:#6d7168;font-weight:700}
.pw-cap.pw-on{color:#8c2f2f}
.power-rail{
  width:9.6cqw;height:3.4cqw;border-radius:1.7cqw;position:relative;
  background:linear-gradient(180deg,#7c8177,#9aa094);
  box-shadow:inset 0 .35cqw .7cqw rgba(0,0,0,.5), inset 0 -.2cqw .3cqw rgba(255,255,255,.35);
}
.power-knob{
  position:absolute;top:.35cqw;left:.4cqw;width:4.4cqw;height:2.7cqw;border-radius:1.4cqw;
  background:linear-gradient(180deg,#e2e4dc,#aeb3a8 60%,#949a8e);
  box-shadow:0 .3cqw .5cqw rgba(0,0,0,.4), inset 0 .2cqw 0 rgba(255,255,255,.7);
  transition:left .16s cubic-bezier(.5,1.6,.4,1);
}
.power-knob::after{
  content:"";position:absolute;inset:.5cqw 1.2cqw;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 .3cqw, transparent .3cqw .9cqw);
  border-radius:.4cqw;
}
.device.on .power-knob{left:4.8cqw}
.device.on .pw-cap.pw-on{text-shadow:0 0 1.2cqw rgba(220,80,60,.8)}

.top-ridges{display:flex;gap:.9cqw;margin-left:auto;margin-right:1cqw}
.top-ridges i{width:.8cqw;height:3.6cqw;border-radius:.4cqw;background:linear-gradient(180deg,#a9aea3,#c2c6bc);box-shadow:inset 0 .2cqw .3cqw rgba(0,0,0,.25)}

.cart-slot{
  position:absolute;top:-2.6cqw;left:50%;transform:translateX(-50%);
  width:46cqw;height:4.6cqw;
  background:linear-gradient(180deg,#8f948a,#b4b9ae);
  border-radius:.8cqw .8cqw 0 0;
  box-shadow:inset 0 .5cqw .9cqw rgba(0,0,0,.4), inset 0 -.2cqw 0 rgba(255,255,255,.3);
  display:flex;justify-content:center;
}
.cart-slot::after{
  content:"";position:absolute;top:1cqw;left:6cqw;right:6cqw;height:1.4cqw;border-radius:.7cqw;
  background:linear-gradient(180deg,#5c615a,#7b8076);
  box-shadow:inset 0 .2cqw .4cqw rgba(0,0,0,.5);
}
.cart-in-slot{
  position:absolute;bottom:.6cqw;left:50%;transform:translateX(-50%);
  width:40cqw;height:8.4cqw;z-index:-1;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.3,1.4,.4,1);
}
.cart-in-slot:hover{transform:translateX(-50%) translateY(-.5cqw)}
.cart-in-slot.ejecting{transform:translateX(-50%) translateY(-4.6cqw)}
.slot-cart-top{
  width:100%;height:100%;border-radius:.9cqw .9cqw 0 0;
  background:linear-gradient(180deg,#b9beb4,#9aa095);
  box-shadow:inset 0 .3cqw 0 rgba(255,255,255,.5), inset 0 -.4cqw .8cqw rgba(0,0,0,.25);
  display:flex;justify-content:center;align-items:flex-start;padding-top:1cqw;
}
.slot-cart-stripe{width:26cqw;height:3cqw;border-radius:.4cqw;box-shadow:inset 0 .2cqw .3cqw rgba(255,255,255,.35), 0 .2cqw .4cqw rgba(0,0,0,.3)}

.bezel{
  position:relative;flex:0 0 auto;
  margin:1.6cqw 5.4cqw 0;
  border-radius:1.6cqw 1.6cqw 4.6cqw 1.6cqw;
  background:linear-gradient(160deg,#3a3e45 0%, var(--bezel) 30%, var(--bezel-lo) 100%);
  box-shadow:
    inset 0 .5cqw .9cqw rgba(255,255,255,.14),
    inset 0 -.6cqw 1.2cqw rgba(0,0,0,.55),
    0 .4cqw 0 rgba(255,255,255,.35);
  padding:2.2cqw 3cqw 2.2cqw;
}
.bezel-head{
  display:flex;align-items:center;gap:1.6cqw;justify-content:center;
  color:#9aa1ad;font-size:2.15cqw;letter-spacing:.22em;font-weight:700;
  text-shadow:0 -.2cqw .2cqw rgba(0,0,0,.8);
  white-space:nowrap;
}
.bezel-dots{display:inline-flex;gap:.7cqw}
.bezel-dots::before,.bezel-dots::after{
  content:"";width:.95cqw;height:.95cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #c74b6d, var(--magenta) 55%, #571f37);
  box-shadow:0 .2cqw .3cqw rgba(0,0,0,.6);
}
.bezel-dots::after{background:radial-gradient(circle at 35% 30%, #5d86c9, var(--blue) 55%, #122c58)}
.battery-row{
  position:absolute;left:1.4cqw;top:54%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7cqw;margin:0;
}
.led{
  width:1.7cqw;height:1.7cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #6b2a2a, #3c1717);
  box-shadow:inset 0 -.2cqw .3cqw rgba(0,0,0,.6);
  transition:background .3s, box-shadow .3s;
}
.device.on .led{
  background:radial-gradient(circle at 35% 30%, #ff8d7d, #e0291c 60%, #7d0f08);
  box-shadow:0 0 1.6cqw .4cqw rgba(255,60,40,.55), inset 0 -.2cqw .3cqw rgba(0,0,0,.4);
  animation:ledBreath 4.5s ease-in-out infinite;
}
@keyframes ledBreath{0%,100%{filter:brightness(1)}50%{filter:brightness(.86)}}
.battery-label{font-size:1.5cqw;letter-spacing:.16em;color:#8d95a1;font-weight:700;white-space:nowrap}

.screen-well{
  position:relative;width:54cqw;margin:1.4cqw auto 0;aspect-ratio:160/144;
  border-radius:1cqw;
  background:#101210;
  box-shadow:inset 0 .6cqw 1.4cqw rgba(0,0,0,.9), inset 0 -.2cqw .4cqw rgba(255,255,255,.06);
  padding:1.1cqw;
}
#lcd{
  width:100%;height:100%;display:block;border-radius:.5cqw;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:var(--lcd-off);
  transition:filter .4s;
}
.device:not(.on) #lcd{filter:brightness(.94) saturate(.7)}
.lcd-matrix{
  position:absolute;inset:1.1cqw;border-radius:.5cqw;pointer-events:none;
  --px:calc(100% / 160);
  background-image:
    repeating-linear-gradient(90deg, rgba(10,20,4,.13) 0 calc(var(--px) * .16), transparent calc(var(--px) * .16) var(--px)),
    repeating-linear-gradient(0deg, rgba(10,20,4,.13) 0 calc(var(--px) * .16), transparent calc(var(--px) * .16) var(--px));
  mix-blend-mode:multiply;
}
.lcd-glass{
  position:absolute;inset:1.1cqw;border-radius:.5cqw;pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,255,240,.10) 0%, rgba(255,255,240,.03) 22%, transparent 40%),
    radial-gradient(140% 120% at 50% 120%, rgba(20,30,8,.22), transparent 55%);
  box-shadow:inset 0 0 2.4cqw rgba(0,0,0,.35);
}

.brandline{
  flex:0 0 auto;align-self:stretch;
  margin:1.4cqw 5.4cqw 0;
  display:flex;align-items:baseline;gap:1.8cqw;
}
.brand-mini{font-size:2.2cqw;letter-spacing:.2em;color:var(--blue);font-weight:700;font-style:italic}
.wordmark{
  font-family:var(--display);
  font-size:6.4cqw;font-weight:800;font-style:italic;letter-spacing:.02em;
  color:var(--magenta);
  text-shadow:0 .25cqw 0 rgba(255,255,255,.4), 0 -.2cqw .3cqw rgba(0,0,0,.15);
  transform:skewX(-4deg);
}
.wordmark sup{font-size:2cqw;vertical-align:super;letter-spacing:0}

.controls-row{
  flex:0 0 auto;align-self:stretch;
  margin:1.4cqw 0 0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4.6cqw;
}
.dpad{width:22cqw;height:22cqw;display:grid;place-items:center;position:relative}
.dpad::before{
  content:"";position:absolute;inset:1cqw;border-radius:50%;
  background:radial-gradient(circle at 40% 32%, rgba(0,0,0,.16), rgba(0,0,0,.05) 60%, transparent 75%);
}
.dpad-cross{
  position:relative;width:18.5cqw;height:18.5cqw;
  filter:drop-shadow(0 .8cqw .9cqw rgba(0,0,0,.45));
}
.dpad-cross::before,.dpad-cross::after{
  content:"";position:absolute;background:
    linear-gradient(180deg,#3a3d43,#26282d 70%,#191b1f);
  border-radius:1.5cqw;
  box-shadow:inset 0 .35cqw 0 rgba(255,255,255,.14), inset 0 -.4cqw .6cqw rgba(0,0,0,.5);
}
.dpad-cross::before{left:0;right:0;top:33%;height:34%}
.dpad-cross::after{top:0;bottom:0;left:33%;width:34%}
.dpad-btn{position:absolute;width:34%;height:34%;z-index:2;border-radius:1cqw}
.d-up{left:33%;top:0}
.d-down{left:33%;bottom:0}
.d-left{left:0;top:33%}
.d-right{right:0;top:33%}
.dpad-btn::after{
  content:"";position:absolute;inset:18%;border-radius:.6cqw;opacity:.8;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), transparent 70%);
}
.d-up::after{clip-path:polygon(50% 12%, 88% 82%, 12% 82%)}
.d-down::after{clip-path:polygon(12% 18%, 88% 18%, 50% 88%)}
.d-left::after{clip-path:polygon(12% 50%, 82% 12%, 82% 88%)}
.d-right::after{clip-path:polygon(18% 12%, 88% 50%, 18% 88%)}
.dpad-btn:active,.dpad-btn.pressed{transform:translateY(.35cqw)}
.dpad-pivot{
  position:absolute;left:50%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);
  border-radius:50%;z-index:1;
  background:radial-gradient(circle at 42% 36%, #17181c, #2c2f35 68%, #3a3e45);
  box-shadow:inset 0 .4cqw .7cqw rgba(0,0,0,.7), inset 0 -.2cqw .3cqw rgba(255,255,255,.08);
}

.ab-cluster{position:relative;width:30cqw;height:18cqw;transform:rotate(-24deg)}
.ab-plate{
  position:absolute;inset:6% -2% 2% 4%;border-radius:4cqw;
  background:linear-gradient(160deg, rgba(0,0,0,.10), rgba(0,0,0,.02) 55%, rgba(255,255,255,.10));
  box-shadow:inset 0 .3cqw .6cqw rgba(0,0,0,.14), inset 0 -.3cqw .5cqw rgba(255,255,255,.25);
}
.btn-wrap{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.8cqw}
.b-wrap{left:3cqw;bottom:1.2cqw}
.a-wrap{right:1cqw;top:.8cqw}
.round-btn{
  width:8.6cqw;height:8.6cqw;border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, #c06a92, var(--btn-berry) 46%, var(--btn-berry-lo) 100%);
  box-shadow:
    0 .9cqw 1.1cqw rgba(0,0,0,.5),
    0 .25cqw 0 rgba(255,255,255,.25),
    inset 0 -.7cqw 1cqw rgba(0,0,0,.4),
    inset 0 .4cqw .5cqw rgba(255,255,255,.28);
  transition:transform .05s, box-shadow .05s;
}
.round-btn:active,.round-btn.pressed{
  transform:translateY(.5cqw);
  box-shadow:
    0 .3cqw .5cqw rgba(0,0,0,.5),
    inset 0 -.4cqw .7cqw rgba(0,0,0,.5),
    inset 0 .5cqw .8cqw rgba(0,0,0,.25);
}
.btn-letter{font-size:2.4cqw;font-weight:800;color:#7d8278;letter-spacing:.1em;transform:rotate(24deg)}

.pills-row{
  flex:0 0 auto;align-self:center;
  margin:1.6cqw auto 0;
  display:flex;gap:5cqw;transform:rotate(-24deg);
}
.pill-wrap{display:flex;flex-direction:column;align-items:center;gap:1cqw}
.pill-btn{
  width:10.4cqw;height:2.7cqw;border-radius:1.4cqw;
  background:linear-gradient(180deg,#9ba096,#7c8177 60%,#686d63);
  box-shadow:0 .5cqw .7cqw rgba(0,0,0,.4), inset 0 .25cqw 0 rgba(255,255,255,.4), inset 0 -.3cqw .4cqw rgba(0,0,0,.3);
  transition:transform .05s, box-shadow .05s;
}
.pill-btn:active,.pill-btn.pressed{
  transform:translateY(.35cqw);
  box-shadow:0 .15cqw .3cqw rgba(0,0,0,.4), inset 0 .3cqw .5cqw rgba(0,0,0,.3);
}
.pill-label{font-size:1.9cqw;letter-spacing:.26em;color:#7d8278;font-weight:700;transform:rotate(24deg)}

.speaker{
  position:absolute;right:5.6cqw;bottom:4.6cqw;width:22cqw;height:12cqw;
  display:flex;gap:2.4cqw;transform:rotate(-24deg);transform-origin:bottom right;
}
.speaker i{
  flex:1;border-radius:1.2cqw;
  background:linear-gradient(180deg,#8b9086,#a7aca1 30%,#949a8f);
  box-shadow:inset 0 .5cqw .9cqw rgba(0,0,0,.5), inset 0 -.2cqw .3cqw rgba(255,255,255,.35), 0 .2cqw 0 rgba(255,255,255,.4);
}

.vol-wheel{
  position:absolute;right:-1.5cqw;top:74cqw;width:3.2cqw;height:13cqw;
  border-radius:0 1cqw 1cqw 0;cursor:pointer;
  background:linear-gradient(90deg,#8b9086,#b6bbb0 40%,#9aa095);
  box-shadow:.3cqw .4cqw .7cqw rgba(0,0,0,.45), inset .2cqw 0 .3cqw rgba(255,255,255,.4);
  overflow:hidden;
}
.vol-ridges{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 .5cqw, transparent .5cqw 1.7cqw);
  transition:transform .22s cubic-bezier(.4,1.6,.5,1);
}
.vol-wheel.muted .vol-ridges{transform:translateY(.85cqw)}
.vol-wheel:active .vol-ridges{transform:translateY(.4cqw)}
.vol-mark{
  position:absolute;right:4.4cqw;top:74.6cqw;font-size:1.7cqw;letter-spacing:.24em;
  color:#8b9086;font-weight:700;writing-mode:vertical-rl;
}
.device .vol-mark.muted-mark{color:#a03a3a}

.sc{position:absolute;width:2.6cqw;height:2.6cqw;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #e4e6de, #a9aea3 55%, #7c8177);
  box-shadow:inset 0 -.3cqw .4cqw rgba(0,0,0,.4), 0 .2cqw .3cqw rgba(0,0,0,.25);
}
.sc::after{content:"";position:absolute;left:18%;right:18%;top:44%;height:12%;background:rgba(0,0,0,.35);border-radius:.3cqw;transform:rotate(38deg)}
.sc-tl{top:1.2cqw;left:1.4cqw}
.sc-tr{top:1.2cqw;right:1.4cqw}
.sc-bl{bottom:1.6cqw;left:1.6cqw}
.sc-br{bottom:1.6cqw;right:1.6cqw}

/* ================= FELT CARTRIDGE BOX + SHELF ================= */
.shelf-zone{position:relative}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 4px 12px}
.shelf-title{
  font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.22em;color:#caa96c;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.shelf-hint{font-size:10.5px;letter-spacing:.06em;color:#8d7d61}
@media (max-width:620px){.shelf-hint{display:none}}
.cart-box{
  position:relative;
  padding:18px 16px 14px;
  border-radius:8px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,235,190,.05), transparent 60%),
    linear-gradient(180deg, var(--felt-1), var(--felt-2));
  box-shadow:
    inset 0 6px 14px rgba(0,0,0,.55),
    inset 0 -2px 0 rgba(255,255,255,.04),
    0 0 0 6px #6e4a2a,
    0 0 0 8px #4a3019,
    0 16px 30px rgba(0,0,0,.5);
}
.cart-box::before{
  content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23f)' opacity='0.10'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.cart-box::after{
  content:"CARTRIDGE CASE";position:absolute;top:6px;left:14px;
  font-size:8px;letter-spacing:.3em;color:rgba(255,235,190,.18);font-weight:700;
}
.shelf{
  display:flex;gap:18px;justify-content:center;align-items:flex-end;
  padding:6px 4px 2px;min-height:128px;position:relative;
}
.cart{
  position:relative;width:96px;height:110px;flex:0 0 auto;cursor:pointer;
  transition:transform .22s cubic-bezier(.34,1.5,.5,1), filter .22s;
  transform-origin:bottom center;
  filter:drop-shadow(0 8px 9px rgba(0,0,0,.55));
}
.cart:hover{transform:translateY(-10px) rotate(-1.5deg)}
.cart:active{transform:translateY(-5px) scale(.98)}
.cart.lifted{transform:translateY(-26px) rotate(3deg) scale(1.05);z-index:5}
.cart.gone{visibility:hidden}
.cart-body{
  position:absolute;inset:0;
  border-radius:7px 7px 4px 4px;
  background:linear-gradient(160deg,#c3c8bd 0%,#a9aea3 55%,#8f948a 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 5px rgba(0,0,0,.28), inset 2px 0 3px rgba(255,255,255,.2);
}
.cart-body::before{
  content:"";position:absolute;top:4px;left:10px;right:10px;height:9px;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 3px, transparent 3px 8px);
  border-radius:2px;
}
.cart-body::after{
  content:"";position:absolute;left:6px;right:6px;bottom:5px;height:4px;border-radius:2px;
  background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(255,255,255,.14));
}
.cart-notch{
  position:absolute;top:0;right:8px;width:16px;height:6px;border-radius:0 0 4px 4px;
  background:#7c8177;box-shadow:inset 0 2px 3px rgba(0,0,0,.4);
}
.cart-label{
  position:absolute;top:18px;left:9px;right:9px;bottom:15px;
  border-radius:3px;overflow:hidden;background:#111;
  box-shadow:0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.4);
  display:flex;flex-direction:column;
}
.cart-label canvas{width:100%;flex:1;image-rendering:pixelated;display:block}
.cart-tag{
  position:absolute;left:50%;bottom:-22px;transform:translateX(-50%) rotate(-1deg);
  font-size:9px;letter-spacing:.16em;color:#d8c79a;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.cart:focus-visible{outline-offset:6px}

.fly-cart{position:fixed;z-index:50;width:96px;height:110px;pointer-events:none;transition:transform .55s cubic-bezier(.5,-0.1,.25,1), opacity .55s}

/* ================= DESK CLUTTER / PROPS ================= */
.clutter{
  position:relative;
  display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;justify-content:center;
  padding:4px 6px 0;
}
.batt-pair{position:relative;width:120px;height:64px;flex:0 0 auto;transform:rotate(-3deg);filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}
.aa{
  position:absolute;width:64px;height:20px;border-radius:5px;
  background:linear-gradient(180deg,#3a3a40 0 18%, #d8d8dc 18% 24%, #2c2c32 24% 100%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.25), inset 0 -3px 4px rgba(0,0,0,.5);
}
.aa::before{content:"";position:absolute;right:-4px;top:6px;width:5px;height:8px;border-radius:0 2px 2px 0;background:linear-gradient(180deg,#cfcfd4,#8a8a90)}
.aa::after{content:"";position:absolute;left:8px;top:0;bottom:0;width:30px;background:linear-gradient(180deg,transparent 0 18%, rgba(180,40,40,.85) 18% 82%, transparent 82%);}
.aa.a1{top:6px;left:6px;transform:rotate(-7deg)}
.aa.a2{top:34px;left:30px;transform:rotate(5deg)}
.aa span{position:absolute;left:14px;top:5px;font-size:7px;letter-spacing:.1em;color:#f0e8d8;font-weight:700;z-index:2;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.cable{position:relative;width:120px;height:70px;flex:0 0 auto;transform:rotate(4deg);filter:drop-shadow(0 6px 6px rgba(0,0,0,.5))}
.cable svg{position:absolute;inset:0;overflow:visible}
.jack{position:absolute;right:2px;top:30px;width:26px;height:9px;border-radius:2px;background:linear-gradient(180deg,#cfcfd4,#7d7d83);box-shadow:inset 0 1px 1px rgba(255,255,255,.4)}
.jack::before{content:"";position:absolute;right:-7px;top:2px;width:8px;height:5px;border-radius:0 2px 2px 0;background:#9a9aa0}
.jack::after{content:"";position:absolute;left:-3px;top:1px;width:4px;height:7px;border-radius:2px;background:#2c2c32}

/* ================= MANUAL CARD ================= */
.manual-card{
  position:relative;flex:0 1 280px;min-width:244px;max-width:300px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%),
    var(--paper);
  color:var(--ink);
  padding:24px 20px 18px;
  border-radius:3px;
  transform:rotate(1.6deg);
  box-shadow:0 14px 30px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.35);
  font-size:12px;line-height:1.55;
}
.manual-card .tape{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:92px;height:24px;background:rgba(230,220,180,.55);
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  border-left:1px dashed rgba(0,0,0,.12);border-right:1px dashed rgba(0,0,0,.12);
}
.manual-card h2{
  font-family:var(--display);font-size:18px;letter-spacing:.14em;font-weight:800;
  border-bottom:2px solid var(--ink);padding-bottom:5px;margin-bottom:4px;
}
.manual-sub{font-size:9px;letter-spacing:.12em;color:#7a6c56;margin-bottom:11px}
.keymap{width:100%;border-collapse:collapse;margin-bottom:11px}
.keymap th{
  text-align:left;font-size:9px;letter-spacing:.14em;color:#8a7a5f;font-weight:700;
  padding:4px 6px 4px 0;white-space:nowrap;vertical-align:top;width:72px;
}
.keymap td{padding:4px 0;border-bottom:1px dotted rgba(0,0,0,.18)}
kbd{
  display:inline-block;min-width:16px;text-align:center;
  background:#fff;border:1px solid #b3a68a;border-bottom-width:2px;border-radius:3px;
  padding:0 4px;font-family:var(--mono);font-size:10.5px;color:#4a3f2e;
}
.manual-note{font-size:10.5px;color:#5d5140}
.manual-note b{color:#3a3128}
.coffee-ring{
  position:absolute;right:12px;bottom:10px;width:50px;height:50px;border-radius:50%;
  border:5px solid rgba(122,82,40,.16);filter:blur(.4px);
  box-shadow:inset 0 0 0 2px rgba(122,82,40,.06);
  transform:scaleX(1.06);
}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .stage{grid-template-columns:1fr;gap:26px;padding-top:4px}
  .right-zone{order:2;align-items:center}
  .shelf-zone{width:min(560px,94vw)}
  .clutter{justify-content:center}
  .shelf{overflow-x:auto;justify-content:flex-start;padding-bottom:6px;scroll-snap-type:x proximity}
  .cart{scroll-snap-align:center}
}
@media (max-height:720px) and (min-width:981px){
  .device{--w0:clamp(252px, calc((100vh - 280px) / 1.66), 352px)}
  .stage{align-items:center}
}

@media (prefers-reduced-motion:reduce){
  .dust i,.lamp-glow,.blinds,.device.on .led{animation:none}
  .cart,.power-knob,.vol-ridges{transition:none}
}