#ckWork{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:14px;align-items:start;margin-top:14px;background:transparent}
#ckWork:fullscreen{padding:16px;overflow:auto;background:#10101b}
.ck-stagebox{position:sticky;top:84px;display:grid;gap:10px;min-width:0}
#ckStage{position:relative;display:grid;place-items:center;padding:clamp(14px,2.500vw,30px);border:1px solid #4a3f66;border-radius:20px;background:radial-gradient(circle at 50% 40%,#3a2b63,#17142a 72%)}
#ckStage.is-clear{background-color:#2a2838;background-image:linear-gradient(45deg,#3b394c 25%,transparent 25%,transparent 75%,#3b394c 75%),linear-gradient(45deg,#3b394c 25%,transparent 25%,transparent 75%,#3b394c 75%);background-position:0 0,12px 12px;background-size:24px 24px}
#ckClock{width:min(100%,62vh);min-width:0;aspect-ratio:1;filter:drop-shadow(0 18px 34px #0009)}
#ckClock svg{display:block;width:100%;height:100%;overflow:visible;user-select:none}
.ck-grip{cursor:grab;touch-action:none;pointer-events:stroke}
.is-dragging .ck-grip{cursor:grabbing}
#ckReadout{position:absolute;left:14px;top:12px;padding:3px 11px;border-radius:999px;background:#0d0b1acc;color:#fff;font:700 15px/1.5 ui-monospace,Consolas,monospace}
.ck-hint{position:absolute;right:14px;top:14px;color:#d9d2ea;font-size:12px}
.ck-export{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ck-export button{min-height:46px;padding:0 18px;border:1px solid #6a5a8e;border-radius:11px;background:#221d38;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.ck-export button:hover{border-color:#c8b4ff}
.ck-export #ckPng{border:0;background:#f6cd63;color:#231a08}
.ck-export #ckPng:hover{background:#ffdc85}
.ck-export small{color:#bdb6cc;font-size:13px}
.ck-panel{display:grid;gap:14px;min-width:0}
.ck-card{padding:15px;border:1px solid #3d3656;border-radius:15px;background:#1b1829}
.ck-card h2{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#c8b4ff}
.ck-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.ck-field{display:grid;gap:4px;min-width:0;font-size:13px;color:#d6d0e3}
.ck-field input[type=text],.ck-field input[type=number],.ck-field input[type=time]{width:100%;box-sizing:border-box;min-height:44px;padding:8px 11px;border:1px solid #4a4560;border-radius:10px;background:#100e1c;color:#fff;font:inherit;font-size:16px}
#ckTime{font-family:ui-monospace,Consolas,monospace}
.ck-btn{min-height:44px;padding:0 13px;border:1px solid #4a4560;border-radius:10px;background:none;color:#ece7f6;font:inherit;font-size:14px;cursor:pointer}
.ck-btn:hover:not(:disabled){border-color:#c8b4ff}
.ck-btn:disabled{opacity:.45;cursor:default}
.ck-opts{display:flex;flex-wrap:wrap;gap:6px}
.ck-opts button{min-height:40px;padding:0 12px;border:1px solid #4a4560;border-radius:999px;background:none;color:#d6d0e3;font:inherit;font-size:13px;cursor:pointer}
.ck-opts button[aria-pressed=true]{border-color:#f6cd63;background:#f6cd631a;color:#fff;font-weight:600}
.ck-sub{margin:11px 0 5px;font-size:13px;color:#bdb6cc}
#ckThemes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#ckThemes button{display:flex;align-items:center;gap:7px;min-height:44px;padding:4px 8px;border:1px solid #3d3656;border-radius:10px;background:none;color:#e4def0;font:inherit;font-size:13px;cursor:pointer}
#ckThemes button[aria-pressed=true]{border-color:#f6cd63;background:#f6cd631a}
.ck-swatch{display:flex;flex:none;align-items:center;justify-content:center;gap:2px;width:30px;height:30px;border:1px solid #ffffff33;border-radius:50%}
.ck-swatch i{width:7px;height:7px;border-radius:50%}
.ck-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.ck-colors label{display:grid;gap:4px;font-size:12px;color:#bdb6cc}
.ck-colors input{width:100%;height:42px;padding:2px;border:1px solid #4a4560;border-radius:9px;background:#100e1c;cursor:pointer}
.ck-colors input:disabled{opacity:.35;cursor:not-allowed}
.ck-angles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:0;overflow:hidden;border:1px solid #3d3656;border-radius:13px;background:#3d3656}
.ck-angles div{padding:9px 6px;background:#1b1829;text-align:center}
.ck-angles dt{font-size:11px;color:#bdb6cc}
.ck-angles dd{margin:2px 0 0;color:#fff;font-size:14px;font-weight:700}
.ck-file{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border:1px solid #4a4560;border-radius:10px;color:#ece7f6;font-size:14px;cursor:pointer}
.ck-file:hover{border-color:#c8b4ff}
.ck-file:focus-within{outline:2px solid #f6cd63}
.ck-file input{position:absolute;width:1px;height:1px;opacity:0}
.ck-tools{display:flex;flex-wrap:wrap;gap:6px}
#ckStatus{min-height:20px;margin:0;font-size:14px;color:#c9f3da}
#ckStatus.is-bad{color:#ffb4b4;font-weight:600}
#ckLabelCount{justify-self:end;color:#a9a2bb;font-size:12px}
@media(max-width:900px){
#ckWork{grid-template-columns:minmax(0,1fr)}
.ck-stagebox{position:static}
#ckClock{width:min(100%,430px)}
.ck-export button{flex:1 1 40%}
.ck-export small{flex:1 1 100%;text-align:center}
}
@media(max-width:520px){
.ck-angles{grid-template-columns:repeat(3,minmax(0,1fr))}
.ck-hint{display:none}
#ckThemes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){[data-tool=analog_clock_maker] .ds-hero{padding:16px}[data-tool=analog_clock_maker] .ds-badges,[data-tool=analog_clock_maker] .ds-eyebrow{display:none}}
@media(min-width:901px){[data-tool=analog_clock_maker] .ds-hero{padding-block:18px}#ckClock{width:min(100%,58vh)}}