/* An opt-in surface for Notes. Prints keep their existing size and position;
   the glass and measuring marks are decorative and never handle input. */
#htb-site .htb-canvas[data-notes-appearance="light-table"] {
  --htb-table-frame: #252d32;
  --htb-table-rule: #536b7840;
  --htb-table-rule-fine: #536b782b;
  --htb-table-focus: #24485c;
  background:
    radial-gradient(ellipse at 48% 42%, #fff 0%, #ffffffeb 31%, #f2f8f9b3 67%, #dce9ed66 100%),
    linear-gradient(130deg, #e8f0f3, #f7fcfd 46%, #e4eef2);
  box-shadow: inset 0 0 24px #71929e20, 0 3px 12px #182c3820;
}

#htb-site .htb-canvas[data-notes-appearance="light-table"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 3px var(--htb-table-frame),
    inset 0 0 0 4px #ffffffb8,
    inset 0 0 14px #b9d9e66b;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 59px, var(--htb-table-rule) 59px 60px),
    repeating-linear-gradient(90deg, transparent 0 11px, var(--htb-table-rule-fine) 11px 12px),
    repeating-linear-gradient(0deg, transparent 0 59px, var(--htb-table-rule) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 11px, var(--htb-table-rule-fine) 11px 12px);
  background-size: 60px 7px, 12px 4px, 7px 60px, 4px 12px;
  background-position: 16px 10px, 16px 10px, 10px 16px, 10px 16px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

#htb-site .htb-canvas[data-notes-appearance="light-table"] .htb-print-face {
  background: linear-gradient(135deg, #ffffffeb, #f1faffb8 68%, #e4f0f580);
  box-shadow:
    0 0 0 .5px #ffffffeb,
    .5px 1px 2px #233d4c20,
    0 4px 12px #34576c12;
}

#htb-site .htb-canvas[data-notes-appearance="light-table"] .htb-print-face::after {
  box-shadow:
    inset 0 0 0 .5px #fff,
    inset -1px -1px 1px #a8c7d43d;
}

#htb-site .htb-canvas[data-notes-appearance="light-table"] .htb-print:hover .htb-print-face {
  box-shadow:
    0 0 0 .5px #fff,
    1px 2px 3px #233d4c29,
    0 6px 15px #34576c1f;
}

#htb-site .htb-canvas[data-notes-appearance="light-table"] .htb-word-face {
  color: #25343e;
  background: linear-gradient(135deg, #ffffffed, #eef7fae8);
  box-shadow: 0 0 0 .5px #ffffffeb, .5px 1px 2px #233d4c20, 0 4px 12px #34576c12;
}

#htb-site .htb-canvas[data-notes-appearance="light-table"] .htb-print:focus-visible {
  outline: 2px solid var(--htb-table-focus);
  outline-offset: 5px;
}

@media (prefers-color-scheme: dark) {
  #htb-site .htb-canvas[data-notes-appearance="light-table"] {
    --htb-table-frame: #10171c;
    --htb-table-rule: #344f6052;
    --htb-table-rule-fine: #344f6038;
    background:
      radial-gradient(ellipse at 48% 42%, #f9fdff 0%, #eef6f8eb 34%, #dce9eeb3 72%, #c5d8e166 100%),
      linear-gradient(130deg, #c7d8e0, #e8f1f5 46%, #becfd8);
    box-shadow: inset 0 0 26px #6c93a636, 0 3px 14px #0004;
  }
}

@media (max-width: 650px) {
  #htb-site .htb-canvas[data-notes-appearance="light-table"]::before {
    background-position: 12px 8px, 12px 8px, 8px 12px, 8px 12px;
    background-size: 60px 5px, 12px 3px, 5px 60px, 3px 12px;
    box-shadow: inset 0 0 0 2px var(--htb-table-frame), inset 0 0 0 3px #ffffffb8, inset 0 0 12px #b9d9e666;
  }
}