*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#141517;--surface:#1b1d20;--raised:#24272b;--text:#eef0f3;--muted:#a3a8b0;--line:#30343b;--accent:#ff6258;--accent-fill:#c93932;--hover:#24272b;--header:#141517;--shadow:0 24px 80px #0008}
html.light{color-scheme:light;--bg:#f7f8fa;--surface:#fff;--raised:#f0f2f5;--text:#20242a;--muted:#606874;--line:#dde1e7;--accent:#d43d35;--accent-fill:#c93932;--hover:#f0f2f5;--header:#fff;--shadow:0 24px 80px #16202b25}
html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:14px;scrollbar-color:var(--line) var(--bg);scrollbar-width:thin}
body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;background:none}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}::selection{background:#ff62583a;color:var(--text)}input{caret-color:var(--accent)}svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.topbar{position:sticky;top:0;z-index:20;background:var(--header);border-bottom:1px solid var(--line)}.topbar-inner{max-width:1264px;margin:auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:36px;height:76px}.brand{display:flex;align-items:center;gap:9px}.brand>span{font-size:23px;font-weight:650;letter-spacing:-.8px}.brand img{border-radius:8px}.search{max-width:480px;flex:1;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);padding:0 14px;height:40px;border-radius:9px;color:var(--muted);margin-left:auto}.search:focus-within{border-color:var(--muted)}.search input{min-width:0;width:100%;color:var(--text);background:none;border:0;outline:0;padding:0;font-size:13px;height:38px}.search input::placeholder{color:var(--muted)}.search input:focus-visible{outline:0}.search svg{width:17px;height:17px}.search kbd{font:11px system-ui;border:1px solid var(--line);border-radius:3px;min-width:20px;height:21px;text-align:center;line-height:18px}.top-actions{display:flex;align-items:center;gap:3px}.icon-button{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--muted);flex-shrink:0}.icon-button:hover{background:var(--hover);color:var(--text)}
main{max-width:1264px;margin:0 auto;padding:42px 32px 28px}.page-heading{margin-bottom:28px}h1{font-size:27px;line-height:1.3;font-weight:600;letter-spacing:-.7px;margin:0 0 8px;text-wrap:balance}.page-heading p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}.library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--line)}.view-tabs{display:flex;gap:5px}.view-tab{display:flex;align-items:center;gap:8px;padding:9px 13px;color:var(--muted);font-size:13px;border-radius:7px;white-space:nowrap}.view-tab:hover{color:var(--text);background:var(--surface)}.view-tab.active{color:var(--text);background:var(--raised);font-weight:550}.view-tab>span{font-size:11px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}.filter-actions{display:flex;align-items:center;gap:14px}select{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:7px;min-height:35px;padding:6px 28px 6px 10px;font-size:12px;max-width:100%;cursor:pointer}#category-filter{background:transparent;border-color:transparent;color:var(--muted);max-width:230px}.filter-button{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;padding:8px 10px;border-radius:7px}.filter-button:hover,.filter-button[aria-expanded=true]{background:var(--surface);color:var(--text)}.filter-button svg{width:17px;height:17px}#filter-count{font-variant-numeric:tabular-nums;background:var(--raised);padding:1px 5px;border-radius:4px;font-size:11px}.advanced-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:-5px 0 24px;padding:0 0 23px;border-bottom:1px solid var(--line)}.advanced-filters>label{display:flex;flex-direction:column;gap:9px;font-size:11px;color:var(--muted)}.advanced-filters select{width:100%;font-size:12px}.filter-summary{display:flex;align-items:center;justify-content:space-between;margin:-5px 0 20px;font-size:12px;color:var(--muted)}.text-button{font-size:12px;color:var(--muted);padding:0;text-decoration:underline;text-underline-offset:3px;line-height:1.6}.text-button:hover{color:var(--text)}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}.video-card{min-width:0}.thumbnail{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--surface);padding:0}.thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.thumbnail-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#000a;color:white;opacity:0;transition:opacity .15s}.thumbnail-play svg{width:20px;height:20px;fill:currentColor;stroke:none;margin-left:3px}.thumbnail:hover .thumbnail-play,.thumbnail:focus-visible .thumbnail-play{opacity:1}.card-bottom{display:flex;align-items:flex-start;gap:8px;padding-top:10px}.card-heading{flex:1;min-width:0;font-size:14px;font-weight:550;line-height:1.5;margin:0;letter-spacing:-.15px}.card-title{padding:0;text-align:left;font:inherit;line-height:inherit;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-title:hover{color:var(--accent)}.card-actions{display:flex;gap:0;flex-shrink:0;margin-top:-5px;margin-right:-6px}.save-button,.hide-button{display:grid;place-items:center;width:31px;height:35px;color:var(--muted);border-radius:6px;padding:0}.save-button svg,.hide-button svg{width:17px;height:17px}.save-button:hover,.hide-button:hover{background:var(--raised);color:var(--text)}.save-button.saved{color:var(--accent)}.save-button.saved svg{fill:var(--accent);fill-opacity:.12}
.content-footer{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:var(--muted);line-height:1.7;padding:30px 0 6px}.empty{text-align:center;padding:70px 20px}.empty>span{display:grid;place-items:center;color:var(--muted)}.empty>span svg{width:28px;height:28px}.empty h2{font-size:20px;font-weight:550;letter-spacing:-.4px;margin:20px 0 10px}.empty p{font-size:13px;line-height:1.6;color:var(--muted)}.empty .primary-button{margin:22px auto 0}.loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:250px;color:var(--muted);font-size:13px}.spinner{width:17px;height:17px;border:2px solid var(--line);border-top-color:var(--muted);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.clip-dialog{padding:0;border:1px solid var(--line);border-radius:14px;width:min(1120px,calc(100% - 48px));max-width:1120px;max-height:calc(100dvh - 48px);color:var(--text);background:var(--surface);box-shadow:var(--shadow);overflow:auto}.clip-dialog::backdrop,.about-dialog::backdrop{background:#000a}.modal-top{min-height:54px;display:flex;align-items:center;justify-content:space-between;padding:8px 13px 8px 22px;border-bottom:1px solid var(--line)}.modal-label{font-size:12px;color:var(--muted)}.modal-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(290px,1fr)}.watch-column{padding:22px;min-width:0}.player-wrap{aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;min-height:200px}.player-wrap iframe{width:100%;height:100%;border:0;display:block}.playback-note{display:flex;align-items:center;gap:9px;margin-top:14px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.playback-note svg{width:16px;height:16px}.playback-note .text-button{font-size:11px;margin-left:auto}.player-help{font-size:11px;line-height:1.7;color:var(--muted);margin:14px 0 0}.player-help a{color:var(--text);text-decoration:underline;text-underline-offset:3px}.clip-info{border-left:1px solid var(--line);padding:26px 24px}.modal-category{font-size:11px;color:var(--muted)}.clip-info h2{font-size:22px;line-height:1.35;font-weight:600;letter-spacing:-.5px;margin:10px 0 14px;text-wrap:balance}.clip-info>p{color:var(--muted);font-size:13px;line-height:1.8}.tool-tags{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}.tool-tag{font-size:11px;padding:5px 8px;background:var(--raised);border-radius:5px}.proof-note{margin:20px 0;color:var(--muted);font-size:11px;line-height:1.8}.proof-note summary{cursor:pointer;color:var(--muted)}.proof-note p{margin:8px 0}.primary-button,.secondary-button{display:flex;justify-content:center;align-items:center;gap:9px;border-radius:8px;min-height:39px;padding:10px 14px;font-size:12px;font-weight:550}.primary-button{background:var(--accent-fill);color:#fff}.primary-button:hover{filter:brightness(.92)}.secondary-button{border:1px solid var(--line)}.secondary-button:hover{background:var(--raised)}.clip-info>.primary-button,.clip-info>.secondary-button{width:100%;margin:9px 0}.primary-button svg,.secondary-button svg{width:16px;height:16px}.modal-source{border-top:1px solid var(--line);margin-top:22px;padding-top:17px;display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.7;color:var(--muted)}.avatar{width:29px;height:29px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600}.about-dialog{color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:32px;width:min(480px,calc(100% - 32px));box-shadow:var(--shadow)}.about-dialog h2{font-size:24px;letter-spacing:-.6px;font-weight:600}.about-dialog p{font-size:13px;line-height:1.8;color:var(--muted)}.about-dialog .primary-button{margin-top:23px;width:100%}.close-about{position:absolute;right:12px;top:12px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,10px);opacity:0;pointer-events:none;background:var(--text);color:var(--bg);padding:12px 18px;border-radius:8px;font-size:12px;z-index:50;transition:opacity .15s,transform .15s;max-width:90%;text-align:center}.toast.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}.skip{position:fixed;top:-80px;left:20px;padding:12px;background:var(--accent-fill);color:#fff;z-index:100}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.brand-area{display:flex;align-items:center;gap:12px;min-width:220px}.topbar-inner{max-width:none;padding:0 24px 0 16px;gap:20px}.search{max-width:600px}.sidebar{width:232px;position:fixed;left:0;top:76px;bottom:0;z-index:19;background:var(--bg);padding:12px 12px 20px;overflow:auto;scrollbar-width:thin}.nav-button{width:100%;display:flex;align-items:center;gap:13px;text-align:left;padding:10px 12px;min-height:42px;font-size:12px;color:var(--muted);border-radius:8px;line-height:1.5}.nav-button svg{width:18px;height:18px}.nav-button:hover{background:var(--surface);color:var(--text)}.nav-button.active{background:var(--raised);color:var(--text);font-weight:550}.nav-count{margin-left:auto;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.sidebar-section{border-top:1px solid var(--line);margin-top:17px;padding-top:17px}.sidebar-section h2{font-size:12px;font-weight:550;margin:0 12px 8px}.source-nav .avatar{width:24px;height:24px;font-size:9px}.sidebar-section .nav-button{font-size:11px}.sidebar-label{display:block;margin:0 12px 10px;color:var(--muted);font-size:11px}.sidebar-section select{width:calc(100% - 24px);margin:0 12px;font-size:11px}.sidebar-bottom{margin:24px 12px 0;padding-top:16px;border-top:1px solid var(--line);font-size:11px;line-height:1.7;color:var(--muted)}.library-note{display:none}.sidebar-bottom p{margin:0}.sidebar-bottom p br{display:block}main{max-width:none;margin-left:232px;padding:24px 28px 28px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}h1{font-size:22px;font-weight:600;margin:0;line-height:1.4}.date-filter select{font-size:12px;border-color:transparent;background:transparent;color:var(--muted);max-width:165px}.content-footer{font-size:11px;padding-top:32px}.toast{display:flex;align-items:center;gap:18px}.toast button{font-size:12px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px;padding:5px 0}.filter-summary{margin:0 0 20px}.player-help{font-size:11px}.playback-note{flex-wrap:wrap}.playback-note .text-button{margin-left:auto}.top-actions{margin-left:20px}body.nav-collapsed .sidebar{display:none}body.nav-collapsed main{margin-left:0}#menu-backdrop{position:fixed;inset:76px 0 0;background:#0008;z-index:18}
@media(min-width:1700px){.video-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1200px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-area{min-width:205px}.topbar-inner{gap:16px}.top-actions{margin-left:0}}
@media(max-width:1000px){.modal-layout{grid-template-columns:1fr}.clip-info{border-left:0;border-top:1px solid var(--line)}.clip-info>.primary-button,.clip-info>.secondary-button{display:inline-flex;width:auto;margin-right:6px}.watch-column{padding-bottom:15px}}
@media(max-width:900px){.sidebar{display:none;width:232px;box-shadow:10px 0 25px #0004}body.mobile-nav .sidebar{display:block}main,body.nav-collapsed main{margin-left:0;padding:24px}.brand-area{min-width:0;gap:7px}.search{max-width:500px}.topbar-inner{gap:20px}}
@media(max-width:640px){.topbar-inner{height:auto;min-height:112px;row-gap:10px;flex-wrap:wrap;padding:12px 16px;gap:10px}.brand-area{gap:6px}.brand>span{font-size:22px}.brand img{width:27px;height:27px}.top-actions{margin-left:auto}.search{order:3;min-width:100%;height:37px}.search input{height:35px;font-size:12px}.search kbd{display:none}.sidebar{top:112px}#menu-backdrop{top:112px}main,body.nav-collapsed main{padding:22px 18px}.page-heading{gap:10px;margin-bottom:22px}h1{font-size:21px}.date-filter select{max-width:145px;font-size:11px;padding-right:22px}.video-grid{grid-template-columns:1fr;gap:26px}.card-heading{font-size:15px}.card-actions{margin-top:-6px}.save-button,.hide-button{width:36px;height:38px}.card-title{-webkit-line-clamp:3}.content-footer{font-size:11px;flex-direction:column;gap:4px}.clip-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:12px}.modal-top{min-height:48px;padding-left:15px}.watch-column{padding:12px}.clip-info{padding:21px}.clip-info h2{font-size:21px}.playback-note{font-size:11px;gap:6px}.playback-note .text-button{font-size:11px}.player-help{font-size:11px}.clip-info>.primary-button,.clip-info>.secondary-button{width:100%;margin-right:0}.player-wrap{min-height:200px}.toast{font-size:12px;gap:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}