.calendar{display:grid;gap:var(--space-2);container-type:inline-size}.calendar-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1)}.calendar-title{font-size:var(--text-xl);font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}.calendar-nav{display:flex;align-items:center;gap:.25rem}.calendar-summary{color:var(--ink-2)}.calendar-summary strong{color:var(--ink);font-size:var(--text-lg);font-weight:700;font-variant-numeric:tabular-nums}.calendar-grid{inline-size:100%;border-collapse:collapse;table-layout:fixed}.calendar-grid th{padding-block:0 .5rem;color:var(--ink-2);font-size:var(--text-sm);font-weight:500}.calendar-grid td{padding:clamp(.125rem,.6cqi,.375rem);text-align:center}.day{position:relative;display:inline-grid;place-items:center;inline-size:min(100%,3.25rem);aspect-ratio:1;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:var(--text-md);font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .2s ease}.day:hover:not(:disabled){background:var(--line-soft)}.day:disabled{color:var(--ink-2);font-weight:400;cursor:default}.day--taken,.day--taken:hover:not(:disabled){background:var(--taken-soft);color:var(--taken);font-weight:700}.day--missed{color:var(--missed)}.day--missed:after{content:"";position:absolute;inset-block-end:14%;inline-size:.3125rem;aspect-ratio:1;border-radius:50%;background:currentColor}.day[aria-current=date]{box-shadow:inset 0 0 0 2px var(--ink)}.day--taken[aria-current=date]{box-shadow:inset 0 0 0 2px var(--taken)}.calendar-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:0;padding:0;list-style:none;color:var(--ink-2);font-size:var(--text-sm)}.calendar-legend li{display:inline-flex;align-items:center;gap:.5rem}.legend-mark{display:inline-block;inline-size:.875rem;aspect-ratio:1;border-radius:50%}.legend-mark--taken{background:var(--taken-soft);box-shadow:inset 0 0 0 1px var(--taken)}.legend-mark--missed{inline-size:.375rem;background:var(--missed);margin-inline:.25rem}.legend-mark--today{box-shadow:inset 0 0 0 2px var(--ink)}.dialog{inline-size:min(30rem,100% - var(--gutter) * 2);max-block-size:min(52rem,100dvh - var(--gutter) * 2);padding:var(--space-2);overflow-y:auto;scrollbar-width:thin;border:0;border-radius:var(--radius);background:var(--surface);color:var(--ink);box-shadow:0 24px 64px #0003}.dialog[open]{animation:dialog-in .24s ease-out}.dialog::backdrop{background:#00000052;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes dialog-in{0%{opacity:0;transform:translateY(.5rem) scale(.98)}}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);margin-block-end:var(--space-2)}.dialog-title{font-size:var(--text-lg);font-weight:700}.dialog-body{display:grid;gap:var(--space-2)}.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-block-size:3rem;padding:.625rem 1.25rem;border:0;border-radius:999px;font-size:var(--text-md);font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .15s ease}.button:active{transform:scale(.98)}.button--primary{background:var(--accent);color:var(--accent-ink)}.button--secondary{background:var(--line-soft);color:var(--ink)}.button--secondary:hover{background:var(--line)}.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-1)}.dose{display:grid;justify-items:center;align-content:center;gap:var(--space-3);text-align:center}.dose-heading{display:grid;gap:.5rem}.dose-date{font-size:var(--text-xl);font-weight:700;letter-spacing:.02em}.dose-status{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;color:var(--ink-2);font-size:var(--text-md);text-wrap:balance}.dose-status--due{color:var(--missed);font-weight:500}.dose-status svg{flex:none;font-size:1.25rem}.dose-button-wrap{position:relative;display:grid;place-items:center;inline-size:clamp(13rem,9rem + 14vw,19rem);aspect-ratio:1}.dose-button-wrap--due:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid var(--accent);animation:dose-breathe 2.8s ease-out infinite;pointer-events:none}@keyframes dose-breathe{0%{transform:scale(.94);opacity:.8}to{transform:scale(1.1);opacity:0}}.dose-button{position:relative;display:grid;justify-items:center;align-content:center;gap:.25rem;inline-size:100%;block-size:100%;border:0;border-radius:50%;background:var(--accent);color:var(--accent-ink);cursor:pointer;box-shadow:0 2px 4px #00000014,0 16px 40px #0000001f;transition:transform .18s ease,background-color .45s ease,color .45s ease,box-shadow .45s ease}.dose-button:hover:not(:disabled){transform:scale(1.015)}.dose-button:active:not(:disabled){transform:scale(.97)}.dose-button:focus-visible{outline-offset:6px}.dose-button.is-taken{background:var(--taken-soft);color:var(--taken);cursor:default;box-shadow:inset 0 0 0 2px var(--taken)}.dose-button-icon{font-size:clamp(2.5rem,2rem + 1.6vw,3.5rem)}.dose-button.is-taken .dose-button-icon{animation:dose-pop .5s cubic-bezier(.2,.9,.3,1.3)}@keyframes dose-pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.dose-button-label{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.5rem);font-weight:700;letter-spacing:.08em;line-height:1.3}.dose-button-hint{font-size:var(--text-md);font-weight:500}.dose-footer{display:grid;justify-items:center;gap:.5rem;min-block-size:5.5rem}.dose-streak{display:inline-flex;align-items:baseline;gap:.375rem}.dose-streak-value{font-size:var(--text-xl);font-weight:700;font-variant-numeric:tabular-nums}.dose-streak-label{color:var(--ink-2);font-size:var(--text-md)}.setting{display:grid;gap:.5rem;justify-items:start;padding-block-end:var(--space-2);border-block-end:1px solid var(--line-soft)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);inline-size:100%}.setting-label{font-weight:700}.setting-help{color:var(--ink-2);font-size:var(--text-sm);text-wrap:pretty}.setting-tip{display:flex;gap:.5rem;color:var(--ink-2);font-size:var(--text-sm);text-wrap:pretty}.setting-tip svg{flex:none;margin-block-start:.2em}.input{min-block-size:3rem;min-inline-size:10rem;padding:.5rem .875rem;border:1px solid var(--line);border-radius:.75rem;background:var(--surface);color:var(--ink);font:inherit;font-size:var(--text-lg);font-variant-numeric:tabular-nums}.input:disabled{color:var(--ink-2);background:var(--line-soft)}.switch{position:relative;flex:none;inline-size:3.25rem;block-size:2rem;padding:0;border:0;border-radius:999px;background:var(--control-off);cursor:pointer;transition:background-color .2s ease}.switch[aria-checked=true]{background:var(--taken)}.switch:disabled{cursor:not-allowed;opacity:.6}.switch-thumb{position:absolute;inset-block-start:.1875rem;inset-inline-start:.1875rem;inline-size:1.625rem;block-size:1.625rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .2s ease}.switch[aria-checked=true] .switch-thumb{transform:translate(1.25rem)}:root{color-scheme:light dark;--bg: #f5f5f7;--surface: #ffffff;--ink: #1d1d1f;--ink-2: #48484d;--line: #d2d2d7;--line-soft: #e8e8ed;--control-off: #78787f;--accent: #0060c7;--accent-ink: #ffffff;--taken: #1b7a45;--taken-ink: #ffffff;--taken-soft: #e4f3ea;--missed: #c0301c;--focus: #0060c7;--shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06);--font: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;--text-sm: .9375rem;--text-md: 1rem;--text-lg: clamp(1.125rem, 1rem + .4vw, 1.25rem);--text-xl: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);--gutter: clamp(1rem, .25rem + 3vw, 3rem);--space-1: clamp(.5rem, .4rem + .3vw, .75rem);--space-2: clamp(1rem, .8rem + .6vw, 1.5rem);--space-3: clamp(1.5rem, 1rem + 1.6vw, 3rem);--radius: clamp(1.25rem, 1rem + .8vw, 1.75rem)}@media(prefers-color-scheme:dark){:root{--bg: #000000;--surface: #1c1c1e;--ink: #f5f5f7;--ink-2: #c7c7cc;--line: #48484a;--line-soft: #2c2c2e;--control-off: #69696e;--accent: #4da3ff;--accent-ink: #000000;--taken: #3ccf6e;--taken-ink: #000000;--taken-soft: #14301f;--missed: #ff7b6b;--focus: #4da3ff;--shadow: none}}*,*:before,*:after{box-sizing:border-box}html{font-size:100%;-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--text-md);line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.app{width:min(76rem,100% - var(--gutter) * 2);margin-inline:auto;padding-block:var(--space-2) var(--space-3);display:grid;gap:var(--space-3)}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.app-title{font-size:var(--text-lg);font-weight:700;letter-spacing:.02em}.layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:var(--space-3)}.panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-3) var(--space-2)}.icon-button{display:inline-grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;font-size:1.375rem;transition:background-color .2s ease}.icon-button:hover{background:var(--line-soft)}.text-button{border:0;background:transparent;padding:.5rem .75rem;border-radius:.75rem;color:var(--accent);font-size:var(--text-sm);font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}.text-button.with-icon{display:inline-flex;align-items:center;gap:.375rem}.text-button:hover{background:var(--line-soft)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
