:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#080808;color:#f4f4f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;background:#1b1b1b;color:#eee;border:1px solid #343434;border-radius:12px;padding:13px 16px;min-height:44px}button:hover{background:#303030}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid white;outline-offset:3px}button:disabled{opacity:.45;cursor:wait}a{color:inherit;text-decoration:none}.shell{max-width:760px;padding:0 32px;margin:auto}header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #262626}.brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:24px;letter-spacing:-1px}.brand-icon{display:grid;place-items:center;background:#f1f1ed;color:#080808;width:30px;height:30px;border-radius:9px;font-size:20px}.brand-dot{font-size:11px;align-self:flex-start;letter-spacing:0}.device-label,.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:650}.device-label{color:#777}.icon-button{border:0;background:transparent;font-size:26px}main{padding:48px 0 24px}h1{font-size:40px;font-weight:500;letter-spacing:-1.7px;line-height:1.16;margin:15px 0 28px}h2{font-size:21px;letter-spacing:-.6px;font-weight:550;margin:0}h3{font-size:17px;font-weight:550}p{line-height:1.55;margin:7px 0}.eyebrow{color:#969696;margin:0}.muted{color:#939393}.small{font-size:12px}.day-heading{display:flex;justify-content:space-between;align-items:center}.live-dot{width:7px;height:7px;background:#ddd;border-radius:50%;margin-right:5px}.next-card{background:linear-gradient(125deg,#222,#161616);border:1px solid #393939;border-radius:23px;padding:26px 28px}.card-top{display:flex;align-items:center;justify-content:space-between}.card-top .eyebrow{color:#bbb}.pill{font-size:11px;border:1px solid #555;padding:7px 12px;border-radius:30px;color:#ccc}.next-time{font-size:clamp(64px,16vw,108px);font-weight:400;letter-spacing:-6px;line-height:1.2;padding:16px 0}.next-bottom{display:flex;align-items:center;justify-content:space-between}.next-bottom p{margin:2px 0}.round-button{border-radius:50%;width:47px;height:47px;background:#eee;color:#111;font-size:23px;border:0;padding:0}.round-button:hover{background:#fff}.progress-section{padding:26px 0 35px}.progress-section>div:first-child{display:flex;justify-content:space-between;gap:12px}.progress-section strong{font-size:13px;font-weight:500}.progress-track{height:3px;background:#282828;margin-top:14px;border-radius:4px;overflow:hidden}.progress-track>div{height:100%;background:#eee;width:0;transition:width .2s}.section-heading{display:flex;align-items:center;justify-content:space-between}.section-heading .small{font-size:9px;letter-spacing:1px}.date-nav{display:flex;gap:8px;margin:22px 0}.date-nav input{flex:1;min-width:0;font-size:13px}.date-nav button{padding:8px 13px}.group{margin:26px 0 35px;scroll-margin-top:20px}.group-header{display:flex;align-items:center;gap:12px;margin:0 0 8px}.group-header h3{font-size:24px;letter-spacing:-.7px;margin:0}.group-header span{font-size:11px;color:#8c8c8c}.group-header .group-status{margin-left:auto;font-size:9px;letter-spacing:.7px}.dose{width:100%;display:flex;text-align:left;align-items:center;gap:14px;background:transparent;border:0;border-bottom:1px solid #252525;border-radius:0;padding:17px 0}.dose:hover{background:#141414}.dose-icon{display:grid;place-items:center;width:33px;height:33px;border:1px solid #494949;border-radius:50%;font-size:15px;flex:none;color:#ccc}.dose.taken .dose-icon{background:#eee;color:#111;border-color:#eee}.dose.skipped .dose-icon{border-style:dashed}.dose-body{flex:1}.dose-name{font-size:14px;line-height:1.4;font-weight:500}.dose-detail{font-size:11px;color:#999;margin-top:4px}.dose-status{font-size:10px;color:#aaa;max-width:88px;text-align:right;line-height:1.5}.dose.taken .dose-name{color:#aaa}.review{display:flex;gap:16px;align-items:center;border:1px solid #333;border-radius:15px;padding:21px;margin-top:36px}.review>span{font-size:28px}.review strong{font-size:13px;font-weight:500;display:block;margin-top:5px}.review .eyebrow{font-size:9px}.notes{margin:25px 0;font-size:12px;color:#999;line-height:1.7}.notes summary{cursor:pointer;list-style:none;color:#ccc;padding:14px 0}.notes summary span{float:right}.notes ul{padding-left:17px}.notes li{margin:12px 0}footer{border-top:1px solid #222;display:flex;justify-content:space-between;padding:25px 0 120px;color:#666;font-size:9px;letter-spacing:.5px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:65px;background:#101010ed;border-top:1px solid #2b2b2b;padding:12px 20px calc(12px + env(safe-area-inset-bottom));backdrop-filter:blur(16px);z-index:10}.bottom-nav button{background:none;border:0;color:#777;padding:0 10px;font-size:22px;display:flex;flex-direction:column;align-items:center;gap:4px}.bottom-nav button span{font-size:10px}.bottom-nav button.active{color:#fff}dialog{width:min(500px,calc(100% - 28px));max-height:88dvh;border:1px solid #444;border-radius:22px;padding:25px;background:#141414;color:#eee;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.close{font-size:25px;background:transparent;border:0;padding:0 8px}.setting-block{padding:10px 0 25px;border-bottom:1px solid #333}.setting-block>button{display:block;width:100%;margin:10px 0}.button-row{display:flex;gap:10px}.button-row button{flex:1}label{display:block;font-size:12px;color:#bbb;margin:20px 0}input,select{display:block;width:100%;background:#1d1d1d;border:1px solid #444;color:#eee;padding:12px;border-radius:10px;min-height:44px;margin-top:9px}input[type=date]{margin:0}.primary{background:#eee;color:#111;border:0;font-weight:600}.primary:hover{background:#fff}#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:#eee;color:#111;padding:14px 20px;border-radius:12px;font-size:12px;z-index:100;width:max-content;max-width:90vw;box-shadow:0 5px 30px #0008}#welcome{padding:25px 0 65px}#welcome h1{font-size:68px;letter-spacing:-3.5px;line-height:1.02;margin:26px 0}#welcome h1 span{color:#777}.intro{max-width:280px;font-size:15px}#welcome .primary{margin:25px 0 14px;width:100%;display:flex;justify-content:space-between;padding:19px}.empty{text-align:center;padding:40px 10px;color:#888;font-size:13px}[hidden]{display:none!important}@media(max-width:500px){.shell{padding:0 23px}header{height:85px}.brand{font-size:22px}.device-label{display:none}main{padding-top:32px}h1{font-size:31px}.next-card{padding:22px}.next-time{letter-spacing:-4px}.progress-section{padding-bottom:30px}.bottom-nav{gap:45px}.dose-name{font-size:13px}.dose-status{font-size:9px}#welcome h1{font-size:59px}footer{font-size:8px;gap:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.brand{font-size:14px;letter-spacing:1px;gap:10px}#welcome h1{font-size:clamp(44px,10vw,64px);letter-spacing:-2px;line-height:1.08;max-width:470px}footer{justify-content:flex-end}

/* Keep the iOS page fixed while the top-layer dialog scrolls. */
html.modal-open{overflow:hidden;overscroll-behavior:none}
html.modal-open body{position:fixed;top:var(--modal-scroll-top);left:0;right:0;width:100%;overflow:hidden}
dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scroll-padding-top:80px}
dialog .dialog-head{position:sticky;top:-25px;z-index:2;background:#141414;margin:-25px -25px 18px;padding:12px 20px;border-bottom:1px solid #333;gap:12px}
dialog .dialog-head h2{min-width:0;overflow-wrap:anywhere}
dialog .close{flex:0 0 44px;width:44px;height:44px;background:#141414}

/* Safari's date controls must shrink to the form rather than their native intrinsic width. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
dialog{max-width:calc(100vw - 28px);overflow-x:hidden;overflow-y:auto}
dialog label,.setting-block,.button-row{min-width:0;max-width:100%}
input,select{box-sizing:border-box;min-width:0;max-width:100%}
input[type="date"],input[type="datetime-local"]{appearance:none;-webkit-appearance:none;inline-size:100%;min-inline-size:0;max-inline-size:100%;min-height:46px;text-align:left;overflow:hidden}
input::-webkit-date-and-time-value{min-width:0;text-align:left}
input::-webkit-datetime-edit{min-width:0;padding:0}
.dose-body,.next-bottom>div,.day-heading>div{min-width:0;overflow-wrap:anywhere}
.button-row>button{min-width:0;flex:1 1 0;overflow-wrap:anywhere}
@media(max-width:600px){input,select{font-size:16px}.date-nav input{font-size:16px}}

/* Standalone iOS extends the viewport behind the status bar and camera. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
.shell{padding-top:var(--safe-top);padding-left:max(32px,var(--safe-left));padding-right:max(32px,var(--safe-right))}
html{scroll-padding-top:calc(var(--safe-top) + 16px)}
@media(max-width:500px){.shell{padding-left:max(23px,var(--safe-left));padding-right:max(23px,var(--safe-right))}}