@font-face{font-family:'Caveat Digits';src:url('fonts/CaveatDigits.ttf') format('truetype');font-weight:600;font-display:swap;unicode-range:U+30-39}

:root{
  --question-width:600px; --actions-width:360px;
  /* The example sheets' hand: a stroke starts slowly and lands softly; writing keeps an even pace. */
  --ease-pen:cubic-bezier(.5,0,.2,1); --ease-write:cubic-bezier(.35,.15,.25,1);
  /* Paper stays neutral regardless of the screen accent. */
  --paper:#FFFFFF; --ink:#202020; --ink2:#505050; --ink3:#595959; --guide:#A3A3A3;
  /* Ballpoint blue for the hand-filled example, so it reads as written, not printed. */
  --pen:#2A47A6;
}
.view{animation:enter var(--motion-enter) var(--ease-entrance) both}
@keyframes enter{from{opacity:.5;transform:translateY(var(--space-8))}to{opacity:1;transform:none}}
.start{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-64);align-items:center}
.start-copy{min-width:0}
.start h1{margin:0 0 var(--space-24)}
.start p{margin:0 0 var(--gap-block)}
.start p:has(+ .points){margin-bottom:var(--space-24)}
.points{list-style:none;margin:0 0 var(--gap-block);padding:0;display:flex;flex-direction:column;gap:var(--space-12);max-width:40ch;font:var(--type-compact);color:var(--muted)}
.points li{position:relative;padding-left:var(--space-20)}
.points li::before{content:'';position:absolute;left:0;top:7px;width:var(--space-8);height:var(--space-8);border-radius:var(--radius-capsule);background:var(--accent)}
.points b{color:var(--text);font-weight:600}
/* The button and its fine print share a row; on a phone the button goes full width above it. */
.cta{display:flex;align-items:center;gap:var(--gap-group)}
.start .fine{font:var(--type-meta);letter-spacing:var(--tracking-meta);color:var(--muted)}
/* The paper is the object, so it sits on the page with no card around it; the caption and
   controls line up with its edges. */
.sample{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-24);width:100%;max-width:400px;min-width:0;justify-self:center}
.frame{width:100%;aspect-ratio:210/279.4;min-height:0}
/* A paper-only shadow distinguishes the actual sheet from the app-like panel. */
/* Three example plans share the frame. The top leaf is filled in by hand, then curls away;
   while it curls, its shadow is a filter on the leaf so it follows the fold. */
.sample .frame{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.leaf{position:relative;z-index:30;height:100%}
.leaf.next{position:absolute;top:0;left:0;z-index:10}
/* Each sheet is its own layer, so a curl redraws only the clip, not the page. */
.sample .sheet{position:relative;box-shadow:0 1px 2px #0000000f,0 8px 24px #00000014;will-change:transform}
.flap-wrap{position:absolute;inset:0;pointer-events:none;visibility:hidden}
/* The fold's shadow on the page beneath: a gradient that only moves and fades. */
.fold-layer{position:absolute;top:0;left:0;width:210mm;height:279.4mm;transform-origin:0 0;transform:scale(var(--k,1));overflow:hidden;pointer-events:none;z-index:25;opacity:0;will-change:opacity}
.fold-shade{position:absolute;left:0;top:-360mm;width:40mm;height:720mm;transform-origin:0 50%;background:linear-gradient(to right,#00000047,#00000014 5mm,#00000005 16mm,transparent 40mm);will-change:transform}
/* The paper's back: a crease at the fold, then light falling off across the flap. */
.flap{position:absolute;left:-360mm;top:-360mm;width:360mm;height:720mm;transform-origin:100% 50%;background:linear-gradient(to left,#c4c4c4,#ececec 2.5mm,#fdfdfd 16mm,#f4f4f4 80mm,#e8e8e8 200mm)}
/* The carousel controls follow the APG basic pattern: play/pause comes first in the tab order
   (shown between the arrows), and its ring fills as the current example plays. They share the
   caption row: what the example is on the left, the controls on the right. */
.deck{display:flex;flex-direction:column;align-items:center;gap:var(--gap-group);width:100%}
.deck-controls{flex:none;display:flex;align-items:center;gap:var(--space-4);--chip:color-mix(in srgb,transparent,var(--text) 8%)}
.deck-controls button{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--radius-capsule);background:var(--chip);color:var(--text);cursor:pointer;transition:background var(--motion-micro) var(--ease-standard),transform var(--motion-micro) var(--ease-standard)}
.deck-controls button:hover{background:color-mix(in srgb,transparent,var(--text) 14%)}
.deck-controls button:active{transform:scale(.92)}
.deck-controls [data-go="-1"]{order:-1}
.deck-controls [data-go="1"]{order:1}
.deck-controls .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.play .icon{position:absolute}
.play .i-play{fill:currentColor;stroke-width:1.5}
/* Pause and play trade places with a quick fade and scale rather than a swap. */
.play .icon path{transform-origin:12px 12px;transition:opacity var(--motion-micro) var(--ease-standard),transform var(--motion-state) var(--ease-standard)}
.play:not(.paused) .i-play,.play.paused .i-pause{opacity:0;transform:scale(.6)}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.ring circle{fill:none;stroke-width:2.5}
.ring .track{stroke:color-mix(in srgb,transparent,var(--text) 14%)}
.ring .meter{stroke:var(--text);stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transform-origin:22px 22px}
.still .play{display:none}
.cap-stack{display:grid}
.cap-stack > span{grid-area:1/1;opacity:0;transition:opacity var(--motion-state) var(--ease-standard)}
.cap-stack > span.on,.cap-stack > span:first-child:not(:has(~ .on)){opacity:1}
.sample .caption{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-group);width:100%}
.caption-text{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;color:var(--muted);font:var(--type-caption);letter-spacing:var(--tracking-caption)}
.caption-text .cap-stack{font-weight:600;color:var(--text)}
.q{max-width:var(--question-width);margin:0 auto;display:flex;flex-direction:column;gap:var(--gap-block)}
.question-heading,.question-controls{display:flex;flex-direction:column;gap:var(--gap-pair);min-width:0}
.habit-controls{gap:var(--gap-group)}
.back{align-self:flex-start;background:none;border:0;color:var(--muted);font:var(--type-control);cursor:pointer;padding:var(--space-8) 0;min-height:var(--control-height)}
.back:hover{color:var(--accent)}
.q h2{font:var(--type-headline);font-optical-sizing:none;font-variation-settings:'opsz' 28,'wght' 600;letter-spacing:var(--tracking-headline);margin:0;text-wrap:balance}
.q h2:focus,.result h1:focus{outline:none}
.hint{margin:0;color:var(--muted);font:var(--type-compact)}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-pair)}
.options.stack{grid-template-columns:minmax(0,1fr)}
.opt{display:flex;min-width:0;overflow-wrap:anywhere;align-items:center;gap:var(--gap-pair);text-align:left;background:var(--surface);border:var(--stroke) solid var(--line);border-radius:var(--radius-control);padding:var(--space-8) var(--space-16);font:var(--type-body);cursor:pointer;min-height:var(--button-height-lg);transition:border-color var(--motion-micro) var(--ease-standard),background var(--motion-micro) var(--ease-standard)}
.opt:hover{border-color:var(--accent);background:var(--wash)}
.opt[aria-pressed="true"]{background:var(--selected);border-color:var(--accent);color:var(--text)}
.opt kbd{flex:none;width:var(--space-24);height:var(--space-24);border-radius:var(--radius-micro);border:var(--stroke) solid var(--line);display:inline-flex;align-items:center;justify-content:center;font:var(--type-micro);letter-spacing:var(--tracking-micro);color:var(--muted)}
.opt[aria-pressed="true"] kbd{border-color:var(--accent);color:var(--accent)}
.opt small{display:block;font:var(--type-meta);letter-spacing:var(--tracking-meta);color:var(--muted);margin-top:var(--gap-label)}
.field{display:flex;flex-direction:column;gap:var(--gap-pair)}
.field label{font:var(--type-control);color:var(--text)}
.text{min-width:0;background:var(--raised);border:var(--stroke) solid var(--line);border-radius:var(--radius-control);padding:0 var(--space-16);font:var(--type-body);width:100%;height:var(--button-height-lg)}
.text::placeholder{color:var(--muted);opacity:1}
.amount{display:flex;flex-direction:column;gap:var(--gap-group);width:min(100%,320px)}
.quantity{display:flex;align-items:center;min-height:calc(var(--button-height-lg) + var(--space-16));background:var(--raised);border:var(--stroke) solid var(--line);border-radius:var(--radius-control);padding:var(--space-4)}
.quantity button{flex:none;width:var(--button-height-lg);height:var(--button-height-lg);border:0;border-radius:var(--radius-control-sm);background:transparent;color:var(--muted);font:var(--type-title);cursor:pointer;padding:0}
.quantity button:hover:not(:disabled){background:var(--wash);color:var(--accent)}
.quantity button:disabled{opacity:.35;cursor:default}
.quantity input{flex:1;width:0;min-width:0;border:0;background:transparent;text-align:center;font:var(--type-metric);letter-spacing:var(--tracking-metric);font-variant-numeric:tabular-nums;padding:0}
.quantity input.long{font:var(--type-title)}
.quantity input::placeholder{color:var(--muted)}
.quantity input:focus{outline:none}
.quantity:focus-within{outline:var(--stroke-focus) solid var(--accent);outline-offset:var(--space-2)}
.quantity.invalid{border-color:var(--error)}
.quantity.invalid:focus-within{outline-color:var(--error)}
.unit-caption{align-self:flex-end;max-width:100%;overflow-wrap:anywhere;text-align:right;color:var(--muted);font:var(--type-body)}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:var(--button-height-lg);border:var(--stroke) solid var(--line);border-radius:var(--radius-control);overflow:hidden}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;justify-content:center;height:100%;padding:0 var(--space-8);font:var(--type-control);color:var(--text)}
.seg label+label span{border-left:var(--stroke) solid var(--line)}
.seg label:first-child span{border-radius:calc(var(--radius-control) - var(--stroke)) 0 0 calc(var(--radius-control) - var(--stroke))}
.seg label:last-child span{border-radius:0 calc(var(--radius-control) - var(--stroke)) calc(var(--radius-control) - var(--stroke)) 0}
.seg input:checked+span{background:var(--selected);color:var(--text);box-shadow:inset 0 0 0 var(--stroke) var(--accent)}
.seg input:focus-visible+span{outline:var(--stroke-focus) solid var(--accent);outline-offset:calc(-1 * var(--space-4))}
.narrow{max-width:280px;width:100%}
.actions.spaced{margin-top:var(--gap-block)}
.error{display:flex;align-items:flex-start;gap:var(--gap-pair);padding:var(--space-12) var(--space-16);background:color-mix(in srgb,var(--surface),var(--error) 6%);border:var(--stroke) solid color-mix(in srgb,var(--surface),var(--error) 25%);border-radius:var(--radius-control);color:var(--text);font:var(--type-compact)}
.error svg{flex:none;width:var(--space-20);height:var(--space-20);color:var(--error)}
.error p{margin:0}
.actions{display:flex;align-items:center;gap:var(--gap-group);flex-wrap:wrap}
.primary{min-width:176px}
.primary:disabled{background:var(--disabled);border-color:var(--line);color:var(--muted);cursor:not-allowed}
a.secondary[aria-busy]{cursor:progress}
.keyhint{color:var(--muted);font:var(--type-meta);letter-spacing:var(--tracking-meta)}
.linkish{background:none;border:0;padding:var(--space-8) 0;min-height:var(--control-height);color:var(--accent);font:var(--type-control);text-decoration:underline;text-underline-offset:var(--space-4);cursor:pointer;align-self:flex-start}
/* Header with its actions, the app strip, then the sheet full width. */
.result{display:flex;flex-direction:column;gap:var(--gap-block)}
.result-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--actions-width));gap:var(--space-48);align-items:end}
.result h1{font:var(--type-headline);font-optical-sizing:none;font-variation-settings:'opsz' 28,'wght' 600;letter-spacing:var(--tracking-headline);margin:0;text-wrap:balance}
.result-intro{display:flex;flex-direction:column;gap:var(--gap-group)}
.result-intro > p{margin:0;color:var(--muted);font:var(--type-body);max-width:46ch}
/* One wide print action over two equal halves. */
.result .actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-pair);width:100%}
.result .actions .primary{grid-column:1 / -1;min-width:0}
.result .sheet{box-shadow:0 1px 4px #00000014}
.share-tool{display:flex;flex-direction:column;align-items:center;padding:var(--space-8) var(--gap-block);border:var(--stroke) solid color-mix(in srgb,var(--surface),var(--accent) 30%);border-radius:var(--radius-card);background:var(--selected);color:var(--text);font:var(--type-compact)}
.share-link{display:inline-flex;align-items:center;align-self:center;gap:6px}
.share-link svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-card{display:flex;flex-direction:column;gap:var(--gap-block);padding:var(--gap-block)}
.app-top{display:flex;align-items:center;gap:var(--space-20)}
.app-intro{flex:1;min-width:0}
.app-card h2{font:var(--type-title);letter-spacing:var(--tracking-title);margin:0 0 var(--gap-label)}
.app-card p{font:var(--type-compact)}
.features{list-style:none;margin:0;padding:var(--gap-block) 0 0;border-top:var(--stroke) solid color-mix(in srgb,var(--on-night) 14%,transparent);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-block)}
.features li{min-width:0;display:flex;flex-direction:column;gap:var(--gap-pair)}
.features h3{margin:0;font:var(--type-control);text-wrap:balance}
.feature-icon{display:none;width:var(--space-24);height:var(--space-24);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.landing-app{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-20);padding:var(--gap-block);margin-top:var(--section-space)}
.landing-app h2{font:var(--type-title);margin:0 0 var(--space-4)}
.landing-app p{font:var(--type-compact)}
/* Screen layout adapts around the paper; the sheets keep their physical layout. */
@media screen{
  .result-intro,.store-buttons{min-width:0}
  .cta{flex-wrap:wrap}
  .sample .caption{flex-wrap:wrap}
  .caption-text{flex:1 1 140px}
  .result-intro,.app-card p{overflow-wrap:anywhere}
  .result .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result .secondary{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:center}
}
@media screen and (max-width:1023px){
  .start{grid-template-columns:minmax(0,1fr);gap:var(--space-48)}
  .start-copy{width:100%;max-width:var(--question-width);justify-self:center}
  .start p,.points{max-width:none}
  .sample{max-width:420px}
  .cta .fine{line-height:1.5}
  .landing-app{grid-template-columns:minmax(0,1fr)}
  .landing-app .store-buttons{grid-column:1/-1}
  .result-head{grid-template-columns:minmax(0,1fr);gap:var(--space-24)}
  .result .actions{max-width:var(--question-width)}
  .app-top{flex-wrap:wrap}
  .app-top .store-buttons{flex-basis:100%}
  .features{grid-template-columns:minmax(0,1fr);gap:var(--space-20)}
  .features li{display:grid;grid-template-columns:var(--space-24) minmax(0,1fr);gap:var(--gap-label) var(--gap-group)}
  .feature-icon{display:block;grid-row:span 2}
}
@media screen and (pointer:coarse),screen and (max-width:480px){
  .keyhint,.opt kbd{display:none}
  .deck-controls button{width:var(--control-height);height:var(--control-height)}
}
@media screen and (max-width:480px){
  .start{gap:var(--gap-block)}
  .cta .fine{text-align:center}
  .sample{max-width:none;gap:var(--space-16)}
  .sample .caption{gap:var(--space-8)}
  .caption-text{flex-basis:120px}
  .deck-controls{gap:var(--space-2)}
  .landing-app{padding:var(--card-pad);gap:var(--gap-group)}
  .cta{flex-direction:column;align-items:stretch;gap:var(--gap-pair)}
  #days{grid-template-columns:minmax(0,1fr)}
  .actions,.actions .primary,.result .secondary,.cta .primary,.amount{width:100%}
  .actions{gap:var(--gap-pair)}
  .result .actions{grid-template-columns:minmax(0,1fr)}
  .q,.result{gap:var(--space-24)}
  .app-card{padding:var(--card-pad);gap:var(--space-24)}
  .share-tool{flex-direction:column;padding:var(--space-16) var(--card-pad) var(--space-4)}
  .features{padding-top:var(--space-24)}
  .text[type="date"]{max-width:100%;appearance:none;-webkit-appearance:none}
}


/* The screen preview includes paper edges. Printing uses its own unscaled sheet. */
#printSheet{display:none}
.sheet{width:210mm;height:279.4mm;padding:15mm 13mm 13mm;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:8.5pt;line-height:1.3;text-align:left;
  display:flex;flex-direction:column;overflow:hidden;transform-origin:0 0;transform:scale(var(--k,1));-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sheet b{font-weight:700}
.sheet .lbl{font-size:6.5pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.sheet .upto{font-size:6.5pt;color:var(--ink2);font-weight:500}

.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:8mm;padding-bottom:4mm}
.hd-l{flex:1;display:flex;flex-direction:column;gap:1mm;min-width:0}
.wm{font-family:var(--f-display);font-weight:600;font-size:14pt;letter-spacing:0;font-optical-sizing:none;font-variation-settings:'opsz' 19,'wght' 600}
.ttl{font-family:var(--f-display);font-weight:600;font-size:27pt;line-height:1.1;letter-spacing:-.3pt;font-optical-sizing:none;font-variation-settings:'opsz' 34,'wght' 600}
.flds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2mm;margin-top:3.5mm}
.fld{border:0.5pt solid var(--guide);padding:1.3mm 2.2mm;display:flex;flex-direction:column;gap:.3mm;min-width:0}
.fld .fv{font-weight:600;font-size:9pt;overflow-wrap:anywhere}
.chart{width:64mm;height:44mm;display:block;flex:none}

.how{border-top:0.5pt solid var(--ink);border-bottom:0.5pt solid var(--ink);padding:2.7mm 0;display:grid;grid-template-columns:25mm minmax(0,1fr);gap:3mm;font-size:8.75pt;color:#1a1a1a}
.how .lbl{font-size:7pt}
.how ol{margin:0;padding-left:4.25mm;display:grid;gap:1.05mm}

.rows{flex:1;display:flex;flex-direction:column;margin-top:3mm;min-height:0;border-bottom:0.75pt solid var(--ink)}
.row{flex:1 1 0;display:flex;gap:3mm;border-top:0.75pt solid var(--ink);padding:1.6mm 0 1.4mm;min-height:0}
.rail{width:25mm;flex:none;display:flex;flex-direction:column;gap:.8mm}
.r-w{font-size:7pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.r-d{font-size:7.5pt;color:var(--ink2)}
/* The examples are shown small, so their date ranges step down to keep the week rail tidy. */
.sample .r-d{font-size:6.75pt}
.r-amt{display:flex;flex-direction:column;margin-top:1mm}
.r-amt .big.long{font-size:16pt}
.r-amt .big{font-weight:600;font-size:20pt;overflow-wrap:anywhere;line-height:1.15;font-variant-numeric:tabular-nums}
.dcols{flex:1;display:flex;min-width:0}
.dc{flex:1;min-width:0;border-left:0.5pt solid var(--guide);padding:0 1.5mm;display:flex;flex-direction:column;gap:.7mm}
.dh{display:flex;align-items:baseline;justify-content:space-between;gap:1mm}
.dw{font-size:6.5pt;font-weight:700;letter-spacing:.1em;color:var(--ink2)}
.dn{font-size:8.5pt;font-weight:700}
.al{font-size:9pt;font-variant-numeric:tabular-nums}
.al b{font-size:10pt}
.al.long b{font-size:8pt}
.bd{flex:1;min-height:9mm;display:flex;flex-direction:column;justify-content:space-evenly}
.bd i{display:block;border-bottom:0.5pt dotted var(--guide)}
.ln{display:flex;align-items:flex-end;min-height:5.5mm;font-size:6.5pt;font-weight:600;color:var(--ink2)}
/* The intro's example sheet only: tallies rest on the first rule, totals beside the label. */
.bd{position:relative}
.ink-tally{position:absolute;left:0;bottom:40%;width:13.2mm;height:12mm;overflow:visible}
.ink-tally path{fill:none;stroke:var(--pen);stroke-width:.72;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.1;stroke-dashoffset:1.05;transition:stroke-dashoffset 140ms var(--ease-pen)}
.ink-tally path.on{stroke-dashoffset:0}
.ink-total,.ink-entry{clip-path:inset(0 100% 0 0);transition:clip-path 280ms var(--ease-write)}
.ink-total.on,.ink-entry.on{clip-path:inset(0 0% 0 0)}
.instant *{transition:none!important}
.ink-total,.ink-entry{font-family:'Caveat Digits',cursive;font-weight:600;line-height:1;color:var(--pen);white-space:nowrap}
/* The negative top margin keeps the large figure from deepening the total line. */
.ink-total{display:inline-block;margin:-4mm 0 0 1.5mm;font-size:26pt}
.ink-total.long{font-size:17pt}
.ink-entry{position:absolute;right:1mm;font-size:14pt}

.ft{margin-top:4mm;display:flex;align-items:center;justify-content:space-between;gap:8mm}
.sheet-note{margin:0;max-width:100mm;font-size:7pt;line-height:1.4;color:var(--ink2)}
.qr{flex:none;display:flex;align-items:center;gap:2mm;font-size:6.5pt;line-height:1.3;color:var(--ink2);text-align:right}
.qr svg{flex:none;width:18mm;height:18mm}
.qr-copy{display:flex;flex-direction:column;gap:1mm}
.qr-url{font-weight:600;color:var(--ink);white-space:nowrap}

@media print{
  @page{margin:12mm}
  html,body{background:#fff!important;display:block;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important}
  /* Percentages follow the printable page height; Safari keeps vh tied to the screen. */
  html{height:100%!important}
  body{height:calc(100% - 1px)!important;display:flex!important;align-items:center;justify-content:center}
  body > :not(#printSheet){display:none!important}
  /* A smaller writing area leaves generous headroom for Safari's print preview,
     including A4/Letter borderless presets. Auto margins center it on both axes. */
  #printSheet{display:flex!important;width:174mm;height:212mm;padding:0;box-shadow:none!important;margin:auto;break-inside:avoid;page-break-inside:avoid}
}