.youtube-collection{padding-block:clamp(3rem,6vw,6rem);background:var(--realm-background,#f5f3ed);color:var(--realm-ink,#202b35);overflow-wrap:anywhere}
.youtube-collection[hidden],.youtube-collection [hidden]{display:none!important}
.youtube-collection .shell{max-width:1280px;margin-inline:auto;padding-inline:32px}
.youtube-collection h2{font-size:clamp(2rem,5vw,3.5rem);margin-block:.5rem 1.25rem}
.youtube-privacy{max-width:65ch;margin-top:2rem;line-height:1.7;font-size:.85rem}.youtube-privacy summary{cursor:pointer;min-height:44px;align-content:center}.youtube-collection a{color:inherit;text-underline-offset:.2em}
.youtube-controls{display:flex;flex-wrap:wrap;gap:1rem;margin-block:1.5rem}.youtube-controls label{display:grid;gap:.5rem;flex:1 1 15rem;min-width:0}
.youtube-collection input,.youtube-collection select,.youtube-collection button,.youtube-collection summary{font:inherit;color:inherit}.youtube-collection input,.youtube-collection select{background:var(--realm-background-secondary,#fff);border:1px solid currentColor;border-radius:.5rem;padding:.65rem .85rem;min-height:44px;max-width:100%}
.youtube-collection button{cursor:pointer;min-height:44px}.youtube-collection button:disabled{cursor:default;opacity:.5}.youtube-collection :focus-visible{outline:3px solid currentColor;outline-offset:4px}
.youtube-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.youtube-grid[data-count="1"]{max-width:400px;margin-inline:auto;grid-template-columns:1fr}.youtube-grid[data-count="2"]{max-width:824px;margin-inline:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
.youtube-card{min-width:0;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:12px;background:color-mix(in srgb,var(--realm-background-secondary,#fff) 55%,var(--realm-background));padding:12px}
.youtube-thumbnail{aspect-ratio:16/9;background:#15181b;border-radius:8px;position:relative}.youtube-cover{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;border-radius:8px;background:#15181b;color:#fff!important;transition:transform 160ms ease;overflow:hidden}
.youtube-cover img{width:100%;height:100%;object-fit:cover}.youtube-play-label{position:absolute;inset-inline-end:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;background:#15181be6;border:1px solid #ffffff90;border-radius:50%}.youtube-play-label::before{content:"";display:block;width:0;height:0;border-block:7px solid transparent;border-left:11px solid #fff;margin-left:3px}
.youtube-card h3{font-size:1.1rem;line-height:1.5;margin:16px 0 8px;min-height:4.5em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.youtube-brief{line-height:1.6;margin:0;display:none;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem}
.youtube-card[data-details-open="true"] .youtube-brief{display:-webkit-box;margin-block:8px}
.youtube-card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.85rem;flex-wrap:wrap}.youtube-details{background:none;border:0;padding:0;text-decoration:underline}.youtube-card [data-youtube-watch]{display:inline-flex;align-items:center;min-height:44px}
.youtube-state{font-size:.85rem;margin:.5rem 0 0}.youtube-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}.youtube-pagination button,.youtube-dialog-close{border:1px solid currentColor;border-radius:.5rem;background:transparent;padding:.65rem 1rem}
.youtube-dialog{width:min(960px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:24px;border:1px solid currentColor;border-radius:12px;background:var(--realm-background,#f5f3ed);color:var(--realm-ink,#202b35);overflow:auto;overscroll-behavior:contain}
.youtube-dialog::backdrop{background:#000b}.youtube-dialog h3{font-size:1.4rem;line-height:1.5;margin:1rem 0}.youtube-dialog p{line-height:1.7}.youtube-dialog-close{display:block;margin-inline-start:auto}.youtube-player{position:relative;background:#15181b;width:100%;aspect-ratio:16/9;min-height:200px;min-width:200px}.youtube-player iframe{width:100%;height:100%;position:absolute;inset:0;border:0}.youtube-dialog details{margin-block:1rem}.youtube-dialog summary,.youtube-dialog [data-youtube-watch]{min-height:44px;align-content:center}.youtube-caption{font-size:.8rem;font-weight:600}
@media(hover:hover) and (pointer:fine) and (min-width:600px){.youtube-card:hover .youtube-cover{transform:translateY(-3px) scale(1.025)}.youtube-card:hover:not([data-details-dismissed]) .youtube-brief,.youtube-card:has(:focus-visible):not([data-details-dismissed]) .youtube-brief{display:-webkit-box;margin-block:8px}}
@media(max-width:1023px){.youtube-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.youtube-collection .shell{padding-inline:24px}}
@media(max-width:599px){.youtube-grid,.youtube-grid[data-count="2"]{grid-template-columns:1fr}.youtube-collection .shell{padding-inline:16px}.youtube-controls{display:grid}.youtube-dialog{padding:16px}.youtube-pagination{flex-wrap:wrap}.youtube-card h3{min-height:0;-webkit-line-clamp:2}.youtube-brief{display:none;height:auto;margin:0}.youtube-card[data-details-open="true"] .youtube-brief{display:-webkit-box;visibility:visible;margin-block:8px}}
@media(prefers-reduced-motion:reduce){.youtube-cover{transition:none}.youtube-card:hover .youtube-cover{transform:none}}
.youtube-dialog-close{position:sticky;top:0;z-index:1;background:var(--realm-background,#f5f3ed);min-height:44px}