@duskmoon-dev/css-art 1.13.0 → 1.14.0

package/dist/art/index.css

@@ -9,6 +9,7 @@
     position: relative;
     width: var(--art-moon-size);
     height: var(--art-moon-size);
+    aspect-ratio: 1;
     border-radius: 50%;
     background: radial-gradient(
       circle at 35% 35%,
@@ -190,116 +191,277 @@
 }
 
 @layer css-art {
+  @keyframes art-mountain-slide {
+    0%   { transform: translateX(-2%); }
+    50%  { transform: translateX(2%);  }
+    100% { transform: translateX(-2%); }
+  }
+
+  @keyframes art-mountain-grow {
+    50% {
+      width: 2%;
+      opacity: 0.4;
+    }
+  }
+
+  @keyframes art-mountain-slide-right {
+    0%   { transform: translateX(-200%);  }
+    100% { transform: translateX(2000%);  }
+  }
+
+  @keyframes art-mountain-slide-left {
+    0%   { transform: translateX(200%);   }
+    100% { transform: translateX(-2000%); }
+  }
+
+  /* === Canvas === */
   .art-mountain {
-    --art-mountain-width: 16rem;
-    --art-mountain-height: 10rem;
-    --art-mountain-color: oklch(45% 0.05 150);
-    --art-mountain-shadow: oklch(35% 0.04 150);
-    --art-mountain-snow: oklch(97% 0.005 90);
+    --art-mountain-size: 600px;
 
     position: relative;
-    width: var(--art-mountain-width);
-    height: var(--art-mountain-height);
+    width: var(--art-mountain-size);
+    height: var(--art-mountain-size);
+    overflow: hidden;
+    background:
+      /* Aurora glow layer — bottom 60% of canvas */
+      linear-gradient(transparent, rgba(31, 164, 152, 0.6)) 0 100% / 100% 60%,
+      /* Stars */
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%)  3%  70% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%)  7%  60% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%)  3%  47% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 26%  65% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 20%  50% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 12%  53% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 10%  40% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 24%  34% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 38%  35% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 24%  48% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%)  7%  30% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%)  2%  20% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%)  5%   4% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 10%  15% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 15%   8% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 20%  20% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 80%  36% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 84%  50% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 97%  50% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 85%  40% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 90%  54% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 50%  40% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 55%  49% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 48%  55% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 33%  45% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 80%  60% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 88%  70% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 30%  24% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 30%  10% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 15%  30% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 38%   3% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 68%  30% / 0.2% 0.2%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 90%  32% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 85%  10% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 60%  16% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 88%  12% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 96%   5% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 75%  18% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 47%  14% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 54%  10% / 0.2% 0.25%,
+      radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 53%  23% / 0.2% 0.25%,
+      /* Night sky gradient */
+      linear-gradient(rgb(20, 21, 33), #022e4e, #03518a);
+    background-repeat: no-repeat;
+    z-index: 1;
   }
 
-  /* Main peak */
-  .art-mountain::before {
-    content: '';
+  /* === Mountains === */
+
+  /* Shared mountain base */
+  .art-mountain .mountain {
     position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: calc(var(--art-mountain-width) * 0.45) solid transparent;
-    border-right: calc(var(--art-mountain-width) * 0.45) solid transparent;
-    border-bottom: var(--art-mountain-height) solid var(--art-mountain-color);
+    clip-path: polygon(49% 0, 51% 0, 100% 100%, 0% 100%);
+    border-radius: 50% 50% 0 0;
+    z-index: 2;
   }
 
-  /* Snow cap */
-  .art-mountain::after {
-    content: '';
+  /* Shadow sub-peak offset to the right */
+  .art-mountain .mountain::before {
+    content: "";
     position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: calc(var(--art-mountain-width) * 0.1) solid transparent;
-    border-right: calc(var(--art-mountain-width) * 0.1) solid transparent;
-    border-bottom: calc(var(--art-mountain-height) * 0.25) solid var(--art-mountain-snow);
-    z-index: 1;
+    width: 100%;
+    height: 100%;
+    right: 5%;
+    background: inherit;
+    clip-path: inherit;
+    border-radius: inherit;
   }
 
-  /* Range — multiple peaks */
-  .art-mountain-range {
-    --art-mountain-width: 24rem;
-    --art-mountain-height: 10rem;
+  /* Snow highlight at peak */
+  .art-mountain .mountain::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 15%;
+    background: linear-gradient(rgba(255, 250, 250, 0.5), transparent);
+  }
 
-    display: flex;
-    align-items: flex-end;
-    position: relative;
-    width: var(--art-mountain-width);
-    height: var(--art-mountain-height);
+  .art-mountain .mountain:nth-of-type(1) {
+    background: linear-gradient(#02284a, transparent);
+    width: 50%;
+    height: 40%;
+    left: -10%;
+    bottom: 0;
+  }
+
+  .art-mountain .mountain:nth-of-type(2) {
+    background: linear-gradient(#022e4e, rgba(20, 21, 33, 0.8));
+    width: 60%;
+    height: 50%;
+    left: 10%;
+    bottom: 0;
+    z-index: 3;
+  }
+
+  .art-mountain .mountain:nth-of-type(3) {
+    background: linear-gradient(#02284a, transparent);
+    width: 50%;
+    height: 65%;
+    left: 40%;
+    bottom: 0;
   }
 
-  .art-mountain-range::before,
-  .art-mountain-range::after {
-    content: none;
+  .art-mountain .mountain:nth-of-type(4) {
+    background: linear-gradient(#022e4e, rgba(20, 21, 33, 0.8));
+    width: 30%;
+    height: 40%;
+    right: -10%;
+    bottom: 0;
   }
 
-  .art-mountain-range .art-peak {
+  /* === Trees === */
+
+  .art-mountain .tree {
     position: absolute;
+    width: 0.5%;
     bottom: 0;
-    width: 0;
-    height: 0;
+    background: linear-gradient(rgb(4, 24, 22), rgb(20, 21, 33));
+    z-index: 4;
   }
 
-  .art-mountain-range .art-peak:nth-child(1) {
-    left: 10%;
-    border-left: calc(var(--art-mountain-width) * 0.25) solid transparent;
-    border-right: calc(var(--art-mountain-width) * 0.25) solid transparent;
-    border-bottom: calc(var(--art-mountain-height) * 0.7) solid var(--art-mountain-shadow);
+  /* Layered triangles forming a pine silhouette */
+  .art-mountain .tree::before {
+    content: "";
+    position: absolute;
+    width: 800%;
+    height: 100%;
+    top: -5%;
+    left: -350%;
+    background: rgb(4, 24, 22);
+    clip-path: polygon(
+      50% 0%,
+      0% 30%,
+      50% 30%,
+      0% 60%,
+      50% 60%,
+      0% 90%,
+      50% 90%,
+      100% 90%,
+      50% 60%,
+      100% 60%,
+      50% 30%,
+      100% 30%
+    );
   }
 
-  .art-mountain-range .art-peak:nth-child(2) {
-    left: 30%;
-    border-left: calc(var(--art-mountain-width) * 0.3) solid transparent;
-    border-right: calc(var(--art-mountain-width) * 0.3) solid transparent;
-    border-bottom: var(--art-mountain-height) solid var(--art-mountain-color);
-    z-index: 1;
+  .art-mountain .tree:nth-of-type(1) {
+    height: 20%;
+    right: 25%;
   }
 
-  .art-mountain-range .art-peak:nth-child(3) {
-    right: 5%;
-    border-left: calc(var(--art-mountain-width) * 0.22) solid transparent;
-    border-right: calc(var(--art-mountain-width) * 0.22) solid transparent;
-    border-bottom: calc(var(--art-mountain-height) * 0.6) solid oklch(40% 0.04 150);
+  .art-mountain .tree:nth-of-type(2) {
+    height: 15%;
+    right: 20%;
   }
 
-  /* Sunset color variant */
-  .art-mountain-sunset {
-    --art-mountain-color: oklch(30% 0.06 280);
-    --art-mountain-shadow: oklch(22% 0.05 280);
-    --art-mountain-snow: oklch(85% 0.08 50);
+  .art-mountain .tree:nth-of-type(3) {
+    height: 12%;
+    right: 28%;
   }
 
-  /* Forest color variant */
-  .art-mountain-forest {
-    --art-mountain-color: oklch(40% 0.08 145);
-    --art-mountain-shadow: oklch(30% 0.06 145);
+  /* === Aurora lights container === */
+
+  .art-mountain .lights {
+    height: 100%;
+    width: 100%;
+    animation: art-mountain-slide 15s ease-in-out infinite;
   }
 
-  /* Size variants */
-  .art-mountain-sm {
-    --art-mountain-width: 10rem;
-    --art-mountain-height: 6rem;
+  /* === Borealis beams === */
+
+  .art-mountain .borealis {
+    position: absolute;
+    width: 5%;
+    height: 100%;
+    bottom: 8%;
+    filter: blur(40px);
+    background: radial-gradient(rgb(31, 164, 152) 40%, transparent);
+    opacity: 0.6;
+  }
+
+  .art-mountain .borealis:nth-of-type(1) {
+    left: 0%;
+    animation: art-mountain-grow 30s ease-in-out infinite;
+  }
+
+  .art-mountain .borealis:nth-of-type(2) {
+    left: 20%;
+    animation: art-mountain-grow 25s 10s ease-in-out infinite;
   }
 
-  .art-mountain-lg {
-    --art-mountain-width: 24rem;
-    --art-mountain-height: 15rem;
+  .art-mountain .borealis:nth-of-type(3) {
+    left: 40%;
+    animation: art-mountain-grow 30s ease-in-out infinite;
   }
+
+  .art-mountain .borealis:nth-of-type(4) {
+    left: 60%;
+    animation: art-mountain-grow 20s 3s ease-in-out infinite;
+  }
+
+  .art-mountain .borealis:nth-of-type(5) {
+    left: 80%;
+    animation: art-mountain-grow 25s ease-in-out infinite;
+  }
+
+  .art-mountain .borealis:nth-of-type(6) {
+    left: 97%;
+    animation: art-mountain-grow 20s 8s ease-in-out infinite;
+  }
+
+  /* Purple beam sweeping left → right */
+  .art-mountain .borealis:nth-of-type(7) {
+    background: radial-gradient(rgb(157, 78, 221) 40%, transparent);
+    transform: translateX(-200%);
+    animation: art-mountain-slide-right 25s infinite;
+  }
+
+  .art-mountain .borealis:nth-of-type(8) {
+    background: radial-gradient(rgb(157, 78, 221) 40%, transparent);
+    transform: translateX(-200%);
+    animation: art-mountain-slide-right 25s 8s infinite;
+  }
+
+  /* Blue beam sweeping right → left */
+  .art-mountain .borealis:nth-of-type(9) {
+    left: unset;
+    right: 0%;
+    transform: translateX(200%);
+    background: radial-gradient(#045fa0 40%, transparent);
+    animation: art-mountain-slide-left 18s 5s ease-in-out infinite;
+  }
+
+  /* === Size variants === */
+  .art-mountain-sm { --art-mountain-size: 300px; }
+  .art-mountain-lg { --art-mountain-size: 900px; }
 }
 
 @layer css-art {
@@ -574,9 +736,10 @@
     --art-plasma-ball-base-color: #222222;
     --art-plasma-ball-switch-size: calc(var(--art-plasma-ball-size) * 37 / 350);
     position: relative;
+    isolation: isolate;
     margin: 0 auto;
     width: var(--art-plasma-ball-size);
-    height: var(--art-plasma-ball-size);
+    height: calc(var(--art-plasma-ball-size) * 1.6);
     box-sizing: border-box;
 
     * {
@@ -591,6 +754,7 @@
       margin: calc(var(--art-plasma-ball-size) * 48 / 350) auto;
       top: calc(var(--art-plasma-ball-size) * 286 / 350);
       left: calc(var(--art-plasma-ball-size) * 25 / 350);
+      z-index: -2;
     }
     .base:before {
       position: absolute;
@@ -663,8 +827,8 @@
       position: absolute;
       overflow: hidden;
       margin: 0 auto;
-      width: 100%;
-      height: 100%;
+      width: var(--art-plasma-ball-size);
+      height: var(--art-plasma-ball-size);
       border-radius: 100%;
       background-color: rgb(255 255 255 / 0.15);
       top: 0%;
@@ -1095,6 +1259,22 @@
     --art-plasma-ball-size: 500px;
   }
 
+  /* No-base variant: hides the stand/switch, shrinks container to ball size only */
+  .art-plasma-ball-no-base {
+    height: var(--art-plasma-ball-size);
+  }
+  .art-plasma-ball-no-base .base,
+  .art-plasma-ball-no-base .switch {
+    display: none;
+  }
+  .art-plasma-ball-no-base input.switcher {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 100% !important;
+  }
+
   @keyframes art-plasma-ball-rotation {
     50% {
       transform: rotate(360deg);
@@ -3311,3 +3491,1108 @@
   .art-gemini-input-lg { --art-gemini-input-width: 640px; }
 }
 
+@layer css-art {
+  @keyframes art-snowball-preloader-ball {
+    from { transform: rotate(0) translateY(-6.5em); }
+    50% { transform: rotate(180deg) translateY(-6em); }
+    to { transform: rotate(360deg) translateY(-6.5em); }
+  }
+
+  @keyframes art-snowball-preloader-inner-shadow {
+    from { transform: rotate(0); }
+    to { transform: rotate(-360deg); }
+  }
+
+  @keyframes art-snowball-preloader-outer-shadow {
+    from { transform: rotate(20deg); }
+    to { transform: rotate(-340deg); }
+  }
+
+  @keyframes art-snowball-preloader-texture {
+    from { transform: translateX(0); }
+    to { transform: translateX(50%); }
+  }
+
+  @keyframes art-snowball-preloader-track-cover {
+    from { transform: rotate(0); }
+    to { transform: rotate(360deg); }
+  }
+
+  .art-snowball-preloader {
+    --art-snowball-preloader-size: 256px;
+    --art-snowball-preloader-bg: hsl(223, 90%, 95%);
+
+    font-size: calc(var(--art-snowball-preloader-size) / 16);
+    position: relative;
+    width: 16em;
+    height: 16em;
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    .art-snowball-preloader-outer-ring,
+    .art-snowball-preloader-inner-ring,
+    .art-snowball-preloader-track-cover,
+    .art-snowball-preloader-ball,
+    .art-snowball-preloader-ball-inner-shadow,
+    .art-snowball-preloader-ball-side-shadows,
+    .art-snowball-preloader-ball-texture {
+      border-radius: 50%;
+    }
+
+    .art-snowball-preloader-outer-ring,
+    .art-snowball-preloader-inner-ring,
+    .art-snowball-preloader-track-cover,
+    .art-snowball-preloader-ball,
+    .art-snowball-preloader-ball-inner-shadow,
+    .art-snowball-preloader-ball-outer-shadow,
+    .art-snowball-preloader-ball-side-shadows,
+    .art-snowball-preloader-ball-texture,
+    .art-snowball-preloader-ball-texture::before {
+      position: absolute;
+    }
+
+    .art-snowball-preloader-ball {
+      animation: art-snowball-preloader-ball 3s linear infinite;
+      top: calc(50% - 1.25em);
+      left: calc(50% - 1.25em);
+      transform: rotate(0) translateY(-6.5em);
+      width: 2.5em;
+      height: 2.5em;
+    }
+
+    .art-snowball-preloader-ball-inner-shadow {
+      animation: art-snowball-preloader-inner-shadow 3s linear infinite;
+      box-shadow:
+        0 0.1em 0.2em hsla(0, 0%, 0%, 0.3),
+        0 0 0.2em hsla(0, 0%, 0%, 0.1) inset,
+        0 -1em 0.5em hsla(0, 0%, 0%, 0.15) inset;
+      width: 100%;
+      height: 100%;
+    }
+
+    .art-snowball-preloader-ball-outer-shadow {
+      animation: art-snowball-preloader-outer-shadow 3s linear infinite;
+      background-image: linear-gradient(hsla(0, 0%, 0%, 0.15), hsla(0, 0%, 0%, 0));
+      border-radius: 0 0 50% 50% / 0 0 100% 100%;
+      filter: blur(2px);
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 250%;
+      transform: rotate(20deg);
+      transform-origin: 50% 0;
+      z-index: -2;
+    }
+
+    .art-snowball-preloader-ball-side-shadows {
+      background-color: hsla(0, 0%, 0%, 0.1);
+      filter: blur(2px);
+      width: 100%;
+      height: 100%;
+      transform: scale(0.75, 1.1);
+      z-index: -1;
+    }
+
+    .art-snowball-preloader-ball-texture {
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+      transform: translate3d(0, 0, 0);
+
+      &::before {
+        animation: art-snowball-preloader-texture 0.25s linear infinite;
+        background: url(https://assets.codepen.io/416221/snow.jpg) 0 0 / 50% 100%;
+        content: "";
+        display: block;
+        filter: brightness(1.05);
+        top: 0;
+        right: 0;
+        width: 200%;
+        height: 100%;
+      }
+    }
+
+    .art-snowball-preloader-inner-ring {
+      box-shadow:
+        0 -0.25em 0.5em hsla(0, 0%, 100%, 0.4),
+        0 0.5em 0.75em hsla(0, 0%, 100%, 0.4) inset,
+        0 0.5em 0.375em hsla(0, 0%, 0%, 0.15),
+        0 -0.5em 0.75em hsla(0, 0%, 0%, 0.15) inset;
+      top: 2.375em;
+      left: 2.375em;
+      width: calc(100% - 4.75em);
+      height: calc(100% - 4.75em);
+    }
+
+    .art-snowball-preloader-outer-ring {
+      box-shadow:
+        0 -0.45em 0.375em hsla(0, 0%, 0%, 0.15),
+        0 0.5em 0.75em hsla(0, 0%, 0%, 0.15) inset,
+        0 0.25em 0.5em hsla(0, 0%, 100%, 0.4),
+        0 -0.5em 0.75em hsla(0, 0%, 100%, 0.4) inset;
+      top: 0.75em;
+      left: 0.75em;
+      width: calc(100% - 1.5em);
+      height: calc(100% - 1.5em);
+    }
+
+    .art-snowball-preloader-track-cover {
+      animation: art-snowball-preloader-track-cover 3s linear infinite;
+      background-image: conic-gradient(
+        var(--art-snowball-preloader-bg) 210deg,
+        oklch(from var(--art-snowball-preloader-bg) l c h / 0) 270deg
+      );
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+  }
+
+  .art-snowball-preloader-sm { --art-snowball-preloader-size: 192px; }
+  .art-snowball-preloader-lg { --art-snowball-preloader-size: 384px; }
+}
+
+@layer css-art {
+  .art-csswitch {
+    --art-csswitch-size: 800px;
+    --joycon-left: #00c5e2;
+    --joycon-left-shadow: #0128;
+    --joycon-right: #ff6658;
+    --joycon-right-shadow: #c218;
+
+    position: relative;
+    isolation: isolate;
+    font-size: var(--art-csswitch-size);
+    width: var(--art-csswitch-size);
+    max-width: var(--art-csswitch-size);
+    height: calc(var(--art-csswitch-size) * 0.4256);
+    background: #f000;
+  }
+
+  .art-csswitch *,
+  .art-csswitch *::before,
+  .art-csswitch *::after {
+    position: absolute;
+    box-sizing: border-box;
+  }
+
+  .art-csswitch :focus {
+    outline: 1px dashed;
+    outline-offset: 2px;
+  }
+
+  .art-csswitch .round {
+    border-radius: 50%;
+  }
+
+  .art-csswitch .comfort-grip,
+  .art-csswitch .connector {
+    display: none;
+  }
+
+  /* body + 2×controller ≈ 0.721em + 2×0.1385em = 0.998em ≈ font-size → fills the root */
+  .art-csswitch .body {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0.721em;
+    height: 99%;
+  }
+
+  .art-csswitch .frame {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    background:
+      radial-gradient(farthest-side, #2f3638 50%, #0000) -1% 3% / 2% 2%,
+      radial-gradient(farthest-side, #2f3638, #0000) 1% -0.75% / 2% 2%,
+      radial-gradient(95% 70% at 0% 0%, #2f3638 85%, #fff3, #f000) 0.5% 0.75% / 1.55% 5.25% no-repeat,
+      radial-gradient(farthest-side, #2f3638 50%, #0000) 101% 3% / 2% 2%,
+      radial-gradient(farthest-side, #2f3638, #0000) 99% -0.75% / 2% 2%,
+      radial-gradient(95% 70% at 100% 0%, #2f3638 85%, #fff3, #f000) 99.5% 0.75% / 1.55% 5.25% no-repeat,
+      linear-gradient(#0000 1%, #fff3 2%, #0000 4%),
+      linear-gradient(#0000 95%, #0008),
+      #2f3638;
+    background-repeat: no-repeat;
+    box-shadow:
+      inset -1.5px 0 0.75px -0.75px #fff5,
+      inset 1.5px 0 0.75px -0.75px #fff6;
+    -webkit-mask:
+      radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 0 3.9% / 0.6% 1% no-repeat,
+      radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 1.7% 0% / 0.4% 1% no-repeat,
+      radial-gradient(78.33% 60.33% at 0% 0%, #f000 99%, #f00) 0.5% 0.75% / 1.55% 5.25% no-repeat,
+      radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 100% 3.9% / 0.6% 1% no-repeat,
+      radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 98.3% 0% / 0.4% 1% no-repeat,
+      radial-gradient(78.33% 60.33% at 100% 0%, #f000 99%, #f00) 99.5% 0.75% / 1.55% 5.25% no-repeat,
+      linear-gradient(#0000 4.7%, #000 0),
+      linear-gradient(90deg, #0000 1.9%, #000 0 98.1%, #0000 0);
+  }
+
+  .art-csswitch .frame::before {
+    content: "";
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 94%;
+    height: 93%;
+    border-radius: 11px;
+    border: 0.3px solid #000;
+    box-shadow:
+      0 0.45px 1px #fff8,
+      inset 0 0.6px 1.5px -0.25px #000,
+      inset 0 0.7px 1.5px -0.25px #fffc;
+    background:
+      radial-gradient(circle at 32.7% 98%, #0e0e0e 0.9%, #000 0 1%, #0e0e0e 0 1.2%, #0000 0),
+      linear-gradient(#0e0e0e 0 0) 32.33% 100% / 2.1% 2% no-repeat,
+      #000;
+  }
+
+  .art-csswitch .screen {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    height: 77.5%;
+    border-radius: 1.5px;
+    background: #292d30;
+    box-shadow: inset 0 1.5px 5px -1.5px #000c;
+  }
+
+  .art-csswitch .controller {
+    --color: var(--joycon-left);
+    --color-shadow: var(--joycon-left-shadow);
+    /* em units: 20/1000, 10.5/1000, -12.3/1000 */
+    --connection: 0.02em 0.0105em 0 -0.0123em #020100;
+    width: 0.1385em;
+    height: 99%;
+    bottom: 0;
+    left: 0;
+    border-radius: 90px 4px 2px 90px;
+    background: var(--color);
+    box-shadow:
+      var(--connection),
+      inset 1px -9px 10px -3px #0125,
+      inset 35px 0 25px -25px #0002,
+      inset -2px 0 4px var(--color),
+      inset 6px 16px 5px -8px var(--color),
+      inset 0 17px 5px -8px #fff,
+      inset 5px -5px 10px -4px var(--color-shadow);
+  }
+
+  .art-csswitch .controller::before {
+    content: "";
+    width: 0.00275em;
+    aspect-ratio: 1;
+    background: #393537;
+    box-shadow: inset 0.1px 0.75px 0.4px #fff3;
+    left: 100%;
+    top: 97.75%;
+    border-radius: 50%;
+  }
+
+  .art-csswitch .controller.right {
+    --color: var(--joycon-right);
+    --color-shadow: var(--joycon-right-shadow);
+    --connection: -0.02em 0.0105em 0 -0.0123em #020100;
+    left: auto;
+    right: 0;
+    border-radius: 4px 90px 90px 2px;
+    box-shadow:
+      var(--connection),
+      inset -0.001em -0.009em 0.01em -0.003em #2107,
+      inset -0.035em 0 0.025em -0.025em #0002,
+      inset 0.002em 0 0.004em var(--color),
+      inset -0.006em 0.016em 0.005em -0.008em var(--color),
+      inset 0 0.017em 0.005em -0.008em #fff,
+      inset -0.01em 0 0.01em -0.004em var(--color-shadow);
+  }
+
+  .art-csswitch .controller.right::before {
+    left: auto;
+    right: 100%;
+    box-shadow: inset -0.0001em 0.00075em 0.0004em #fff3;
+  }
+
+  .art-csswitch button {
+    border: 0;
+    font-size: 1em;
+    padding: 0;
+  }
+
+  .art-csswitch .bar {
+    display: none;
+  }
+
+  .art-csswitch .minus {
+    --c: #404040;
+    width: 17%;
+    height: 1.8%;
+    background: var(--c);
+    top: 8.9%;
+    right: 7.7%;
+    border-radius: 0.0015em;
+    border: 0.001em solid var(--color-shadow);
+    box-shadow:
+      inset 1px -1px 1px #0008,
+      inset -1px 0 1px #0003,
+      inset 0 1px 1px #fff6,
+      0 2px 2px -1px #0006;
+  }
+
+  .art-csswitch .plus {
+    left: 7.7%;
+    right: auto;
+  }
+
+  .art-csswitch .plus::before {
+    content: "";
+    width: 37.5%;
+    height: 410%;
+    background: var(--c);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 0.0015em;
+    border: 0.001em solid var(--color-shadow);
+    box-shadow:
+      0 0.004em 0.02em var(--color-shadow),
+      inset -0.0006em 0 0.0004em #0007,
+      inset 0.0006em 0 0.0004em #0007,
+      inset 0 -0.001em 0.0005em -0.0002em #0008,
+      inset 0 0.00075em 0.0005em -0.0002em #fff6;
+  }
+
+  .art-csswitch .plus::after {
+    content: "";
+    width: 35%;
+    aspect-ratio: 1;
+    background:
+      radial-gradient(circle at 0 0, #834 20%, #0000 20% 35%, var(--c) 0) 0 0 / 50% 50%,
+      conic-gradient(at 0 0, #000, #fff) 1% 1% / 40% 40%,
+      radial-gradient(circle at 100% 0, #834 20%, #0000 20% 35%, var(--c) 0) 100% 0 / 50% 50%,
+      conic-gradient(at 100% 0, #fff 25%, #000) 99% 1% / 40% 40%,
+      radial-gradient(circle at 0% 100%, #834 20%, #0000 20% 35%, var(--c) 0) 1% 99% / 50% 50%,
+      radial-gradient(at 0% 100%, #0008, #0000) 1% 99% / 40% 40%,
+      radial-gradient(circle at 100% 100%, #834 20%, #0000 20% 35%, var(--c) 0) 99% 99% / 50% 50%,
+      radial-gradient(at 100% 100%, #0008, #0000) 100% 99% / 40% 40%,
+      var(--c);
+    background-repeat: no-repeat;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .art-csswitch .mushroom {
+    width: 47%;
+    aspect-ratio: 1;
+    border: 0.001em solid var(--color-shadow);
+    top: 17.5%;
+    left: 30%;
+    background:
+      radial-gradient(circle at 50% 0, #6669, #6660 60%),
+      #2a2e31;
+    box-shadow:
+      inset 0 0.0001em 0.00125em -0.0005em var(--color),
+      inset 0 0.003em 0.003em #0004,
+      inset 0 -0.005em 0.003em #0006,
+      0 -0.0009em 0.001em 0.001em #0003,
+      0 0.00075em 0.001em 0.001em #0003,
+      0 0.01em 0.01em -0.0025em #0004,
+      0 0.025em 0.035em var(--color-shadow);
+  }
+
+  .art-csswitch .right .mushroom {
+    top: 45.25%;
+    left: 23.25%;
+  }
+
+  .art-csswitch .mushroom::before {
+    content: "";
+    width: 80%;
+    aspect-ratio: 1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: radial-gradient(circle at 50% 0, #6669, #6660 60%);
+    box-shadow:
+      inset 0 0 0.001em #0008,
+      inset 0 0.002em 0.002em #0008,
+      inset 0 -0.001em 0.001em 0.001em #fff4,
+      0 0.001em 0.001em #fff2,
+      0 -0.0007em 0.001em 0.0006em #0008,
+      0 -0.0025em 0.0015em 0.0006em #fff2;
+  }
+
+  .art-csswitch .mushroom::after {
+    content: "";
+    width: 95%;
+    aspect-ratio: 1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background:
+      linear-gradient(90deg, #000, #0000 20% 80%, #000) 50% 0 / 3% 12%,
+      linear-gradient(#000 5%, #444 15% 30%, #666 50%, #3c3c3c, #484848) 50% 0 / 3% 12%,
+      linear-gradient(#0000 30% 90%, #fff) 0% 50% / 12% 3%,
+      linear-gradient(#000, #0000 30% 70%, #000) 0% 50% / 12% 3%,
+      linear-gradient(90deg, #fff4, #222 10% 50%, #444) 0% 50% / 12% 3%,
+      linear-gradient(#0000 30% 90%, #fff) 100% 50% / 12% 3%,
+      linear-gradient(#000, #0000 30% 70%, #000) 100% 50% / 12% 3%,
+      linear-gradient(to left, #fff4, #222 10% 50%, #444) 100% 50% / 12% 3%,
+      linear-gradient(90deg, #000, #0000 20% 80%, #000) 50% 100% / 3% 12%,
+      linear-gradient(to top, #fff4, #111 15% 50%, #444) 50% 100% / 3% 12%,
+      #f000;
+    background-repeat: no-repeat;
+  }
+
+  .art-csswitch .direction {
+    display: grid;
+    place-items: center;
+    width: 23%;
+    aspect-ratio: 1;
+    border: 0.0007em solid var(--color-shadow);
+    background:
+      linear-gradient(#fff2, #fff0),
+      #35393c;
+    box-shadow:
+      0 0.002em 0.007em var(--color-shadow),
+      inset 0 0.0001em 0.0015em -0.0005em var(--color),
+      inset 0 0 0.0005em 0.001em #323439,
+      inset 0 0.002em 0.001em 0.0002em #def5,
+      inset 0 -0.001em 0.0005em 0.0002em #000,
+      inset 0 -0.001em 0.001em 0.002em #000c;
+  }
+
+  .art-csswitch .direction::before {
+    font-size: 0.0175em;
+    font-family: Helvetica, sans-serif;
+    color: #fffa;
+  }
+
+  .art-csswitch .arrow::before,
+  .art-csswitch .arrow::after {
+    content: "";
+    width: 40%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: #252525;
+    clip-path: polygon(52% -2%, 100% 80%, 0 80%, 48% -2%);
+  }
+
+  .art-csswitch .arrow::before {
+    top: 51.5%;
+    background: #fff3;
+    filter: blur(0.01em);
+  }
+
+  .art-csswitch .arrow.right::before,
+  .art-csswitch .arrow.right::after {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+
+  .art-csswitch .arrow.left::before,
+  .art-csswitch .arrow.left::after {
+    transform: translate(-50%, -50%) rotate(-90deg);
+  }
+
+  .art-csswitch .arrow.down::before,
+  .art-csswitch .arrow.down::after {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+
+  .art-csswitch .direction.up {
+    top: 41.75%;
+    left: 41.9%;
+  }
+
+  .art-csswitch .direction.down {
+    top: 56.6%;
+    left: 41.9%;
+  }
+
+  .art-csswitch .direction.left {
+    left: 18.25%;
+    top: 49.25%;
+  }
+
+  .art-csswitch .direction.right {
+    left: 65.75%;
+    top: 49.25%;
+  }
+
+  .art-csswitch .direction.x {
+    top: 14%;
+    left: 35%;
+  }
+
+  .art-csswitch .direction.x::before {
+    content: "X";
+  }
+
+  .art-csswitch .direction.y {
+    top: 21.5%;
+    left: 11.25%;
+  }
+
+  .art-csswitch .direction.y::before {
+    content: "Y";
+  }
+
+  .art-csswitch .direction.a {
+    top: 21.5%;
+    left: 59%;
+  }
+
+  .art-csswitch .direction.a::before {
+    content: "A";
+  }
+
+  .art-csswitch .direction.b {
+    top: 29%;
+    left: 35%;
+  }
+
+  .art-csswitch .direction.b::before {
+    content: "B";
+  }
+
+  .art-csswitch .menu {
+    width: 19.35%;
+    aspect-ratio: 1;
+    border: 0.0009em solid var(--color-shadow);
+    top: 68.5%;
+    left: 60.5%;
+    border-radius: 0.003em;
+    background: #464b50;
+    box-shadow:
+      inset 0 0.001em 0.001em -0.0005em #fff6,
+      inset 0 -0.001em 0.001em -0.0005em #0006;
+  }
+
+  .art-csswitch .menu::before {
+    content: "";
+    width: 67%;
+    aspect-ratio: 1;
+    background: #33393c;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    box-shadow:
+      inset 0 0.0009em 0.00075em #0008,
+      0 0.0008em 0.00075em #fff5;
+  }
+
+  .art-csswitch .lr {
+    background: linear-gradient(#4c5153 50%, #030405 60%);
+    top: -1%;
+    right: 18%;
+    width: 83.5%;
+    height: 21%;
+    border-radius: 100em 2em 0 0;
+    clip-path: ellipse(140% 87% at 100% 0%);
+    box-shadow:
+      inset -0.004em 0 0.003em -0.003em #333,
+      inset -0.007em 0 0.003em -0.003em #4c5153,
+      inset 0 0.0015em 0.001em #444,
+      inset -0.001em 0.00175em 0.001em #fff;
+    z-index: -1;
+  }
+
+  .art-csswitch .lr.rr {
+    left: 18%;
+    right: auto;
+    transform: scaleX(-1);
+  }
+
+  .art-csswitch .volume {
+    width: 8.5%;
+    height: 0.7%;
+    background: linear-gradient(#444, #222);
+    left: 13.3%;
+    top: -0.6%;
+    border-radius: 0.0005em 0.0005em 0 0;
+    clip-path: polygon(-20% -100%, 32% -100%, 32% 0, 33% 35%, 66% 35%, 67% 0%, 67% -100%, 110% -100%, 110% 120%, -20% 120%);
+    z-index: -1;
+  }
+
+  .art-csswitch .home {
+    top: 67.6%;
+    left: 17.5%;
+    display: grid;
+    place-items: center;
+    width: 25%;
+    aspect-ratio: 1;
+    border: 0.0007em solid var(--color-shadow);
+    background:
+      linear-gradient(#0001, #0005),
+      radial-gradient(#0000 52.5%, #9c9a9a 54%),
+      #404547;
+  }
+
+  .art-csswitch .home::before {
+    content: "";
+    top: 23%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 50%;
+    height: 24.5%;
+    background: conic-gradient(at 50% 0, #0000 132deg, #010202 0 228deg, #0000 0);
+    box-shadow: 0 0.5px 0.75px -0.25px #fff8;
+  }
+
+  .art-csswitch .home::after {
+    content: "";
+    color: #010202;
+    top: 46%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 39%;
+    height: 24.5%;
+    box-shadow:
+      inset -0.004em 0,
+      inset 0.004em 0,
+      inset 0 -0.004em 0,
+      0 0.5px 0.75px -0.25px #fff5;
+  }
+
+  .art-csswitch button:active,
+  .art-csswitch .plus:active::before,
+  .art-csswitch .plus:active::after,
+  .art-csswitch .active {
+    background: yellow !important;
+  }
+
+  /* ── Tablet: grip stand mode, body hidden ── */
+  @media (max-width: 1010px) {
+    .art-csswitch {
+      width: calc(var(--art-csswitch-size) * 0.663);
+    }
+
+    /* 102/1000 = 0.102em — controllers inset from edges */
+    .art-csswitch .controller {
+      left: 0.102em;
+    }
+
+    .art-csswitch .controller.right {
+      right: 0.102em;
+    }
+
+    .art-csswitch .body {
+      display: none;
+    }
+
+    .art-csswitch .comfort-grip {
+      display: block;
+      width: 100%;
+      height: 0.461em; /* 461/1000 */
+    }
+
+    .art-csswitch .grip {
+      width: 24%;
+      height: 82.5%;
+      bottom: 7.5%;
+      left: 0%;
+      transform: rotate(12deg);
+      background:
+        radial-gradient(50% 100% at 69% 50%, #fff1, #fff0 50%),
+        radial-gradient(100% 100% at 60% 60%, #ffffff18, #fff0 30%),
+        linear-gradient(#0000, #0003),
+        #2f3638;
+      border-radius: 120% 120% 170% 125% / 120% 120% 140% 110%;
+      transform-origin: 50% 100%;
+      box-shadow:
+        inset 25px 20px 20px -10px #00050ccc,
+        inset -20px -10px 30px -10px #0008,
+        inset 32px 50px 15px -15px #fff5,
+        inset 0 0 50px #0008;
+    }
+
+    .art-csswitch .grip.right {
+      left: auto;
+      right: 0;
+      transform: scaleX(-1) rotate(12deg);
+    }
+
+    .art-csswitch .comfort-grip ~ .comfort-grip {
+      height: 100%;
+    }
+
+    .art-csswitch .holder {
+      width: 70%;
+      height: 0.365em; /* 365/1000 */
+      background: #2f3638;
+      top: 13%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 7% 7% 250px 250px / 10% 10% 26% 26%;
+      box-shadow:
+        inset 2px -10px 2px -1px #000,
+        inset -2px -10px 2px 0px #000,
+        -1px 1px 2px -1.5px #fffc,
+        0 40px 0 -20px #000c,
+        -3px 10px 10px 3px #2f3638,
+        1px 1px 2px -1.5px #fffc,
+        2px 10px 10px 3px #2f3638;
+      clip-path: polygon(-100% 0%, 200% 0%, 200% 100%, 66% 100%, 65.75% 100.75%, 34.25% 100.75%, 34% 100%, -100% 100%);
+    }
+
+    .art-csswitch .main-frame {
+      width: 0.181em; /* 181/1000 */
+      height: 99%;
+      bottom: 0%;
+      left: 50%;
+      transform: translate(-50%, 0);
+      border-radius: 2px;
+      -webkit-mask:
+        radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 0 3.9% / 2.4% 1% no-repeat,
+        radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 6.8% 0% / 1.6% 1% no-repeat,
+        radial-gradient(78.33% 60.33% at 0% 0%, #f000 99%, #f00) 2% 0.75% / 6.2% 5.25% no-repeat,
+        radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 100% 3.9% / 2.4% 1% no-repeat,
+        radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 93.2% 0% / 1.6% 1% no-repeat,
+        radial-gradient(78.33% 60.33% at 100% 0%, #f000 99%, #f00) 98% 0.75% / 6.2% 5.25% no-repeat,
+        linear-gradient(#0000 4.7%, #000 0),
+        linear-gradient(90deg, #0000 7.5%, #000 0 92.5%, #0000 0);
+      background:
+        radial-gradient(farthest-side, #2f3638 50%, #0000) -1% 3% / 2% 2%,
+        radial-gradient(farthest-side, #2f3638, #0000) 1% -0.75% / 2% 2%,
+        radial-gradient(95% 70% at 0% 0%, #2f3638 85%, #fff3, #f000) 0.5% 0.75% / 1.55% 5.25% no-repeat,
+        radial-gradient(farthest-side, #2f3638 50%, #0000) 101% 3% / 2% 2%,
+        radial-gradient(farthest-side, #2f3638, #0000) 99% -0.75% / 2% 2%,
+        radial-gradient(95% 70% at 100% 0%, #2f3638 85%, #fff3, #f000) 99.5% 0.75% / 1.55% 5.25% no-repeat,
+        linear-gradient(#0000 1%, #fff3 2%, #0000 4%),
+        linear-gradient(#0000 97%, #0008),
+        radial-gradient(at 0 100%, #2f3638 1%, #0000 10%),
+        radial-gradient(at 100% 100%, #2f3638 1%, #0000 10%),
+        linear-gradient(#fff0 96%, #ffffff08, #fff0 98.5%),
+        linear-gradient(#0000, #0013 5%, #0000 50%),
+        #2f3638;
+      box-shadow:
+        inset 4px 0 3px -3.5px #fff5,
+        inset -4px 0 3px -3.5px #fff5,
+        inset 3px 0 4px -3.5px,
+        inset -3px 0 4px -3.5px;
+      background-repeat: no-repeat;
+    }
+
+    /* Logo: 32.5/1000, 65/1000, 57/1000, 138.5/1000, 5/1000, 20/1000 */
+    .art-csswitch .logo {
+      width: 0.0325em;
+      height: 0.065em;
+      background: radial-gradient(circle at 53.5% 26.5%, #1a1c21 6px, #1a1c2100 0);
+      left: 0.057em;
+      top: 0.1385em;
+      border: 0.005em solid #1a1c21;
+      border-radius: 0.02em 0 0 0.02em;
+      box-shadow: 1px 0.5px 2px -1.5px #fff3;
+    }
+
+    /* Logo right: 95.5/1000, 29/1000, 17.5/1000 */
+    .art-csswitch .logo.right {
+      left: 0.0955em;
+      width: 0.029em;
+      background: radial-gradient(circle at 48% 55%, #1a1c2100 6px, #1a1c21 0);
+      border: 0;
+      border-radius: 0 0.0175em 0.0175em 0;
+    }
+
+    /* font-size: 12/1000 = 0.012em; letter-spacing: 5.5/1000 = 0.0055em */
+    .art-csswitch .nintendo {
+      font-size: 0.012em;
+      left: 51.5%;
+      top: 51.75%;
+      transform: translate(-50%, -50%);
+      font-family: Helvetica, sans-serif;
+      font-weight: 700;
+      letter-spacing: 0.0055em;
+      color: #1a1c21;
+    }
+
+    /* font-size: 21/1000 = 0.021em; letter-spacing: 4/1000 = 0.004em */
+    .art-csswitch .switch {
+      font-size: 0.021em;
+      left: 51%;
+      top: 55.75%;
+      transform: translate(-50%, -50%);
+      font-family: Helvetica, sans-serif;
+      font-weight: 700;
+      letter-spacing: 0.004em;
+      color: #1a1c21;
+    }
+
+    /* Light: 6.5/1000 = 0.0065em; border: 0.75/1000 = 0.00075em */
+    .art-csswitch .light {
+      top: 37.5%;
+      left: 10.25%;
+      border: 0.00075em solid #000c;
+      width: 0.0065em;
+      height: 0.0065em;
+      border-radius: 0.0015em;
+      background:
+        radial-gradient(at 0 0, #0004, #0000),
+        #53565b;
+      box-shadow:
+        inset -1px -1px 2px -1.5px #ffd3,
+        1px 1.5px 1px -1.25px #fff3;
+    }
+
+    .art-csswitch .light:nth-child(3n),
+    .art-csswitch .light:nth-child(7n) {
+      top: 45.5%;
+    }
+
+    .art-csswitch .light:nth-child(2n),
+    .art-csswitch .light:nth-child(6n) {
+      top: 41.5%;
+    }
+
+    .art-csswitch .light:nth-child(4n),
+    .art-csswitch .light:nth-child(8n) {
+      top: 49.5%;
+    }
+
+    .art-csswitch .light:nth-child(n + 5) {
+      left: auto;
+      right: 10.25%;
+    }
+  }
+
+  /* ── Mobile: Joy-Con bar connector visible ── */
+  @media (max-width: 670px) {
+    .art-csswitch {
+      width: calc(var(--art-csswitch-size) * 0.45);
+    }
+
+    .art-csswitch .comfort-grip {
+      display: none;
+    }
+
+    .art-csswitch .controller {
+      --connection: 0 0 0 #0000;
+      left: 0;
+    }
+
+    .art-csswitch .controller.right {
+      --connection: 0 0 0 #0000;
+      right: 0;
+    }
+
+    .art-csswitch .controller::before {
+      content: none;
+    }
+
+    /* bar: 50/1000 = 0.05em */
+    .art-csswitch .bar {
+      display: block;
+      top: 0.25%;
+      left: 100%;
+      width: 0.05em;
+      height: 98%;
+    }
+
+    .art-csswitch .controller.right .bar {
+      left: auto;
+      right: 100%;
+      transform: scalex(-1);
+    }
+
+    /* bar button: left: 10/1000 = 0.01em */
+    .art-csswitch .bar button {
+      width: 100%;
+      height: 14.25%;
+      left: 0.01em;
+      border-radius: 4px;
+      background:
+        radial-gradient(20% 100% at 100% 50%, #0008 30%, #31333800 40%),
+        radial-gradient(20% 100% at 100% 50%, #232629 40%, #23262900 60%),
+        linear-gradient(#232629 5%, #fff7, #414649 25% 75%, #232629);
+    }
+
+    .art-csswitch .sub-lr {
+      top: 19.75%;
+    }
+
+    .art-csswitch .sub-rr {
+      top: 60.25%;
+    }
+
+    /* minus-sign: 21/1000, 5.5/1000, 38/1000, 7.25/1000 */
+    .art-csswitch .minus-sign {
+      width: 0.021em;
+      height: 0.0055em;
+      background: #343a3b;
+      top: 0.038em;
+      left: 0.00725em;
+      border-radius: 0.00075em;
+      box-shadow:
+        inset 0 0 2px #2f3638,
+        0 1px 3px -1.5px #fff4;
+    }
+
+    /* plus sign arm: 5.5/1000, 21/1000 */
+    .art-csswitch .controller.right .minus-sign::before {
+      content: "";
+      width: 0.0055em;
+      height: 0.021em;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: inherit;
+      box-shadow:
+        inset 0 0 2px #2f3638,
+        0 3px 3px -2px #fff4;
+    }
+
+    .art-csswitch .peripheral {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 3px 120px 110px 0 / 6px 120px 110px 0;
+      background: #3f4648;
+      box-shadow:
+        inset 2px 0 3px -1px #000c,
+        inset -5px 5px 5px #303538,
+        inset -10px -5px 5px #303538,
+        inset -5px 9px 5px #fff4;
+      -webkit-mask:
+        radial-gradient(95% 250% at 100% 64%, #0000 7%, #f00 7.5%) 100% 0 / 100% 42% no-repeat,
+        radial-gradient(95% 250% at 100% 67.5%, #0000 7%, #f00 7.5%) 100% 67.25% / 100% 42% no-repeat,
+        radial-gradient(160% 20% at 0 100%, #0000 38%, #f00 38.5%) 0 100% / 40% 50% no-repeat,
+        radial-gradient(160% 30% at 110% 101%, #0000 65%, #f00 0) 100% 100% / 62% 25% no-repeat;
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 29% 100%, 0% 96%);
+    }
+
+    .art-csswitch .cord {
+      width: 12px;
+      height: 100vh;
+      left: 47%;
+      top: 30%;
+      background:
+        linear-gradient(#000 33%, #0000 34%) 50% 50% / 11px 100%,
+        linear-gradient(#0009 32%, #0000 38%) 50% 50% / 11px 100%,
+        linear-gradient(90deg, #0000, #6666, #0000),
+        linear-gradient(45deg, #253a3e, #21212c, #656a6e, #253a3e) 0.5px 0 / 6px 6px,
+        linear-gradient(-45deg, #253a3e, #31313c, #707070, #253a3e) 5.5px 3px / 6px 6px,
+        radial-gradient(farthest-side, #353a3ecc 99.99%, #f000) 50% 50% / 12px 8px;
+      background-repeat: repeat-y;
+    }
+  }
+
+  /* ── Small mobile: connector segments ── */
+  @media (max-width: 460px) {
+    .art-csswitch {
+      width: 90%;
+      min-width: 320px;
+    }
+
+    /* connector: 22/1000, 13.5/1000, 358/1000 */
+    .art-csswitch .connector {
+      display: block;
+      top: 0.022em;
+      left: calc(100% - 1px);
+      width: 0.0135em;
+      height: 0.358em;
+      z-index: -1;
+    }
+
+    .art-csswitch .controller.right .connector {
+      transform: scaleX(-1);
+      left: auto;
+      right: calc(100% - 1px);
+    }
+
+    .art-csswitch .con-lr,
+    .art-csswitch .con-rr {
+      width: 90%;
+      height: 9.75%;
+      background: var(--color);
+      top: 25.25%;
+      right: 0;
+      transform: translateY(-50%);
+      border-radius: 2px;
+      box-shadow:
+        inset -1.5px -2px 4px -1px #0005,
+        inset -1px 1px 2px -1.5px #0006;
+    }
+
+    .art-csswitch .con-rr {
+      top: 73%;
+    }
+
+    .art-csswitch .con-part {
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0px;
+    }
+
+    .art-csswitch .con-part::after {
+      content: "";
+      width: 60%;
+      right: 0;
+      height: 100%;
+      top: 0;
+      box-shadow:
+        inset -3px 2px 2px -1px #0008,
+        inset 0 4px 1px -2px #0007,
+        inset 0 3px 1px #fff7;
+      background:
+        linear-gradient(#0002, #0000, #0002),
+        #42484d;
+      border-radius: 2px 4px 3px 3px / 2px 4px 3px 10px;
+      clip-path: polygon(0 0, 100% 0, 100% 18%, 70% 20%, 70% 31%, 100% 33%, 100% 65.5%, 70% 67.5%, 70% 78.5%, 100% 80.5%, 100% 100%, 0 100%);
+    }
+
+    .art-csswitch .con-part::before {
+      content: "";
+      width: 60%;
+      left: 0;
+      height: 95%;
+      top: 0;
+      background:
+        linear-gradient(90deg, #000, #0000 20% 40%, #000 60%),
+        linear-gradient(#6e7474 0.66%, #0008 0, #6e7474cc 1.5%, #000c 2.5%, #0000 0),
+        #1b2827;
+    }
+
+    .art-csswitch .bar {
+      display: none;
+    }
+  }
+
+  /* ── Tiny: single Joy-Con only ── */
+  @media (max-width: 360px) {
+    /* 151/1000 = 0.151em */
+    .art-csswitch {
+      width: 0.151em;
+      min-width: 0.151em;
+    }
+
+    .art-csswitch .controller.right {
+      display: none;
+    }
+  }
+
+  /* Size variants */
+  .art-csswitch-sm {
+    --art-csswitch-size: 500px;
+  }
+
+  .art-csswitch-lg {
+    --art-csswitch-size: 1000px;
+  }
+}
+