.notes-form input, .notes-form textarea { width: 100%; box-sizing: border-box; padding: .75rem; font: inherit; color: var(--color-text); background: var(--color-bg-2); border: 1px solid var(--color-muted-2); border-radius: 8px; }
.notes-form textarea { min-height: 5rem; resize: vertical; }
.notes-form details { margin-block: 1.2rem; padding: .8rem; border: 1px solid var(--color-surface-3); border-radius: 8px; }
.notes-form summary { cursor: pointer; font-weight: 600; }
.notes-form textarea:focus-visible, .notes-output:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.notes-output { width: 100%; box-sizing: border-box; min-height: 24rem; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: var(--color-bg-2); color: var(--color-text); border: 1px solid var(--color-muted-2); border-radius: 8px; font: .8rem/1.7 ui-monospace, Consolas, monospace; }
.notes-list { margin: 1rem 0; padding-left: 1.3rem; }
.notes-list li { padding-block: .5rem; overflow-wrap: anywhere; }
.notes-remove { margin-left: .5rem; padding: .3rem .6rem; font-size: .75rem; }
.notes-form a, .notes-reference a { color: #79e4f2; text-decoration: underline; text-underline-offset: .15em; }
.notes-status { min-height: 1.5em; color: #aabac1; line-height: 1.6; }
.notes-form [hidden], .notes-reference [hidden] { display: none; }
.notes-reference { margin-top: 2rem; max-width: 900px; line-height: 1.8; }
.notes-reference h2 { margin-top: 2rem; }
.notes-reference code { overflow-wrap: anywhere; }
.notes-form button:disabled, #notes-copy:disabled, #notes-export:disabled { opacity: .55; cursor: not-allowed; }