#clock-app{--ui-bg:#0b1020;--ui-fg:#e8eefc;--panel:rgba(20, 24, 40, 0.55);--accent:#288efc;--ok:#21c16b;--focus:#ffe08a;--ok-bg:#16a34a;--ok-bd:#0f6b32;--ok-fg:#ffffff;--bad-bg:#dc2626;--bad-bd:#991b1b;--bad-fg:#ffffff;--toolbar-h:96px;--app-h:90vh;--below-clock:190px;min-height:var(--app-h);width:100%;margin:0 0 24px;padding:0;overflow:hidden;position:relative;background:var(--ui-bg);color:var(--ui-fg);font:16px/1.4 system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif}#clock-app:fullscreen{--app-h:100vh;width:100vw;margin:0;overflow-y:auto}#clock-app button{cursor:pointer}#clock-app .hidden{display:none!important}.stretch-btn{position:absolute;top:12px;right:12px;z-index:20;background:var(--accent);color:#fff;border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3)}.stretch-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.stretch-btn svg{width:24px;height:24px;fill:currentColor}.stretch-btn path.enter{display:block}.stretch-btn path.exit{display:none}.stretch-btn.fullscreen path.enter{display:none}.stretch-btn.fullscreen path.exit{display:block}.quiz-day-period{position:absolute;top:16px;left:16px;z-index:15;display:flex;align-items:center;gap:9px;min-height:42px;padding:7px 11px;border:1px solid rgba(255,255,255,.38);border-radius:8px;background:rgba(11,16,32,.68);box-shadow:0 4px 14px rgba(0,0,0,.2);color:#fff;font-size:16px;font-weight:650;line-height:1.2;backdrop-filter:blur(7px)}.quiz-day-period svg{width:26px;height:26px;flex:none;color:#ffe08a}.quiz-day-period [data-day-period-icon]{display:none}.quiz-day-period[data-period=afternoon] [data-day-period-icon=afternoon],.quiz-day-period[data-period=evening] [data-day-period-icon=evening],.quiz-day-period[data-period=morning] [data-day-period-icon=morning],.quiz-day-period[data-period=night] [data-day-period-icon=night]{display:block}.quiz-day-period[data-period=evening] svg{color:#ffc078}.quiz-day-period[data-period=night] svg{color:#dbe7ff}.clock-scene{position:absolute;inset:0;overflow:hidden;width:100%;height:100%}.clock-scene svg{width:100%;height:100%;display:block}.clock-ui{position:relative;box-sizing:border-box;min-height:var(--app-h);display:grid;place-items:center;padding:16px;padding-bottom:calc(var(--toolbar-h) + 16px + env(safe-area-inset-bottom))}.clock-wrap{display:grid;gap:10px;place-items:center;max-width:min(92vmin,860px)}#clock{width:max(160px,min(86vmin,820px,calc(var(--app-h) - var(--toolbar-h) - var(--below-clock))));height:max(160px,min(86vmin,820px,calc(var(--app-h) - var(--toolbar-h) - var(--below-clock))));touch-action:none;filter:drop-shadow(0 8px 24px rgba(0, 0, 0, .45));outline:0}#clock:focus-visible{outline:3px solid var(--focus);border-radius:50%}#clock.manual{filter:drop-shadow(0 8px 24px rgba(255, 0, 0, .2))}#clock .tip{cursor:grab}#clock text{user-select:none}#clock text.min-number,#clock text.pm-number{transition:opacity .5s ease-in-out}#clock.quiz-explain .quiz-hour-hand{stroke:#b45309;filter:drop-shadow(0 0 2px rgba(255, 255, 255, .9))}#clock.quiz-explain .quiz-minute-hand{stroke:#145dcc;stroke-width:3;filter:drop-shadow(0 0 2px rgba(255, 255, 255, .9))}#digital{font-size:clamp(18px, 3vw, 28px);font-weight:700;background:#000;color:#fff;padding:4px 8px;border-radius:6px;font-family:monospace,sans-serif}#mode-indicator{font-size:14px;font-weight:600;color:#fff;text-align:center;margin-top:-4px;background:var(--panel);padding:4px 8px;border-radius:6px}#mode-indicator.quiz-mode{display:none}#verbal{font-size:clamp(16px, 2.6vw, 24px);font-weight:600;background:#000;color:#fff;padding:4px 8px;border-radius:6px;text-align:center}.clock-toolbar{position:absolute;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;background:var(--panel);backdrop-filter:blur(8px);padding:10px 12px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.35);z-index:10}.clock-toolbar button{border:none;border-radius:10px;padding:10px 14px;font-weight:700;font-size:16px;background:var(--accent);color:#fff;min-width:44px;min-height:44px}.clock-toolbar button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.clock-toolbar #auto:disabled{opacity:.55;cursor:not-allowed;background:#65708a}.clock-toolbar .toggle-on{background:#16a34a}#clock-app.quiz-active{height:auto;min-height:90vh;overflow:hidden}#clock-app.quiz-active .clock-toolbar{display:none}#clock-app.quiz-active .clock-ui{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:auto;min-height:90vh;padding:16px}#clock-app.quiz-active .clock-wrap{flex:none;margin-block:auto}#clock-app.quiz-active #clock{width:min(52vh,72vw,560px);height:min(52vh,72vw,560px)}#clock-app.quiz-active.quiz-feedback-visible #clock{width:min(38vh,62vw,430px);height:min(38vh,62vw,430px)}#clock-app.quiz-active:fullscreen{height:100vh;min-height:100vh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}#clock-app.quiz-active:fullscreen .clock-ui{min-height:100%}#quiz-panel{display:grid;gap:12px;place-items:center;background:var(--panel);padding:12px 14px;border-radius:12px;backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.35);width:min(92vw,720px);margin:0 auto}#quiz-q{font-weight:700;text-align:center}.quiz-learning-progress{display:grid;gap:6px;width:100%;color:#fff;font-size:14px}.quiz-learning-progress__labels{display:flex;justify-content:space-between;gap:16px}#quiz-skill-label{font-weight:700}#quiz-mastery-summary{opacity:.88;white-space:nowrap}#quiz-skill-progress{display:grid;grid-template-columns:repeat(7,minmax(18px,1fr));gap:4px;width:100%}.quiz-progress-segment{height:5px;border-radius:3px;background:rgba(255,255,255,.22)}.quiz-progress-segment.is-available{background:rgba(255,255,255,.46)}.quiz-progress-segment.is-mastered{background:var(--ok)}.quiz-progress-segment.is-current{box-shadow:0 0 0 2px var(--focus)}.quiz-answers{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:10px;width:100%}.quiz-answers button{background:#fff;color:#000;border:none;border-radius:12px;padding:12px 16px;font-weight:700;font-size:20px;min-height:44px}.quiz-answers button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.quiz-answers button[disabled]{opacity:1}.quiz-answers button.correct,.quiz-answers button.wrong{outline:0;background-size:12px 12px;box-shadow:0 0 0 3px rgba(0,0,0,.15) inset,0 2px 8px rgba(0,0,0,.25)}.quiz-answers button.correct{background-color:var(--ok-bg);color:var(--ok-fg);border:2px solid var(--ok-bd);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.15) 0 10%,transparent 10% 20%)}.quiz-answers button.wrong{background-color:var(--bad-bg);color:var(--bad-fg);border:2px solid var(--bad-bd);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 10%,transparent 10% 20%)}.quiz-answers button.correct::before,.quiz-answers button.wrong::before{display:inline-block;margin-right:.5ch;font-weight:900}.quiz-answers button.correct::before{content:"✓"}.quiz-answers button.wrong::before{content:"✕"}#score{font-size:14px;opacity:.95}#quiz-feedback{width:100%;box-sizing:border-box;border-left:4px solid var(--focus);padding:10px 12px;background:rgba(255,255,255,.94);color:#111827;font-size:15px;line-height:1.5;text-align:left}#quiz-feedback span,#quiz-feedback strong{display:block}#quiz-feedback strong{margin-bottom:3px}.quiz-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}#exit-quiz,#next-q,#reset-quiz-progress,#restart-quiz{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:700;font-size:18px;min-height:44px;min-width:44px}#exit-quiz:focus-visible,#next-q:focus-visible,#reset-quiz-progress:focus-visible,#restart-quiz:focus-visible{outline:3px solid var(--focus);outline-offset:2px}#reset-quiz-progress{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5)}.quiz-live{position:absolute;left:-9999px}@media (max-width:480px){.clock-wrap{max-width:none}#quiz-panel{width:calc(100% - 32px)}.quiz-answers{grid-template-columns:1fr}}@media (max-width:640px){#clock-app{--app-h:100vh}.clock-ui{place-items:start center;padding-top:calc(8px + env(safe-area-inset-top))}#clock-app.quiz-active{min-height:100vh}#clock-app.quiz-active .clock-ui{min-height:100vh;padding-bottom:calc(24px + env(safe-area-inset-bottom))}#clock-app.quiz-active #clock{width:min(86vmin,420px);height:min(86vmin,420px)}#clock-app.quiz-active.quiz-day-period-visible .clock-ui{padding-top:calc(54px + env(safe-area-inset-top))}.clock-wrap{margin-top:4px}.quiz-day-period{top:10px;left:10px;min-height:38px;padding:5px 8px;font-size:15px}.quiz-day-period svg{width:23px;height:23px}.quiz-learning-progress__labels{gap:8px;font-size:13px}#clock .tip{r:16}}@media (max-height:560px){.clock-toolbar{top:max(12px,env(safe-area-inset-top));bottom:auto}#clock-app:not(.quiz-active) .clock-ui{padding-top:calc(var(--toolbar-h) + 24px + env(safe-area-inset-top));padding-bottom:16px}}@media (prefers-reduced-motion:reduce){#scene *{animation:none!important}}.clock-help{max-width:75ch}