:root{--bg-paper:#fff;--bg-white:#fff;--bg-neutral:#f5f5f7;--border-black:#0a0a0a;--text-black:#0a0a0a;--text-muted:#555;--text-faint:#888;--grid-color:#00000012;--grid-size:26px;--font-display:"Cabinet Grotesk", "IBM Plex Sans Thai", -apple-system, sans-serif;--font-body:"Inter", "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", "IBM Plex Sans Thai", monospace;--shadow-offset:4px 4px 0px var(--border-black);--shadow-offset-lg:6px 6px 0px var(--border-black);--transition-fast:.18s cubic-bezier(.2, 0, 0, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background-color:var(--bg-white);color:var(--text-black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (hover:hover) and (pointer:fine){*,:before,:after,html,body{cursor:none!important}}.cursor-dot,.cursor-ring{pointer-events:none;z-index:999999;border-radius:50%;transition:opacity .2s,transform .15s ease-out;display:none;position:fixed;top:0;left:0;transform:translate(-50%,-50%)}@media (hover:hover) and (pointer:fine){.cursor-dot,.cursor-ring{display:block}}.cursor-dot{background-color:var(--text-black);width:7px;height:7px}.cursor-ring{border:1.5px solid var(--text-black);background-color:#ffffff0d;width:32px;height:32px;transition:width .2s cubic-bezier(.16,1,.3,1),height .2s cubic-bezier(.16,1,.3,1),background-color .2s,border-color .2s}body.cursor-hover .cursor-ring{background-color:#00000014;border-width:2px;width:52px;height:52px}body.cursor-hover .cursor-dot{opacity:.6}body{background-color:var(--bg-white);color:var(--text-black);font-family:var(--font-body);flex-direction:column;min-height:100vh;line-height:1.6;display:flex;position:relative}.graph-paper-bg{background-color:var(--bg-paper);background-image:linear-gradient(to right, var(--grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);background-size:var(--grid-size) var(--grid-size);flex:1;padding:146px 20px 80px;position:relative}.container{max-width:1080px;margin:0 auto}.icon-svg{flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;display:inline-flex}.icon-svg svg{stroke:currentColor;fill:none;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.navbar{z-index:1000;-webkit-backdrop-filter:blur(8px);border:2px solid var(--border-black);width:min(92%,680px);box-shadow:4px 4px 0px var(--border-black);background:#fffffff2;border-radius:999px;justify-content:space-between;align-items:center;padding:6px 14px;transition:width .35s cubic-bezier(.16,1,.3,1),left .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),padding .25s,box-shadow .25s;display:flex;position:fixed;top:18px;left:50%;overflow:visible;transform:translate(-50%)}.navbar:hover{box-shadow:5px 5px 0px var(--border-black)}.nav-content{opacity:1;visibility:visible;justify-content:space-between;align-items:center;width:100%;transition:opacity .2s;display:flex}.nav-tab-btn{font-family:var(--font-mono);letter-spacing:1.5px;color:var(--text-black);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;border:none;outline:none;align-items:center;gap:8px;padding:4px 14px;font-size:.88rem;font-weight:700;display:none;position:relative}.nav-tab-btn .tab-dot{background:#10b981;border-radius:50%;width:7px;height:7px;display:inline-block;box-shadow:0 0 6px #10b981b3}.nav-tab-btn:after{content:"";border:2px solid var(--text-black);opacity:0;pointer-events:none;border-radius:999px;position:absolute;inset:-3px -6px}.nav-tab-btn.burst-active{animation:.28s cubic-bezier(.34,1.56,.64,1) tabPunch}.nav-tab-btn.burst-active:after{animation:.35s cubic-bezier(.16,1,.3,1) forwards tabBlackShockwave}@keyframes tabPunch{0%{transform:scale(1)}35%{transform:scale(.9)}70%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes tabBlackShockwave{0%{opacity:.85;transform:scale(.9)}to{opacity:0;transform:scale(1.35,1.55)}}.navbar.collapsed{cursor:pointer;width:auto;min-width:94px;box-shadow:3px 3px 0px var(--border-black);justify-content:center;padding:6px 14px;left:24px;transform:translate(0)}.navbar.collapsed:hover{box-shadow:4px 4px 0px var(--border-black);transform:translateY(-2px)}.navbar.collapsed .nav-content{opacity:0;visibility:hidden;pointer-events:none;display:none}.navbar.collapsed .nav-tab-btn{display:inline-flex}.navbar.collapsed.expanded{cursor:default;width:min(92%,680px);box-shadow:5px 5px 0px var(--border-black);justify-content:space-between;padding:6px 18px;left:50%;transform:translate(-50%)}.navbar.collapsed.expanded .nav-content{opacity:1;visibility:visible;pointer-events:auto;display:flex}.navbar.collapsed.expanded .nav-tab-btn{display:none}.nav-close-btn{border:1.5px solid var(--border-black);width:26px;height:26px;font-family:var(--font-mono);color:var(--text-black);cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;border-radius:50%;justify-content:center;align-items:center;margin-left:6px;font-size:.8rem;font-weight:700;line-height:1;display:none}.nav-close-btn:hover{background:var(--text-black);color:var(--bg-white)}.navbar.collapsed.expanded .nav-close-btn{display:inline-flex}.nav-brand{font-family:var(--font-mono);letter-spacing:-.5px;color:var(--text-black);align-items:center;gap:6px;padding:4px 10px;font-size:.9rem;font-weight:700;text-decoration:none;display:flex}.nav-brand span.brand-dot{background:var(--text-black);border-radius:50%;width:8px;height:8px;display:inline-block}.nav-links{gap:4px;margin-left:auto;list-style:none;display:flex}.nav-link{font-family:var(--font-mono);color:var(--text-black);transition:background-color var(--transition-fast), color var(--transition-fast);border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:600;text-decoration:none;position:relative}.nav-link:hover{background-color:#00000012}.nav-link.active{background-color:var(--text-black);color:var(--bg-white)}.header-section{text-align:center;margin-bottom:36px}.main-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.02em;color:var(--text-black);opacity:0;margin-bottom:14px;font-size:clamp(2rem,4.5vw,3.2rem);font-weight:900;line-height:1.05;animation:.5s ease-out 50ms forwards heroFadeUp}.main-subtitle{color:var(--text-muted);opacity:0;max-width:580px;margin:0 auto;font-size:.95rem;line-height:1.5;animation:.5s ease-out .13s forwards heroFadeUp}@keyframes heroFadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.filter-wrapper{background:var(--bg-white);border:2px solid var(--border-black);box-shadow:var(--shadow-offset);opacity:0;border-radius:12px;margin-bottom:36px;padding:16px;animation:.5s ease-out .21s forwards heroFadeUp}.main-filter-bar{flex-wrap:wrap;gap:8px;display:flex}.filter-tab-btn{font-family:var(--font-mono);color:var(--text-black);background:var(--bg-neutral);border:1.5px solid var(--border-black);cursor:pointer;box-shadow:2px 2px 0px var(--border-black);transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);-webkit-user-select:none;user-select:none;border-radius:6px;align-items:center;gap:7px;padding:7px 14px;font-size:.85rem;font-weight:700;display:inline-flex}.filter-tab-btn:hover{box-shadow:3.5px 3.5px 0px var(--border-black);background:#e4e4e7;transform:translate(-1.5px,-1.5px)}.filter-tab-btn.active{background:var(--text-black);color:#fff;box-shadow:2px 2px 0px var(--border-black);transform:translate(0)}@keyframes pillSpring{0%{transform:scale(1)}40%{transform:scale(.96)}to{transform:scale(1)}}.filter-tab-btn.pill-spring,.sub-filter-btn.pill-spring{animation:.3s cubic-bezier(.34,1.56,.64,1) pillSpring}.subcategories-bar{border-top:1px dashed #d4d4d8;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding-top:12px;display:none}.sub-filter-btn{font-family:var(--font-mono);color:var(--text-black);background:var(--bg-white);border:1.5px solid var(--border-black);cursor:pointer;box-shadow:1.5px 1.5px 0px var(--border-black);transition:transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);border-radius:5px;align-items:center;gap:6px;padding:4px 10px;font-size:.78rem;font-weight:600;display:inline-flex}.sub-filter-btn:hover{background:var(--bg-neutral);transform:translate(-1px,-1px)}.sub-filter-btn.active{background:var(--text-black);color:#fff;font-weight:700}.videos-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:28px;display:grid}.video-card{background:var(--bg-white);border:2px solid var(--border-black);box-shadow:var(--shadow-offset);opacity:0;will-change:opacity, transform;border-radius:10px;flex-direction:column;transition:opacity .5s ease-out,transform .5s ease-out,box-shadow .2s;display:flex;overflow:hidden;transform:translateY(20px)}.video-card.card-revealed{opacity:1;transform:translateY(0)}.video-card.card-revealed:hover{box-shadow:6px 6px 0px var(--border-black);transform:translateY(-4px)}.video-thumbnail-wrap{border-bottom:2px solid var(--border-black);cursor:pointer;background:#18181b;justify-content:center;align-items:center;width:100%;height:175px;display:flex;position:relative;overflow:hidden}.play-btn-circle{background:var(--bg-white);border:2px solid var(--border-black);width:46px;height:46px;box-shadow:2px 2px 0px var(--border-black);z-index:1;transition:transform var(--transition-fast), background var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.video-card:hover .play-btn-circle,.video-thumbnail-wrap:hover .play-btn-circle{background:var(--bg-neutral);transform:scale(1.1)}.play-btn-circle svg{width:16px;height:16px;fill:var(--text-black);stroke:none;margin-left:2px}.duration-tag{color:#fff;font-family:var(--font-mono);background:#000c;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700;position:absolute;bottom:8px;right:10px}.video-info{flex-direction:column;flex:1;padding:16px;display:flex}.v-badge{font-family:var(--font-mono);color:var(--text-black);background:var(--bg-neutral);border:1px solid var(--border-black);border-radius:4px;align-self:flex-start;align-items:center;gap:5px;margin-bottom:10px;padding:2px 8px;font-size:.72rem;font-weight:700;display:inline-flex}.video-title{font-family:var(--font-display);color:var(--text-black);margin-bottom:6px;font-size:1.15rem;font-weight:800;line-height:1.35}.video-desc{font-family:var(--font-body);color:var(--text-muted);flex:1;margin-bottom:14px;font-size:.85rem;line-height:1.5}.video-footer{border-top:1px dashed #e4e4e7;justify-content:space-between;align-items:center;padding-top:12px;display:flex}.video-meta{font-family:var(--font-mono);color:var(--text-faint);font-size:.75rem}.watch-cta-btn{font-family:var(--font-mono);color:var(--text-black);background:var(--bg-white);border:1.5px solid var(--border-black);cursor:pointer;box-shadow:1.5px 1.5px 0px var(--border-black);transition:transform var(--transition-fast), background var(--transition-fast);border-radius:5px;align-items:center;gap:5px;padding:4px 10px;font-size:.78rem;font-weight:700;display:inline-flex}.watch-cta-btn .cta-arrow{transition:transform .2s;display:inline-block}.video-card:hover .watch-cta-btn .cta-arrow,.watch-cta-btn:hover .cta-arrow{transform:translate(3px)}.watch-cta-btn:hover{background:var(--bg-neutral);transform:translate(-1px,-1px)}.empty-state{text-align:center;background:var(--bg-white);border:2px dashed var(--border-black);border-radius:10px;grid-column:1/-1;padding:50px 20px}.empty-state h3{font-family:var(--font-display);margin-bottom:6px;font-size:1.3rem}.video-card.is-skeleton{pointer-events:none;background:#fff;min-height:290px}.skeleton-thumb{background:linear-gradient(90deg,#18181b 25%,#27272a 50%,#18181b 75%) 0 0/200% 100%;animation:1.5s infinite skeletonShimmerDark}@keyframes skeletonShimmerDark{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-line{background:linear-gradient(90deg,#f0f0f0 25%,#e4e4e7 50%,#f0f0f0 75%) 0 0/200% 100%;border-radius:4px;height:14px;margin-bottom:12px;animation:1.5s infinite skeletonShimmer}.skeleton-line.short{width:35%}.skeleton-line.title{width:75%;height:22px;margin-bottom:14px}.skeleton-line.medium{width:90%}@keyframes skeletonShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.fetch-error-container{text-align:center;border:2px dashed var(--border-black);border-radius:var(--card-radius);box-shadow:4px 4px 0px var(--border-black);background:#fff;grid-column:1/-1;padding:44px 20px}.fetch-error-title{font-family:var(--font-display);color:var(--text-black);margin-bottom:8px;font-size:1.15rem;font-weight:700}.fetch-error-msg{font-family:var(--font-mono);color:var(--text-muted);max-width:520px;margin:0 auto 16px;font-size:.85rem;line-height:1.5}.retry-btn{font-family:var(--font-mono);background:var(--bg-white);color:var(--text-black);border:2px solid var(--border-black);box-shadow:3px 3px 0px var(--border-black);cursor:pointer;transition:all var(--transition-fast);border-radius:999px;padding:8px 20px;font-size:.88rem;font-weight:700}.retry-btn:hover{background:var(--text-black);color:var(--bg-white);transform:translate(-1px,-1px)}.video-thumbnail-img{object-fit:cover;aspect-ratio:16/9;width:100%;height:100%;transition:transform var(--transition-fast);z-index:0;position:absolute;top:0;left:0}.video-card:hover .video-thumbnail-img{transform:scale(1.05)}.video-thumbnail-wrap .play-btn-circle,.video-thumbnail-wrap .duration-tag{z-index:2}.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:9999;opacity:0;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;padding:20px;transition:opacity .2s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-card{background:var(--bg-white);border:2px solid var(--border-black);box-shadow:8px 8px 0px var(--border-black);border-radius:12px;width:100%;max-width:800px;max-height:90vh;transition:transform .2s;position:relative;overflow-y:auto;transform:scale(.97)}.modal-overlay.active .modal-card{transform:scale(1)}.modal-top{background:var(--bg-neutral);border-bottom:1.5px solid var(--border-black);justify-content:space-between;align-items:center;padding:12px 18px;display:flex}.modal-top-title{font-family:var(--font-mono);letter-spacing:.05em;font-size:.82rem;font-weight:700}.modal-close-btn{background:var(--bg-white);border:1.5px solid var(--border-black);width:28px;height:28px;font-family:var(--font-mono);cursor:pointer;box-shadow:1.5px 1.5px 0px var(--border-black);transition:transform var(--transition-fast);border-radius:5px;justify-content:center;align-items:center;font-size:.95rem;font-weight:700;display:flex}.modal-close-btn:hover{transform:translate(-1px,-1px)}.modal-screen{aspect-ratio:16/9;background:#09090b;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.modal-screen iframe{border:none;width:100%;height:100%}.modal-placeholder-screen{text-align:center;color:#fff;padding:20px}.modal-placeholder-screen h4{font-family:var(--font-display);margin-bottom:6px;font-size:1.3rem}.modal-body{padding:18px}.modal-title{font-family:var(--font-display);margin-bottom:8px;font-size:1.35rem;font-weight:800}.modal-desc{color:var(--text-muted);font-size:.9rem;line-height:1.55}.page-footer{text-align:center;font-family:var(--font-mono);color:var(--text-faint);margin-top:50px;font-size:.78rem}@media (max-width:600px){.graph-paper-bg{padding-top:104px;padding-bottom:50px}.navbar{padding:5px 8px;top:10px}.navbar.collapsed{padding:5px 10px;top:12px;left:14px}.navbar.collapsed.expanded{width:calc(100% - 24px);top:10px;left:50%;transform:translate(-50%)}.nav-brand{display:none}.nav-links{justify-content:space-around;width:100%;margin-left:0}.nav-link{padding:6px 8px;font-size:.78rem}.header-section{margin-bottom:25px}.main-title{margin-bottom:10px}.filter-wrapper{margin-bottom:25px;padding:12px}.main-filter-bar{flex-wrap:wrap;gap:6px;display:flex}.filter-tab-btn{padding:6px 12px;font-size:.8rem}.subcategories-bar{flex-wrap:wrap;gap:6px}.sub-filter-btn{padding:4px 8px;font-size:.75rem}.videos-grid{grid-template-columns:1fr;gap:20px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.main-title,.main-subtitle,.filter-wrapper,.video-card,.watch-cta-btn .cta-arrow,.play-btn-circle{opacity:1!important;transition:none!important;animation:none!important;transform:none!important}.cursor-dot,.cursor-ring{display:none!important}body{cursor:auto!important}}