/* 随轩 · margin notes
   Readers select a sentence and write beside it. The rail is the third column of the reading grid;
   each room gives the notes its own material: vermilion brush notes on rice paper, museum comment cards,
   pasted stickers, labelling records, transactions waiting in a pool, notebook paper, sticky notes, guestbook windows. */

/* ---------- the rail itself: a column as tall as the text, notes pinned beside their sentence ---------- */
.yh .ag > .rail { position: relative; top: auto; align-self: stretch; display: block; min-height: 100%; }
.yh .rail:not(.has-notes) .rail__intro { position: sticky; top: 100px; z-index: 1; }
/* one column: no margin to write in (notes open as popovers); the 2005 room keeps its counter box under the text */
@container yh (max-width: 980px) {
  .yh .ag > .rail { display: none; min-height: 0; }
}
@container yh (max-width: 760px) {
  .yh.w-site .ag > .rail { display: grid; position: static; margin-top: 28px; }
  .yh.w-site .ag > .rail .rail__intro, .yh.w-site .ag > .rail .rail__toggle { display: none; }
}
.rail .grp + .rail__intro { margin-top: 18px; }
.rail__cmt { margin-top: 8px; font-size: 13px; }
.rail__cmt a { color: inherit; }
.rail__toggle { display: inline-flex; align-items: center; min-height: 30px; margin-top: 10px; padding: 0 10px; border: 1px solid currentColor; border-radius: 15px; font-size: 12.5px; opacity: .75; }
.rail__toggle:hover { opacity: 1; }
.yhm-rail__list { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.yhm-rail__list > * { pointer-events: auto; }

/* ---------- a note card ---------- */
.yhm-note {
  position: absolute; left: 0; right: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.7; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 70%, #FFFFFF); box-shadow: 0 0 0 1px var(--line);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, top .35s cubic-bezier(.2, .8, .2, 1);
  cursor: pointer;
}
.yhm-note.is-hot { transform: translateX(-6px); box-shadow: 0 0 0 1px var(--ink), 0 14px 24px -14px rgba(0, 0, 0, .45); }
.yhm-note.is-new { animation: yhm-new 1.2s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes yhm-new { from { opacity: 0; transform: translateX(24px) rotate(3deg); } to { opacity: 1; transform: none; } }
.yhm-note.is-pending { opacity: .78; }
.yhm-note__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12px; color: var(--muted); }
.yhm-note__meta b { font-weight: 600; color: var(--ink); }
.yhm-note__meta i { font-style: normal; font-variant-numeric: tabular-nums; }
.yhm-note__body { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.yhm-note__replies { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.yhm-note.is-squeezed .yhm-note__replies { display: none; }
.yhm-reply { font-size: 12.5px; line-height: 1.6; }
.yhm-reply b { margin-right: 6px; font-weight: 600; }
.yhm-reply__pend { margin-right: 6px; font-style: normal; font-size: 11px; color: var(--muted); }
.yhm-note__chip { margin-top: 6px; font-size: 12px; text-decoration: underline; color: var(--muted); }
.yhm-note__hint { margin-top: 6px; font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .2s; }
.yhm-note:hover .yhm-note__hint, .yhm-note:focus-within .yhm-note__hint { opacity: 1; }
.yhm-note__rform { margin-top: 8px; }

/* ---------- the highlighted sentence ---------- */
.yhm-mark { color: inherit; background: color-mix(in srgb, var(--acc) 16%, transparent); border-radius: 2px; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.yhm-mark.is-hot, .yhm-mark:focus-visible { background: color-mix(in srgb, var(--acc) 34%, transparent); outline: none; }
.yhm-off .yhm-mark { background: none; text-decoration: underline dotted color-mix(in srgb, var(--acc) 60%, transparent); text-underline-offset: 5px; }
.is-plain .yhm-mark { background: #FFF1A8; text-decoration: none; }

/* ---------- the button that appears beside a selection ---------- */
.yhm-fab {
  position: absolute; z-index: 70; display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  font: 600 13.5px/1 var(--f-ui); color: #FFFFFF; background: #1F1B17; border-radius: 18px;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6); animation: yhm-fab .3s cubic-bezier(.2, 1.4, .4, 1);
}
.yhm-fab[hidden] { display: none; }
@keyframes yhm-fab { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- the editor, the reply form and the small popover ---------- */
.yhm-editor, .yhm-pop {
  --ink: #1F1B17; --muted: #5B5650; --line: rgba(31, 27, 23, .16);
  position: absolute; z-index: 72; padding: 16px 16px 12px; color: var(--ink); background: #FBFAF6;
  border-radius: 10px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55), 0 0 0 1px var(--line);
  font: 400 14px/1.6 var(--f-ui); text-align: left; animation: lp-in .25s cubic-bezier(.2, .9, .3, 1.2) both;
}
.yhm-editor__h { margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.yhm-editor blockquote { margin: 0 0 10px; padding: 6px 10px; font-size: 13px; line-height: 1.65; color: var(--muted); border-left: 3px solid var(--acc, #C23A2E); background: rgba(0, 0, 0, .035); }
.yhm-editor__id { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.yhm-editor input[type="text"], .yhm-editor input[type="email"], .yhm-editor textarea,
.yhm-rform__box input[type="text"], .yhm-rform__box input[type="email"], .yhm-rform__box textarea, .yhm-pop textarea {
  width: 100%; min-width: 0; padding: 8px 10px; font: inherit; font-size: 14px; color: #1F1B17; background: #FFFFFF; border: 1px solid rgba(31, 27, 23, .2); border-radius: 6px;
}
.yhm-editor textarea, .yhm-rform__box textarea { resize: vertical; min-height: 64px; }
.yhm-rform__box .yhm-editor__id { grid-template-columns: 1fr; }
.yhm-editor__notify { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.yhm-editor__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.yhm-editor__acts button { height: 34px; padding: 0 14px; border-radius: 17px; font-size: 13.5px; }
.yhm-cancel { color: var(--muted); }
.yhm-cancel:hover { color: var(--ink); }
.yhm-send { background: #1F1B17; color: #FFFFFF; }
.yhm-send[disabled] { opacity: .55; cursor: progress; }
.yhm-editor__msg { min-height: 1em; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.yhm-pop { padding-top: 14px; }
.yhm-pop__x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 14px; font-size: 18px; color: var(--muted); }
.yhm-pop__x:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.yhm-pop__link { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--ink); }
.yhm-pop .yhm-note__body { font-size: 15px; }

/* ================================================================ rooms */

/* 哲学 · 朱批: vermilion brush notes, the sentence marked with emphasis dots */
/* vermilion dots under each character, drawn as a background so the line height stays put */
.w-phil .yhm-mark { --dots: radial-gradient(circle at 50% 50%, #A72D27 1.3px, transparent 1.9px) 0 100% / 1.01em 6px repeat-x; background: var(--dots); padding-bottom: 6px; border-radius: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.w-phil .yhm-mark.is-hot, .w-phil .yhm-mark:focus-visible { background: var(--dots), rgba(167, 45, 39, .1); }
.w-phil.yhm-off .yhm-mark { background: none; padding-bottom: 0; }
.w-phil .yhm-note { padding: 4px 0 6px 14px; color: #A72D27; background: none; box-shadow: none; border-left: 1.5px solid rgba(167, 45, 39, .55); font-family: var(--f-serif); }
.w-phil .yhm-note.is-hot { transform: translateX(-4px); box-shadow: none; border-left-color: #A72D27; }
.w-phil .yhm-note__meta, .w-phil .yhm-note__meta b { color: rgba(167, 45, 39, .8); font-family: var(--f-serif); }
.w-phil .yhm-note__body { font-size: 14.5px; line-height: 1.8; }
.w-phil .yhm-note__replies { border-top-color: rgba(167, 45, 39, .3); }
.w-phil .yhm-note__hint, .w-phil .yhm-note__chip { color: #A72D27; }
.w-phil .yhm-fab { height: 40px; padding: 0 12px; border-radius: 3px; background: #A72D27; font: 400 18px/1 var(--f-brush); letter-spacing: .1em; box-shadow: 0 0 0 2px #EFECE4, 0 0 0 3.5px #A72D27, 0 12px 20px -10px rgba(0, 0, 0, .5); transform: rotate(-3deg); }
.w-phil .yhm-editor { background: #EFECE4 url("../img/tex-paper.png"); border-radius: 2px; box-shadow: 0 0 0 1px rgba(167, 45, 39, .45), 0 30px 50px -24px rgba(0, 0, 0, .45); font-family: var(--f-serif); }
.w-phil .yhm-editor__h { color: #A72D27; font: 400 22px/1.1 var(--f-brush); }
.w-phil .yhm-editor textarea { color: #A72D27; font-family: var(--f-serif); font-size: 15px; background: rgba(255, 255, 255, .6); }
.w-phil .yhm-send { background: #A72D27; border-radius: 2px; }
.w-phil .rail__toggle { border-color: rgba(167, 45, 39, .5); color: #A72D27; }

/* 科学史 · 旁注: visitor comment cards pinned under brass */
.w-hps .yhm-mark { background: rgba(226, 201, 143, .35); box-shadow: inset 0 -2px 0 #B08D57; }
.w-hps .yhm-mark.is-hot { background: rgba(226, 201, 143, .7); }
.w-hps .yhm-note { padding: 14px 14px 12px; color: #1E211E; background: #F5F3EC; font-family: var(--f-serif); box-shadow: 0 16px 24px -16px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(154, 122, 58, .55), inset 0 0 0 4px #F5F3EC, inset 0 0 0 5px rgba(154, 122, 58, .3); }
.w-hps .yhm-note::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F2DDA4, #8C6B32); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.w-hps .yhm-note__meta { color: #5D615A; font-family: "EB Garamond", var(--f-serif); font-style: italic; font-size: 13px; }
.w-hps .yhm-note__meta b { color: #6A2328; font-style: normal; font-family: var(--f-serif); }
.w-hps .yhm-note.is-hot { box-shadow: 0 20px 30px -16px rgba(0, 0, 0, .9), inset 0 0 0 2px #B08D57, inset 0 0 0 5px #F5F3EC, inset 0 0 0 6px rgba(154, 122, 58, .5); }
.w-hps .yhm-fab { border-radius: 2px; background: #B08D57; color: #2A1A10; font-family: var(--f-serif); box-shadow: 0 0 0 1px #2A1A10, 0 12px 20px -10px rgba(0, 0, 0, .7); }
.w-hps .yhm-editor { background: #F5F3EC; border-radius: 2px; font-family: var(--f-serif); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(154, 122, 58, .6), inset 0 0 0 5px #F5F3EC, inset 0 0 0 6px rgba(154, 122, 58, .3); }
.w-hps .yhm-editor__h { color: #6A2328; }
.w-hps .yhm-send { background: #6A2328; border-radius: 2px; }
.w-hps .rail__toggle { color: #E2C98F; }

/* 文化 · 贴条: stickers slapped on the wall */
.w-cult .yhm-mark { background: linear-gradient(100deg, transparent 2%, rgba(255, 210, 63, .85) 4%, rgba(255, 210, 63, .85) 96%, transparent 98%) 0 60% / 100% 62% no-repeat; }
.w-cult .yhm-mark.is-hot { background-size: 100% 100%; }
.w-cult .yhm-note { padding: 16px 14px 12px; background: #FFFFFF; border: 2.5px solid #141414; box-shadow: 5px 5px 0 #141414; transform: rotate(calc((mod(var(--i, 0), 3) - 1) * 1.2deg)); }
.w-cult .yhm-note::before { content: ""; position: absolute; top: -10px; left: 18px; width: 54px; height: 18px; background: rgba(250, 232, 160, .9); transform: rotate(-5deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.w-cult .yhm-note.is-hot { transform: rotate(0) translate(-3px, -3px); box-shadow: 8px 8px 0 #D7352A; }
.w-cult .yhm-note__meta b { padding: 0 6px; background: #D7352A; color: #FFFFFF; font-weight: 700; }
.w-cult .yhm-note__body { font-weight: 500; }
.w-cult .yhm-fab { border-radius: 0; background: #D7352A; border: 2.5px solid #141414; box-shadow: 4px 4px 0 #141414; font-weight: 800; transform: rotate(-2deg); }
.w-cult .yhm-editor { border-radius: 0; border: 2.5px solid #141414; box-shadow: 8px 8px 0 #141414; background: #FFFFFF; }
.w-cult .yhm-editor__h { display: inline-block; padding: 2px 10px; background: #FFD23F; border: 2px solid #141414; font-family: var(--f-poster, sans-serif); font-weight: 400; font-size: 18px; }
.w-cult .yhm-editor textarea, .w-cult .yhm-editor input { border: 2px solid #141414; border-radius: 0; }
.w-cult .yhm-send { border-radius: 0; background: #D7352A; box-shadow: 3px 3px 0 #141414; font-weight: 700; }

/* AI · 人工标注: a labelling record for each sentence */
.w-ai .yhm-mark { background: rgba(31, 95, 224, .07); box-shadow: 0 0 0 1.5px rgba(31, 95, 224, .75); border-radius: 0; }
.w-ai .yhm-mark.is-hot { background: rgba(31, 95, 224, .16); box-shadow: 0 0 0 2px #1F5FE0; }
.w-ai .yhm-note { padding: 0 0 10px; background: #FFFFFF; border-left: 3px solid #1F5FE0; box-shadow: 0 0 0 1px #C9D0D6; counter-increment: none; }
.w-ai .yhm-note__meta { padding: 5px 10px; background: #121619; color: #C9D0D6; font-family: var(--f-mono); font-size: 11px; }
.w-ai .yhm-note__meta b { color: #FFFFFF; font-family: var(--f-ui); }
.w-ai .yhm-note__meta::before { content: "LABEL"; margin-right: 4px; padding: 0 4px; background: #F2541B; color: #121619; font-weight: 700; }
.w-ai .yhm-note__body, .w-ai .yhm-note__replies, .w-ai .yhm-note__hint, .w-ai .yhm-note__chip, .w-ai .yhm-note__rform { margin-left: 10px; margin-right: 10px; }
.w-ai .yhm-note.is-hot { transform: translateX(-4px); box-shadow: 0 0 0 1.5px #1F5FE0, 0 14px 24px -14px rgba(18, 22, 25, .5); }
.w-ai .yhm-fab { border-radius: 2px; background: #121619; box-shadow: inset 0 -3px 0 #1F5FE0, 0 10px 20px -10px rgba(0, 0, 0, .6); }
.w-ai .yhm-editor { border-radius: 2px; border-top: 10px solid transparent; border-image: repeating-linear-gradient(-45deg, #F2541B 0 8px, #121619 8px 16px) 10; background: #FFFFFF; }
.w-ai .yhm-send { border-radius: 2px; background: #1F5FE0; }

/* Web3 · 批注池: notes wait in a pool like transactions */
.w-web3 .yhm-mark { color: inherit; background: rgba(41, 173, 255, .18); box-shadow: inset 0 -3px 0 #FFA300; border-radius: 0; }
.w-web3 .yhm-mark.is-hot { background: rgba(255, 163, 0, .3); }
.w-web3 .yhm-note { padding: 12px 12px 10px; color: #FFF1E8; background: #11193A; box-shadow: 0 0 0 3px #FFF1E8, 6px 6px 0 3px #000000; font-size: 13px; }
.w-web3 .yhm-note__meta { color: #29ADFF; font-family: var(--f-pixel); font-size: 11px; }
.w-web3 .yhm-note__meta b { color: #FFA300; font-family: var(--f-pixel); font-weight: 400; }
.w-web3 .yhm-note__meta::before { content: "TX"; padding: 0 4px; background: #29ADFF; color: #11193A; font-family: var(--f-pixel); }
.w-web3 .yhm-note.is-pending .yhm-note__meta i::after { content: " ⧗"; }
.w-web3 .yhm-note__replies { border-top-color: rgba(255, 241, 232, .25); }
.w-web3 .yhm-note__hint, .w-web3 .yhm-note__chip { color: #C2C3C7; font-family: var(--f-pixel); }
.w-web3 .yhm-note.is-hot { transform: translate(-3px, -3px); box-shadow: 0 0 0 3px #FFA300, 6px 6px 0 3px #000000; }
.w-web3 .yhm-fab { border-radius: 0; background: #FFA300; color: #1D2B53; font-family: var(--f-pixel); font-weight: 400; box-shadow: 0 4px 0 #AB5236, 0 0 0 2px #000000; }
.w-web3 .yhm-editor { --ink: #FFF1E8; --muted: #C2C3C7; color: #FFF1E8; background: #11193A; border-radius: 0; box-shadow: 0 0 0 3px #FFF1E8, 8px 8px 0 3px #000000; }
.w-web3 .yhm-editor__h { color: #FFA300; font-family: var(--f-pixel); font-weight: 400; }
.w-web3 .yhm-editor blockquote { background: rgba(255, 255, 255, .06); border-left-color: #29ADFF; color: #C2C3C7; }
.w-web3 .yhm-editor textarea, .w-web3 .yhm-editor input { border-radius: 0; }
.w-web3 .yhm-send { border-radius: 0; background: #FFA300; color: #1D2B53; font-family: var(--f-pixel); box-shadow: 0 3px 0 #AB5236; }
.w-web3 .yhm-cancel { color: #C2C3C7; }
.w-web3 .rail__toggle { color: #FFA300; font-family: var(--f-pixel); font-size: 11px; }

/* 教学 · 课堂笔记: a scrap of lined notebook paper, red pen in the text */
.w-teach .yhm-mark { background: none; text-decoration: underline wavy #D9443A; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.w-teach .yhm-mark.is-hot { background: rgba(217, 68, 58, .1); }
.w-teach .yhm-note { padding: 16px 14px 10px 30px; color: #2A2A2A; background: #FFFFFF repeating-linear-gradient(transparent 0 23px, #D5E1EE 23px 24px); background-position: 0 10px; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .45); transform: rotate(calc((mod(var(--i, 0), 2) - .5) * 2deg)); line-height: 24px; }
.w-teach .yhm-note::after { content: ""; position: absolute; top: 0; bottom: 0; left: 20px; width: 1px; background: #E8A0A0; }
.w-teach .yhm-note__meta { line-height: 24px; }
.w-teach .yhm-note__body { margin-top: 0; font-family: var(--f-hand); font-size: 20px; line-height: 24px; color: #1E3A8A; }
.w-teach .yhm-note.is-hot { transform: rotate(0) translateX(-4px); }
.w-teach .yhm-fab { border-radius: 4px; background: #24453A; color: #F2D16B; font-family: var(--f-hand); font-weight: 400; font-size: 19px; box-shadow: inset 0 0 0 3px #7B5232, 0 10px 18px -10px rgba(0, 0, 0, .6); }
.w-teach .yhm-editor { background: #FFFFFF repeating-linear-gradient(transparent 0 27px, #D5E1EE 27px 28px); background-position: 0 6px; border-radius: 2px; }
.w-teach .yhm-editor__h { font-family: var(--f-hand); font-weight: 400; font-size: 24px; color: #D9443A; }
.w-teach .yhm-editor textarea { font-family: var(--f-hand); font-size: 20px; color: #1E3A8A; }
.w-teach .yhm-send { background: #24453A; color: #F2D16B; border-radius: 4px; }

/* 生活 · 便利贴: sticky notes held by washi tape */
.w-life .yhm-mark { background: linear-gradient(transparent 45%, rgba(247, 198, 181, .75) 45%, rgba(247, 198, 181, .75) 92%, transparent 92%); }
.w-life .yhm-mark.is-hot { background: rgba(247, 198, 181, .75); }
.w-life .yhm-note { padding: 20px 14px 12px; background: #FFF6B3; box-shadow: 0 12px 18px -12px rgba(0, 0, 0, .4); transform: rotate(calc((mod(var(--i, 0), 3) - 1) * 1.6deg)); }
.w-life .yhm-note:nth-child(3n + 2) { background: #FCE1D9; }
.w-life .yhm-note:nth-child(3n) { background: #DFF0E4; }
.w-life .yhm-note::before { content: ""; position: absolute; top: -9px; left: 50%; width: 60px; height: 18px; margin-left: -30px; background: repeating-linear-gradient(45deg, rgba(247, 198, 181, .95) 0 6px, rgba(242, 178, 158, .95) 6px 12px); transform: rotate(-3deg); }
.w-life .yhm-note__meta b { font-family: var(--f-kuai, var(--f-ui)); font-weight: 400; font-size: 14px; color: #B83A32; }
.w-life .yhm-note__body { font-size: 14px; color: #3A352E; }
.w-life .yhm-note.is-hot { transform: rotate(0) translateY(-3px); box-shadow: 0 18px 26px -12px rgba(0, 0, 0, .45); }
.w-life .yhm-fab { background: #B83A32; border-radius: 20px; font-family: var(--f-kuai, var(--f-ui)); font-weight: 400; font-size: 15px; }
.w-life .yhm-editor { background: #FFF6B3; border-radius: 3px; }
.w-life .yhm-editor__h { font-family: var(--f-kuai, var(--f-ui)); font-weight: 400; font-size: 18px; color: #B83A32; }
.w-life .yhm-send { background: #B83A32; border-radius: 18px; }

/* 站务 · 留言簿: each note is a little window */
.w-site .yhm-mark { color: #000000; background: #FFFF00; border-radius: 0; }
.w-site .yhm-mark.is-hot { color: #FFFFFF; background: #0A246A; }
.w-site .yhm-note { padding: 22px 8px 8px; color: #000000; background: #C3C3C3; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; box-shadow: none; font-size: 13px; }
.w-site .yhm-note::before { content: attr(data-title); position: absolute; top: 2px; left: 2px; right: 2px; height: 16px; padding: 0 4px; background: linear-gradient(90deg, #0A246A, #3A6EA5); color: #FFFFFF; font: 11px/16px var(--f-pixel); }
.w-site .yhm-note__meta, .w-site .yhm-note__body, .w-site .yhm-note__replies { padding: 4px 6px; background: #FFFFFF; }
.w-site .yhm-note__meta { border: 2px solid; border-bottom: 0; border-color: #808080 #FFFFFF #FFFFFF #808080; }
.w-site .yhm-note__body { margin-top: 0; border: 2px solid; border-top: 0; border-color: #808080 #FFFFFF #FFFFFF #808080; }
.w-site .yhm-note__meta b { color: #0000EE; text-decoration: underline; }
.w-site .yhm-note.is-hot { transform: none; box-shadow: 4px 4px 0 #000000; }
.w-site .yhm-fab { border-radius: 0; color: #000000; background: #C3C3C3; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; font: 12px/1 var(--f-pixel); box-shadow: 2px 2px 0 #000000; }
.w-site .yhm-editor { padding-top: 30px; border-radius: 0; background: #C3C3C3; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; box-shadow: 4px 4px 0 rgba(0, 0, 0, .5); }
.w-site .yhm-editor__h { position: absolute; top: 2px; left: 2px; right: 2px; height: 20px; margin: 0; padding: 0 6px; background: linear-gradient(90deg, #0A246A, #3A6EA5); color: #FFFFFF; font: 12px/20px var(--f-pixel); }
.w-site .yhm-editor textarea, .w-site .yhm-editor input { border-radius: 0; border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; }
.w-site .yhm-editor__acts button { border-radius: 0; color: #000000; background: #C3C3C3; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; font: 12px/1 var(--f-pixel); }

@media (prefers-reduced-motion: reduce) {
  .yhm-note { transition: none; }
  .yhm-note.is-new, .yhm-fab { animation: none; }
}