select:hover,
    input[type="text"]:hover,
    input[type="number"]:hover {
      border-color: rgba(229, 138, 164, .48);
      background: rgba(255,255,255,.88);
    }

    select:focus,
    input:focus {
      border-color: rgba(229, 138, 164, .78);
      box-shadow: 0 0 0 4px rgba(229, 138, 164, .12), 0 1px 0 rgba(255,255,255,.86) inset;
      transform: translateY(-1px);
    }

    body[data-theme="bw"] select,
    body[data-theme="bw"] input[type="text"],
    body[data-theme="bw"] input[type="number"] {
      background: rgba(255,255,255,.78);
      border-color: rgba(0,0,0,.16);
    }

    body[data-theme="bw"] select:hover,
    body[data-theme="bw"] input[type="text"]:hover,
    body[data-theme="bw"] input[type="number"]:hover {
      border-color: rgba(0,0,0,.34);
    }

    .hint {
      margin-top: 7px;
      color: rgba(131, 113, 108, .82);
    }

    .radio-list {
      gap: 7px;
    }

    .radio-list label {
      padding: 4px 0;
      color: rgba(43,37,37,.88);
    }

    .row-range-item {
      grid-template-columns: 78px 1fr;
      gap: 10px;
    }

    .btns {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(122, 94, 90, .14);
    }

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

    button {
      position: relative;
      overflow: hidden;
      border-radius: 15px;
      min-height: 45px;
      box-shadow: 0 12px 28px rgba(119, 82, 89, .14);
      transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease, opacity .18s ease;
    }

    button::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.34) 35%, transparent 70%);
      transform: translateX(-120%);
      transition: transform .45s ease;
      pointer-events: none;
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(119, 82, 89, .18);
      filter: saturate(1.03) brightness(1.01);
    }

    button:hover::before { transform: translateX(120%); }
    button:active { transform: translateY(0) scale(.985); }

    .primary {
      background: linear-gradient(135deg, #eaa1b5, #d987a2);
    }

    .print-main {
      background: linear-gradient(135deg, #a7d8b7, #86caa1);
    }

    .print-q { background: linear-gradient(135deg, #a7d8b7, #86caa1); }
    .print-a { background: linear-gradient(135deg, #f3bd78, #e8a85c); }
    .print-both { background: linear-gradient(135deg, #baa4e7, #a990da); }

    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 {
      background: linear-gradient(135deg, #2a2a2a, #111111);
    }

    .print-menu {
      top: calc(100% + 10px);
      padding: 10px;
      border: 1px solid rgba(146,113,108,.18);
      border-radius: 18px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 22px 50px rgba(88, 60, 60, .18);
      backdrop-filter: blur(14px);
      animation: menuDrop .16s ease both;
    }

    @keyframes menuDrop {
      from { opacity: 0; transform: translateY(-5px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .status {
      margin-top: 16px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-size: 12.5px;
    }

    .status.error,
    .error {
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255, 242, 184, .76);
      border: 1px solid rgba(220, 190, 96, .24);
    }

    .preview-wrap {
      border-radius: 28px;
      background: rgba(255,255,255,.46);
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: 0 24px 70px rgba(115, 83, 83, .14);
    }

    .preview-shell {
      padding-top: 16px;
    }

    .preview-toolbar {
      justify-content: center;
      padding: 0 0 16px;
    }

    .view-tabs {
      padding: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,.76);
      border: 1px solid rgba(146,113,108,.16);
      box-shadow: 0 10px 24px rgba(115, 83, 83, .10);
      backdrop-filter: blur(12px);
    }

    .view-tab {
      min-height: 38px;
      border-radius: 999px;
      padding: 9px 22px;
      color: var(--muted);
      background: transparent;
      box-shadow: none;
    }

    .view-tab.is-active {
      color: #fff;
      background: linear-gradient(135deg, #eaa1b5, #d987a2);
      box-shadow: 0 10px 22px rgba(217, 135, 162, .22);
    }

    body[data-theme="bw"] .view-tabs {
      background: rgba(255,255,255,.84);
      border-color: rgba(0,0,0,.12);
    }

    body[data-theme="bw"] .view-tab.is-active {
      background: #111;
      color: #fff;
      box-shadow: 0 10px 22px rgba(0,0,0,.16);
    }

    @media (max-width: 1020px) {
      .app { grid-template-columns: 1fr; padding: 18px; }
      .controls {
        height: auto;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(122, 94, 90, .14);
        padding-bottom: 18px;
      }
    }

    .setting-group {
      overflow: hidden;
    }

    .setting-group summary {
      position: relative;
      padding-right: 8px;
    }

    .setting-group summary::after {
      content: "" !important;
      width: 8px !important;
      height: 8px !important;
      display: inline-block !important;
      border: 0 !important;
      border-right: 1.45px solid currentColor !important;
      border-bottom: 1.45px solid currentColor !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--muted) !important;
      opacity: .72;
      margin: 0 5px 2px 0;
      transform: rotate(45deg);
      transform-origin: 50% 50%;
      transition:
        transform .32s cubic-bezier(.16, 1, .3, 1),
        color .18s ease,
        opacity .18s ease;
    }

    .setting-group summary:hover::after {
      color: var(--focus) !important;
      opacity: 1;
    }

    .setting-group[open] summary::after {
      transform: rotate(225deg);
      margin-bottom: -2px;
    }

    body[data-theme="bw"] .setting-group summary::after,
    body[data-theme="bw"] .setting-group[open] summary::after {
      background: transparent !important;
      box-shadow: none !important;
    }

    .setting-group-body {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transform: translateY(-8px);
      animation: none !important;
      transition:
        max-height .36s cubic-bezier(.16, 1, .3, 1),
        opacity .24s ease,
        transform .36s cubic-bezier(.16, 1, .3, 1),
        padding .26s ease;
      will-change: max-height, opacity, transform;
    }

    .setting-group[open] .setting-group-body {
      opacity: 1;
      transform: translateY(0);
    }

    .setting-group.is-collapsing .setting-group-body {
      opacity: 0;
      transform: translateY(-8px);
    }

    button::before,
    button::after,
    .view-tab::before,
    .view-tab::after {
      content: none !important;
      display: none !important;
      opacity: 0 !important;
      transform: none !important;
    }

    button:hover::before,
    button:hover::after,
    .view-tab:hover::before,
    .view-tab:hover::after {
      content: none !important;
      display: none !important;
      opacity: 0 !important;
      transform: none !important;
    }

    .brand h1 {
      font-family: var(--locrian-ui-font);
      font-size: 23px;
      font-weight: 750;
      line-height: 1.22;
      letter-spacing: -0.045em;
      color: var(--ink);
      text-wrap: balance;
    }

    .brand p {
      letter-spacing: -0.015em;
    }

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

      .app {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      .controls,
      .preview-toolbar,
      .print-menu,
      .btns {
        display: none !important;
      }

      .preview-wrap,
      .preview-shell,
      .pages {
        display: block !important;
        width: 210mm !important;
        height: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
      }

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

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

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

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

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

    body[data-theme="bw"] .controls {
      --bg: #f7f1ec;
      --bg-2: #fff8f6;
      --panel: rgba(255,255,255,.86);
      --panel-solid: #fffdfb;
      --ink: #2b2525;
      --muted: #83716c;
      --line: #efdeda;
      --line-strong: #e5c8c8;
      --accent: #f1a7bd;
      --accent-2: #f6cdd2;
      --yellow: #fff2b8;
      --blue: #f0a6bd;
      --green: #9fd8b2;
      --orange: #f5b76d;
      --purple: #b9a1ea;
      --ghost: #afa29b;
      --field-bg: rgba(255,255,255,.72);
      --select-bg: #fffefb;
      --status-bg: #fff2f6;
      --focus: #e58aa4;
      --shadow: 0 22px 60px rgba(115, 83, 83, .16);
      --soft-shadow: 0 10px 24px rgba(115, 83, 83, .10);
      color: var(--ink);
      border-right-color: rgba(122, 94, 90, .14) !important;
    }

    body[data-theme="bw"] .controls .brand {
      border-bottom-color: rgba(122, 94, 90, .14) !important;
    }

    body[data-theme="bw"] .controls .setting-group {
      border-bottom-color: rgba(122, 94, 90, .12) !important;
    }

    body[data-theme="bw"] .controls .setting-group summary,
    body[data-theme="bw"] .controls label.title,
    body[data-theme="bw"] .controls .radio-list label,
    body[data-theme="bw"] .controls .brand h1 {
      color: var(--ink) !important;
    }

    body[data-theme="bw"] .controls .setting-group summary:hover,
    body[data-theme="bw"] .controls .setting-group summary:hover::after {
      color: var(--focus) !important;
    }

    body[data-theme="bw"] .controls .setting-group summary::after,
    body[data-theme="bw"] .controls .setting-group[open] summary::after {
      color: var(--muted) !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body[data-theme="bw"] .controls select,
    body[data-theme="bw"] .controls input[type="text"],
    body[data-theme="bw"] .controls input[type="number"] {
      background: rgba(255,255,255,.72) !important;
      border-color: rgba(146, 113, 108, .20) !important;
      color: var(--ink) !important;
    }

    body[data-theme="bw"] .controls select:hover,
    body[data-theme="bw"] .controls input[type="text"]:hover,
    body[data-theme="bw"] .controls input[type="number"]:hover {
      border-color: rgba(229, 138, 164, .48) !important;
      background: rgba(255,255,255,.88) !important;
    }

    body[data-theme="bw"] .controls select:focus,
    body[data-theme="bw"] .controls input:focus {
      border-color: rgba(229, 138, 164, .78) !important;
      box-shadow: 0 0 0 4px rgba(229, 138, 164, .12), 0 1px 0 rgba(255,255,255,.86) inset !important;
    }

    body[data-theme="bw"] .controls input[type="radio"] {
      accent-color: var(--accent);
    }

    body[data-theme="bw"] .controls .hint,
    body[data-theme="bw"] .controls .status,
    body[data-theme="bw"] .controls .row-range-label,
    body[data-theme="bw"] .controls .brand p {
      color: var(--muted) !important;
    }

    body[data-theme="bw"] .controls .primary {
      background: linear-gradient(135deg, #eaa1b5, #d987a2) !important;
    }

    body[data-theme="bw"] .controls .print-main {
      background: linear-gradient(135deg, #a7d8b7, #86caa1) !important;
    }

    body[data-theme="bw"] .controls .print-q {
      background: linear-gradient(135deg, #a7d8b7, #86caa1) !important;
    }

    body[data-theme="bw"] .controls .print-a {
      background: linear-gradient(135deg, #f3bd78, #e8a85c) !important;
    }

    body[data-theme="bw"] .controls .print-both {
      background: linear-gradient(135deg, #baa4e7, #a990da) !important;
    }

    body[data-theme="bw"] .controls .print-menu {
      border-color: rgba(146,113,108,.18) !important;
      background: rgba(255,255,255,.94) !important;
      box-shadow: 0 22px 50px rgba(88, 60, 60, .18) !important;
    }

    body[data-theme="bw"] .preview-toolbar .view-tabs {
      background: rgba(255,253,251,.86) !important;
      border-color: rgba(221,196,188,.76) !important;
      box-shadow: 0 10px 24px rgba(115, 83, 83, .10) !important;
    }

    body[data-theme="bw"] .preview-toolbar .view-tab {
      background: transparent !important;
      color: #83716c !important;
      box-shadow: none !important;
    }

    body[data-theme="bw"] .preview-toolbar .view-tab:hover {
      color: #e58aa4 !important;
      transform: translateY(-1px);
    }

    body[data-theme="bw"] .preview-toolbar .view-tab.is-active {
      background: linear-gradient(135deg, #eaa1b5, #d987a2) !important;
      color: #ffffff !important;
      box-shadow: 0 10px 22px rgba(217, 135, 162, .22) !important;
    }

    .preview-wrap,
    .controls {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

/* Locrian generated screen UI font-size uplift; do not edit. */
@media screen {
.status{font-size:calc(12.5px + 2pt)}
.brand h1{font-size:calc(23px + 2pt)}
.brand h1{font-weight:700}
}