.garden-notes-search { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.garden-notes-search span { flex: none; color: #666; font-size: .76rem; white-space: nowrap; }
.garden-notes-search input { flex: 1; min-width: 0; width: min(100%, 28rem); border: 0; border-bottom: 1px solid #777; padding: 7px 0; background: transparent; color: #000; font: inherit; }
.garden-notes-search input:focus { border-color: #000; outline: 0; }
.garden-notes-sort { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.garden-notes-sort button { display: flex; align-items: center; gap: 6px; border: 0; padding: 3px 0; background: transparent; color: #666; font: inherit; font-size: .76rem; }
.garden-notes-sort button::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; }
.garden-notes-sort button:hover { background: #e7e7e7; color: #000; }
.garden-notes-sort button[aria-pressed="true"] { color: #000; }
.garden-notes-sort button[aria-pressed="true"]::before { background: #000; }
.garden-notes-sort span { color: #666; font-size: .72rem; }
.garden-page-list article[hidden] { display: none; }
.garden-page-list article > a { display: grid; grid-template-columns: 96px minmax(0,1fr) 82px; gap: 8px 24px; padding: 14px 0; color: inherit; text-decoration: none; }
.garden-page-list article > a:hover { background: #e7e7e7; }
.garden-page-list time, .garden-page-list small { color: #666; font-size: .72rem; white-space: nowrap; }
.garden-page-list strong { font-weight: 400; }
.garden-page-list p { grid-column: 2; margin: 0; overflow: hidden; color: #666; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.garden-list-meta { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: 48px 25px; align-items: center; gap: 9px; width: 82px; }
.garden-list-meta small { text-align: right; font-variant-numeric: tabular-nums; }
.garden-rank { display: inline-block; width: 48px; height: 3px; overflow: hidden; background: #e7e7e7; }
.garden-rank i { display: block; min-width: 1px; height: 100%; background: #000; }
.garden-note-reader > time { display: block; margin-bottom: 10px; color: #666; font-size: .72rem; }
.garden-page-rank { display: block; width: 96px; margin-bottom: 34px; }
.garden-body { font-size: 16px; line-height: 1.85; }
.garden-body h2 { margin: 1.5em 0 .4em; font-family: inherit; font-size: 19px; line-height: 1.5; font-weight: 400; }
.garden-body blockquote { margin: 1.1em 0; border-left: 3px solid #d2d2d2; padding-left: 1.1em; color: #444; }
.garden-body a:hover { background: #e7e7e7; text-decoration: none; }
.garden-body img, .garden-body video { max-width: 100%; height: auto; }
.garden-body audio { width: min(100%, 520px); }
.garden-url-preview { display: block; width: 100%; margin: 12px 0 18px; }
.garden-url-preview img, .garden-url-preview video { display: block; width: auto; max-width: 100%; max-height: 70vh; }
.garden-url-preview audio { display: block; width: min(100%, 520px); }
.garden-url-preview iframe { display: block; width: min(100%, 640px); height: 360px; border: 0; background: #eee; }
.garden-url-spotify iframe { height: 152px; }
@media (max-width:560px) { .garden-page-list article > a { grid-template-columns:76px minmax(0,1fr); gap:8px 12px; } .garden-list-meta { grid-column:1; grid-row:2; grid-template-columns:48px; width:48px; margin-top:7px; } .garden-list-meta small { display:none; } .garden-page-list p { grid-column:2; } }