/* youtube2: sharp-edged 2005/2006 video-site styling, Times New Roman text.
   No blur, rounded corners, animated transitions, or smooth image scaling. */
:root { color-scheme: light; --ink:#242424; --blue:#003399; --pale:#d7e5f5; --line:#afbdd0; --mid:#d3d3d3; --red:#bb1313; --serif:"Times New Roman",Times,"Liberation Serif",serif; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:auto; }
body { margin:0; color:var(--ink); background:#e8edf4 url('/dither.gif') repeat; font:12px/1.38 var(--serif); text-rendering:optimizeSpeed; -webkit-font-smoothing:none; }
button,input,select { font:inherit; }
button,select { cursor:pointer; }
a { color:#003399; text-decoration:underline; }
a:hover,button:hover { color:#b00000; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:2px dotted #b20e0e; outline-offset:2px; }
button:disabled { opacity:.55; cursor:wait; }
[hidden] { display:none !important; }
svg { shape-rendering:crispEdges; }
img { image-rendering:pixelated; image-rendering:crisp-edges; }
.page-shell { max-width:990px; min-height:100vh; margin:0 auto; background:white; border-left:1px solid #bbc4d2; border-right:1px solid #bbc4d2; padding:0 19px 20px; }
.site-header { padding-top:15px; }
.header-main { display:flex; justify-content:space-between; align-items:flex-start; min-height:82px; gap:18px; }
.brand-area { display:flex; align-items:center; gap:12px; padding-top:5px; min-width:280px; }
.brand { display:flex; align-items:center; flex:none; font:900 35px/1 var(--serif); letter-spacing:-2px; text-decoration:none; color:#101010; white-space:nowrap; }
.brand:hover { color:#101010; }
.brand-you { padding-right:1px; }
.brand-tube { display:inline-block; background:#c30e0e url('/red-dither.gif') repeat; border:2px solid #8b0000; color:#fff; padding:2px 5px 4px 4px; letter-spacing:-2px; text-shadow:1px 1px #6f0808; box-shadow:inset 1px 1px #ffe3e3,inset -1px -1px #6f0808; }
.brand-tagline { border-left:1px solid #d3d3d3; padding-left:10px; color:#666; font-family:var(--serif); font-size:11px; white-space:nowrap; }
.header-right { display:flex; flex-direction:column; align-items:flex-end; padding-top:0; min-width:335px; }
.utility-links { font-size:10px; margin-bottom:13px; }
.utility-links .separator { margin:0 5px; color:#aaa; }
.search-form { display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.search-form label { color:#3e3e3e; white-space:nowrap; font-size:11px; }
.search-form input { width:185px; height:25px; min-width:0; padding:3px 5px; border:1px solid #888; border-top-color:#555; border-left-color:#555; background:#fff; border-radius:0; box-shadow:inset 1px 1px #d7d7d7; }
.search-form button,.classic-button { border:1px solid #777; border-right-color:#555; border-bottom-color:#555; border-radius:0; padding:4px 9px; font-size:11px; background:#dedede url('/gray-dither.gif') repeat; color:#222; box-shadow:inset 1px 1px #fff; white-space:nowrap; }
.search-form button:hover,.classic-button:hover { background:#e5effc; color:#003399; }
.search-form button:active,.classic-button:active { box-shadow:inset 1px 1px #777; padding-top:5px; padding-bottom:3px; }
.search-tip { color:#8b8b8b; font-size:9px; padding-top:3px; }
.main-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; align-items:end; margin-top:1px; padding:0; border-bottom:2px solid #a7bedf; }
.main-tabs a { display:block; padding:6px 8px 5px; background:#c6d7f2; border:1px solid #b0c4e2; border-bottom:0; text-align:center; font-weight:bold; font-size:11px; color:#003399; text-decoration:underline; }
.main-tabs a.selected,.main-tabs a[aria-current="page"] { background:#dedede url('/gray-dither.gif') repeat; border-color:#ccc; color:#003399; }
.main-tabs a:hover { background:#aebfe2; }
.main-tabs a.upload-tab { background:#d0def1; }
.subnav { min-height:30px; padding:7px 12px 6px; display:flex; align-items:center; flex-wrap:wrap; gap:7px; background:#f1f2f4; border-bottom:1px solid #dedede; color:#444; font-size:10px; }
.subnav button { background:none; border:0; padding:0; color:#003399; text-decoration:underline; font-size:10px; }
.subnav button[aria-pressed="true"] { color:#2b2b2b; text-decoration:none; font-weight:bold; }
.subnav-note { margin-left:auto; color:#777; font-style:italic; }
.intro-strip { display:grid; grid-template-columns:92px minmax(0,1fr) 80px; align-items:center; gap:15px; padding:16px 12px 15px; border-bottom:1px dotted #bbb; }
.intro-label { align-self:start; background:#ab1212 url('/red-dither.gif'); border:2px solid #760606; padding:8px 6px; color:#fff; font:bold 12px/1.2 var(--serif); text-align:center; box-shadow:2px 2px #ddd; }
.intro-copy h1 { margin:0 0 4px; font:bold 17px/1.2 var(--serif); }
.intro-copy h1 span { color:#b20f0f; }
.intro-copy p { margin:0; max-width:650px; font-size:11px; line-height:1.6; }
.intro-stamp { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border:2px dotted #9b9b9b; padding:5px 2px; color:#777; background:#f7f7f7 url('/gray-dither.gif') repeat; }
.intro-stamp strong { color:#b21d1d; font:bold 24px/1 var(--serif); }
.intro-stamp span { font:bold 8px/1.2 var(--serif); letter-spacing:.4px; }
.page-columns { display:grid; grid-template-columns:minmax(0,1fr) 242px; align-items:start; gap:17px; margin-top:16px; }
.primary-content,.sidebar { min-width:0; }
.panel { margin:0 0 17px; }
.section-heading { background:#cecece url('/gray-dither.gif') repeat; border-top:1px solid #bbb; border-bottom:1px solid #b4b4b4; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 9px; min-height:29px; }
.section-heading h2 { margin:0; font:bold 12px/1.3 var(--serif); color:#292929; }
.heading-suffix { color:#555; font-size:10px; white-space:nowrap; }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid #e1e1e1; border-top:0; padding:11px 5px 8px; }
.category-item { border:1px solid transparent; background:#fff; padding:6px 5px; min-width:0; text-align:left; display:flex; align-items:center; gap:7px; font-size:11px; color:inherit; }
.category-item:hover { background:#f0f5fd; border:1px dotted #b1c6e1; }
.category-icon { flex:0 0 31px; height:29px; line-height:25px; background:#e0ecf8 url('/dither.gif') repeat; border:1px solid #9ab8d5; box-shadow:inset 1px 1px white; text-align:center; color:#4979ac; font:bold 13px/26px var(--serif); }
.category-item strong { display:block; color:#003399; text-decoration:underline; font-size:10px; line-height:1.25; }
.category-item small { display:block; font-size:9px; color:#747474; line-height:1.45; margin-top:3px; }
.results-panel { border:1px solid #dedede; }
.results-panel > .section-heading { margin:-1px -1px 0; }
.results-toolbar { display:flex; gap:8px; align-items:center; justify-content:space-between; border-bottom:1px dotted #c2c2c2; padding:10px; }
.results-toolbar h2 { font:bold 13px/1.3 var(--serif); margin:0; }
.results-toolbar label { font-size:10px; white-space:nowrap; }
.results-toolbar select,.filter-field select { background:#fff; border:1px solid #9a9a9a; border-radius:0; height:24px; padding:2px 20px 2px 5px; color:#222; }
.results-counter { color:#a31616; font-size:10px; font-weight:normal; margin-left:5px; white-space:nowrap; }
.empty-state { margin:13px 10px 12px; border:1px solid #d2d2d2; background:#f7f7f7; padding:13px 15px 0; }
.empty-header { font:bold 13px var(--serif); color:#333; }
.new-label { display:inline-block; margin-right:5px; padding:2px 4px; color:white; background:#b11818; border:1px solid #740808; font:bold 10px var(--serif); }
.empty-title { color:#333; font-weight:bold; margin:12px 0 5px; font-size:11px; }
.empty-state p:not(.empty-title) { margin:0 0 10px; font-size:11px; line-height:1.6; }
.quick-topics { margin:10px 0 14px; font-size:10px; }
.quick-topics strong { margin-right:4px; }
.quick-topics button,.topic-list button { padding:0; border:0; background:none; color:#003399; font-size:10px; text-decoration:underline; text-align:left; }
.quick-topics span { color:#777; }
.quick-topics button:hover,.topic-list button:hover { color:#b00000; }
.empty-dither { height:12px; margin:0 -15px; border-top:1px solid #d3d3d3; background:#ddd url('/gray-dither.gif') repeat; }
.status-message { margin:10px; padding:9px 10px; border:1px solid #c4d2df; background:#f0f5ff; color:#333; font-size:11px; }
.status-message.error { color:#8a0909; background:#fff0f0; border-color:#d8a3a3; }
.video-grid { display:block; padding:0 10px; }
.video-card { padding:13px 0 12px; border-bottom:1px dotted #bcbcbc; display:grid; grid-template-columns:142px minmax(0,1fr); gap:11px; align-items:start; }
.video-card:last-child { border-bottom:0; }
.thumb-button { display:block; width:142px; padding:0; border:0; background:transparent; cursor:pointer; text-align:left; color:#333; }
.thumb-wrap { display:block; position:relative; width:142px; height:105px; border:1px solid #888; padding:3px; background:#efefef url('/gray-dither.gif'); }
.thumb-wrap img { display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; image-rendering:crisp-edges; }
.thumb-button:hover .thumb-wrap { border-color:#003399; }
.thumb-button:hover .thumb-wrap img { filter:none; }
.thumb-wrap img[hidden] { display:none; }
.thumb-no-image { display:none; }
.thumb-wrap:has(img[hidden]) .thumb-no-image { display:flex; height:100%; justify-content:center; align-items:center; font:bold 10px var(--serif); background:#ddd; color:#666; }
.duration { position:absolute; bottom:4px; right:4px; padding:1px 3px; color:#fff; background:#111; font:bold 10px var(--serif); border:1px solid #ddd; }
.view-badge { display:inline-block; margin-top:5px; font:bold 10px/1.25 var(--serif); color:#a00; }
.card-body { padding-top:1px; min-width:0; }
.card-title { margin:0 0 6px; font:bold 12px/1.3 var(--serif); overflow-wrap:anywhere; }
.card-title button { border:0; background:none; padding:0; color:#003399; text-decoration:underline; font-weight:bold; text-align:left; }
.card-title button:hover { color:#b00000; }
.card-description { font-size:10px; line-height:1.5; color:#414141; margin:0 0 8px; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-channel { color:#666; font-size:10px; margin-bottom:3px; }
.card-channel .channel-name { color:#003399; font-weight:bold; }
.card-facts { color:#666; font-size:10px; display:flex; flex-wrap:wrap; gap:5px; }
.card-facts .views { color:#8a1414; font-weight:bold; }
.card-facts .dot-separator { color:#aaa; }
.skeleton { display:grid; grid-template-columns:142px 1fr; gap:12px; border-bottom:1px dotted #bbb; padding:13px 0; }
.skeleton-thumbnail { width:142px; height:105px; background:#e2e7ee url('/dither.gif'); border:1px solid #b2bdca; }
.skeleton-lines { display:flex; flex-direction:column; gap:10px; padding-top:4px; }
.skeleton-line { height:9px; width:85%; background:#ddd url('/gray-dither.gif'); }
.skeleton-line.short { width:57%; }
.load-more-wrap { border-top:1px dotted #bbb; padding:15px 0; text-align:center; }
.load-more-wrap p { font-size:10px; color:#777; margin:6px 0 0; }
.sidebar-panel { border:1px solid #c8c8c8; background:#f9f9f9; margin-bottom:13px; }
.sidebar-panel .section-heading { margin:-1px -1px 0; background:#d6e2f2 url('/dither.gif'); border-top-color:#a8bed8; border-bottom-color:#b7c6d7; }
.sidebar-panel .section-heading h2 { color:#1e3658; }
.sidebar-inner { padding:12px 11px; }
.sidebar-intro { margin:0 0 10px; font-size:10px; }
.filter-field { display:block; margin:0 0 11px; font-weight:bold; font-size:10px; }
.filter-field select { display:block; width:100%; margin-top:4px; font-weight:normal; font-size:11px; }
.filter-note { margin-top:8px; padding:8px; background:#fff5d9 url('/yellow-dither.gif'); border:1px solid #d7cba9; color:#735d2f; font-size:10px; line-height:1.5; }
.topic-list { display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:13px 12px; }
.topic-list button::before { content:'» '; text-decoration:none; color:#888; }
.tips-copy { font-size:10px; line-height:1.55; }
.about-copy p { margin:0 0 10px; }
.site-footer { margin-top:27px; border-top:1px solid #bbb; padding:12px 5px; text-align:center; color:#777; font-size:10px; line-height:1.7; }
.site-footer p { margin:9px 0 0; }
.modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:#111b2cdb; }
.modal-dialog { position:relative; width:min(780px,100%); max-height:94vh; overflow:auto; border:3px double #777; background:#fff; box-shadow:5px 5px 0 #14244066; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:7px 10px; background:#c9d8ef url('/dither.gif'); border-bottom:1px solid #849ab8; font:bold 12px var(--serif); }
.close-modal { border:1px solid #777; background:#eee url('/gray-dither.gif'); border-radius:0; padding:4px 8px; color:#444; font-size:11px; }
.modal-content { padding:13px 15px 15px; }
.player-container { aspect-ratio:16/9; width:100%; background:#050505; border:1px solid #444; }
.player-container iframe { display:block; width:100%; height:100%; border:0; }
.modal-details { padding:12px 0 10px; border-bottom:1px dotted #aaa; }
.modal-details h2 { color:#003399; font:bold 15px/1.4 var(--serif); margin:0 0 6px; }
.modal-details p { color:#777; font-size:10px; margin:0 0 7px; }
.watch-actions a { font-size:11px; font-weight:bold; }
.modal-description { padding-top:10px; white-space:pre-line; max-height:110px; overflow:auto; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
@media(max-width:820px) { .page-shell { padding:0 13px 15px; } .page-columns { grid-template-columns:minmax(0,1fr) 205px; gap:12px; } .header-main { align-items:center; gap:10px; } .brand { font-size:30px; } .brand-area { min-width:0; gap:7px; } .brand-tagline { font-size:9px; padding-left:7px; } .header-right { min-width:0; } .search-form input { width:145px; } .intro-strip { grid-template-columns:80px minmax(0,1fr) 74px; gap:10px; } .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { body { background:white; } .page-shell { border:0; padding:0 9px 15px; } .header-main { display:block; min-height:0; } .brand-area { padding:8px 0 11px; } .brand { font-size:34px; } .header-right { align-items:stretch; } .utility-links { position:absolute; top:11px; right:12px; margin:0; } .header-right { padding-top:9px; border-top:1px dotted #bbb; } .search-form { justify-content:stretch; } .search-form label { display:none; } .search-form input { flex:1; width:0; } .search-tip { text-align:right; } .main-tabs { gap:2px; margin-top:12px; } .main-tabs a { padding:6px 2px; font-size:10px; } .subnav { gap:5px; padding:8px 7px; } .subnav-note { display:none; } .intro-strip { grid-template-columns:64px minmax(0,1fr); padding:13px 5px; gap:10px; } .intro-label { font-size:10px; padding:5px 2px; } .intro-copy h1 { font-size:15px; } .intro-copy p { font-size:10px; } .intro-stamp { display:none; } .page-columns { display:flex; flex-direction:column; } .primary-content { width:100%; } .sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; width:100%; } .sidebar-panel { margin-bottom:0; } #settings { grid-column:1/-1; } #settings .sidebar-inner { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; } #settings .sidebar-intro { grid-column:1/-1; } .filter-note { grid-column:1/-1; } .heading-suffix { font-size:9px; } }
@media(max-width:410px) { .brand-tagline { display:none; } .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:4px 2px; } .category-item { gap:4px; padding:6px 2px; } .category-icon { flex-basis:23px; height:24px; line-height:22px; font-size:10px; } .category-item strong { font-size:10px; } .category-item small { display:none; } .results-toolbar { align-items:flex-start; flex-direction:column; } .video-card,.skeleton { grid-template-columns:110px minmax(0,1fr); gap:8px; } .thumb-button,.thumb-wrap { width:110px; } .thumb-wrap,.skeleton-thumbnail { height:84px; } .skeleton-thumbnail { width:110px; } .card-description { -webkit-line-clamp:2; } .card-facts { display:block; } .card-facts .dot-separator { display:none; } .card-facts span { display:block; } .modal { padding:5px; } .modal-content { padding:8px; } }