:root{
  --body:#282c34; --body-alt:#24272e; --body-dark:#1f2228; --body-darker:#16181d;
  --text:#f8f8ff; --muted:#ddd; --primary:#61afef; --primary-dark:#2993e9; --red:#c64a4a;
  font-family:Roboto,"Noto Sans JP",Arial,sans-serif; font-size:16px; color:var(--text);
}
*{box-sizing:border-box}
body{margin:0;background:var(--body)}
a{color:var(--primary);text-decoration:none}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;vertical-align:-.125em}
.page{display:flex;flex-direction:column;min-height:100vh}
.header{background:var(--body-dark);padding:8px;height:64px;position:fixed;z-index:500;width:100%}
.header__content{max-width:1200px;margin:0 auto}
.header__content__items{display:flex;gap:16px;justify-content:space-between;align-items:center}
.header__content__items__left{display:flex;gap:15px;align-items:center;min-width:200px}
.header__menu .ico{width:24px;height:24px;cursor:pointer}
.header__logo{display:flex;align-items:center;gap:15px;color:var(--text)}
.header__logo .logo{width:36px;height:38px}
.header__content__items__search{flex:1;display:flex;justify-content:center}
.header__search{max-width:500px;width:100%;background:var(--body);display:flex;border-radius:5px;overflow:hidden}
.header__search input{flex:1;background:none;border:0;color:var(--text);padding:16px;outline:0}
.header__search button{background:var(--body-darker);border:0;color:var(--text);padding:16px 32px;cursor:pointer}
.header__search button:hover{background:var(--primary-dark)}
.menu{position:fixed;z-index:200;top:64px;left:0;bottom:0;background:var(--body-dark);width:74px;overflow-y:auto}
.menu ul{list-style:none;margin:0;padding:0}
.menu a{display:flex;gap:16px;align-items:center;padding:8px 24px;color:var(--text);font-size:20px;line-height:24px;border-radius:5px}
.menu a:hover{background:var(--body-darker)}
.menu a span{display:none}
.content{flex:1;padding:100px 15px 40px}
@media(min-width:992px){.content{padding-left:89px}}
.container{max-width:1200px;margin:0 auto}
.text--bold{font-weight:700}.text--h2{font-size:1.6rem;line-height:1.8rem}.text--h3{font-size:1.3rem}
.text--small{font-size:.7rem}.text--tiny{font-size:.6rem;line-height:1.4}.text--muted{color:var(--muted)}
.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mb-3{margin-bottom:1rem}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px}
.chips{display:flex;gap:8px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px}
@media(min-width:576px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:992px){.grid{grid-template-columns:repeat(6,1fr)}}
.videoTeaser{margin-bottom:15px;min-width:0}
.videoTeaser__thumbnail{position:relative;display:block;border-radius:2px;overflow:hidden}
.videoTeaser__thumbnail img{aspect-ratio:220/160;width:100%;object-fit:cover;background:var(--body-darker);display:block;transition:filter .1s}
.videoTeaser__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:7.5px;color:var(--text);font-weight:700;overflow-wrap:anywhere}
.videoTeaser__bottom{display:flex;align-items:center;margin-top:7.5px;height:28px}
.avatar{width:28px;min-width:28px;height:28px;border-radius:100%;overflow:hidden;margin-right:7.5px;background:var(--body-darker)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--lg{width:60px;min-width:60px;height:60px}
.byline{min-width:0}
.byline a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{position:absolute;display:inline-flex;gap:2px;align-items:center;padding:3px 5px;background:rgba(0,0,0,.8);color:var(--text);font-size:.6rem;font-weight:700}
.views .badge{top:2px;left:2px;border-radius:2px}
.likes .badge{top:2px;right:2px;border-radius:2px}
.duration .badge{bottom:4px;right:2px;border-radius:2px}
.rating .badge{bottom:4px;left:2px;background:var(--red);border-radius:2px;letter-spacing:-1px}
.player-wrap{background:#000;border-radius:5px;overflow:hidden}
.player{width:100%;aspect-ratio:16/9;display:block;transition:filter .1s}
.meta-row{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.meta-row .badge{position:static;background:var(--body-dark);border-radius:5px;font-size:.75rem;padding:6px 10px}
.uploader{display:flex;align-items:center;gap:12px;background:var(--body-alt);border-radius:5px;padding:16px;margin-top:16px}
.username{color:var(--primary);font-weight:700}
.taglist{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{background:var(--primary-dark);color:var(--text);border-radius:5px;padding:4px 8px;font-size:.75rem}
.markdown{background:var(--body-alt);border-radius:5px;padding:16px;margin-top:16px;overflow-wrap:anywhere}
.button{display:inline-block;border-radius:5px;padding:8px 16px;font-size:.85rem;cursor:pointer;white-space:nowrap;border:0}
.button--ghost{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.button--ghost:hover,.button--ghost.is-active{background:var(--primary);color:#fff}
.button--primary{background:var(--primary);color:#fff}
.button--primary:hover{background:var(--primary-dark)}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:24px}
.footer{background:var(--body-dark);padding:32px 15px;margin-top:auto}
@media(min-width:992px){.footer{padding-left:89px}}
@media(max-width:575px){.header__content__items__search{display:none}}
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.gate__box{max-width:460px;width:100%;background:var(--body-alt);border-radius:10px;padding:40px 32px;text-align:center;box-shadow:0 4px 24px rgba(0,0,0,.5)}
.gate__logo{width:64px;height:70px;color:var(--text)}
body.blur .videoTeaser__thumbnail img,body.blur .player{filter:blur(14px)}
body.blur .videoTeaser__thumbnail:hover img{filter:blur(0)}
.thumb-toggle{cursor:pointer;background:none;border:0;color:var(--text);padding:0 8px;font-size:.75rem}