/* Dispozitivul Ripple construit din straturi CSS (32 x 30 x 7 mm).
   Culorile carcasei sunt fixe, ale obiectului real, nu ale temei - un obiect
   gri-antracit nu devine alb doar pentru ca pagina e pe tema luminoasa. */
.dev3d{position:relative;display:flex;align-items:center;justify-content:center;perspective:1200px}
.dev-box{position:relative;z-index:1;width:min(54vmin,320px,38vh);--w:min(54vmin,320px,38vh);
  aspect-ratio:32/30;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(-24deg);will-change:transform}
.dev-box i{position:absolute;inset:0;border-radius:calc(var(--w) * .15625);
  transform:translateZ(calc((var(--i) * .0075431 - .109375) * var(--w)));
  background:linear-gradient(180deg,#323239 0%,#202024 50%,#111113 100%);
  box-shadow:0 0 0 .5px #202024;backface-visibility:hidden;pointer-events:none}
.dev-face,.dev-back,.dev-left,.dev-right,.dev-top,.dev-bottom,.dev-edge{position:absolute;box-sizing:border-box;pointer-events:none}
.dev-face{inset:0;border-radius:calc(var(--w) * .15625);transform:translateZ(calc(var(--w) * .109375));
  background:linear-gradient(142deg,#3a3a41 0%,#222226 50%,#131315 100%);
  box-shadow:inset 0 1.5px .5px rgba(255,255,255,.32),inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.dev-face::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
  background:radial-gradient(ellipse 80% 70% at 30% 20%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 65%)}
.dev-face svg{width:72%;height:72%;position:relative;z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.dev-back{inset:0;border-radius:calc(var(--w) * .15625);transform:rotateY(180deg) translateZ(calc(var(--w) * .109375));
  background:linear-gradient(142deg,#303035 0%,#1e1e21 50%,#0e0e10 100%);
  box-shadow:inset 0 1.5px .5px rgba(255,255,255,.25)}
.dev-left,.dev-edge-l{top:calc(var(--w) * .15625);bottom:calc(var(--w) * .15625);left:0;width:calc(var(--w) * .21875);
  transform-origin:left center;transform:translateZ(calc(var(--w) * -.109375)) rotateY(-90deg);
  background:linear-gradient(180deg,#36363e 0%,#222227 50%,#131315 100%)}
.dev-right,.dev-edge-r{top:calc(var(--w) * .15625);bottom:calc(var(--w) * .15625);right:0;width:calc(var(--w) * .21875);
  transform-origin:right center;transform:translateZ(calc(var(--w) * -.109375)) rotateY(90deg);
  background:linear-gradient(180deg,#2a2a30 0%,#19191c 50%,#0d0d0f 100%)}
.dev-edge{width:calc(var(--w) * .225)}
.dev-top{left:calc(var(--w) * .15625);right:calc(var(--w) * .15625);top:0;height:calc(var(--w) * .21875);
  transform-origin:top center;transform:translateZ(calc(var(--w) * -.109375)) rotateX(90deg);
  background:linear-gradient(90deg,#2d2d33 0%,#44444d 50%,#25252a 100%)}
.dev-bottom{left:calc(var(--w) * .15625);right:calc(var(--w) * .15625);bottom:0;height:calc(var(--w) * .21875);
  transform-origin:bottom center;transform:translateZ(calc(var(--w) * -.109375)) rotateX(-90deg);
  background:linear-gradient(180deg,#141416 0%,#0b0b0d 100%);display:flex;align-items:center;justify-content:center}
.dev-usbc{position:relative;width:48%;height:36%;border-radius:999px;
  background:radial-gradient(ellipse 90% 100% at 50% 32%,#121215 0%,#020203 72%);
  box-shadow:0 0 0 1px rgba(255,255,255,.24),inset 0 2.5px 3px rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center}
.dev-usbc::after{content:"";width:58%;height:19%;border-radius:1.5px;
  background:linear-gradient(180deg,#d8dadf 0%,#a2a4aa 38%,#606166 60%,#333438 100%)}
.dev-led{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);z-index:2;width:6px;height:6px;
  border-radius:50%;background:#c9a869;box-shadow:0 0 12px rgba(201,168,105,.95);
  animation:dev-led 2.6s ease-in-out infinite}
@keyframes dev-led{0%,100%{opacity:.3}50%{opacity:1}}
/* umbra de contact, ca obiectul sa nu pluteasca; se vede altfel pe cele doua teme */
.dev3d::after{content:"";position:absolute;left:50%;bottom:4%;width:56%;height:14%;transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 72%);z-index:0}
[data-theme="dark"] .dev3d::after{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 72%)}
@media (max-width:1000px){.dev-box{width:min(50vmin,240px);--w:min(50vmin,240px)}}