@layer tokens{:root{--base-font-size:15px;--button-border-color:silver;--control-background-color:#fff;--button-border-radius:.3em;--button-border-width:1px;--button-margin:1em;--button-padding:.5em;--date-font-size:90%;--date-align:right;--feed-background-color:#fcfcfc;--feed-container-max-width:50em;--feed-item-background-color:#f0f0f0;--feed-item-block-end-margin:1em;--feed-item-content-left-margin:1em;--feed-item-right-padding:.8em;--feed-item-height:150px;--feed-thumbnail-height:150px;--feed-thumbnail-width:200px;--focus-ring-color:#55b;--focus-ring-width:2px;--icon-size:1.15em;--label-font-size:85%;--error-background-color:#fdeded;--error-border-color:#e0b4b4;--error-text-color:#8a1f1f;--muted-text-color:#888;--spin-duration:.8s;--text-color:#555;--link-color:#55b}}@layer base{body{font-family:sans-serif;font-size:var(--base-font-size);margin:0;padding:0}#root{justify-content:center;display:flex}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@layer layout{.feed-container{max-width:var(--feed-container-max-width);background-color:var(--feed-background-color);text-align:center;color:var(--text-color)}.feed-controls{margin:var(--button-margin);flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.75em;display:flex}.feed-heading{font-size:1.3em;font-weight:700}.feed-list{margin:0;padding:0;list-style:none}.feed-search{align-items:flex-end;gap:.5em;display:flex}.feed-field{flex-direction:column;align-items:flex-start;gap:.25em;display:flex}.feed-field-label{font-size:var(--label-font-size);color:var(--muted-text-color)}}@layer components{.feed-container button{padding:var(--button-padding);border:var(--button-border-width) solid var(--button-border-color);border-radius:var(--button-border-radius);cursor:pointer}.feed-container button:disabled{cursor:default;opacity:.6}.feed-container :focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:1px}.feed-container a,.feed-container a:active,.feed-container a:visited{color:var(--link-color);text-decoration:none}.feed-search input,.feed-select{padding:var(--button-padding);border:var(--button-border-width) solid var(--button-border-color);border-radius:var(--button-border-radius);background-color:var(--control-background-color);color:var(--text-color)}.feed-search input{min-width:16em}.feed-select{cursor:pointer}.load-more{margin-block-end:var(--button-margin)}.refresh-button{background-color:var(--control-background-color);color:var(--text-color);justify-content:center;align-items:center;line-height:0;display:inline-flex}.refresh-button:hover:not(:disabled){background-color:var(--feed-item-background-color)}.refresh-button svg{width:var(--icon-size);height:var(--icon-size);transform-origin:50%}.refresh-button.is-loading svg{animation:spin var(--spin-duration) linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.refresh-button.is-loading svg{animation:none}}.feed-error{margin:var(--button-margin);padding:var(--button-padding);border:var(--button-border-width) solid var(--error-border-color);border-radius:var(--button-border-radius);background-color:var(--error-background-color);color:var(--error-text-color)}.feed-error-title{margin:0 0 .25em;font-weight:700}.feed-error-detail{font-size:var(--date-font-size);margin:0 0 .75em}.feed-empty{color:var(--muted-text-color);margin:var(--button-margin)}.feed-item{text-align:left;background-color:var(--feed-item-background-color);align-items:center;margin-block-end:var(--feed-item-block-end-margin);display:flex}.feed-item-image{width:var(--feed-thumbnail-width);height:var(--feed-thumbnail-height);object-fit:cover}.feed-item-title{font-size:110%;font-weight:700}.feed-item-content{margin-left:var(--feed-item-content-left-margin);padding-right:var(--feed-item-right-padding);min-height:var(--feed-item-height);flex-direction:column;flex:1;justify-content:space-around;display:flex}.feed-item-trail{margin:0}.feed-item-date{font-size:var(--date-font-size);text-align:var(--date-align)}}