@duskmoon-dev/css-art 1.12.4 → 1.14.0

package/dist/art/csswitch.css

@@ -0,0 +1,936 @@
+@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;
+  }
+}