.clock-app{--clock-inner: var(--color-amber-500);--clock-outer: var(--color-indigo-500);--clock-mins: var(--color-cyan-600);--clock-ink: var(--color-gray-900);--clock-face: #fffdf7;width:100%;max-width:28rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);font-family:var(--font-body);color:var(--clock-ink)}.clock-app *,.clock-app *:before,.clock-app *:after{box-sizing:border-box}.clock-app .levels{display:flex;width:100%;gap:var(--space-3xs);padding:var(--space-3xs);background:var(--color-surface);border:var(--border-style) 1px var(--color-border);border-radius:var(--radius-lg)}.clock-app .levels button{flex:1;border:none;background:transparent;color:var(--color-text);font:inherit;font-weight:var(--font-weight-6);line-height:1.2;padding:var(--space-2xs) var(--space-3xs);border-radius:var(--radius-md);cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease)}.clock-app .levels button .tag{display:block;font-size:var(--step--2);font-weight:var(--font-weight-4);opacity:.7;margin-top:2px}.clock-app .levels button[aria-pressed=true]{background:var(--color-background);color:var(--color-text);box-shadow:var(--shadow-sm)}.clock-app .levels button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.clock-app .stage{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-md) var(--space-md);border-radius:var(--radius-2xl);overflow:hidden;background:linear-gradient(180deg,#1a2350,#3a4a8c);transition:background 1.2s ease;box-shadow:var(--shadow-lg)}.clock-app .sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.clock-app .orb{position:absolute;width:74px;height:74px;border-radius:50%;left:50%;top:50%;margin:-37px;transition:transform 1.1s cubic-bezier(.3,.7,.3,1),opacity .9s;will-change:transform}.clock-app .sun{background:radial-gradient(circle at 38% 35%,#fff3b0,#ffd23f 55%,#ffac1c);box-shadow:0 0 60px 18px #ffc84680}.clock-app .moon{background:radial-gradient(circle at 38% 35%,#fff,#dfe6ff 60%,#aeb9f0);box-shadow:0 0 44px 10px #becdff59}.clock-app .readout{position:relative;z-index:1;width:100%;text-align:center;padding:2rem var(--space-md) var(--space-2xs);border-radius:var(--radius-xl);background:color-mix(in srgb,white 92%,transparent);backdrop-filter:blur(6px);box-shadow:var(--shadow-md)}.clock-app .big{font-family:var(--font-display, var(--font-body));font-weight:var(--font-weight-8);font-size:clamp(2.1rem,11vw,3rem);line-height:1.05;color:var(--clock-outer);font-variant-numeric:tabular-nums}.clock-app .twelve{font-weight:var(--font-weight-7);font-size:clamp(1rem,4.5vw,1.25rem);color:var(--clock-inner);margin-top:2px}.clock-app .moment{font-weight:var(--font-weight-7);font-size:var(--step--1);color:color-mix(in srgb,var(--clock-ink) 60%,transparent);margin-top:3px;text-transform:uppercase;letter-spacing:.12em}.clock-app .clock-card{position:relative;z-index:1;width:min(80%,300px);aspect-ratio:1;border-radius:50%;background:var(--clock-face);box-shadow:0 18px 50px #0a102859,inset 0 0 0 8px #fff;touch-action:none}.clock-app svg{width:100%;height:100%;display:block;overflow:visible}.clock-app svg text{user-select:none;-webkit-touch-callout:none}.clock-app .num-out{font-family:var(--font-display, var(--font-body));font-weight:var(--font-weight-7);fill:var(--clock-outer);font-size:14px;text-anchor:middle;dominant-baseline:central}.clock-app .num-in{font-family:var(--font-display, var(--font-body));font-weight:var(--font-weight-8);fill:var(--clock-inner);font-size:25px;text-anchor:middle;dominant-baseline:central}.clock-app .num-min{font-weight:var(--font-weight-7);fill:var(--clock-mins);font-size:10.5px;text-anchor:middle;dominant-baseline:central}.clock-app .hand{stroke-linecap:round;cursor:grab}.clock-app .c-hourHand{stroke:var(--clock-inner)}.clock-app .c-minHand{stroke:var(--clock-outer)}.clock-app .hand.dragging{cursor:grabbing}.clock-app .hand-hit{stroke:transparent;stroke-width:46;cursor:grab;fill:none}.clock-app .pivot{fill:var(--clock-ink)}.clock-app .pivot-dot{fill:#fff}.clock-app .lit{filter:drop-shadow(0 0 6px currentColor)}.clock-app circle.tick{fill:#1b244029}.clock-app .c-outer,.clock-app .c-minNums,.clock-app .leg-out,.clock-app .leg-min{transition:opacity .25s}.clock-app.lvl-medium .c-minNums,.clock-app.lvl-medium .leg-min,.clock-app.lvl-hard .c-minNums,.clock-app.lvl-hard .leg-min,.clock-app.lvl-hard .c-outer,.clock-app.lvl-hard .leg-out,.clock-app.lvl-hard .c-d24,.clock-app.lvl-hard .c-d12{display:none}.clock-app .legend{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;font-weight:var(--font-weight-6);font-size:var(--step--1);color:var(--color-text)}.clock-app .legend span{display:inline-flex;align-items:center;gap:var(--space-3xs)}.clock-app .dot{width:12px;height:12px;border-radius:50%}.clock-app .dot.in{background:var(--clock-inner)}.clock-app .dot.out{background:var(--clock-outer)}.clock-app .dot.min{background:var(--clock-mins)}.clock-app .corner{position:absolute;top:var(--space-3xs);z-index:2;font:inherit;font-weight:var(--font-weight-7);font-size:var(--step--1);line-height:1;color:#fff;border:none;border-radius:var(--radius-full);padding:5px 10px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform 80ms var(--ease),filter .12s var(--ease)}.clock-app .corner:hover{filter:brightness(1.05)}.clock-app .corner:active{transform:translateY(1px)}.clock-app .corner:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.clock-app .ampm{right:var(--space-3xs);background:var(--clock-outer)}.clock-app .ampm.pm{background:var(--color-indigo-800)}.clock-app .quiz{left:var(--space-3xs);background:var(--clock-inner)}.clock-app.is-quiz .quiz{display:none}.clock-app .quiz-prompt{position:relative;z-index:1;width:100%;display:none;align-items:center;justify-content:center;gap:var(--space-sm);flex-wrap:wrap;padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-lg);background:color-mix(in srgb,white 92%,transparent);backdrop-filter:blur(6px);box-shadow:var(--shadow-sm)}.clock-app.is-quiz .quiz-prompt{display:flex}.clock-app .qp-label{font-weight:var(--font-weight-6);font-size:var(--step-0);color:var(--clock-ink)}.clock-app .qp-label strong{font-family:var(--font-display, var(--font-body));font-weight:var(--font-weight-8);font-size:var(--step-2);color:var(--clock-outer);font-variant-numeric:tabular-nums}.clock-app .qp-check{font:inherit;font-weight:var(--font-weight-7);color:#fff;background:var(--color-emerald-600);border:none;border-radius:var(--radius-md);padding:var(--space-2xs) var(--space-md);cursor:pointer;box-shadow:var(--shadow-sm);transition:filter .12s var(--ease),transform 80ms var(--ease)}.clock-app .qp-check:hover{filter:brightness(1.05)}.clock-app .qp-check:active{transform:translateY(1px)}.clock-app .qp-check:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.clock-app .qp-stop{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;width:20px;height:20px;padding:0;font:inherit;font-size:12px;font-weight:var(--font-weight-6);line-height:1;color:var(--color-background);background:color-mix(in srgb,white 92%,transparent);border:0;border-radius:var(--radius-full);cursor:pointer;transition:filter .12s var(--ease),transform 80ms var(--ease)}.clock-app .qp-stop:hover{filter:brightness(.7)}.clock-app .qp-stop:active{transform:scale(.92)}.clock-app .qp-stop:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.clock-app .toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);z-index:4;pointer-events:none;width:max-content;max-width:88%;text-align:center;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);font-weight:var(--font-weight-7);font-size:var(--step-0);line-height:1.35;color:#fff;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease)}.clock-app .toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.clock-app .toast.win{background:var(--color-emerald-600)}.clock-app .toast.miss{background:color-mix(in srgb,var(--color-error, #e0563f) 92%,black)}.clock-app.is-fullscreen{max-width:34rem}.clock-app.is-fullscreen .clock-card{width:min(80%,420px,46vh)}.clock-app.is-fullscreen .big{font-size:clamp(3rem,11vw,4.5rem)}@media(prefers-reduced-motion:reduce){.clock-app .stage,.clock-app .orb,.clock-app button.act{transition:none!important}}