:root{
  --desk:#EFEEEA; --paper:#F8F7F3; --ink:#111110; --ink-2:#7A7873; --ink-3:#BEBBB4; --rule:#D5D2CB; --accent:#E2231A;
  --f-swiss:"Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif;
  --f-ui:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --hair:max(.5px, .09cqw);
  --sheet-shadow:0 .5px 1px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05), 0 24px 56px -14px rgba(0,0,0,.14);
  --panel:rgba(247,247,245,.94); --group:rgba(255,255,255,.82); --sep:rgba(0,0,0,.08); --fill:rgba(0,0,0,.05); --thumb:#fff;
  --chrome-fg:#1D1D1F; --chrome-fg-2:rgba(29,29,31,.64); --glass-line:rgba(0,0,0,.08); --glass-hi:rgba(255,255,255,.85);
  --btn:#1D1D1F; --btn-fg:#fff; --focus:rgba(0,113,227,.6); --dock-shadow:0 14px 44px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  --ctl-h:32px; --ctl-fs:12px; --menu-x:16px;
}
button{ font:inherit; color:inherit }
[hidden]{ display:none !important }
*,*::before,*::after{ box-sizing:border-box }
html{ background:var(--desk); -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--desk); color:var(--ink); font:15px/1.5 var(--f-ui); -webkit-font-smoothing:antialiased }
.col{ width:min(100%, 892px); margin:0 auto; padding:0 16px }
.portrait .col{ width:min(100%, 632px) }
.top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; padding-bottom:18px }
.mark{ font:700 16px/1 var(--f-swiss); letter-spacing:-.015em; color:var(--ink); text-decoration:none }
.print{ display:inline-block; height:36px; padding:0 18px; border:0; border-radius:999px; background:#1D1D1F; color:#fff; font:600 14px/36px var(--f-ui); text-decoration:none; white-space:nowrap; cursor:pointer }
.print:hover{ opacity:.88 }
.actions{ display:inline-grid; grid-template-columns:1fr 1fr; gap:8px; flex:none }
.print, .customize{ text-align:center }
.customize{ display:block; height:36px; padding:0 18px; border-radius:999px; background:var(--fill); color:var(--chrome-fg-2); font:600 14px/36px var(--f-ui); text-decoration:none; white-space:nowrap }
.customize:hover{ color:var(--chrome-fg) }
/* ───────── Sheet ───────── */
.sheet{
  --weekend:var(--accent); --holiday:var(--accent);
  position:relative; flex:none;
  width:min(100%, 1500px, calc((100vh - var(--top) - var(--bottom)) * var(--ratio)));
  width:min(100%, 1500px, calc((100dvh - var(--top) - var(--bottom)) * var(--ratio)));
  aspect-ratio:var(--ar);
  background:var(--paper); color:var(--ink);
  border-radius:2px; box-shadow:var(--sheet-shadow);
  container-type:inline-size; overflow:hidden;
  transition:background-color .3s, color .3s;
}
.stage > .sheet{ animation:sheet-in .8s cubic-bezier(.16,.84,.24,1) both }
.sheet[data-accent="red"]{ --accent:#E2231A }
.sheet[data-accent="orange"]{ --accent:#FF5A1F }
.sheet[data-accent="green"]{ --accent:#0E8E54 }
.sheet[data-accent="blue"]{ --accent:#1E4FDB }
.sheet[data-accent="purple"]{ --accent:#7A40D9 }
.sheet:not(.hol-color){ --holiday:var(--ink) }
/* The gray accent sits a step darker on the month and week pages (larger type, more room); the year view keeps the lighter gray */

.sheet-body{
  position:relative; height:100%;
  display:flex; flex-direction:column;
  padding:var(--pt) var(--px) var(--pb);
  font-family:var(--f-swiss);
}
.sheet[data-layout="grid"][data-orient="portrait"]{ --pt:6.6cqw; --px:6.6cqw; --pb:7cqw; --hg:6cqw; --ys:9.4cqw; --cols:3; --rows:4; --cg:5.4cqw; --rg:3.4cqw }
.sheet[data-layout="grid"][data-orient="landscape"]{ --pt:4cqw; --px:4.6cqw; --pb:4.4cqw; --hg:3.4cqw; --ys:6.4cqw; --cols:4; --rows:3; --cg:3.6cqw; --rg:2.2cqw }
.sheet[data-layout="month"][data-orient="portrait"]{ --pt:6.6cqw; --px:6.6cqw; --pb:6.6cqw; --hg:5.8cqw; --tf:9.4cqw; --tyf:3.4cqw; --wdf:1.7cqw; --nf:4.2cqw; --ef:1.15cqw; --cpy:1.25cqw; --cpx:1cqw }
.sheet[data-layout="month"][data-orient="landscape"]{ --pt:4cqw; --px:4.6cqw; --pb:4.2cqw; --hg:3.4cqw; --tf:6.4cqw; --tyf:2.3cqw; --wdf:1.15cqw; --nf:2.8cqw; --ef:.88cqw; --cpy:.8cqw; --cpx:.7cqw }
/* --dn: the week view's day-number size; Small page titles use exactly this in every view */
.sheet[data-orient="portrait"]{ --dn:5.8cqw }
.sheet[data-orient="landscape"]{ --dn:4.2cqw }
.sheet[data-layout="week"][data-orient="portrait"]{ --pt:6.6cqw; --px:6.6cqw; --pb:6.6cqw; --hg:5.8cqw; --tf:9.4cqw; --tyf:3.4cqw; --wdf:1.6cqw; --nf:var(--dn); --ef:1.2cqw; --wh:13.5cqw; --hp:1.5cqw 1.2cqw 1cqw 0 }
.sheet[data-layout="day"][data-orient="portrait"]{ --pt:6.6cqw; --px:6.6cqw; --pb:6.6cqw; --hg:5.2cqw; --tf:9.4cqw; --tyf:3.4cqw; --hf:2.1cqw; --hs:1.15cqw; --gut:12cqw }
.sheet[data-layout="day"][data-orient="landscape"]{ --pt:4cqw; --px:4.6cqw; --pb:4.2cqw; --hg:3.2cqw; --tf:6.4cqw; --tyf:2.3cqw; --hf:1.45cqw; --hs:.8cqw; --gut:8cqw }
.sheet[data-layout="week"][data-orient="landscape"]{ --pt:4cqw; --px:4.6cqw; --pb:4.2cqw; --hg:3.4cqw; --tf:6.4cqw; --tyf:2.3cqw; --wdf:1.1cqw; --nf:var(--dn); --ef:.88cqw; --hp:1.1cqw .9cqw 1cqw }

/* Year header */
/* Page title: Large as designed; Small sets the big title (year / month / week range / day) at the week's day-number size */
/* Animate only the Large/Small mix. The cqw sizes must track the sheet immediately while its width morphs. */
@property --title-small { syntax:'<number>'; inherits:false; initial-value:0 }
.sheet.title-sm .year, .sheet.title-sm .mh-title{ --title-small:1 }
.head{ text-align:left; margin-bottom:var(--hg) }
.year{
  margin:0; font-weight:700; font-size:calc(var(--ys) + (var(--dn) - var(--ys)) * var(--title-small, 0)); line-height:.76; transition:--title-small .45s cubic-bezier(.32,.72,0,1);
  letter-spacing:-.025em; font-variant-numeric:tabular-nums lining-nums;
  padding-top:.03em; white-space:nowrap;
}
/* Month + week header: big title flush left, detail flush right on the same baseline */
/* Header: the year sits small above the big month or week title, both flush left. */
.mh{ display:flex; flex-direction:column; align-items:flex-start; margin-bottom:var(--hg); white-space:nowrap }
.mh-title{ margin:0; font-size:calc(var(--tf) + (var(--dn) - var(--tf)) * var(--title-small, 0)); transition:--title-small .45s cubic-bezier(.32,.72,0,1); font-weight:700; line-height:.76; letter-spacing:-.025em; padding-top:.03em }
.mh-year{ order:-1; font-size:var(--tyf); font-weight:700; line-height:.76; letter-spacing:-.02em; font-variant-numeric:tabular-nums; padding-top:.03em; margin-bottom:calc(var(--tyf) * .36) }
.dash{ letter-spacing:0; padding:0 .07em 0 .11em }
/* Day: weekday (and any holiday) under the date, matching the year line above it */
.mh-sub{ order:1; display:flex; align-items:baseline; gap:.5em; margin-top:calc(var(--tyf) * .5); font-size:var(--tyf); font-weight:700; line-height:.76; padding-top:.03em; letter-spacing:-.01em; white-space:nowrap }
/* holiday: same size and weight as the weekday, set off by a vertical hairline */
.mh-sub em{ font-style:normal; padding-left:.5em; border-left:var(--hair) solid var(--rule); color:var(--holiday); transition:color .35s ease }
.mh-dow{ transition:color .35s ease }
.wk-color .mh-sub.we .mh-dow{ color:var(--weekend) }
/* Day: one ruled row per waking hour, the time centred between its lines */
.dgrid{ flex:1; min-height:0; display:flex; flex-direction:column; border-bottom:var(--hair) solid var(--rule); transition:background-color .35s ease }
.drow{ position:relative; display:grid; grid-template-columns:var(--gut) minmax(0,1fr); min-height:0; border-top:var(--hair) solid var(--rule) } /* light grey rules, like the week's writing lines */
.dhour{ flex:1 }
.dlab{ align-self:center; font-size:var(--hf); font-weight:700; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap }
.dlab small{ margin-left:.28em; font-size:var(--hs); font-weight:700; letter-spacing:.02em; color:var(--ink-mid) } /* same grey as the year view's weekday letters */


/* Year grid: twelve modules; with dividers on, a hairline sits under each month name.
   --yhair is fixed against the page width (registered, so month-relative units don't thin it). */
@property --yhair { syntax:'<length>'; inherits:true; initial-value:.5px }
.sheet-body{ --yhair:max(.5px, .1cqw) }
.months{
  flex:1; min-height:0; display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0,1fr));
  grid-template-rows:repeat(var(--rows), minmax(0,1fr));
  column-gap:var(--cg); row-gap:var(--rg);
}
.month{ container-type:inline-size; min-width:0; min-height:0 }
.m-in{ height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) }
/* The rule stops where the last column's two-digit dates end (one column, less two 6.1cqw tabular digits). */
.m-name{ margin:0 calc(100cqw / 7 - 6.1cqw * 1.112) 5.8cqw 0; padding:.03em 0 6.8cqw; border-bottom:var(--yhair) solid var(--ink); font-size:14.5cqw; font-weight:700; line-height:.76; letter-spacing:-.025em; white-space:nowrap }
.m-grid{ display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0 }
.m-wds, .m-days{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)) }
.m-days{ grid-template-rows:repeat(6, minmax(0,1fr)); min-height:0 }
/* Year view: weekday letters always mid grey; weekend dates black, or the accent with Color weekends on. */
.sheet-body{ --ink-mid:color-mix(in srgb, var(--ink) 48%, var(--paper)); --ink-faint:color-mix(in srgb, var(--ink) 22%, var(--paper)) }
.wd{ font-size:4.5cqw; font-weight:700; line-height:1; color:var(--ink-mid); padding-bottom:5.2cqw; transition:color .35s ease }
.d{ position:relative; display:flex; align-items:center; min-height:0 }
.d > i{
  position:relative; z-index:0; font-style:normal; font-size:6.1cqw; font-weight:500;
  line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums;
  transition:color .35s ease;
}

/* Month: one page, ruled week rows, figures top-left in each cell */
.mgrid{
  position:relative; flex:1; min-height:0; display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  grid-template-rows:auto repeat(6, minmax(0,1fr)); /* cells keep one size; short months simply end early */
}
/* Row rules are real borders (so they snap to the same crisp pixel as the column lines) drawn on an overlay
   with no side borders, so there are no corner joins to notch the column lines. */
.mc::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-top:var(--hair) solid var(--ink); transition:border-color .35s ease;
}
.mc.last::after{ border-bottom:var(--hair) solid var(--ink) }
.mg-wd{ padding:0 var(--cpx) calc(var(--wdf) * .9); font-size:var(--wdf); font-weight:700; line-height:1; color:var(--ink) }
.mc{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--cpy) * .6);
  min-width:0; min-height:0; padding:var(--cpy) var(--cpx);
  border-left:var(--hair) solid var(--ink);
}
/* With dividers on, the grid is a closed box: outer edges on the first and last columns. */
.mc.c6{ border-right:var(--hair) solid var(--ink) }
.sheet.no-lines .mc.c0{ border-left-color:transparent }
.sheet.no-lines .mc.c6{ border-right-color:transparent }

/* Week: seven days, ruled for writing */
.wk{ flex:1; min-height:0; display:grid; border-bottom:var(--hair) solid var(--ink) }
.sheet[data-orient="portrait"] .wk{ grid-template-rows:repeat(7, minmax(0,1fr)) }
.sheet[data-orient="landscape"] .wk{ grid-template-columns:repeat(7, minmax(0,1fr)); grid-template-rows:auto minmax(0,1fr) }
.wday{ position:relative; display:grid; min-width:0; min-height:0; border-top:var(--hair) solid var(--ink) }
.sheet[data-orient="portrait"] .wday{ grid-template-columns:var(--wh) minmax(0,1fr) }
.sheet[data-orient="landscape"] .wday{ grid-row:span 2; grid-template-rows:subgrid; border-left:var(--hair) solid var(--ink) }
.sheet[data-orient="landscape"] .wday.c0{ border-left-color:transparent }
.wday-h{ display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--wdf) * .62); padding:var(--hp); min-width:0; transition:padding-left .45s cubic-bezier(.32,.72,0,1) }
/* With weekend shading on, the text steps in from the row edge so the fill never touches it */
.sheet.wk-color[data-layout="week"][data-orient="portrait"] .wday-h{ padding-left:1.2cqw }
.wday-t{ display:flex; flex-direction:column; gap:calc(var(--wdf) * .12); min-width:0 }
.wday-t span{ font-size:var(--wdf); font-weight:700; line-height:1.1; color:var(--ink); transition:color .35s ease }
/* Writing lines split the day evenly; the next divider is the last line */
.wday-lines{ display:flex; flex-direction:column; min-height:0 }
/* Writing lines multiply with whatever is under them, so across a weekend fill they take its tint.
   #DBD9D4 multiplied with the paper gives the same grey as before on plain paper. */
.wday-lines i{ flex:1; border-bottom:var(--hair) solid #DBD9D4; mix-blend-mode:multiply }
.wday-lines i:last-child{ border-bottom:0 }
.sheet[data-orient="landscape"] .wday-lines{ margin:0 }
/* Week pages share one left edge: the title, the first day's name and date, and its writing lines
   line up with the page's rules. Where weekend shading fills that edge, all of them step in together. */
.mh, .wday-lines{ transition:padding-left .45s cubic-bezier(.32,.72,0,1), margin-left .45s cubic-bezier(.32,.72,0,1) }
.sheet[data-layout="week"][data-orient="landscape"] .wday.c0 .wday-h{ padding-left:0 }
.sheet.wk-color[data-layout="week"][data-orient="landscape"] .wday.c0.we .wday-h{ padding-left:.9cqw }
.sheet.wk-color[data-layout="week"][data-orient="landscape"]:has(> .sheet-body .wday.c0.we) > .sheet-body > .mh{ padding-left:.9cqw }
/* Every day column gets the same room from where its text starts to the next divider. When the first
   column's text sits flush with the page edge, that column is narrower by exactly the inset the others
   use; when it steps in (shaded weekend), all seven columns are equal. The change eases between the two. */
@property --cut { syntax:'<length>'; inherits:false; initial-value:0px }
.sheet[data-layout="week"][data-orient="landscape"] .wk{
  --cut:.9cqw;   /* how much narrower the first column is; animatable, so the columns glide */
  border-bottom-color:var(--rule);   /* the closing rule under the day columns is the light grey */
  grid-template-columns:calc((100% + var(--cut)) / 7 - var(--cut)) repeat(6, calc((100% + var(--cut)) / 7));
  transition:--cut .45s cubic-bezier(.32,.72,0,1), border-color .35s ease;
}
.sheet.wk-color[data-layout="week"][data-orient="landscape"]:has(> .sheet-body .wday.c0.we) > .sheet-body > .wk{ --cut:0px }
.sheet.wk-color[data-layout="week"][data-orient="portrait"] > .sheet-body > .mh{ padding-left:1.2cqw }

/* Day figures: plain flush-left numerals, aligned with their weekday labels */
.mc b, .wday-h b{ font-variant-numeric:tabular-nums; line-height:1; transition:color .35s ease }
.mc, .wday, .wd, .mg-wd{ transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease }
.m-name, .wday-lines i{ transition:border-color .35s ease }
.m-name{ transition:border-color .35s ease, padding-bottom .45s cubic-bezier(.32,.72,0,1), margin-bottom .45s cubic-bezier(.32,.72,0,1) }
/* "Divider lines" off: year = rules above month names; month = row dividers; week = writing lines */
.sheet.no-lines .m-name{ border-bottom-color:transparent; padding-bottom:2.4cqw; margin-bottom:5.2cqw } /* no rule: the name sits closer to its dates */
.sheet.no-lines .mc::after{ border-color:transparent }
.sheet.no-lines .wday-lines i{ border-bottom-color:transparent }
/* Month view with horizontal dividers off: the column lines, and the weekend shading, grow up through
   the weekday header to the top of its labels, so each column reads as one continuous strip. */
.mg-wd{ position:relative; isolation:isolate }
/* Drawn as a real border and grown by height (not stretched), so the extension renders exactly like
   the column line beneath it. */
.mg-wd::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:0; z-index:-1; background-color:transparent;
  transition:height .45s cubic-bezier(.32,.72,0,1), background-color .35s ease;
}
.wk-color .mg-wd.we::after{ background-color:color-mix(in srgb, var(--weekend) 5%, transparent) }
.mg-wd::before{
  content:""; position:absolute; left:0; bottom:0; width:0; height:0; border-left:var(--hair) solid var(--ink);
  transition:height .45s cubic-bezier(.32,.72,0,1);
}
.mg-wd:first-child::before{ display:none }
/* …and rise a little above the labels, so the weekday names sit inside the strip with some air */
.sheet.no-lines .mg-wd::before, .sheet.no-lines .mg-wd::after{ height:calc(100% + var(--wdf) * .5) }
/* Landscape week with lines off: no horizontal rules at all, only the columns between days */
.wk{ transition:border-color .35s ease }
/* Landscape week never draws a rule across the top of the day columns */
.sheet[data-layout="week"][data-orient="landscape"] .wday{ border-top-width:0 }
.sheet.no-lines[data-layout="week"][data-orient="landscape"] .wk{ border-bottom-color:transparent }
/* Portrait week with dividers off: only the writing lines go; the day rules stay black */
.mc b, .wday-h b{ font-size:var(--nf); font-weight:700; line-height:.8; letter-spacing:0 }
.mc em, .wday-h em{
  font-style:normal; font-size:var(--ef); font-weight:500; line-height:1.25; color:var(--holiday); max-width:100%;
  overflow-wrap:break-word; text-wrap:balance; transition:color .35s ease;
}

/* States: weekends, holidays */
.wk-color .d.we > i, .wk-color .mc.we b, .wk-color .wday.we b{ color:var(--weekend) }
.wk-color .mg-wd.we, .wk-color .wday.we .wday-t span{ color:var(--weekend) }
.wk-color .mc.we, .wk-color .wday.we{ background:color-mix(in srgb, var(--weekend) 5%, transparent) }
.hol-color .mc.hol b, .hol-color .wday.hol b{ color:var(--holiday) }
/* Holiday underline: a border (not a filled bar) so every one snaps to the same whole-pixel weight */
.d > i::after{ content:""; position:absolute; left:0; right:0; top:calc(100% + 1cqw - 1px); height:0; border-top:max(1px, .5cqw) solid transparent; transition:border-color .35s ease }
.d.hol > i::after{ border-top-color:var(--holiday) }
/* Neighbouring months' dates complete each year-view grid, quieter than any accent */
/* Adjacent days (both views): each looks as it would in its own month — weekday, weekend or holiday colour,
   underline or name — at --a strength. Colour (not opacity) carries the fade, so stepping animations and the
   PDF see the same thing; with the toggle off --a drops to 0 and they ease out. */
.adj{ --a:40% }   /* month colours 40%, month greys 25%, year 30% */
.sheet.no-adj .adj{ --a:0% }
/* Year view neighbours: always one plain grey, ink at half of --a */
.d.adj > i{ color:color-mix(in srgb, var(--ink) calc(var(--a) * .75), transparent) }   /* year: 30% */
.mgrid .mc.adj b{ color:color-mix(in srgb, var(--ink) calc(var(--a) * .625), transparent) }
.wk-color .mgrid .mc.adj.we b{ color:color-mix(in srgb, var(--weekend) var(--a), transparent) }
.hol-color .mgrid .mc.adj.hol b{ color:color-mix(in srgb, var(--holiday) var(--a), transparent) }
.mgrid .mc.adj em{ color:color-mix(in srgb, var(--holiday) var(--a), transparent) }
.sheet:not(.hol-color) .mgrid .mc.adj em{ color:color-mix(in srgb, var(--ink) calc(var(--a) * .625), transparent) }



.seg{ display:inline-flex; flex:none; padding:2px; border-radius:999px; background:var(--fill) }
.seg label{ position:relative; display:block; cursor:pointer }
.seg input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none }
.seg span{
  display:flex; align-items:center; gap:5px; height:calc(var(--ctl-h) - 4px); padding:0 12px; border-radius:999px; white-space:nowrap;
  font:500 var(--ctl-fs)/1 var(--f-ui); color:var(--chrome-fg-2);
  transition:background-color .2s, color .2s, box-shadow .2s;
}
.seg input:checked + span{ background:var(--thumb); color:var(--chrome-fg); box-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.05) }
.seg input:focus-visible + span{ outline:2px solid var(--focus); outline-offset:1px }
.seg label:hover input:not(:checked) + span{ color:var(--chrome-fg) }
.pop{
  position:fixed; z-index:30;
  max-height:calc(100vh - 130px); max-height:calc(100dvh - 130px); overflow:auto; overscroll-behavior:contain;
  padding:7px; border-radius:20px; background:var(--panel);
  -webkit-backdrop-filter:blur(30px) saturate(1.1); backdrop-filter:blur(30px) saturate(1.1);
  box-shadow:inset 0 .5px 0 var(--glass-hi), 0 0 0 .5px var(--glass-line), var(--dock-shadow);
  transform-origin:50% 0;
  animation:pop .24s cubic-bezier(.2,.9,.25,1.08);
}
.group{ background:var(--group); border-radius:13px; flex:none }
.row{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px;
  width:100%; min-height:52px; padding:10px var(--menu-x);
  font:500 var(--ctl-fs)/1.2 var(--f-ui); color:var(--chrome-fg); text-align:left;
}
.row:not([hidden]) ~ .row::before{ content:""; position:absolute; top:0; left:var(--menu-x); right:var(--menu-x); height:.5px; background:var(--sep) }
.printer{ width:min(374px, calc(100vw - 24px)); display:flex; flex-direction:column; gap:0 }
.printer{ padding:6px 0 16px; background:rgba(255,255,255,.96) }
.printer .group{ background:transparent; border-radius:0 }
.printer .pop-actions{ position:relative; padding:10px var(--menu-x) 0 }
.printer .pop-actions::before{ content:""; position:absolute; top:0; left:var(--menu-x); right:var(--menu-x); height:.5px; background:var(--sep) }
.pop-actions{ display:flex; flex-wrap:wrap; gap:8px }
.pop-btn{
  flex:1 1 0; min-width:max-content; height:var(--ctl-h); margin:0; padding:0 12px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:999px; cursor:pointer; white-space:nowrap;
  font:600 var(--ctl-fs)/1 var(--f-ui); letter-spacing:-.005em; /* same height and type as the dock's Print button */
  transition:transform .15s, opacity .15s, color .15s;
}
.pop-btn span{ overflow:hidden; text-overflow:ellipsis }
.pop-btn:active{ transform:scale(.97) }
.pop-btn-1{ background:var(--btn); color:var(--btn-fg) }
.pop-btn-1:hover{ opacity:.88 }
.pop-btn-2{ background:var(--fill); color:var(--chrome-fg-2) }
.pop-btn-2:hover{ color:var(--chrome-fg) }
.pop-btn.busy{ pointer-events:none }
.pop-btn.busy span{ animation:pulse 1s ease-in-out infinite }
.render-host{ position:fixed; left:-30000px; top:0; pointer-events:none }
.sheet.render{ width:var(--pw); height:var(--ph); aspect-ratio:auto; box-shadow:none; border-radius:0; animation:none; transition:none }
.toast{
  position:fixed; z-index:40; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 24px); transform:translateX(-50%);
  max-width:calc(100vw - 32px); padding:10px 16px; border-radius:14px; background:var(--panel);
  -webkit-backdrop-filter:blur(30px) saturate(1.1); backdrop-filter:blur(30px) saturate(1.1);
  box-shadow:inset 0 .5px 0 var(--glass-hi), 0 0 0 .5px var(--glass-line), var(--dock-shadow);
  font:500 var(--ctl-fs)/1.35 var(--f-ui); color:var(--chrome-fg); text-align:center;
}
@keyframes pop{ from{ opacity:0; transform:translateY(-8px) scale(.96) } to{ opacity:1; transform:none } }
@keyframes pulse{ 50%{ opacity:.3 } }
.col > .sheet{ width:100%; animation:none }
.col > .sheet.paper-anim{ transition:aspect-ratio .35s cubic-bezier(.32,.72,0,1) }
.pop{ transform-origin:100% 0 }
.info{ padding-top:78px; padding-bottom:56px }
.info h2{ margin:0 0 10px; font:700 18px/1.2 var(--f-swiss); letter-spacing:-.012em }
.hols{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.35 }
.hols td{ padding:9px 14px 9px 0; border-top:1px solid var(--rule); vertical-align:top }
.hols td:first-child{ width:150px; white-space:nowrap; font-variant-numeric:tabular-nums }
.hols td:last-child{ padding-right:0 }
.pn{ display:flex; justify-content:space-between; gap:16px; margin-top:35px; font-size:14px }
.pn a{ color:var(--ink); text-decoration:none; padding:6px 0 }
.pn a:hover{ text-decoration:underline }
@media (max-width: 440px){
  :root{ --sheet-shadow:0 .5px 1px rgba(0,0,0,.04), 0 5px 14px -6px rgba(0,0,0,.1); --ctl-h:44px; --ctl-fs:16px; --menu-x:14px }
  .info{ padding-top:34px }
  .top{ flex-wrap:wrap; gap:14px 16px }
  .actions{ display:grid; width:100% }
  .print, .customize{ height:44px; font-size:16px; line-height:44px }
  .row{ min-height:60px; padding-top:8px; padding-bottom:8px; column-gap:14px }
  .pop.printer{ right:10px !important; width:calc(100vw - 20px); max-width:calc(100vw - 20px); padding:8px 0 14px; border-radius:24px }
}
@media print{
  :root{ --paper:#fff }
  html, body{ background:#fff !important }
  .top, .info, .pop, .toast, .render-host{ display:none !important }
  .col{ width:auto; margin:0; padding:0 }
  .col > .sheet{
    width:var(--pw) !important; height:calc(var(--ph) - .6mm) !important; aspect-ratio:auto !important;
    margin:0 !important; border-radius:0 !important; box-shadow:none !important; animation:none !important; transition:none !important;
    break-inside:avoid; page-break-inside:avoid;
  }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
}