, so the article must establish a positioning context. */ article{position:relative} /* Ink, however, mounts on so the pencil draws across the full page width (paper + both margins), not just the centered measure. Its absolutely-positioned .ink-tiles anchor to body; body already has margin:0 and spans the viewport. */ body{position:relative} /* ============================ margin annotations =========================== The engine renders, per highlighted note: - wide screens (innerWidth > 1180): a right-gutter card (.anno-gutter containing .anno-note), positioned at left:786px inside the stage. - narrow screens: an inline ✎ superscript (.anno-marker) after the text. These pages pin a fixed nav.toc on the right at >1180px, which would COLLIDE with the right-gutter cards. We cannot change the engine JS, so we suppress the wide right-gutter entirely (.anno-gutter{display:none}); the note stays fully reachable by CLICKING the highlight (opens the editor popover), and the highlight shows a .has-note underline to signal a note exists. Result: zero overlap with .toc, no absolutely-positioned cards in the right gutter on wide screens. (On narrow screens the toc is hidden and inline ✎ markers show.) */ mark.anno-hl{background:color-mix(in srgb, var(--hl,#f4c95d) 34%, transparent);color:inherit;border-radius:2px;padding:.02em .04em;cursor:pointer;transition:background .15s} mark.anno-hl:hover{background:color-mix(in srgb, var(--hl,#f4c95d) 55%, transparent)} mark.anno-hl.has-note{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--hl,#f4c95d) 80%,transparent)} /* right gutter is suppressed to avoid colliding with the fixed nav.toc */ .anno-gutter{display:none} .anno-note{position:absolute;right:0;width:276px;pointer-events:auto;background:var(--panel);border:1px solid var(--hairline);border-left:3px solid var(--hl,#f4c95d);border-radius:9px;padding:9px 11px;box-shadow:0 4px 16px var(--shadow);cursor:pointer;font-family:var(--serif);font-size:.86rem;line-height:1.4;color:var(--chalk-dim)} .anno-note:hover{border-color:color-mix(in srgb,var(--hl,#f4c95d) 60%,var(--hairline));color:var(--chalk)} .anno-note .anno-note-meta{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-faint);margin-bottom:4px} .anno-marker{display:inline-block;vertical-align:super;margin-left:.15em;cursor:pointer;font-size:.62em;color:var(--link);user-select:none} /* selection toolbar */ .anno-bar{position:fixed;z-index:130;display:flex;gap:2px;background:var(--panel);border:1px solid var(--hairline);border-radius:10px;box-shadow:0 8px 28px var(--shadow);padding:4px} .anno-bar button{font:inherit;font-size:.8rem;border:0;background:none;color:var(--chalk);cursor:pointer;padding:6px 11px;border-radius:7px;display:flex;align-items:center;gap:6px} .anno-bar button:hover{background:var(--fill)} .anno-bar .sw{width:13px;height:13px;border-radius:50%;border:1px solid var(--hairline);cursor:pointer;padding:0} /* note editor popover */ .anno-editor{position:fixed;z-index:140;width:300px;background:var(--panel);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 18px 50px var(--shadow);padding:13px} .anno-editor textarea{width:100%;box-sizing:border-box;min-height:88px;resize:vertical;font:inherit;font-size:.92rem;background:var(--board-2);color:var(--chalk);border:1px solid var(--hairline);border-radius:8px;padding:8px 10px;line-height:1.45} .anno-editor textarea::placeholder{color:var(--chalk-faint)} .anno-editor .ae-row{display:flex;align-items:center;gap:8px;margin-top:9px} .anno-editor .ae-sw{width:16px;height:16px;border-radius:50%;border:1px solid var(--hairline);cursor:pointer;padding:0} .anno-editor .ae-sw.on{outline:2px solid var(--chalk);outline-offset:1px} .anno-editor .ae-spacer{flex:1} .anno-editor button.ae-btn{font:inherit;font-size:.78rem;border:1px solid var(--hairline);background:var(--fill);color:var(--chalk);cursor:pointer;padding:5px 11px;border-radius:7px} .anno-editor button.ae-btn.primary{background:var(--link);border-color:var(--link);color:var(--board)} .anno-editor button.ae-del{border:0;background:none;color:var(--coral);cursor:pointer;font-size:.74rem;padding:5px 6px} /* =============================== pencil / ink ============================== */ .ink-tiles{position:absolute;left:0;top:0;z-index:6;pointer-events:none} .ink-tiles.drawing{pointer-events:auto;touch-action:none;cursor:crosshair} .ink-tiles canvas{position:absolute;left:0;display:block} .ink-wet{position:fixed;inset:0;z-index:120;pointer-events:none} body.ink-on{touch-action:none;overscroll-behavior:none} /* a palm in the gutters must never start a native scroll — iPadOS would pointercancel the next pen stroke */ /* while writing, nothing on the page is selectable (palm can't trigger text selection) */ body.ink-on, body.ink-on .s-body, body.ink-on .sh-body, body.ink-on *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} body.ink-on .ink-palette, body.ink-on .ink-palette *{-webkit-user-select:none} /* Notability-style floating ink toolbar */ .ink-palette{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);z-index:135;display:flex;align-items:center;gap:9px; background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5); border:1px solid var(--hairline);border-radius:999px;padding:9px 13px;box-shadow:0 20px 54px var(--shadow),0 2px 10px rgba(0,0,0,.14)} .ink-palette .ink-swl{display:flex;align-items:center;gap:9px} .ink-palette .ink-sw{width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;padding:0; box-shadow:0 0 0 1px var(--hairline) inset;transition:transform .15s cubic-bezier(.2,.9,.3,1.3),box-shadow .15s} .ink-palette .ink-sw:hover{transform:scale(1.12)} .ink-palette .ink-sw.on{transform:scale(1.26);box-shadow:0 0 0 2px var(--board),0 0 0 4.5px currentColor} .ink-palette .ink-sep{width:1px;height:26px;background:var(--hairline);margin:0 1px} .ink-palette .ink-size{width:30px;height:30px;border-radius:50%;border:1px solid var(--hairline);background:var(--fill);cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0;transition:.14s} .ink-palette .ink-size:hover{background:var(--fill-hover)} .ink-palette .ink-size.on{background:var(--link);border-color:var(--link)} .ink-palette .ink-size i{display:block;border-radius:50%;background:var(--chalk-dim)} .ink-palette .ink-size.on i{background:var(--board)} .ink-palette button.ink-tool{font:inherit;font-family:var(--mono);font-size:.92rem;line-height:1;border:1px solid transparent;background:transparent; color:var(--chalk-dim);cursor:pointer;min-width:34px;height:34px;padding:0 11px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:5px;transition:.14s;white-space:nowrap} .ink-palette button.ink-tool:hover{background:var(--fill-hover);color:var(--chalk)} .ink-palette button.ink-tool.on{background:var(--link);border-color:var(--link);color:var(--board)} .ink-palette button.ink-tool.primary{background:var(--link);color:var(--board);font-size:.74rem;padding:0 16px} .ink-palette button.ink-tool.primary:hover{filter:brightness(1.06);color:var(--board)} .ink-hint{font-family:var(--mono);font-size:.58rem;color:var(--chalk-faint);letter-spacing:.06em;margin-left:1px} @media(max-width:560px){.ink-hint{display:none}.ink-palette{gap:7px;padding:8px 10px;bottom:78px}} /* The active-state for the ✎ draw button (#pencilToggle.on) is owned by the shared deck-chrome.css (.flow-btn.on), so it matches the deck and nano-omni. */