@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/font-7.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/font-8.ttf) format('truetype');
}

:root{color-scheme:dark;--bg:#191617;--panel:#252022;--muted:#afa4a8;--accent:#ff6269;--line:#403539}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#fff4f5;font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button{transition:background .15s,transform .15s}button:active{transform:scale(.97)}button:disabled{cursor:default;opacity:.35}button svg{width:19px;height:19px}svg.icons{position:absolute;width:0;height:0}header{max-width:1184px;margin:auto;height:110px;display:flex;align-items:center;justify-content:space-between;padding:0 36px}.brand{display:flex;gap:3px;align-items:center;text-decoration:none;color:#fff4f5;font-family:Manrope,sans-serif;font-size:24px;font-weight:800;letter-spacing:-1.2px}.brand>svg{width:39px;height:33px;color:var(--accent);margin-right:9px}.brand>span:not(.brand-dot){font-weight:400}.brand-dot{font-size:11px;align-self:flex-start;margin:6px 0 0 4px}.share{display:flex;align-items:center;gap:9px;background:transparent;color:#f0e2e7;border:1px solid #4c3b42;border-radius:30px;padding:11px 18px;font-size:13px}.share:hover{background:var(--panel)}main{width:min(100% - 36px,464px);margin:17px auto 30px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.75px;color:var(--muted)}main>.eyebrow{text-align:center}.live-dot{display:inline-block;background:var(--accent);width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:1px}h1{font-family:Manrope,sans-serif;text-align:center;font-size:27px;letter-spacing:-1px;line-height:1.38;font-weight:600;margin:15px -10px 29px}h1 span{color:#b6a4aa}.timer-panel{background:var(--panel);border:1px solid #3d3236;border-radius:26px;padding:22px 24px 18px}.panel-top{display:flex;align-items:center;justify-content:space-between}.tag{font-size:9px;letter-spacing:1.5px;color:#d6bec7;font-weight:600}.sound{display:flex;align-items:center;gap:7px;color:#d6bec7;border:0;background:transparent;padding:6px 0 6px 8px;font-size:11px}.dial{width:300px;max-width:100%;aspect-ratio:1;position:relative;margin:20px auto 10px}.ring{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:3}.ring-track{stroke:#4c343b}#progress{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:911.062;stroke-dashoffset:0;transition:stroke-dashoffset .2s linear}.dial-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:3px}.timer-duck{width:48px;height:39px;color:var(--accent);margin-bottom:11px}#time{font-family:Manrope,sans-serif;font-size:72px;line-height:1.15;font-weight:500;letter-spacing:-4px;font-variant-numeric:tabular-nums;color:var(--accent)}.timer-label{font-size:9px;font-weight:500;letter-spacing:2px;margin-top:12px;color:#c9aab5}.timer-caption{text-align:center;font-size:12px;color:#bba6ae;height:18px;margin:0 0 22px}.start{display:flex;gap:11px;align-items:center;justify-content:center;width:100%;height:53px;border:1px solid #71404b;background:#3b252b;border-radius:13px;color:var(--accent);font-weight:600;font-size:15px}.start:hover{background:#4a2b33}#playIcon{font-size:12px}.panel-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;color:#b09aa3;font-size:10px}.panel-bottom button{border:0;background:none;color:#e8d5dc;font-size:11px;padding:7px 0}.panel-bottom button span{margin-left:3px}.count-panel{margin-top:17px;padding:21px 23px 17px;border:1px solid #403539;border-radius:24px}.count-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.count-top .eyebrow{font-size:9px;letter-spacing:1.5px}.count-line{display:flex;align-items:baseline;gap:11px;margin-top:4px}.count-line strong{font-family:Manrope,sans-serif;font-size:39px;line-height:1.2;font-weight:500;font-variant-numeric:tabular-nums}.count-line span{color:#b29da6;font-size:12px}.undo{border:0;background:transparent;color:#d4b8c4;font-size:20px;padding:13px 0 13px 14px;display:flex;gap:7px;align-items:center}.undo span{font-size:12px}.drink{width:100%;background:var(--accent);color:#231518;border:0;border-radius:13px;padding:0 23px;display:flex;justify-content:space-between;align-items:center;font-family:Manrope,sans-serif;font-weight:800;font-size:25px;height:76px}.drink:hover{background:#ff8389}.plus{font-size:33px;font-weight:400}.count-note{text-align:center;font-size:10px;color:#b49aa5;margin:13px 0 0}.session-footer{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#b59ba5;padding:12px 5px}.session-footer button{background:none;border:0;color:#cdb3be;font-size:11px;padding:10px 0}footer{display:flex;align-items:center;justify-content:center;gap:13px;margin:19px 0 14px}footer svg{width:29px;height:25px;color:#a38591}footer p{font-size:11px;line-height:1.75;margin:0;color:#d6bec8}footer p span{color:#b198a3}.device-note{font-size:9px;color:#b198a3;text-align:center;margin:14px 0 22px}#toast{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);max-width:calc(100% - 30px);width:max-content;background:#ffe0e3;color:#29171d;box-shadow:0 8px 35px #0006;border-radius:14px;padding:14px 22px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:10}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{background:#2c2126;border:1px solid #66414f;border-radius:23px;color:#fff4f5;padding:27px;max-width:360px;width:calc(100% - 36px)}dialog::backdrop{background:#0009;backdrop-filter:blur(6px)}dialog h2{margin:0;font-family:Manrope,sans-serif;font-size:23px}dialog p{font-size:14px;color:#c9acba;line-height:1.6}dialog>div{display:flex;gap:10px;margin-top:24px}dialog button{flex:1;border:1px solid #71404b;border-radius:10px;background:transparent;color:#f4dfe8;min-height:47px;font-size:13px}#confirmReset{background:var(--accent);color:#29171d;border:0}.quacking .timer-duck{animation:waddle .4s ease-in-out 3}.quacking .timer-caption{color:var(--accent)}@keyframes waddle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}@media(min-width:900px){main{margin-top:22px}header{height:100px}h1{margin-bottom:28px}}@media(max-width:500px){header{height:70px;padding:0 23px}.brand{font-size:21px}.brand>svg{width:33px}.share{font-size:11px;padding:9px 12px}.share svg{width:16px}main{margin-top:9px}h1{font-size:22px;margin:12px -10px 20px}.timer-panel{padding:17px 20px 13px}.dial{width:220px;margin:13px auto 5px}#time{font-size:58px}.timer-duck{width:39px;height:32px;margin-bottom:6px}.timer-label{font-size:8px;letter-spacing:1.5px;margin-top:9px}.timer-caption{margin-bottom:15px}.count-panel{padding:15px 19px 13px}.count-top{margin-bottom:13px}.drink{height:70px}.panel-bottom{font-size:9px}.device-note{line-height:1.6}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

.install-row{text-align:center;margin:18px 0}.install-row button{background:transparent;border:1px solid var(--line);border-radius:30px;padding:11px 20px;color:#e5cdd5;font-size:12px}.install-row p{font-size:10px;color:var(--muted);margin:9px 0}#installDialog ul{padding-left:20px;color:#d4b8c4;font-size:14px;line-height:1.7}#installDialog button{padding:0 20px}button[hidden]{display:none}

/* Sunset glass: warm light behind translucent, high-contrast controls. */
:root{--bg:#18151a;--accent:#ffd27c;--muted:#c2b2ac;--line:#ffffff24;--sunset:linear-gradient(115deg,#ffe28b 0%,#ffac62 48%,#ff5b4c 100%)}
body{background:#18151a;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 14% 18%,#e8ad3e27,transparent 49%),radial-gradient(ellipse at 90% 63%,#fb513a2d,transparent 48%),radial-gradient(ellipse at 45% 100%,#ae3e3c14,transparent 52%)}
body::after{content:"";position:fixed;width:270px;height:270px;left:calc(50% - 290px);top:190px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffdc7838,#f8993812 55%,transparent 71%);z-index:-1;pointer-events:none}
.brand>svg{color:#ffd47d}.live-dot{background:var(--sunset);box-shadow:0 0 16px #ffab6a66}
h1 span{color:#edc3a3}
.timer-panel,.count-panel{position:relative;background:linear-gradient(135deg,#ffffff12,#ffffff04),#242028d9;border:1px solid #ffffff25;box-shadow:inset 0 1px 0 #fff2,inset 0 -1px 0 #ffffff05,0 18px 50px #0003;overflow:hidden}
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){.timer-panel,.count-panel{background:linear-gradient(135deg,#ffffff13,#ffffff03),#231d254a;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}}
.timer-panel::before{content:"";position:absolute;left:8%;right:8%;height:1px;top:0;background:linear-gradient(90deg,transparent,#ffe3af8c,transparent);pointer-events:none}
.count-panel{background-color:#211b244d}
.share,.install-row button{background:#ffffff07;border-color:#ffffff25;box-shadow:inset 0 1px 0 #ffffff0e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.share:hover,.install-row button:hover{background:#ffffff12}
#progress{stroke:url(#sunset-ring);stroke-width:3.5;filter:drop-shadow(0 0 5px #ffb96b30)}
.ring-track{stroke:#ffffff14}
#time{color:#ffbd75;background:var(--sunset);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600}
.start{background:linear-gradient(115deg,#ffe28b13,#ff5b4c13);border-color:#ffdba335;color:#ffe0a5;box-shadow:inset 0 1px 0 #ffffff0c}
.start:hover{background:linear-gradient(115deg,#ffe28b25,#ff5b4c25)}
.drink,.drink:hover,#confirmReset{background:var(--sunset);color:#291b18;box-shadow:inset 0 1px 0 #ffffff70,0 5px 22px #ff884522}
.drink:hover{filter:brightness(1.08)}
.timer-caption{color:#d7c2b9;font-size:11px}.timer-label{color:#d4b9aa}.tag,.sound{color:#e4d3c5}.count-note,.device-note{color:#bda8a1}
dialog{background:linear-gradient(135deg,#3b2d2ff2,#241e28f5);border-color:#ffffff2c;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
#toast{background:linear-gradient(115deg,#fff0c8,#ffd2b9);color:#342018}
.mascot{display:block;width:106px;height:82px;flex-shrink:0;padding:0;margin:-4px 0 0;border:0;background:transparent;position:relative;isolation:isolate;cursor:pointer}
.mascot>svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 7px #0002)}
.mascot:hover{background:transparent}.mascot:active{transform:scale(.96)}
.duck-float{transform-origin:60px 70px;animation:duck-bob 3.6s ease-in-out infinite}
.duck-eyes{transform-origin:81px 33px;animation:duck-blink 5.4s infinite}
.duck-head{transform-origin:71px 48px}.duck-wing{transform-origin:43px 53px}.duck-beak{transform-origin:92px 41px}.duck-tail{transform-origin:30px 57px}
.duck-sparkles{opacity:0;transform-origin:60px 46px}.duck-shadow{animation:shadow-breathe 3.6s ease-in-out infinite}
.mascot.hello .duck-wing,.mascot.quack .duck-wing{animation:wing-wave .3s ease-in-out 5}
.mascot.hello .duck-head{animation:duck-tilt .6s ease-in-out 2}
.mascot.happy .duck-character{transform-origin:60px 70px;animation:happy-hop .55s ease-in-out 3}
.mascot.happy .duck-eyes{transform:scaleY(.15);animation:none}
.mascot.happy .duck-sparkles{animation:sparkle-pop .75s ease-out 2}
.mascot.quack .duck-beak{animation:bill-talk .25s ease-in-out 6}
.mascot.quack .duck-character{transform-origin:60px 70px;animation:happy-hop .45s ease-in-out 3}
.almost-quack .duck-tail{animation:tail-wiggle .25s ease-in-out infinite}
.duck-paused .duck-eyes{transform:scaleY(.2);animation:none}.duck-paused .duck-float{animation-duration:5s}
@keyframes duck-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes shadow-breathe{0%,100%{transform:scaleX(1);opacity:.22}50%{transform:scaleX(.88);opacity:.14}}
@keyframes duck-blink{0%,42%,46%,85%,89%,100%{transform:scaleY(1)}44%,87%{transform:scaleY(.1)}}
@keyframes wing-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-32deg)}}
@keyframes duck-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes happy-hop{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-7px) rotate(-7deg)}70%{transform:translateY(-2px) rotate(6deg)}}
@keyframes sparkle-pop{0%,100%{opacity:0;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}
@keyframes bill-talk{0%,100%{transform:rotate(0)}50%{transform:rotate(18deg)}}
@keyframes tail-wiggle{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}
@media(max-width:500px){.mascot{width:88px;height:68px;margin:-7px 0 -1px}.timer-label{margin-top:5px}#time{font-size:54px}.dial-content{padding-bottom:6px}.timer-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.mascot.happy .duck-eyes{transform:none}.duck-sparkles{display:none}*,*::before,*::after{animation:none!important;transition:none!important}}