:root{--notepad-width: 360px}.notepad{position:fixed;top:0;right:0;bottom:0;width:var(--notepad-width);display:none;z-index:var(--z-notepad);pointer-events:none}body.notepad-open .browse-preview{margin-right:var(--notepad-width)}.browse-toolbar-right{transition:transform var(--duration-slow) var(--ease-out)}body.notepad-open .browse-toolbar-right{transform:translate3d(calc(-1 * var(--notepad-width)),0,0)}.notepad.available{display:block}.notepad-rig{position:absolute;inset:0;transform:translate3d(100%,0,0);transition:transform var(--duration-slow) var(--ease-out);pointer-events:auto}.notepad.open .notepad-rig{transform:translateZ(0)}.notepad-tab{position:absolute;left:-38px;top:50%;transform:translateY(-50%);width:38px;height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-right:none;border-radius:var(--radius-lg) 0 0 var(--radius-lg);color:var(--color-text-secondary);box-shadow:-4px 0 16px hsl(var(--color-shadow) / .04);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}.notepad-tab:hover{background:var(--color-surface-hover);color:var(--color-accent)}.notepad-tab.hover-suppressed:hover{background:var(--color-surface);color:var(--color-text-secondary)}.notepad-tab:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:3px}.notepad-tab svg{width:18px;height:18px;flex:none}.notepad-tab-label{font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.notepad-panel{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--color-bg);border-left:1px solid var(--color-border)}.notepad-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex:0 0 auto;height:var(--toolbar-height);padding:0 var(--space-3) 0 var(--space-5);border-bottom:1px solid var(--color-border-subtle);font-family:var(--font-sans)}.notepad-title{display:flex;align-items:center;gap:var(--space-2)}.notepad-title svg{width:16px;height:16px;color:var(--color-accent)}.notepad-title h2{margin:0;font-size:var(--text-base);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}.notepad-head-right{display:flex;align-items:center;gap:var(--space-2)}.notepad-saved{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--color-text-tertiary);opacity:0;transition:opacity var(--duration-normal) var(--ease-out)}.notepad-saved.show{opacity:1}.notepad-saved svg{width:13px;height:13px}.notepad-close{display:grid;place-items:center;width:28px;height:28px;border:none;background:none;color:var(--color-text-tertiary);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.notepad-close:hover{background:var(--color-surface-hover);color:var(--color-text)}.notepad-close:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.notepad-close svg{width:16px;height:16px}.notepad-note-wrap{flex:1;display:flex;min-height:0}.notepad-note{flex:1;width:100%;resize:none;background:var(--color-bg);border:none;border-radius:0;padding:var(--space-4) var(--space-5);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-text);outline:none}.notepad-note::placeholder{color:var(--color-text-tertiary)}.notepad-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);height:38px;flex:0 0 auto;padding:0 var(--space-5);border-top:1px solid var(--color-border-subtle);font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-text-tertiary);background:var(--color-content-surface)}.notepad-foot button{font-family:var(--font-sans);font-size:var(--text-xs);background:none;border:none;color:var(--color-text-secondary);padding:0;cursor:pointer;transition:color var(--duration-fast) var(--ease-out)}.notepad-foot button:hover{color:var(--color-text)}.notepad-foot button:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}.notepad-add-selection{position:fixed;top:0;left:0;z-index:var(--z-notepad-pill);display:inline-flex;align-items:center;gap:var(--space-1-5);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-toast-text);background:var(--color-toast-bg);border:none;border-radius:var(--radius-full);padding:var(--space-2) var(--space-3);box-shadow:var(--shadow-lg);cursor:pointer;opacity:0;transform:translateY(6px) scale(.96);transform-origin:center bottom;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-normal) var(--ease-spring)}.notepad-add-selection.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.notepad-add-selection:hover{transform:translateY(-1px) scale(1.03)}.notepad-add-selection:active{transform:translateY(0) scale(.97)}.notepad-add-selection:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.notepad-add-selection svg{width:15px;height:15px}.notepad-icon-btn{display:grid;place-items:center;width:28px;height:28px;border:none;background:none;color:var(--color-text-tertiary);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.notepad-icon-btn:hover{background:var(--color-surface-hover);color:var(--color-text)}.notepad-icon-btn:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.notepad-icon-btn svg{width:16px;height:16px}.notepad-icon-btn .np-pencil,.notepad.preview-mode .notepad-icon-btn .np-eye{display:none}.notepad.preview-mode .notepad-icon-btn .np-pencil{display:block}.notepad-preview{display:none;flex:1;width:100%;overflow-y:auto;border:none;border-radius:0;padding:var(--space-4) var(--space-5);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-text)}.notepad.preview-mode .notepad-note{display:none}.notepad.preview-mode .notepad-preview{display:block}.notepad-preview>:first-child{margin-top:0}.notepad-preview>:last-child{margin-bottom:0}.notepad-preview p{margin:0 0 .8em}.notepad-preview h1,.notepad-preview h2,.notepad-preview h3{font-family:var(--font-sans);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);margin:1.2em 0 .4em;line-height:var(--leading-snug)}.notepad-preview h1{font-size:var(--text-lg)}.notepad-preview h2{font-size:var(--text-base)}.notepad-preview h3{font-size:var(--text-sm)}.notepad-preview ul,.notepad-preview ol{margin:0 0 .8em;padding-left:1.5em}.notepad-preview ul{list-style:disc}.notepad-preview ol{list-style:decimal}.notepad-preview li{display:list-item;margin:.2em 0}.notepad-preview li::marker{color:var(--color-text-tertiary)}.notepad-preview code{font-family:var(--font-mono);font-size:.85em;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);padding:.1em .35em}.notepad-preview blockquote{margin:0 0 .8em;padding:4px 0 4px 14px;border-left:3px solid var(--color-border-strong);color:var(--color-text-secondary);transition:border-color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.notepad-preview .np-quote{cursor:pointer}.notepad-preview .np-quote:hover{border-left-color:var(--color-accent);background:var(--color-accent-subtle)}.notepad-preview hr{border:none;height:1px;background:var(--color-border-subtle);margin:1.4em 0}.notepad-foot-actions{display:flex;align-items:center;gap:var(--space-2)}.notepad-copy-all{display:inline-flex;align-items:center;gap:5px;transition:color var(--duration-fast) var(--ease-out)}.notepad-copy-all .cc-ico{width:13px;height:13px;flex:none}.notepad-copy-all .cc-ico-check{display:none}.notepad-copy-all.copied,.notepad-copy-all.copied:hover{color:var(--color-accent)}.notepad-copy-all.copied .cc-ico-copy{display:none}.notepad-copy-all.copied .cc-ico-check{display:inline}.notepad-resize{position:absolute;left:-3px;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:6}.notepad-resize:before{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;background:transparent;transition:background-color var(--duration-fast) var(--ease-out)}.notepad-resize:hover:before,body.notepad-resizing .notepad-resize:before{background:var(--color-accent)}mark.np-hl{background:var(--color-accent-subtle);color:inherit;box-shadow:0 0 0 1px var(--color-accent-subtle),inset 0 -1.5px 0 var(--color-accent-border);border-radius:2px;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out)}mark.np-hl:hover{background:color-mix(in srgb,var(--color-accent) 16%,transparent)}mark.np-hl-flash{animation:npFlash 1.2s var(--ease-out)}@keyframes npFlash{0%,to{background:var(--color-accent-subtle)}30%{background:color-mix(in srgb,var(--color-accent) 42%,transparent)}}@media(max-width:760px){.notepad{width:min(86vw,360px)}body.notepad-open .browse-preview{margin-right:0}body.notepad-open .browse-toolbar-right{transform:none}}@media(prefers-reduced-motion:reduce){.notepad-rig,.browse-preview,.browse-toolbar-right,.notepad-add-selection{transition-duration:0ms}}