/* Modern Stationery: screen presentation only. Paper and print styles are untouched. */
@media screen {
  :root {
    --color-page: #faf7f0;
    --color-surface: #fff;
    --color-soft: #f1f3eb;
    --color-soft-warm: #f6f0e5;
    --color-primary: #356c56;
    --color-primary-hover: #28513f;
    --color-heading: #193f39;
    --color-text: #293d38;
    --color-muted: #596b61;
    --color-border: #e7e5db;
    --color-input-border: #8a9587;
    --color-focus: #895016;
    --color-error: #963f2c;
    --color-error-bg: #fff4ee;
    --radius-sm: 7px;
    --radius-card: 12px;
    --radius-feature: 18px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-section: 72px;
    --shadow-card: 0 4px 20px #3f493009;
    --shadow-hover: 0 12px 28px #3f493014;
    --shadow-paper: 0 12px 30px #4544311c, 0 1px 4px #45443112;
    /* Existing shared components resolve to the same central palette. */
    --blue: var(--color-primary);
    --navy: var(--color-heading);
    --ink: var(--color-text);
    --pale: var(--color-soft);
    --soft: var(--color-soft);
    --border: var(--color-border);
    --muted: var(--color-muted);
    --radius: var(--radius-card);
    color: var(--color-text);
    background: var(--color-page);
  }

  body { background: var(--color-page); color: var(--color-text); }
  h1, h2, h3, h4 { color: var(--color-heading); letter-spacing: -.03em; }
  p, li { text-wrap: pretty; }
  a { color: var(--color-primary); }
  a:hover { color: var(--color-primary-hover); }
  :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; box-shadow: 0 0 0 3px var(--color-surface); }
  .wrap { width: min(1216px, calc(100% - 80px)); }
  .eyebrow { color: var(--color-primary); letter-spacing: 1.65px; }
  .muted, .small-note { color: var(--color-muted); }
  .button, button { border-radius: var(--radius-sm); background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
  .button:hover, button:hover { color: #fff; background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
  .button.secondary, button.secondary { background: var(--color-surface); color: var(--color-heading); border-color: var(--color-input-border); }
  .secondary:hover { background: var(--color-soft)!important; color: var(--color-heading)!important; border-color: var(--color-primary)!important; }
  .text-button { color: var(--color-primary); background: transparent; border-color: transparent; }
  .text-button:hover { color: var(--color-primary-hover); background: transparent; border-color: transparent; }
  button:disabled { cursor: not-allowed; opacity: .55; }
  .skip { color: var(--color-heading); border-color: var(--color-primary); background: var(--color-surface); }

  .site-header { background: var(--color-surface); border-color: var(--color-border); }
  .header-inner { min-height: 96px; }
  .site-header .brand-logo { height: auto; object-fit: contain; }
  .site-header .brand-text small { color: var(--color-muted); }
  .site-nav a { color: var(--color-text); }
  .site-nav a:hover, .site-nav a[aria-current=page] { color: var(--color-primary-hover); background: var(--color-soft); }
  .nav-toggle { color: var(--color-heading); }

  .hero { background: radial-gradient(ellipse at 82% 60%, #e9e5d5 0%, transparent 48%), var(--color-page); border-color: var(--color-border); }
  .hero-inner { min-height: 550px; padding-block: 64px; gap: 50px; }
  .hero h1 { font-size: clamp(46px, 4.7vw, 68px); line-height: 1.07; font-weight: 720; }
  .hero-copy>p { color: var(--color-muted); }
  .hero-copy .hero-meta { color: var(--color-muted); }
  .hero-buttons .button { padding: 15px 19px; }
  .hero-art:before { background: #e6e5d6; border-radius: 48% 52% 45% 55%; }
  .hero-art .sheet { box-shadow: var(--shadow-paper); border-color: #dddacc; }
  .art-note { border-color: var(--color-border); box-shadow: var(--shadow-card); background: var(--color-surface); color: var(--color-heading); }
  .art-note small { color: var(--color-muted); }
  .art-note-icon { background: var(--color-soft); color: var(--color-primary); }

  .section { padding-block: var(--space-section); }
  .section.soft { background: var(--color-soft); border-color: var(--color-border); }
  .section-heading p { color: var(--color-muted); }
  .section-heading h2 { font-size: 31px; font-weight: 700; }
  .card { background: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
  .card:hover { border-color: #a3b9a6; box-shadow: var(--shadow-hover); transform: translateY(-3px); }
  .card-art { background: var(--color-soft-warm); border-color: var(--color-border); }
  .card-art svg { background: #fff; border-color: #e1dfd5; box-shadow: 0 5px 12px #4544310d; }
  .card-body p { color: var(--color-muted); }
  .card-link { color: var(--color-primary); }
  .paper-type-grid { gap: 20px; }
  .paper-type-grid .card, .paper-type-grid .card:last-child { background: var(--color-surface); }
  .paper-type-grid .card-art { height: 156px; padding: 22px 34px 0; }
  .paper-type-grid .card-body { padding: 22px; }
  .paper-type-grid .card-body h3 { font-size: 19px; }
  .steps article+article { border-color: #dce0d4; }
  .steps p { color: var(--color-muted); }
  .step-number { background: var(--color-surface); color: var(--color-primary); border-color: #d0d9c9; }
  .tag { color: var(--color-primary-hover); background: var(--color-soft); border-radius: var(--radius-sm); }
  .task-group { background: #f5f3ec; border-color: var(--color-border); }
  .task-intro p { color: var(--color-muted); }
  .feature-panel { border-color: var(--color-border); background: var(--color-soft); border-radius: var(--radius-feature); }
  .feature-art { background: #e4e8dc; }
  .feature-copy p { color: var(--color-muted); }
  .workflow-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .workflow-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-card); }
  .workflow-card>p { color: var(--color-muted); }
  /* The existing Paper Packs feature becomes its own full-width stationery panel. */
  .workflow-card:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; padding: 40px; background: var(--color-soft-warm); }
  .workflow-card:first-child .pack-sample { grid-column: 2; grid-row: 1 / span 5; height: 100%; min-height: 245px; margin: 0; align-self: stretch; }
  .workflow-card:first-child>.tag, .workflow-card:first-child>h3, .workflow-card:first-child>p, .workflow-card:first-child>.button { grid-column: 1; justify-self: start; }
  .pack-sample, .accuracy-sample { background: #edeadd; }
  .pack-sample>div { box-shadow: var(--shadow-paper); }
  .workflow-card:last-child { display: grid; grid-template-columns: 240px 1fr; gap: 0 32px; align-items: start; }
  .workflow-card:last-child .accuracy-sample { grid-column: 1; grid-row: 1 / span 6; margin: 0; min-height: 190px; height: 100%; }
  .workflow-card:last-child>.tag, .workflow-card:last-child>h3, .workflow-card:last-child>p, .workflow-card:last-child>.button { grid-column: 2; justify-self: start; }
  .accuracy-sample { background: var(--color-soft); }
  .accuracy-sample>div:first-child, .accuracy-sample p { color: var(--color-heading); }
  .sample-ruler, .sample-ruler:before { border-color: var(--color-primary); }
  .sample-square { border-color: #789381; background: repeating-linear-gradient(0deg,transparent 0 9px,#cfdacb 9px 10px),repeating-linear-gradient(90deg,transparent 0 9px,#cfdacb 9px 10px); }
  .release-note { border-color: var(--color-border); color: var(--color-muted); }

  .page-heading { padding-block: 42px 30px; }
  .page-heading p, .breadcrumb { color: var(--color-muted); }
  .generator { grid-template-columns: 360px minmax(0,1fr); gap: 28px; }
  .controls { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-card); border-radius: var(--radius-card); }
  .control-heading { border-color: var(--color-border); }
  .controls fieldset { border-color: var(--color-border); }
  .controls legend, .controls label, label { color: var(--color-heading); }
  .controls legend { font-size: 13px; }
  .controls .field-pair:has(select[name=format]) { grid-template-columns: 1fr; }
  .controls fieldset p { color: var(--color-muted); }
  input, select, textarea, .check-workspace textarea { background: #fffefa; border-color: var(--color-input-border); color: var(--color-text); border-radius: var(--radius-sm); }
  input:hover, select:hover, textarea:hover { border-color: #6f8b78; }
  input[type=checkbox] { accent-color: var(--color-primary); }
  input::file-selector-button { background: var(--color-soft); color: var(--color-heading); border: 1px solid var(--color-border); border-radius: 4px; padding: 4px 8px; }
  .settings-section { background: #fafbf6; border-color: var(--color-border)!important; }
  .settings-section>summary, summary { color: var(--color-heading); }
  .tool-output p { color: var(--color-muted); }
  .status { background: var(--color-error-bg); color: var(--color-error); }
  .preview-panel, .pack-preview-panel, .check-preview-panel { background: #eeeee5; border-color: var(--color-border); border-radius: var(--radius-card); }
  .preview-bar strong { color: var(--color-heading); }
  .preview-bar, .preview-caption, .paper-dimensions { color: var(--color-muted); }
  .paper-preview, .pack-detail, .check-preview { background: #fff; box-shadow: var(--shadow-paper); }
  .generator[data-preview-valid=false] .preview-panel { border-color: var(--color-error); }
  .generator[data-preview-valid=false] .preview-caption { color: var(--color-error); }
  .controls [aria-invalid=true], .pack-workspace [aria-invalid=true], .check-workspace [aria-invalid=true], dialog [aria-invalid=true] { border: 2px solid var(--color-error); background: var(--color-error-bg); }
  .math-layout-controls { border-color: var(--color-border)!important; background: var(--color-soft); }
  .notice { background: var(--color-soft); border-color: var(--color-border); border-left-color: var(--color-primary); color: var(--color-text); }
  .notice strong { color: var(--color-heading); }

  .pack-panel { border-color: var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
  .pack-panel legend { color: var(--color-heading); }
  .pack-panel p { color: var(--color-muted); }
  .pack-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
  .pack-overview { border-color: #d6dfcf; background: var(--color-soft); border-radius: var(--radius-card); }
  .pack-overview [data-pack-overview] { font-size: 24px; color: var(--color-heading); }
  .pack-overview [data-pack-status] { color: var(--color-muted); }
  .pack-items>li { border-color: var(--color-border); }
  .pack-items strong { color: var(--color-heading); }
  .pack-items .pack-toolbar button { border-color: var(--color-border); }
  .pack-thumb { color: var(--color-text); background: var(--color-surface); border-color: var(--color-border); }
  .pack-thumb:hover { background: var(--color-soft); color: var(--color-heading); }
  .pack-thumb[aria-pressed=true] { outline-color: var(--color-primary); border-color: var(--color-primary); }
  .pack-thumb>span:last-child { color: var(--color-text); }
  .thumb-art { background: #f2f1ea; }
  .print-workflow { border-color: var(--color-border); }
  .print-workflow>div { background: var(--color-soft); border: 1px solid var(--color-border); }
  .print-workflow h3 { color: var(--color-heading); }
  dialog { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); border-radius: var(--radius-feature); box-shadow: 0 24px 80px #203e303d; }
  dialog::backdrop { background: #263d338c; }
  .editor-preview { background: var(--color-soft); border-color: var(--color-border); }
  .check-print-step, .check-results { background: var(--color-soft); }
  .check-results [data-result-state] { color: var(--color-heading); }
  .check-results [data-axis-results] p { border-left-color: var(--color-primary); background: var(--color-surface); color: var(--color-text); }
  .check-table-scroll { border-color: var(--color-border); }
  .check-table th { background: var(--color-soft); color: var(--color-heading); }
  .check-table td, .check-table th { border-color: var(--color-border); }
  .check-field-error { color: var(--color-error); }
  .check-workspace [data-check-status] { background: var(--color-soft); color: var(--color-text); }

  .prose { line-height: 1.9; }
  .prose dd { color: var(--color-muted); }
  .reading-guide>ol>li { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-card); }
  .reading-guide>ol>li:before { color: var(--color-primary); }
  .content-settings, .parameter-example { background: var(--color-soft); border-color: var(--color-border); border-radius: var(--radius-card); }
  .content-settings dt { color: var(--color-heading); }
  .content-sample img, .pack-content-samples img { background: #fff; border-color: var(--color-border); }
  .content-sample figcaption, .pack-content-samples figcaption { color: var(--color-muted); }
  .example-preview { background: var(--color-soft); border-color: var(--color-border); }
  .example-preview p { color: var(--color-muted); }
  .site-footer { background: var(--color-soft); border-color: var(--color-border); color: var(--color-muted); }
  .footer-group a, .footer-note, .footer-brand p { color: var(--color-muted); }
  .footer-group a:hover { color: var(--color-primary-hover); }
  .footer-bottom { border-color: #dce0d4; }

  @media (max-width:1099px) {
    .generator { grid-template-columns: 1fr; }
    .generator .controls { max-width: 720px; width: 100%; margin-inline: auto; }
    .preview-panel { position: static; width: 100%; max-width: 720px; margin-inline: auto; }
  }
  @media (max-width:1000px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .hero-copy { max-width: 680px; }
    .hero-art { width: 100%; max-width: 500px; margin-inline: auto; }
    .workflow-card:first-child { gap: 0 28px; padding: 28px; }
    .workflow-card:last-child { grid-template-columns: 190px 1fr; gap: 0 24px; }
    .pack-grid { grid-template-columns: 1fr; }
    .pack-preview-panel { position: static; }
  }
  @media (max-width:640px) {
    :root { --space-section: 44px; }
    .wrap { width: calc(100% - 36px); }
    .header-inner { min-height: 84px; }
    .site-nav { border-color: var(--color-border); }
    .hero-inner { padding-block: 40px 34px; gap: 28px; }
    .hero h1 { font-size: 43px; line-height: 1.12; }
    .section-heading h2 { font-size: 28px; }
    .paper-type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .paper-type-grid .card { display: block; }
    .paper-type-grid .card-art { height: 100px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--color-border); padding: 15px 20px 0; }
    .paper-type-grid .card-art svg { width: 100%; max-width: 100%; }
    .paper-type-grid .card-body { padding: 16px 13px; }
    .paper-type-grid .card-body h3 { font-size: 17px; line-height: 1.3; }
    .paper-type-grid .card-body p { font-size: 12px; line-height: 1.7; }
    .paper-type-grid .card-link { font-size: 11px; }
    .task-group { background: var(--color-soft-warm); }
    .workflow-card:first-child, .workflow-card:last-child { display: block; padding: 24px; }
    .workflow-card:first-child .pack-sample { min-height: 160px; height: 160px; margin-bottom: 24px; }
    .workflow-card:last-child .accuracy-sample { min-height: 150px; height: 150px; margin-bottom: 24px; }
    .workflow-card .button { max-width: 100%; }
    .feature-panel { gap: 24px; }
    .controls .field-pair, .pack-panel .field-pair { grid-template-columns: 1fr; }
    .prose, .prose.wrap { width: calc(100% - 36px); }
    .pack-workspace>.prose, .check-workspace>.prose { width: 100%; }
    .print-workflow { grid-template-columns: 1fr; }
  }
  @media (max-width:360px) {
    .wrap, .prose.wrap { width: calc(100% - 28px); }
    .hero h1 { font-size: 37px; }
    .paper-type-grid .card-art { padding-inline: 16px; height: 90px; }
    .paper-type-grid .card-body { padding: 14px 11px; }
    .paper-type-grid .card-body h3 { font-size: 16px; }
  }
}