.clips-shell{width:min(860px,calc(100% - 28px));margin:0 auto;padding:40px 0 86px}
.clips-head{margin-bottom:30px}
.clips-head h1{font-size:clamp(54px,12vw,96px);line-height:.88;margin:10px 0 16px}
.clips-head p{max-width:700px;color:#6f6964;font-size:17px;line-height:1.6}
.clip-tabs{display:flex;gap:10px;margin-top:24px;overflow:auto;padding:2px 5px 7px 0}
.clip-tabs button{min-height:44px;border:3px solid #0d1117;background:#fffdf7;border-radius:9px;padding:10px 15px;font-weight:900;white-space:nowrap;box-shadow:4px 4px 0 #0d1117;transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.clip-tabs button.active{background:#0d1117;color:#fff;border-color:#0d1117;box-shadow:4px 4px 0 #f6bf24}
.clip-tabs button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #0d1117}
.clip-tabs button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #0d1117}
.clips-feed{display:grid;gap:30px}
.clip-card{background:#fffdf7;border:3px solid #0d1117;border-radius:14px;overflow:hidden;box-shadow:9px 9px 0 #0d1117}
.clip-player{aspect-ratio:16/9;background:#0b0c0e;position:relative;overflow:hidden;border-bottom:3px solid #0d1117}
.clip-preview{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;background:#0b0c0e;color:#fff;cursor:pointer;display:grid;place-items:center;overflow:hidden;font:inherit}
.clip-preview-fallback{position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(246,191,36,.2),transparent 34%),linear-gradient(145deg,#222326,#08090b)}
.clip-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .2s ease}
.clip-preview-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.08) 48%,rgba(0,0,0,.62))}
.clip-preview:hover .clip-thumb{transform:scale(1.018)}
.clip-preview:focus-visible{outline:5px solid #f6bf24;outline-offset:-5px}
.play-orb{position:relative;z-index:3;width:72px;height:72px;border:3px solid #0d1117;border-radius:12px;background:#ff4b25;display:grid;place-items:center;padding-left:4px;font-size:28px;font-weight:900;box-shadow:6px 6px 0 #0d1117}
.clip-source{position:absolute;z-index:3;left:14px;bottom:13px;font-size:11px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#0d1117;border:2px solid #fff;border-radius:7px;padding:7px 9px;font-weight:800}
.clip-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.clip-body{padding:22px 22px 24px}
.clip-meta{display:flex;gap:10px;align-items:center;color:#756f69;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.clip-body h2{font-size:clamp(24px,5vw,34px);line-height:1.02;margin:10px 0 20px}
.clip-actions{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center}
.vote-btn,.comment-btn{min-height:46px;border:3px solid #0d1117;background:#fff;border-radius:8px;padding:0 14px;font-weight:900;box-shadow:3px 3px 0 #0d1117;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.vote-btn:hover,.comment-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #0d1117}
.vote-btn:active,.comment-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #0d1117}
.vote-btn.plus.selected{background:#c8f2d2;border-color:#0d1117}
.vote-btn.minus.selected{background:#ffd8cf;border-color:#0d1117}
.clip-score{font:900 22px/1 Manrope,sans-serif;padding:0 8px;color:#0d1117}
.comment-btn{justify-self:end;background:#f6bf24}
.comments-panel{border-top:3px solid #0d1117;padding:20px 22px 22px;background:#f3eee8}
.comments-list{display:grid;gap:13px;margin-bottom:18px}
.clip-comment{background:#fffdf7;border:3px solid #0d1117;border-radius:9px;padding:13px;box-shadow:4px 4px 0 #0d1117}
.clip-comment p{margin:10px 0 0;line-height:1.45;color:#514b47}
.clip-comment-author{display:flex;align-items:center;gap:9px;text-decoration:none;color:#171514}
.clip-comment-author img,.clip-comment-author>span{width:36px;height:36px;border:2px solid #0d1117;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#171514;color:#f6bf24;font-weight:900}
.clip-comment-author b{font-size:13px;margin:0}
.clip-comment-author small{color:#887f77;font-size:11px}
.clip-comment-author:not(.legacy){display:grid;grid-template-columns:36px auto auto;justify-content:start}
.clip-comment-delete{border:0;background:transparent;color:#9f3e2e;font:800 12px/1.3 inherit;padding:9px 0 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.comment-form{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.comment-form input{min-height:44px;border:3px solid #0d1117;border-radius:8px;padding:10px 12px;background:#fff;box-shadow:3px 3px 0 #0d1117;font:inherit}
.comment-form input:focus{outline:3px solid #f6bf24;outline-offset:2px}
.comment-form button{border:3px solid #0d1117;border-radius:8px;background:#0d1117;color:#fff;font-weight:900;padding:0 16px;min-height:44px;box-shadow:3px 3px 0 #f6bf24}
.comment-as{font-size:12px;color:#756d66;white-space:nowrap;font-weight:800}
.comment-policy-note{grid-column:2/-1;font-size:11px;color:#817972}
.comment-status{grid-column:2/-1;min-height:16px;font-size:12px;color:#8b6500;font-weight:800}
.comment-login{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fffdf7;border:3px solid #0d1117;border-radius:9px;padding:13px;box-shadow:4px 4px 0 #0d1117}
.comment-login p{margin:0;color:#675f58}
.comment-login a{background:#0d1117;color:#fff;text-decoration:none;font-weight:900;border:3px solid #0d1117;border-radius:8px;padding:10px 12px;white-space:nowrap;box-shadow:3px 3px 0 #f6bf24}
.clip-loading{padding:60px 20px;text-align:center;color:#7a736d;font-weight:800}
.clips-sentinel{min-height:84px;display:grid;place-items:center;color:#817972;font-size:13px;font-weight:900;text-align:center}
.clips-sentinel[hidden]{display:none}
@media(max-width:620px){
  .clips-shell{padding-top:28px}
  .clips-head{margin-bottom:26px}
  .clip-card{border-radius:12px;box-shadow:6px 6px 0 #0d1117}
  .clip-body{padding:17px 16px 19px}
  .comments-panel{padding:17px 16px 19px}
  .clip-actions{grid-template-columns:auto auto 1fr}
  .comment-btn{grid-column:1/-1;justify-self:stretch}
  .comment-form{grid-template-columns:1fr}
  .comment-form button{min-height:44px}
  .comment-as,.comment-policy-note,.comment-status{grid-column:1;white-space:normal}
  .comment-login{display:grid}
  .comment-login a{text-align:center}
  .play-orb{width:62px;height:62px;font-size:24px;border-radius:10px;box-shadow:5px 5px 0 #0d1117}
  .clip-tabs{padding-bottom:7px}
}