.clock-container{--clk-bg: #070b18;--clk-card: rgba(255, 255, 255, .94);--clk-card-strong: #ffffff;--clk-text: #0f172a;--clk-muted: #64748b;--clk-line: rgba(148, 163, 184, .24);--clk-primary: #7c3aed;--clk-primary-dark: #5b21b6;--clk-cyan: #06b6d4;--clk-amber: #f59e0b;--clk-radius-xl: 30px;--clk-radius-lg: 22px;--clk-shadow: 0 28px 90px rgba(2, 6, 23, .22);min-height:100vh;padding:clamp(16px,3vw,42px);color:var(--clk-text);background:radial-gradient(circle at 12% 0%,rgba(124,58,237,.28),transparent 34rem),radial-gradient(circle at 88% 10%,rgba(6,182,212,.2),transparent 30rem),linear-gradient(180deg,#07111f,#101827 42%,#eaf0f8 42%,#f6f8fb);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.clock-container *{box-sizing:border-box}.clock-container .clock-shell{width:min(100%,1220px);margin:0 auto}.clock-container .clock-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,auto);gap:18px;align-items:stretch;margin-bottom:18px}.clock-container .clock-hero-copy,.clock-container .clock-live-pill,.clock-container .clock-stage-card,.clock-container .clock-controls,.clock-container .features-section,.clock-container .usage-section{border:1px solid rgba(255,255,255,.18);border-radius:var(--clk-radius-xl);box-shadow:var(--clk-shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.clock-container .clock-hero-copy{position:relative;overflow:hidden;padding:clamp(22px,3.6vw,42px);background:linear-gradient(135deg,#ffffff1a,#ffffff09),#0f172a6b}.clock-container .clock-hero-copy:after{content:"";position:absolute;right:-80px;bottom:-120px;width:300px;height:300px;border-radius:999px;background:radial-gradient(circle,rgba(6,182,212,.24),transparent 65%);pointer-events:none}.clock-container .clock-kicker,.clock-container .clock-stage-head span,.clock-container .control-title span,.clock-container .section-head span,.clock-container .info-card span{display:inline-flex;color:#a78bfa;font-size:12px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.clock-container .neon-text{position:relative;z-index:1;margin:10px 0 0;color:#f8fbff;font-size:clamp(2.2rem,5vw,4.8rem);font-weight:950;letter-spacing:-.07em;line-height:1;text-shadow:0 0 34px rgba(124,58,237,.36)}.clock-container .subtitle{position:relative;z-index:1;max-width:680px;margin:14px 0 0;color:#e2e8f0c7;font-size:15px;line-height:1.8}.clock-container .clock-live-pill{display:grid;align-content:center;justify-items:end;min-width:250px;padding:22px;background:#ffffffeb}.clock-container .clock-live-pill span{color:var(--clk-muted);font-size:12px;font-weight:900}.clock-container .clock-live-pill strong{margin-top:8px;color:var(--clk-primary-dark);font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:clamp(1.7rem,3vw,2.35rem);letter-spacing:-.04em}.clock-container .clock-workbench{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.clock-container .clock-stage-card,.clock-container .clock-controls,.clock-container .features-section,.clock-container .usage-section{background:var(--clk-card)}.clock-container .clock-stage-card{min-width:0;overflow:hidden;padding:clamp(18px,2.5vw,28px)}.clock-container .clock-stage-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}.clock-container .clock-stage-head h2,.clock-container .control-title h2,.clock-container .section-head h2{margin:6px 0 0;color:var(--clk-text);font-size:24px;letter-spacing:-.04em}.clock-container .clock-stage-date{max-width:260px;padding:8px 12px;border:1px solid #bfdbfe;border-radius:999px;color:#1d4ed8;background:#eff6ff;font-size:12px;font-weight:850;text-align:right}.clock-container .clock-display{display:grid;min-height:clamp(360px,54vh,560px);place-items:center;overflow:hidden;padding:clamp(16px,2vw,28px);border:1px solid rgba(148,163,184,.18);border-radius:24px;background:radial-gradient(circle at 50% 0%,rgba(124,58,237,.1),transparent 42%),linear-gradient(180deg,#f8fbff,#eef4ff)}.clock-container .analog-clock-container{display:grid;width:min(100%,440px);place-items:center}.clock-container .analog-clock{width:min(100%,400px);height:auto;border-radius:999px;background:radial-gradient(circle,#111827,#020617);box-shadow:0 26px 70px #0f172a59,0 0 0 14px #ffffffa3,inset 0 0 30px #00000094}.clock-container .digital-clock{width:min(100%,620px);padding:clamp(28px,5vw,54px);border:1px solid rgba(124,58,237,.18);border-radius:28px;background:radial-gradient(circle at 50% 0%,rgba(124,58,237,.16),transparent 46%),linear-gradient(180deg,#fff,#f8fafc);box-shadow:0 24px 60px #0f172a1f;text-align:center}.clock-container .digital-time{color:var(--clk-primary-dark);font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:clamp(2.5rem,8vw,5.4rem);font-weight:950;letter-spacing:-.08em;line-height:1}.clock-container .digital-date{margin-top:16px;color:var(--clk-muted);font-size:clamp(1rem,2vw,1.35rem);font-weight:850}.clock-container .flip-clock{display:grid;justify-items:center;gap:18px;width:100%}.clock-container .flip-section{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(5px,1vw,10px);max-width:100%}.clock-container .flip-digit{perspective:1000px}.clock-container .flip-card{width:clamp(42px,7vw,82px);height:clamp(68px,10vw,120px);position:relative}.clock-container .flip-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}.clock-container .flip-card-front{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:16px;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 50%),linear-gradient(135deg,var(--clk-primary),var(--clk-cyan));box-shadow:0 18px 34px #4f46e538;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:clamp(2rem,6vw,3.5rem);font-weight:950}.clock-container .flip-separator{color:var(--clk-primary-dark);font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:clamp(2rem,5vw,3rem);font-weight:950}.clock-container .flip-ampm{padding:8px 14px;border:1px solid #c4b5fd;border-radius:999px;color:var(--clk-primary-dark);background:#f5f3ff;font-weight:950}.clock-container .clock-controls{position:sticky;top:18px;display:grid;gap:14px;padding:16px}.clock-container .clock-control-group,.clock-container .info-card{padding:14px;border:1px solid var(--clk-line);border-radius:18px;background:#f8fafcd1}.clock-container .control-title{margin-bottom:12px}.clock-container .control-title h2{font-size:17px}.clock-container .time-input-section{display:grid;gap:10px}.clock-container .time-input-section label{color:var(--clk-muted);font-size:12px;font-weight:900}.clock-container .time-input,.clock-container .clear-btn,.clock-container .mode-tab,.clock-container .option-label{min-height:42px;border-radius:14px;font:inherit}.clock-container .time-input{width:100%;padding:0 12px;border:1px solid var(--clk-line);color:var(--clk-text);background:#fff;font-weight:850;outline:none}.clock-container .time-input:focus{border-color:var(--clk-primary);box-shadow:0 0 0 4px #7c3aed1f}.clock-container .clear-btn{border:0;color:#fff;background:linear-gradient(135deg,var(--clk-primary),var(--clk-cyan));cursor:pointer;font-weight:900;transition:transform .18s ease,box-shadow .18s ease}.clock-container .clock-mode-tabs{display:grid;grid-template-columns:1fr;gap:9px}.clock-container .mode-tab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--clk-line);color:var(--clk-text);background:#fff;cursor:pointer;text-align:left;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.clock-container .mode-tab strong,.clock-container .mode-tab small{display:block}.clock-container .mode-tab strong{font-size:13px}.clock-container .mode-tab small{color:var(--clk-muted);font-size:12px}.clock-container .mode-tab:hover,.clock-container .mode-tab.active{transform:translateY(-1px);border-color:#7c3aed5c;background:linear-gradient(135deg,#f5f3ff,#fff);box-shadow:0 12px 24px #7c3aed1a}.clock-container .mode-tab.active strong{color:var(--clk-primary-dark)}.clock-container .clock-options{display:grid;gap:10px}.clock-container .option-label{display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--clk-line);color:var(--clk-text);background:#fff;cursor:pointer;font-size:13px;font-weight:850}.clock-container .option-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--clk-primary)}.clock-container .time-info{display:grid;gap:10px}.clock-container .info-card{background:#fff}.clock-container .info-card.highlight{border-color:#c4b5fd;background:#f5f3ff}.clock-container .info-card h3{margin:5px 0 6px;color:var(--clk-text);font-size:15px}.clock-container .info-card p{margin:0;color:var(--clk-muted);font-size:13px;font-weight:760;line-height:1.55}.clock-container .features-section,.clock-container .usage-section{margin-top:18px;padding:clamp(18px,2.5vw,28px)}.clock-container .section-head{margin-bottom:16px;text-align:left}.clock-container .features-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.clock-container .feature-card,.clock-container .step{border:1px solid var(--clk-line);border-radius:20px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.clock-container .feature-card{padding:18px}.clock-container .feature-card:hover,.clock-container .step:hover,.clock-container .clear-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px #0f172a1a}.clock-container .feature-icon{display:grid;width:42px;height:42px;place-items:center;margin-bottom:12px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--clk-primary),var(--clk-cyan));font-size:13px;font-weight:950}.clock-container .feature-card h3,.clock-container .step-content h3{margin:0 0 8px;color:var(--clk-text);font-size:16px}.clock-container .feature-card p,.clock-container .step-content p{margin:0;color:var(--clk-muted);font-size:13px;line-height:1.65}.clock-container .usage-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.clock-container .step{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;padding:16px}.clock-container .step-number{display:grid;width:42px;height:42px;place-items:center;border-radius:14px;color:var(--clk-primary-dark);background:#ede9fe;font-weight:950}@media (max-width: 1080px){.clock-container .clock-workbench{grid-template-columns:1fr}.clock-container .clock-controls{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-container .time-info{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-container .features-grid,.clock-container .usage-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 760px){.clock-container{padding:12px}.clock-container .clock-header,.clock-container .clock-controls,.clock-container .time-info,.clock-container .features-grid,.clock-container .usage-steps{grid-template-columns:1fr}.clock-container .clock-live-pill{justify-items:start;min-width:0}.clock-container .clock-stage-head{flex-direction:column}.clock-container .clock-stage-date{max-width:none;text-align:left}.clock-container .clock-display{min-height:330px;padding:14px}.clock-container .analog-clock{width:min(100%,310px)}.clock-container .digital-clock{padding:26px 16px}.clock-container .flip-section{gap:4px;transform:scale(.92);transform-origin:center}.clock-container .step{grid-template-columns:42px minmax(0,1fr)}}@media (max-width: 460px){.clock-container .flip-section{transform:scale(.78)}.clock-container .clock-display{min-height:280px}}