@import"https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&family=Neucha&display=swap";:root{--background: #ffffff;--foreground: #333333;--card: #ffffff;--card-foreground: #333333;--popover: #ffffff;--popover-foreground: #333333;--primary: #333333;--primary-foreground: #ffffff;--secondary: #e5e5e5;--secondary-foreground: #333333;--muted: #f0efef;--muted-foreground: #6b6b6b;--accent: #e5e5e5;--accent-foreground: #333333;--destructive: #d64545;--destructive-foreground: #ffffff;--border: #333333;--input: #333333;--ring: #d4d0d4;--chart-1: #333333;--chart-2: #6b6b6b;--chart-3: #d64545;--chart-4: #9a9a9a;--chart-5: #b8b8b8;--sidebar: #ffffff;--sidebar-foreground: #333333;--sidebar-primary: #333333;--sidebar-primary-foreground: #ffffff;--sidebar-accent: #e5e5e5;--sidebar-accent-foreground: #333333;--sidebar-border: #333333;--sidebar-ring: #d4d0d4;--radius: .5rem;--doodle-radius-button: 12% 8% 4% 59% / 0% 14% 100% 10%;--doodle-radius-card: 24% 6% 12% 0% / 8% 21% 17% 10%;--doodle-radius-input: 70% 0% 6% 10% / 5% 0% 14% 10%;--doodle-radius-modal: 0% 100% 0% 10% / 0% 6% 0% 14%;--doodle-radius-nav: 0% 0% 22% 0% / 0% 0% 19% 0%;--doodle-radius-media: 14% 0% 2% 0% / 2% 0% 48% 0%;--doodle-radius-popover: 8% 22% 6% 20% / 20% 6% 24% 8%;--doodle-radius-pill: 45% 55% 40% 60% / 55% 45% 55% 45%;--doodle-radius-badge: 40% 12% 44% 10% / 20% 44% 12% 40%;--doodle-radius-avatar: 62% 38% 46% 54% / 54% 44% 56% 46%;--doodle-focus-glow: 0 0 0 5px var(--ring);--font-doodle-body: "Neucha", ui-rounded, "Comic Sans MS", cursive, sans-serif;--font-doodle-display: "Cabin Sketch", "Neucha", ui-rounded, cursive, sans-serif}.dark{--background: #1c1b1f;--foreground: #f2f0f0;--card: #242329;--card-foreground: #f2f0f0;--popover: #242329;--popover-foreground: #f2f0f0;--primary: #f5f5f5;--primary-foreground: #1c1b1f;--secondary: #2c2b31;--secondary-foreground: #f2f0f0;--muted: #2c2b31;--muted-foreground: #a8a5ad;--accent: #34333a;--accent-foreground: #f2f0f0;--destructive: #e2686b;--destructive-foreground: #1c1b1f;--border: #e5e5e5;--input: #e5e5e5;--ring: #5a5860;--chart-1: #f5f5f5;--chart-2: #a8a5ad;--chart-3: #e2686b;--chart-4: #7c7a82;--chart-5: #555359;--sidebar: #242329;--sidebar-foreground: #f2f0f0;--sidebar-primary: #f5f5f5;--sidebar-primary-foreground: #1c1b1f;--sidebar-accent: #34333a;--sidebar-accent-foreground: #f2f0f0;--sidebar-border: #e5e5e5;--sidebar-ring: #5a5860}:root{--bg: var(--background);--bg-alt: var(--secondary);--card-shade: color-mix(in srgb, var(--card) 88%, var(--foreground) 12%);--digit: var(--card-foreground);--ink: var(--foreground);--text: var(--muted-foreground);--quiet: color-mix(in srgb, var(--muted-foreground) 72%, transparent);--card-w: min(128px, max(34px, calc((100vw - 3rem) / 8.4)));--card-h: min(188px, max(52px, calc(var(--card-w) * 1.45)));--digit-size: min(150px, max(32px, calc(var(--card-w) * 1.05)));--card-gap: min(9px, max(2px, calc(var(--card-w) * .07)));--clock-gap: min(22px, max(4px, calc(var(--card-w) * .16)));--ink-border: min(2.5px, max(1.5px, calc(var(--card-w) * .04)));--controls-h: 5.5rem;--flip-ms: .26s}*{box-sizing:border-box}html,body{margin:0;min-height:100%;min-height:100dvh}body{font-family:var(--font-doodle-body);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}.app{position:relative;min-height:100dvh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(var(--controls-h) + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left));background:radial-gradient(120% 120% at 50% 0%,var(--bg-alt) 0%,var(--bg) 72%),repeating-linear-gradient(-12deg,transparent,transparent 11px,color-mix(in srgb,var(--border) 4%,transparent) 11px,color-mix(in srgb,var(--border) 4%,transparent) 12px);transition:background .4s ease,color .2s ease}.stage{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3.5vh,48px);width:min(100%,960px);max-width:100%}.brand{font-family:var(--font-doodle-display);font-size:clamp(1.15rem,4.5vw,2rem);font-weight:700;letter-spacing:.02em;color:var(--ink);margin:0;line-height:1.1;text-align:center;padding-inline:8px}.clock{display:flex;align-items:center;justify-content:center;gap:var(--clock-gap);width:100%;max-width:100%;-webkit-user-select:none;user-select:none}.flip-group{display:flex;gap:var(--card-gap)}.flip-sep{display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2.4vh,26px);padding:0 clamp(2px,.4vw,6px)}.flip-sep span{width:min(13px,max(5px,calc(var(--card-w) * .1)));height:min(13px,max(5px,calc(var(--card-w) * .1)));border-radius:var(--doodle-radius-avatar);background:var(--primary);opacity:.9}.flip{position:relative;width:var(--card-w);height:var(--card-h);perspective:320px;font-family:var(--font-doodle-display);font-size:var(--digit-size);font-weight:700;font-variant-numeric:tabular-nums;filter:drop-shadow(3px 5px 0 color-mix(in srgb,var(--border) 18%,transparent))}.flip__top,.flip__bottom,.flip__leaf--top,.flip__leaf--bottom{position:absolute;left:0;right:0;height:50%;overflow:hidden;display:flex;justify-content:center;background:var(--card);color:var(--digit);border-left:var(--ink-border) solid var(--border);border-right:var(--ink-border) solid var(--border);backface-visibility:hidden}.flip__top,.flip__leaf--top{top:0;align-items:flex-start;border-top:var(--ink-border) solid var(--border);border-radius:18% 22% 0 0/28% 32% 0 0;box-shadow:inset 0 1px color-mix(in srgb,var(--foreground) 6%,transparent)}.flip__bottom,.flip__leaf--bottom{bottom:0;align-items:flex-end;background:var(--card-shade);border-bottom:var(--ink-border) solid var(--border);border-radius:0 0 20% 18%/0 0 34% 28%;box-shadow:inset 0 -1px color-mix(in srgb,var(--foreground) 10%,transparent)}.flip:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-1px);background:color-mix(in srgb,var(--border) 55%,transparent);z-index:5;pointer-events:none}.flip span{line-height:var(--card-h);display:block}.flip__leaf--top,.flip__leaf--bottom{z-index:3}.flip__leaf--top{transform-origin:50% 100%;transform:rotateX(-90deg)}.flip__leaf--bottom{transform-origin:50% 0%;transform:rotateX(90deg)}.flip.flipping .flip__leaf--top{animation:flipTopDown var(--flip-ms) ease-in forwards}.flip.flipping .flip__leaf--bottom{animation:flipBottomDown var(--flip-ms) ease-out var(--flip-ms) forwards}@keyframes flipTopDown{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flipBottomDown{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.setup{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.4vh,24px);width:min(100%,520px);padding-inline:4px;transition:opacity .32s ease,transform .32s ease}.time-inputs{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.5vw,8px);width:100%}.field{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.time-input{width:clamp(48px,18vw,92px);max-width:100%;text-align:center;font-family:var(--font-doodle-display);font-size:clamp(18px,5vw,34px);font-weight:700;font-variant-numeric:tabular-nums;padding:clamp(6px,1.2vw,8px) 4px;color:var(--digit);background:var(--card);border:2.5px solid var(--input);border-radius:var(--doodle-radius-input);outline:none;transition:border-color .16s ease,box-shadow .16s ease}.time-input:focus-visible{box-shadow:var(--doodle-focus-glow)}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-input{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.field-label{font-size:clamp(10px,2.8vw,12px);letter-spacing:.08em;text-transform:lowercase;color:var(--quiet)}.field-sep{font-family:var(--font-doodle-display);font-size:clamp(18px,5vw,34px);color:var(--quiet);padding-bottom:clamp(16px,3vh,22px)}.presets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;max-width:100%}.chip{border:2px solid var(--border);background:var(--card);color:var(--ink);border-radius:var(--doodle-radius-pill);padding:8px 14px;min-height:36px;font-family:inherit;font-size:clamp(13px,3.4vw,14px);cursor:pointer;transition:transform .15s ease,background .15s ease;touch-action:manipulation}.chip:hover{background:var(--secondary);transform:rotate(-1.5deg) scale(1.03)}.chip:focus-visible{outline:none;box-shadow:var(--doodle-focus-glow)}.controls{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent) 55%,transparent);flex-wrap:wrap;transition:opacity .4s ease,transform .4s ease}.controls-left,.controls-right{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-width:0}.btn{font-family:inherit;font-size:clamp(14px,3.5vw,15px);padding:10px 16px;min-height:40px;border-radius:var(--doodle-radius-button);border:2.5px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer;transition:transform .15s ease,background .15s ease,filter .15s ease;touch-action:manipulation}.btn:hover{background:var(--secondary);transform:rotate(.8deg)}.btn:focus-visible{outline:none;box-shadow:var(--doodle-focus-glow)}.btn-primary{background:var(--primary);border-color:var(--border);color:var(--primary-foreground);font-weight:700}.btn-primary:hover{filter:brightness(1.05);background:var(--primary)}.icon-btn{width:40px;height:40px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--doodle-radius-button);border:2.5px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer;font-size:16px;transition:transform .15s ease,background .15s ease;touch-action:manipulation}.icon-btn:hover{background:var(--secondary);transform:rotate(-2deg)}.icon-btn:focus-visible{outline:none;box-shadow:var(--doodle-focus-glow)}.volume{width:clamp(64px,18vw,96px);flex:0 1 auto;accent-color:var(--primary);cursor:pointer}.tick-select{font-family:inherit;font-size:clamp(13px,3.4vw,14px);padding:8px 10px;min-height:40px;max-width:min(160px,42vw);border-radius:var(--doodle-radius-input);border:2.5px solid var(--input);background:var(--card);color:var(--ink);cursor:pointer;outline:none;transition:box-shadow .15s ease}.tick-select:hover{background:var(--secondary)}.tick-select:focus-visible{box-shadow:var(--doodle-focus-glow)}.app[data-state=running] .setup,.app[data-state=complete] .setup{opacity:0;transform:translateY(8px);pointer-events:none;position:absolute}.app[data-state=running] #btn-start,.app[data-state=complete] #btn-start,.app[data-state=idle] #btn-pause,.app[data-state=complete] #btn-pause{display:none}.app.controls-hidden .controls{opacity:0;transform:translateY(12px);pointer-events:none}.app.controls-hidden{cursor:none}.app[data-state=complete] .clock{animation:completePulse 1.1s ease-in-out infinite}@keyframes completePulse{0%,to{filter:drop-shadow(3px 5px 0 color-mix(in srgb,var(--border) 18%,transparent))}50%{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--primary) 45%,transparent))}}@media (prefers-reduced-motion: reduce){.flip__leaf--top,.flip__leaf--bottom{display:none}.flip.flipping .flip__leaf--top,.flip.flipping .flip__leaf--bottom,.app[data-state=complete] .clock{animation:none}.chip:hover,.btn:hover,.icon-btn:hover{transform:none}}@media (max-width: 560px){:root{--controls-h: 7.75rem}.controls{justify-content:center;gap:10px}.controls-left,.controls-right{width:100%;justify-content:center}.tick-select{max-width:min(140px,48vw)}.volume{width:min(88px,28vw)}.flip{filter:drop-shadow(2px 3px 0 color-mix(in srgb,var(--border) 16%,transparent))}}@media (max-width: 380px){:root{--controls-h: 8.25rem}.presets{gap:6px}.chip{padding:7px 11px}.btn{padding:9px 12px}.controls-right{gap:6px}.volume{width:52px}.tick-select{max-width:96px;padding:6px;font-size:12px}.icon-btn{width:38px;height:38px}}@media (max-height: 520px){:root{--card-w: min(88px, max(30px, calc((100vw - 2.5rem) / 9)));--controls-h: 4.25rem}.app{justify-content:flex-start;padding-top:max(8px,env(safe-area-inset-top))}.stage{gap:10px}.brand{font-size:clamp(1rem,3.5vw,1.35rem)}.presets,.field-label{display:none}.field-sep{padding-bottom:0}.controls{padding-block:8px}}@media (max-width: 560px) and (max-height: 520px){:root{--controls-h: 5.5rem}}