.view-tab.is-active {
      background: var(--ink);
      color: #ffffff;
      box-shadow: 0 8px 16px rgba(0,0,0,.12);
    }

    .pages {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 20px;
    }

    body.preview-question .answer-page { display: none; }
    body.preview-answer .question-page { display: none; }

    .page {
      width: 210mm;
      min-height: 297mm;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 18px 55px rgba(0,0,0,.20);
      overflow: hidden;
      position: relative;
    }

    .paper-bg {
      position: absolute;
      inset: 0;
      background: none;
      pointer-events: none;
    }

    svg {
      width: 100%;
      height: auto;
      position: relative;
      z-index: 1;
      display: block;
    }

    .page svg { aspect-ratio: 210 / 297; }

    @media (max-width: 1180px) {
      .app { grid-template-columns: 1fr; }
      .controls { position: static; height: auto; }
      .preview-wrap { height: auto; }
      .preview-shell { min-width: 0; overflow: auto; }
      .page { transform-origin: top center; }
    }

    @media (max-width: 760px) {
      .app { padding: 10px; gap: 12px; }
      .controls,
      .preview-wrap { border-radius: 22px; }
      .btns { grid-template-columns: 1fr; }
      .print-menu { position: static; margin-top: 8px; }
      .preview-toolbar { align-items: center; flex-direction: row; }
      .view-tabs { width: 100%; max-width: 360px; }
      .view-tab { flex: 1; min-width: 0; }
      .row-range-item { grid-template-columns: 1fr; }
    }

    @page { size: A4 portrait; margin: 0; }

    @media print {
      html, body {
        width: 210mm;
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .app { display: block; padding: 0; margin: 0; }
      .controls { display: none !important; }
      .preview-toolbar { display: none !important; }
      .preview-wrap { display: block; height: auto; padding: 0; margin: 0; overflow: visible; border: 0; box-shadow: none; background: #ffffff; }
      .preview-shell { display: block; min-width: 0; padding: 0; margin: 0; }
      .pages { display: block; gap: 0; margin: 0; padding: 0; }

      .page {
        width: 210mm;
        min-width: 210mm;
        max-width: 210mm;
        min-height: 297mm;
        height: 297mm;
        background: #ffffff !important;
        border-radius: 0;
        box-shadow: none;
        page-break-after: always;
        break-after: page;
        overflow: hidden;
      }

      .paper-bg { display: none !important; }

      .page svg {
        width: 200mm !important;
        height: 282.97mm !important;
        margin: 7mm 5mm !important;
        display: block;
      }

      body.print-question .answer-page { display: none !important; }
      body.print-answer .question-page { display: none !important; }
      body.print-both .question-page,
      body.print-both .answer-page { display: block !important; }
    }

    @media print {
      body.print-question .question-page { display: block !important; }
      body.print-question .answer-page { display: none !important; }
      body.print-answer .question-page { display: none !important; }
      body.print-answer .answer-page { display: block !important; }
      body.print-both .question-page,
      body.print-both .answer-page { display: block !important; }
    }

    @media screen {
      body[data-theme="pastel"] {
        --bg: #f3ebe5;
        --bg-2: #fffaf7;
        --panel: rgba(255, 253, 250, .84);
        --panel-solid: #fffdfb;
        --ink: #2c2523;
        --muted: #87756f;
        --line: #ead9d2;
        --line-strong: #ddc4bc;
        --accent: #dc8fa9;
        --accent-2: #f5d7dc;
        --blue: #e99ab4;
        --green: #94cfa8;
        --orange: #efb160;
        --purple: #aa93de;
        --ghost: #aa9d96;
        --field-bg: rgba(255,255,255,.66);
        --select-bg: rgba(255,255,255,.95);
        --status-bg: rgba(255,245,248,.82);
        --focus: #d87f9d;
        --shadow: 0 26px 70px rgba(87, 62, 55, .17);
        --soft-shadow: 0 12px 32px rgba(87, 62, 55, .10);
      }

      body[data-theme="bw"] {
        --bg: #eeeeee;
        --bg-2: #ffffff;
        --panel: rgba(255,255,255,.88);
        --panel-solid: #ffffff;
        --ink: #161616;
        --muted: #666666;
        --line: #dddddd;
        --line-strong: #bfbfbf;
        --accent: #151515;
        --accent-2: #efefef;
        --blue: #1d1d1d;
        --green: #3a3a3a;
        --orange: #565656;
        --purple: #2d2d2d;
        --ghost: #777777;
        --field-bg: rgba(255,255,255,.78);
        --select-bg: #ffffff;
        --status-bg: #f0f0f0;
        --focus: #111111;
        --shadow: 0 26px 70px rgba(0,0,0,.12);
        --soft-shadow: 0 12px 32px rgba(0,0,0,.08);
      }

      body {
        background:
          radial-gradient(circle at 10% 8%, rgba(245, 215, 220, .95), transparent 32%),
          radial-gradient(circle at 88% 10%, rgba(224, 211, 246, .55), transparent 30%),
          radial-gradient(circle at 48% 96%, rgba(244, 220, 185, .48), transparent 34%),
          linear-gradient(135deg, var(--bg-2), var(--bg));
      }

      body[data-theme="bw"] {
        background:
          radial-gradient(circle at 10% 8%, rgba(235,235,235,.95), transparent 32%),
          radial-gradient(circle at 88% 10%, rgba(220,220,220,.60), transparent 30%),
          linear-gradient(135deg, var(--bg-2), var(--bg));
      }

      .controls,
      .preview-wrap {
        border: 1px solid rgba(255,255,255,.72);
        background:
          linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,248,245,.62));
        box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.74);
      }

      body[data-theme="bw"] .controls,
      body[data-theme="bw"] .preview-wrap {
        background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(245,245,245,.74));
        border-color: #d7d7d7;
      }

      .brand {
        background:
          linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,246,243,.76)),
          radial-gradient(circle at 10% 0%, rgba(241,167,189,.26), transparent 45%);
        box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,.86);
      }

      .setting-group {
        background: rgba(255,255,255,.58);
        border-color: rgba(221,196,188,.75);
        box-shadow: 0 8px 24px rgba(87, 62, 55, .055), inset 0 1px 0 rgba(255,255,255,.76);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
      }

      .setting-group:hover {
        transform: translateY(-1px);
        border-color: var(--line-strong);
        box-shadow: 0 14px 32px rgba(87, 62, 55, .09), inset 0 1px 0 rgba(255,255,255,.82);
      }

      .setting-group summary::after {
        background: linear-gradient(135deg, #fff6f8, var(--accent-2));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px rgba(216,127,157,.16);
        transition: transform .22s ease, background .22s ease;
      }

      .setting-group[open] summary::after { transform: rotate(180deg); }

      .field {
        background: rgba(255,255,255,.68);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
      }

      select,
      input[type="text"],
      input[type="number"] {
        transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
      }

      select:hover,
      input[type="text"]:hover,
      input[type="number"]:hover {
        transform: translateY(-1px);
        border-color: var(--focus);
        box-shadow: 0 8px 18px rgba(87,62,55,.07), inset 0 1px 0 rgba(255,255,255,.8);
      }

      button {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.50);
        box-shadow: 0 12px 26px rgba(87,62,55,.14), inset 0 1px 0 rgba(255,255,255,.32);
        transition: transform .20s cubic-bezier(.2,.8,.2,1), box-shadow .20s ease, filter .20s ease, opacity .20s ease;
      }

      button::after {
        content: "";
        position: absolute;
        inset: -40% auto -40% -70%;
        width: 50%;
        transform: skewX(-18deg);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
        opacity: 0;
        transition: left .55s ease, opacity .24s ease;
        pointer-events: none;
      }

      button:hover {
        transform: translateY(-2px);
        filter: saturate(1.04) brightness(1.01);
        box-shadow: 0 18px 34px rgba(87,62,55,.18), inset 0 1px 0 rgba(255,255,255,.42);
      }

      button:hover::after {
        left: 120%;
        opacity: 1;
      }

      button:active {
        transform: translateY(0) scale(.985);
        box-shadow: 0 8px 18px rgba(87,62,55,.13), inset 0 2px 4px rgba(0,0,0,.06);
      }

      .primary { background: linear-gradient(135deg, #e98dac, #f2b6c8); }
      .print-main { background: linear-gradient(135deg, #8bc89f, #b7ddb8); }
      .print-q { background: linear-gradient(135deg, #88c69d, #b8deba); }
      .print-a { background: linear-gradient(135deg, #efaa55, #f8c77e); }
      .print-both { background: linear-gradient(135deg, #a58ee0, #c5b4ee); }
      .ghost { background: linear-gradient(135deg, #a99b94, #c1b6b0); }

      body[data-theme="bw"] .primary,
      body[data-theme="bw"] .print-main,
      body[data-theme="bw"] .print-q,
      body[data-theme="bw"] .print-a,
      body[data-theme="bw"] .print-both,
      body[data-theme="bw"] .ghost {
        background: linear-gradient(135deg, #111, #555);
        border-color: rgba(255,255,255,.22);
      }

      .print-menu {
        display: grid;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(8px) scale(.98);
        transform-origin: top center;
        transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1), visibility .18s ease;
        background: rgba(255,253,251,.96);
        backdrop-filter: blur(16px);
      }

      .print-dropdown.is-open .print-menu {
        display: grid;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }

      .view-tabs {
        background: rgba(255,253,251,.86);
        border-color: rgba(221,196,188,.76);
        box-shadow: 0 14px 32px rgba(87,62,55,.12), inset 0 1px 0 rgba(255,255,255,.76);
      }

      .view-tab {
        color: var(--muted);
        transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
      }

      .view-tab:hover { transform: translateY(-1px); }
      .view-tab.is-active {
        background: linear-gradient(135deg, #2c2523, #5b4d49);
        color: #fff;
        box-shadow: 0 10px 18px rgba(44,37,35,.18);
      }

      body[data-theme="bw"] .view-tab.is-active {
        background: linear-gradient(135deg, #111, #444);
      }

      .page {
        box-shadow: 0 22px 62px rgba(52, 38, 34, .22);
      }
    }

    body {
      background:
        radial-gradient(circle at 16% 6%, rgba(246, 205, 210, .24), transparent 30%),
        linear-gradient(135deg, #fbf7f4 0%, #fffdfb 48%, #f7f1ee 100%);
    }

    body[data-theme="bw"] {
      background:
        radial-gradient(circle at 16% 6%, rgba(0,0,0,.045), transparent 30%),
        linear-gradient(135deg, #f7f7f7 0%, #ffffff 52%, #eeeeee 100%);
    }

    .app {
      grid-template-columns: 390px minmax(0, 1fr);
      gap: 24px;
      padding: 22px 24px;
    }

    .controls {
      top: 22px;
      height: calc(100vh - 44px);
      padding: 4px 20px 10px 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      backdrop-filter: none;
      border-right: 1px solid rgba(122, 94, 90, .14);
    }

    body[data-theme="bw"] .controls {
      border-right: 1px solid rgba(0,0,0,.12);
    }

    .brand {
      margin: 0 0 22px;
      padding: 4px 0 20px;
      border: 0;
      border-bottom: 1px solid rgba(122, 94, 90, .14);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

    body[data-theme="bw"] .brand {
      border-bottom-color: rgba(0,0,0,.12);
    }

    .brand::after { display: none; }

    .brand h1 {
      margin: 0 0 9px;
      font-size: 22px;
      font-weight: 920;
      line-height: 1.18;
      letter-spacing: -0.055em;
    }

    .brand p {
      max-width: 330px;
      font-size: 12.5px;
      line-height: 1.62;
      color: var(--muted);
    }

    .setting-group {
      margin: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      border-bottom: 1px solid rgba(122, 94, 90, .12);
    }

    body[data-theme="bw"] .setting-group {
      border-bottom-color: rgba(0,0,0,.11);
    }

    .setting-group summary {
      padding: 18px 0;
      min-height: 58px;
      font-size: 14px;
      font-weight: 880;
      letter-spacing: -0.035em;
      color: var(--ink);
      transition: color .18s ease, padding-left .18s ease;
    }

    .setting-group summary:hover {
      color: var(--focus);
      padding-left: 4px;
    }

    body[data-theme="bw"] .setting-group summary:hover {
      color: #000;
    }

    .setting-group summary::after {
      content: "⌄";
      width: auto;
      height: auto;
      display: inline-block;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-size: 17px;
      font-weight: 650;
      line-height: 1;
      transform: rotate(0deg);
      transition: transform .2s ease, color .18s ease;
    }

    .setting-group[open] summary::after {
      content: "⌄";
      transform: rotate(180deg);
    }

    body[data-theme="bw"] .setting-group summary::after {
      background: transparent;
    }

    .setting-group-body {
      padding: 0 0 18px;
      border-top: 0;
      animation: cleanOpen .18s ease both;
    }

    @keyframes cleanOpen {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .field {
      margin: 0;
      padding: 10px 0 13px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .setting-group-body .field:first-child { margin-top: 0; }
    .setting-group-body .field:last-child { margin-bottom: 0; padding-bottom: 0; }

    label.title {
      margin-bottom: 8px;
      font-size: 12.5px;
      font-weight: 820;
      letter-spacing: -0.025em;
      color: rgba(43,37,37,.88);
    }

    body[data-theme="bw"] label.title {
      color: rgba(0,0,0,.82);
    }

    select,
    input[type="text"],
    input[type="number"] {
      padding: 12px 13px;
      border: 1px solid rgba(146, 113, 108, .20);
      border-radius: 14px;
      background: rgba(255,255,255,.72);
      box-shadow: 0 1px 0 rgba(255,255,255,.86) inset;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
    }

/* Locrian generated screen UI font-size uplift; do not edit. */
@media screen {
.brand h1{font-size:calc(22px + 2pt)}
.brand h1{font-weight:870}
.brand p{font-size:calc(12.5px + 2pt)}
.setting-group summary{font-size:calc(14px + 2pt)}
.setting-group summary{font-weight:830}
.setting-group summary::after{font-size:calc(17px + 2pt)}
.setting-group summary::after{font-weight:600}
label.title{font-size:calc(12.5px + 2pt)}
label.title{font-weight:770}
}