.main-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:calc(100% - 60px);padding:20px;box-sizing:border-box;color:#e6edf3;position:relative;background-color:#18181B}.main-content:fullscreen{background-color:#18181B;height:100vh;padding:10px}.main-content:fullscreen .clock-selector{display:none}.main-content:fullscreen .relaxing-instructions{display:none}.main-content:fullscreen #date-display{font-size:2vw;margin-bottom:5vh}.main-content:fullscreen #digital-clock-display{font-size:clamp(4rem,14vw,16rem)}.main-content:fullscreen #flip-clock-display{--card-width:10vw;--card-height:15vw;--font-size:12vw;--separator-gap:2vw;--separator-dot-size:1.5vw}.main-content:fullscreen #relaxing-clock-display{font-size:clamp(4rem,14vw,16rem)}.main-content:fullscreen #relaxing-clock-display .colon{gap:calc(clamp(5rem, 16vw, 20rem) / 10);height:calc(clamp(5rem, 16vw, 20rem) * .6)}.main-content:fullscreen #relaxing-clock-display .colon-dot{width:calc(clamp(5rem, 16vw, 20rem) / 10);height:calc(clamp(5rem, 16vw, 20rem) / 10)}.clock-display-area{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;width:100%}.clock-container{display:none;width:100%}.clock-container.active{display:flex;justify-content:center;align-items:center;flex-direction:column}#date-display{font-size:18px;font-weight:500;margin-bottom:10px;color:#8D96A0;text-align:center}.clock-selector{margin-top:20px;padding-bottom:20px;display:flex;gap:12px;flex-shrink:0}.clock-selector button{font-size:14px;font-weight:500;background-color:transparent;color:#8D96A0;border:1px solid #30363d;padding:5px 18px;border-radius:8px;cursor:pointer;transition:all .2s ease}.clock-selector button:hover{border-color:#3B82F6;color:#e6edf3}.clock-selector button.active{background-color:#3B82F6;color:white;border-color:#3B82F6}#digital-clock-display{font-weight:700;line-height:1;white-space:nowrap;font-size:clamp(3rem,12vw,8rem);font-variant-numeric:tabular-nums}@media (max-width:600px){#digital-clock-display{font-size:clamp(2.5rem,12vw,6rem)}}#flip-clock-display{--card-width:clamp(35px,12vw,70px);--card-height:clamp(50px,18vw,100px);--font-size:clamp(32px,10vw,60px);--separator-gap:clamp(5px,2vw,10px);--separator-dot-size:clamp(4px,1.5vw,8px);display:flex;align-items:center;gap:var(--separator-gap);perspective:1200px}.flip-card{position:relative;width:var(--card-width);height:var(--card-height);font-size:var(--font-size);font-weight:600;text-align:center;color:#ccc}.flip-card .bottom,.flip-card .bottom-flip,.flip-card .top,.flip-card .top-flip{position:absolute;width:100%;height:50%;left:0;background:#333;border-radius:10px;overflow:hidden}.flip-card .top,.flip-card .top-flip{top:0;line-height:var(--card-height);border-bottom:1px solid #000}.flip-card .bottom,.flip-card .bottom-flip{bottom:0;line-height:0}.flip-card .bottom-flip,.flip-card .top-flip{backface-visibility:hidden;z-index:2}.flip-card .top-flip{transform-origin:bottom}.flip-card .bottom-flip{transform-origin:top;transform:rotateX(90deg)}.flip-card.go .top-flip{animation:flip-top .4s ease-in}.flip-card.go .bottom-flip{animation:flip-bottom .4s ease-out .4s}@keyframes flip-top{to{transform:rotateX(-90deg)}}@keyframes flip-bottom{to{transform:rotateX(0deg)}}#flip-clock-display .separator{display:flex;flex-direction:column;gap:var(--separator-dot-size)}#flip-clock-display .separator-dot{width:var(--separator-dot-size);height:var(--separator-dot-size);background-color:#2a2a2a;border-radius:50%}#relaxing-clock-display{font-family:Orbitron,sans-serif;font-weight:700;display:flex;align-items:center;font-size:clamp(3.5rem,14vw,9rem);font-variant-numeric:tabular-nums;letter-spacing:normal;line-height:1}.main-content[data-mode=relaxing] .clock-display-area{flex-grow:0;margin-bottom:0}#relaxing-hours,#relaxing-minutes,#relaxing-seconds{display:inline-block;width:2ch;text-align:center;box-sizing:border-box;transition:width .1s ease-out}#relaxing-hours{color:var(--accent-color,#ff3c3c);cursor:pointer}#relaxing-clock-display .colon{display:flex;flex-direction:column;justify-content:center;gap:calc(clamp(3.5rem, 14vw, 9rem) / 10);height:calc(clamp(3.5rem, 14vw, 9rem) * .6);width:.2ch;margin:0;transition:width .1s ease-out,margin .1s ease-out}#relaxing-clock-display .colon-dot{width:calc(clamp(3.5rem, 14vw, 9rem) / 10);height:calc(clamp(3.5rem, 14vw, 9rem) / 10);background-color:#e6edf3;border-radius:50%}#relaxing-am-pm{font-size:clamp(1.2rem,4vw,3rem);font-family:Rajdhani,sans-serif;margin-left:.25em;align-self:flex-end;padding-bottom:calc(clamp(3.5rem, 14vw, 9rem) * .1);color:#8D96A0;min-width:3ch;text-align:left}.relaxing-instructions{display:none;color:#8D96A0;font-size:14px;z-index:10}.relaxing-instructions p{margin:0}.relaxing-instructions.normal-mode{display:block;text-align:center;margin-top:8px}.relaxing-instructions.fullscreen-mode{display:block;position:absolute;bottom:20px;right:30px;font-size:15px;text-align:right}