:root{--bg: #F2F8FA;--fg: #12303D;--muted: #4A6876;--accent: #7CC4DC;--link: #1F6F86;--page: 800px;--line: #9CB8C4;--hair: #D3E5EC;--ring: #9CCFE0;--ring-soft: #C3E1EC;--hold: #E8B25A}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 Hanken Grotesk,system-ui,sans-serif}#app{min-height:100dvh;display:flex;flex-direction:column}main{flex:1;width:100%;max-width:var(--page);margin:0 auto;padding:16px 20px 24px}h1,h2{font-weight:300}h2{font-size:1.6rem}h3{margin-top:28px;font-size:1rem;font-weight:600;color:var(--muted)}.title{margin:24px 0 0;font-size:30px}.center{text-align:center}a,.link{color:var(--link)}.link{background:none;border:0;padding:0;font:inherit;text-decoration:underline}.card{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:16px;margin:12px 0}.note{color:var(--muted);font-size:14px;margin:6px 0}.big{font-size:64px;font-weight:300;font-variant-numeric:tabular-nums;text-align:center}.btn{min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--fg);color:var(--bg);font:inherit;font-weight:600;margin:4px 8px 4px 0}.btn.ghost{background:none;color:var(--fg);border:1px solid var(--line)}.btn.wide{width:240px;min-height:56px;font-size:17px;margin:0}.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--fg);font:inherit;font-weight:600}.icon-btn.bare{border-color:transparent;font-size:26px;line-height:1;display:grid;place-items:center}.btn:focus-visible,.icon-btn:focus-visible,.brand:focus-visible,.menu-item:focus-visible,.link:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.step{padding:6px 0}.stepper{display:flex;align-items:center;gap:8px}.stepper output{min-width:3.5ch;text-align:center;font-variant-numeric:tabular-nums}.stack{display:flex;flex-direction:column;align-items:center;gap:16px;margin:32px 0 24px}.faq{border-bottom:1px solid var(--hair);scroll-margin-top:calc(56px + env(safe-area-inset-top))}.faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;cursor:pointer;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";flex:none;width:44px;height:44px;display:grid;place-items:center;font-size:24px;font-weight:300;color:var(--muted)}.faq[open] summary:after{content:"–"}.faq summary:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.faq h3{margin:0;color:var(--fg);font-size:1.15rem}.faq p{margin:8px 0}.faq>.note:last-child{margin-bottom:16px}.narrow{max-width:480px}.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0}.cal .dow{text-align:center;color:var(--muted);font-size:12px}.day{border:1px solid var(--hair);border-radius:8px;min-height:52px;padding:4px 6px;font-size:12px;display:flex;flex-direction:column;gap:2px;overflow:hidden}.day:not(.past):not(.empty){width:100%;text-align:left;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer}.day:not(.past):not(.empty):hover{border-color:var(--line)}.day.empty{border:0}.day.past{color:var(--muted)}.day.today{border-color:var(--fg);border-width:2px}.day span{line-height:1.2;overflow-wrap:break-word}.month-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;font-weight:600;text-transform:capitalize}.month-actions{display:flex;align-items:center;gap:4px}.month-actions .icon-btn{width:40px;height:40px}.month-actions .icon-btn[data-v="0"]{width:auto;padding:0 12px;border-radius:999px;font-size:14px}.plan-slot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0}.plan-slot select,.day-editor select{min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}.day-editor{margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:12px}.day-editor select{display:block;width:100%;margin:8px 0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.cards .card{margin:0}.bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;background:var(--bg);border-bottom:1px solid var(--hair);padding:calc(6px + env(safe-area-inset-top)) max(12px,calc((100% - var(--page)) / 2 + 8px)) 6px max(20px,calc((100% - var(--page)) / 2 + 20px))}.brand{background:none;border:0;padding:8px 0;font:inherit;font-size:17px;font-weight:600;color:var(--fg)}.drawer{max-width:none;max-height:none;height:100dvh;width:min(320px,86vw);margin:0 0 0 auto;padding:0;border:0;background:var(--bg);color:var(--fg);box-shadow:-8px 0 24px #12303d24}.drawer::backdrop{background:#12303d59}.drawer[open]{animation:slide-in .18s ease-out}.drawer-body{padding:calc(12px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom))}.drawer-body .row{padding:0 12px 8px 24px}.drawer nav{display:flex;flex-direction:column;margin-top:8px}.drawer #install-slot{padding:16px 24px 0}.menu-item{min-height:52px;padding:0 24px;text-align:left;border:0;background:none;font:inherit;font-size:18px;color:var(--fg)}.menu-item[aria-current=page]{font-weight:600;background:var(--hair)}@keyframes slide-in{0%{transform:translate(24px);opacity:0}}@media(prefers-reduced-motion:reduce){.drawer[open]{animation:none}}.foot{width:100%;max-width:var(--page);margin:0 auto;padding:20px 20px calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--hair)}.foot .note{font-size:13px}.stage{position:relative;width:min(300px,80vw);aspect-ratio:1;margin:0 auto}.stage>*{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%}.outline{border:1.5px solid var(--ring)}.outline.inner{top:25%;right:25%;bottom:25%;left:25%;border-color:var(--ring-soft)}.disc{top:13%;right:13%;bottom:13%;left:13%;background:var(--accent)}.ring{background:var(--accent);transform:scale(.5)}.ring.hold{background:var(--hold)}.ring.rest{background:var(--ring)}.stage-text{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.stage-text b{font-size:22px;font-weight:600}.stage-text span{font-size:15px}@media(prefers-reduced-motion:reduce){.ring{transition:none!important}}@media(min-width:700px){.stage{width:min(360px,55dvh)}}.run{min-height:100dvh;display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 16px calc(32px + env(safe-area-inset-bottom))}.run .stage{width:min(340px,86vw);margin:auto}.run .stage-text .big{font-size:96px;line-height:1}.phase{font-size:20px;font-weight:600;margin-top:8px}@media(min-width:700px){.run .stage{width:min(440px,60dvh)}.run .stage-text .big{font-size:120px}}
