/* Hallmark · checked: 2026-10-31 · genre: modern-minimal (inferred)
 * floor 0 FAIL · reflex 0 · answered 1 (F4) · before 77 FAIL / 37 REFLEX
 * fixed 12 gates (2, 7, 19, 22, 26a, 26b, 34, 40, 48, 63, 72, 75) · structural: none, app screen
 * finish-review: in-thread · 4 findings · 3 resolved · 1 handed over (preview scale, full depth) · v2.0.0
 * built: the project · redesign: polish */
/* Hallmark · answered F4 · the pressed segment is a toggle state, not a second action; the print button is the one filled action */
:root{
  color-scheme:light;
  /* paper, ink, and one moss signal; every pair below measured 3:1 / 4.5:1 */
  --color-paper:oklch(97% 0.0093 113.2);
  --color-paper-2:oklch(98.2% 0.0093 113.2);
  --color-panel:oklch(99.7% 0.0041 91.4);
  --color-sheet:oklch(100% 0 0);
  --color-well:oklch(95.3% 0.0149 119.1);
  --color-well-2:oklch(93.1% 0.0222 123.6);
  --color-mat:oklch(93.6% 0.0178 120.7);
  --color-mat-dot:oklch(82.8% 0.0284 122.8 / 0.55);
  --color-rule:oklch(90.6% 0.0166 121.8);
  --color-rule-2:oklch(85.4% 0.023 126.3);
  --color-edge:oklch(61.7% 0.0306 136.9);
  --color-ink:oklch(34.2% 0.034 158.9);
  --color-ink-2:oklch(41.5% 0.0367 157.6);
  --color-muted:oklch(50.9% 0.0346 139.1);
  --color-brand:oklch(45.9% 0.0531 159.1);
  --color-brand-2:oklch(41.4% 0.0526 155.4);
  --color-accent-ink:oklch(99.6% 0.0093 100);
  --color-focus:oklch(47.4% 0.0831 158.3);
  /* the ink the printed sheet spends, one tint per cell */
  --color-print-1:oklch(46.5% 0.0459 150.2);
  --color-print-2:oklch(58.2% 0.1 52.8);
  --color-print-3:oklch(55.4% 0.0525 180.5);
  --color-print-4:oklch(56.7% 0.0837 89.4);
  --color-print-mono:oklch(22.4% 0.0059 121.9);
  --color-trace:oklch(66% 0.0232 127.5);
  --color-cut:oklch(59.1% 0.0101 134.9);
  --shadow-sheet:0 3px 20px oklch(31% 0.0386 139.2 / 0.09);
  --shadow-pop:0 5px 16px oklch(31% 0.0386 139.2 / 0.10);
  /* the select caret: mask ink only, the colour comes from --color-muted */
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 3.6L9 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --digit-font:"小芽黑体数字",var(--font-body);

  --text-sm:12px;
  --text-md:14px;
  --text-lg:16px;
  --text-xl:18px;
  --leading:1.55;

  --space-3xs:2px;
  --space-2xs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:40px;

  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:10px;

  --dur-micro:120ms;
  --dur-short:220ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);

  caret-color:var(--color-brand);
  scrollbar-width:thin;
  scrollbar-color:var(--color-rule-2) transparent;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;height:100dvh;overflow-x:clip;overflow-y:hidden;display:flex;flex-direction:column;background:var(--color-paper);color:var(--color-ink);font:400 var(--text-md)/var(--leading) var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2{margin:0;overflow-wrap:break-word;min-width:0;text-wrap:balance}
h2{font-size:var(--text-lg);font-weight:600;line-height:1.3}
::selection{background:var(--color-well-2);color:var(--color-ink)}
button,select,input{font:inherit;color:inherit}
button,select,label{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

.site-header{height:56px;flex-shrink:0;display:flex;align-items:center;padding:0 var(--space-lg)}
.brand{display:flex;align-items:center;gap:var(--space-xs);min-width:0;white-space:nowrap}
.brand img{width:32px;height:32px;flex-shrink:0}
.brand-name{font-size:var(--text-xl);font-weight:600;line-height:1.2;letter-spacing:0}
.brand-tag{padding-left:var(--space-sm);border-left:1px solid var(--color-rule-2);font-size:var(--text-sm);font-weight:400;color:var(--color-muted)}

main{flex:1;min-height:0;padding:0 var(--space-md) var(--space-md)}
.workspace{height:100%;display:grid;grid-template-columns:320px minmax(0,1fr);border:1px solid var(--color-rule);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-panel)}
.settings{min-height:0;padding:var(--space-md) var(--space-md) var(--space-lg);overflow:auto;overscroll-behavior:contain;border-right:1px solid var(--color-rule);background:var(--color-panel)}
.settings-title{margin:0 0 var(--space-md)}

.template-picker{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs);border:0;padding:0;margin:0 0 var(--space-md);min-width:0}
.template-picker legend,.range-field label,.color-field>span{display:block;padding:0;margin-bottom:var(--space-xs);font-size:var(--text-sm);color:var(--color-ink-2)}
.template-option{position:relative;display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 var(--space-xs);border:1px solid var(--color-edge);border-radius:var(--radius-md);background:var(--color-panel);color:var(--color-muted);cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.template-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;opacity:0;cursor:pointer}
.template-option:has(input:checked){border-color:var(--color-brand);background:var(--color-well);color:var(--color-brand)}
.template-option:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}
@media (hover:hover){.template-option:hover{background:var(--color-well-2)}}

.range-field{margin:0 0 var(--space-md);min-width:0}
.field-control{position:relative;display:grid;min-width:0}
.field-control::after{content:"";position:absolute;top:50%;right:var(--space-sm);width:10px;height:6px;transform:translateY(-50%);background-color:var(--color-muted);-webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat;pointer-events:none;transition:transform var(--dur-short) var(--ease-out)}
.field-control:has(select:open)::after{transform:translateY(-50%) rotate(180deg)}
.range-field select{display:block;width:100%;min-height:36px;padding:0 28px 0 var(--space-xs);border:1px solid var(--color-edge);border-radius:var(--radius-md);background:var(--color-panel);color:var(--color-ink);font-size:var(--text-md);white-space:nowrap;text-overflow:ellipsis;cursor:pointer;appearance:none;outline:2px solid transparent;outline-offset:-3px;transition:background-color var(--dur-micro) var(--ease-out)}
@supports (appearance: base-select){
  .range-field select{appearance:base-select;display:flex;align-items:center}
  .range-field select::picker-icon{display:none}
}
.range-field select:focus-visible{outline-color:var(--color-focus)}
.range-field select::picker(select){appearance:base-select;margin-block:var(--space-2xs);padding:var(--space-2xs);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-panel);box-shadow:var(--shadow-pop)}
.range-field select option{display:flex;align-items:center;min-height:32px;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-md);color:var(--color-ink)}
.range-field select option:checked{background:var(--color-well);color:var(--color-brand)}
.range-field select option:hover,.range-field select option:focus-visible{background:var(--color-well-2);outline:none}
.range-field select::picker-icon{color:var(--color-muted)}
@media (hover:hover){.range-field select:hover{background:var(--color-well)}}

.field-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--space-sm)}
.field-row .range-field{min-width:0}
.field-row select{padding:0 28px 0 var(--space-xs)}
.font-sample{min-height:48px;margin-top:var(--space-xs);padding:var(--space-sm);border-radius:var(--radius-sm);background:var(--color-well);color:var(--color-ink);font-family:var(--digit-font);font-size:22px;line-height:24px;letter-spacing:0.06em;white-space:nowrap;overflow:hidden}

.color-field{margin-bottom:var(--space-md)}
.segmented{display:flex;gap:var(--space-2xs);padding:var(--space-2xs);border-radius:var(--radius-md);background:var(--color-well)}
.segmented button{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);flex:1;min-height:32px;padding:0 var(--space-xs);border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--color-muted);font-size:var(--text-sm);white-space:nowrap;transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.segmented button[aria-pressed=true]{border-color:var(--color-rule-2);background:var(--color-panel);color:var(--color-ink);font-weight:500}
.segmented button:active{transform:translateY(1px)}
.segmented button:disabled{opacity:0.55;cursor:not-allowed;transform:none}
@media (hover:hover){.segmented button:hover{color:var(--color-ink)}}
.swatch{width:12px;height:12px;flex-shrink:0;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--color-rule-2)}
.swatch-mono{background:var(--color-print-mono)}
.swatch-color{background-image:linear-gradient(90deg,var(--color-print-1) 0 50%,var(--color-print-2) 50% 100%)}

.print-action{margin-top:var(--space-xs);padding-top:var(--space-md);border-top:1px solid var(--color-rule)}
.print-button{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);width:100%;min-height:40px;padding:0 var(--space-md);border:1px solid transparent;border-radius:var(--radius-md);background:var(--color-brand);color:var(--color-accent-ink);font-size:var(--text-md);font-weight:500;white-space:nowrap;transition:background-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.print-button:active{background:var(--color-brand-2);transform:translateY(1px)}
.print-button:disabled{opacity:0.55;cursor:not-allowed;transform:none}
.print-button svg{width:16px;height:16px;flex-shrink:0}
@media (hover:hover){.print-button:hover{background:var(--color-brand-2)}}
.print-action p{margin:var(--space-xs) 0 0;text-align:center;font-size:var(--text-sm);color:var(--color-muted)}
.printing-note{margin:var(--space-md) 0 0;font-size:var(--text-sm);line-height:1.6;color:var(--color-muted)}

.preview{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--color-mat)}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);height:44px;padding:0 var(--space-lg);flex-shrink:0;border-bottom:1px solid var(--color-rule);background:var(--color-paper-2)}
.preview-toolbar h2{font-size:var(--text-lg)}
.paper-badge{font-size:var(--text-sm);color:var(--color-muted)}
.paper-stage{min-height:0;flex:1;overflow:auto;padding:var(--space-lg);background-image:radial-gradient(var(--color-mat-dot) 0.75px,transparent 0.75px);background-size:10px 10px;overscroll-behavior:contain}
.paper-stack{display:flex;flex-direction:column;gap:var(--space-lg);width:100%;max-width:960px;margin:auto}
.preview-footer{display:flex;align-items:center;min-height:36px;padding:var(--space-xs) var(--space-lg);flex-shrink:0;border-top:1px solid var(--color-rule);background:var(--color-paper-2);color:var(--color-muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums}

@media (pointer:coarse){
  .template-option,.range-field select,.segmented button,.print-button{min-height:44px}
}

@font-face{font-family:"小芽黑体数字";src:url("fonts/noto-sans-sc-digits.woff2") format("woff2");font-display:block;font-weight:400}
@font-face{font-family:"小芽文楷数字";src:url("fonts/lxgw-wenkai-digits.woff2") format("woff2");font-display:block;font-weight:400}
@font-face{font-family:"小芽宋体数字";src:url("fonts/noto-serif-sc-digits.woff2") format("woff2");font-display:block;font-weight:400}
[data-font=sans]{--digit-font:"小芽黑体数字",var(--font-body)}
[data-font=wenkai]{--digit-font:"小芽文楷数字",var(--font-body)}
[data-font=serif]{--digit-font:"小芽宋体数字",var(--font-body)}

.sheet{container-type:inline-size;aspect-ratio:210/297;display:flex;flex-direction:column;padding:6.6666667%;background:var(--color-sheet);box-shadow:var(--shadow-sheet);--cell-size:27.472527cqw;--cell-width:var(--cell-size);--cell-height:var(--cell-size);--columns:3}
.size-40{--cell-size:21.978022cqw;--columns:4}
.size-60{--cell-size:32.967033cqw;--columns:3}
.size-quarter,.size-eighth{padding:0;--columns:2;--cell-width:50cqw}
.size-quarter{--cell-size:50cqw;--cell-height:70.7142857cqw}
.size-eighth{--cell-size:35.3571429cqw;--cell-height:35.3571429cqw}
.sheet-content{display:grid;grid-template-columns:repeat(var(--columns),var(--cell-width));grid-auto-rows:var(--cell-height);align-content:start;justify-content:center;flex:1;min-height:0}
.cut-cell{outline:1px dashed var(--color-cut);outline-offset:-0.5px;display:grid;place-items:center;min-width:0;min-height:0}
.cell-number{font-family:var(--digit-font);font-size:calc(var(--cell-size)*.67);font-weight:400;line-height:1;color:var(--color-print-1);font-variant-numeric:lining-nums;text-box:trim-both cap alphabetic}
@supports not (text-box: trim-both cap alphabetic){
  .cell-number{transform:translateY(-0.077em)}
  .sheet[data-font=wenkai] .cell-number{transform:translateY(0.016em)}
  .sheet[data-font=serif] .cell-number{transform:translateY(-0.075em)}
}
.cut-cell:nth-child(4n+2) .cell-number{color:var(--color-print-2)}
.cut-cell:nth-child(4n+3) .cell-number{color:var(--color-print-3)}
.cut-cell:nth-child(4n+4) .cell-number{color:var(--color-print-4)}
.monochrome .cut-cell .cell-number{color:var(--color-print-mono)}
.trace .cell-number{color:transparent!important;-webkit-text-stroke:1px var(--color-trace)}

@media (min-width:761px) and (max-height:700px){
  .settings{padding:var(--space-sm) var(--space-md)}
  .settings-title{margin-bottom:var(--space-sm)}
  .template-picker,.range-field,.color-field{margin-bottom:var(--space-sm)}
  .font-sample{font-size:20px;line-height:22px}
  .print-action{padding-top:var(--space-sm)}
  .printing-note{margin-top:var(--space-sm)}
}
@media (max-width:760px){
  body{height:auto;overflow-x:clip;overflow-y:visible}
  .site-header{height:48px;padding:0 var(--space-sm)}
  .brand{gap:var(--space-xs)}
  .brand img{width:28px;height:28px}
  .brand-name{font-size:var(--text-lg)}
  .brand-tag{font-size:var(--text-sm)}
  main{padding:0 var(--space-xs) var(--space-xs)}
  .workspace{display:flex;flex-direction:column;height:auto}
  .settings{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);padding:var(--space-sm);border-right:0;border-bottom:1px solid var(--color-rule);overflow:visible}
  .settings-title,.template-picker,.font-field,.field-row,.color-field,.print-action,.printing-note{grid-column:1/-1}
  .template-option,.range-field select,.segmented button,.print-button{min-height:44px}
  .settings-title{margin:0}
  .template-picker,.range-field,.color-field{margin:0}
  .font-field{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-sm)}
  .font-field label{grid-column:1/-1}
  .font-sample{margin:0;font-size:20px;letter-spacing:0.04em;line-height:24px}
  .settings>.range-field:not(.font-field){grid-column:1/-1}
  .print-action{padding-top:var(--space-sm);margin:0}
  .printing-note{margin:0}
  .preview-toolbar{height:40px;padding:0 var(--space-sm)}
  .paper-stage{flex:none;overflow:visible;padding:var(--space-sm)}
  .paper-stack{gap:var(--space-md)}
  .preview-footer{padding:var(--space-xs) var(--space-sm)}
}
@media (max-width:480px){
  .field-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}
}
@page{size:A4 portrait;margin:0}
@media print{
  html,body{display:block!important;height:auto!important;overflow:visible!important;margin:0!important;padding:0!important;background:white!important}
  body{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .site-header,.settings,.preview-toolbar,.preview-footer{display:none!important}
  main,.workspace,.preview,.paper-stage,.paper-stack{display:block!important;height:auto!important;overflow:visible!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;width:auto!important;max-width:none!important;box-shadow:none!important}
  .sheet{width:210mm;height:296mm;aspect-ratio:auto;padding:14mm;box-shadow:none;margin:0;break-after:page;break-inside:avoid;overflow:hidden}
  .sheet.size-quarter,.sheet.size-eighth{height:297mm;padding:0}
  .sheet:last-child{break-after:auto}
  .sheet-content{min-height:0}
}