.notes-page { --notes-small: .875rem; --notes-title: clamp(2.75rem, 5.6vw, 5rem); --notes-feature: clamp(1.75rem, 3.2vw, 3rem); --notes-headline: clamp(1.375rem, 2vw, 2rem); }
.notes-page .notes-intro { padding-block: var(--s24) var(--s16); }
.notes-page .notes-breadcrumb { color: var(--muted); font-size: var(--small); margin-bottom: var(--s8); }
.notes-page .notes-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: var(--s1); }
.notes-page h1 { max-width: 15ch; font-size: var(--notes-title); line-height: 1.16; margin-bottom: var(--s8); }
.notes-page .notes-description { max-width: 58ch; font-size: var(--lead); color: var(--muted); line-height: 1.7; }
.notes-page .notes-author { margin-top: var(--s6); color: var(--muted); line-height: 1.7; }
.notes-page .notes-author a { color: var(--mint); text-decoration: underline; text-underline-offset: var(--s1); }
.notes-page .notes-tools { display: grid; grid-template-columns: minmax(12rem, 1.6fr) minmax(10rem, 1fr) minmax(9rem, .8fr) auto; align-items: end; gap: var(--s4); padding: var(--s6); background: var(--surface); border-radius: var(--radius); }
.notes-page .notes-tools[hidden], .notes-page [hidden] { display: none; }
.notes-page .notes-field { display: grid; gap: var(--s2); min-width: 0; }
.notes-page .notes-field label { font-size: var(--notes-small); color: var(--muted); }
.notes-page .notes-field input, .notes-page .notes-field select { width: 100%; min-width: 0; min-height: 48px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--s1); background: var(--bg); color: var(--ink); font: inherit; font-size: var(--body-size); }
.notes-page .notes-clear { min-height: 48px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--s1); font: inherit; color: var(--ink); background: var(--bg); cursor: pointer; white-space: nowrap; }
.notes-page .notes-clear:disabled { opacity: .55; cursor: default; }
.notes-page .notes-count { min-height: 1.5em; margin-block: var(--s6); font-size: var(--notes-small); color: var(--muted); }
.notes-page .library-list { padding: 0; margin: 0; list-style: none; }
.notes-page .library-entry { border-top: 1px solid var(--line-soft); }
.notes-page .library-link { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr); gap: var(--s12); padding-block: var(--s8); text-decoration: none; }
.notes-page .library-date { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--notes-small); color: var(--muted); padding-top: var(--s1); }
.notes-page .library-date span { font-size: var(--small); }
.notes-page .library-heading { min-width: 0; }
.notes-page .library-topic { display: block; font-size: var(--notes-small); line-height: 1.6; color: var(--muted); margin-bottom: var(--s3); }
.notes-page .library-heading h2 { font-size: var(--notes-headline); line-height: 1.35; letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: pretty; }
.notes-page .library-read { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s4); color: var(--mint); font-size: var(--notes-small); min-height: 44px; }
.notes-page .library-entry:first-child:not([hidden]) .library-link, .notes-page .library-entry.is-first .library-link { padding-block: var(--s12) var(--s16); }
.notes-page .library-entry:first-child:not([hidden]) h2, .notes-page .library-entry.is-first h2 { font-size: var(--notes-feature); max-width: 30ch; }
.notes-page .library-link:hover h2, .notes-page .notes-author a:hover, .notes-page .notes-breadcrumb a:hover { text-decoration: underline; text-underline-offset: var(--s1); }
.notes-page .library-link:hover .library-read span[aria-hidden] { transform: translate(2px, -2px); }
.notes-page .library-read span[aria-hidden] { transition: transform var(--fast) var(--ease); }
.notes-page .notes-clear:hover:enabled { background: var(--project); }
.notes-page a:focus-visible, .notes-page button:focus-visible, .notes-page input:focus-visible, .notes-page select:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
.notes-page .notes-clear:active:enabled { transform: translateY(2px); }
.notes-page .notes-empty { padding-block: var(--s12); font-size: var(--lead); color: var(--muted); }
.notes-page .notes-disclaimer { border-top: 1px solid var(--line-soft); margin-top: var(--s8); padding-block: var(--s8) var(--s16); color: var(--muted); font-size: var(--notes-small); line-height: 1.7; }
.notes-page .notes-disclaimer a { color: var(--mint); display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: var(--s1); }
.notes-page .notes-footer-links { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); }
.notes-page .notes-footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1000px) { .notes-page .notes-tools { grid-template-columns: 1fr 1fr; } .notes-page .notes-search-field { grid-column: 1 / -1; } .notes-page .notes-clear { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 600px) { .notes-page .notes-intro { padding-block: var(--s16) var(--s12); } .notes-page .notes-tools { grid-template-columns: 1fr; padding: var(--s4); } .notes-page .library-link { grid-template-columns: 1fr; gap: var(--s4); padding-block: var(--s8); } .notes-page .library-date { gap: var(--s1); } .notes-page .library-entry:first-child:not([hidden]) .library-link, .notes-page .library-entry.is-first .library-link { padding-block: var(--s8) var(--s12); } .notes-page .library-entry:first-child:not([hidden]) h2, .notes-page .library-entry.is-first h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); } }
@media (prefers-reduced-motion: reduce) { .notes-page .library-read span[aria-hidden] { transition: none; } }

.notes-page .notes-field input::placeholder { color: var(--muted); opacity: 1; }