:root{--ink-color:#8a8c89}
/* One ink palette for pencil marks, handwritten notes and the reader's additions. */
.ink-enabled :is(.pencil-overlay,.post-drawing,.post-arrow,.post-interface,.post-detail,.book-passages,.book-highlight,.book-sold,.rss-feed,.post-ghost,.butterfly-choice,.timeline-block,.timeline-tick,.refined-book-text,.refined-book-marks,.refined-feed,.refined-transfer-guide,.sketch-drawing,.system-diagram,.system-card,.system-card-title,.system-card-body,.system-model,.system-route,.system-route-pulse,.system-input-pulse,.system-annotation){stroke:var(--ink-color)}
.ink-enabled :is(.draft-hand-note,.gallery-note,.sketch-note,.sketch-title-rough,.sketch-input-hint){color:var(--ink-color)}
.ink-enabled :is(.post-drawing .post-note,.post-drawing .timeline-note,.post-drawing .refined-margin-note,.system-annotation text){fill:var(--ink-color)}
.ink-enabled :is(.editorial-circle,.draft-pencil-circle)::after{background:var(--ink-color);-webkit-mask:url('/assets/editorial/pencil-circle.svg') center/100% 100% no-repeat;mask:url('/assets/editorial/pencil-circle.svg') center/100% 100% no-repeat}
.ink-enabled .post-drawing [fill="#969996"]{fill:var(--ink-color)}
.ink-enabled .post-ghost{stroke-opacity:.45}
.ink-enabled .timeline-tick{stroke-opacity:.5}
.ink-enabled .system-route{stroke-opacity:.5}
.ink-enabled .sketch-check{stroke:#fff}
.ink-layer{position:fixed;inset:0;width:100%;height:100%;z-index:40;overflow:hidden;pointer-events:none;fill:none;stroke:var(--ink-color);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ink-layer path{pointer-events:none}
.ink-layer .ink-stroke--marker{stroke-width:12;opacity:.25}
.ink-drawing .ink-layer{pointer-events:auto;touch-action:none;cursor:crosshair}
.ink-drawing{user-select:none;-webkit-user-select:none}
.ink-erasing .ink-layer{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='10' fill='white' fill-opacity='.55' stroke='%238a8c89' stroke-width='1.2'/%3E%3C/svg%3E") 13 13,crosshair}
.ink-footer{align-items:center;gap:16px}
.ink-tools{position:relative;flex:none;margin-left:auto;z-index:60;color:var(--ink-color);font:12px/1.4 Pretendard,sans-serif}
.ink-dock{position:relative;width:84px;height:28px;transition:width .34s cubic-bezier(.22,.7,.25,1)}
.ink-tools[data-mode=colour] .ink-dock{width:168px}
.ink-choices{position:absolute;right:0;top:0;display:flex;gap:0;width:84px;height:28px}
.ink-tool,.ink-close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ink-tool{flex:none;transition:transform .34s cubic-bezier(.22,.7,.25,1),opacity .22s ease,background .2s;transform:translateX(0)}
.ink-tool svg,.ink-close svg{display:block;width:24px;height:24px;overflow:visible;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ink-tool:hover{background:#f4f4f2}
.ink-tool:focus-visible,.ink-close:focus-visible,.ink-swatch:focus-visible{outline:1px solid var(--ink-color);outline-offset:2px}
.ink-tools[data-active] .ink-tool{opacity:0;pointer-events:none;transform:translateX(var(--merge-x)) scale(.65)}
.ink-close{position:absolute;right:0;top:0;pointer-events:none;opacity:0;transition:opacity .18s}
.ink-tools[data-active] .ink-close{opacity:1;pointer-events:auto}
.ink-close:hover{background:#f4f4f2}
/* The palette grows out of the same row; the close control never moves from its right edge. */
.ink-palette{position:absolute;right:28px;top:0;display:flex;width:140px;height:28px;gap:0;pointer-events:none}
.ink-swatch{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;opacity:0;transform:translateX(28px) scale(.45);transition:opacity .2s ease,transform .34s cubic-bezier(.22,.7,.25,1)}
.ink-swatch::after{content:'';width:12px;height:12px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 3px #fff,0 0 0 4px transparent;transition:box-shadow .2s}
.ink-swatch[aria-pressed=true]::after{box-shadow:0 0 0 3px #fff,0 0 0 4px var(--swatch)}
.ink-tools[data-mode=colour] .ink-palette{pointer-events:auto}
.ink-tools[data-mode=colour] .ink-swatch{opacity:1;transform:translateX(0) scale(1);transition-delay:calc(45ms + var(--swatch-order)*22ms)}
.ink-error{position:absolute;right:0;bottom:40px;width:220px;padding:10px 12px;border:1px solid #eee;border-radius:8px;background:white;color:#a34938;font-size:12px}
.ink-error[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.ink-tools *{transition:none!important}}