:root{
 color-scheme:dark;--paper:#0d1211;--ink:#c1c6ba;--muted:#929c91;--card:#19251e;--accent:#b4c5a5;
 font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:var(--paper);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;color:inherit}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #adbe9b;outline-offset:4px}
a{color:inherit}
[hidden]{display:none!important}
.site-header{max-width:700px;margin:auto;padding:8px 22px;display:flex;justify-content:space-between;align-items:center;min-height:52px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:13px;font-weight:500}
.brand-moon{font-family:Georgia,serif;font-size:26px;line-height:1;color:#aaa27f;transform:rotate(-15deg)}
.quiet-button{border:0;background:transparent;display:inline-flex;gap:7px;align-items:center;min-height:44px;padding:8px 3px;font-size:12px}
.quiet-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
main{max-width:456px;margin:0 auto;padding:0 16px max(12px,env(safe-area-inset-bottom))}
.intro{text-align:center;margin:0}
.intro h1{font-size:19px;font-weight:400;letter-spacing:-.3px;margin:0 0 3px}
.intro h1 em{font-family:Georgia,serif;font-weight:400}
.intro .eyebrow,.intro>p:last-child,.footer-note{display:none}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;line-height:1.5;margin:0}
.routine-bar{display:flex;justify-content:space-between;align-items:center;margin:0 4px 4px;font-size:10px;color:var(--muted)}
.routine-bar button{border:0;background:transparent;font-size:11px;padding:8px 0;min-height:40px}
.routine-bar button span{margin-left:5px}
.activity-card{background:var(--card);color:var(--accent);border:1px solid #b3c0ab0a;border-radius:25px;padding:14px 18px 12px;text-align:center;overflow:hidden;transition:background .5s,color .5s}
.card-top{display:flex;justify-content:space-between;align-items:center;font-size:10px}
.status-pill{background:#c6d4bc08;border:1px solid #c6d4bc12;border-radius:30px;padding:6px 10px;font-size:8px;font-weight:700;letter-spacing:1.2px}
.card-top>span:last-child{font-size:9px;letter-spacing:1px;opacity:.8}
.illustration{height:290px;display:flex;align-items:center;justify-content:center;margin:0}
.illustration svg{width:100%;max-width:320px;height:100%;overflow:visible}
.drawing{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.drawing .wash{fill:#c1d6c40a;stroke:none}
.drawing .blush{fill:#b4877630;stroke:none}
.drawing .solid{fill:currentColor;stroke:none}
.drawing .pencil-body{fill:#c5a36b25}
.drawing .eraser{fill:#c4948225}
.drawing .toothpaste{fill:#9fc6b4;stroke:#9fc6b4;stroke-width:1.5}
.drawing .brush-handle{fill:#baa9c62b}
.activity-copy .time-range{font-size:10px;letter-spacing:1px;margin:0 0 6px;opacity:.8}
.activity-copy h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:27px;letter-spacing:-.6px;line-height:1.12;margin:0;text-wrap:balance}
.activity-copy>p:last-child{display:none}
.countdown{display:grid;grid-template-columns:92px 1fr;column-gap:14px;align-items:center;max-width:230px;margin:10px auto 0;text-align:left}
.sand-clock{grid-row:1/4;grid-column:1;width:92px;height:111px}
.sand-clock svg{width:100%;height:100%;overflow:visible}
.glass-fill{fill:#c1d6c408}
.glass-outline{fill:none;stroke:currentColor;stroke-width:1.8;opacity:.6}
.glass-shine{fill:none;stroke:currentColor;opacity:.3;stroke-width:3;stroke-linecap:round}
.clock-frame{fill:currentColor;opacity:.6}
.clock-shadow{fill:currentColor;opacity:.04}
.sand{fill:#ac8e55;transition:y 1s linear,height 1s linear}
.sand-stream{fill:none;stroke:#ac8e55;stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round;animation:sand-fall 2s linear infinite}
@keyframes sand-fall{to{stroke-dashoffset:-14}}
.timer-caption{grid-column:2;align-self:end;font-size:8px;font-weight:700;letter-spacing:1.4px;line-height:1.6}
.timer{grid-column:2;font-size:29px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.8px;margin:3px 0 0;align-self:start}
.progress-track,#timer-note{display:none}
.countdown.resting{display:block;text-align:center;margin:18px auto 6px}
.countdown.resting .timer{font-family:Georgia,serif;font-size:23px;letter-spacing:-.3px;margin:5px 0}
.next-card{display:flex;gap:12px;align-items:center;min-height:118px;background:#25241a;border:1px solid #b3c0ab0a;border-radius:22px;margin-top:10px;padding:10px 14px;color:#c2b38e}
.next-art{flex:none;width:94px;height:94px}
.next-art svg{width:100%;height:100%;stroke-width:2.4}
.next-card .eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:5px;opacity:.8}
.next-card h2{font-family:Georgia,serif;font-size:21px;font-weight:400;margin:0;letter-spacing:-.3px;text-wrap:balance}
.next-card p:last-child{font-size:10px;margin:6px 0 0;opacity:.8}
.next-arrow{margin-left:auto;font-size:18px;opacity:.5}
.steps{display:flex;justify-content:center;gap:0;margin:3px 0 0;flex-wrap:wrap}
.steps button{width:min(44px,calc((100vw - 32px)/7));height:44px;display:grid;place-items:center;border:0;background:none;padding:0}
.steps button:before{content:"";display:block;width:5px;height:5px;border-radius:50%;background:#394239}
.steps button[aria-current="step"]:before{width:17px;border-radius:5px;background:#8e9f7d}
.preview-banner{padding:0 4px 5px;font-size:10px;color:#b7ac91;display:flex;align-items:center;justify-content:space-between;gap:8px}
.preview-banner button{border:0;background:none;text-decoration:underline;font-size:11px;min-height:44px;padding:5px}
.storage-note{font-size:12px;color:#c6a37e;line-height:1.5}
dialog{width:min(520px,calc(100% - 24px));max-height:88dvh;border:1px solid #394139;border-radius:25px;background:var(--paper);color:var(--ink);padding:22px;box-shadow:0 20px 100px #0008;overscroll-behavior:contain}
dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}
body:has(dialog[open]){overflow:hidden}
.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dialog-heading h2{font-family:Georgia,serif;font-size:28px;font-weight:400;margin:5px 0 0;letter-spacing:-.6px}
.dialog-heading .eyebrow{font-size:8px;color:var(--muted)}
.close-button{background:#252e27;border:0;width:44px;height:44px;border-radius:50%;font-size:24px;flex:none}
.dialog-intro{font-size:12px;line-height:1.65;color:var(--muted);margin:18px 0 22px}
.overview-item{display:flex;align-items:center;gap:13px;width:100%;border:1px solid #b3c0ab0a;border-radius:15px;background:#1e291f;padding:8px 12px;margin-bottom:8px;text-align:left}
.overview-item svg{width:72px;height:72px;flex:none}
.overview-item strong{display:block;font-weight:500;font-size:14px}
.overview-item small{font-size:11px;display:block;margin-top:4px;opacity:.8}
.primary-button{background:#364831;color:#cbd5c0;border:1px solid #71846755;border-radius:13px;padding:14px 19px;font-size:13px}
#overview-now{width:100%;margin-top:16px}
.edit-row{border:1px solid #394139;border-radius:15px;padding:14px;margin:0 0 13px;min-width:0}
.edit-row legend{padding:0 5px;font-size:10px;color:var(--muted)}
.edit-grid{display:grid;grid-template-columns:112px 1fr;gap:10px}
.edit-row label{font-size:10px;display:flex;flex-direction:column;gap:6px}
.edit-row input,.edit-row select{width:100%;min-width:0;border:1px solid #3e493e;border-radius:8px;background:#19201b;padding:10px 8px;font-size:16px;color:var(--ink);color-scheme:dark}
.edit-row .wide{grid-column:1/-1}
.remove-button{border:0;background:none;color:#c6a37e;font-size:11px;padding:12px 0 0;min-height:44px}
.add-button{width:100%;border:1px dashed #62715d;border-radius:12px;padding:14px;background:transparent;font-size:12px}
.form-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.form-error{color:#d49787;font-size:12px;line-height:1.5}
.form-error:empty{display:none}
@media(min-width:700px){.site-header{padding-top:14px}.intro h1{font-size:21px}main{padding-top:10px}.illustration{height:310px}}
@media(max-width:360px){.next-art{width:82px;height:82px}.next-card{padding:10px;gap:8px}.next-card h2{font-size:19px}.activity-copy h2{font-size:25px}}
@media(max-height:740px) and (max-width:520px){
 .site-header{min-height:48px;padding:2px 18px}.intro h1{font-size:17px}
 .routine-bar{margin-bottom:2px}.routine-bar button{min-height:36px}
 .activity-card{padding:10px 14px}.illustration{height:clamp(205px,34dvh,250px)}
 .activity-copy h2{font-size:24px}.countdown{margin-top:7px;grid-template-columns:80px 1fr;max-width:214px}
 .sand-clock{width:80px;height:96px}.timer{font-size:27px}
 .next-card{min-height:100px}.next-art{width:78px;height:78px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}