html,body{margin: 0;width: 100%;min-height: 100%;background: #000;font-family: Arial,Helvetica,sans-serif;}body{color: #ccc;}.stage{min-height: 100vh;box-sizing: border-box;padding: 24px;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 28px;}.title{margin: 0;color: #eee;font-size: 23px;font-weight: bold;text-align: center;max-width: 640px;}.brand{margin: -18px 0 0;color: #888;font-size: 14px;letter-spacing: 0.04em;text-align: center;}.brand a{color: inherit;text-decoration: none;}.brand a:hover{text-decoration: underline;}.prompt{margin: 0;color: #ccc;font-size: 18px;text-align: center;}.picker{display: flex;gap: 24px;}.cell{display: flex;flex-direction: column;align-items: center;gap: 10px;}.tile-label{color: #ddd;font-size: 15px;font-weight: 600;text-align: center;}.group{display: flex;flex-direction: column;align-items: center;gap: 16px;}.group-label{margin: 0;color: #eee;font-size: 18px;font-weight: bold;text-align: center;}.group-desc{margin: 0;max-width: 46ch;color: #aaa;font-size: 15px;text-align: center;}:fullscreen .stage,:fullscreen .content{display: none;}.swatch,.clock-tile{width: 200px;height: 200px;padding: 0;border: 2px solid #888;border-radius: 8px;cursor: pointer;}.swatch:focus-visible,.clock-tile:focus-visible{outline: 3px solid #4d90fe;outline-offset: 3px;}.clock-tile{display: flex;align-items: center;justify-content: center;overflow: hidden;background: #000;color: #777;}.clock-tile .clock-face[data-variant="digital"]{font-size: 30px;}.clock-tile .clock-face[data-variant="analog"]{--dial: 150px;}.swatch.is-active{box-shadow: 0 0 0 3px #4d90fe;}.swatch-wrap{position: relative;display: inline-flex;}.gear{position: absolute;top: 10px;left: 10px;width: 66px;height: 66px;padding: 0;border: none;border-radius: 8px;background: rgba(255,255,255,0.85);color: #333;font-size: 40px;line-height: 1;cursor: pointer;text-decoration: none;display: flex;align-items: center;justify-content: center;}.gear:hover{background: #fff;}.gear:focus-visible{outline: 3px solid #4d90fe;outline-offset: 2px;}.color-input{position: absolute;top: 10px;left: 10px;width: 66px;height: 66px;opacity: 0;border: none;padding: 0;pointer-events: none;}.hint{display: none;margin: 0;color: #8a8a8a;font-size: 14px;text-align: center;}@media (pointer: coarse){.hint{display: block;}}@media (orientation: portrait){.picker{flex-direction: column;}.swatch,.clock-tile{width: 60vw;max-width: 320px;height: 16vh;}.clock-tile .clock-face[data-variant="digital"]{font-size: 6vh;}.clock-tile .clock-face[data-variant="analog"]{--dial: 12vh;}.gear,.color-input{width: 5.3vh;height: 5.3vh;}.gear{font-size: 3.3vh;}}.content{max-width: 640px;margin: 0 auto;padding: 0 24px 64px;color: #bbb;font-size: 16px;line-height: 1.6;}.content .lead{margin: 0 0 20px;text-align: center;}.content details{border-top: 1px solid #2a2a2a;padding: 14px 0;}.content details summary{cursor: pointer;color: #eee;font-weight: bold;list-style: none;}.content details summary::-webkit-details-marker{display: none;}.content details summary h2{display: inline;margin: 0;font-size: inherit;font-weight: inherit;color: inherit;letter-spacing: inherit;}.content details summary::before{content: "+ ";color: #0a0;}.content details[open] summary::before{content: "\2212 ";}.content details p{margin: 10px 0 0;}.content .crosslinks{margin-top: 28px;padding-top: 18px;border-top: 1px solid #2a2a2a;display: flex;flex-wrap: wrap;gap: 18px;justify-content: center;font-size: 15px;}.content .crosslinks a{color: #6db3ff;text-decoration: none;}.content .crosslinks a:hover{text-decoration: underline;}.content .crosslinks [aria-current="page"]{color: #777;}html.theme-light,html.theme-light body{background: #fff;}html.theme-light body{color: #222;}html.theme-light .title{color: #111;}html.theme-light .brand{color: #555;}html.theme-light .prompt{color: #333;}html.theme-light .tile-label{color: #222;}html.theme-light .group-label{color: #111;}html.theme-light .group-desc{color: #555;}html.theme-light .hint{color: #555;}html.theme-light .content{color: #222;}html.theme-light .content details{border-top-color: #ccc;}html.theme-light .content details summary{color: #111;}html.theme-light .content .crosslinks{border-top-color: #ccc;}html.theme-light .content .crosslinks a{color: #0a58ca;}html.theme-light .content .crosslinks [aria-current="page"]{color: #666;}html.color-active .title,html.color-active .brand,html.color-active .prompt,html.color-active .group-label,html.color-active .group-desc,html.color-active .tile-label,html.color-active .hint,html.color-active .content,html.color-active .content details summary,html.color-active .content details summary::before,html.color-active .content .crosslinks a,html.color-active .content .crosslinks [aria-current="page"]{color: #fff;}html.color-active.theme-light .title,html.color-active.theme-light .brand,html.color-active.theme-light .prompt,html.color-active.theme-light .group-label,html.color-active.theme-light .group-desc,html.color-active.theme-light .tile-label,html.color-active.theme-light .hint,html.color-active.theme-light .content,html.color-active.theme-light .content details summary,html.color-active.theme-light .content details summary::before,html.color-active.theme-light .content .crosslinks a,html.color-active.theme-light .content .crosslinks [aria-current="page"]{color: #000;}html.color-active .content .crosslinks a{text-decoration: underline;}.clock-face{--scale: 1;display: flex;align-items: center;justify-content: center;color: #777;}.clock-face.size-s{--scale: 0.75;}.clock-face.size-m{--scale: 1;}.clock-face.size-l{--scale: 1.3;}.preview{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px;width: min(360px,82vw);min-height: 150px;padding: 16px;box-sizing: border-box;background: #000;border: 1px solid #333;border-radius: 12px;overflow: hidden;cursor: pointer;color: inherit;font: inherit;}.preview:hover{border-color: #666;}.preview:focus-visible{outline: 3px solid #4d90fe;outline-offset: 3px;}.preview-hint{color: #888;font-size: 13px;letter-spacing: 0.02em;}.surface{display: none;position: fixed;inset: 0;align-items: center;justify-content: center;background: #000;z-index: 2147483647;}html:fullscreen .surface.is-active{display: flex;}.surface .clock-face{width: auto;height: auto;}.clock-face[data-variant="digital"]{font-family: "Helvetica Neue",Arial,"Segoe UI",Roboto,sans-serif;font-variant-numeric: tabular-nums;font-weight: 600;letter-spacing: 0.02em;line-height: 1;white-space: nowrap;}.preview .clock-face[data-variant="digital"]{font-size: min(calc(40px * var(--scale)),calc((min(360px,82vw) - 24px) / 2.9));}.preview .clock-face[data-variant="digital"].has-seconds{font-size: min(calc(40px * var(--scale)),calc((min(360px,82vw) - 24px) / 4.6));}.surface .clock-face[data-variant="digital"]{font-size: min(calc(30vh * var(--scale)),calc(94vw / 2.9));}.surface .clock-face[data-variant="digital"].has-seconds{font-size: min(calc(30vh * var(--scale)),calc(94vw / 4.6));}.clock-face .colon{display: inline-block;transform: translateY(-0.09em);}.clock-face .colon.hide{visibility: hidden;}.clock-face[data-variant="analog"]{--dial: 120px;}.surface .clock-face[data-variant="analog"]{--dial: min(70vw,70vh);}.dial{--d: calc(var(--dial) * var(--scale));position: relative;width: var(--d);height: var(--d);border-radius: 50%;border: max(2px,calc(var(--d) * 0.017)) solid currentColor;box-sizing: border-box;}.dial .tick{--w: max(2px,calc(var(--d) * 0.016));position: absolute;top: 0;left: 50%;width: var(--w);height: 50%;margin-left: calc(var(--w) / -2);transform-origin: bottom center;}.dial .tick::before{content: "";position: absolute;top: 6%;left: 0;width: 100%;height: 7%;background: currentColor;}.dial .tick.major::before{width: max(3px,calc(var(--d) * 0.033));left: 50%;transform: translateX(-50%);height: 11%;}.dial .hand{--w: max(2px,calc(var(--d) * 0.017));position: absolute;left: 50%;bottom: 50%;width: var(--w);margin-left: calc(var(--w) / -2);transform-origin: bottom center;background: currentColor;border-radius: max(3px,calc(var(--d) * 0.02));}.dial .hand.hour{--w: max(3px,calc(var(--d) * 0.025));height: 28%;}.dial .hand.minute{--w: max(2px,calc(var(--d) * 0.017));height: 40%;}.dial .hand.second{--w: max(1px,calc(var(--d) * 0.009));height: 44%;opacity: 0.8;}.dial .hub{--w: max(6px,calc(var(--d) * 0.06));position: absolute;left: 50%;top: 50%;width: var(--w);height: var(--w);margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);border-radius: 50%;background: currentColor;}.settings-disclosure{width: min(520px,92vw);text-align: center;}.settings-disclosure summary{display: inline-flex;align-items: center;gap: 8px;padding: 8px 16px;border: 1px solid #444;border-radius: 8px;background: #1a1a1a;color: #ccc;font-size: 15px;cursor: pointer;list-style: none;}.settings-disclosure summary::-webkit-details-marker{display: none;}.settings-disclosure summary:hover{border-color: #666;color: #eee;}.settings-disclosure summary:focus-visible{outline: 3px solid #4d90fe;outline-offset: 2px;}.settings-disclosure .gear-icon{font-size: 18px;line-height: 1;}.settings-disclosure .label-open{display: none;}.settings-disclosure[open] .label-open{display: inline;}.settings-disclosure[open] .label-closed{display: none;}.settings-disclosure[open] summary{margin-bottom: 18px;}.clock-settings{display: flex;flex-direction: column;gap: 16px;max-width: 400px;margin: 0 auto;text-align: left;}.control-row{display: flex;align-items: center;gap: 14px;}.control-label{flex: 0 0 88px;color: #aaa;font-size: 14px;}.control-row .slider-field{flex: 1 1 auto;}.toggle-group{display: flex;flex-wrap: wrap;gap: 10px;}.control-row.is-muted{opacity: 0.45;}.control-row.is-muted .seg,.control-row.is-muted .slider-field{pointer-events: none;}.seg{display: inline-flex;border: 1px solid #444;border-radius: 8px;overflow: hidden;}.seg button{padding: 8px 14px;border: 0;background: #1a1a1a;color: #ccc;cursor: pointer;font: inherit;font-size: 14px;}.seg button + button{border-left: 1px solid #444;}.seg button.is-active{background: #4d90fe;color: #fff;}.toggle{padding: 8px 14px;border: 1px solid #444;border-radius: 8px;background: #1a1a1a;color: #ccc;cursor: pointer;font: inherit;font-size: 14px;}.toggle.is-active{background: #4d90fe;border-color: #4d90fe;color: #fff;}.slider-field{display: inline-flex;align-items: center;gap: 8px;color: #aaa;font-size: 14px;}.slider-field input{width: 100%;}.colors{display: inline-flex;flex-wrap: wrap;align-items: center;gap: 12px;}.dot{width: 34px;height: 34px;padding: 0;border-radius: 50%;border: 2px solid #555;cursor: pointer;}.dot.is-active{box-shadow: 0 0 0 3px #4d90fe;}.seg button:focus-visible,.toggle:focus-visible,.dot:focus-visible{outline: 3px solid #4d90fe;outline-offset: 2px;}.dot-wrap{position: relative;display: inline-flex;}.gear-dot{display: flex;align-items: center;justify-content: center;border-color: #888;background: conic-gradient(#777,#ff4b3e,#ffa500,#39d353,#6db3ff,#777);color: #fff;font-size: 15px;line-height: 1;}@media (max-width: 480px){.clock-settings{max-width: 100%;gap: 20px;}.control-row{flex-direction: column;align-items: stretch;gap: 8px;}.control-label{flex: none;font-size: 15px;color: #ccc;}.control-row .seg,.control-row .toggle-group{justify-content: center;}.seg{justify-content: center;}.seg button,.toggle{flex: 1 1 auto;padding: 12px 14px;font-size: 15px;}.colors{gap: 16px;justify-content: flex-start;}.dot{width: 44px;height: 44px;}}