:root{--flanger-black:#111;--flanger-panel:#0b0b0b;--flanger-panel-soft:#181818;--flanger-line:#303030;--flanger-yellow:#facc15;--flanger-yellow-dark:#eab308;--flanger-yellow-soft:#fde047;--flanger-cream:#fbfaf7;--flanger-blue:#2f596f;--flanger-blue-soft:#6aa7bd;--flanger-green:#4f6f52;--flanger-green-soft:#93bd7c;--flanger-red:#d34836;background:var(--flanger-black);color:var(--flanger-cream);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{width:100%;min-width:320px;margin:0}body{min-height:100dvh;color:var(--flanger-cream);background:linear-gradient(135deg,#143d523d,#1110 44%),linear-gradient(#0b0b0b 0%,#111 42%,#080808 100%)}body:before{z-index:-1;pointer-events:none;content:"";background:linear-gradient(90deg,#facc150a 0 1px,#0000 1px 96px),linear-gradient(#fbfaf706 0 1px,#0000 1px 72px);position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000000b8,#0000 70%);mask-image:linear-gradient(#000000b8,#0000 70%)}button,input{font:inherit}button{letter-spacing:0}.demo-topbar{z-index:3;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#080808eb;border-bottom:1px solid #facc1529;grid-template-columns:minmax(188px,228px) auto minmax(220px,460px) 40px;align-items:center;gap:20px;min-height:68px;padding:0 24px 0 76px;display:grid;position:sticky;top:0;box-shadow:0 14px 48px #00000057}.demo-wordmark{color:#fff;letter-spacing:0;white-space:nowrap;align-items:center;gap:10px;min-width:0;font-size:16px;font-weight:850;display:flex}.demo-wordmark img{border-radius:8px;width:34px;height:34px;display:block;box-shadow:0 0 0 1px #facc1533}.demo-nav{align-items:center;gap:4px;min-width:0;display:flex}.demo-nav a{color:#fbfaf7c7;border-radius:6px;padding:9px 12px;font-size:13px;font-weight:760;text-decoration:none;transition:background .14s,color .14s}.demo-nav a:hover{color:#fff;background:#181818}.demo-search{grid-template-columns:minmax(0,1fr) 48px;justify-self:end;width:min(100%,460px);display:grid}.demo-search input{min-width:0;height:38px;color:var(--flanger-cream);background:#101010;border:1px solid #303030;border-right:0;border-radius:8px 0 0 8px;outline:0;padding:0 16px}.demo-search input::placeholder{color:#fbfaf77a}.demo-search input:focus-visible,.demo-search input:focus-visible+button{border-color:#facc1594}.demo-search button{height:38px;color:var(--flanger-yellow);cursor:pointer;background:#181818;border:1px solid #303030;border-radius:0 8px 8px 0;place-items:center;transition:background .14s,border-color .14s,color .14s;display:grid;position:relative}.demo-search button span{border:2px solid;border-radius:999px;width:14px;height:14px;position:relative}.demo-search button span:after{content:"";background:currentColor;border-radius:999px;width:7px;height:2px;position:absolute;bottom:-5px;right:-6px;transform:rotate(45deg)}.demo-search button:hover{color:var(--flanger-yellow-soft);background:#242424;border-color:#facc1580}.demo-avatar,.demo-channel__avatar,.demo-comment-avatar{background:linear-gradient(135deg,#facc15f2,#6aa7bdcc 48%,#93bd7ce0),#181818;border-radius:999px}.demo-avatar{justify-self:end;width:36px;height:36px;box-shadow:0 0 0 1px #fbfaf71f}.demo-stage{grid-template-columns:minmax(0,1fr) minmax(280px,370px);align-items:start;gap:28px;width:100%;max-width:1480px;margin:0 auto;padding:28px 24px 120px;display:grid}.demo-watch{min-width:0}.demo-kicker{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.demo-kicker span{color:#fbfaf7db;background:#181818e0;border:1px solid #facc153d;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:780}.demo-kicker span:first-child{color:var(--flanger-yellow-soft);border-color:#facc15a3}.demo-player-card{background:#050505;border:1px solid #272727;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 28px 80px #0000006b}.demo-player-card:before{z-index:1;background:linear-gradient(90deg, var(--flanger-yellow), var(--flanger-blue-soft), var(--flanger-green-soft));content:"";pointer-events:none;height:3px;position:absolute;top:0;left:0;right:0}.demo-video{aspect-ratio:16/9;object-fit:cover;background:#000;width:100%;min-height:320px;max-height:calc(100dvh - 250px);display:block}.demo-meta{padding:17px 2px 0}.demo-meta h1{color:#fff;letter-spacing:0;margin:0 0 12px;font-size:28px;font-weight:810;line-height:1.16}.demo-meta__row{border-bottom:1px solid #2b2b2b;justify-content:space-between;align-items:center;gap:16px;padding-bottom:15px;display:flex}.demo-channel{align-items:center;gap:12px;min-width:0;display:flex}.demo-channel__avatar{width:38px;min-width:38px;height:38px}.demo-channel strong,.demo-channel span{display:block}.demo-channel strong{color:#fff;text-transform:lowercase;font-size:14px;line-height:1.2}.demo-channel span,.demo-meta p,.demo-suggestion p{color:#fbfaf7ad;font-size:13px;line-height:1.4}.demo-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.demo-actions button{color:#fbfaf7e6;cursor:pointer;background:#181818;border:1px solid #303030;border-radius:8px;min-height:34px;padding:0 13px;font-weight:760;transition:background .14s,border-color .14s,color .14s}.demo-actions button:hover{color:#fff;background:#242424;border-color:#facc1575}.demo-actions .demo-action-primary{border-color:var(--flanger-yellow);background:var(--flanger-yellow);color:#101010}.demo-actions .demo-action-primary:hover{border-color:var(--flanger-yellow-soft);background:var(--flanger-yellow-soft);color:#101010}.demo-meta p{background:#181818d6;border:1px solid #facc151f;border-radius:8px;margin:14px 0 0;padding:12px 14px}.demo-rail{gap:12px;display:grid}.demo-rail-heading{border-bottom:1px solid #303030;gap:4px;padding:2px 0 12px;display:grid}.demo-rail-heading strong{color:#fff;font-size:15px;line-height:1.2}.demo-rail-heading span{color:#fbfaf794;font-size:12px;line-height:1.2}.demo-suggestion{background:#181818b8;border:1px solid #0000;border-radius:8px;grid-template-columns:132px minmax(0,1fr);align-items:start;gap:12px;padding:8px;transition:background .14s,border-color .14s,transform .14s;display:grid}.demo-suggestion:hover,.demo-suggestion.is-active{background:#181818;border-color:#facc1542}.demo-suggestion:hover{transform:translateY(-1px)}.demo-suggestion__thumb,.demo-card-thumb{background:linear-gradient(135deg,#facc1538,#2f596f75 48%,#4f6f5257),repeating-linear-gradient(90deg,#171717 0 10px,#101010 10px 20px);border:1px solid #fbfaf714;position:relative;overflow:hidden}.demo-suggestion__thumb{aspect-ratio:16/9;border-radius:7px}.demo-suggestion__thumb:before,.demo-card-thumb:before{clip-path:polygon(0 40%,6% 36%,12% 58%,18% 28%,25% 52%,32% 18%,39% 64%,48% 34%,55% 54%,63% 20%,70% 68%,80% 30%,89% 54%,100% 42%,100% 100%,0 100%);content:"";opacity:.9;background:linear-gradient(90deg,#0000 0 5%,#facc15c2 5% 7%,#0000 7% 15%,#fde047f5 15% 18%,#0000 18% 27%,#6aa7bdb8 27% 30%,#0000 30% 43%,#93bd7cd1 43% 46%,#0000 46% 58%,#facc15cc 58% 60%,#0000 60% 72%,#fde047b8 72% 74%,#0000 74% 100%);position:absolute;inset:18% 12%}.demo-suggestion__thumb:after{color:var(--flanger-cream);content:"Video";background:#050505db;border-radius:4px;padding:2px 5px;font-size:11px;font-weight:780;line-height:1.2;position:absolute;bottom:6px;right:6px}.demo-suggestion:nth-of-type(2) .demo-suggestion__thumb{background:linear-gradient(135deg,#6aa7bd47,#facc152e),repeating-linear-gradient(-45deg,#171717 0 12px,#101010 12px 24px)}.demo-suggestion:nth-of-type(3) .demo-suggestion__thumb{background:linear-gradient(135deg,#93bd7c38,#2f596f61),repeating-linear-gradient(90deg,#171717 0 11px,#101010 11px 22px)}.demo-suggestion:nth-of-type(4) .demo-suggestion__thumb{background:linear-gradient(135deg,#d348362e,#facc153d),repeating-linear-gradient(-30deg,#171717 0 10px,#101010 10px 20px)}.demo-suggestion h2{color:#fff;letter-spacing:0;margin:0 0 4px;font-size:14px;font-weight:780;line-height:1.25}.demo-suggestion p{margin:0}.demo-below{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:18px 28px;margin-top:12px;padding-bottom:180px;display:grid}.demo-panel{background:#101010e0;border:1px solid #303030;border-radius:8px;padding:18px;box-shadow:0 18px 46px #0000002e}.demo-panel h2{color:#fff;letter-spacing:0;margin:0 0 12px;font-size:18px;font-weight:800;line-height:1.2}.demo-panel p{color:#fbfaf7b8;margin:0;font-size:14px;line-height:1.55}.demo-description{min-height:160px}.demo-comments{gap:14px;display:grid}.demo-comments article{grid-template-columns:34px minmax(0,1fr);gap:10px;display:grid}.demo-comments strong{color:#fff;margin-bottom:3px;font-size:13px;line-height:1.2;display:block}.demo-comment-avatar{width:34px;height:34px}.demo-grid-section{grid-column:1/-1}.demo-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.demo-card-grid article{min-width:0}.demo-card-thumb{aspect-ratio:16/9;border-radius:8px;margin-bottom:10px}.demo-card-grid article:nth-child(2) .demo-card-thumb{background:linear-gradient(135deg,#6aa7bd4d,#1818188a),repeating-linear-gradient(90deg,#171717 0 12px,#101010 12px 24px)}.demo-card-grid article:nth-child(3) .demo-card-thumb{background:linear-gradient(135deg,#93bd7c47,#facc1524),repeating-linear-gradient(-45deg,#171717 0 12px,#101010 12px 24px)}.demo-card-grid article:nth-child(4) .demo-card-thumb{background:linear-gradient(135deg,#d3483633,#2f596f57),repeating-linear-gradient(-30deg,#171717 0 12px,#101010 12px 24px)}.demo-card-grid h3{color:#fff;margin:0 0 4px;font-size:14px;font-weight:790;line-height:1.25}.demo-card-grid p{font-size:13px;line-height:1.35}@media (width<=980px){.demo-topbar{grid-template-columns:minmax(180px,1fr) 40px;min-height:64px}.demo-nav,.demo-search{display:none}.demo-stage{grid-template-columns:1fr;padding:18px 16px 120px}.demo-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-rail-heading{grid-column:1/-1}.demo-below{grid-template-columns:1fr}.demo-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=640px){.demo-meta h1{font-size:22px}.demo-video{min-height:190px;max-height:none}.demo-meta__row,.demo-channel{align-items:flex-start}.demo-meta__row{flex-direction:column}.demo-actions{justify-content:flex-start}.demo-rail{grid-template-columns:1fr}.demo-suggestion{grid-template-columns:128px minmax(0,1fr)}.demo-below{padding-bottom:140px}.demo-card-grid{grid-template-columns:1fr}}@media (width<=420px){.demo-topbar{padding:0 14px 0 68px}.demo-suggestion{grid-template-columns:112px minmax(0,1fr)}}