.clock-skin{--face:#fafafa;--ink:#242424;--accent:#dd613e;--case:#262626;background:var(--case);padding:5px;color:var(--ink)}
.app-icon.clock-app{background:var(--case)}
.clock-skin svg{display:block;width:100%;height:100%;overflow:visible}
.clock-face{fill:var(--face)}
.clock-skin text{fill:var(--ink);font-family:Arial,sans-serif;font-size:10px;font-weight:500;text-anchor:middle;dominant-baseline:central}
.clock-hour,.clock-minute,.clock-second{transform-origin:50px 50px;stroke:var(--ink);stroke-linecap:round;stroke-width:4;fill:none}
.clock-hour{transform:rotate(var(--clock-hour))}.clock-minute{transform:rotate(var(--clock-minute));stroke-width:2.8}.clock-second{transform:rotate(var(--clock-second));stroke:var(--accent);stroke-width:1.3}.clock-pin{fill:var(--accent)}
.clock-tick{stroke:var(--ink);stroke-width:.5;opacity:.35;display:none}.clock-tick.major{stroke-width:1.3;opacity:.8}
.clock-skin[data-skin=minimal]{--case:#f7f7f4;--face:#f7f7f4;--ink:#353938;--accent:#9ba39e}.clock-skin[data-skin=minimal] text{display:none}.clock-skin[data-skin=minimal] .clock-tick.major{display:block}.clock-skin[data-skin=minimal] .clock-hour{stroke-width:3}.clock-skin[data-skin=minimal] .clock-minute{stroke-width:2}
.clock-skin[data-skin=rose]{--case:#bd8b92;--face:#f8e9e7;--ink:#785259;--accent:#b7757e;background:linear-gradient(145deg,#edc6c6,#b07b87)}
.clock-skin[data-skin=midnight]{--case:#202a3c;--face:#283448;--ink:#e9edf3;--accent:#d6b975}.clock-skin[data-skin=midnight] .clock-tick{display:block}.clock-skin[data-skin=midnight] text{font-size:9px}
.clock-skin[data-skin=sage]{--case:#738a7b;--face:#e6ece2;--ink:#405849;--accent:#a49065}.clock-skin[data-skin=sage] text{font-family:Georgia,serif}
.clock-skin[data-skin=roman]{--case:#a29076;--face:#f8f3e8;--ink:#55483b;--accent:#b59963}.clock-skin[data-skin=roman] text{font-family:Georgia,serif;font-size:8px}.clock-skin[data-skin=roman] .clock-hour{stroke-width:2.8}.clock-skin[data-skin=roman] .clock-minute{stroke-width:1.8}
 .clock-wardrobe{outline:none}
.clock-skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.clock-choice{position:relative;display:block;width:100%;aspect-ratio:1;min-width:0;min-height:0;align-self:start;padding:0;background:none;border:0;border-radius:18px;outline-offset:3px}
.clock-choice[aria-pressed=true]::after{content:"";position:absolute;inset:0;border:2px solid #666;border-radius:18px;pointer-events:none}
.clock-sample{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;border-radius:18px;box-shadow:inset 0 1px 1px #ffffff75,0 5px 11px #00000016;transition:transform .18s var(--ease)}
@media(hover:hover){.clock-choice:hover{transform:translateY(-2px)}}
html[data-pointer-input] .clock-choice:focus{outline:none}
@media(prefers-reduced-motion:reduce){.clock-sample,.clock-choice{transition:none}}

.clock-skin[data-skin=ocean]{--case:#598fbd;--face:#e4f2f7;--ink:#245774;--accent:#ed996e;background:linear-gradient(145deg,#8dc0df,#427da9)}
.clock-skin[data-skin=ocean] text{font-size:9px;font-weight:600}
.clock-skin[data-skin=ocean] .clock-tick.major{display:block;opacity:.35}
.clock-skin[data-skin=bauhaus]{--case:#e7e5e0;--face:#f7f6f0;--ink:#282828;--accent:#d94b40}
.clock-skin[data-skin=bauhaus] text{display:none}
.clock-skin[data-skin=bauhaus] .clock-tick.major{display:block;stroke-width:2.8}
.clock-skin[data-skin=bauhaus] .clock-hour{stroke-width:6;stroke-linecap:butt}
.clock-skin[data-skin=bauhaus] .clock-minute{stroke-width:3.5;stroke-linecap:butt}
.clock-skin[data-skin=bauhaus] .clock-pin{fill:#282828}
.clock-skin[data-skin=wood]{--case:#976b4c;--face:#f5e8d1;--ink:#684a34;--accent:#b97d43;background:repeating-linear-gradient(92deg,#a57955 0px,#a57955 3px,#b58a64 4px,#a57955 6px,#916747 9px,#a57955 12px)}
.clock-skin[data-skin=wood] text{font-family:Georgia,serif;font-size:9px}
.clock-skin[data-skin=wood] .clock-hour{stroke-width:3}
.clock-skin[data-skin=wood] .clock-minute{stroke-width:2}