.clock-studio{--cw-bg:var(--panel);--cw-accent:var(--teal);--cw-blue:var(--blue);position:relative;padding:8px 8px 112px;color:var(--text)}
.tool-page[data-processor="universalClockConverter"] .tool-examples{display:none}
.clock-studio button,.clock-studio input,.clock-studio textarea{font:inherit;color:inherit}.clock-studio-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:26px}.clock-studio-head span,.clock-section-title span,.clock-batch>div>span,.clock-explain header span,.clock-related header span{font-size:.67rem;letter-spacing:.18em;font-weight:900;color:var(--cw-accent)}.clock-studio-head h2{font-size:clamp(1.55rem,4vw,2.45rem);letter-spacing:-.04em;margin:.35rem 0}.clock-studio-head p{margin:0;color:var(--muted);max-width:600px}.clock-live-chip{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:999px;box-shadow:var(--raised);white-space:nowrap}.clock-live-chip i{width:8px;height:8px;border-radius:50%;background:var(--cw-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--cw-accent) 15%,transparent)}
.clock-converter-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(290px,.95fr);gap:24px}.clock-entry-panel,.clock-visual-panel,.clock-translation,.clock-batch,.clock-explain,.clock-related{border-radius:28px;background:var(--cw-bg);box-shadow:13px 13px 30px color-mix(in srgb,var(--dark-shadow) 75%,transparent),-11px -11px 25px color-mix(in srgb,var(--light-shadow) 90%,transparent)}.clock-entry-panel{padding:28px;display:flex;flex-direction:column;justify-content:center}.clock-format-control{height:52px;display:grid;grid-template-columns:repeat(3,1fr);position:relative;padding:5px;border-radius:16px;box-shadow:var(--inset);margin-bottom:24px}.clock-format-control button{position:relative;z-index:2;border:0;background:none;font-size:.78rem;font-weight:800;color:var(--muted);cursor:pointer}.clock-format-control button.active{color:var(--cw-accent)}.clock-format-control>i{position:absolute;z-index:1;left:5px;top:5px;width:calc((100% - 10px)/3);height:42px;border-radius:12px;background:var(--panel);box-shadow:var(--raised);transition:transform .35s cubic-bezier(.2,.85,.2,1)}.clock-input-wrap{display:grid;gap:9px;font-weight:800}.clock-input-wrap>div{display:flex;align-items:center;border-radius:18px;box-shadow:var(--inset);padding:6px}.clock-input-wrap input{min-width:0;width:100%;border:0;background:none;outline:0;padding:13px;font-size:clamp(1.25rem,3vw,1.8rem);font-weight:800;letter-spacing:.04em}.clock-input-wrap button,.clock-presets button{border:0;background:var(--panel);box-shadow:var(--raised);border-radius:12px;padding:.8rem 1rem;font-weight:800;cursor:pointer;white-space:nowrap}.clock-input-wrap small{color:var(--muted);font-weight:500}.clock-presets{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0}.clock-presets button{font-size:.73rem;padding:.65rem .8rem}.clock-presets button:hover{color:var(--cw-accent)}.clock-message{padding:.8rem 1rem;color:#b42318;background:#fee4e2;border-radius:12px;margin-bottom:14px}.clock-primary-result{display:grid;grid-template-columns:1fr auto;align-items:center;padding:18px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--cw-accent) 16%,var(--panel)),color-mix(in srgb,var(--cw-blue) 9%,var(--panel)));box-shadow:var(--inset)}.clock-primary-result small{grid-column:1;color:var(--muted)}.clock-primary-result strong{grid-column:1;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:-.05em}.clock-primary-result button{grid-column:2;grid-row:1/3;width:48px;height:48px;border:0;border-radius:50%;background:var(--panel);box-shadow:var(--raised);color:var(--cw-accent);cursor:pointer}
.clock-visual-panel{min-height:420px;padding:28px;display:grid;place-items:center;align-content:center;gap:22px;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--cw-accent) 8%,var(--panel)),var(--panel) 58%)}.analog-clock{position:relative;width:min(270px,75vw);aspect-ratio:1;border-radius:50%;background:var(--panel);box-shadow:14px 14px 30px color-mix(in srgb,var(--dark-shadow) 78%,transparent),-12px -12px 26px var(--light-shadow),inset 4px 4px 9px color-mix(in srgb,var(--dark-shadow) 35%,transparent),inset -4px -4px 9px var(--light-shadow)}.analog-clock:after{content:"12\A\A\A 9                                    3\A\A\A 6";white-space:pre;position:absolute;inset:15px;display:grid;place-items:center;text-align:center;font-size:.75rem;font-weight:900;color:var(--muted);line-height:2.55}.clock-ticks i{position:absolute;left:50%;top:9px;width:2px;height:8px;background:color-mix(in srgb,var(--muted) 50%,transparent);transform-origin:1px calc(135px - 9px);transform:rotate(calc(var(--tick)*6deg));z-index:1}.clock-ticks i:nth-child(5n+1){height:13px;width:3px;background:var(--text)}.clock-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:999px;z-index:4;transition:transform .45s cubic-bezier(.2,.85,.2,1)}.clock-hand.hour{width:7px;height:64px;margin-left:-3.5px;background:var(--text)}.clock-hand.minute{width:5px;height:90px;margin-left:-2.5px;background:color-mix(in srgb,var(--text) 75%,var(--cw-blue))}.clock-hand.second{width:2px;height:102px;margin-left:-1px;background:var(--cw-accent)}.clock-pin{position:absolute;z-index:6;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--cw-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--cw-accent) 17%,transparent)}.digital-clock{display:flex;align-items:baseline;gap:12px;padding:13px 20px;border-radius:16px;box-shadow:var(--inset)}.digital-clock span{font-family:ui-monospace,SFMono-Regular,monospace;font-size:1.6rem;font-weight:900;color:var(--cw-accent)}.digital-clock small{color:var(--muted);font-weight:800}
.clock-translation{margin-top:24px;padding:28px}.clock-section-title{display:flex;justify-content:space-between;align-items:end;gap:15px}.clock-section-title h3,.clock-batch h3,.clock-explain h3,.clock-related h3{font-size:1.5rem;margin:.25rem 0}.clock-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}.clock-result-card{position:relative;min-width:0;padding:18px;border-radius:17px;box-shadow:var(--raised)}.clock-result-card small{display:block;color:var(--muted);font-weight:700;margin-bottom:.5rem}.clock-result-card strong{display:block;overflow-wrap:anywhere;font-size:1rem}.clock-result-card button{position:absolute;right:10px;top:10px;width:32px;height:32px;border:0;border-radius:50%;background:var(--panel);box-shadow:var(--raised);cursor:pointer;color:var(--muted)}.clock-result-card button.copied{color:var(--cw-accent);box-shadow:var(--inset)}.day-progress{margin-top:24px;padding:20px;border-radius:18px;box-shadow:var(--inset)}.day-progress>div:first-child,.day-labels{display:flex;justify-content:space-between}.day-track{position:relative;height:12px;border-radius:999px;background:color-mix(in srgb,var(--muted) 18%,transparent);margin:14px 0}.day-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cw-blue),var(--cw-accent));transition:width .45s}.day-track b{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--panel);border:5px solid var(--cw-accent);transform:translate(-50%,-50%);transition:left .45s}.day-labels{font-size:.72rem;color:var(--muted)}
.clock-batch,.clock-explain,.clock-related{padding:30px}.clock-batch{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:25px}.clock-batch p,.clock-explain p{color:var(--muted)}.clock-batch textarea{width:100%;border:0;outline:0;background:none;box-shadow:var(--inset);border-radius:17px;padding:16px;resize:vertical}.clock-batch-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.clock-table-wrap{overflow:auto;border-radius:18px;box-shadow:var(--inset);padding:10px}.clock-table-wrap table{width:100%;border-collapse:collapse;font-size:.78rem}.clock-table-wrap th,.clock-table-wrap td{text-align:left;padding:12px;border-bottom:1px solid color-mix(in srgb,var(--muted) 15%,transparent);white-space:nowrap}.clock-table-wrap .invalid td:last-child{color:#b42318}.clock-explain-grid,.clock-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}.clock-explain-grid article,.clock-related-grid a{padding:20px;border-radius:18px;box-shadow:var(--raised)}.clock-explain-grid article b{display:block;color:var(--cw-accent);font-size:1.35rem}.clock-explain-grid article strong{display:block;margin:.3rem 0}.clock-related-grid a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;text-decoration:none}.clock-related-grid a>i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;box-shadow:var(--inset);color:var(--cw-accent)}.clock-related-grid span{display:grid}.clock-related-grid small{color:var(--muted)}.clock-related-grid b{font-size:.76rem}
.clock-dock{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:min(520px,calc(100% - 20px));height:78px;display:grid;grid-template-columns:repeat(4,1fr);padding:7px;border-radius:25px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:12px 12px 28px color-mix(in srgb,var(--dark-shadow) 75%,transparent),-9px -9px 24px var(--light-shadow);backdrop-filter:blur(16px);z-index:8;overflow:hidden}.clock-dock button{position:relative;z-index:2;display:grid;place-items:center;align-content:center;gap:4px;border:0;background:none;color:var(--muted);cursor:pointer}.clock-dock button span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;transition:.35s}.clock-dock button small{font-size:.65rem;font-weight:800;transition:.35s}.clock-dock button.active{color:var(--cw-accent)}.clock-dock button.active span{transform:translateY(-12px);background:var(--panel);box-shadow:var(--raised)}.clock-dock button.active small{transform:translateY(-8px)}.clock-dock-indicator{position:absolute;z-index:1;left:7px;bottom:7px;width:calc((100% - 14px)/4);height:64px;border-radius:20px;box-shadow:var(--inset);transition:transform .4s cubic-bezier(.2,.85,.2,1)}.clock-view.active{animation:clockReveal .35s ease both}@keyframes clockReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dark .clock-message{background:#5b2020;color:#fecaca}.dark .clock-entry-panel,.dark .clock-visual-panel,.dark .clock-translation,.dark .clock-batch,.dark .clock-explain,.dark .clock-related{box-shadow:12px 12px 28px #090f1a,-6px -6px 18px #243149}.dark .clock-dock{box-shadow:10px 10px 24px #090f1a,-5px -5px 15px #243149}
@media(max-width:760px){.workspace:has(.clock-studio){padding:14px}.clock-studio{padding:4px 2px 104px}.clock-studio-head{display:block}.clock-live-chip{display:inline-flex;margin-top:14px}.clock-converter-grid,.clock-batch{grid-template-columns:1fr}.clock-entry-panel,.clock-visual-panel,.clock-translation,.clock-batch,.clock-explain,.clock-related{padding:20px;border-radius:22px}.clock-visual-panel{min-height:355px}.clock-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.clock-explain-grid,.clock-related-grid{grid-template-columns:1fr}.clock-related-grid a{grid-template-columns:40px minmax(0,1fr)}.clock-related-grid a>b{display:none}.clock-dock{position:fixed;bottom:12px;z-index:10010}.clock-ticks i{transform-origin:1px calc(min(270px,75vw)/2 - 9px)}}
@media(max-width:460px){.clock-format-control button{font-size:.68rem}.clock-input-wrap>div{display:grid}.clock-input-wrap button{margin:0 6px 6px}.clock-presets{display:grid;grid-template-columns:repeat(2,1fr)}.clock-result-grid{grid-template-columns:1fr}.clock-section-title{align-items:flex-start}.clock-dock{height:70px;border-radius:20px}.clock-dock-indicator{height:56px}.clock-dock button.active span{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.clock-studio *{animation:none!important;transition:none!important}}