.plan { --c: #2F7FCF; --c-tint: #DAE9F8; --c-ink: #1B5795; --plan-ink: #211F1B; --plan-ink-2: #5E584E; --plan-rule: #ECE7DF; --plan-done: #2F7D3B;
  position: absolute; box-sizing: border-box; width: 15.2em; margin: 0; padding: .54em .62em .6em; border-radius: .78em;
  background: #FFFFFF; color: var(--plan-ink); font-family: var(--sans, "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-weight: 500; line-height: 1.2; letter-spacing: -.01em; text-align: left; -webkit-font-smoothing: antialiased;
  box-shadow: 0 0 0 .035em rgba(33, 31, 27, .08), 0 .08em .2em rgba(33, 31, 27, .08), 0 1.1em 2.2em -.75em rgba(33, 31, 27, .5);
  transform-origin: 50% 100%; will-change: transform, opacity; pointer-events: none; }
.plan.amber { --c: #D98A1C; --c-tint: #FAE7C6; --c-ink: #82520A; }
.plan.plum { --c: #9A4B86; --c-tint: #F1DDEC; --c-ink: #743063; }
.plan.sky { --c: #2F7FCF; --c-tint: #DAE9F8; --c-ink: #1B5795; }
.plan * { box-sizing: border-box; }
:where(.plan) :where(p, ul) { margin: 0; padding: 0; }

.plan-act { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: .34em; margin-top: .46em; }
.plan-btn { position: relative; display: flex; align-items: center; justify-content: center; height: 1.8em; border-radius: 999px;
  font-weight: 700; white-space: nowrap; will-change: transform, opacity; }
.plan-btn > b { position: relative; font-weight: 700; }
.plan-btn i { position: absolute; pointer-events: none; }
.plan-btn .ripw { inset: 0; border-radius: inherit; overflow: hidden; }
.plan-btn .rip { left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 0 36%, rgba(255, 255, 255, .55) 56%, rgba(255, 255, 255, .2) 66%, rgba(255, 255, 255, 0) 74%); }
.plan-btn .lit { inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .22); opacity: 0; }
.plan-btn .glow { inset: 0; border-radius: inherit; opacity: 0;
  box-shadow: 0 0 0 .1em color-mix(in srgb, var(--c) 34%, transparent), 0 0 .8em .25em color-mix(in srgb, var(--c) 42%, transparent); }
.plan-btn.ok { padding-left: 1.4em; background: var(--c); color: #FFFFFF;
  box-shadow: 0 .04em .08em color-mix(in srgb, var(--c) 40%, transparent), 0 .36em .64em -.36em color-mix(in srgb, var(--c) 90%, transparent); }
.plan-btn.ok::before { content: ""; position: absolute; left: .22em; top: 50%; width: 1.3em; height: 1.3em; margin-top: -.65em; border-radius: 50%;
  background: #FBF3E3 url("../mascot.webp") 50% -.07em / auto 1.55em no-repeat; box-shadow: 0 0 0 .07em rgba(255, 255, 255, .55); }
.plan-btn.edit { padding-left: .9em; background: var(--c-tint); color: var(--c-ink); }
.plan-btn.edit::before { content: ""; position: absolute; left: .62em; top: 50%; width: .78em; height: .78em; margin-top: -.39em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.2 4.6l4.2 4.2L8.6 19.6 3.6 20.4l.8-5z' fill='none' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.2 4.6l4.2 4.2L8.6 19.6 3.6 20.4l.8-5z' fill='none' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan-pill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .36em; border-radius: 999px;
  background: #F1F7EF; color: #23602E; font-weight: 700; white-space: nowrap; opacity: 0; will-change: transform, opacity;
  box-shadow: inset 0 0 0 .06em rgba(47, 125, 59, .32); }
.plan-ring { position: relative; flex: none; width: 1.22em; height: 1.22em; border-radius: 50%; background: #E3F0E0; }
.plan-ring svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.plan-ring .tick { opacity: 0; fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.plan-say { position: relative; display: grid; }
.plan-say > span { grid-area: 1 / 1; will-change: transform, opacity; }
.plan-say .did { opacity: 0; }

.plan.still .plan-btn { opacity: 0; }
.plan.still .plan-pill, .plan.still .plan-say .did, .plan.still .plan-ring .tick { opacity: 1; }
.plan.still .plan-say .doing { opacity: 0; }
.plan.still .plan-ring { background: var(--plan-done); }

.plan.doc { --pd-ground: #FAF8F4; --pd-line: #ECE7DF; --pd-ink-2: #5E584E; --pd-ink-3: #8A8174;
  display: flex; flex-direction: column; width: 30.6em; padding: 0; font-size: 17px; line-height: 1.28; border-radius: .9em; overflow: hidden; }
.plan.doc svg.pi { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plan.doc .fill { fill: currentColor; stroke: none; }
.pd-hd { flex: none; display: flex; align-items: center; gap: .55em; padding: .8em 1.1em .7em; border-bottom: .06em solid var(--pd-line); background: #FFFFFF; }
.pd-hd .pd-app { flex: none; display: block; width: 1.85em; height: 1.85em; padding: .36em; border-radius: .55em; background: #FFFFFF; box-shadow: 0 0 0 .06em rgba(33, 31, 27, .12), 0 .08em .2em rgba(33, 31, 27, .1); }
.pd-hd .pd-title { min-width: 0; font-size: 1.22em; font-weight: 750; letter-spacing: -.018em; white-space: nowrap; }
.pd-hd .pd-tag { margin-left: auto; flex: none; display: flex; align-items: center; gap: .3em; padding: .2em .6em .22em .45em; border-radius: 999px; background: var(--c-tint); color: var(--c-ink); font-size: .88em; font-weight: 700; }
.pd-hd .pd-tag i { display: block; width: 1em; height: 1em; }
.pd-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #FFFFFF; }
.pd-scroll { position: relative; padding: .2em 1.1em 1.1em; will-change: transform; }
.pd-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.8em; pointer-events: none; opacity: var(--pd-more, 0);
  background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF); }
.pd-sec { margin-top: .95em; }
.pd-h { display: flex; align-items: center; gap: .4em; margin-bottom: .5em; font-size: .88em; font-weight: 700; color: var(--pd-ink-2); }
.pd-h i { flex: none; display: block; width: 1.15em; height: 1.15em; color: var(--c); }
.pd-goal { padding: .62em .8em .66em; border-radius: .6em; background: color-mix(in srgb, var(--c-tint) 55%, #FFFFFF); box-shadow: inset .22em 0 0 var(--c);
  font-size: 1.05em; font-weight: 650; letter-spacing: -.012em; text-wrap: balance; }
.pd-found { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.pd-chip { position: relative; min-width: 0; padding: .55em .6em .6em; border-radius: .7em; background: var(--pd-ground); box-shadow: inset 0 0 0 .06em var(--pd-line); }
.pd-chip.wide { grid-column: span 2; }
.pd-chip .row { display: flex; align-items: center; gap: .36em; min-width: 0; }
.pd-chip .mk { flex: none; display: block; width: 1.3em; height: 1.3em; padding: .2em; border-radius: .38em; background: #FFFFFF; box-shadow: 0 0 0 .06em rgba(33, 31, 27, .1); }
.pd-chip .t { font-size: .88em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-chip .s { font-size: .88em; color: var(--pd-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-chip .big { margin-top: .12em; font-size: 1.5em; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pd-chip .due { display: inline-block; margin-top: .3em; padding: .12em .45em .14em; border-radius: 999px; background: #FFF2D9; color: #945500; font-size: .88em; font-weight: 700; white-space: nowrap; }
.pd-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25em; margin-top: .45em; }
.pd-days span { display: grid; justify-items: center; gap: .02em; padding: .3em 0 .32em; border-radius: .45em; background: #FFFFFF; box-shadow: inset 0 0 0 .06em var(--pd-line); }
.pd-days small { font-size: .88em; color: var(--pd-ink-3); font-weight: 600; }
.pd-days b { font-size: 1.15em; font-weight: 800; }
.pd-days span.open { background: #E6F2E3; box-shadow: inset 0 0 0 .08em rgba(47, 125, 59, .45); }
.pd-days span.open small { color: #2F7D3B; }
.pd-open { margin-top: .32em; font-size: .88em; font-weight: 700; color: #2F7D3B; }
.pd-bars { display: grid; gap: .3em; margin-top: .42em; }
.pd-bar { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 .4em; font-size: .88em; }
.pd-bar b { font-weight: 800; }
.pd-bar span { color: var(--pd-ink-2); white-space: nowrap; }
.pd-bar i { grid-column: 1 / -1; display: block; height: .5em; border-radius: 99px; background: #DDD6CB; }
.pd-bar.this i { background: var(--c); }
.pd-delta { position: absolute; right: .55em; top: .5em; padding: .08em .4em .1em; border-radius: 999px; background: #E6F2E3; color: #23602E; font-size: .88em; font-weight: 800; }
.pd-chip .t.wrap { white-space: normal; text-wrap: balance; }
.pd-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: .4em; border-radius: .45em; object-fit: cover; }
.pd-faces { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em .26em; margin-top: .45em; }
.pd-face { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.pd-face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .07em #FFFFFF; }
.pd-face.q img { box-shadow: 0 0 0 .1em #FFFFFF, 0 0 0 .22em var(--c); }
.pd-face.q i { position: absolute; right: -.18em; top: -.18em; width: .95em; height: .95em; padding: .12em; border-radius: 50%; background: var(--c); color: #FFFFFF; box-shadow: 0 0 0 .08em #FFFFFF; }
.pd-legend { display: flex; flex-wrap: wrap; gap: .1em .9em; margin-top: .5em; font-size: .88em; color: var(--pd-ink-2); }
.pd-legend span { display: flex; align-items: center; gap: .35em; white-space: nowrap; }
.pd-legend b { color: var(--plan-ink); font-weight: 800; }
.pd-legend i { display: block; width: .78em; height: .78em; border-radius: 50%; }
.pd-legend .lq i { background: #FFFFFF; box-shadow: inset 0 0 0 .16em var(--c); }
.pd-legend .lc i { color: #D8504A; }
.pd-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.pd-step { position: relative; display: grid; grid-template-columns: 1.7em minmax(0, 1fr) auto; align-items: center; gap: .65em; padding: .5em .45em; margin: 0 -.45em; border-radius: .6em; }
.pd-step + .pd-step::before { content: ""; position: absolute; left: 2.6em; right: .45em; top: 0; height: .06em; background: var(--pd-line); }
.pd-step .lit { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--c-tint) 60%, transparent); opacity: 0; }
.pd-step .n { position: relative; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--c-tint); color: var(--c-ink); font-size: .88em; font-weight: 800; }
.pd-step .w { position: relative; font-weight: 600; text-wrap: pretty; }
.pd-step .pc { position: relative; display: flex; align-items: center; gap: .45em; padding: .32em .55em .32em .34em; border-radius: .6em; background: #FFFFFF; box-shadow: 0 0 0 .06em var(--pd-line), 0 .08em .2em -.06em rgba(33, 31, 27, .18); }
.pd-step .pc .ic { flex: none; display: block; width: 1.8em; height: 1.8em; padding: .38em; border-radius: .5em; background: var(--c-tint); color: var(--c-ink); }
.pd-step .pc .ic.red { background: #FCE3E0; color: #D8504A; }
.pd-step .pc .ic.amber { background: #FFF2D9; color: #945500; }
.pd-step .pc .ic.green { background: #E6F2E3; color: #2F7D3B; }
.pd-step .pc .tx { display: grid; line-height: 1.12; }
.pd-step .pc .tx b { font-size: .88em; font-weight: 800; white-space: nowrap; }
.pd-step .pc .tx span { font-size: .88em; color: var(--pd-ink-2); white-space: nowrap; }
.pd-step .pc .cal { flex: none; display: grid; width: 2.3em; border-radius: .42em; overflow: hidden; text-align: center; background: #FFFFFF; box-shadow: 0 0 0 .06em var(--pd-line); }
.pd-step .pc .cal small { display: block; padding: .05em 0 .08em; background: #D8504A; color: #FFFFFF; font-size: .88em; font-weight: 800; line-height: 1.1; }
.pd-step .pc .cal b { display: block; padding: .04em 0 .1em; font-size: 1.1em; font-weight: 800; line-height: 1.1; }
.pd-step .pc .up { display: flex; align-items: center; gap: .25em; font-size: .88em; font-weight: 800; white-space: nowrap; }
.pd-step .pc .up s { text-decoration: none; color: var(--pd-ink-3); font-weight: 700; }
.pd-step .pc .up i { display: block; width: .9em; height: .9em; color: #2F7D3B; }
.pd-mail { border-radius: .7em; background: #FFFFFF; box-shadow: 0 0 0 .06em var(--pd-line), 0 .1em .3em -.1em rgba(33, 31, 27, .16); overflow: hidden; }
.pd-mail .hd { display: grid; gap: .1em; padding: .5em .8em .48em; border-bottom: .06em solid var(--pd-line); background: var(--pd-ground); font-size: .88em; }
.pd-mail .hd span { color: var(--pd-ink-2); }
.pd-mail .hd b { color: var(--plan-ink); font-weight: 700; }
.pd-mail .bd { display: grid; gap: .16em; padding: .65em .8em .75em; }
.pd-mail .bd p { position: relative; display: grid; }
.pd-mail .bd p > span { grid-area: 1 / 1; }
.pd-replies { display: grid; gap: .55em; }
.pd-reply { display: grid; grid-template-columns: 1.9em minmax(0, 1fr); gap: .1em .55em; align-items: start; }
.pd-reply img { grid-row: span 2; display: block; width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; }
.pd-reply .qq { min-width: 0; font-size: .88em; color: var(--pd-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-reply .qq b { color: var(--plan-ink); font-weight: 700; }
.pd-reply .aa { justify-self: start; max-width: 100%; padding: .32em .65em .36em; border-radius: .9em .9em .9em .25em; background: var(--c-tint); color: var(--c-ink); font-weight: 650; }
.pd-ft { flex: none; padding: .7em 1.1em .85em; border-top: .06em solid var(--pd-line); background: #FFFFFF; }
.pd-ft .plan-act { margin-top: 0; grid-template-columns: 1.7fr 1fr; gap: .45em; }
.pd-ft .plan-btn { height: 2.45em; }
.pd-ft .plan-btn.ok { padding-left: 2em; }
.pd-ft .plan-btn.ok::before { left: .3em; width: 1.85em; height: 1.85em; margin-top: -.925em; background-size: auto 2.2em; background-position: 50% -.1em; }
.pd-ft .plan-ring { width: 1.5em; height: 1.5em; }

.plan.doc.wide { width: auto; }
.plan.doc.wide .pd-hd { padding: .75em 1.25em .65em; }
.plan.doc.wide .pd-scroll { padding: 0 1.25em 1.05em; }
.plan.doc.wide .pd-sec { margin-top: .85em; }
.plan.doc.wide .pd-goal { display: inline-block; padding-right: 1.4em; }
.plan.doc.wide .pd-found { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65em; }
.plan.doc.wide .pd-thumb { aspect-ratio: auto; height: 4.6em; }
.plan.doc.wide .pd-faces { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3em; }
.plan.doc.wide .pd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.6em; align-items: start; }
.plan.doc.wide .pd-ft { display: flex; justify-content: flex-end; padding: .65em 1.25em .75em; }
.plan.doc.wide .pd-ft .plan-act { width: 22em; }