*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#08070c;color:#fff;font-family:"Wanted Sans",system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit}#app{position:relative;width:100%;height:100%;isolation:isolate;background:#0b0910}#background,#customBg{position:absolute;inset:0}#background{z-index:-3;overflow:hidden;background:linear-gradient(150deg,#16284c,#382346 55%,#10272d);transition:background .65s ease}#customBg{background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity .6s ease}#customBg.on{opacity:1}
#app[data-theme="midnight"] #background{background:linear-gradient(145deg,#030711,#0a1020 56%,#02050b)}#app[data-theme="sunset"] #background{background:linear-gradient(145deg,#261423,#3c1c31 50%,#17131e)}#app[data-theme="ocean"] #background{background:linear-gradient(145deg,#052a3a,#074f61 55%,#061925)}#app[data-theme="mono"] #background{background:linear-gradient(145deg,#0b0b0c,#1b1b1d 55%,#060607)}
.glass-icon{border:1px solid #ffffff20;background:#0a0f1d66;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:inset 0 1px 0 #ffffff18,0 10px 35px #0004;display:grid;place-items:center}.top-btn{position:absolute;left:max(18px,env(safe-area-inset-left));top:max(18px,env(safe-area-inset-top));z-index:20;width:48px;height:48px;border-radius:50%}.top-btn svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.viewport{position:absolute;inset:0}.page{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:90px 24px 126px;opacity:0;pointer-events:none;transform:translateX(48px) scale(.97);filter:blur(8px);transition:opacity .32s ease,transform .5s cubic-bezier(.2,.82,.2,1),filter .35s}.page.active{opacity:1;pointer-events:auto;transform:none;filter:none}.page.exit-left{transform:translateX(-60px) scale(.965);opacity:0;filter:blur(7px)}.page.exit-right{transform:translateX(60px) scale(.965);opacity:0;filter:blur(7px)}
.hero-wrap{text-align:center;width:100%;max-width:1500px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh}.date-line,.mode-line{margin-top:18px;font-size:clamp(15px,1.7vw,24px);font-weight:540;letter-spacing:-.02em;color:#fff;opacity:.72}.digital{display:flex;align-items:center;justify-content:center;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:780;letter-spacing:-.055em;line-height:.92;max-width:100%;text-rendering:geometricPrecision}.hero-digital{font-size:clamp(66px,15.2vw,240px)}.stopwatch-digital{font-size:clamp(54px,11.6vw,180px)}
/* Keep animated digits un-clipped horizontally and avoid per-digit shadows/compositor rectangles. */
.digit-slot{position:relative;display:inline-grid;place-items:center;width:.69em;height:1.08em;overflow:visible;vertical-align:middle;isolation:isolate}.digit-value{grid-area:1/1;display:block;will-change:transform,opacity;backface-visibility:hidden}.digit-new{transform:translateY(72%) scale(.82);opacity:0}.digit-new.digit-in{animation:digitIn .44s cubic-bezier(.2,.9,.25,1) both}.digit-old.digit-out{animation:digitOut .44s cubic-bezier(.2,.78,.28,1) both}.digit-sep{display:inline-flex;width:.29em;justify-content:center;align-items:center;height:1.08em;opacity:.94;flex:0 0 .29em}.digit-dot{width:.22em;flex-basis:.22em}@keyframes digitIn{from{transform:translateY(72%) scale(.82);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes digitOut{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-72%) scale(.84);opacity:0}}

.timer-wrap{position:relative}.timer-final{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;z-index:4}.timer-wrap.final-mode .timer-final{display:flex}.timer-wrap.final-mode #timerDigital{animation:timerDigitalExit .52s cubic-bezier(.35,.02,.25,1) both}.timer-wrap.final-mode #timerHint,.timer-wrap.final-mode .timer-controls{opacity:0;pointer-events:none;transition:opacity .22s ease}.timer-final-number{position:absolute;left:50%;top:50%;font-size:clamp(180px,32vw,510px);font-weight:800;line-height:.8;letter-spacing:-.06em;transform:translate(-50%,-50%);white-space:nowrap}.timer-final-number.in{animation:timerBigIn .5s cubic-bezier(.2,.9,.25,1) both}.timer-final-number.out{animation:timerBigOut .48s ease both}@keyframes timerDigitalExit{to{transform:translateY(-72vh) scale(.52);opacity:0}}@keyframes timerBigIn{from{transform:translate(-50%,12vh) scale(.55);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes timerBigOut{to{transform:translate(-50%,-94vh) scale(.38);opacity:0}}
.timer-controls{margin-top:30px}.timer-inputs{display:grid;grid-template-columns:repeat(3,110px);gap:10px;justify-content:center}.timer-inputs label{display:grid;gap:7px;text-align:center}.timer-inputs input,.alarm-add input{width:100%;border:1px solid #ffffff1c;background:#ffffff0e;color:#fff;border-radius:18px;padding:13px;outline:none;backdrop-filter:blur(16px)}.timer-inputs input{text-align:center;font-size:20px}.timer-inputs span{font-size:12px;opacity:.58}.actions{display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}.primary,.secondary,.full-btn{border:1px solid #ffffff20;border-radius:999px;padding:12px 21px;font-weight:700}.primary{background:#fff;color:#0b1018}.secondary{background:#ffffff0d}.glass-panel{width:min(720px,94vw);padding:34px;border-radius:34px;border:1px solid #ffffff1d;background:#09101f66;backdrop-filter:blur(28px) saturate(155%);-webkit-backdrop-filter:blur(28px) saturate(155%);box-shadow:inset 0 1px 0 #ffffff16,0 30px 90px #0005}.eyebrow{font-size:14px;letter-spacing:.08em;color:#d8deea99;text-transform:uppercase;text-align:center}.floating-list,.alarm-list{margin-top:18px;max-height:170px;overflow:auto;display:grid;gap:8px;width:min(560px,92vw)}.lap,.alarm-item{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:16px;background:#ffffff0a;border:1px solid #ffffff0f;font-variant-numeric:tabular-nums;backdrop-filter:blur(12px)}.alarm-add{display:grid;grid-template-columns:130px 1fr auto;gap:9px;margin-top:20px}.alarm-item small{display:block;opacity:.58;margin-top:3px}.alarm-item button{border:0;background:#ffffff0d;border-radius:999px;padding:8px 12px}.empty{text-align:center;padding:22px;opacity:.48}
.dock{position:absolute;z-index:15;left:50%;bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));transform:translateX(-50%);height:76px;padding:7px;display:flex;align-items:center;gap:4px;width:max-content;max-width:calc(100% - 22px);border-radius:999px;border:1px solid #ffffff20;background:#08101b99;backdrop-filter:blur(28px) saturate(175%);-webkit-backdrop-filter:blur(28px) saturate(175%);box-shadow:inset 0 1px 0 #ffffff24,0 24px 70px #0006;overflow:visible}.nav-btn{position:relative;z-index:3;height:62px;width:64px;flex:0 0 64px;border:0;background:transparent;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:0;padding:0 18px;font-size:13px;color:#ffffffae;overflow:hidden;white-space:nowrap;transition:width .38s cubic-bezier(.2,.85,.2,1),flex-basis .38s cubic-bezier(.2,.85,.2,1),color .28s ease,transform .22s ease,padding .38s cubic-bezier(.2,.85,.2,1)}.nav-btn.active{width:122px;flex-basis:122px;color:#0b1018;font-weight:760;gap:9px;padding:0 21px}.nav-btn:active{transform:scale(.95)}.nav-icon{font-size:22px;line-height:1;flex:0 0 auto}.nav-label{display:inline-block;max-width:0;opacity:0;transform:translateX(-7px);overflow:hidden;transition:max-width .32s ease,opacity .24s ease,transform .32s ease}.nav-btn.active .nav-label{max-width:90px;opacity:1;transform:none}@media(hover:hover) and (pointer:fine){.nav-btn:not(.active):hover{width:118px;flex-basis:118px;gap:9px;padding:0 20px;color:#fff}.nav-btn:not(.active):hover .nav-label{max-width:90px;opacity:1;transform:none}}.liquid-indicator{position:absolute;z-index:1;top:7px;left:7px;width:64px;height:62px;border-radius:999px;background:linear-gradient(180deg,#fff,#eff3f8);box-shadow:0 8px 25px #0003,inset 0 1px 0 #fff,inset 0 -1px 0 #cfd6e0;will-change:left,width,transform;transition:left .58s cubic-bezier(.18,.9,.22,1),width .42s cubic-bezier(.2,.86,.22,1);overflow:visible}.liquid-indicator::before,.liquid-indicator::after,.liquid-indicator i,.liquid-indicator b{content:"";position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#f8fbff;opacity:0;pointer-events:none}.liquid-indicator::before{left:-4px}.liquid-indicator::after{right:-4px}.liquid-indicator i{left:8px;width:10px;height:10px}.liquid-indicator b{right:8px;width:10px;height:10px}.liquid-indicator.moving-right{animation:squishR .58s}.liquid-indicator.moving-left{animation:squishL .58s}.liquid-indicator.moving-right::after,.liquid-indicator.moving-right b{animation:dropR .58s}.liquid-indicator.moving-left::before,.liquid-indicator.moving-left i{animation:dropL .58s}@keyframes squishR{40%{transform:scaleX(1.16);transform-origin:left}72%{transform:scaleX(.94);transform-origin:right}}@keyframes squishL{40%{transform:scaleX(1.16);transform-origin:right}72%{transform:scaleX(.94);transform-origin:left}}@keyframes dropR{35%{transform:translate(8px,-50%) scale(1);opacity:.9}75%{transform:translate(20px,-50%) scale(.3);opacity:.15}}@keyframes dropL{35%{transform:translate(-8px,-50%) scale(1);opacity:.9}75%{transform:translate(-20px,-50%) scale(.3);opacity:.15}}
.overlay{position:absolute;z-index:40;inset:0;background:#0006;backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:.28s}.overlay.on{opacity:1;pointer-events:auto}.settings-sheet{position:absolute;left:16px;top:16px;bottom:16px;width:min(430px,calc(100% - 32px));border-radius:30px;padding:24px;background:#10131edc;border:1px solid #ffffff1b;backdrop-filter:blur(34px) saturate(160%);overflow:auto;transform:translateX(-25px) scale(.98);transition:.32s cubic-bezier(.2,.85,.2,1)}.overlay.on .settings-sheet{transform:none}.sheet-head{display:flex;align-items:center;justify-content:space-between}.sheet-head small{opacity:.48}.sheet-head h2{margin:3px 0 0;font-size:28px}.sheet-head .glass-icon{width:42px;height:42px;border-radius:50%;font-size:24px}.setting-group{margin-top:27px}.setting-group h3{font-size:14px;opacity:.62}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.theme-card{border:1px solid #ffffff18;background:#ffffff08;border-radius:18px;padding:8px;display:grid;gap:7px;text-align:left}.theme-card i{height:64px;border-radius:12px;display:grid;place-items:center}.theme-card span{font-size:12px;padding:0 4px 3px}.theme-card.selected{border-color:#ffffff88;background:#ffffff12}.aurora-card{background:linear-gradient(140deg,#345dbe,#56438a,#153e4d)}.midnight-card{background:linear-gradient(140deg,#020614,#17223c)}.sunset-card{background:linear-gradient(140deg,#3b1c30,#6b3651)}.ocean-card{background:linear-gradient(140deg,#06364c,#098092)}.mono-card{background:linear-gradient(140deg,#0a0a0b,#444)}.upload-card i{background:#ffffff0b;font-size:25px}.rows{border-top:1px solid #ffffff12}.setting-row{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #ffffff10}.setting-row b{display:block}.setting-row small{display:block;opacity:.48;margin-top:3px}.setting-row input{position:absolute;opacity:0}.switch{width:47px;height:28px;border-radius:999px;background:#ffffff18;padding:3px;transition:.25s}.switch::after{content:"";display:block;width:22px;height:22px;border-radius:50%;background:#fff;transition:.25s}.setting-row input:checked+.switch{background:#fff}.setting-row input:checked+.switch::after{transform:translateX(19px);background:#111827}.full-btn{width:100%;margin-top:22px;background:#fff;color:#0b1018}.toast{position:absolute;z-index:80;left:50%;top:22px;transform:translate(-50%,-10px);background:#111822dd;border:1px solid #ffffff1c;border-radius:999px;padding:10px 16px;opacity:0;pointer-events:none;transition:.25s;backdrop-filter:blur(20px)}.toast.on{opacity:1;transform:translate(-50%,0)}
/* Ringing overlay */
.ring-overlay{position:absolute;z-index:100;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#4e1e3f,#160b17 58%,#08070b);opacity:0;pointer-events:none;transition:.32s;overflow:hidden}.ring-overlay.on{opacity:1;pointer-events:auto}.ring-glow{position:absolute;width:70vmin;height:70vmin;border-radius:50%;background:#ff7ac333;filter:blur(50px);animation:ringGlow 1.3s ease-in-out infinite alternate}.ring-content{position:relative;text-align:center;padding:30px}.ring-type{font-size:15px;opacity:.64;letter-spacing:.08em}.ring-title{font-size:clamp(25px,4vw,46px);font-weight:720;margin-top:14px}.ring-time{font-size:clamp(70px,16vw,210px);font-weight:800;letter-spacing:-.06em;line-height:1;margin-top:10px}.desktop-dismiss{margin-top:42px}.hold-dismiss{position:relative;overflow:hidden;min-width:240px;border:1px solid #ffffff33;border-radius:999px;padding:16px 30px;background:#ffffff12;backdrop-filter:blur(15px)}.hold-dismiss b,.hold-dismiss small{position:relative;z-index:2;display:block}.hold-dismiss small{opacity:.55;margin-top:3px}.hold-progress{position:absolute;inset:0 auto 0 0;width:0;background:#ffffff;opacity:.9}.hold-dismiss.holding .hold-progress{animation:holdFill 1.5s linear forwards}.hold-dismiss.holding b,.hold-dismiss.holding small{color:#111}.mobile-dismiss{display:none;margin-top:45px}.slide-dismiss{position:relative;width:92px;height:92px;margin:auto;border-radius:50%;border:1px solid #ffffff40;background:#ffffff12;display:grid;place-items:center;touch-action:none;transition:transform .12s ease,background .2s}.slide-dismiss b{font-size:44px;font-weight:300;line-height:1}.slide-ring{position:absolute;inset:-9px;border-radius:50%;border:2px solid #ffffff28}.mobile-dismiss small{display:block;margin-top:18px;opacity:.62}@keyframes holdFill{to{width:100%}}@keyframes ringGlow{to{transform:scale(1.18);opacity:.55}}
.no-motion *, .no-motion *::before,.no-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.no-motion .timer-final-number{animation:none!important;transform:translate(-50%,-50%)!important;opacity:1!important}
@media(max-width:720px){.page{padding:85px 12px 118px}.hero-digital{font-size:clamp(52px,21vw,116px);letter-spacing:-.06em}.stopwatch-digital{font-size:clamp(41px,15vw,88px)}.digit-slot{width:.68em}.timer-inputs{grid-template-columns:repeat(3,minmax(72px,95px))}.alarm-panel{padding:25px 18px}.alarm-add{grid-template-columns:1fr 1fr}.alarm-add button{grid-column:1/-1}.desktop-dismiss{display:none}.mobile-dismiss{display:block}.dock{height:70px;padding:6px}.nav-btn{height:58px;width:54px;flex-basis:54px;padding:0 14px}.nav-btn.active{width:104px;flex-basis:104px;padding:0 18px}.liquid-indicator{top:6px;left:6px;height:58px;width:54px}.nav-icon{font-size:21px}.settings-sheet{left:8px;right:8px;top:8px;bottom:8px;width:auto}.theme-grid{grid-template-columns:repeat(2,1fr)}}

/* Custom alarm sound URL */
.sound-settings{padding-top:2px}.sound-url-label{display:block;margin-bottom:10px}.sound-url-label b{display:block;font-size:15px}.sound-url-label small{display:block;margin-top:4px;opacity:.48;line-height:1.45}.sound-url-input{width:100%;border:1px solid #ffffff1c;background:#ffffff0e;color:#fff;border-radius:18px;padding:13px 14px;outline:none;backdrop-filter:blur(16px);font:inherit;font-size:13px}.sound-url-input:focus{border-color:#ffffff70;background:#ffffff12}.sound-url-actions{display:flex;gap:8px;margin-top:10px}.compact-btn{padding:10px 16px;font-size:13px}.sound-url-input.invalid{border-color:#ff8d8d;background:#ff555510}

/* v9 — ringing screen inherits the selected background and moves gently. */
.ring-overlay{
  background:#08070c;
}
.ring-background{
  position:absolute;
  inset:-8%;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.08);
  will-change:transform,background-position;
  animation:ringBackgroundDrift 9s ease-in-out infinite alternate;
}
.ring-overlay[data-theme="aurora"] .ring-background{background-image:linear-gradient(150deg,#16284c,#382346 55%,#10272d)}
.ring-overlay[data-theme="midnight"] .ring-background{background-image:linear-gradient(145deg,#030711,#0a1020 56%,#02050b)}
.ring-overlay[data-theme="sunset"] .ring-background{background-image:linear-gradient(145deg,#261423,#3c1c31 50%,#17131e)}
.ring-overlay[data-theme="ocean"] .ring-background{background-image:linear-gradient(145deg,#052a3a,#074f61 55%,#061925)}
.ring-overlay[data-theme="mono"] .ring-background{background-image:linear-gradient(145deg,#0b0b0c,#1b1b1d 55%,#060607)}
.ring-background.custom{background-size:cover;background-position:center}
.ring-content{z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
@keyframes ringBackgroundDrift{
  0%{transform:scale(1.08) translate3d(-1.4%,-.8%,0);background-position:48% 49%}
  50%{transform:scale(1.13) translate3d(1%,1.1%,0);background-position:52% 52%}
  100%{transform:scale(1.09) translate3d(-.3%,1.5%,0);background-position:50% 54%}
}

@media(max-width:720px){
  .ring-content{padding:22px 18px 150px;justify-content:center}
  .mobile-dismiss{
    display:block;
    position:absolute;
    left:50%;
    bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px));
    transform:translateX(-50%);
    width:min(92vw,420px);
    margin:0;
  }
  .slide-dismiss{width:96px;height:96px}
  .mobile-dismiss small{margin-top:16px}
}

/* v10 — separate sound controls */
.sound-block{margin-top:14px;padding:14px;border:1px solid #ffffff14;border-radius:20px;background:#ffffff07}
.sound-block+.sound-block{margin-top:10px}
.sound-block-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.sound-block-head b{display:block;font-size:14px}
.sound-block-head small{display:block;margin-top:3px;opacity:.48;line-height:1.4;font-size:12px}
.sound-source-badge{flex:0 0 auto;border:1px solid #ffffff18;background:#ffffff0d;border-radius:999px;padding:5px 9px;font-size:11px;opacity:.8;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-sound-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}
.sound-url-actions{flex-wrap:wrap}

/* The liquid selection can be held and dragged horizontally. */
.liquid-indicator.dragging{transition:none!important;animation:none!important;transform:scale(1.04,1.08);box-shadow:0 12px 34px #0005,inset 0 1px 0 #fff,inset 0 -1px 0 #cfd6e0;cursor:grabbing}
.nav-btn.active{touch-action:none}
.nav-btn.drag-preview{color:#fff;transform:scale(1.05)}

/* Ring screen follows the selected app background exactly, with theme-colored light from above. */
.ring-overlay{background:#08070c}
.ring-background{inset:-9%;animation:ringBackgroundDrift 8s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.ring-overlay[data-theme="aurora"] .ring-background{background-image:linear-gradient(150deg,#16284c,#382346 55%,#10272d)}
.ring-overlay[data-theme="midnight"] .ring-background{background-image:linear-gradient(145deg,#030711,#0a1020 56%,#02050b)}
.ring-overlay[data-theme="sunset"] .ring-background{background-image:linear-gradient(145deg,#261423,#3c1c31 50%,#17131e)}
.ring-overlay[data-theme="ocean"] .ring-background{background-image:linear-gradient(145deg,#052a3a,#074f61 55%,#061925)}
.ring-overlay[data-theme="mono"] .ring-background{background-image:linear-gradient(145deg,#0b0b0c,#1b1b1d 55%,#060607)}
.ring-top-light{position:absolute;z-index:1;left:-10%;right:-10%;top:-34%;height:72%;pointer-events:none;filter:blur(18px);opacity:.9;transform-origin:50% 0;animation:ringTopLightMove 4.4s ease-in-out infinite alternate}
.ring-overlay[data-theme="aurora"] .ring-top-light{background:radial-gradient(ellipse at 50% 0%,#82baff8c 0%,#916cff45 31%,transparent 69%)}
.ring-overlay[data-theme="midnight"] .ring-top-light{background:radial-gradient(ellipse at 50% 0%,#668cff70 0%,#233f8735 34%,transparent 70%)}
.ring-overlay[data-theme="sunset"] .ring-top-light{background:radial-gradient(ellipse at 50% 0%,#ff9bc982 0%,#b5579140 35%,transparent 71%)}
.ring-overlay[data-theme="ocean"] .ring-top-light{background:radial-gradient(ellipse at 50% 0%,#66efffa0 0%,#00a8c95c 34%,transparent 70%)}
.ring-overlay[data-theme="mono"] .ring-top-light{background:radial-gradient(ellipse at 50% 0%,#ffffff5f 0%,#bfc5cd26 36%,transparent 70%)}
.ring-background.custom + .ring-top-light{background:radial-gradient(ellipse at 50% 0%,#ffffff66 0%,#cde7ff25 34%,transparent 70%)}
@keyframes ringTopLightMove{0%{transform:translate3d(-2%,0,0) scale(1);opacity:.72}100%{transform:translate3d(2%,5%,0) scale(1.09);opacity:1}}

@media(max-width:720px){
  .mobile-dismiss{bottom:max(5px,calc(env(safe-area-inset-bottom) + 3px))}
  .ring-content{padding-bottom:168px}
  .slide-dismiss{width:98px;height:98px}
  .sound-block{padding:12px}
  .sound-url-actions{gap:7px}
  .compact-btn{padding:10px 13px}
}