/* Print-studio tokens retained from the original visual design. */
:root {
  color-scheme:light dark;
  --paper:#f6f3ec;
  --paper-2:#ece7dd;
  --surface:#fbf9f5;
  --ink:#1d1b18;
  --ink-2:#4f4a44;
  --ink-3:#6b655e;
  --rule:#d6cfc2;
  --rule-2:#e5dfd4;
  --accent:#8e2f25;
  --accent-wash:rgba(142,47,37,.055);
  --on-ink:#f6f3ec;
  --glass:rgba(246,243,236,.94);
  --font-display:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",serif;
  --font-text:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --font-num:"Iowan Old Style",Palatino,Georgia,serif;
  --ease:cubic-bezier(.22,.7,.24,1);
  --shadow-sheet:0 1px 2px #30261c18,0 6px 12px -4px #30261c20,0 22px 36px -14px #30261c3d,0 44px 70px -30px #30261c38;
  --safe-b:env(safe-area-inset-bottom,0px)
}
@media(prefers-color-scheme:dark) {
  :root {
    --paper:#171512;
    --paper-2:#211e1a;
    --surface:#1d1a17;
    --ink:#efe9de;
    --ink-2:#c9c1b4;
    --ink-3:#a39b8f;
    --rule:#3a352f;
    --rule-2:#2b2723;
    --accent:#d9826f;
    --accent-wash:rgba(217,130,111,.08);
    --on-ink:#171512;
    --glass:rgba(23,21,18,.94);
    --shadow-sheet:0 1px 2px #0006,0 12px 24px -8px #0008,0 40px 60px -28px #0009
  }
}
*,*::before,*::after {
  box-sizing:border-box
}
[hidden] {
  display:none!important
}
html {
  background:var(--paper);
  -webkit-text-size-adjust:100%;
  scroll-padding-bottom:var(--export-height,0px)
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:15px/1.6 var(--font-text);
  -webkit-font-smoothing:antialiased
}
button,input,select {
  font:inherit;
  color:inherit;
  max-width:100%
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default;
  opacity:.48
}
button,select,input {
  touch-action:manipulation
}
h1,h2,p,figure {
  margin:0
}
h1,h2 {
  font-family:var(--font-display);
  font-weight:600
}
h1 {
  font-size:28px;
  line-height:1.35;
  letter-spacing:.07em
}
h2 {
  font-size:19px;
  letter-spacing:.05em
}
img {
  display:block;
  max-width:100%
}
button {
  border:0
}
a {
  color:inherit
}
fieldset {
  border:0;
  padding:0;
  margin:0;
  min-width:0
}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px
}
::selection {
  background:var(--accent);
  color:var(--on-ink)
}
.fine,small {
  font-size:12px;
  color:var(--ink-3);
  line-height:1.7
}
.eyebrow {
  font:11px/1.5 var(--font-text);
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:12px
}
.lede {
  color:var(--ink-2);
  font-size:14px;
  margin:10px 0 24px
}
.mast {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
  min-height:64px;
  border-bottom:1px solid var(--rule)
}
.mast-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:2px 8px;
  margin-left:auto
}
.brand {
  display:flex;
  align-items:baseline;
  gap:12px;
  text-decoration:none;
  min-height:44px;
  padding-top:8px
}
.brand span {
  font:600 18px var(--font-display);
  letter-spacing:.12em
}
.brand i {
  font:italic 14px var(--font-num);
  color:var(--ink-3)
}
#mastNote {
  display:none
}
.app {
  display:grid;
  gap:20px;
  grid-template-columns:minmax(0,1fr);
  padding:28px max(20px,env(safe-area-inset-right)) calc(36px + var(--safe-b)) max(20px,env(safe-area-inset-left));
  max-width:1440px;
  margin:auto
}
.app>* {
  min-width:0
}
.app[data-state=workspace] {
  padding-bottom:calc(24px + var(--export-height,0px))
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 16px;
  border:1px solid var(--rule);
  border-radius:7px;
  letter-spacing:.03em;
  transition:background 160ms var(--ease),transform 160ms var(--ease)
}
.btn:active:not(:disabled) {
  transform:scale(.98)
}
.primary {
  background:var(--ink);
  color:var(--on-ink);
  border-color:var(--ink)
}
.quiet {
  background:var(--surface)
}
.full {
  width:100%
}
.text-btn {
  min-height:44px;
  min-width:44px;
  padding:8px 4px;
  background:none;
  color:var(--accent);
  font-size:14px
}
.seg {
  display:flex;
  gap:2px;
  padding:2px;
  border:1px solid var(--rule);
  border-radius:8px;
  background:var(--surface);
  min-width:0
}
.seg button {
  flex:1;
  min-width:44px;
  min-height:44px;
  padding:8px;
  border-radius:5px;
  background:transparent;
  font-size:14px;
  white-space:nowrap;
  transition:background 160ms var(--ease),color 160ms var(--ease)
}
.seg button.on {
  background:var(--ink);
  color:var(--on-ink)
}
.seg.small {
  flex:none
}
.seg.small button {
  padding:8px 12px
}
.fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 12px;
  margin:20px 0 12px
}
label {
  min-width:0
}
.fields label,.year-settings label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--ink-3)
}
select,input[type=number] {
  width:100%;
  min-height:44px;
  padding:8px 10px;
  font-size:16px;
  border:1px solid var(--rule);
  border-radius:7px;
  background:var(--surface)
}
select {
  cursor:pointer
}
.drop {
  width:100%;
  min-height:168px;
  margin-top:16px;
  border:1px dashed var(--rule);
  border-radius:7px;
  background:var(--surface);
  padding:20px;
  transition:background 240ms var(--ease),border-color 240ms var(--ease)
}
.drop.dragover {
  background:var(--accent-wash);
  border-color:var(--accent)
}
#dropEmpty {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px
}
#dropEmpty b {
  font-weight:500
}
#dropEmpty svg {
  width:38px;
  height:38px;
  margin-bottom:8px;
  fill:none;
  stroke:var(--ink-3);
  stroke-width:1.2
}
.picked {
  display:flex;
  gap:16px;
  align-items:center;
  text-align:left
}
.picked img {
  width:68px;
  height:84px;
  object-fit:cover;
  background:var(--paper-2)
}
.picked>span {
  min-width:0
}
.picked b {
  display:block;
  overflow-wrap:anywhere;
  font-size:14px
}
.picked small {
  display:block;
  margin-top:6px
}
#go {
  margin-top:16px
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:0;
  margin:28px 0 0;
  list-style:none;
  font-size:12px
}
.steps li {
  border-top:1px solid var(--rule);
  padding-top:12px
}
.steps i {
  font-family:var(--font-display);
  color:var(--accent);
  margin-right:8px
}
.hero {
  display:none
}
.feedback:has(> [hidden]):not(:has(> :not([hidden]))) {
  display:none
}
.feedback {
  min-width:0
}
.progress {
  padding:18px 20px;
  border:1px solid var(--rule-2);
  background:var(--surface);
  border-radius:8px
}
.progress-line {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px
}
#progressNum {
  font-variant-numeric:tabular-nums;
  color:var(--accent)
}
progress {
  display:block;
  width:100%;
  height:3px;
  margin:12px 0 6px;
  border:none;
  appearance:none;
  background:var(--rule-2);
  color:var(--accent)
}
progress::-webkit-progress-bar {
  background:var(--rule-2)
}
progress::-webkit-progress-value {
  background:var(--accent);
  transition:width 240ms var(--ease)
}
progress::-moz-progress-bar {
  background:var(--accent)
}
.notice {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--rule);
  border-left:2px solid var(--accent);
  padding:12px 16px;
  margin-top:10px;
  font-size:14px;
  overflow-wrap:anywhere
}
.notice .text-btn {
  flex:none
}
.workspace-head {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:14px
}
.workspace-head>div:first-child {
  min-width:0;
  flex:1
}
.workspace-head h1 {
  font-size:23px
}
.workspace-head .eyebrow {
  margin-bottom:6px
}
.head-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px
}
.head-actions .btn {
  padding:8px 10px;
  font-size:13px
}
.month-switch {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:4px 8px 4px 10px;
  border:1px solid var(--accent);
  border-radius:8px;
  background:var(--accent-wash)
}
.month-switch-label {
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  white-space:nowrap
}
.month-fields {
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-width:0
}
.month-unit {
  font-size:14px;
  line-height:1;
  color:var(--ink)
}
.month-switch select {
  min-height:36px;
  padding:4px 4px;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--surface);
  font-variant-numeric:tabular-nums;
  text-align:center
}
#editYear {width:4.8em}
#editMonth {width:3.4em; margin-left:4px}
#backYear {
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-wash);
  font-weight:600
}
.workspace-head .fine {
  margin-top:6px
}
.section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px
}
.section-head h2 i {
  font:14px var(--font-num);
  color:var(--accent);
  margin-right:14px;
  border-right:1px solid var(--rule);
  padding-right:14px
}
.table {
  position:relative;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 20px;
  background:var(--paper-2);
  border-radius:3px
}
.sheet {
  --ar:.713;
  width:min(100%,calc(58svh * var(--ar)));
  background:#fff;
  box-shadow:var(--shadow-sheet);
  flex:none
}
.sheet:empty {
  display:none
}
.sheet>svg {
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-select:none
}
.sheet.loading {
  opacity:.65
}
.sheet [data-editor-block] {
  touch-action:none;
  cursor:grab
}
.sheet [data-editor-block].dragging {
  cursor:grabbing
}
.sheet [data-editor-hit] {
  fill:transparent;
  stroke:transparent;
  stroke-width:1;
  vector-effect:non-scaling-stroke
}
.sheet [data-editor-block]:focus-visible {
  outline:none
}
.caption {
  font-size:12px;
  color:var(--ink-3);
  text-align:center;
  margin:14px 0 20px;
  min-height:20px
}
.skeleton {
  width:min(85%,290px);
  aspect-ratio:.713;
  padding:25px;
  background:#fbf9f5;
  box-shadow:var(--shadow-sheet);
  color:#6b655e;
  position:relative;
  overflow:hidden
}
.skeleton>div {
  height:55%;
  background:linear-gradient(145deg,#e8e0d3,#ccc0af)
}
.skeleton span {
  display:block;
  width:45%;
  height:10px;
  background:#ddd4c6;
  margin-top:24px
}
.skeleton i {
  display:block;
  height:60px;
  margin-top:20px;
  background:repeating-linear-gradient(0deg,transparent 0 12px,#ece7dd 12px 16px)
}
.skeleton p {
  font-size:12px;
  text-align:center;
  margin-top:16px
}
.skeleton::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 30%,#fff5 50%,transparent 70%);
  background-size:250% 100%;
  animation:shimmer 2.4s infinite
}
.rec-row {
  display:flex;
  gap:12px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  padding:3px 3px 14px;
  scroll-snap-type:x proximity
}
.pg {
  display:flex;
  flex-direction:column;
  min-width:0;
  text-align:left;
  padding:0;
  background:none;
  scroll-snap-align:start
}
.rec-row .pg {
  flex:0 0 120px
}
.pg-thumb {
  display:flex;
  align-items:center;
  justify-content:center;
  height:144px;
  padding:12px;
  background:var(--paper-2);
  border:1.5px solid transparent;
  border-radius:4px;
  margin-bottom:8px;
  transition:border-color 160ms var(--ease)
}
.pg-thumb img {
  max-height:100%;
  width:auto;
  box-shadow:0 2px 5px #0002
}
.pg.sel .pg-thumb {
  border-color:var(--accent)
}
.pg-name {
  font-size:13px;
  font-weight:500;
  line-height:1.4
}
.pg-meta,.pg-blurb {
  font-size:11px;
  color:var(--ink-3);
  margin-top:4px;
  line-height:1.4
}
.pg-blurb {
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.layout-blurb {
  margin:-4px 0 8px
}
.layout-peek {
  position:fixed;
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:calc(100dvh - 16px);
  overflow:auto;
  padding:10px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:10px;
  box-shadow:var(--shadow-sheet)
}
.layout-peek img {
  width:100%;
  max-height:min(42dvh,360px);
  object-fit:contain;
  background:var(--paper-2)
}
.layout-peek b {
  font-size:15px;
  font-weight:600
}
.layout-peek p {
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--ink-2)
}
.layout-peek .btn {
  margin-top:4px
}
.pg.sel .pg-name {
  color:var(--accent)
}
.more {
  border-top:1px solid var(--rule);
  margin-top:12px
}
.more summary {
  cursor:pointer;
  min-height:48px;
  padding:12px 0;
  font-size:14px
}
.more summary span {
  margin-left:8px
}
.more-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px 12px;
  padding:12px 0
}
.more-grid .pg-thumb {
  height:126px;
  padding:10px
}
.controls {
  border-top:1px solid var(--rule);
  padding-top:24px
}
.row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:60px;
  padding:8px 0;
  border-bottom:1px solid var(--rule-2);
  font-size:14px
}
.row select {
  max-width:64%;
  width:180px;
  font-size:14px
}
.row.stack {
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:14px 0
}
.appearance-head {
  margin-top:26px
}
.adjust-controls {
  padding-top:14px
}
.adjust-controls .row {
  border:0;
  padding-bottom:0
}
.adjust-controls input[type=range] {
  width:100%;
  height:44px;
  accent-color:var(--accent);
  margin:0
}
.color-row {
  display:grid;
  grid-template-columns:1fr 44px auto;
  gap:8px;
  align-items:center;
  min-height:62px;
  border-bottom:1px solid var(--rule-2);
  font-size:14px
}
.color-row input {
  width:44px;
  height:44px;
  padding:6px;
  border:0;
  background:none;
  cursor:pointer
}
.color-row input::-webkit-color-swatch {
  border-radius:50%;
  border:1px solid var(--rule)
}
.color-row.is-auto input {
  visibility:hidden
}
.holiday-note,.contrast-note {
  margin:12px 0;
  color:var(--accent)
}
.year-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:24px
}
.month {
  display:flex;
  flex-direction:column;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:12px;
  min-width:0;
  transition:border-color 160ms var(--ease)
}
.month-art {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper-2);
  height:155px;
  margin-bottom:12px;
  padding:12px;
  color:var(--ink-3);
  font:28px var(--font-num)
}
.month-art img {
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  box-shadow:0 2px 5px #0002
}
.month strong {
  font-size:14px;
  font-weight:500
}
.month small {
  font-size:11px
}
.month.is-done {
  border-color:var(--rule)
}
.month.is-done small {
  color:var(--accent)
}
.month-holiday {
  color:var(--accent);
  margin-top:4px
}
.confirm-actions {
  display:flex;
  gap:8px;
  margin-top:18px
}
.confirm-actions .btn {
  flex:1
}
#confirmBody {
  margin-top:10px;
  line-height:1.5
}
.account-field {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:14px;
  font-size:14px
}
.account-field input {
  min-height:48px;
  padding:10px 12px;
  border:1px solid var(--rule);
  border-radius:7px;
  background:var(--surface);
  color:inherit
}
.account-error {
  color:var(--accent);
  margin:12px 0 0
}
.login-hint {
  display:flex;
  flex:1 1 100%;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  margin:0
}
.login-hint .text-btn {
  min-height:36px
}
.library-item {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:12px 0;
  border-bottom:1px solid var(--rule-2)
}
.library-item strong {
  flex:1 1 140px;
  font-weight:600
}
.library-item .fine {
  flex:1 1 100%
}
.library-item .confirm-actions {
  flex:1 1 100%;
  flex-wrap:wrap
}
.library-item .confirm-actions .btn {
  flex:1 1 calc(50% - 8px)
}
.password-change {
  margin:18px 0
}
.password-change summary {
  cursor:pointer;
  min-height:44px
}
#closeLibrary {
  width:100%
}
.month:hover {
  border-color:var(--accent)
}
.year-settings {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:26px
}
.export-panel {
  flex:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  max-height:38dvh;
  overflow:auto;
  padding:12px 20px calc(12px + var(--safe-b));
  border-top:1px solid var(--rule);
  background:var(--paper);
  box-shadow:0 -10px 28px #30261c12
}
.export-panel>.fine {
  flex:1 1 140px;
  margin:0;
  color:var(--ink-2)
}
.export-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:2 1 280px
}
.export-secondary {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.export-main,.export-choice {
  width:auto;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  text-align:left;
  white-space:normal
}
.export-main {
  min-height:44px;
  padding:8px 16px
}
.export-choice {
  min-height:40px;
  padding:8px 12px;
  background:transparent;
  border-color:transparent;
  color:var(--ink-2)
}
.export-main b {
  font-weight:600;
  font-size:15px;
  line-height:1.3
}
.export-main small {
  font-size:11px;
  line-height:1.35;
  color:var(--on-ink);
  opacity:.78
}
.print-shop {
  flex:1 1 100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--rule-2);
  border-radius:8px;
  background:var(--paper-2)
}
.print-shop .fine {
  flex:1 1 180px;
  margin:0
}
.print-shop .cmyk {
  flex:1 1 200px
}
.print-shop .btn {
  width:auto;
  margin:0 0 0 auto
}
#dialogStatus:empty {
  display:none
}
#dialogStatus {
  flex:1 1 100%;
  margin:0
}
.toast {
  position:fixed;
  bottom:calc(16px + var(--export-height,0px));
  left:50%;
  z-index:40;
  width:max-content;
  max-width:calc(100vw - 32px);
  padding:12px 18px;
  border-radius:7px;
  background:var(--ink);
  color:var(--on-ink);
  box-shadow:0 6px 24px #0003;
  font-size:14px;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,8px);
  transition:opacity 240ms var(--ease),transform 240ms var(--ease)
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.offline {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--ink);
  color:var(--on-ink);
  text-align:center;
  padding:12px 20px;
  font-size:13px
}
dialog {
  width:min(480px,calc(100% - 32px));
  max-height:calc(100svh - 32px);
  overflow:auto;
  border:1px solid var(--rule);
  border-radius:12px;
  padding:24px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 20px 80px #0004
}
dialog::backdrop {
  background:#17151266;
  backdrop-filter:blur(4px)
}
.dialog-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px
}
.dialog-head h2 {
  font-size:26px
}
.close-btn {
  font-size:27px;
  line-height:1;
  min-width:44px;
  min-height:44px;
  background:none;
  color:var(--ink-3)
}
.cmyk {
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.4
}
.cmyk input {
  width:20px;
  height:20px;
  margin-top:2px;
  accent-color:var(--accent);
  flex:none
}
.cmyk small {
  display:block;
  color:var(--ink-3)
}
#dialogStatus {
  font-size:13px;
  margin:12px 0;
  color:var(--accent)
}
@media(min-width:720px) {
  .app {
    padding:36px 32px
  }
  .compose {
    max-width:480px;
    width:100%;
    justify-self:center
  }
  .hero {
    display:none
  }
  .year-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .year-settings {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .more-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .rec-row .pg {
    flex:1
  }
  .controls {
    max-width:640px;
    width:100%;
    justify-self:center
  }
}
@media(min-width:1024px) {
  #mastNote {
    display:block
  }
  .mast {
    padding-left:48px;
    padding-right:48px;
    min-height:68px
  }
  .app {
    grid-template-columns:minmax(0,1fr) 360px;
    gap:24px 44px;
    padding:28px 48px 48px
  }
  .app[data-state=empty] {
    grid-template-columns:minmax(0,460px) minmax(0,1fr);
    gap:24px 80px;
    max-width:1280px;
    padding-top:44px
  }
  .compose {
    grid-column:1;
    grid-row:1
  }
  .compose h1 {
    font-size:34px
  }
  .hero {
    display:flex;
    grid-column:2;
    grid-row:1;
    position:relative;
    align-items:center;
    justify-content:center;
    background:var(--paper-2);
    min-height:680px;
    overflow:hidden
  }
  .hero-page,.hero-back {
    position:absolute;
    width:64%;
    aspect-ratio:.713;
    background:#fbf9f5;
    box-shadow:var(--shadow-sheet)
  }
  .hero-back {
    transform:translate(9%,-4%) rotate(5deg);
    background:#f2ecdf
  }
  .hero-page {
    transform:rotate(-3deg);
    padding:8%;
    color:#2a2622
  }
  .landscape {
    height:49%;
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#e7d6c2 0%,#e3c3a5 58%,#b8bcb3 58%,#d2d2c5 100%)
  }
  .landscape::before,.landscape::after {
    content:"";
    position:absolute;
    width:160%;
    height:85%;
    left:-30%;
    top:43%;
    border-radius:50%;
    background:#aaa792;
    transform:rotate(-15deg)
  }
  .landscape::after {
    left:5%;
    top:55%;
    background:#828c80;
    transform:rotate(18deg)
  }
  .landscape span {
    position:absolute;
    left:68%;
    top:18%;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#faf0d8;
    box-shadow:0 0 26px #faf0d8
  }
  .hero-title {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin:22px 0 16px
  }
  .hero-title i {
    font:italic 24px var(--font-num)
  }
  .hero-title span {
    font:11px var(--font-num);
    color:#6b655e
  }
  .hero-grid {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    text-align:center;
    gap:4px;
    font:12px/1.4 var(--font-num)
  }
  .hero-grid b {
    font:9px var(--font-text);
    color:#6b655e;
    padding-bottom:5px
  }
  .hero-grid .rest {
    color:#8e2f25
  }
  .hero-foot {
    text-align:center;
    font:italic 9px var(--font-num);
    color:#6b655e;
    margin-top:20px
  }
  .hero figcaption {
    position:absolute;
    bottom:30px;
    font-size:12px;
    letter-spacing:.18em;
    color:var(--ink-3)
  }
  .feedback {
    grid-column:1/-1
  }
  .app[data-state=empty] .feedback {
    grid-row:2
  }
  .workspace-head {
    grid-column:1/-1;
    padding-bottom:16px;
    border-bottom:1px solid var(--rule-2)
  }
  .preview-column {
    grid-column:1;
    align-self:start;
    position:sticky;
    top:24px
  }
  .table {
    height:max(480px,calc(100svh - 300px));
    padding:28px;
    min-height:0;
    container-type:size
  }
  .sheet {
    width:min(100cqw,calc(100cqh * var(--ar)))
  }
  .controls {
    grid-column:2;
    border-top:0;
    border-left:1px solid var(--rule);
    padding:0 0 0 28px;
    max-width:none
  }
  .year-section {
    grid-column:1/-1
  }
  .year-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .month-art {
    height:215px
  }
  .year-settings {
    max-width:750px
  }
  .export-actions {
    flex-wrap:nowrap
  }
  .toast {
    bottom:24px
  }
  .rec-row .pg {
    flex:1;
    max-width:144px
  }
  .pg-thumb {
    height:135px
  }
  .more-grid {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }
  .more-grid .pg-thumb {
    height:130px
  }
  .skeleton {
    height:100%;
    width:auto
  }
  .app[data-state=workspace] {
    padding-bottom:48px
  }
}
@media(hover:hover) {
  .quiet:hover,.drop:hover {
    background:var(--paper-2)
  }
  .pg:hover .pg-thumb {
    border-color:var(--rule)
  }
  .pg.sel:hover .pg-thumb {
    border-color:var(--accent)
  }
}
@keyframes shimmer {
  from {
    background-position:120% 0
  }
  to {
    background-position:-120% 0
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.table:has(.sheet:not([hidden]):not(:empty)) {
  min-height:0
}
@media(min-width:1280px) {
  .year-grid {
    grid-template-columns:repeat(6,minmax(0,1fr))
  }
  .month-art {
    height:150px
  }
}

@media(max-width:1023px) {
  body:has(.app[data-state=workspace]) {height:100dvh; overflow:hidden}
  .app[data-state=workspace] {
    height:calc(100dvh - var(--mast-height,64px) - var(--export-height,0px));
    overflow:auto;
    display:block;
    scroll-padding-bottom:24px;
  }
  .app[data-state=workspace] > :not([hidden]) {margin-bottom:24px}
}

.stage-tools {display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px}
.stage-tools .btn {min-height:44px; padding:8px 14px}
.stage-tools .btn.is-on {background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.analysis-legend {display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0 0 8px; font-size:13px; line-height:1.3; color:var(--ink-2)}
.analysis-legend[hidden] {display:none}
.analysis-legend span {display:inline-flex; align-items:center; gap:6px; min-height:28px}
.analysis-legend i {width:12px; height:12px; border-radius:3px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.analysis-legend i.is-open {background:transparent; box-shadow:none; border:2px dashed currentColor; width:13px; height:13px; box-sizing:border-box}
.analysis-legend .analysis-hint {flex-basis:100%; display:block; min-height:0; font-size:12px; line-height:1.45; color:var(--ink-2)}
#zoomDialog .analysis-legend {margin:0; padding:0 18px 6px}
#yearSection>#openExport {margin:4px 0 8px}
#zoomDialog {width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; padding:0; margin:0; border:0; border-radius:0; overflow:hidden; background:var(--paper-2)}
#zoomDialog[open] {display:flex; flex-direction:column}
.zoom-toolbar {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 8px; padding:8px 8px 4px 18px; flex:none}
.zoom-title {margin:0; font:600 16px/1.2 var(--font-display); letter-spacing:.08em}
.zoom-tools {grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.zoom-toolbar .btn {min-height:36px; padding:6px 10px; font-size:13px; background:var(--surface)}
.zoom-toolbar .btn.is-on {background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.zoom-toolbar .close-btn {grid-column:2; grid-row:1}
#zoomValue {font-size:13px; min-width:48px; text-align:center; color:var(--ink-2); font-variant-numeric:tabular-nums}
#zoomStage {position:relative; flex:1; min-height:0; margin:6px 16px 12px; overflow:hidden; touch-action:none; cursor:grab; background:transparent}
#zoomStage:active {cursor:grabbing}
#zoomArt {position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none; user-select:none; box-shadow:var(--shadow-sheet)}
#zoomArt>svg {width:100%; height:100%; display:block; background:white}
@media(min-width:720px) {
  .zoom-toolbar {grid-template-columns:auto minmax(0,1fr) auto; padding:10px 12px 6px 22px}
  .zoom-tools {grid-column:2; grid-row:1; justify-content:flex-end}
  .zoom-toolbar .close-btn {grid-column:3}
  #zoomStage {margin:8px 32px 16px}
}
@media(max-width:719px) {
  .stage-tools {justify-content:stretch}
  .stage-tools .btn {flex:1 1 auto}
  .export-panel {flex-direction:column; align-items:stretch; gap:8px; padding:10px 12px calc(10px + var(--safe-b))}
  .export-actions,.export-secondary {flex-direction:column; align-items:stretch}
  .export-main,.export-choice,.print-shop .btn {width:100%}
  .print-shop {flex-direction:column; align-items:stretch}
  .print-shop .btn {margin-left:0}
}