<\/video><\/figure>\n\n\n\nI gave this toggle the look of a real house switch. You press the rocker to turn the lights on or off, and the canvas changes with it.<\/p>\n\n\n\n
Features:<\/strong><\/p>\n\n\n\n\nA raised ceramic plate with recessed edges and screw details.<\/li>\n\n\n\n Sun and moon icons with ON and OFF labels.<\/li>\n\n\n\n A rocker that tilts in opposite directions for light and dark mode.<\/li>\n\n\n\n A warm daylight background that changes to a dark night background.<\/li>\n<\/ul>\n\n\n\nHTML<\/h3>\n\n\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>3D Wall Switch<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <script src=\"script.js\" defer><\/script>\n<\/head>\n<body>\n<main class=\"export-wrap\">\n<div class=\"canvas\" data-demo=\"wall-switch\" data-theme=\"light\" aria-label=\"The satisfying click interactive preview\">\n <div class=\"scene\">\n <div class=\"wall-wash\" aria-hidden=\"true\">\n<\/div>\n <div class=\"wall-plate\">\n <span class=\"wall-screw wall-screw--top\" aria-hidden=\"true\">\n<\/span>\n <span class=\"wall-screw wall-screw--bottom\" aria-hidden=\"true\">\n<\/span>\n <div class=\"wall-recess\">\n <button class=\"demo-toggle wall-rocker\" role=\"switch\" aria-checked=\"true\" aria-label=\"Toggle the wall light\">\n <span class=\"wall-rocker-top\" aria-hidden=\"true\">\n <svg class=\"wall-sun\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n<circle cx=\"12\" cy=\"12\" r=\"3.5\">\n<\/circle>\n<path d=\"M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\">\n<\/path>\n<\/svg>\n <span class=\"wall-word\">ON<\/span>\n <\/span>\n <span class=\"wall-rocker-bottom\" aria-hidden=\"true\">\n <svg class=\"wall-moon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n<path d=\"M20.2 14.4A8.5 8.5 0 0 1 9.6 3.8 8.5 8.5 0 1 0 20.2 14.4Z\">\n<\/path>\n<\/svg>\n <span class=\"wall-word\">OFF<\/span>\n <\/span>\n <\/button>\n <\/div>\n <span class=\"wall-indicator\" aria-hidden=\"true\">\n<\/span>\n <\/div>\n<\/div>\n <div class=\"canvas-top\">\n<span class=\"theme-label\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n<circle cx=\"12\" cy=\"12\" r=\"4\">\n<\/circle>\n<path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\">\n<\/path>\n<\/svg>\n<span>Light mode<\/span>\n<\/span>\n<\/div>\n <div class=\"canvas-bottom\">\n<span class=\"canvas-hint\">Go on, give it a click<\/span>\n<span class=\"canvas-state\">A little brighter<\/span>\n<\/div>\n <\/div>\n<h1 class=\"export-title\">The satisfying click<\/h1>\n<\/main>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS<\/h3>\n\n\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin-top: 0px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n padding-top: 24px;\n padding-right: 24px;\n padding-bottom: 24px;\n padding-left: 24px;\n min-height: 100dvh;\n display: grid;\n align-items: center;\n justify-items: center;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(246, 246, 244);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.export-wrap {\n width: min(100%, 400px);\n}\n\n.export-title {\n text-align: center;\n font-size: 15px;\n font-weight: 500;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 6px;\n margin-left: 0px;\n color: rgb(69, 73, 66);\n}\n\nbutton:focus-visible {\n outline-color: rgb(222, 101, 65);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 5px;\n}\n\n.canvas {\n position: relative;\n aspect-ratio: 4 \/ 5;\n width: 100%;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-bottom-right-radius: 14px;\n border-bottom-left-radius: 14px;\n isolation: isolate;\n container-type: inline-size;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(240, 238, 232);\n color: rgb(101, 95, 80);\n transition-behavior: normal, normal;\n transition-duration: 0.75s, 0.6s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, color;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.canvas[data-theme=\"dark\"] {\n color: rgb(217, 219, 232);\n color-scheme: dark;\n}\n\n.scene {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: grid;\n align-items: center;\n justify-items: center;\n perspective: 800px;\n}\n\n.demo-toggle {\n font-style: inherit;\n font-variant-ligatures: inherit;\n font-variant-caps: inherit;\n font-variant-numeric: inherit;\n font-variant-east-asian: inherit;\n font-variant-alternates: inherit;\n font-variant-position: inherit;\n font-variant-emoji: inherit;\n font-weight: inherit;\n font-stretch: inherit;\n font-size: inherit;\n line-height: inherit;\n font-family: inherit;\n font-optical-sizing: inherit;\n font-size-adjust: inherit;\n font-kerning: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-language-override: inherit;\n color: inherit;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: none;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n}\n\n.demo-toggle:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 12px;\n}\n\n.canvas-top {\n position: absolute;\n left: 20px;\n right: 17px;\n top: 17px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 5;\n pointer-events: none;\n}\n\n.theme-label {\n display: inline-flex;\n align-items: center;\n row-gap: 6px;\n column-gap: 6px;\n font-size: 9px;\n font-weight: 500;\n line-height: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n padding-top: 7px;\n padding-right: 9px;\n padding-bottom: 7px;\n padding-left: 9px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n border-bottom-left-radius: 20px;\n backdrop-filter: blur(6px);\n}\n\n.theme-label svg {\n width: 11px;\n height: 11px;\n stroke-width: 1.5;\n}\n\n.canvas-expand {\n display: grid;\n align-items: center;\n justify-items: center;\n pointer-events: auto;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n color: inherit;\n width: 30px;\n height: 30px;\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-right-radius: 7px;\n border-bottom-left-radius: 7px;\n cursor: pointer;\n opacity: 0.6;\n transition-behavior: normal, normal;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, background;\n}\n\n.canvas-expand:hover {\n opacity: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n}\n\n.canvas-expand:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n}\n\n.canvas-expand svg {\n width: 14px;\n height: 14px;\n}\n\n.canvas-bottom {\n position: absolute;\n bottom: 27px;\n left: 14px;\n right: 14px;\n display: flex;\n align-items: center;\n flex-direction: column;\n row-gap: 6px;\n column-gap: 6px;\n z-index: 4;\n pointer-events: none;\n text-align: center;\n}\n\n.canvas-hint {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05px;\n line-height: 1.4;\n}\n\n.canvas-state {\n font-size: 8px;\n opacity: 0.7;\n letter-spacing: 0.2px;\n}\n\n.canvas[data-theme=\"dark\"] .theme-label {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.05);\n}\n\n.canvas[data-theme=\"dark\"] .canvas-expand:hover {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.08);\n}\n\n@media (max-width: 1000px) and (min-width: 761px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 19px;\n }\n\n .canvas-hint {\n font-size: 9px;\n }\n\n .canvas-state {\n font-size: 7px;\n }\n\n .theme-label {\n font-size: 8px;\n padding-top: 6px;\n padding-right: 7px;\n padding-bottom: 6px;\n padding-left: 7px;\n }\n}\n\n@media (max-width: 760px) and (min-width: 501px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 18px;\n }\n\n .canvas-hint {\n font-size: 10px;\n }\n\n .theme-label {\n font-size: 8px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .canvas *, .canvas ::before, .canvas ::after, .canvas {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@container (max-width: 320px) {\n .canvas .wall-plate {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.85);\n }\n\n .canvas .celestial-control {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .mood-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .horizon-switch {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .eclipse-dial {\n transform: translate(-50%, -50%) scale(0.84);\n }\n\n .canvas .lamp-object {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .arcade-switch {\n transform: translate(-50%, -50%) scale(0.85);\n }\n}\n\n.canvas[data-demo=\"wall-switch\"] {\n background-image: radial-gradient(at 34% 10%, rgb(255, 253, 245) 0%, transparent 65%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(238, 235, 226);\n transition-behavior: normal, normal;\n transition-duration: 0.7s, 0.7s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background-color, color;\n}\n\n.canvas[data-demo=\"wall-switch\"][data-theme=\"dark\"] {\n background-color: rgb(39, 43, 50);\n background-image: radial-gradient(at 34% 10%, rgb(62, 68, 78) 0%, transparent 65%);\n}\n\n.wall-wash {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n background-image: radial-gradient(at 50% 40%, rgba(255, 245, 194, 0.3), transparent 70%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n opacity: 1;\n transition-behavior: normal;\n transition-duration: 0.7s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n[data-theme=\"dark\"] .wall-wash {\n opacity: 0;\n}\n\n.wall-plate {\n position: absolute;\n width: 162px;\n height: 224px;\n left: 50%;\n top: 48%;\n transform: translate(-50%, -50%);\n border-top-left-radius: 17px;\n border-top-right-radius: 17px;\n border-bottom-right-radius: 17px;\n border-bottom-left-radius: 17px;\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgb(247, 245, 238);\n border-right-color: rgb(247, 245, 238);\n border-bottom-color: rgb(247, 245, 238);\n border-left-color: rgb(247, 245, 238);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: linear-gradient(135deg, rgb(255, 254, 250) 0%, rgb(241, 238, 229) 35%, rgb(232, 229, 220) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 255, 255) 2px 2px 3px inset, rgba(189, 185, 173, 0.44) -2px -3px 3px inset, rgb(197, 192, 180) 2px 3px 1px, rgba(129, 119, 104, 0.22) 5px 10px 12px, rgba(111, 100, 84, 0.157) 14px 24px 28px;\n transition-behavior: normal, normal;\n transition-duration: 0.65s, 0.65s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: filter, box-shadow;\n}\n\n.wall-plate::before {\n content: \"\";\n position: absolute;\n top: 5px;\n right: 5px;\n bottom: 5px;\n left: 5px;\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgba(221, 217, 205, 0.376);\n border-right-color: rgba(221, 217, 205, 0.376);\n border-bottom-color: rgba(221, 217, 205, 0.376);\n border-left-color: rgba(221, 217, 205, 0.376);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n border-bottom-left-radius: 12px;\n box-shadow: rgb(255, 255, 255) 0px 1px 2px inset;\n}\n\n.wall-screw {\n position: absolute;\n left: calc(50% - 5px);\n width: 10px;\n height: 10px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: linear-gradient(135deg, rgb(248, 246, 239), rgb(188, 183, 170));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(155, 147, 136) 0px 1px 2px, rgb(255, 255, 255) 0px 1px 1px inset;\n}\n\n.wall-screw--top {\n top: 16px;\n}\n\n.wall-screw--bottom {\n bottom: 15px;\n}\n\n.wall-screw::after {\n content: \"\";\n position: absolute;\n width: 7px;\n height: 1px;\n top: 4px;\n left: 1.5px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(139, 132, 118);\n transform: rotate(-30deg);\n box-shadow: rgba(255, 255, 255, 0.6) 0px 1px;\n}\n\n.wall-screw--bottom::after {\n transform: rotate(25deg);\n}\n\n.wall-recess {\n position: absolute;\n left: 33px;\n top: 45px;\n width: 94px;\n height: 133px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n border-bottom-left-radius: 8px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(141, 138, 128);\n box-shadow: rgb(255, 255, 255) 0px 1px 0px, rgb(73, 70, 59) 1px 2px 4px inset;\n perspective: 500px;\n}\n\n.wall-rocker {\n position: absolute;\n top: 3px;\n right: 3px;\n bottom: 3px;\n left: 3px;\n width: 88px;\n height: 127px;\n cursor: pointer;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n border-bottom-left-radius: 5px;\n transform: rotateX(-13deg);\n transform-style: preserve-3d;\n background-image: linear-gradient(rgb(231, 228, 220) 0%, rgb(245, 242, 233) 48%, rgb(255, 253, 247) 51%, rgb(249, 247, 237) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 255, 255) 1px 0px 2px inset, rgb(187, 181, 169) -1px 0px 2px inset, rgb(209, 204, 192) 0px 7px 0px, rgba(69, 64, 54, 0.314) 0px 10px 6px;\n transition-behavior: normal, normal, normal;\n transition-duration: 0.28s, 0.28s, 0.4s;\n transition-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1), ease, ease;\n transition-delay: 0s, 0s, 0s;\n transition-property: transform, box-shadow, background;\n}\n\n.wall-rocker::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 9px;\n right: 9px;\n height: 1px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(226, 223, 214, 0.333);\n box-shadow: rgba(255, 255, 255, 0.5) 0px 1px;\n}\n\n.wall-rocker-top, .wall-rocker-bottom {\n position: absolute;\n left: 0px;\n right: 0px;\n display: flex;\n flex-direction: column;\n align-items: center;\n row-gap: 3px;\n column-gap: 3px;\n}\n\n.wall-rocker-top {\n top: 17px;\n color: rgb(145, 135, 112);\n}\n\n.wall-rocker-bottom {\n bottom: 13px;\n color: rgb(189, 183, 171);\n}\n\n.wall-rocker svg {\n width: 19px;\n height: 19px;\n}\n\n.wall-word {\n font-family: inherit;\n font-size: 7px;\n line-height: 1.2;\n font-weight: 600;\n letter-spacing: 1.5px;\n}\n\n.wall-indicator {\n position: absolute;\n left: calc(50% - 3px);\n bottom: 33px;\n height: 3px;\n width: 6px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n border-bottom-left-radius: 2px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(146, 170, 114);\n box-shadow: rgba(183, 206, 147, 0.467) 0px 0px 5px, rgb(209, 223, 184) 0px 1px inset;\n transition-behavior: normal, normal;\n transition-duration: 0.5s, 0.5s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, box-shadow;\n}\n\n[data-theme=\"dark\"] .wall-plate {\n filter: brightness(0.74);\n box-shadow: rgb(255, 255, 255) 2px 2px 3px inset, rgba(189, 185, 173, 0.44) -2px -3px 3px inset, rgb(106, 107, 106) 2px 3px 1px, rgba(17, 21, 27, 0.4) 5px 10px 12px, rgba(16, 19, 23, 0.333) 14px 24px 28px;\n}\n\n[data-theme=\"dark\"] .wall-rocker {\n transform: rotateX(13deg);\n background-image: linear-gradient(rgb(255, 253, 247) 0%, rgb(245, 242, 233) 49%, rgb(233, 230, 221) 52%, rgb(221, 217, 207) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 255, 255) 1px 0px 2px inset, rgb(187, 181, 169) -1px 0px 2px inset, rgb(201, 197, 186) 0px -7px 0px, rgba(69, 64, 54, 0.25) 0px -9px 6px;\n}\n\n[data-theme=\"dark\"] .wall-rocker-top {\n color: rgb(189, 183, 171);\n}\n\n[data-theme=\"dark\"] .wall-rocker-bottom {\n color: rgb(141, 130, 113);\n}\n\n[data-theme=\"dark\"] .wall-indicator {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(198, 164, 129);\n box-shadow: rgba(255, 200, 145, 0.69) 0px 0px 7px, rgb(235, 209, 182) 0px 1px inset;\n}\n\n.wall-rocker:focus-visible {\n outline-color: rgb(166, 130, 67);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 9px;\n}\n\n@keyframes cord-tug {\n 0% {\n transform: translateY(0px) rotate(0deg);\n }\n\n 18% {\n transform: translateY(29px) rotate(-2deg);\n }\n\n 39% {\n transform: translateY(-9px) rotate(3deg);\n }\n\n 59% {\n transform: translateY(5px) rotate(-2deg);\n }\n\n 78% {\n transform: translateY(-2px) rotate(0.8deg);\n }\n\n 100% {\n transform: translateY(0px) rotate(0deg);\n }\n}\n\n@keyframes cord-ring {\n 0% {\n opacity: 0.8;\n transform: translate(-50%, -50%) scale(0.35);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.5);\n }\n}\n\n@keyframes lamp-nod {\n 0%, 100% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-3deg);\n }\n\n 55% {\n transform: rotate(1.7deg);\n }\n\n 80% {\n transform: rotate(-0.6deg);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wall-rocker, .wall-plate, .wall-wash, .wall-indicator, .cord-handle, .cord-lightpool, .lamp-object span, .lamp-ambient {\n transition-behavior: normal !important;\n transition-duration: 0s !important;\n transition-timing-function: ease !important;\n transition-delay: 0s !important;\n transition-property: none !important;\n }\n\n [data-demo=\"pull-cord\"].is-animating .cord-assembly, [data-demo=\"pull-cord\"].is-animating .cord-ripple, [data-demo=\"desk-lamp\"].is-animating .lamp-shade, [data-demo=\"desk-lamp\"].is-animating .lamp-shade-rim, [data-demo=\"desk-lamp\"].is-animating .lamp-bulb {\n animation-duration: auto;\n animation-timing-function: ease;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n animation-name: none;\n animation-timeline: auto;\n animation-range-start: normal;\n animation-range-end: normal;\n }\n}<\/code><\/pre>\n\n\n\nJavaScript<\/h3>\n\n\n\n\/\/ The switch is on in light mode. Native buttons support Enter and Space.\nconst animations = new WeakMap();\ndocument.querySelectorAll('.demo-toggle').forEach(button => {\n button.addEventListener('click', () => {\n const canvas = button.closest('.canvas');\n const light = canvas.dataset.theme !== 'light';\n canvas.dataset.theme = light ? 'light' : 'dark';\n button.setAttribute('aria-checked', String(light));\n canvas.querySelector('.theme-label').innerHTML = (light ? \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"4\\\"\/><path d=\\\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\\\"\/><\/svg>\" : \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z\\\"\/><\/svg>\") + '<span>' + (light ? 'Light mode' : 'Dark mode') + '<\/span>';\n canvas.querySelector('.canvas-state').textContent = light ? 'A little brighter' : 'A little quieter';\n clearTimeout(animations.get(canvas));\n canvas.classList.remove('is-animating');\n void canvas.offsetWidth;\n canvas.classList.add('is-animating');\n animations.set(canvas, setTimeout(() => canvas.classList.remove('is-animating'), 1100));\n });\n});<\/code><\/pre>\n\n\n\n2. 3D Magic Particle Switch<\/h2>\n\n\n\n<\/video><\/figure>\n\n\n\nI added a sliding knob and a burst of particles to this switch. You get a short trail of movement each time you change the mode.<\/p>\n\n\n\n
Features:<\/strong><\/p>\n\n\n\n\nA rounded track with a raised knob and soft violet shading.<\/li>\n\n\n\n Sun and moon symbols that change with the selected mode.<\/li>\n\n\n\n Ten particles with different movement paths and delays.<\/li>\n\n\n\n Light lavender and deep violet canvas backgrounds.<\/li>\n<\/ul>\n\n\n\nHTML<\/h3>\n\n\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>3D Magic Particle Switch<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <script src=\"script.js\" defer><\/script>\n<\/head>\n<body>\n<main class=\"export-wrap\">\n<div class=\"canvas\" data-demo=\"magic-switch\" data-theme=\"dark\" aria-label=\"A little magic interactive preview\">\n <div class=\"scene\">\n<div class=\"magic-aura\" aria-hidden=\"true\">\n<\/div>\n <div class=\"magic-orbit\" aria-hidden=\"true\">\n<span>\n<\/span>\n<span>\n<\/span>\n<span>\n<\/span>\n<\/div>\n <div class=\"magic-control\">\n <div class=\"magic-particles\" aria-hidden=\"true\">\n<i class=\"magic-particle magic-particle-1\" aria-hidden=\"true\">\n<\/i>\n<i class=\"magic-particle magic-particle-2\" aria-hidden=\"true\">\n<\/i>\n<i class=\"magic-particle magic-particle-3\" aria-hidden=\"true\">\n<\/i>\n<i class=\"magic-particle magic-particle-4\" aria-hidden=\"true\">\n<\/i>\n<i class=\"magic-particle magic-particle-5\" aria-hidden=\"true\">\n<\/i>\n<i class=\"magic-particle magic-particle-6\" aria-hidden=\"true\">\n<\/i>\n<i class=\"magic-particle magic-particle-7\" aria-hidden=\"true\">\n<\/i>\n<i class=\"magic-particle magic-particle-8\" aria-hidden=\"true\">\n<\/i>\n<i class=\"magic-particle magic-particle-9\" aria-hidden=\"true\">\n<\/i>\n<i class=\"magic-particle magic-particle-10\" aria-hidden=\"true\">\n<\/i>\n<\/div>\n <button class=\"demo-toggle magic-toggle\" role=\"switch\" aria-checked=\"false\" aria-label=\"Toggle the magic light\">\n <span class=\"magic-track-shine\" aria-hidden=\"true\">\n<\/span>\n <span class=\"magic-track-stars\" aria-hidden=\"true\">\u2726<i>\u2727<\/i>\n<\/span>\n <span class=\"magic-day-dot\" aria-hidden=\"true\">\n<\/span>\n <span class=\"magic-knob\" aria-hidden=\"true\">\n<span class=\"magic-knob-sun\">☀<\/span>\n<span class=\"magic-knob-moon\">\u263e<\/span>\n<\/span>\n <\/button>\n <span class=\"magic-label\" aria-hidden=\"true\">\n<span class=\"magic-label-day\">LIGHT MAGIC<\/span>\n<span class=\"magic-label-night\">MIDNIGHT MAGIC<\/span>\n<\/span>\n <\/div>\n<\/div>\n <div class=\"canvas-top\">\n<span class=\"theme-label\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n<path d=\"M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z\">\n<\/path>\n<\/svg>\n<span>Dark mode<\/span>\n<\/span>\n<\/div>\n <div class=\"canvas-bottom\">\n<span class=\"canvas-hint\">Make a little magic<\/span>\n<span class=\"canvas-state\">A little quieter<\/span>\n<\/div>\n <\/div>\n<h1 class=\"export-title\">A little magic<\/h1>\n<\/main>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS<\/h3>\n\n\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin-top: 0px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n padding-top: 24px;\n padding-right: 24px;\n padding-bottom: 24px;\n padding-left: 24px;\n min-height: 100dvh;\n display: grid;\n align-items: center;\n justify-items: center;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(246, 246, 244);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.export-wrap {\n width: min(100%, 400px);\n}\n\n.export-title {\n text-align: center;\n font-size: 15px;\n font-weight: 500;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 6px;\n margin-left: 0px;\n color: rgb(69, 73, 66);\n}\n\nbutton:focus-visible {\n outline-color: rgb(222, 101, 65);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 5px;\n}\n\n.canvas {\n position: relative;\n aspect-ratio: 4 \/ 5;\n width: 100%;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-bottom-right-radius: 14px;\n border-bottom-left-radius: 14px;\n isolation: isolate;\n container-type: inline-size;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(240, 238, 232);\n color: rgb(101, 95, 80);\n transition-behavior: normal, normal;\n transition-duration: 0.75s, 0.6s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, color;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.canvas[data-theme=\"dark\"] {\n color: rgb(217, 219, 232);\n color-scheme: dark;\n}\n\n.scene {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: grid;\n align-items: center;\n justify-items: center;\n perspective: 800px;\n}\n\n.demo-toggle {\n font-style: inherit;\n font-variant-ligatures: inherit;\n font-variant-caps: inherit;\n font-variant-numeric: inherit;\n font-variant-east-asian: inherit;\n font-variant-alternates: inherit;\n font-variant-position: inherit;\n font-variant-emoji: inherit;\n font-weight: inherit;\n font-stretch: inherit;\n font-size: inherit;\n line-height: inherit;\n font-family: inherit;\n font-optical-sizing: inherit;\n font-size-adjust: inherit;\n font-kerning: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-language-override: inherit;\n color: inherit;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: none;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n}\n\n.demo-toggle:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 12px;\n}\n\n.canvas-top {\n position: absolute;\n left: 20px;\n right: 17px;\n top: 17px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 5;\n pointer-events: none;\n}\n\n.theme-label {\n display: inline-flex;\n align-items: center;\n row-gap: 6px;\n column-gap: 6px;\n font-size: 9px;\n font-weight: 500;\n line-height: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n padding-top: 7px;\n padding-right: 9px;\n padding-bottom: 7px;\n padding-left: 9px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n border-bottom-left-radius: 20px;\n backdrop-filter: blur(6px);\n}\n\n.theme-label svg {\n width: 11px;\n height: 11px;\n stroke-width: 1.5;\n}\n\n.canvas-expand {\n display: grid;\n align-items: center;\n justify-items: center;\n pointer-events: auto;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n color: inherit;\n width: 30px;\n height: 30px;\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-right-radius: 7px;\n border-bottom-left-radius: 7px;\n cursor: pointer;\n opacity: 0.6;\n transition-behavior: normal, normal;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, background;\n}\n\n.canvas-expand:hover {\n opacity: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n}\n\n.canvas-expand:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n}\n\n.canvas-expand svg {\n width: 14px;\n height: 14px;\n}\n\n.canvas-bottom {\n position: absolute;\n bottom: 27px;\n left: 14px;\n right: 14px;\n display: flex;\n align-items: center;\n flex-direction: column;\n row-gap: 6px;\n column-gap: 6px;\n z-index: 4;\n pointer-events: none;\n text-align: center;\n}\n\n.canvas-hint {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05px;\n line-height: 1.4;\n}\n\n.canvas-state {\n font-size: 8px;\n opacity: 0.7;\n letter-spacing: 0.2px;\n}\n\n.canvas[data-theme=\"dark\"] .theme-label {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.05);\n}\n\n.canvas[data-theme=\"dark\"] .canvas-expand:hover {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.08);\n}\n\n@media (max-width: 1000px) and (min-width: 761px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 19px;\n }\n\n .canvas-hint {\n font-size: 9px;\n }\n\n .canvas-state {\n font-size: 7px;\n }\n\n .theme-label {\n font-size: 8px;\n padding-top: 6px;\n padding-right: 7px;\n padding-bottom: 6px;\n padding-left: 7px;\n }\n}\n\n@media (max-width: 760px) and (min-width: 501px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 18px;\n }\n\n .canvas-hint {\n font-size: 10px;\n }\n\n .theme-label {\n font-size: 8px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .canvas *, .canvas ::before, .canvas ::after, .canvas {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@container (max-width: 320px) {\n .canvas .wall-plate {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.85);\n }\n\n .canvas .celestial-control {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .mood-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .horizon-switch {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .eclipse-dial {\n transform: translate(-50%, -50%) scale(0.84);\n }\n\n .canvas .lamp-object {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .arcade-switch {\n transform: translate(-50%, -50%) scale(0.85);\n }\n}\n\n.canvas[data-demo=\"magic-switch\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(238, 233, 251);\n color: rgb(89, 80, 112);\n}\n\n.canvas[data-demo=\"magic-switch\"][data-theme=\"dark\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(36, 31, 60);\n color: rgb(221, 213, 240);\n}\n\n.magic-aura {\n position: absolute;\n width: 330px;\n height: 310px;\n left: 50%;\n top: 47%;\n transform: translate(-50%, -50%);\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: radial-gradient(rgba(193, 163, 238, 0.5), rgba(211, 185, 247, 0.15) 45%, transparent 70%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n transition-behavior: normal;\n transition-duration: 0.8s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: background;\n}\n\n[data-theme=\"dark\"] .magic-aura {\n background-image: radial-gradient(rgba(139, 91, 215, 0.27), rgba(122, 86, 193, 0.09) 45%, transparent 70%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n}\n\n.magic-control {\n position: absolute;\n top: 49%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 216px;\n height: 104px;\n}\n\n.magic-toggle {\n position: relative;\n width: 216px;\n height: 104px;\n border-top-left-radius: 58px;\n border-top-right-radius: 58px;\n border-bottom-right-radius: 58px;\n border-bottom-left-radius: 58px;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgba(255, 255, 255, 0.6);\n border-right-color: rgba(255, 255, 255, 0.6);\n border-bottom-color: rgba(255, 255, 255, 0.6);\n border-left-color: rgba(255, 255, 255, 0.6);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: linear-gradient(145deg, rgb(203, 182, 228), rgb(228, 213, 241) 65%, rgb(244, 233, 252));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(167, 140, 191) 0px 4px 8px inset, rgb(255, 248, 255) 0px -3px 5px inset, rgba(101, 64, 145, 0.45) 0px 18px 25px -12px, rgb(198, 178, 220) 0px 3px 2px;\n cursor: pointer;\n transition-behavior: normal, normal, normal;\n transition-duration: 0.7s, 0.7s, 0.7s;\n transition-timing-function: ease, ease, ease;\n transition-delay: 0s, 0s, 0s;\n transition-property: background, box-shadow, border-color;\n -webkit-tap-highlight-color: transparent;\n}\n\n[data-theme=\"dark\"] .magic-toggle {\n background-image: linear-gradient(145deg, rgb(22, 16, 34), rgb(48, 35, 69) 65%, rgb(64, 46, 89));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n border-top-color: rgb(75, 57, 101);\n border-right-color: rgb(75, 57, 101);\n border-bottom-color: rgb(75, 57, 101);\n border-left-color: rgb(75, 57, 101);\n box-shadow: rgb(14, 11, 23) 0px 5px 10px inset, rgb(113, 82, 140) 0px -2px 2px inset, rgb(16, 11, 27) 0px 18px 32px -9px, rgb(38, 26, 57) 0px 2px 2px;\n}\n\n.magic-track-shine {\n position: absolute;\n top: 5px;\n right: 5px;\n bottom: 5px;\n left: 5px;\n border-top-left-radius: 50px;\n border-top-right-radius: 50px;\n border-bottom-right-radius: 50px;\n border-bottom-left-radius: 50px;\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgba(255, 255, 255, 0.15);\n border-right-color: rgba(255, 255, 255, 0.15);\n border-bottom-color: rgba(255, 255, 255, 0.15);\n border-left-color: rgba(255, 255, 255, 0.15);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n pointer-events: none;\n}\n\n.magic-knob {\n position: absolute;\n left: 9px;\n top: 9px;\n width: 84px;\n height: 84px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n transform: translateX(110px);\n background-image: radial-gradient(circle at 33% 22%, rgb(255, 249, 255) 0%, rgb(251, 241, 255) 35%, rgb(222, 202, 239) 75%, rgb(192, 166, 215) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgb(248, 239, 255);\n border-right-color: rgb(248, 239, 255);\n border-bottom-color: rgb(248, 239, 255);\n border-left-color: rgb(248, 239, 255);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n box-shadow: rgb(255, 255, 255) 0px 2px 4px inset, rgb(180, 154, 197) -3px -4px 7px inset, rgba(144, 113, 169, 0.537) 3px 6px 10px, rgb(118, 85, 141) 0px 1px 2px;\n transition-behavior: normal, normal, normal;\n transition-duration: 0.7s, 0.65s, 0.65s;\n transition-timing-function: cubic-bezier(0.3, 1.4, 0.45, 1), ease, ease;\n transition-delay: 0s, 0s, 0s;\n transition-property: transform, background, box-shadow;\n}\n\n[data-theme=\"dark\"] .magic-knob {\n transform: translateX(0px);\n background-image: radial-gradient(circle at 30% 20%, rgb(230, 216, 255) 0%, rgb(200, 169, 239) 40%, rgb(164, 118, 212) 80%, rgb(121, 84, 166) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n border-top-color: rgb(217, 187, 251);\n border-right-color: rgb(217, 187, 251);\n border-bottom-color: rgb(217, 187, 251);\n border-left-color: rgb(217, 187, 251);\n box-shadow: rgb(242, 231, 255) 0px 2px 5px inset, rgb(125, 80, 172) -3px -4px 8px inset, rgba(6, 2, 13, 0.467) 3px 5px 10px, rgba(183, 128, 239, 0.2) 0px 0px 25px;\n}\n\n.magic-knob-sun, .magic-knob-moon {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: grid;\n align-items: center;\n justify-items: center;\n color: rgb(134, 97, 169);\n font-style: normal;\n font-variant-caps: normal;\n font-variant-ligatures: normal;\n font-variant-numeric: normal;\n font-variant-east-asian: normal;\n font-variant-alternates: normal;\n font-size-adjust: none;\n font-language-override: normal;\n font-kerning: auto;\n font-optical-sizing: auto;\n font-feature-settings: normal;\n font-variation-settings: normal;\n font-variant-position: normal;\n font-variant-emoji: normal;\n font-weight: normal;\n font-stretch: normal;\n font-size: 42px;\n line-height: 1;\n font-family: Georgia, serif;\n text-shadow: rgb(255, 255, 255) 0px 1px 1px;\n transition-behavior: normal, normal;\n transition-duration: 0.4s, 0.65s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, transform;\n}\n\n.magic-knob-moon {\n opacity: 0;\n transform: rotate(-80deg) scale(0.6);\n color: rgb(107, 65, 146);\n font-size: 49px;\n}\n\n[data-theme=\"dark\"] .magic-knob-sun {\n opacity: 0;\n transform: rotate(80deg) scale(0.6);\n}\n\n[data-theme=\"dark\"] .magic-knob-moon {\n opacity: 1;\n transform: rotate(-15deg) scale(1);\n}\n\n.magic-track-stars {\n position: absolute;\n left: 137px;\n top: 27px;\n font-size: 25px;\n color: rgb(217, 195, 246);\n opacity: 0;\n transition-behavior: normal;\n transition-duration: 0.5s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n text-shadow: rgb(173, 126, 230) 0px 0px 10px;\n}\n\n.magic-track-stars i {\n position: absolute;\n left: 26px;\n top: 24px;\n font-style: normal;\n font-size: 13px;\n}\n\n[data-theme=\"dark\"] .magic-track-stars {\n opacity: 1;\n}\n\n.magic-day-dot {\n position: absolute;\n left: 38px;\n top: 40px;\n height: 20px;\n width: 20px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n border-top-width: 2px;\n border-right-width: 2px;\n border-bottom-width: 2px;\n border-left-width: 2px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgb(172, 143, 197);\n border-right-color: rgb(172, 143, 197);\n border-bottom-color: rgb(172, 143, 197);\n border-left-color: rgb(172, 143, 197);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n opacity: 0.65;\n transition-behavior: normal;\n transition-duration: 0.4s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n[data-theme=\"dark\"] .magic-day-dot {\n opacity: 0;\n}\n\n.magic-label {\n position: absolute;\n top: 135px;\n left: 0px;\n right: 0px;\n height: 14px;\n text-align: center;\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 2.1px;\n color: rgb(138, 116, 157);\n}\n\n.magic-label-day, .magic-label-night {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n transition-behavior: normal;\n transition-duration: 0.4s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n.magic-label-night {\n opacity: 0;\n color: rgb(184, 163, 208);\n}\n\n[data-theme=\"dark\"] .magic-label-day {\n opacity: 0;\n}\n\n[data-theme=\"dark\"] .magic-label-night {\n opacity: 1;\n}\n\n.magic-orbit {\n position: absolute;\n top: 49%;\n left: 50%;\n width: 294px;\n height: 198px;\n transform: translate(-50%, -50%) rotate(-22deg);\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgba(182, 154, 202, 0.22);\n border-right-color: rgba(182, 154, 202, 0.22);\n border-bottom-color: rgba(182, 154, 202, 0.22);\n border-left-color: rgba(182, 154, 202, 0.22);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n pointer-events: none;\n}\n\n.magic-orbit span {\n position: absolute;\n width: 5px;\n height: 5px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(188, 156, 219);\n top: 28px;\n left: 33px;\n box-shadow: rgb(214, 180, 244) 0px 0px 8px;\n}\n\n.magic-orbit span:nth-child(2) {\n left: auto;\n right: 12px;\n top: 133px;\n width: 4px;\n height: 4px;\n}\n\n.magic-orbit span:nth-child(3) {\n left: 103px;\n top: auto;\n bottom: 0px;\n width: 3px;\n height: 3px;\n opacity: 0.7;\n}\n\n[data-theme=\"dark\"] .magic-orbit {\n border-top-color: rgba(173, 134, 214, 0.17);\n border-right-color: rgba(173, 134, 214, 0.17);\n border-bottom-color: rgba(173, 134, 214, 0.17);\n border-left-color: rgba(173, 134, 214, 0.17);\n}\n\n.magic-particles {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n pointer-events: none;\n z-index: 2;\n}\n\n.magic-particle {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 8px;\n height: 8px;\n opacity: 0;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(255, 243, 208);\n box-shadow: rgb(255, 196, 244) 0px 0px 8px;\n clip-path: polygon(50% 0px, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0px 50%, 38% 38%);\n}\n\n.magic-particle-1 {\n --px: -118px;\n --py: -64px;\n --delay: 0ms;\n}\n\n.magic-particle-2 {\n --px: -50px;\n --py: -97px;\n --delay: 45ms;\n}\n\n.magic-particle-3 {\n --px: 28px;\n --py: -86px;\n --delay: 100ms;\n}\n\n.magic-particle-4 {\n --px: 105px;\n --py: -67px;\n --delay: 150ms;\n}\n\n.magic-particle-5 {\n --px: 145px;\n --py: 0px;\n --delay: 40ms;\n}\n\n.magic-particle-6 {\n --px: 100px;\n --py: 70px;\n --delay: 80ms;\n}\n\n.magic-particle-7 {\n --px: 35px;\n --py: 81px;\n --delay: 160ms;\n}\n\n.magic-particle-8 {\n --px: -52px;\n --py: 74px;\n --delay: 110ms;\n}\n\n.magic-particle-9 {\n --px: -139px;\n --py: 26px;\n --delay: 30ms;\n}\n\n.magic-particle-10 {\n --px: 5px;\n --py: -117px;\n --delay: 200ms;\n}\n\n.is-animating .magic-particle {\n animation-duration: ;\n animation-timing-function: ;\n animation-delay: ;\n animation-iteration-count: ;\n animation-direction: ;\n animation-fill-mode: ;\n animation-play-state: ;\n animation-name: ;\n animation-timeline: ;\n animation-range-start: ;\n animation-range-end: ;\n}\n\n@keyframes magic-burst {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px) scale(0.2) rotate(0deg);\n }\n\n 18% {\n opacity: 1;\n }\n\n 65% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n transform: translate(var(--px),var(--py)) scale(.3) rotate(180deg);\n }\n}\n\n@keyframes celestial-shadow {\n 50% {\n transform: scale(0.7);\n opacity: 0.1;\n }\n}\n\n@media (max-width: 480px) {\n .magic-control {\n transform: translate(-50%, -50%) scale(0.92);\n }\n\n .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.92);\n }\n\n .celestial-control {\n transform: translate(-50%, -50%) scale(0.92);\n }\n\n .mood-control {\n transform: translate(-50%, -50%) scale(0.94);\n }\n}<\/code><\/pre>\n\n\n\nJavaScript<\/h3>\n\n\n\n\/\/ The switch is on in light mode. Native buttons support Enter and Space.\nconst animations = new WeakMap();\ndocument.querySelectorAll('.demo-toggle').forEach(button => {\n button.addEventListener('click', () => {\n const canvas = button.closest('.canvas');\n const light = canvas.dataset.theme !== 'light';\n canvas.dataset.theme = light ? 'light' : 'dark';\n button.setAttribute('aria-checked', String(light));\n canvas.querySelector('.theme-label').innerHTML = (light ? \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"4\\\"\/><path d=\\\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\\\"\/><\/svg>\" : \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z\\\"\/><\/svg>\") + '<span>' + (light ? 'Light mode' : 'Dark mode') + '<\/span>';\n canvas.querySelector('.canvas-state').textContent = light ? 'A little brighter' : 'A little quieter';\n clearTimeout(animations.get(canvas));\n canvas.classList.remove('is-animating');\n void canvas.offsetWidth;\n canvas.classList.add('is-animating');\n animations.set(canvas, setTimeout(() => canvas.classList.remove('is-animating'), 1100));\n });\n});<\/code><\/pre>\n\n\n\n3. Hanging Rope Light Switch<\/h2>\n\n\n\n<\/video><\/figure>\n\n\n\nI used a brass pull handle suspended from the top of the canvas. You click or tap the handle, and it performs a pulling animation as the light changes.<\/p>\n\n\n\n
Features:<\/strong><\/p>\n\n\n\n\nA textured rope that hangs from the top edge.<\/li>\n\n\n\n A brass handle with grooves, highlights, and shadows.<\/li>\n\n\n\n A downward tug followed by a spring motion.<\/li>\n\n\n\n An expanding ripple and separate light and dark backgrounds.<\/li>\n<\/ul>\n\n\n\nHTML<\/h3>\n\n\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Hanging Rope Light Switch<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <script src=\"script.js\" defer><\/script>\n<\/head>\n<body>\n<main class=\"export-wrap\">\n<div class=\"canvas\" data-demo=\"pull-cord\" data-theme=\"light\" aria-label=\"A little pull of magic interactive preview\">\n <div class=\"scene\">\n <div class=\"cord-lightpool\" aria-hidden=\"true\">\n<\/div>\n <div class=\"cord-mount\" aria-hidden=\"true\">\n<\/div>\n <div class=\"cord-assembly\">\n <span class=\"cord-string\" aria-hidden=\"true\">\n<\/span>\n <button class=\"demo-toggle cord-handle\" role=\"switch\" aria-checked=\"true\" aria-label=\"Pull the cord to toggle the light\">\n <span class=\"cord-neck\" aria-hidden=\"true\">\n<\/span>\n <span class=\"cord-grip\" aria-hidden=\"true\">\n<span class=\"cord-groove\">\n<\/span>\n<span class=\"cord-groove\">\n<\/span>\n<span class=\"cord-groove\">\n<\/span>\n<span class=\"cord-groove\">\n<\/span>\n<\/span>\n <span class=\"cord-end\" aria-hidden=\"true\">\n<\/span>\n <\/button>\n <\/div>\n <div class=\"cord-ripple\" aria-hidden=\"true\">\n<\/div>\n<\/div>\n <div class=\"canvas-top\">\n<span class=\"theme-label\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n<circle cx=\"12\" cy=\"12\" r=\"4\">\n<\/circle>\n<path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\">\n<\/path>\n<\/svg>\n<span>Light mode<\/span>\n<\/span>\n<\/div>\n <div class=\"canvas-bottom\">\n<span class=\"canvas-hint\">Pull to change the mood<\/span>\n<span class=\"canvas-state\">A little brighter<\/span>\n<\/div>\n <\/div>\n<h1 class=\"export-title\">A little pull of magic<\/h1>\n<\/main>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS<\/h3>\n\n\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin-top: 0px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n padding-top: 24px;\n padding-right: 24px;\n padding-bottom: 24px;\n padding-left: 24px;\n min-height: 100dvh;\n display: grid;\n align-items: center;\n justify-items: center;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(246, 246, 244);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.export-wrap {\n width: min(100%, 400px);\n}\n\n.export-title {\n text-align: center;\n font-size: 15px;\n font-weight: 500;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 6px;\n margin-left: 0px;\n color: rgb(69, 73, 66);\n}\n\nbutton:focus-visible {\n outline-color: rgb(222, 101, 65);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 5px;\n}\n\n.canvas {\n position: relative;\n aspect-ratio: 4 \/ 5;\n width: 100%;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-bottom-right-radius: 14px;\n border-bottom-left-radius: 14px;\n isolation: isolate;\n container-type: inline-size;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(240, 238, 232);\n color: rgb(101, 95, 80);\n transition-behavior: normal, normal;\n transition-duration: 0.75s, 0.6s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, color;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.canvas[data-theme=\"dark\"] {\n color: rgb(217, 219, 232);\n color-scheme: dark;\n}\n\n.scene {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: grid;\n align-items: center;\n justify-items: center;\n perspective: 800px;\n}\n\n.demo-toggle {\n font-style: inherit;\n font-variant-ligatures: inherit;\n font-variant-caps: inherit;\n font-variant-numeric: inherit;\n font-variant-east-asian: inherit;\n font-variant-alternates: inherit;\n font-variant-position: inherit;\n font-variant-emoji: inherit;\n font-weight: inherit;\n font-stretch: inherit;\n font-size: inherit;\n line-height: inherit;\n font-family: inherit;\n font-optical-sizing: inherit;\n font-size-adjust: inherit;\n font-kerning: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-language-override: inherit;\n color: inherit;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: none;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n}\n\n.demo-toggle:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 12px;\n}\n\n.canvas-top {\n position: absolute;\n left: 20px;\n right: 17px;\n top: 17px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 5;\n pointer-events: none;\n}\n\n.theme-label {\n display: inline-flex;\n align-items: center;\n row-gap: 6px;\n column-gap: 6px;\n font-size: 9px;\n font-weight: 500;\n line-height: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n padding-top: 7px;\n padding-right: 9px;\n padding-bottom: 7px;\n padding-left: 9px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n border-bottom-left-radius: 20px;\n backdrop-filter: blur(6px);\n}\n\n.theme-label svg {\n width: 11px;\n height: 11px;\n stroke-width: 1.5;\n}\n\n.canvas-expand {\n display: grid;\n align-items: center;\n justify-items: center;\n pointer-events: auto;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n color: inherit;\n width: 30px;\n height: 30px;\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-right-radius: 7px;\n border-bottom-left-radius: 7px;\n cursor: pointer;\n opacity: 0.6;\n transition-behavior: normal, normal;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, background;\n}\n\n.canvas-expand:hover {\n opacity: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n}\n\n.canvas-expand:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n}\n\n.canvas-expand svg {\n width: 14px;\n height: 14px;\n}\n\n.canvas-bottom {\n position: absolute;\n bottom: 27px;\n left: 14px;\n right: 14px;\n display: flex;\n align-items: center;\n flex-direction: column;\n row-gap: 6px;\n column-gap: 6px;\n z-index: 4;\n pointer-events: none;\n text-align: center;\n}\n\n.canvas-hint {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05px;\n line-height: 1.4;\n}\n\n.canvas-state {\n font-size: 8px;\n opacity: 0.7;\n letter-spacing: 0.2px;\n}\n\n.canvas[data-theme=\"dark\"] .theme-label {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.05);\n}\n\n.canvas[data-theme=\"dark\"] .canvas-expand:hover {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.08);\n}\n\n@media (max-width: 1000px) and (min-width: 761px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 19px;\n }\n\n .canvas-hint {\n font-size: 9px;\n }\n\n .canvas-state {\n font-size: 7px;\n }\n\n .theme-label {\n font-size: 8px;\n padding-top: 6px;\n padding-right: 7px;\n padding-bottom: 6px;\n padding-left: 7px;\n }\n}\n\n@media (max-width: 760px) and (min-width: 501px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 18px;\n }\n\n .canvas-hint {\n font-size: 10px;\n }\n\n .theme-label {\n font-size: 8px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .canvas *, .canvas ::before, .canvas ::after, .canvas {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@container (max-width: 320px) {\n .canvas .wall-plate {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.85);\n }\n\n .canvas .celestial-control {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .mood-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .horizon-switch {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .eclipse-dial {\n transform: translate(-50%, -50%) scale(0.84);\n }\n\n .canvas .lamp-object {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .arcade-switch {\n transform: translate(-50%, -50%) scale(0.85);\n }\n}\n\n.canvas[data-demo=\"pull-cord\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(246, 236, 205);\n transition-behavior: normal;\n transition-duration: 0.7s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: background-color;\n}\n\n.canvas[data-demo=\"pull-cord\"][data-theme=\"dark\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(41, 44, 59);\n}\n\n.cord-lightpool {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n background-image: radial-gradient(at 50% 10%, rgb(255, 254, 245) 0%, rgba(255, 247, 207, 0.69) 27%, transparent 75%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n transition-behavior: normal;\n transition-duration: 0.7s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n[data-theme=\"dark\"] .cord-lightpool {\n opacity: 0;\n}\n\n.cord-mount {\n position: absolute;\n top: -13px;\n left: calc(50% - 23px);\n width: 46px;\n height: 25px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: linear-gradient(90deg, rgb(182, 164, 124), rgb(239, 223, 180) 45%, rgb(181, 161, 124));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(113, 97, 62, 0.22) 0px 4px 5px;\n}\n\n.cord-assembly {\n position: absolute;\n left: calc(50% - 38px);\n top: 0px;\n width: 76px;\n height: 52%;\n transform-origin: center top;\n}\n\n.cord-string {\n position: absolute;\n width: 3px;\n top: 2px;\n bottom: 34px;\n left: calc(50% - 1.5px);\n background-image: repeating-linear-gradient(135deg, rgb(172, 158, 127) 0px, rgb(222, 210, 174) 1px, rgb(249, 239, 207) 2px, rgb(189, 174, 138) 3px);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(168, 155, 120, 0.25) 2px 0px 1px;\n transform-origin: center top;\n}\n\n.cord-handle {\n position: absolute;\n bottom: -22px;\n left: 12px;\n width: 52px;\n height: 83px;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n cursor: pointer;\n filter: drop-shadow(rgba(139, 121, 67, 0.184) 5px 7px 4px);\n transition-behavior: normal;\n transition-duration: 0.5s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: filter;\n}\n\n.cord-neck {\n position: absolute;\n top: 0px;\n left: 21px;\n height: 17px;\n width: 10px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 2px;\n border-bottom-left-radius: 2px;\n background-image: linear-gradient(90deg, rgb(140, 107, 52), rgb(227, 198, 140) 40%, rgb(189, 150, 84) 72%, rgb(119, 88, 46));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(244, 222, 180) 0px 1px 1px inset;\n}\n\n.cord-grip {\n position: absolute;\n top: 12px;\n left: 12px;\n width: 28px;\n height: 58px;\n border-top-left-radius: 11px;\n border-top-right-radius: 11px;\n border-bottom-right-radius: 12px;\n border-bottom-left-radius: 12px;\n background-image: linear-gradient(90deg, rgb(144, 105, 50) 0%, rgb(187, 145, 78) 13%, rgb(237, 205, 140) 36%, rgb(210, 171, 103) 56%, rgb(181, 137, 71) 80%, rgb(128, 93, 45) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 230, 173) 0px 2px 1px inset, rgb(111, 75, 32) 0px -2px 3px inset;\n display: flex;\n flex-direction: column;\n justify-content: center;\n row-gap: 5px;\n column-gap: 5px;\n overflow-x: hidden;\n overflow-y: hidden;\n}\n\n.cord-groove {\n display: block;\n height: 1px;\n width: 100%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(120, 88, 38, 0.4);\n box-shadow: rgba(243, 219, 162, 0.5) 0px 1px 0px;\n}\n\n.cord-end {\n position: absolute;\n top: 65px;\n left: 17px;\n width: 18px;\n height: 8px;\n background-image: linear-gradient(90deg, rgb(148, 112, 57), rgb(233, 198, 134) 40%, rgb(152, 112, 59));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n box-shadow: rgba(115, 80, 36, 0.25) 0px -2px 1px inset;\n}\n\n[data-theme=\"dark\"] .cord-handle {\n filter: brightness(0.73) drop-shadow(rgba(16, 20, 34, 0.44) 5px 7px 4px);\n}\n\n[data-theme=\"dark\"] .cord-string {\n filter: brightness(0.7);\n}\n\n.cord-handle:focus-visible {\n outline-color: rgb(189, 160, 106);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 8px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n border-bottom-left-radius: 20px;\n}\n\n.cord-ripple {\n position: absolute;\n left: 50%;\n top: 52%;\n width: 90px;\n height: 90px;\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgba(193, 166, 96, 0.333);\n border-right-color: rgba(193, 166, 96, 0.333);\n border-bottom-color: rgba(193, 166, 96, 0.333);\n border-left-color: rgba(193, 166, 96, 0.333);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n transform: translate(-50%, -50%) scale(0.4);\n opacity: 0;\n pointer-events: none;\n}\n\n[data-demo=\"pull-cord\"].is-animating .cord-assembly {\n animation-duration: 0.85s;\n animation-timing-function: cubic-bezier(0.22, 0.6, 0.38, 1);\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n animation-name: cord-tug;\n animation-timeline: auto;\n animation-range-start: normal;\n animation-range-end: normal;\n}\n\n[data-demo=\"pull-cord\"].is-animating .cord-ripple {\n animation-duration: 0.8s;\n animation-timing-function: ease-out;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n animation-name: cord-ring;\n animation-timeline: auto;\n animation-range-start: normal;\n animation-range-end: normal;\n}\n\n@keyframes cord-tug {\n 0% {\n transform: translateY(0px) rotate(0deg);\n }\n\n 18% {\n transform: translateY(29px) rotate(-2deg);\n }\n\n 39% {\n transform: translateY(-9px) rotate(3deg);\n }\n\n 59% {\n transform: translateY(5px) rotate(-2deg);\n }\n\n 78% {\n transform: translateY(-2px) rotate(0.8deg);\n }\n\n 100% {\n transform: translateY(0px) rotate(0deg);\n }\n}\n\n@keyframes cord-ring {\n 0% {\n opacity: 0.8;\n transform: translate(-50%, -50%) scale(0.35);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.5);\n }\n}\n\n@keyframes lamp-nod {\n 0%, 100% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-3deg);\n }\n\n 55% {\n transform: rotate(1.7deg);\n }\n\n 80% {\n transform: rotate(-0.6deg);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wall-rocker, .wall-plate, .wall-wash, .wall-indicator, .cord-handle, .cord-lightpool, .lamp-object span, .lamp-ambient {\n transition-behavior: normal !important;\n transition-duration: 0s !important;\n transition-timing-function: ease !important;\n transition-delay: 0s !important;\n transition-property: none !important;\n }\n\n [data-demo=\"pull-cord\"].is-animating .cord-assembly, [data-demo=\"pull-cord\"].is-animating .cord-ripple, [data-demo=\"desk-lamp\"].is-animating .lamp-shade, [data-demo=\"desk-lamp\"].is-animating .lamp-shade-rim, [data-demo=\"desk-lamp\"].is-animating .lamp-bulb {\n animation-duration: auto;\n animation-timing-function: ease;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n animation-name: none;\n animation-timeline: auto;\n animation-range-start: normal;\n animation-range-end: normal;\n }\n}<\/code><\/pre>\n\n\n\nJavaScript<\/h3>\n\n\n\n\/\/ The switch is on in light mode. Native buttons support Enter and Space.\nconst animations = new WeakMap();\ndocument.querySelectorAll('.demo-toggle').forEach(button => {\n button.addEventListener('click', () => {\n const canvas = button.closest('.canvas');\n const light = canvas.dataset.theme !== 'light';\n canvas.dataset.theme = light ? 'light' : 'dark';\n button.setAttribute('aria-checked', String(light));\n canvas.querySelector('.theme-label').innerHTML = (light ? \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"4\\\"\/><path d=\\\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\\\"\/><\/svg>\" : \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z\\\"\/><\/svg>\") + '<span>' + (light ? 'Light mode' : 'Dark mode') + '<\/span>';\n canvas.querySelector('.canvas-state').textContent = light ? 'A little brighter' : 'A little quieter';\n clearTimeout(animations.get(canvas));\n canvas.classList.remove('is-animating');\n void canvas.offsetWidth;\n canvas.classList.add('is-animating');\n animations.set(canvas, setTimeout(() => canvas.classList.remove('is-animating'), 1100));\n });\n});<\/code><\/pre>\n\n\n\n4. 3D Sun and Moon Toggle<\/h2>\n\n\n\n<\/video><\/figure>\n\n\n\nI made the sun itself the control in this version. When you press it, the rays fold inward and a cratered moon rotates into view.<\/p>\n\n\n\n
Features:<\/strong><\/p>\n\n\n\n\nA sculpted sun with twelve raised rays.<\/li>\n\n\n\n A moon with four crater details.<\/li>\n\n\n\n Rotation, scaling, and fading during the transition.<\/li>\n\n\n\n A peach daytime canvas and a dark blue canvas with stars.<\/li>\n<\/ul>\n\n\n\nHTML<\/h3>\n\n\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>3D Sun and Moon Toggle<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <script src=\"script.js\" defer><\/script>\n<\/head>\n<body>\n<main class=\"export-wrap\">\n<div class=\"canvas\" data-demo=\"celestial\" data-theme=\"light\" aria-label=\"Around the sun interactive preview\">\n <div class=\"scene\">\n<div class=\"celestial-halo\" aria-hidden=\"true\">\n<\/div>\n <div class=\"celestial-stars\" aria-hidden=\"true\">\n<i>\n<\/i>\n<i>\n<\/i>\n<i>\n<\/i>\n<i>\n<\/i>\n<i>\n<\/i>\n<i>\n<\/i>\n<\/div>\n <div class=\"celestial-control\">\n <div class=\"celestial-rays\" aria-hidden=\"true\">\n<i class=\"celestial-ray\" style=\"--ray:0\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:1\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:2\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:3\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:4\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:5\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:6\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:7\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:8\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:9\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:10\" aria-hidden=\"true\">\n<\/i>\n<i class=\"celestial-ray\" style=\"--ray:11\" aria-hidden=\"true\">\n<\/i>\n<\/div>\n <button class=\"demo-toggle celestial-toggle\" role=\"switch\" aria-checked=\"true\" aria-label=\"Switch between sun and moon\">\n <span class=\"celestial-sun\" aria-hidden=\"true\">\n<span>\n<\/span>\n<\/span>\n <span class=\"celestial-moon\" aria-hidden=\"true\">\n<i class=\"celestial-crater crater-one\">\n<\/i>\n<i class=\"celestial-crater crater-two\">\n<\/i>\n<i class=\"celestial-crater crater-three\">\n<\/i>\n<i class=\"celestial-crater crater-four\">\n<\/i>\n<\/span>\n <\/button>\n <span class=\"celestial-orb-shadow\" aria-hidden=\"true\">\n<\/span>\n <\/div>\n<\/div>\n <div class=\"canvas-top\">\n<span class=\"theme-label\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n<circle cx=\"12\" cy=\"12\" r=\"4\">\n<\/circle>\n<path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\">\n<\/path>\n<\/svg>\n<span>Light mode<\/span>\n<\/span>\n<\/div>\n <div class=\"canvas-bottom\">\n<span class=\"canvas-hint\">Give it a little spin<\/span>\n<span class=\"canvas-state\">A little brighter<\/span>\n<\/div>\n <\/div>\n<h1 class=\"export-title\">Around the sun<\/h1>\n<\/main>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS<\/h3>\n\n\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin-top: 0px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n padding-top: 24px;\n padding-right: 24px;\n padding-bottom: 24px;\n padding-left: 24px;\n min-height: 100dvh;\n display: grid;\n align-items: center;\n justify-items: center;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(246, 246, 244);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.export-wrap {\n width: min(100%, 400px);\n}\n\n.export-title {\n text-align: center;\n font-size: 15px;\n font-weight: 500;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 6px;\n margin-left: 0px;\n color: rgb(69, 73, 66);\n}\n\nbutton:focus-visible {\n outline-color: rgb(222, 101, 65);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 5px;\n}\n\n.canvas {\n position: relative;\n aspect-ratio: 4 \/ 5;\n width: 100%;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-bottom-right-radius: 14px;\n border-bottom-left-radius: 14px;\n isolation: isolate;\n container-type: inline-size;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(240, 238, 232);\n color: rgb(101, 95, 80);\n transition-behavior: normal, normal;\n transition-duration: 0.75s, 0.6s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, color;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.canvas[data-theme=\"dark\"] {\n color: rgb(217, 219, 232);\n color-scheme: dark;\n}\n\n.scene {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: grid;\n align-items: center;\n justify-items: center;\n perspective: 800px;\n}\n\n.demo-toggle {\n font-style: inherit;\n font-variant-ligatures: inherit;\n font-variant-caps: inherit;\n font-variant-numeric: inherit;\n font-variant-east-asian: inherit;\n font-variant-alternates: inherit;\n font-variant-position: inherit;\n font-variant-emoji: inherit;\n font-weight: inherit;\n font-stretch: inherit;\n font-size: inherit;\n line-height: inherit;\n font-family: inherit;\n font-optical-sizing: inherit;\n font-size-adjust: inherit;\n font-kerning: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-language-override: inherit;\n color: inherit;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: none;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n}\n\n.demo-toggle:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 12px;\n}\n\n.canvas-top {\n position: absolute;\n left: 20px;\n right: 17px;\n top: 17px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 5;\n pointer-events: none;\n}\n\n.theme-label {\n display: inline-flex;\n align-items: center;\n row-gap: 6px;\n column-gap: 6px;\n font-size: 9px;\n font-weight: 500;\n line-height: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n padding-top: 7px;\n padding-right: 9px;\n padding-bottom: 7px;\n padding-left: 9px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n border-bottom-left-radius: 20px;\n backdrop-filter: blur(6px);\n}\n\n.theme-label svg {\n width: 11px;\n height: 11px;\n stroke-width: 1.5;\n}\n\n.canvas-expand {\n display: grid;\n align-items: center;\n justify-items: center;\n pointer-events: auto;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n color: inherit;\n width: 30px;\n height: 30px;\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-right-radius: 7px;\n border-bottom-left-radius: 7px;\n cursor: pointer;\n opacity: 0.6;\n transition-behavior: normal, normal;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, background;\n}\n\n.canvas-expand:hover {\n opacity: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n}\n\n.canvas-expand:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n}\n\n.canvas-expand svg {\n width: 14px;\n height: 14px;\n}\n\n.canvas-bottom {\n position: absolute;\n bottom: 27px;\n left: 14px;\n right: 14px;\n display: flex;\n align-items: center;\n flex-direction: column;\n row-gap: 6px;\n column-gap: 6px;\n z-index: 4;\n pointer-events: none;\n text-align: center;\n}\n\n.canvas-hint {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05px;\n line-height: 1.4;\n}\n\n.canvas-state {\n font-size: 8px;\n opacity: 0.7;\n letter-spacing: 0.2px;\n}\n\n.canvas[data-theme=\"dark\"] .theme-label {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.05);\n}\n\n.canvas[data-theme=\"dark\"] .canvas-expand:hover {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.08);\n}\n\n@media (max-width: 1000px) and (min-width: 761px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 19px;\n }\n\n .canvas-hint {\n font-size: 9px;\n }\n\n .canvas-state {\n font-size: 7px;\n }\n\n .theme-label {\n font-size: 8px;\n padding-top: 6px;\n padding-right: 7px;\n padding-bottom: 6px;\n padding-left: 7px;\n }\n}\n\n@media (max-width: 760px) and (min-width: 501px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 18px;\n }\n\n .canvas-hint {\n font-size: 10px;\n }\n\n .theme-label {\n font-size: 8px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .canvas *, .canvas ::before, .canvas ::after, .canvas {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@container (max-width: 320px) {\n .canvas .wall-plate {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.85);\n }\n\n .canvas .celestial-control {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .mood-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .horizon-switch {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .eclipse-dial {\n transform: translate(-50%, -50%) scale(0.84);\n }\n\n .canvas .lamp-object {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .arcade-switch {\n transform: translate(-50%, -50%) scale(0.85);\n }\n}\n\n@keyframes magic-burst {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px) scale(0.2) rotate(0deg);\n }\n\n 18% {\n opacity: 1;\n }\n\n 65% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n transform: translate(var(--px),var(--py)) scale(.3) rotate(180deg);\n }\n}\n\n.canvas[data-demo=\"celestial\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(249, 233, 216);\n color: rgb(121, 96, 78);\n}\n\n.canvas[data-demo=\"celestial\"][data-theme=\"dark\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(37, 43, 72);\n color: rgb(216, 220, 237);\n}\n\n.celestial-halo {\n position: absolute;\n left: 50%;\n top: 47%;\n width: 328px;\n height: 328px;\n transform: translate(-50%, -50%);\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: radial-gradient(circle, rgba(255, 217, 155, 0.467) 25%, rgba(255, 226, 178, 0.24) 50%, transparent 70%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n transition-behavior: normal;\n transition-duration: 0.8s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: background;\n}\n\n[data-theme=\"dark\"] .celestial-halo {\n background-image: radial-gradient(circle, rgba(172, 185, 227, 0.11) 25%, rgba(121, 133, 189, 0.055) 50%, transparent 70%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n}\n\n.celestial-control {\n position: absolute;\n width: 154px;\n height: 154px;\n left: 50%;\n top: 47%;\n transform: translate(-50%, -50%);\n}\n\n.celestial-toggle {\n position: relative;\n width: 154px;\n height: 154px;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n perspective: 600px;\n}\n\n.celestial-sun, .celestial-moon {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n transition-behavior: normal, normal;\n transition-duration: 0.85s, 0.5s;\n transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease;\n transition-delay: 0s, 0s;\n transition-property: transform, opacity;\n}\n\n.celestial-sun {\n background-image: radial-gradient(circle at 32% 24%, rgb(255, 240, 160) 0%, rgb(255, 207, 91) 38%, rgb(245, 167, 44) 74%, rgb(229, 139, 23) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 244, 168) 2px 3px 7px inset, rgba(201, 123, 27, 0.533) -5px -7px 10px inset, rgba(200, 141, 58, 0.22) 5px 9px 15px, rgba(255, 208, 108, 0.27) 0px 0px 32px;\n}\n\n.celestial-sun > span {\n position: absolute;\n left: 30px;\n top: 21px;\n width: 60px;\n height: 40px;\n transform: rotate(-30deg);\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: linear-gradient(rgba(255, 249, 208, 0.36), transparent);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n filter: blur(4px);\n}\n\n.celestial-rays {\n position: absolute;\n top: -42px;\n right: -42px;\n bottom: -42px;\n left: -42px;\n transition-behavior: normal, normal;\n transition-duration: 0.9s, 0.5s;\n transition-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1), ease;\n transition-delay: 0s, 0s;\n transition-property: transform, opacity;\n}\n\n.celestial-ray {\n position: absolute;\n width: 12px;\n height: 26px;\n left: calc(50% - 6px);\n top: 0px;\n border-top-left-radius: 9px;\n border-top-right-radius: 9px;\n border-bottom-right-radius: 9px;\n border-bottom-left-radius: 9px;\n transform-origin: 6px 119px;\n transform: rotate(calc(var(--ray)*30deg));\n background-image: linear-gradient(90deg, rgb(245, 182, 74), rgb(255, 215, 128) 45%, rgb(237, 170, 55));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 241, 186) 1px 1px 2px inset, rgba(199, 146, 53, 0.2) 2px 2px 3px;\n}\n\n.celestial-moon {\n opacity: 0;\n transform: rotate(-100deg) scale(0.72);\n background-image: radial-gradient(circle at 30% 22%, rgb(241, 240, 229) 0%, rgb(220, 220, 207) 40%, rgb(177, 185, 188) 75%, rgb(141, 155, 170) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(255, 255, 237, 0.6) 3px 3px 8px inset, rgba(109, 126, 153, 0.533) -7px -9px 13px inset, rgba(18, 25, 52, 0.333) 6px 8px 14px, rgba(226, 231, 241, 0.063) 0px 0px 40px;\n overflow-x: hidden;\n overflow-y: hidden;\n}\n\n.celestial-crater {\n position: absolute;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: linear-gradient(135deg, rgba(155, 168, 176, 0.48), rgba(196, 203, 202, 0.467));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(130, 144, 156, 0.467) 3px 4px 6px inset, rgba(241, 244, 222, 0.667) 1px 2px 2px;\n}\n\n.crater-one {\n width: 37px;\n height: 37px;\n left: 34px;\n top: 27px;\n}\n\n.crater-two {\n width: 22px;\n height: 22px;\n right: 25px;\n top: 68px;\n}\n\n.crater-three {\n width: 29px;\n height: 29px;\n left: 49px;\n bottom: 24px;\n}\n\n.crater-four {\n width: 12px;\n height: 12px;\n left: 19px;\n top: 80px;\n}\n\n[data-theme=\"dark\"] .celestial-sun {\n opacity: 0;\n transform: rotate(100deg) scale(0.72);\n}\n\n[data-theme=\"dark\"] .celestial-moon {\n opacity: 1;\n transform: rotate(0deg) scale(1);\n}\n\n[data-theme=\"dark\"] .celestial-rays {\n transform: rotate(65deg) scale(0.45);\n opacity: 0;\n}\n\n.celestial-orb-shadow {\n position: absolute;\n bottom: -72px;\n width: 134px;\n height: 17px;\n left: 10px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(199, 147, 74);\n filter: blur(10px);\n opacity: 0.2;\n transition-behavior: normal, normal;\n transition-duration: 0.7s, 0.7s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, opacity;\n pointer-events: none;\n}\n\n[data-theme=\"dark\"] .celestial-orb-shadow {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(2, 10, 36);\n opacity: 0.6;\n}\n\n.celestial-stars {\n position: absolute;\n width: 294px;\n height: 260px;\n left: 50%;\n top: 46%;\n transform: translate(-50%, -50%);\n opacity: 0;\n transition-behavior: normal;\n transition-duration: 0.7s;\n transition-timing-function: ease;\n transition-delay: 0.1s;\n transition-property: opacity;\n}\n\n.celestial-stars i {\n position: absolute;\n width: 4px;\n height: 4px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(236, 237, 235);\n box-shadow: rgba(248, 246, 218, 0.333) 0px 0px 7px;\n}\n\n.celestial-stars i:nth-child(1) {\n left: 32px;\n top: 47px;\n}\n\n.celestial-stars i:nth-child(2) {\n right: 32px;\n top: 20px;\n width: 3px;\n height: 3px;\n}\n\n.celestial-stars i:nth-child(3) {\n left: 8px;\n top: 160px;\n width: 3px;\n height: 3px;\n}\n\n.celestial-stars i:nth-child(4) {\n right: 5px;\n top: 133px;\n}\n\n.celestial-stars i:nth-child(5) {\n left: 76px;\n bottom: 16px;\n width: 3px;\n height: 3px;\n}\n\n.celestial-stars i:nth-child(6) {\n right: 44px;\n bottom: 14px;\n width: 8px;\n height: 8px;\n clip-path: polygon(50% 0px, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0px 50%, 38% 38%);\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n[data-theme=\"dark\"] .celestial-stars {\n opacity: 0.8;\n}\n\n.is-animating .celestial-orb-shadow {\n animation-duration: 0.8s;\n animation-timing-function: ease;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-direction: normal;\n animation-fill-mode: both;\n animation-play-state: running;\n animation-name: celestial-shadow;\n animation-timeline: auto;\n animation-range-start: normal;\n animation-range-end: normal;\n}\n\n@keyframes celestial-shadow {\n 50% {\n transform: scale(0.7);\n opacity: 0.1;\n }\n}\n\n.is-animating .mood-floor-shadow {\n animation-duration: 0.8s;\n animation-timing-function: ease;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-direction: normal;\n animation-fill-mode: both;\n animation-play-state: running;\n animation-name: celestial-shadow;\n animation-timeline: auto;\n animation-range-start: normal;\n animation-range-end: normal;\n}\n\n@media (max-width: 480px) {\n .magic-control {\n transform: translate(-50%, -50%) scale(0.92);\n }\n\n .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.92);\n }\n\n .celestial-control {\n transform: translate(-50%, -50%) scale(0.92);\n }\n\n .mood-control {\n transform: translate(-50%, -50%) scale(0.94);\n }\n}<\/code><\/pre>\n\n\n\nJavaScript<\/h3>\n\n\n\n\/\/ The switch is on in light mode. Native buttons support Enter and Space.\nconst animations = new WeakMap();\ndocument.querySelectorAll('.demo-toggle').forEach(button => {\n button.addEventListener('click', () => {\n const canvas = button.closest('.canvas');\n const light = canvas.dataset.theme !== 'light';\n canvas.dataset.theme = light ? 'light' : 'dark';\n button.setAttribute('aria-checked', String(light));\n canvas.querySelector('.theme-label').innerHTML = (light ? \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"4\\\"\/><path d=\\\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\\\"\/><\/svg>\" : \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z\\\"\/><\/svg>\") + '<span>' + (light ? 'Light mode' : 'Dark mode') + '<\/span>';\n canvas.querySelector('.canvas-state').textContent = light ? 'A little brighter' : 'A little quieter';\n clearTimeout(animations.get(canvas));\n canvas.classList.remove('is-animating');\n void canvas.offsetWidth;\n canvas.classList.add('is-animating');\n animations.set(canvas, setTimeout(() => canvas.classList.remove('is-animating'), 1100));\n });\n});<\/code><\/pre>\n\n\n\n5. Sunglasses and Sleeping Emoji Toggle<\/h2>\n\n\n\n<\/video><\/figure>\n\n\n\nI gave this toggle a face that changes its expression with the theme. You see sunglasses and a smile in light mode, then sleepy eyes and floating Z characters in dark mode.<\/p>\n\n\n\n
Features:<\/strong><\/p>\n\n\n\n\nA rounded yellow face with dimensional shading.<\/li>\n\n\n\n Sunglasses that lift away when you switch to dark mode.<\/li>\n\n\n\n Closed eyes, a small open mouth, and Z characters for the sleeping state.<\/li>\n\n\n\n Separate daylight and night palettes for the face and canvas.<\/li>\n<\/ul>\n\n\n\nHTML<\/h3>\n\n\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Sunglasses and Sleeping Emoji Toggle<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <script src=\"script.js\" defer><\/script>\n<\/head>\n<body>\n<main class=\"export-wrap\">\n<div class=\"canvas\" data-demo=\"mood-face\" data-theme=\"light\" aria-label=\"Current mood interactive preview\">\n <div class=\"scene\">\n<div class=\"mood-ambient\" aria-hidden=\"true\">\n<\/div>\n <div class=\"mood-control\">\n <div class=\"mood-zzz\" aria-hidden=\"true\">\n<span>z<\/span>\n<span>z<\/span>\n<span>Z<\/span>\n<\/div>\n <button class=\"demo-toggle mood-toggle\" role=\"switch\" aria-checked=\"true\" aria-label=\"Switch between sunny and sleepy mood\">\n <span class=\"mood-face\" aria-hidden=\"true\">\n <span class=\"mood-brow mood-brow-left\">\n<\/span>\n<span class=\"mood-brow mood-brow-right\">\n<\/span>\n <span class=\"mood-sleepy-eye mood-sleepy-left\">\n<\/span>\n<span class=\"mood-sleepy-eye mood-sleepy-right\">\n<\/span>\n <span class=\"mood-glasses\">\n<span class=\"mood-lens mood-lens-left\">\n<\/span>\n<span class=\"mood-bridge\">\n<\/span>\n<span class=\"mood-lens mood-lens-right\">\n<\/span>\n<span class=\"mood-glasses-arm mood-arm-left\">\n<\/span>\n<span class=\"mood-glasses-arm mood-arm-right\">\n<\/span>\n<\/span>\n <span class=\"mood-cheek mood-cheek-left\">\n<\/span>\n<span class=\"mood-cheek mood-cheek-right\">\n<\/span>\n <span class=\"mood-smile\">\n<span>\n<\/span>\n<\/span>\n<span class=\"mood-sleepy-mouth\">\n<\/span>\n <\/span>\n <\/button>\n <span class=\"mood-floor-shadow\" aria-hidden=\"true\">\n<\/span>\n <\/div>\n<\/div>\n <div class=\"canvas-top\">\n<span class=\"theme-label\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n<circle cx=\"12\" cy=\"12\" r=\"4\">\n<\/circle>\n<path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\">\n<\/path>\n<\/svg>\n<span>Light mode<\/span>\n<\/span>\n<\/div>\n <div class=\"canvas-bottom\">\n<span class=\"canvas-hint\">Switch up the mood<\/span>\n<span class=\"canvas-state\">A little brighter<\/span>\n<\/div>\n <\/div>\n<h1 class=\"export-title\">Current mood<\/h1>\n<\/main>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS<\/h3>\n\n\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin-top: 0px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n padding-top: 24px;\n padding-right: 24px;\n padding-bottom: 24px;\n padding-left: 24px;\n min-height: 100dvh;\n display: grid;\n align-items: center;\n justify-items: center;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(246, 246, 244);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.export-wrap {\n width: min(100%, 400px);\n}\n\n.export-title {\n text-align: center;\n font-size: 15px;\n font-weight: 500;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 6px;\n margin-left: 0px;\n color: rgb(69, 73, 66);\n}\n\nbutton:focus-visible {\n outline-color: rgb(222, 101, 65);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 5px;\n}\n\n.canvas {\n position: relative;\n aspect-ratio: 4 \/ 5;\n width: 100%;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-bottom-right-radius: 14px;\n border-bottom-left-radius: 14px;\n isolation: isolate;\n container-type: inline-size;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(240, 238, 232);\n color: rgb(101, 95, 80);\n transition-behavior: normal, normal;\n transition-duration: 0.75s, 0.6s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, color;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.canvas[data-theme=\"dark\"] {\n color: rgb(217, 219, 232);\n color-scheme: dark;\n}\n\n.scene {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: grid;\n align-items: center;\n justify-items: center;\n perspective: 800px;\n}\n\n.demo-toggle {\n font-style: inherit;\n font-variant-ligatures: inherit;\n font-variant-caps: inherit;\n font-variant-numeric: inherit;\n font-variant-east-asian: inherit;\n font-variant-alternates: inherit;\n font-variant-position: inherit;\n font-variant-emoji: inherit;\n font-weight: inherit;\n font-stretch: inherit;\n font-size: inherit;\n line-height: inherit;\n font-family: inherit;\n font-optical-sizing: inherit;\n font-size-adjust: inherit;\n font-kerning: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-language-override: inherit;\n color: inherit;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: none;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n}\n\n.demo-toggle:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 12px;\n}\n\n.canvas-top {\n position: absolute;\n left: 20px;\n right: 17px;\n top: 17px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 5;\n pointer-events: none;\n}\n\n.theme-label {\n display: inline-flex;\n align-items: center;\n row-gap: 6px;\n column-gap: 6px;\n font-size: 9px;\n font-weight: 500;\n line-height: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n padding-top: 7px;\n padding-right: 9px;\n padding-bottom: 7px;\n padding-left: 9px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n border-bottom-left-radius: 20px;\n backdrop-filter: blur(6px);\n}\n\n.theme-label svg {\n width: 11px;\n height: 11px;\n stroke-width: 1.5;\n}\n\n.canvas-expand {\n display: grid;\n align-items: center;\n justify-items: center;\n pointer-events: auto;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n color: inherit;\n width: 30px;\n height: 30px;\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-right-radius: 7px;\n border-bottom-left-radius: 7px;\n cursor: pointer;\n opacity: 0.6;\n transition-behavior: normal, normal;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, background;\n}\n\n.canvas-expand:hover {\n opacity: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n}\n\n.canvas-expand:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n}\n\n.canvas-expand svg {\n width: 14px;\n height: 14px;\n}\n\n.canvas-bottom {\n position: absolute;\n bottom: 27px;\n left: 14px;\n right: 14px;\n display: flex;\n align-items: center;\n flex-direction: column;\n row-gap: 6px;\n column-gap: 6px;\n z-index: 4;\n pointer-events: none;\n text-align: center;\n}\n\n.canvas-hint {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05px;\n line-height: 1.4;\n}\n\n.canvas-state {\n font-size: 8px;\n opacity: 0.7;\n letter-spacing: 0.2px;\n}\n\n.canvas[data-theme=\"dark\"] .theme-label {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.05);\n}\n\n.canvas[data-theme=\"dark\"] .canvas-expand:hover {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.08);\n}\n\n@media (max-width: 1000px) and (min-width: 761px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 19px;\n }\n\n .canvas-hint {\n font-size: 9px;\n }\n\n .canvas-state {\n font-size: 7px;\n }\n\n .theme-label {\n font-size: 8px;\n padding-top: 6px;\n padding-right: 7px;\n padding-bottom: 6px;\n padding-left: 7px;\n }\n}\n\n@media (max-width: 760px) and (min-width: 501px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 18px;\n }\n\n .canvas-hint {\n font-size: 10px;\n }\n\n .theme-label {\n font-size: 8px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .canvas *, .canvas ::before, .canvas ::after, .canvas {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@container (max-width: 320px) {\n .canvas .wall-plate {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.85);\n }\n\n .canvas .celestial-control {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .mood-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .horizon-switch {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .eclipse-dial {\n transform: translate(-50%, -50%) scale(0.84);\n }\n\n .canvas .lamp-object {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .arcade-switch {\n transform: translate(-50%, -50%) scale(0.85);\n }\n}\n\n@keyframes magic-burst {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px) scale(0.2) rotate(0deg);\n }\n\n 18% {\n opacity: 1;\n }\n\n 65% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n transform: translate(var(--px),var(--py)) scale(.3) rotate(180deg);\n }\n}\n\n@keyframes celestial-shadow {\n 50% {\n transform: scale(0.7);\n opacity: 0.1;\n }\n}\n\n.canvas[data-demo=\"mood-face\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(223, 238, 241);\n color: rgb(78, 109, 119);\n}\n\n.canvas[data-demo=\"mood-face\"][data-theme=\"dark\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(32, 55, 67);\n color: rgb(209, 225, 230);\n}\n\n.mood-ambient {\n position: absolute;\n width: 330px;\n height: 330px;\n left: 50%;\n top: 46%;\n transform: translate(-50%, -50%);\n background-image: radial-gradient(circle, rgba(245, 252, 255, 0.6), transparent 65%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n opacity: 0.7;\n transition-behavior: normal;\n transition-duration: 0.6s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n[data-theme=\"dark\"] .mood-ambient {\n opacity: 0.08;\n}\n\n.mood-control {\n width: 176px;\n height: 176px;\n position: absolute;\n left: 50%;\n top: 47%;\n transform: translate(-50%, -50%);\n}\n\n.mood-toggle {\n position: relative;\n width: 176px;\n height: 176px;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition-behavior: normal;\n transition-duration: 0.8s;\n transition-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);\n transition-delay: 0s;\n transition-property: transform;\n}\n\n.mood-face {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: block;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: radial-gradient(circle at 32% 24%, rgb(255, 233, 153) 0%, rgb(255, 206, 67) 40%, rgb(245, 175, 32) 75%, rgb(226, 138, 19) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 241, 162) 3px 4px 7px inset, rgba(197, 117, 19, 0.6) -6px -7px 11px inset, rgba(119, 147, 153, 0.333) 7px 10px 17px;\n transition-behavior: normal, normal;\n transition-duration: 0.7s, 0.7s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, box-shadow;\n}\n\n[data-theme=\"dark\"] .mood-toggle {\n transform: rotate(-10deg) translateY(3px);\n}\n\n[data-theme=\"dark\"] .mood-face {\n background-image: radial-gradient(circle at 32% 24%, rgb(255, 230, 160) 0%, rgb(238, 193, 91) 40%, rgb(220, 163, 58) 75%, rgb(200, 138, 45) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(255, 235, 178, 0.4) 3px 4px 7px inset, rgba(145, 97, 35, 0.6) -6px -7px 11px inset, rgba(7, 24, 34, 0.4) 7px 10px 17px;\n}\n\n.mood-glasses {\n position: absolute;\n top: 53px;\n left: 9px;\n width: 158px;\n height: 55px;\n transform: rotate(-3deg);\n filter: drop-shadow(rgba(183, 133, 54, 0.6) 0px 4px 2px);\n z-index: 3;\n transition-behavior: normal, normal;\n transition-duration: 0.6s, 0.35s;\n transition-timing-function: cubic-bezier(0.4, 0, 0.3, 1), ease;\n transition-delay: 0s, 0s;\n transition-property: transform, opacity;\n}\n\n.mood-lens {\n position: absolute;\n top: 0px;\n width: 67px;\n height: 47px;\n border-top-left-radius: 9px;\n border-top-right-radius: 9px;\n border-bottom-right-radius: 24px;\n border-bottom-left-radius: 24px;\n border-top-width: 5px;\n border-right-width: 5px;\n border-bottom-width: 5px;\n border-left-width: 5px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgb(37, 42, 49);\n border-right-color: rgb(37, 42, 49);\n border-bottom-color: rgb(37, 42, 49);\n border-left-color: rgb(37, 42, 49);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: linear-gradient(140deg, rgb(64, 81, 91) 0px, rgb(64, 81, 91) 34%, rgb(98, 113, 122) 35%, rgb(98, 113, 122) 39%, rgb(34, 45, 54) 40%, rgb(34, 45, 54) 51%, rgb(77, 93, 104) 52%, rgb(77, 93, 104) 56%, rgb(24, 35, 45) 57%, rgb(24, 35, 45) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(9, 14, 20) 0px 2px 3px inset, rgba(255, 245, 160, 0.3) 0px 1px 1px;\n}\n\n.mood-lens-left {\n left: 4px;\n transform: rotate(2deg);\n}\n\n.mood-lens-right {\n right: 4px;\n transform: rotate(-2deg);\n}\n\n.mood-bridge {\n position: absolute;\n left: 69px;\n top: 8px;\n width: 20px;\n height: 15px;\n border-top-width: 7px;\n border-top-style: solid;\n border-top-color: rgb(37, 42, 49);\n border-top-left-radius: 40%;\n border-top-right-radius: 40%;\n border-bottom-right-radius: 40%;\n border-bottom-left-radius: 40%;\n}\n\n.mood-glasses-arm {\n position: absolute;\n top: 3px;\n width: 12px;\n height: 8px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(37, 42, 49);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n}\n\n.mood-arm-left {\n left: -3px;\n transform: rotate(14deg);\n}\n\n.mood-arm-right {\n right: -3px;\n transform: rotate(-14deg);\n}\n\n[data-theme=\"dark\"] .mood-glasses {\n transform: translateY(-75px) rotate(-20deg);\n opacity: 0;\n}\n\n.mood-cheek {\n position: absolute;\n width: 26px;\n height: 13px;\n top: 109px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(235, 142, 61);\n filter: blur(4px);\n opacity: 0.35;\n transition-behavior: normal;\n transition-duration: 0.5s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n.mood-cheek-left {\n left: 23px;\n}\n\n.mood-cheek-right {\n right: 23px;\n}\n\n[data-theme=\"dark\"] .mood-cheek {\n opacity: 0.55;\n}\n\n.mood-smile {\n position: absolute;\n top: 114px;\n left: 60px;\n width: 60px;\n height: 28px;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 35px;\n border-bottom-left-radius: 35px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(101, 58, 35);\n overflow-x: hidden;\n overflow-y: hidden;\n transform: rotate(-6deg);\n box-shadow: rgba(255, 232, 154, 0.533) 0px 2px 1px;\n transition-behavior: normal, normal;\n transition-duration: 0.3s, 0.5s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, transform;\n}\n\n.mood-smile > span {\n position: absolute;\n top: -1px;\n left: 5px;\n right: 5px;\n height: 9px;\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(255, 244, 214);\n}\n\n[data-theme=\"dark\"] .mood-smile {\n opacity: 0;\n transform: translateY(3px) scale(0.4);\n}\n\n.mood-sleepy-eye {\n position: absolute;\n width: 32px;\n height: 18px;\n top: 74px;\n border-bottom-width: 5px;\n border-bottom-style: solid;\n border-bottom-color: rgb(121, 85, 39);\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n opacity: 0;\n transform: translateY(-5px);\n box-shadow: rgba(255, 234, 162, 0.4) 0px 2px 1px;\n transition-behavior: normal, normal;\n transition-duration: 0.5s, 0.3s;\n transition-timing-function: ease, ease;\n transition-delay: 0.1s, 0.1s;\n transition-property: transform, opacity;\n}\n\n.mood-sleepy-left {\n left: 35px;\n transform: translateY(-5px) rotate(-5deg);\n}\n\n.mood-sleepy-right {\n right: 35px;\n transform: translateY(-5px) rotate(5deg);\n}\n\n[data-theme=\"dark\"] .mood-sleepy-eye {\n opacity: 1;\n transform: translateY(0px);\n}\n\n.mood-brow {\n position: absolute;\n width: 25px;\n height: 9px;\n top: 54px;\n border-top-width: 3px;\n border-top-style: solid;\n border-top-color: rgb(173, 127, 60);\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n opacity: 0;\n transition-behavior: normal;\n transition-duration: 0.4s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n.mood-brow-left {\n left: 38px;\n transform: rotate(-9deg);\n}\n\n.mood-brow-right {\n right: 38px;\n transform: rotate(9deg);\n}\n\n[data-theme=\"dark\"] .mood-brow {\n opacity: 0.65;\n}\n\n.mood-sleepy-mouth {\n position: absolute;\n left: 79px;\n top: 120px;\n width: 18px;\n height: 22px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(128, 80, 41);\n box-shadow: rgba(72, 48, 24, 0.533) 0px 3px 4px inset, rgba(255, 229, 154, 0.533) 0px 2px 1px;\n opacity: 0;\n transform: scale(0.4);\n transition-behavior: normal, normal;\n transition-duration: 0.6s, 0.3s;\n transition-timing-function: ease, ease;\n transition-delay: 0.1s, 0.1s;\n transition-property: transform, opacity;\n}\n\n[data-theme=\"dark\"] .mood-sleepy-mouth {\n opacity: 1;\n transform: scale(1);\n}\n\n.mood-zzz {\n position: absolute;\n right: -33px;\n top: -33px;\n width: 64px;\n height: 80px;\n pointer-events: none;\n color: rgb(198, 220, 229);\n font-style: normal;\n font-variant-caps: normal;\n font-variant-ligatures: normal;\n font-variant-numeric: normal;\n font-variant-east-asian: normal;\n font-variant-alternates: normal;\n font-size-adjust: none;\n font-language-override: normal;\n font-kerning: auto;\n font-optical-sizing: auto;\n font-feature-settings: normal;\n font-variation-settings: normal;\n font-variant-position: normal;\n font-variant-emoji: normal;\n font-weight: 700;\n font-stretch: normal;\n font-size: 20px;\n line-height: 1;\n font-family: ui-rounded, system-ui, sans-serif;\n opacity: 0;\n transform: translateY(10px) rotate(-10deg);\n transition-behavior: normal, normal;\n transition-duration: 0.7s, 1s;\n transition-timing-function: ease, ease;\n transition-delay: 0.2s, 0.1s;\n transition-property: opacity, transform;\n}\n\n.mood-zzz span {\n position: absolute;\n bottom: 0px;\n left: 0px;\n}\n\n.mood-zzz span:nth-child(2) {\n left: 22px;\n bottom: 24px;\n font-size: 26px;\n}\n\n.mood-zzz span:nth-child(3) {\n left: 43px;\n bottom: 53px;\n font-size: 31px;\n}\n\n[data-theme=\"dark\"] .mood-zzz {\n opacity: 0.8;\n transform: translateY(0px) rotate(-10deg);\n}\n\n.mood-floor-shadow {\n position: absolute;\n width: 126px;\n height: 16px;\n bottom: -45px;\n left: 25px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(97, 125, 133);\n opacity: 0.22;\n filter: blur(9px);\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n transition-behavior: normal;\n transition-duration: 0.7s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: background;\n pointer-events: none;\n}\n\n[data-theme=\"dark\"] .mood-floor-shadow {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(6, 24, 33);\n opacity: 0.7;\n}\n\n.is-animating .mood-floor-shadow {\n animation-duration: 0.8s;\n animation-timing-function: ease;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-direction: normal;\n animation-fill-mode: both;\n animation-play-state: running;\n animation-name: celestial-shadow;\n animation-timeline: auto;\n animation-range-start: normal;\n animation-range-end: normal;\n}\n\n@media (max-width: 480px) {\n .magic-control {\n transform: translate(-50%, -50%) scale(0.92);\n }\n\n .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.92);\n }\n\n .celestial-control {\n transform: translate(-50%, -50%) scale(0.92);\n }\n\n .mood-control {\n transform: translate(-50%, -50%) scale(0.94);\n }\n}<\/code><\/pre>\n\n\n\nJavaScript<\/h3>\n\n\n\n\/\/ The switch is on in light mode. Native buttons support Enter and Space.\nconst animations = new WeakMap();\ndocument.querySelectorAll('.demo-toggle').forEach(button => {\n button.addEventListener('click', () => {\n const canvas = button.closest('.canvas');\n const light = canvas.dataset.theme !== 'light';\n canvas.dataset.theme = light ? 'light' : 'dark';\n button.setAttribute('aria-checked', String(light));\n canvas.querySelector('.theme-label').innerHTML = (light ? \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"4\\\"\/><path d=\\\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\\\"\/><\/svg>\" : \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z\\\"\/><\/svg>\") + '<span>' + (light ? 'Light mode' : 'Dark mode') + '<\/span>';\n canvas.querySelector('.canvas-state').textContent = light ? 'A little brighter' : 'A little quieter';\n clearTimeout(animations.get(canvas));\n canvas.classList.remove('is-animating');\n void canvas.offsetWidth;\n canvas.classList.add('is-animating');\n animations.set(canvas, setTimeout(() => canvas.classList.remove('is-animating'), 1100));\n });\n});<\/code><\/pre>\n\n\n\n6. Day and Night Landscape Switch<\/h2>\n\n\n\n<\/video><\/figure>\n\n\n\nI put a small landscape inside a pill switch. You move from clouds and a bright sun to stars, a moon, and blue hills with one press.<\/p>\n\n\n\n
Features:<\/strong><\/p>\n\n\n\n\nA miniature landscape with three mountain layers.<\/li>\n\n\n\n A sliding sun that becomes a cratered moon.<\/li>\n\n\n\n Clouds that fade out as stars appear.<\/li>\n\n\n\n A raised frame with highlights, shadows, and a glass effect.<\/li>\n<\/ul>\n\n\n\nHTML<\/h3>\n\n\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Day and Night Landscape Switch<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <script src=\"script.js\" defer><\/script>\n<\/head>\n<body>\n<main class=\"export-wrap\">\n<div class=\"canvas\" data-demo=\"horizon\" data-theme=\"light\" aria-label=\"Pocket horizon interactive preview\">\n <div class=\"scene\">\n<button class=\"demo-toggle horizon-switch\" role=\"switch\" aria-checked=\"true\" aria-label=\"Toggle the pocket horizon between day and night\">\n <span class=\"horizon-landscape\" aria-hidden=\"true\">\n <span class=\"horizon-star horizon-star-one\">\n<\/span>\n<span class=\"horizon-star horizon-star-two\">\n<\/span>\n<span class=\"horizon-star horizon-star-three\">\n<\/span>\n<span class=\"horizon-star horizon-star-four\">\n<\/span>\n<span class=\"horizon-star horizon-star-five\">\n<\/span>\n <span class=\"horizon-cloud horizon-cloud-one\">\n<\/span>\n<span class=\"horizon-cloud horizon-cloud-two\">\n<\/span>\n <span class=\"horizon-orbit\">\n<span class=\"horizon-crater horizon-crater-one\">\n<\/span>\n<span class=\"horizon-crater horizon-crater-two\">\n<\/span>\n<span class=\"horizon-crater horizon-crater-three\">\n<\/span>\n<\/span>\n <span class=\"horizon-mountain horizon-mountain-back\">\n<\/span>\n<span class=\"horizon-mountain horizon-mountain-middle\">\n<\/span>\n<span class=\"horizon-mountain horizon-mountain-front\">\n<\/span>\n <\/span>\n <span class=\"horizon-glass\" aria-hidden=\"true\">\n<\/span>\n <\/button>\n<\/div>\n <div class=\"canvas-top\">\n<span class=\"theme-label\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n<circle cx=\"12\" cy=\"12\" r=\"4\">\n<\/circle>\n<path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\">\n<\/path>\n<\/svg>\n<span>Light mode<\/span>\n<\/span>\n<\/div>\n <div class=\"canvas-bottom\">\n<span class=\"canvas-hint\">Move the sun beyond the hills<\/span>\n<span class=\"canvas-state\">A little brighter<\/span>\n<\/div>\n <\/div>\n<h1 class=\"export-title\">Pocket horizon<\/h1>\n<\/main>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS<\/h3>\n\n\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin-top: 0px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n padding-top: 24px;\n padding-right: 24px;\n padding-bottom: 24px;\n padding-left: 24px;\n min-height: 100dvh;\n display: grid;\n align-items: center;\n justify-items: center;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(246, 246, 244);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.export-wrap {\n width: min(100%, 400px);\n}\n\n.export-title {\n text-align: center;\n font-size: 15px;\n font-weight: 500;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 6px;\n margin-left: 0px;\n color: rgb(69, 73, 66);\n}\n\nbutton:focus-visible {\n outline-color: rgb(222, 101, 65);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 5px;\n}\n\n.canvas {\n position: relative;\n aspect-ratio: 4 \/ 5;\n width: 100%;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-bottom-right-radius: 14px;\n border-bottom-left-radius: 14px;\n isolation: isolate;\n container-type: inline-size;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(240, 238, 232);\n color: rgb(101, 95, 80);\n transition-behavior: normal, normal;\n transition-duration: 0.75s, 0.6s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, color;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.canvas[data-theme=\"dark\"] {\n color: rgb(217, 219, 232);\n color-scheme: dark;\n}\n\n.scene {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: grid;\n align-items: center;\n justify-items: center;\n perspective: 800px;\n}\n\n.demo-toggle {\n font-style: inherit;\n font-variant-ligatures: inherit;\n font-variant-caps: inherit;\n font-variant-numeric: inherit;\n font-variant-east-asian: inherit;\n font-variant-alternates: inherit;\n font-variant-position: inherit;\n font-variant-emoji: inherit;\n font-weight: inherit;\n font-stretch: inherit;\n font-size: inherit;\n line-height: inherit;\n font-family: inherit;\n font-optical-sizing: inherit;\n font-size-adjust: inherit;\n font-kerning: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-language-override: inherit;\n color: inherit;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: none;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n}\n\n.demo-toggle:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 12px;\n}\n\n.canvas-top {\n position: absolute;\n left: 20px;\n right: 17px;\n top: 17px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 5;\n pointer-events: none;\n}\n\n.theme-label {\n display: inline-flex;\n align-items: center;\n row-gap: 6px;\n column-gap: 6px;\n font-size: 9px;\n font-weight: 500;\n line-height: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n padding-top: 7px;\n padding-right: 9px;\n padding-bottom: 7px;\n padding-left: 9px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n border-bottom-left-radius: 20px;\n backdrop-filter: blur(6px);\n}\n\n.theme-label svg {\n width: 11px;\n height: 11px;\n stroke-width: 1.5;\n}\n\n.canvas-expand {\n display: grid;\n align-items: center;\n justify-items: center;\n pointer-events: auto;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n color: inherit;\n width: 30px;\n height: 30px;\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-right-radius: 7px;\n border-bottom-left-radius: 7px;\n cursor: pointer;\n opacity: 0.6;\n transition-behavior: normal, normal;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, background;\n}\n\n.canvas-expand:hover {\n opacity: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n}\n\n.canvas-expand:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n}\n\n.canvas-expand svg {\n width: 14px;\n height: 14px;\n}\n\n.canvas-bottom {\n position: absolute;\n bottom: 27px;\n left: 14px;\n right: 14px;\n display: flex;\n align-items: center;\n flex-direction: column;\n row-gap: 6px;\n column-gap: 6px;\n z-index: 4;\n pointer-events: none;\n text-align: center;\n}\n\n.canvas-hint {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05px;\n line-height: 1.4;\n}\n\n.canvas-state {\n font-size: 8px;\n opacity: 0.7;\n letter-spacing: 0.2px;\n}\n\n.canvas[data-theme=\"dark\"] .theme-label {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.05);\n}\n\n.canvas[data-theme=\"dark\"] .canvas-expand:hover {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.08);\n}\n\n@media (max-width: 1000px) and (min-width: 761px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 19px;\n }\n\n .canvas-hint {\n font-size: 9px;\n }\n\n .canvas-state {\n font-size: 7px;\n }\n\n .theme-label {\n font-size: 8px;\n padding-top: 6px;\n padding-right: 7px;\n padding-bottom: 6px;\n padding-left: 7px;\n }\n}\n\n@media (max-width: 760px) and (min-width: 501px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 18px;\n }\n\n .canvas-hint {\n font-size: 10px;\n }\n\n .theme-label {\n font-size: 8px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .canvas *, .canvas ::before, .canvas ::after, .canvas {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@container (max-width: 320px) {\n .canvas .wall-plate {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.85);\n }\n\n .canvas .celestial-control {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .mood-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .horizon-switch {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .eclipse-dial {\n transform: translate(-50%, -50%) scale(0.84);\n }\n\n .canvas .lamp-object {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .arcade-switch {\n transform: translate(-50%, -50%) scale(0.85);\n }\n}\n\n.canvas[data-demo=\"horizon\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(231, 238, 231);\n}\n\n.canvas[data-demo=\"horizon\"][data-theme=\"dark\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(21, 45, 42);\n}\n\n.horizon-switch {\n position: absolute;\n top: 49%;\n left: 50%;\n width: 272px;\n height: 132px;\n padding-top: 8px;\n padding-right: 8px;\n padding-bottom: 8px;\n padding-left: 8px;\n transform: translate(-50%, -50%);\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n border-top-left-radius: 75px;\n border-top-right-radius: 75px;\n border-bottom-right-radius: 75px;\n border-bottom-left-radius: 75px;\n background-image: linear-gradient(145deg, rgb(248, 252, 244) 4%, rgb(211, 221, 206) 52%, rgb(244, 248, 239) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 255, 255) 0px 2px 1px inset, rgb(183, 197, 176) 0px -2px 2px inset, rgba(83, 106, 83, 0.44) 0px 12px 18px -9px, rgba(53, 95, 57, 0.44) 0px 30px 40px -24px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition-behavior: normal, normal, normal;\n transition-duration: 0.65s, 0.65s, 0.2s;\n transition-timing-function: ease, ease, ease;\n transition-delay: 0s, 0s, 0s;\n transition-property: background, box-shadow, scale;\n}\n\n.horizon-switch:active {\n scale: 0.975;\n}\n\n.horizon-switch:focus-visible {\n outline-color: rgb(71, 128, 109);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 8px;\n}\n\n.horizon-landscape {\n display: block;\n position: absolute;\n top: 8px;\n right: 8px;\n bottom: 8px;\n left: 8px;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 65px;\n border-top-right-radius: 65px;\n border-bottom-right-radius: 65px;\n border-bottom-left-radius: 65px;\n background-image: linear-gradient(rgb(142, 208, 215) 0%, rgb(196, 226, 207) 57%, rgb(240, 228, 173) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(49, 88, 73, 0.25) 0px 4px 7px inset, rgba(255, 255, 255, 0.533) 0px -1px 0px inset;\n transition-behavior: normal;\n transition-duration: 0.8s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: background;\n}\n\n.horizon-landscape::before {\n content: \"\";\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n background-image: linear-gradient(rgb(24, 41, 61) 0%, rgb(53, 87, 116) 60%, rgb(109, 140, 157) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n opacity: 0;\n transition-behavior: normal;\n transition-duration: 0.8s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n.horizon-orbit {\n position: absolute;\n left: 22px;\n top: 16px;\n width: 69px;\n height: 69px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: radial-gradient(circle at 35% 27%, rgb(255, 246, 192) 0%, rgb(255, 225, 137) 56%, rgb(241, 187, 88) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(255, 228, 162, 0.094) 0px 0px 0px 12px, rgba(255, 240, 193, 0.08) 0px 0px 0px 25px, rgba(178, 145, 92, 0.25) 0px 3px 5px, rgb(255, 247, 191) 0px 2px 2px inset;\n transition-behavior: normal, normal, normal;\n transition-duration: 0.9s, 0.8s, 0.8s;\n transition-timing-function: cubic-bezier(0.22, 0.8, 0.21, 1), ease, ease;\n transition-delay: 0s, 0s, 0s;\n transition-property: transform, background, box-shadow;\n}\n\n.horizon-crater {\n position: absolute;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(150, 178, 189);\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n box-shadow: rgba(102, 136, 151, 0.4) 1px 2px 3px inset, rgb(247, 255, 255) 0px 1px 0px;\n opacity: 0;\n transition-behavior: normal;\n transition-duration: 0.5s;\n transition-timing-function: ease;\n transition-delay: 0.15s;\n transition-property: opacity;\n}\n\n.horizon-crater-one {\n width: 17px;\n height: 17px;\n top: 16px;\n left: 13px;\n}\n\n.horizon-crater-two {\n width: 11px;\n height: 11px;\n top: 38px;\n left: 39px;\n}\n\n.horizon-crater-three {\n width: 7px;\n height: 7px;\n top: 15px;\n left: 44px;\n}\n\n.horizon-mountain {\n position: absolute;\n left: 0px;\n bottom: -1px;\n width: 100%;\n transition-behavior: normal, normal;\n transition-duration: 1s, 0.8s;\n transition-timing-function: cubic-bezier(0.22, 0.8, 0.21, 1), ease;\n transition-delay: 0s, 0s;\n transition-property: transform, background;\n}\n\n.horizon-mountain-back {\n height: 57px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(116, 155, 126);\n clip-path: polygon(0px 40%, 14% 12%, 26% 45%, 42% 5%, 62% 65%, 79% 17%, 100% 57%, 100% 100%, 0px 100%);\n}\n\n.horizon-mountain-middle {\n height: 41px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(74, 127, 103);\n clip-path: polygon(0px 50%, 23% 5%, 43% 50%, 59% 24%, 78% 63%, 100% 16%, 100% 100%, 0px 100%);\n}\n\n.horizon-mountain-front {\n height: 28px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(47, 95, 82);\n clip-path: polygon(0px 35%, 22% 55%, 43% 5%, 63% 62%, 84% 31%, 100% 60%, 100% 100%, 0px 100%);\n}\n\n.horizon-cloud {\n position: absolute;\n width: 39px;\n height: 10px;\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n border-bottom-right-radius: 15px;\n border-bottom-left-radius: 15px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 253, 241, 0.85);\n filter: drop-shadow(rgba(120, 161, 162, 0.1) 0px 2px 1px);\n transition-behavior: normal, normal;\n transition-duration: 0.9s, 0.55s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: transform, opacity;\n}\n\n.horizon-cloud::before, .horizon-cloud::after {\n content: \"\";\n position: absolute;\n bottom: 3px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: inherit;\n background-position-x: inherit;\n background-position-y: inherit;\n background-size: inherit;\n background-repeat: inherit;\n background-attachment: inherit;\n background-origin: inherit;\n background-clip: inherit;\n background-color: inherit;\n}\n\n.horizon-cloud::before {\n left: 5px;\n width: 17px;\n height: 17px;\n}\n\n.horizon-cloud::after {\n left: 18px;\n width: 13px;\n height: 13px;\n}\n\n.horizon-cloud-one {\n top: 29px;\n right: 30px;\n}\n\n.horizon-cloud-two {\n top: 52px;\n right: 65px;\n scale: 0.7;\n opacity: 0.8;\n}\n\n.horizon-star {\n position: absolute;\n width: 3px;\n height: 3px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(242, 246, 223);\n opacity: 0;\n scale: 0.2;\n box-shadow: rgba(247, 251, 220, 0.533) 0px 0px 5px;\n transition-behavior: normal, normal;\n transition-duration: 0.6s, 0.6s;\n transition-timing-function: ease, ease;\n transition-delay: 0.2s, 0.2s;\n transition-property: opacity, scale;\n}\n\n.horizon-star-one {\n top: 25px;\n left: 38px;\n}\n\n.horizon-star-two {\n top: 44px;\n left: 75px;\n width: 2px;\n height: 2px;\n}\n\n.horizon-star-three {\n top: 17px;\n left: 111px;\n}\n\n.horizon-star-four {\n top: 53px;\n left: 24px;\n width: 2px;\n height: 2px;\n}\n\n.horizon-star-five {\n top: 34px;\n left: 126px;\n width: 2px;\n height: 2px;\n}\n\n.horizon-glass {\n pointer-events: none;\n position: absolute;\n top: 8px;\n right: 8px;\n bottom: 8px;\n left: 8px;\n border-top-left-radius: 65px;\n border-top-right-radius: 65px;\n border-bottom-right-radius: 65px;\n border-bottom-left-radius: 65px;\n box-shadow: rgba(16, 42, 50, 0.227) 0px 3px 5px inset, rgba(255, 255, 255, 0.333) 0px -1px 1px inset;\n background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.09), transparent 45%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n}\n\n.canvas[data-demo=\"horizon\"][data-theme=\"dark\"] .horizon-switch {\n background-image: linear-gradient(145deg, rgb(68, 96, 91), rgb(35, 63, 60) 52%, rgb(82, 112, 106));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(147, 180, 168, 0.36) 0px 1px 1px inset, rgb(13, 33, 30) 0px -2px 2px inset, rgba(3, 17, 13, 0.61) 0px 14px 18px -8px, rgba(7, 23, 19, 0.7) 0px 30px 42px -22px;\n}\n\n.canvas[data-demo=\"horizon\"][data-theme=\"dark\"] .horizon-landscape::before {\n opacity: 1;\n}\n\n.canvas[data-demo=\"horizon\"][data-theme=\"dark\"] .horizon-orbit {\n transform: translateX(140px);\n background-image: radial-gradient(circle at 35% 27%, rgb(240, 249, 237), rgb(201, 224, 222) 60%, rgb(170, 200, 206));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(204, 237, 239, 0.03) 0px 0px 0px 12px, rgba(204, 237, 239, 0.027) 0px 0px 0px 25px, rgba(200, 233, 231, 0.192) 0px 0px 18px, rgb(246, 255, 247) 0px 2px 2px inset;\n}\n\n.canvas[data-demo=\"horizon\"][data-theme=\"dark\"] .horizon-crater {\n opacity: 0.7;\n}\n\n.canvas[data-demo=\"horizon\"][data-theme=\"dark\"] .horizon-cloud {\n opacity: 0;\n transform: translateX(-40px);\n}\n\n.canvas[data-demo=\"horizon\"][data-theme=\"dark\"] .horizon-star {\n opacity: 0.9;\n scale: 1;\n}\n\n.canvas[data-demo=\"horizon\"][data-theme=\"dark\"] .horizon-mountain-back {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(66, 102, 122);\n transform: translateY(2px);\n}\n\n.canvas[data-demo=\"horizon\"][data-theme=\"dark\"] .horizon-mountain-middle {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(45, 77, 97);\n transform: translateY(3px);\n}\n\n.canvas[data-demo=\"horizon\"][data-theme=\"dark\"] .horizon-mountain-front {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(29, 57, 73);\n transform: translateY(2px);\n}\n\n@keyframes arcade-press {\n 0% {\n transform: translateY(-6px);\n }\n\n 26% {\n transform: translateY(1px);\n }\n\n 58% {\n transform: translateY(-8px);\n }\n\n 78% {\n transform: translateY(-5px);\n }\n\n 100% {\n transform: translateY(-6px);\n }\n}\n\n@media (max-width: 370px) {\n .horizon-switch {\n width: 246px;\n height: 124px;\n }\n\n .canvas[data-demo=\"horizon\"][data-theme=\"dark\"] .horizon-orbit {\n transform: translateX(114px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .horizon-switch, .horizon-switch *, .horizon-switch ::before, .eclipse-dial, .eclipse-dial *, .arcade-switch *, .arcade-switch ::before {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n }\n}<\/code><\/pre>\n\n\n\nJavaScript<\/h3>\n\n\n\n\/\/ The switch is on in light mode. Native buttons support Enter and Space.\nconst animations = new WeakMap();\ndocument.querySelectorAll('.demo-toggle').forEach(button => {\n button.addEventListener('click', () => {\n const canvas = button.closest('.canvas');\n const light = canvas.dataset.theme !== 'light';\n canvas.dataset.theme = light ? 'light' : 'dark';\n button.setAttribute('aria-checked', String(light));\n canvas.querySelector('.theme-label').innerHTML = (light ? \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"4\\\"\/><path d=\\\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\\\"\/><\/svg>\" : \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z\\\"\/><\/svg>\") + '<span>' + (light ? 'Light mode' : 'Dark mode') + '<\/span>';\n canvas.querySelector('.canvas-state').textContent = light ? 'A little brighter' : 'A little quieter';\n clearTimeout(animations.get(canvas));\n canvas.classList.remove('is-animating');\n void canvas.offsetWidth;\n canvas.classList.add('is-animating');\n animations.set(canvas, setTimeout(() => canvas.classList.remove('is-animating'), 1100));\n });\n});<\/code><\/pre>\n\n\n\n7. Metal Eclipse Dial<\/h2>\n\n\n\n<\/video><\/figure>\n\n\n\nI used a circular metal dial for this version. You click it to rotate the rim and move a dark disc across the glowing sun.<\/p>\n\n\n\n
Features:<\/strong><\/p>\n\n\n\n\nA metal finish with fine ticks and a position marker.<\/li>\n\n\n\n A bezel that rotates between the two states.<\/li>\n\n\n\n An eclipse effect inside a circular window.<\/li>\n\n\n\n A pale blue light canvas and a deep navy dark canvas.<\/li>\n<\/ul>\n\n\n\nHTML<\/h3>\n\n\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Metal Eclipse Dial<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <script src=\"script.js\" defer><\/script>\n<\/head>\n<body>\n<main class=\"export-wrap\">\n<div class=\"canvas\" data-demo=\"eclipse\" data-theme=\"light\" aria-label=\"The eclipse dial interactive preview\">\n <div class=\"scene\">\n<button class=\"demo-toggle eclipse-dial\" role=\"switch\" aria-checked=\"true\" aria-label=\"Turn the eclipse dial between light and dark\">\n <span class=\"eclipse-ticks\" aria-hidden=\"true\">\n<\/span>\n <span class=\"eclipse-bezel\" aria-hidden=\"true\">\n<span class=\"eclipse-pointer\">\n<\/span>\n<\/span>\n <span class=\"eclipse-window\" aria-hidden=\"true\">\n<span class=\"eclipse-star eclipse-star-one\">\n<\/span>\n<span class=\"eclipse-star eclipse-star-two\">\n<\/span>\n<span class=\"eclipse-star eclipse-star-three\">\n<\/span>\n<span class=\"eclipse-aura\">\n<\/span>\n<span class=\"eclipse-sun\">\n<\/span>\n<span class=\"eclipse-moon\">\n<\/span>\n<\/span>\n <span class=\"eclipse-marker eclipse-marker-light\" aria-hidden=\"true\">\n<\/span>\n<span class=\"eclipse-marker eclipse-marker-dark\" aria-hidden=\"true\">\n<\/span>\n <\/button>\n<\/div>\n <div class=\"canvas-top\">\n<span class=\"theme-label\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n<circle cx=\"12\" cy=\"12\" r=\"4\">\n<\/circle>\n<path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\">\n<\/path>\n<\/svg>\n<span>Light mode<\/span>\n<\/span>\n<\/div>\n <div class=\"canvas-bottom\">\n<span class=\"canvas-hint\">Give the universe a little turn<\/span>\n<span class=\"canvas-state\">A little brighter<\/span>\n<\/div>\n <\/div>\n<h1 class=\"export-title\">The eclipse dial<\/h1>\n<\/main>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS<\/h3>\n\n\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin-top: 0px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n padding-top: 24px;\n padding-right: 24px;\n padding-bottom: 24px;\n padding-left: 24px;\n min-height: 100dvh;\n display: grid;\n align-items: center;\n justify-items: center;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(246, 246, 244);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.export-wrap {\n width: min(100%, 400px);\n}\n\n.export-title {\n text-align: center;\n font-size: 15px;\n font-weight: 500;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 6px;\n margin-left: 0px;\n color: rgb(69, 73, 66);\n}\n\nbutton:focus-visible {\n outline-color: rgb(222, 101, 65);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 5px;\n}\n\n.canvas {\n position: relative;\n aspect-ratio: 4 \/ 5;\n width: 100%;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-bottom-right-radius: 14px;\n border-bottom-left-radius: 14px;\n isolation: isolate;\n container-type: inline-size;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(240, 238, 232);\n color: rgb(101, 95, 80);\n transition-behavior: normal, normal;\n transition-duration: 0.75s, 0.6s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, color;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.canvas[data-theme=\"dark\"] {\n color: rgb(217, 219, 232);\n color-scheme: dark;\n}\n\n.scene {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: grid;\n align-items: center;\n justify-items: center;\n perspective: 800px;\n}\n\n.demo-toggle {\n font-style: inherit;\n font-variant-ligatures: inherit;\n font-variant-caps: inherit;\n font-variant-numeric: inherit;\n font-variant-east-asian: inherit;\n font-variant-alternates: inherit;\n font-variant-position: inherit;\n font-variant-emoji: inherit;\n font-weight: inherit;\n font-stretch: inherit;\n font-size: inherit;\n line-height: inherit;\n font-family: inherit;\n font-optical-sizing: inherit;\n font-size-adjust: inherit;\n font-kerning: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-language-override: inherit;\n color: inherit;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: none;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n}\n\n.demo-toggle:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 12px;\n}\n\n.canvas-top {\n position: absolute;\n left: 20px;\n right: 17px;\n top: 17px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 5;\n pointer-events: none;\n}\n\n.theme-label {\n display: inline-flex;\n align-items: center;\n row-gap: 6px;\n column-gap: 6px;\n font-size: 9px;\n font-weight: 500;\n line-height: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n padding-top: 7px;\n padding-right: 9px;\n padding-bottom: 7px;\n padding-left: 9px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n border-bottom-left-radius: 20px;\n backdrop-filter: blur(6px);\n}\n\n.theme-label svg {\n width: 11px;\n height: 11px;\n stroke-width: 1.5;\n}\n\n.canvas-expand {\n display: grid;\n align-items: center;\n justify-items: center;\n pointer-events: auto;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n color: inherit;\n width: 30px;\n height: 30px;\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-right-radius: 7px;\n border-bottom-left-radius: 7px;\n cursor: pointer;\n opacity: 0.6;\n transition-behavior: normal, normal;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, background;\n}\n\n.canvas-expand:hover {\n opacity: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n}\n\n.canvas-expand:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n}\n\n.canvas-expand svg {\n width: 14px;\n height: 14px;\n}\n\n.canvas-bottom {\n position: absolute;\n bottom: 27px;\n left: 14px;\n right: 14px;\n display: flex;\n align-items: center;\n flex-direction: column;\n row-gap: 6px;\n column-gap: 6px;\n z-index: 4;\n pointer-events: none;\n text-align: center;\n}\n\n.canvas-hint {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05px;\n line-height: 1.4;\n}\n\n.canvas-state {\n font-size: 8px;\n opacity: 0.7;\n letter-spacing: 0.2px;\n}\n\n.canvas[data-theme=\"dark\"] .theme-label {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.05);\n}\n\n.canvas[data-theme=\"dark\"] .canvas-expand:hover {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.08);\n}\n\n@media (max-width: 1000px) and (min-width: 761px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 19px;\n }\n\n .canvas-hint {\n font-size: 9px;\n }\n\n .canvas-state {\n font-size: 7px;\n }\n\n .theme-label {\n font-size: 8px;\n padding-top: 6px;\n padding-right: 7px;\n padding-bottom: 6px;\n padding-left: 7px;\n }\n}\n\n@media (max-width: 760px) and (min-width: 501px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 18px;\n }\n\n .canvas-hint {\n font-size: 10px;\n }\n\n .theme-label {\n font-size: 8px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .canvas *, .canvas ::before, .canvas ::after, .canvas {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@container (max-width: 320px) {\n .canvas .wall-plate {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.85);\n }\n\n .canvas .celestial-control {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .mood-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .horizon-switch {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .eclipse-dial {\n transform: translate(-50%, -50%) scale(0.84);\n }\n\n .canvas .lamp-object {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .arcade-switch {\n transform: translate(-50%, -50%) scale(0.85);\n }\n}\n\n.canvas[data-demo=\"eclipse\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(229, 237, 245);\n}\n\n.canvas[data-demo=\"eclipse\"][data-theme=\"dark\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(23, 34, 50);\n}\n\n.eclipse-dial {\n position: absolute;\n top: 48.5%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 222px;\n height: 222px;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-image: conic-gradient(from 30deg, rgb(215, 224, 233), rgb(246, 250, 255) 15%, rgb(197, 207, 217) 28%, rgb(234, 240, 247) 45%, rgb(183, 196, 208) 66%, rgb(246, 250, 255) 83%, rgb(215, 224, 233));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 255, 255) 0px 2px 2px inset, rgb(168, 182, 196) 0px -2px 3px inset, rgba(114, 137, 154, 0.44) 0px 14px 19px -6px, rgba(105, 129, 151, 0.376) 0px 28px 32px -18px;\n transition-behavior: normal, normal;\n transition-duration: 0.8s, 0.8s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: box-shadow, background;\n}\n\n.eclipse-dial:focus-visible {\n outline-color: rgb(96, 124, 151);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 8px;\n}\n\n.eclipse-dial:active .eclipse-bezel {\n scale: 0.985;\n}\n\n.eclipse-ticks {\n position: absolute;\n top: 7px;\n right: 7px;\n bottom: 7px;\n left: 7px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: repeating-conic-gradient(from -1deg, rgba(102, 125, 142, 0.37) 0deg, rgba(102, 125, 142, 0.37) 1deg, transparent 1deg, transparent 10deg);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n mask-image: radial-gradient(transparent 66%, rgb(0, 0, 0) 66.5%);\n -webkit-mask-position-x: 0%;\n -webkit-mask-position-y: 0%;\n mask-size: auto;\n mask-repeat: repeat;\n mask-origin: border-box;\n mask-clip: border-box;\n mask-composite: add;\n mask-mode: match-source;\n}\n\n.eclipse-bezel {\n position: absolute;\n top: 17px;\n right: 17px;\n bottom: 17px;\n left: 17px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgba(255, 255, 255, 0.71);\n border-right-color: rgba(255, 255, 255, 0.71);\n border-bottom-color: rgba(255, 255, 255, 0.71);\n border-left-color: rgba(255, 255, 255, 0.71);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: conic-gradient(from -50deg, rgb(245, 250, 255), rgb(182, 195, 207) 24%, rgb(225, 233, 241) 40%, rgb(248, 252, 255) 58%, rgb(193, 206, 217) 76%, rgb(245, 250, 255));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 255, 255) 0px 2px 3px inset, rgba(54, 78, 96, 0.3) 0px 3px 6px, rgb(118, 139, 156) 0px -1px 2px inset;\n transform: rotate(-45deg);\n transition-behavior: normal, normal;\n transition-duration: 1.1s, 0.2s;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.2, 1), ease;\n transition-delay: 0s, 0s;\n transition-property: transform, scale;\n}\n\n.eclipse-pointer {\n position: absolute;\n top: 5px;\n left: calc(50% - 2px);\n width: 4px;\n height: 8px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n border-bottom-left-radius: 3px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(126, 142, 158);\n box-shadow: rgb(255, 255, 255) 0px 1px 1px;\n}\n\n.eclipse-window {\n position: absolute;\n top: 33px;\n right: 33px;\n bottom: 33px;\n left: 33px;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: radial-gradient(circle at 50% 43%, rgb(234, 240, 244), rgb(194, 209, 223));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(75, 100, 117, 0.3) 0px 5px 10px inset, rgb(255, 255, 255) 0px 1px 1px;\n transition-behavior: normal;\n transition-duration: 0.8s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: background;\n}\n\n.eclipse-window::after {\n content: \"\";\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n pointer-events: none;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.133), transparent 45%, rgba(25, 50, 74, 0.04));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(38, 62, 80, 0.22) 0px 4px 7px inset;\n}\n\n.eclipse-sun {\n position: absolute;\n width: 83px;\n height: 83px;\n top: 36px;\n left: 36px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: radial-gradient(circle at 35% 28%, rgb(255, 241, 172), rgb(255, 212, 112) 52%, rgb(237, 170, 56) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(255, 212, 125, 0.61) 0px 0px 18px, rgba(255, 194, 84, 0.3) 0px 0px 35px, rgb(255, 245, 192) 0px 2px 2px inset, rgba(217, 153, 48, 0.44) 0px -2px 4px inset;\n transition-behavior: normal, normal;\n transition-duration: 0.8s, 1.1s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: box-shadow, transform;\n}\n\n.eclipse-aura {\n position: absolute;\n top: 17px;\n right: 17px;\n bottom: 17px;\n left: 17px;\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgba(213, 173, 91, 0.17);\n border-right-color: rgba(213, 173, 91, 0.17);\n border-bottom-color: rgba(213, 173, 91, 0.17);\n border-left-color: rgba(213, 173, 91, 0.17);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n box-shadow: rgba(255, 216, 139, 0.07) 0px 0px 0px 9px;\n transition-behavior: normal;\n transition-duration: 0.7s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n.eclipse-moon {\n position: absolute;\n width: 81px;\n height: 81px;\n top: 36px;\n left: 36px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: radial-gradient(circle at 55% 40%, rgb(34, 53, 72), rgb(27, 44, 63));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n transform: translate(101px, -85px);\n opacity: 0;\n transition-behavior: normal, normal;\n transition-duration: 1.1s, 0.6s;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.2, 1), ease;\n transition-delay: 0s, 0s;\n transition-property: transform, opacity;\n}\n\n.eclipse-star {\n position: absolute;\n width: 2px;\n height: 2px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(213, 228, 237);\n opacity: 0;\n transition-behavior: normal;\n transition-duration: 0.8s;\n transition-timing-function: ease;\n transition-delay: 0.1s;\n transition-property: opacity;\n}\n\n.eclipse-star-one {\n left: 24px;\n top: 44px;\n}\n\n.eclipse-star-two {\n left: 117px;\n top: 114px;\n width: 3px;\n height: 3px;\n}\n\n.eclipse-star-three {\n left: 45px;\n top: 124px;\n}\n\n.eclipse-marker {\n position: absolute;\n width: 3px;\n height: 3px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(113, 136, 154);\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n bottom: 20px;\n}\n\n.eclipse-marker-light {\n left: 72px;\n}\n\n.eclipse-marker-dark {\n right: 72px;\n}\n\n.canvas[data-demo=\"eclipse\"][data-theme=\"dark\"] .eclipse-dial {\n background-image: conic-gradient(from 30deg, rgb(84, 97, 113), rgb(137, 150, 166) 15%, rgb(57, 72, 89) 28%, rgb(101, 116, 134) 45%, rgb(46, 61, 78) 66%, rgb(135, 148, 162) 83%, rgb(84, 97, 113));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(162, 178, 192, 0.42) 0px 2px 2px inset, rgb(16, 30, 44) 0px -2px 3px inset, rgba(6, 14, 26, 0.61) 0px 14px 19px -6px, rgb(12, 21, 34) 0px 28px 36px -18px;\n}\n\n.canvas[data-demo=\"eclipse\"][data-theme=\"dark\"] .eclipse-bezel {\n transform: rotate(135deg);\n border-top-color: rgba(177, 198, 213, 0.24);\n border-right-color: rgba(177, 198, 213, 0.24);\n border-bottom-color: rgba(177, 198, 213, 0.24);\n border-left-color: rgba(177, 198, 213, 0.24);\n background-image: conic-gradient(from -50deg, rgb(130, 148, 165), rgb(58, 77, 97) 24%, rgb(102, 120, 139) 40%, rgb(142, 160, 177) 58%, rgb(67, 85, 107) 76%, rgb(130, 148, 165));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(200, 220, 231, 0.3) 0px 2px 3px inset, rgba(4, 18, 33, 0.58) 0px 3px 6px, rgb(27, 48, 65) 0px -1px 2px inset;\n}\n\n.canvas[data-demo=\"eclipse\"][data-theme=\"dark\"] .eclipse-pointer {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(214, 189, 122);\n box-shadow: rgba(247, 214, 152, 0.4) 0px 0px 4px;\n}\n\n.canvas[data-demo=\"eclipse\"][data-theme=\"dark\"] .eclipse-window {\n background-image: radial-gradient(circle at 50% 43%, rgb(38, 57, 76), rgb(22, 40, 59));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(6, 17, 31, 0.6) 0px 5px 10px inset, rgba(183, 202, 210, 0.33) 0px 1px 1px;\n}\n\n.canvas[data-demo=\"eclipse\"][data-theme=\"dark\"] .eclipse-sun {\n transform: rotate(-18deg);\n box-shadow: rgba(255, 212, 125, 0.404) 0px 0px 15px, rgba(255, 194, 84, 0.16) 0px 0px 28px, rgb(255, 245, 192) 0px 2px 2px inset, rgba(217, 153, 48, 0.44) 0px -2px 4px inset;\n}\n\n.canvas[data-demo=\"eclipse\"][data-theme=\"dark\"] .eclipse-moon {\n transform: translate(19px, -14px);\n opacity: 1;\n}\n\n.canvas[data-demo=\"eclipse\"][data-theme=\"dark\"] .eclipse-aura {\n opacity: 0.3;\n}\n\n.canvas[data-demo=\"eclipse\"][data-theme=\"dark\"] .eclipse-star {\n opacity: 0.75;\n}\n\n@keyframes arcade-press {\n 0% {\n transform: translateY(-6px);\n }\n\n 26% {\n transform: translateY(1px);\n }\n\n 58% {\n transform: translateY(-8px);\n }\n\n 78% {\n transform: translateY(-5px);\n }\n\n 100% {\n transform: translateY(-6px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .horizon-switch, .horizon-switch *, .horizon-switch ::before, .eclipse-dial, .eclipse-dial *, .arcade-switch *, .arcade-switch ::before {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n }\n}<\/code><\/pre>\n\n\n\nJavaScript<\/h3>\n\n\n\n\/\/ The switch is on in light mode. Native buttons support Enter and Space.\nconst animations = new WeakMap();\ndocument.querySelectorAll('.demo-toggle').forEach(button => {\n button.addEventListener('click', () => {\n const canvas = button.closest('.canvas');\n const light = canvas.dataset.theme !== 'light';\n canvas.dataset.theme = light ? 'light' : 'dark';\n button.setAttribute('aria-checked', String(light));\n canvas.querySelector('.theme-label').innerHTML = (light ? \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"4\\\"\/><path d=\\\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\\\"\/><\/svg>\" : \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z\\\"\/><\/svg>\") + '<span>' + (light ? 'Light mode' : 'Dark mode') + '<\/span>';\n canvas.querySelector('.canvas-state').textContent = light ? 'A little brighter' : 'A little quieter';\n clearTimeout(animations.get(canvas));\n canvas.classList.remove('is-animating');\n void canvas.offsetWidth;\n canvas.classList.add('is-animating');\n animations.set(canvas, setTimeout(() => canvas.classList.remove('is-animating'), 1100));\n });\n});<\/code><\/pre>\n\n\n\n8. 3D Desk Lamp Switch<\/h2>\n\n\n\n<\/video><\/figure>\n\n\n\nI added a reading lamp with a warm pool of light. You press the lamp to turn the glow off or on, and the shade responds with a small nod.<\/p>\n\n\n\n
Features:<\/strong><\/p>\n\n\n\n\nAn orange shade, angled stem, and rounded base.<\/li>\n\n\n\n A glowing bulb, light cone, and soft floor illumination.<\/li>\n\n\n\n A brief nod animation when you change the mode.<\/li>\n\n\n\n A dark state that dims the lamp and removes its light.<\/li>\n<\/ul>\n\n\n\nHTML<\/h3>\n\n\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>3D Desk Lamp Switch<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <script src=\"script.js\" defer><\/script>\n<\/head>\n<body>\n<main class=\"export-wrap\">\n<div class=\"canvas\" data-demo=\"desk-lamp\" data-theme=\"light\" aria-label=\"Stay a little longer interactive preview\">\n <div class=\"scene\">\n <div class=\"lamp-ambient\" aria-hidden=\"true\">\n<\/div>\n <button class=\"demo-toggle lamp-object\" role=\"switch\" aria-checked=\"true\" aria-label=\"Toggle the desk lamp\">\n <span class=\"lamp-floor-light\" aria-hidden=\"true\">\n<\/span>\n <span class=\"lamp-light-cone\" aria-hidden=\"true\">\n<\/span>\n <span class=\"lamp-base-shadow\" aria-hidden=\"true\">\n<\/span>\n <span class=\"lamp-base\" aria-hidden=\"true\">\n<\/span>\n <span class=\"lamp-stem\" aria-hidden=\"true\">\n<\/span>\n <span class=\"lamp-neck\" aria-hidden=\"true\">\n<\/span>\n <span class=\"lamp-shade\" aria-hidden=\"true\">\n<\/span>\n <span class=\"lamp-shade-rim\" aria-hidden=\"true\">\n<\/span>\n <span class=\"lamp-bulb\" aria-hidden=\"true\">\n<\/span>\n <span class=\"lamp-base-button\" aria-hidden=\"true\">\n<\/span>\n <\/button>\n<\/div>\n <div class=\"canvas-top\">\n<span class=\"theme-label\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n<circle cx=\"12\" cy=\"12\" r=\"4\">\n<\/circle>\n<path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\">\n<\/path>\n<\/svg>\n<span>Light mode<\/span>\n<\/span>\n<\/div>\n <div class=\"canvas-bottom\">\n<span class=\"canvas-hint\">Tap the lamp to unwind<\/span>\n<span class=\"canvas-state\">A little brighter<\/span>\n<\/div>\n <\/div>\n<h1 class=\"export-title\">Stay a little longer<\/h1>\n<\/main>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS<\/h3>\n\n\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin-top: 0px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n padding-top: 24px;\n padding-right: 24px;\n padding-bottom: 24px;\n padding-left: 24px;\n min-height: 100dvh;\n display: grid;\n align-items: center;\n justify-items: center;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(246, 246, 244);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.export-wrap {\n width: min(100%, 400px);\n}\n\n.export-title {\n text-align: center;\n font-size: 15px;\n font-weight: 500;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 6px;\n margin-left: 0px;\n color: rgb(69, 73, 66);\n}\n\nbutton:focus-visible {\n outline-color: rgb(222, 101, 65);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 5px;\n}\n\n.canvas {\n position: relative;\n aspect-ratio: 4 \/ 5;\n width: 100%;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-bottom-right-radius: 14px;\n border-bottom-left-radius: 14px;\n isolation: isolate;\n container-type: inline-size;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(240, 238, 232);\n color: rgb(101, 95, 80);\n transition-behavior: normal, normal;\n transition-duration: 0.75s, 0.6s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, color;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.canvas[data-theme=\"dark\"] {\n color: rgb(217, 219, 232);\n color-scheme: dark;\n}\n\n.scene {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: grid;\n align-items: center;\n justify-items: center;\n perspective: 800px;\n}\n\n.demo-toggle {\n font-style: inherit;\n font-variant-ligatures: inherit;\n font-variant-caps: inherit;\n font-variant-numeric: inherit;\n font-variant-east-asian: inherit;\n font-variant-alternates: inherit;\n font-variant-position: inherit;\n font-variant-emoji: inherit;\n font-weight: inherit;\n font-stretch: inherit;\n font-size: inherit;\n line-height: inherit;\n font-family: inherit;\n font-optical-sizing: inherit;\n font-size-adjust: inherit;\n font-kerning: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-language-override: inherit;\n color: inherit;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: none;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n}\n\n.demo-toggle:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 12px;\n}\n\n.canvas-top {\n position: absolute;\n left: 20px;\n right: 17px;\n top: 17px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 5;\n pointer-events: none;\n}\n\n.theme-label {\n display: inline-flex;\n align-items: center;\n row-gap: 6px;\n column-gap: 6px;\n font-size: 9px;\n font-weight: 500;\n line-height: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n padding-top: 7px;\n padding-right: 9px;\n padding-bottom: 7px;\n padding-left: 9px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n border-bottom-left-radius: 20px;\n backdrop-filter: blur(6px);\n}\n\n.theme-label svg {\n width: 11px;\n height: 11px;\n stroke-width: 1.5;\n}\n\n.canvas-expand {\n display: grid;\n align-items: center;\n justify-items: center;\n pointer-events: auto;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n color: inherit;\n width: 30px;\n height: 30px;\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-right-radius: 7px;\n border-bottom-left-radius: 7px;\n cursor: pointer;\n opacity: 0.6;\n transition-behavior: normal, normal;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, background;\n}\n\n.canvas-expand:hover {\n opacity: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n}\n\n.canvas-expand:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n}\n\n.canvas-expand svg {\n width: 14px;\n height: 14px;\n}\n\n.canvas-bottom {\n position: absolute;\n bottom: 27px;\n left: 14px;\n right: 14px;\n display: flex;\n align-items: center;\n flex-direction: column;\n row-gap: 6px;\n column-gap: 6px;\n z-index: 4;\n pointer-events: none;\n text-align: center;\n}\n\n.canvas-hint {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05px;\n line-height: 1.4;\n}\n\n.canvas-state {\n font-size: 8px;\n opacity: 0.7;\n letter-spacing: 0.2px;\n}\n\n.canvas[data-theme=\"dark\"] .theme-label {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.05);\n}\n\n.canvas[data-theme=\"dark\"] .canvas-expand:hover {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.08);\n}\n\n@media (max-width: 1000px) and (min-width: 761px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 19px;\n }\n\n .canvas-hint {\n font-size: 9px;\n }\n\n .canvas-state {\n font-size: 7px;\n }\n\n .theme-label {\n font-size: 8px;\n padding-top: 6px;\n padding-right: 7px;\n padding-bottom: 6px;\n padding-left: 7px;\n }\n}\n\n@media (max-width: 760px) and (min-width: 501px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 18px;\n }\n\n .canvas-hint {\n font-size: 10px;\n }\n\n .theme-label {\n font-size: 8px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .canvas *, .canvas ::before, .canvas ::after, .canvas {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@container (max-width: 320px) {\n .canvas .wall-plate {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.85);\n }\n\n .canvas .celestial-control {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .mood-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .horizon-switch {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .eclipse-dial {\n transform: translate(-50%, -50%) scale(0.84);\n }\n\n .canvas .lamp-object {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .arcade-switch {\n transform: translate(-50%, -50%) scale(0.85);\n }\n}\n\n@keyframes cord-tug {\n 0% {\n transform: translateY(0px) rotate(0deg);\n }\n\n 18% {\n transform: translateY(29px) rotate(-2deg);\n }\n\n 39% {\n transform: translateY(-9px) rotate(3deg);\n }\n\n 59% {\n transform: translateY(5px) rotate(-2deg);\n }\n\n 78% {\n transform: translateY(-2px) rotate(0.8deg);\n }\n\n 100% {\n transform: translateY(0px) rotate(0deg);\n }\n}\n\n@keyframes cord-ring {\n 0% {\n opacity: 0.8;\n transform: translate(-50%, -50%) scale(0.35);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.5);\n }\n}\n\n.canvas[data-demo=\"desk-lamp\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(241, 222, 215);\n transition-behavior: normal;\n transition-duration: 0.7s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: background-color;\n}\n\n.canvas[data-demo=\"desk-lamp\"][data-theme=\"dark\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(49, 44, 53);\n}\n\n.lamp-ambient {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n background-image: radial-gradient(at 50% 44%, rgba(255, 247, 223, 0.6), transparent 70%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n transition-behavior: normal;\n transition-duration: 0.7s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n[data-theme=\"dark\"] .lamp-ambient {\n opacity: 0;\n}\n\n.lamp-object {\n position: absolute;\n left: 50%;\n top: 48%;\n width: 270px;\n height: 285px;\n transform: translate(-50%, -50%);\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n cursor: pointer;\n}\n\n.lamp-object span {\n position: absolute;\n display: block;\n pointer-events: none;\n}\n\n.lamp-base-shadow {\n width: 174px;\n height: 35px;\n left: 56px;\n bottom: 18px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(108, 60, 50, 0.27);\n filter: blur(8px);\n transform: rotate(-5deg);\n}\n\n.lamp-base {\n width: 162px;\n height: 42px;\n left: 62px;\n bottom: 33px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: linear-gradient(170deg, rgb(237, 149, 114) 5%, rgb(217, 106, 71) 45%, rgb(170, 68, 47) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 192, 155) 0px 2px 2px inset, rgb(142, 57, 45) 0px -5px 2px inset, rgb(164, 66, 48) 0px 5px 0px, rgba(102, 53, 46, 0.22) 0px 7px 3px;\n transition-behavior: normal;\n transition-duration: 0.5s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: filter;\n}\n\n.lamp-stem {\n width: 17px;\n height: 145px;\n left: 151px;\n bottom: 57px;\n border-top-left-radius: 9px;\n border-top-right-radius: 9px;\n border-bottom-right-radius: 9px;\n border-bottom-left-radius: 9px;\n transform: rotate(-11deg);\n transform-origin: center bottom;\n background-image: linear-gradient(90deg, rgb(144, 60, 44), rgb(236, 149, 112) 42%, rgb(189, 83, 56) 75%, rgb(145, 62, 46));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(141, 68, 43, 0.07) 3px 0px 3px;\n}\n\n.lamp-neck {\n width: 35px;\n height: 35px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n left: 113px;\n top: 69px;\n background-image: radial-gradient(circle at 35% 32%, rgb(243, 176, 138), rgb(213, 123, 82) 53%, rgb(169, 79, 50));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 209, 164) 0px 2px 1px inset;\n}\n\n.lamp-shade {\n left: 52px;\n top: 43px;\n width: 165px;\n height: 95px;\n border-top-left-radius: 90px 91px;\n border-top-right-radius: 90px 91px;\n border-bottom-right-radius: 19px 16px;\n border-bottom-left-radius: 19px 16px;\n background-image: radial-gradient(at 34% 17%, rgb(255, 188, 141) 0%, rgb(236, 141, 99) 31%, rgb(219, 113, 77) 57%, rgb(177, 73, 50) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 209, 161) 0px 3px 3px inset, rgba(142, 57, 44, 0.19) -7px -2px 9px inset, rgba(120, 66, 42, 0.04) 6px 4px 9px;\n transition-behavior: normal;\n transition-duration: 0.5s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: filter;\n}\n\n.lamp-shade::before {\n content: \"\";\n position: absolute;\n left: 22px;\n top: 13px;\n width: 55px;\n height: 52px;\n border-top-left-radius: 70%;\n border-top-right-radius: 70%;\n border-bottom-right-radius: 70%;\n border-bottom-left-radius: 70%;\n transform: rotate(27deg);\n background-image: linear-gradient(135deg, rgba(255, 237, 208, 0.42), transparent 66%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n filter: blur(3px);\n}\n\n.lamp-shade-rim {\n left: 52px;\n top: 118px;\n width: 165px;\n height: 30px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: radial-gradient(rgb(255, 233, 174) 0%, rgb(249, 197, 125) 54%, rgb(178, 86, 55) 63%, rgb(211, 120, 81) 74%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(143, 62, 44, 0.314) 0px 2px 2px, rgb(251, 168, 121) 0px -2px 1px inset;\n transition-behavior: normal;\n transition-duration: 0.5s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: background;\n}\n\n.lamp-bulb {\n left: 116px;\n top: 125px;\n width: 40px;\n height: 18px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(255, 248, 205);\n box-shadow: rgba(255, 235, 157, 0.61) 0px 0px 14px 5px;\n transition-behavior: normal, normal;\n transition-duration: 0.5s, 0.5s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, box-shadow;\n}\n\n.lamp-light-cone {\n left: 20px;\n top: 130px;\n width: 240px;\n height: 124px;\n clip-path: polygon(22% 0px, 77% 0px, 100% 100%, 0px 100%);\n background-image: linear-gradient(rgba(255, 242, 178, 0.3), rgba(255, 243, 184, 0.02));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n filter: blur(5px);\n transition-behavior: normal;\n transition-duration: 0.5s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n.lamp-floor-light {\n left: 9px;\n bottom: 20px;\n width: 250px;\n height: 74px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: radial-gradient(rgba(255, 241, 182, 0.44) 0%, rgba(255, 232, 161, 0.24) 34%, transparent 70%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n filter: blur(10px);\n transition-behavior: normal;\n transition-duration: 0.5s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n.lamp-base-button {\n left: 179px;\n bottom: 50px;\n width: 16px;\n height: 9px;\n background-image: linear-gradient(rgb(248, 194, 154), rgb(180, 91, 61));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n box-shadow: rgb(127, 58, 40) 0px 2px 1px, rgb(255, 215, 178) 0px 1px inset;\n transition-behavior: normal;\n transition-duration: 0.2s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: transform;\n}\n\n[data-theme=\"dark\"] .lamp-shade, [data-theme=\"dark\"] .lamp-base, [data-theme=\"dark\"] .lamp-stem, [data-theme=\"dark\"] .lamp-neck {\n filter: brightness(0.69) saturate(0.8);\n}\n\n[data-theme=\"dark\"] .lamp-shade-rim {\n background-image: radial-gradient(rgb(155, 113, 91) 0%, rgb(119, 81, 67) 54%, rgb(113, 58, 45) 63%, rgb(158, 88, 65) 74%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n}\n\n[data-theme=\"dark\"] .lamp-bulb {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(174, 155, 127);\n box-shadow: rgba(255, 235, 157, 0) 0px 0px 0px 0px;\n}\n\n[data-theme=\"dark\"] .lamp-light-cone, [data-theme=\"dark\"] .lamp-floor-light {\n opacity: 0;\n}\n\n[data-theme=\"dark\"] .lamp-base-button {\n transform: translateY(2px);\n}\n\n.lamp-object:focus-visible {\n outline-color: rgb(183, 105, 75);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 5px;\n border-top-left-radius: 30px;\n border-top-right-radius: 30px;\n border-bottom-right-radius: 30px;\n border-bottom-left-radius: 30px;\n}\n\n[data-demo=\"desk-lamp\"].is-animating .lamp-shade, [data-demo=\"desk-lamp\"].is-animating .lamp-shade-rim, [data-demo=\"desk-lamp\"].is-animating .lamp-bulb {\n animation-duration: 0.65s;\n animation-timing-function: ease-out;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n animation-name: lamp-nod;\n animation-timeline: auto;\n animation-range-start: normal;\n animation-range-end: normal;\n transform-origin: 50% 85%;\n}\n\n@keyframes lamp-nod {\n 0%, 100% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-3deg);\n }\n\n 55% {\n transform: rotate(1.7deg);\n }\n\n 80% {\n transform: rotate(-0.6deg);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wall-rocker, .wall-plate, .wall-wash, .wall-indicator, .cord-handle, .cord-lightpool, .lamp-object span, .lamp-ambient {\n transition-behavior: normal !important;\n transition-duration: 0s !important;\n transition-timing-function: ease !important;\n transition-delay: 0s !important;\n transition-property: none !important;\n }\n\n [data-demo=\"pull-cord\"].is-animating .cord-assembly, [data-demo=\"pull-cord\"].is-animating .cord-ripple, [data-demo=\"desk-lamp\"].is-animating .lamp-shade, [data-demo=\"desk-lamp\"].is-animating .lamp-shade-rim, [data-demo=\"desk-lamp\"].is-animating .lamp-bulb {\n animation-duration: auto;\n animation-timing-function: ease;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n animation-name: none;\n animation-timeline: auto;\n animation-range-start: normal;\n animation-range-end: normal;\n }\n}<\/code><\/pre>\n\n\n\nJavaScript<\/h3>\n\n\n\n\/\/ The switch is on in light mode. Native buttons support Enter and Space.\nconst animations = new WeakMap();\ndocument.querySelectorAll('.demo-toggle').forEach(button => {\n button.addEventListener('click', () => {\n const canvas = button.closest('.canvas');\n const light = canvas.dataset.theme !== 'light';\n canvas.dataset.theme = light ? 'light' : 'dark';\n button.setAttribute('aria-checked', String(light));\n canvas.querySelector('.theme-label').innerHTML = (light ? \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"4\\\"\/><path d=\\\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\\\"\/><\/svg>\" : \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.6\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M20.9 13a9 9 0 0 1-9.9-9.9A9 9 0 1 0 20.9 13Z\\\"\/><\/svg>\") + '<span>' + (light ? 'Light mode' : 'Dark mode') + '<\/span>';\n canvas.querySelector('.canvas-state').textContent = light ? 'A little brighter' : 'A little quieter';\n clearTimeout(animations.get(canvas));\n canvas.classList.remove('is-animating');\n void canvas.offsetWidth;\n canvas.classList.add('is-animating');\n animations.set(canvas, setTimeout(() => canvas.classList.remove('is-animating'), 1100));\n });\n});<\/code><\/pre>\n\n\n\n9. 3D Arcade Power Button<\/h2>\n\n\n\n<\/video><\/figure>\n\n\n\nI finished the collection with a raised amber button. You press it to switch modes, and the dome compresses before it springs back.<\/p>\n\n\n\n
Features:<\/strong><\/p>\n\n\n\n\nAn amber button with a glossy highlight and a power symbol.<\/li>\n\n\n\n A recessed socket on a plate with screw details.<\/li>\n\n\n\n A spring press animation that also runs after keyboard activation.<\/li>\n\n\n\n An indicator light and ON or OFF readout that follow the theme.<\/li>\n<\/ul>\n\n\n\nHTML<\/h3>\n\n\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>3D Arcade Power Button<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <script src=\"script.js\" defer><\/script>\n<\/head>\n<body>\n<main class=\"export-wrap\">\n<div class=\"canvas\" data-demo=\"arcade\" data-theme=\"light\" aria-label=\"After hours interactive preview\">\n <div class=\"scene\">\n<button class=\"demo-toggle arcade-switch\" role=\"switch\" aria-checked=\"true\" aria-label=\"Press the arcade power button to switch light and dark mode\">\n <span class=\"arcade-plate\" aria-hidden=\"true\">\n<span class=\"arcade-screw arcade-screw-one\">\n<\/span>\n<span class=\"arcade-screw arcade-screw-two\">\n<\/span>\n<span class=\"arcade-socket\">\n<span class=\"arcade-button\">\n<span class=\"arcade-button-glass\">\n<\/span>\n<span class=\"arcade-power\">\n<\/span>\n<\/span>\n<\/span>\n<span class=\"arcade-readout\">\n<span class=\"arcade-led\">\n<\/span>\n<span class=\"arcade-on\">ON<\/span>\n<span class=\"arcade-off\">OFF<\/span>\n<\/span>\n<span class=\"arcade-ridge\">\n<\/span>\n<\/span>\n <\/button>\n<\/div>\n <div class=\"canvas-top\">\n<span class=\"theme-label\">\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n<circle cx=\"12\" cy=\"12\" r=\"4\">\n<\/circle>\n<path d=\"M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42\">\n<\/path>\n<\/svg>\n<span>Light mode<\/span>\n<\/span>\n<\/div>\n <div class=\"canvas-bottom\">\n<span class=\"canvas-hint\">Press to clock into the night<\/span>\n<span class=\"canvas-state\">A little brighter<\/span>\n<\/div>\n <\/div>\n<h1 class=\"export-title\">After hours<\/h1>\n<\/main>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS<\/h3>\n\n\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin-top: 0px;\n margin-right: 0px;\n margin-bottom: 0px;\n margin-left: 0px;\n padding-top: 24px;\n padding-right: 24px;\n padding-bottom: 24px;\n padding-left: 24px;\n min-height: 100dvh;\n display: grid;\n align-items: center;\n justify-items: center;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(246, 246, 244);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.export-wrap {\n width: min(100%, 400px);\n}\n\n.export-title {\n text-align: center;\n font-size: 15px;\n font-weight: 500;\n margin-top: 20px;\n margin-right: 0px;\n margin-bottom: 6px;\n margin-left: 0px;\n color: rgb(69, 73, 66);\n}\n\nbutton:focus-visible {\n outline-color: rgb(222, 101, 65);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 5px;\n}\n\n.canvas {\n position: relative;\n aspect-ratio: 4 \/ 5;\n width: 100%;\n overflow-x: hidden;\n overflow-y: hidden;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-bottom-right-radius: 14px;\n border-bottom-left-radius: 14px;\n isolation: isolate;\n container-type: inline-size;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(240, 238, 232);\n color: rgb(101, 95, 80);\n transition-behavior: normal, normal;\n transition-duration: 0.75s, 0.6s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, color;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.canvas[data-theme=\"dark\"] {\n color: rgb(217, 219, 232);\n color-scheme: dark;\n}\n\n.scene {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: grid;\n align-items: center;\n justify-items: center;\n perspective: 800px;\n}\n\n.demo-toggle {\n font-style: inherit;\n font-variant-ligatures: inherit;\n font-variant-caps: inherit;\n font-variant-numeric: inherit;\n font-variant-east-asian: inherit;\n font-variant-alternates: inherit;\n font-variant-position: inherit;\n font-variant-emoji: inherit;\n font-weight: inherit;\n font-stretch: inherit;\n font-size: inherit;\n line-height: inherit;\n font-family: inherit;\n font-optical-sizing: inherit;\n font-size-adjust: inherit;\n font-kerning: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-language-override: inherit;\n color: inherit;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: none;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n}\n\n.demo-toggle:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 12px;\n}\n\n.canvas-top {\n position: absolute;\n left: 20px;\n right: 17px;\n top: 17px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 5;\n pointer-events: none;\n}\n\n.theme-label {\n display: inline-flex;\n align-items: center;\n row-gap: 6px;\n column-gap: 6px;\n font-size: 9px;\n font-weight: 500;\n line-height: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n padding-top: 7px;\n padding-right: 9px;\n padding-bottom: 7px;\n padding-left: 9px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n border-bottom-left-radius: 20px;\n backdrop-filter: blur(6px);\n}\n\n.theme-label svg {\n width: 11px;\n height: 11px;\n stroke-width: 1.5;\n}\n\n.canvas-expand {\n display: grid;\n align-items: center;\n justify-items: center;\n pointer-events: auto;\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n color: inherit;\n width: 30px;\n height: 30px;\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n border-bottom-right-radius: 7px;\n border-bottom-left-radius: 7px;\n cursor: pointer;\n opacity: 0.6;\n transition-behavior: normal, normal;\n transition-duration: 0.2s, 0.2s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: opacity, background;\n}\n\n.canvas-expand:hover {\n opacity: 1;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.25);\n}\n\n.canvas-expand:focus-visible {\n outline-color: currentcolor;\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n}\n\n.canvas-expand svg {\n width: 14px;\n height: 14px;\n}\n\n.canvas-bottom {\n position: absolute;\n bottom: 27px;\n left: 14px;\n right: 14px;\n display: flex;\n align-items: center;\n flex-direction: column;\n row-gap: 6px;\n column-gap: 6px;\n z-index: 4;\n pointer-events: none;\n text-align: center;\n}\n\n.canvas-hint {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05px;\n line-height: 1.4;\n}\n\n.canvas-state {\n font-size: 8px;\n opacity: 0.7;\n letter-spacing: 0.2px;\n}\n\n.canvas[data-theme=\"dark\"] .theme-label {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.05);\n}\n\n.canvas[data-theme=\"dark\"] .canvas-expand:hover {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgba(255, 255, 255, 0.08);\n}\n\n@media (max-width: 1000px) and (min-width: 761px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 19px;\n }\n\n .canvas-hint {\n font-size: 9px;\n }\n\n .canvas-state {\n font-size: 7px;\n }\n\n .theme-label {\n font-size: 8px;\n padding-top: 6px;\n padding-right: 7px;\n padding-bottom: 6px;\n padding-left: 7px;\n }\n}\n\n@media (max-width: 760px) and (min-width: 501px) {\n .canvas-top {\n left: 13px;\n right: 11px;\n top: 11px;\n }\n\n .canvas-bottom {\n bottom: 18px;\n }\n\n .canvas-hint {\n font-size: 10px;\n }\n\n .theme-label {\n font-size: 8px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .canvas *, .canvas ::before, .canvas ::after, .canvas {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@container (max-width: 320px) {\n .canvas .wall-plate {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .magic-orbit {\n transform: translate(-50%, -50%) rotate(-22deg) scale(0.85);\n }\n\n .canvas .celestial-control {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .mood-control {\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .canvas .horizon-switch {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .eclipse-dial {\n transform: translate(-50%, -50%) scale(0.84);\n }\n\n .canvas .lamp-object {\n transform: translate(-50%, -50%) scale(0.8);\n }\n\n .canvas .arcade-switch {\n transform: translate(-50%, -50%) scale(0.85);\n }\n}\n\n.canvas[data-demo=\"arcade\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(243, 230, 226);\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(43, 32, 48);\n}\n\n.arcade-switch {\n position: absolute;\n top: 49%;\n left: 50%;\n width: 194px;\n height: 222px;\n padding-top: 0px;\n padding-right: 0px;\n padding-bottom: 0px;\n padding-left: 0px;\n transform: translate(-50%, -50%);\n border-top-width: 0px;\n border-right-width: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-top-style: none;\n border-right-style: none;\n border-bottom-style: none;\n border-left-style: none;\n border-top-color: currentcolor;\n border-right-color: currentcolor;\n border-bottom-color: currentcolor;\n border-left-color: currentcolor;\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n border-top-left-radius: 29px;\n border-top-right-radius: 29px;\n border-bottom-right-radius: 29px;\n border-bottom-left-radius: 29px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: transparent;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n\n.arcade-switch:focus-visible {\n outline-color: rgb(169, 101, 67);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 10px;\n}\n\n.arcade-plate {\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border-top-left-radius: 29px;\n border-top-right-radius: 29px;\n border-bottom-right-radius: 29px;\n border-bottom-left-radius: 29px;\n background-image: linear-gradient(135deg, rgb(247, 238, 232), rgb(223, 207, 199) 65%, rgb(212, 192, 181));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 252, 249) 0px 2px 2px inset, rgb(191, 164, 150) 0px -3px 2px inset, rgb(196, 170, 156) 0px 5px 0px, rgb(183, 155, 142) 0px 6px 1px, rgba(134, 100, 88, 0.44) 0px 17px 22px -8px, rgba(149, 105, 91, 0.36) 0px 31px 35px -20px;\n transition-behavior: normal, normal;\n transition-duration: 0.7s, 0.7s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, box-shadow;\n}\n\n.arcade-screw {\n position: absolute;\n top: 15px;\n width: 8px;\n height: 8px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: linear-gradient(145deg, rgb(208, 189, 179), rgb(241, 231, 225));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(163, 136, 120, 0.33) 0px 1px 2px inset, rgba(255, 255, 255, 0.533) 0px 1px 0px;\n}\n\n.arcade-screw::after {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 1px;\n top: 3px;\n left: 1.5px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(181, 161, 148);\n rotate: -35deg;\n}\n\n.arcade-screw-one {\n left: 17px;\n}\n\n.arcade-screw-two {\n right: 17px;\n}\n\n.arcade-socket {\n position: absolute;\n width: 137px;\n height: 137px;\n left: 28.5px;\n top: 33px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: linear-gradient(135deg, rgb(92, 73, 64), rgb(52, 40, 32) 60%, rgb(97, 73, 59));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(65, 41, 29, 0.3) 0px 2px 4px inset, rgba(255, 255, 255, 0.6) 0px 2px 1px, rgba(90, 56, 46, 0.34) 0px 4px 6px;\n}\n\n.arcade-button {\n position: absolute;\n top: 8px;\n right: 8px;\n bottom: 8px;\n left: 8px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n transform: translateY(-6px);\n background-image: radial-gradient(at 35% 22%, rgb(255, 222, 135) 0%, rgb(251, 195, 93) 32%, rgb(237, 158, 43) 67%, rgb(196, 116, 20) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgb(255, 240, 178) 0px 2px 3px inset, rgba(181, 105, 21, 0.37) 0px -6px 5px inset, rgb(169, 108, 39) 0px 7px 0px, rgba(46, 27, 20, 0.63) 0px 9px 4px, rgba(255, 195, 73, 0.36) 0px 0px 22px;\n transition-behavior: normal, normal, normal;\n transition-duration: 0.7s, 0.7s, 0.16s;\n transition-timing-function: ease, ease, ease;\n transition-delay: 0s, 0s, 0s;\n transition-property: background, box-shadow, transform;\n}\n\n.arcade-button::before {\n content: \"\";\n position: absolute;\n top: 7px;\n right: 7px;\n bottom: 7px;\n left: 7px;\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: rgba(255, 237, 182, 0.23);\n border-right-color: rgba(255, 237, 182, 0.23);\n border-bottom-color: rgba(255, 237, 182, 0.23);\n border-left-color: rgba(255, 237, 182, 0.23);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n box-shadow: rgba(255, 210, 113, 0.314) 0px 0px 5px inset;\n}\n\n.arcade-button-glass {\n position: absolute;\n left: 18px;\n top: 8px;\n right: 18px;\n height: 42px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: linear-gradient(rgba(255, 244, 194, 0.36), rgba(255, 248, 223, 0));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n transform: rotate(-12deg);\n}\n\n.arcade-power {\n position: absolute;\n left: 41px;\n top: 41px;\n width: 39px;\n height: 39px;\n border-top-width: 4px;\n border-right-width: 4px;\n border-bottom-width: 4px;\n border-left-width: 4px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-color: transparent;\n border-right-color: rgb(124, 74, 29);\n border-bottom-color: rgb(124, 74, 29);\n border-left-color: rgb(124, 74, 29);\n border-image-source: none;\n border-image-slice: 100%;\n border-image-width: 1;\n border-image-outset: 0;\n border-image-repeat: stretch;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n filter: drop-shadow(rgba(255, 233, 166, 0.69) 0px 1px 1px);\n transition-behavior: normal, normal;\n transition-duration: 0.7s, 0.7s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: border-color, filter;\n}\n\n.arcade-power::before {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 21px;\n top: -10px;\n left: 13.5px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n border-bottom-left-radius: 3px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(124, 74, 29);\n transition-behavior: normal;\n transition-duration: 0.7s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: background;\n}\n\n.arcade-readout {\n position: absolute;\n width: 51px;\n height: 18px;\n bottom: 25px;\n left: calc(50% - 25.5px);\n color: rgb(139, 107, 83);\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n font-weight: 600;\n font-size: 9px;\n letter-spacing: 1.5px;\n text-align: left;\n line-height: 18px;\n}\n\n.arcade-led {\n position: absolute;\n left: 2px;\n top: 5px;\n width: 7px;\n height: 7px;\n border-top-left-radius: 50%;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n border-bottom-left-radius: 50%;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(242, 182, 59);\n box-shadow: rgba(245, 182, 55, 0.67) 0px 0px 5px, rgb(255, 247, 174) 0px 1px 1px inset, rgba(188, 163, 142, 0.4) 0px 0px 0px 2px;\n transition-behavior: normal, normal;\n transition-duration: 0.7s, 0.7s;\n transition-timing-function: ease, ease;\n transition-delay: 0s, 0s;\n transition-property: background, box-shadow;\n}\n\n.arcade-on, .arcade-off {\n position: absolute;\n left: 19px;\n transition-behavior: normal;\n transition-duration: 0.4s;\n transition-timing-function: ease;\n transition-delay: 0s;\n transition-property: opacity;\n}\n\n.arcade-off {\n opacity: 0;\n}\n\n.arcade-ridge {\n position: absolute;\n bottom: 10px;\n left: calc(50% - 16px);\n width: 32px;\n height: 2px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n border-bottom-left-radius: 2px;\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(201, 179, 166);\n box-shadow: rgba(255, 255, 255, 0.333) 0px 1px 0px;\n}\n\n.arcade-switch:active .arcade-button {\n transform: translateY(0px);\n box-shadow: rgb(255, 240, 178) 0px 2px 3px inset, rgba(181, 105, 21, 0.37) 0px -6px 5px inset, rgb(169, 108, 39) 0px 1px 0px, rgba(46, 27, 20, 0.63) 0px 2px 4px;\n}\n\n.canvas[data-demo=\"arcade\"].is-animating .arcade-button {\n animation-duration: 0.48s;\n animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n animation-name: arcade-press;\n animation-timeline: auto;\n animation-range-start: normal;\n animation-range-end: normal;\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-plate {\n background-image: linear-gradient(135deg, rgb(99, 82, 95), rgb(68, 53, 67) 65%, rgb(56, 42, 55));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(156, 130, 151, 0.3) 0px 2px 2px inset, rgb(32, 24, 33) 0px -3px 2px inset, rgb(36, 26, 40) 0px 5px 0px, rgb(22, 14, 28) 0px 6px 1px, rgba(14, 7, 17, 0.74) 0px 17px 22px -8px, rgba(19, 10, 27, 0.61) 0px 31px 35px -20px;\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-screw {\n background-image: linear-gradient(145deg, rgb(57, 45, 56), rgb(108, 87, 102));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(22, 14, 33, 0.31) 0px 1px 2px inset, rgba(255, 255, 255, 0.09) 0px 1px 0px;\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-screw::after {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(49, 36, 51);\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-socket {\n background-image: linear-gradient(135deg, rgb(48, 37, 52), rgb(28, 20, 32) 60%, rgb(56, 38, 56));\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(16, 12, 26, 0.5) 0px 2px 4px inset, rgba(149, 115, 141, 0.4) 0px 2px 1px, rgba(23, 11, 33, 0.34) 0px 4px 6px;\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-button {\n background-image: radial-gradient(at 35% 22%, rgb(184, 137, 87) 0%, rgb(163, 113, 66) 32%, rgb(135, 87, 44) 67%, rgb(100, 58, 30) 100%);\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: initial;\n box-shadow: rgba(223, 178, 120, 0.5) 0px 2px 3px inset, rgba(68, 37, 21, 0.4) 0px -6px 5px inset, rgb(88, 51, 33) 0px 7px 0px, rgba(14, 6, 20, 0.68) 0px 9px 4px, rgba(255, 195, 73, 0) 0px 0px 22px;\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-button-glass {\n opacity: 0.5;\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-power {\n border-top-color: transparent;\n border-right-color: rgb(66, 42, 34);\n border-bottom-color: rgb(66, 42, 34);\n border-left-color: rgb(66, 42, 34);\n filter: drop-shadow(rgba(227, 185, 128, 0.4) 0px 1px 1px);\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-power::before {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(66, 42, 34);\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-led {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(95, 75, 89);\n box-shadow: rgb(31, 17, 33) 0px 1px 2px inset, rgba(33, 22, 33, 0.4) 0px 0px 0px 2px;\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-readout {\n color: rgb(196, 170, 186);\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-ridge {\n background-image: initial;\n background-position-x: initial;\n background-position-y: initial;\n background-size: initial;\n background-repeat: initial;\n background-attachment: initial;\n background-origin: initial;\n background-clip: initial;\n background-color: rgb(33, 26, 39);\n box-shadow: rgba(255, 255, 255, 0.08) 0px 1px 0px;\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-on {\n opacity: 0;\n}\n\n.canvas[data-demo=\"arcade\"][data-theme=\"dark\"] .arcade-off {\n opacity: 1;\n}\n\n@keyframes arcade-press {\n 0% {\n transform: translateY(-6px);\n }\n\n 26% {\n transform: translateY(1px);\n }\n\n 58% {\n transform: translateY(-8px);\n }\n\n 78% {\n transform: translateY(-5px);\n }\n\n 100% {\n transform: translateY(-6px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .horizon-switch, .horizon-switch *, .horizon-switch ::before, .eclipse-dial, .eclipse-dial *, .arcade-switch *, .arcade-switch ::before {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n }\n}<\/code><\/pre>\n\n\n\n