:root{--bg-primary: #e0f2fe;--bg-secondary: #f0f9ff;--bg-gradient-start: #bfdbfe;--bg-gradient-end: #e0f2fe;--clock-face: #ffffff;--clock-border: #3b82f6;--clock-numbers: #1e40af;--hour-hand: #ef4444;--minute-hand: #3b82f6;--tick-major: #64748b;--tick-minor: #cbd5e1;--clock-center: #1e293b;--button-primary: #8b5cf6;--button-hover: #7c3aed;--button-selected: #6d28d9;--button-text: #ffffff;--correct-color: #22c55e;--correct-glow: rgba(34, 197, 94, .4);--incorrect-color: #f97316;--incorrect-glow: rgba(249, 115, 22, .3);--mode-bg: #fef3c7;--mode-border: #fbbf24;--mode-text: #92400e;--text-primary: #1e293b;--text-secondary: #475569;--text-light: #94a3b8}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,var(--bg-gradient-start) 0%,var(--bg-gradient-end) 100%);color:var(--text-primary);min-height:100vh;min-height:100dvh}#root{height:100%;width:100%}.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}button,a,[role=button]{-webkit-tap-highlight-color:transparent}html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}body{overscroll-behavior-y:contain}.clock-container{width:240px;height:240px;border-radius:50%;transition:box-shadow .3s ease,transform .3s ease;flex-shrink:0}.clock-face{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}.clock-bg{fill:var(--clock-border)}.clock-inner{fill:var(--clock-face)}.clock-number{font-size:14px;font-weight:700;fill:var(--clock-numbers);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.tick-major{stroke:var(--tick-major);stroke-width:2;stroke-linecap:round}.tick-minor{stroke:var(--tick-minor);stroke-width:1;stroke-linecap:round}.hand line{stroke-linecap:round;transition:stroke .2s ease}.hour-hand line{stroke:var(--hour-hand);stroke-width:6}.minute-hand line{stroke:var(--minute-hand);stroke-width:4}.hand.interactive{cursor:grab}.hand.interactive:active{cursor:grabbing}.hand-grab{fill:transparent;stroke:none}.hand.interactive:hover line{filter:brightness(1.1)}.clock-center{fill:var(--clock-center)}.clock-container.feedback-correct{animation:celebrate .6s ease-in-out;box-shadow:0 0 30px var(--correct-glow),0 0 60px var(--correct-glow)}.clock-container.feedback-incorrect{animation:shake .4s ease-in-out;box-shadow:0 0 20px var(--incorrect-glow)}@keyframes celebrate{0%,to{transform:scale(1)}25%{transform:scale(1.05)}50%{transform:scale(1.08)}75%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@media(max-width:480px){.clock-container{width:min(170px,calc(100vw - 24px));height:min(170px,calc(100vw - 24px))}.clock-number{font-size:11px}}@media(orientation:landscape)and (max-height:500px){.clock-container{width:180px;height:180px}.clock-number{font-size:11px}}@media(min-width:700px)and (min-height:550px){.clock-container{width:280px;height:280px}.clock-number{font-size:15px}}@media(min-width:1000px)and (min-height:600px){.clock-container{width:320px;height:320px}.clock-number{font-size:16px}}.number-pad{display:flex;flex-direction:column;gap:10px;padding:12px;background:#fffc;border-radius:14px;box-shadow:0 2px 8px #0000001a}.number-pad.disabled{opacity:.7;pointer-events:none}.pad-section{display:flex;flex-direction:column;gap:4px}.pad-label{font-size:.8rem;font-weight:600;color:var(--text-secondary);text-align:center;margin:0}.button-grid{display:grid;gap:6px;justify-content:center}.hours-grid,.minutes-grid{grid-template-columns:repeat(4,1fr)}.number-button{min-width:44px;min-height:44px;padding:6px;font-size:1rem;font-weight:600;color:var(--text-primary);background:#fff;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all .15s ease;touch-action:manipulation}.number-button:hover:not(:disabled){background:#f1f5f9;border-color:var(--button-primary)}.number-button:active:not(:disabled){transform:scale(.95)}.number-button.selected{background:var(--button-primary);border-color:var(--button-selected);color:#fff;box-shadow:0 2px 8px #8b5cf666}.number-button:disabled{opacity:.5;cursor:not-allowed}.submit-button{margin-top:4px;padding:10px 20px;font-size:1rem;font-weight:700;color:#fff;background:#94a3b8;border:none;border-radius:10px;cursor:not-allowed;transition:all .2s ease;touch-action:manipulation}.submit-button.ready{background:var(--button-primary);cursor:pointer;box-shadow:0 4px 12px #8b5cf64d}.submit-button.ready:hover{background:var(--button-hover);transform:translateY(-1px);box-shadow:0 6px 16px #8b5cf666}.submit-button.ready:active{transform:translateY(0)}@media(max-width:480px){.number-pad{padding:6px;gap:4px;width:calc(100vw - 16px);max-width:360px}.pad-section{gap:2px}.pad-label{font-size:.7rem}.button-grid{gap:3px}.number-button{min-width:36px;min-height:36px;font-size:.85rem;padding:2px;border-radius:8px}.hours-grid,.minutes-grid{grid-template-columns:repeat(4,1fr)}.submit-button{margin-top:2px;padding:8px 14px;font-size:.85rem}}@media(orientation:landscape)and (max-height:500px){.number-pad{padding:8px;gap:4px}.pad-section{gap:2px}.pad-label{font-size:.7rem}.button-grid{gap:3px}.number-button{min-width:36px;min-height:36px;font-size:.85rem;padding:3px;border-radius:8px}.hours-grid,.minutes-grid{grid-template-columns:repeat(6,1fr)}.submit-button{margin-top:2px;padding:8px 14px;font-size:.85rem}}@media(min-width:700px)and (min-height:550px){.number-pad{padding:14px;gap:10px}.hours-grid,.minutes-grid{grid-template-columns:repeat(6,1fr)}.number-button{min-width:50px;min-height:50px;font-size:1.1rem}.submit-button{padding:12px 24px;font-size:1.05rem}}.quiz-prompt{text-align:center;padding:8px;flex-shrink:0}.prompt-text{font-size:1.3rem;font-weight:700;color:var(--text-primary);margin:0 0 2px}.prompt-hint{font-size:.85rem;color:var(--text-secondary);margin:0}@media(max-width:480px){.quiz-prompt{padding:2px}.prompt-text{font-size:1rem;margin:0}.prompt-hint{font-size:.75rem}}@media(orientation:landscape)and (max-height:500px){.quiz-prompt{padding:4px}.prompt-text{font-size:1rem}.prompt-hint{font-size:.75rem}}@media(min-width:700px)and (min-height:550px){.prompt-text{font-size:1.5rem}.prompt-hint{font-size:.9rem}}.hamburger-button{position:fixed;top:12px;left:12px;z-index:1001;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:#fff;border:none;border-radius:10px;cursor:pointer;box-shadow:0 2px 8px #00000026;touch-action:manipulation}.hamburger-icon{display:flex;flex-direction:column;gap:5px;width:22px}.hamburger-icon span{display:block;height:3px;background:var(--text-primary);border-radius:2px;transition:all .2s ease}.sidebar-overlay{position:fixed;inset:0;background:#0006;z-index:999;animation:fadeIn .2s ease}.mode-sidebar{position:fixed;top:0;left:0;height:100vh;height:100dvh;width:200px;background:#fff;box-shadow:2px 0 12px #0000001a;z-index:1000;padding:70px 12px 20px;box-sizing:border-box;transform:translate(-100%);transition:transform .3s ease}.mode-sidebar.open{transform:translate(0)}.mode-nav{display:flex;flex-direction:column;gap:8px}.mode-button{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;font-size:.95rem;font-weight:600;color:var(--text-primary);background:transparent;border:2px solid transparent;border-radius:10px;cursor:pointer;transition:all .2s ease;touch-action:manipulation;text-align:left}.mode-button:hover{background:var(--mode-bg)}.mode-button.active{background:var(--mode-border);color:#78350f;box-shadow:0 2px 8px #fbbf244d}.mode-emoji{font-size:1.2rem;flex-shrink:0}.mode-label{white-space:nowrap}@media(min-width:700px){.hamburger-button,.sidebar-overlay{display:none}.mode-sidebar{transform:translate(0);padding-top:20px;box-shadow:2px 0 8px #0000000d}.mode-button{padding:14px 16px;font-size:1rem}}@media(min-width:1000px){.mode-sidebar{width:220px}.mode-button{padding:16px 18px;font-size:1.05rem}}@media(orientation:landscape)and (max-height:500px){.hamburger-button{top:8px;left:8px;width:38px;height:38px}.hamburger-icon{width:18px;gap:4px}.hamburger-icon span{height:2px}.mode-sidebar{width:180px;padding:50px 10px 12px}.mode-nav{gap:4px}.mode-button{padding:8px 10px;font-size:.85rem;gap:8px}.mode-emoji{font-size:1rem}}.time-display{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px;background:#ffffffe6;border-radius:12px;box-shadow:0 2px 8px #0000001a;flex-shrink:0}.time-label{font-size:.75rem;font-weight:500;color:var(--text-secondary)}.time-value{display:flex;align-items:center;font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums}.time-part{color:var(--text-light);transition:color .2s ease;min-width:50px;text-align:center}.time-part.filled{color:var(--text-primary)}.time-colon{color:var(--text-light);margin:0 2px}@media(max-width:480px){.time-display{padding:4px 10px;gap:1px}.time-label{font-size:.65rem}.time-value{font-size:1.4rem}.time-part{min-width:36px}}@media(orientation:landscape)and (max-height:500px){.time-display{padding:4px 10px}.time-label{font-size:.65rem}.time-value{font-size:1.4rem}.time-part{min-width:36px}}@media(min-width:700px)and (min-height:550px){.time-display{padding:10px 20px}.time-value{font-size:2.2rem}.time-part{min-width:56px}}.feedback-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s ease}.feedback-overlay.correct{background:#22c55ee6}.feedback-overlay.incorrect{background:#f97316e6}.feedback-content{text-align:center;color:#fff;padding:32px}.feedback-icon{width:80px;height:80px;margin:0 auto 16px;animation:popIn .3s ease}.feedback-icon svg{width:100%;height:100%}.feedback-text{font-size:2rem;font-weight:800;margin:0 0 8px;animation:slideUp .3s ease}.correct-answer{font-size:1.2rem;margin:0 0 8px;opacity:.9}.feedback-hint{font-size:.9rem;margin:0;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{transform:scale(0)}70%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:480px){.feedback-icon{width:64px;height:64px}.feedback-text{font-size:1.6rem}.correct-answer{font-size:1rem}}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:12px;box-sizing:border-box;overflow:hidden}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:4px 0;overflow:hidden;min-height:0}.clock-area{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.clock-section{display:flex;justify-content:center;align-items:center;flex-shrink:0}.controls-area{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.read-mode-controls,.set-mode-controls{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.check-button{padding:10px 24px;font-size:1rem;font-weight:700;color:#fff;background:var(--button-primary);border:none;border-radius:10px;cursor:pointer;transition:all .2s ease;touch-action:manipulation;box-shadow:0 4px 12px #8b5cf64d}.check-button:hover{background:var(--button-hover);transform:translateY(-2px);box-shadow:0 6px 16px #8b5cf666}.check-button:active{transform:translateY(0)}.drag-hint{font-size:.9rem;color:var(--text-secondary);text-align:center;margin:0}.skip-button{padding:8px 16px;font-size:.85rem;font-weight:600;color:var(--text-secondary);background:transparent;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:all .2s ease;touch-action:manipulation;flex-shrink:0}.skip-button:hover{background:#fff;border-color:var(--text-secondary)}@media(max-width:480px){.app{padding:36px 4px 4px}.app-main{gap:2px;padding:2px 0}.controls-area,.read-mode-controls,.set-mode-controls{gap:4px}.check-button{padding:8px 18px;font-size:.9rem}.skip-button{padding:4px 10px;font-size:.75rem}}@media(min-width:700px){.app{padding:16px 24px 16px 220px}.app-main{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:32px;padding:8px}.clock-area{flex:0 0 auto}.controls-area{flex:0 0 auto;gap:12px}.read-mode-controls,.set-mode-controls{min-width:320px;max-width:420px;gap:12px}.skip-button{margin-top:8px}.check-button{padding:12px 28px;font-size:1.05rem}}@media(min-width:1000px){.app{padding-left:240px}}@media(min-width:900px)and (min-height:550px){.app-main{gap:48px}.read-mode-controls,.set-mode-controls{max-width:450px}}@media(orientation:landscape)and (max-height:500px){.app{padding:6px 12px 6px 60px}.app-main{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:12px}.clock-area{flex:0 0 auto}.controls-area{flex:1;min-width:240px;max-width:320px;gap:4px}.read-mode-controls,.set-mode-controls{gap:4px}.skip-button{padding:4px 10px;font-size:.75rem}.check-button{padding:8px 16px;font-size:.9rem}}