/* Real paper is the content material. The parent shell supplies glass chrome. */
body .os-note.os-note {
  --paper-rule: rgba(127, 96, 29, .12);
  --paper-ink: var(--note-ink, #4b422b);
  background: var(--note-bg, #ffdc60) !important;
  color: var(--paper-ink) !important;
  border: 0 !important;
  border-radius: 5px 5px 16px 5px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 3px rgba(64, 55, 30, .12), 0 10px 24px rgba(45, 60, 74, .15) !important;
  overflow: hidden;
}
body .os-note.os-note::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 42px);
  border: 0;
  border-radius: inherit;
  opacity: 1;
}
body .os-note.os-note::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, rgba(119, 93, 39, .1) 0 49%, rgba(255, 255, 255, .58) 50% 100%);
  border-radius: 4px 0 0 0;
  box-shadow: -1px -1px 1px rgba(90, 67, 25, .06);
  pointer-events: none;
  transform: none;
}
body .os-note.os-note > .nb {
  position: relative;
  z-index: 1;
  min-height: 36px;
  height: 36px;
  padding-inline: 13px 5px !important;
  background: rgba(186, 138, 35, .09);
  border-bottom: 1px solid rgba(117, 88, 29, .13);
  box-shadow: none;
}
body .os-note.os-note > .nb > .grip {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto;
  height: 36px !important;
  min-height: 36px;
  margin: 0;
  padding: 0 4px 0 0 !important;
  overflow: hidden;
  white-space: nowrap;
  background: none !important;
  box-shadow: none !important;
  color: #6d592c;
  font-size: 11px;
  letter-spacing: .01em;
  font-weight: 600;
}
body .os-note.os-note > .nb > .grip::before,
body .os-note.os-note > .nb > .grip::after { content: none !important; display: none !important; }
body .os-note.os-note > .nb button {
  color: #6d592c;
  box-shadow: none !important;
  background: transparent !important;
}
body .os-note.os-note > .nb button:hover { background: rgba(119, 92, 34, .11) !important; }
body .os-note.os-note > .nb .sw::after {
  background: var(--note-bg);
  border-color: #93815a;
}
body .os-note.os-note > .body {
  position: relative;
  z-index: 1;
  padding: 11px 14px 22px;
  margin: 0;
  font-family: var(--os-ui, "Onest", sans-serif);
  font-size: 13px;
  line-height: 24px;
  font-weight: 500;
  color: var(--paper-ink) !important;
  background-color: transparent;
  background-image: repeating-linear-gradient(transparent 0 23px, var(--paper-rule) 23px 24px);
  background-position: 0 11px;
  background-attachment: local;
  caret-color: #275f80;
  scrollbar-color: rgba(122, 103, 56, .35) transparent;
  scrollbar-width: thin;
}
body .os-note.os-note > .body:empty::before { color: #786a48; font-weight: 400; }
body .os-note.os-note > .body:focus-visible { outline: 2px solid #477b9b; outline-offset: -3px; }
body .os-note.os-note > .body::selection { background: #b4dbe4; color: #243f4c; }
body .os-note.os-note > .grabber { z-index: 2; }
body .os-note.os-note.folded { min-height: 36px !important; height: 36px !important; border-radius: 5px !important; }
body .os-note.os-note.folded::after { display: none; }

body #win-notepad {
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: #253b4b;
  background: #fffefb;
  border-radius: 0;
  overflow: hidden;
}
body #win-notepad > .tool {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  height: 38px;
  min-height: 38px;
  width: 100%;
  margin: 0;
  padding: 3px 8px;
  box-sizing: border-box;
  background: #f4f7f8;
  border-bottom: 1px solid #dce4e9;
  overflow-x: auto;
  scrollbar-width: none;
}
body #win-notepad > .tool > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin: 0;
  padding: 0 10px;
  border-radius: 6px;
  color: #334c5e;
  font: 500 12px/1 var(--os-ui, "Onest", sans-serif);
  white-space: nowrap;
}
body #win-notepad > .tool > a:hover,
body #win-notepad > .tool > a:focus-visible { background: #e2edf3; }
body #win-notepad > .text-box,
body #win-notepad > .md-preview {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 17px 24px 32px;
  border: 0;
  border-radius: 0;
  transform: none;
  opacity: 1;
  background: #fffefb;
  color: #293f4e;
  box-shadow: none;
  font-family: var(--pk-font);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 400;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  caret-color: #187da3;
  scrollbar-width: thin;
  scrollbar-color: #bacbd4 transparent;
}
body #win-notepad > .text-box:focus { transform: none; opacity: 1; box-shadow: none; }
body #win-notepad > .text-box *:not(div):not(br) {
  border-radius: 0;
  outline: none;
  transition: none;
}
body #win-notepad > .text-box *:not(div):not(br):focus { background: transparent; }
body #win-notepad > .text-box *:not(div):not(br):hover { outline: none; }
body #win-notepad > .text-box p { margin: 0; }
body #win-notepad > .text-box > :first-child { margin-top: 0 !important; padding-top: 0; }
body #win-notepad > .text-box ::selection,
body #win-notepad > .text-box::selection { background: #bddfea; color: #163849; }
body #win-notepad > .text-box.down { transform: none; opacity: .3; }
body #win-notepad > .md-preview { font-family: var(--os-ui, "Onest", sans-serif); white-space: normal; }
body #win-notepad > a.save { position: absolute; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
body #win-notepad > .pk-notepad-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 12px;
  min-height: 29px;
  box-sizing: border-box;
  padding: 6px 13px;
  border-top: 1px solid #dce4e9;
  background: #f4f7f8;
  color: #536a7b;
  font: 400 11px/1.3 var(--os-ui, "Onest", sans-serif);
  font-variant-numeric: tabular-nums;
}
body #win-notepad > .pk-notepad-status > :last-child { text-align: right; }
body #win-notepad > .tool > a[aria-expanded="true"] { background: #dceaf3; }
body #win-notepad > .tool > a:focus-visible { outline: 2px solid #327fa9; outline-offset: -3px; }
body #dp[data-pk-notepad-menu] {
  position: fixed;
  z-index: 10020;
  min-width: 228px;
  max-width: calc(100vw - 16px);
  max-height: min(480px, calc(100dvh - 72px));
  overflow-y: auto;
  padding: 5px;
  box-sizing: border-box;
  background: rgba(250, 253, 255, .94);
  color: #29475c;
  border: 1px solid rgba(83, 123, 149, .18);
  border-radius: 12px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 12px 32px rgba(26, 62, 89, .19);
}
body #dp[data-pk-notepad-menu] > list > a {
  min-height: 34px;
  box-sizing: border-box;
  align-items: center;
  gap: 7px;
  color: #29475c;
  padding: 6px 10px;
  font: 400 13px/1.3 var(--os-ui, "Onest", sans-serif);
  outline: none;
}
body #dp[data-pk-notepad-menu] > list > a > .bi { color: #5a7d96; width: 20px; margin: 0; font-size: 16px; text-align: center; }
body #dp[data-pk-notepad-menu] > list > a > info { color: #687f90; padding-left: 16px; font-size: 11px; }
body #dp[data-pk-notepad-menu] > list > a:hover,
body #dp[data-pk-notepad-menu] > list > a:focus-visible { background: #e2eef6; }
body #dp[data-pk-notepad-menu] > list > a:focus-visible { box-shadow: inset 0 0 0 2px #6aa0c2; }
body .window.notepad-fonts { --text: #29475c; --card: #f8fbfd; --hover: #e8f1f7; --hover-b: #dcebf5; }
body #win-notepad-font { color: #29475c; background: #f6f9fb; padding: 18px; box-sizing: border-box; }
body #win-notepad-font .select-input > :is(input, .value-box),
body #win-notepad-font .preview > .preview-box { color: #29475c; background: #ffffff; border-color: #c9d9e4; }
body #win-notepad-font .select-input > input:focus-visible,
body #win-notepad-font .option:focus-visible { outline: 2px solid #327fa9; outline-offset: -2px; }
@media (max-width: 700px) {
  body .os-note.os-note > .nb { min-height: 44px; height: 44px; padding-inline-start: 14px !important; }
  body .os-note.os-note > .nb > .grip { height: 44px !important; min-height: 44px; }
  body .os-note.os-note > .body { font-size: 14px; }
  body .os-note.os-note.folded { min-height: 44px !important; height: 44px !important; }
  body #win-notepad > .tool { height: 44px; min-height: 44px; padding: 0 4px; }
  body #win-notepad > .tool > a { min-height: 44px; min-width: 44px; padding-inline: 12px; }
  body #win-notepad > .text-box,
  body #win-notepad > .md-preview { padding: 19px 18px 32px; font-size: 16px; }
  body #dp[data-pk-notepad-menu] > list > a { min-height: 44px; }
  body #win-notepad > .pk-notepad-status { gap: 8px; padding-inline: 10px; font-size: 10px; }
}