:root{color-scheme:light;--ink:#172033;--muted:#667085;--line:#d9e0ea;--bg:#f6f8fb;--brand:#c62828;--like:#208a4b;--neutral:#8992a3;--dislike:#c43d3d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6}header,footer,main{max-width:1180px;margin:auto;padding:18px}header{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:#fff;border-bottom:1px solid var(--line)}.brand{font-size:1.2rem;font-weight:800;color:var(--ink);text-decoration:none}nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}nav a{color:#245c8a}.language{margin-left:auto}.hero{padding:28px;border-radius:20px;background:linear-gradient(135deg,#fff,#ffe9e9)}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.card,.review,main>article,main>section:not(.hero){background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin:14px 0}.card img,.cards article>img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover}.placeholder{background:#d8dce3}.vote-bar{height:20px;display:flex;border-radius:10px;overflow:hidden;background:#eee}.vote-bar span{display:block}.vote-bar .like{background:var(--like)}.vote-bar .neutral{background:var(--neutral)}.vote-bar .dislike{background:var(--dislike)}.vote-text{font-size:.9rem;margin:8px 0}.chips{display:flex;gap:8px;flex-wrap:wrap}.chips a,.chips span,.button,button{padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink)}button{cursor:pointer}form{display:grid;gap:10px;max-width:620px;margin:14px 0}input,textarea,select{font:inherit;padding:10px;border:1px solid var(--line);border-radius:10px}textarea{min-height:100px}.notice{padding:12px;background:#e7f7ed}.error{padding:12px;background:#ffe8e8;color:#7a1717}.channel{display:grid;grid-template-columns:minmax(240px,1fr) minmax(300px,1.5fr);gap:20px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;padding:9px;border-bottom:1px solid var(--line);vertical-align:top}td form{display:flex;flex-wrap:wrap;margin:0}footer{color:var(--muted)}footer a{margin-right:12px}@media(max-width:680px){header{align-items:flex-start}.language{margin-left:0;width:100%}.channel{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.hero{padding:20px}h1{font-size:1.65rem}}

/* Existing production ranking design. */
.ranking-hero{padding:48px 40px;border-radius:24px;background:linear-gradient(135deg,#111827,#263b63);color:#fff;margin-bottom:24px}.ranking-hero h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.15;margin:.35em 0}.ranking-hero p{max-width:760px}.eyebrow{font-size:.78rem;letter-spacing:.18em;font-weight:800;color:#f9c74f}.weekly-update{display:inline-block;padding:7px 13px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-weight:700}.ranking-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.ranking-tabs a{padding:14px;text-align:center;text-decoration:none;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:700}.ranking-tabs a.active{background:var(--brand);border-color:var(--brand);color:#fff}.ranking-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.ranking-heading span{color:var(--muted)}.ranking-list{display:grid;gap:12px}.ranking-card{display:grid;grid-template-columns:64px 88px minmax(0,1fr);gap:18px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}.rank-number{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#111827;color:#fff;font-size:1.35rem;font-weight:900}.ranking-card:nth-child(1) .rank-number{background:#c79a12}.ranking-card:nth-child(2) .rank-number{background:#718096}.ranking-card:nth-child(3) .rank-number{background:#a85d2a}.channel-avatar{width:82px;height:82px;border-radius:50%;object-fit:cover}.channel-summary h2{margin:0 0 10px;font-size:1.25rem}.channel-summary h2 a{color:var(--ink);text-decoration:none}.category-label{margin:0;color:var(--brand);font-size:.82rem;font-weight:800;text-transform:uppercase}.metrics{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:10px;margin:10px 0}.metrics div{padding:10px 12px;background:#f7f8fb;border-radius:10px}.metrics dt{font-size:.78rem;color:var(--muted)}.metrics dd{margin:0;font-size:1.05rem;font-weight:800}.latest-video{display:grid;grid-template-columns:144px minmax(0,1fr);gap:12px;align-items:center;margin-top:12px}.latest-video img{width:144px;aspect-ratio:16/9;object-fit:cover;border-radius:9px}.latest-video span,.latest-video time{display:block;color:var(--muted);font-size:.76rem}.latest-video strong{display:block;line-height:1.35}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.category-grid a{display:flex;justify-content:space-between;padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;font-weight:700}.channel-detail{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px}.channel-avatar-large{width:180px;height:180px;border-radius:50%;object-fit:cover}.button.primary{display:inline-block;background:var(--brand);color:#fff;text-decoration:none}.latest-detail img{width:min(100%,640px);aspect-ratio:16/9;object-fit:cover;border-radius:14px}.search-form{grid-template-columns:1fr auto;max-width:none}@media(max-width:720px){.ranking-hero{padding:30px 22px}.ranking-tabs{grid-template-columns:1fr}.ranking-card{grid-template-columns:48px 64px minmax(0,1fr);gap:10px;padding:13px}.rank-number{width:42px;height:42px}.channel-avatar{width:60px;height:60px}.metrics{grid-template-columns:1fr}.latest-video{grid-template-columns:1fr}.latest-video img{width:100%}.channel-detail{grid-template-columns:1fr}.channel-avatar-large{width:120px;height:120px}}

/* Ranking cards flow left-to-right in their existing ranking order. */
.ranking-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.ranking-card{min-width:0;height:100%;grid-template-columns:52px 72px minmax(0,1fr);gap:12px;padding:16px}
.ranking-card .channel-summary{grid-column:1/-1;min-width:0}
.ranking-card .metrics{grid-template-columns:1fr;gap:8px}
.ranking-card .latest-video{grid-template-columns:1fr}
.ranking-card .latest-video img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ranking-card>.channel-avatar{display:block;min-width:0;max-width:72px;overflow:hidden;color:transparent;font-size:0;text-indent:-9999px;background:#d8dce3}
@media(max-width:900px){.ranking-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ranking-list{grid-template-columns:minmax(0,1fr)}}
.ranking-scale-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:22px 0}
.ranking-scale-filters a{padding:14px;text-align:center;text-decoration:none;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:700}
.ranking-scale-filters a.active{background:var(--brand);border-color:var(--brand);color:#fff}
@media(max-width:720px){.ranking-scale-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.ranking-card>.channel-avatar{max-width:60px}}

/* 2026 sharp ranking UI refresh */
:root{--ink:#151515;--muted:#626262;--line:#dedede;--bg:#f7f7f7;--brand:#e60012}
html{overflow-x:hidden;background:#fff}
body{overflow-x:hidden;background:var(--bg);font-size:15px;line-height:1.55}
body>header{max-width:none;margin:0;padding:12px max(20px,calc((100vw - 1180px)/2));min-height:58px;gap:22px;flex-wrap:nowrap;position:relative;z-index:2;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.brand{font-size:1.08rem;letter-spacing:-.02em;white-space:nowrap}
header nav{gap:4px}
header nav a{padding:7px 10px;color:#303030;text-decoration:none;font-size:.9rem;font-weight:650;border-bottom:2px solid transparent}
header nav a:hover{color:var(--brand);border-color:var(--brand)}
.language{display:block;margin:0 0 0 auto;max-width:132px}
.language label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.75rem}
.language select{padding:6px 24px 6px 8px;border-radius:3px;background:#fff}
main{max-width:1180px;padding:22px 18px 48px}
.ranking-hero{position:relative;padding:0;border:1px solid #d7d7d7;border-radius:4px;background:#111;color:#fff;overflow:hidden;margin:0 0 18px}
.ranking-hero>img{display:block;width:100%;height:auto;max-height:470px;aspect-ratio:2.5/1;object-fit:contain;background:#fff}
.ranking-hero-copy{padding:18px 22px 20px;background:#181818;border-top:3px solid var(--brand)}
.ranking-hero-copy h1{font-size:clamp(1.55rem,3vw,2.35rem);margin:.2em 0;letter-spacing:-.025em}
.ranking-hero-copy p{margin:.4em 0}
.eyebrow{color:#ff5965;font-size:.7rem}
.weekly-update{padding:4px 8px;border-radius:2px;font-size:.78rem}
.ranking-scale-filters,.ranking-tabs{gap:7px;margin:14px 0}
.ranking-scale-filters a,.ranking-tabs a{padding:10px 8px;border-radius:3px;font-size:.88rem;line-height:1.35;box-shadow:none}
.ranking-scale-filters a:hover,.ranking-tabs a:hover{border-color:#999}
.ranking-scale-filters a.active,.ranking-tabs a.active{background:var(--brand);border-color:var(--brand)}
.ranking-heading{margin:18px 0 8px;border-bottom:2px solid #1d1d1d}
.ranking-heading h2{margin:0 0 8px;font-size:1.25rem}
.ranking-heading span{font-size:.82rem}
.ranking-list{gap:12px}
.ranking-card{grid-template-columns:42px 64px minmax(0,1fr);gap:10px;padding:12px;border-color:#ddd;border-radius:4px;box-shadow:none;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.rank-number{width:38px;height:38px;border-radius:3px;font-size:1rem;background:#202020}
.ranking-card>.channel-avatar{width:60px;height:60px;max-width:60px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}
.channel-summary h2{font-size:1rem;line-height:1.35;margin:2px 0 8px;min-height:2.7em}
.channel-summary h2 a:hover{color:var(--brand)}
.category-label{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metrics{grid-template-columns:1fr;gap:0;margin:8px 0;border-top:1px solid #ececec}
.metrics div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 2px;background:transparent;border-bottom:1px solid #ececec;border-radius:0}
.metrics dt{font-size:.72rem}
.metrics dd{font-size:.94rem;font-weight:800;font-variant-numeric:tabular-nums}
.latest-video{margin-top:10px;gap:8px}
.latest-video img{border-radius:2px}
.latest-video strong{font-size:.82rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.category-grid{gap:8px}
.category-grid a{padding:13px;border-radius:3px}
.search-form{grid-template-columns:minmax(0,1fr) auto;gap:7px}
input,textarea,select{border-radius:3px;background:#fff}
button,.button,.chips a,.chips span{border-radius:3px}
button{background:#202020;color:#fff;border-color:#202020;font-weight:700}
button:hover{background:var(--brand);border-color:var(--brand)}
.channel-detail{border-radius:4px!important}
main>section:not(.hero),main>article,.review{border-radius:4px}
footer{max-width:1180px;padding:26px 18px;border-top:1px solid var(--line);font-size:.82rem}
@media(hover:hover) and (pointer:fine){.ranking-card:hover{transform:translateY(-2px);border-color:#bdbdbd;box-shadow:0 6px 16px rgba(0,0,0,.07)}}
@media(max-width:760px){body>header{padding:10px 14px;gap:10px;flex-wrap:wrap}.brand{width:100%;font-size:1rem}header nav{order:2;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}header nav a{white-space:nowrap;padding:6px 8px}.language{position:absolute;right:14px;top:9px}.language label{font-size:0}.language select{font-size:.75rem}.ranking-hero>img{width:100%;max-width:100%;max-height:none;aspect-ratio:auto;object-fit:contain}.ranking-hero-copy{padding:14px}.ranking-hero-copy h1{font-size:1.35rem}.ranking-scale-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.ranking-tabs{grid-template-columns:1fr}.ranking-list{grid-template-columns:1fr}.ranking-card{grid-template-columns:40px 58px minmax(0,1fr);padding:11px}.ranking-card>.channel-avatar{width:54px;height:54px;max-width:54px}.channel-summary h2{min-height:0}.latest-video{grid-template-columns:104px minmax(0,1fr)}.latest-video img{width:104px}.channel-detail{grid-template-columns:1fr}.search-form{grid-template-columns:1fr auto}}
@media(max-width:420px){main{padding:14px 10px 36px}.ranking-scale-filters a{padding:9px 5px;font-size:.78rem}.ranking-card{grid-template-columns:36px 50px minmax(0,1fr);gap:8px}.rank-number{width:34px;height:34px}.ranking-card>.channel-avatar{width:48px;height:48px;max-width:48px}.latest-video{grid-template-columns:88px minmax(0,1fr)}.latest-video img{width:88px}}

.sponsor-recruitment{width:100%;max-width:100%;margin:14px 0 8px!important;padding:16px 18px!important;overflow:hidden;border:1px solid var(--line)!important;border-left:4px solid var(--brand)!important;border-radius:3px!important;background:#fff!important}
.sponsor-recruitment h2{margin:0 0 4px;font-size:1.05rem;line-height:1.35}
.sponsor-recruitment p{margin:0;color:var(--muted);font-size:.9rem}
.linkoffer-sponsor{width:100%;max-width:100%;min-width:0;margin:8px 0 14px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.linkoffer-sponsor iframe{display:block;width:100%;max-width:100%;height:0;border:0;overflow:hidden}
@media(max-width:420px){.sponsor-recruitment{margin:10px 0 6px!important;padding:13px 14px!important}.sponsor-recruitment h2{font-size:1rem}.sponsor-recruitment p{font-size:.82rem}.linkoffer-sponsor{margin:6px 0 10px}}

/* Japanese YouTuber top 10 summaries */
.top10-section{margin:20px 0!important;padding:20px!important;border-radius:4px!important;overflow:hidden}
.top10-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px;border-bottom:2px solid #1d1d1d}
.top10-heading h2{margin:0 0 9px;font-size:1.3rem;letter-spacing:-.02em}
.top10-heading p{order:2;margin:0 0 10px;color:var(--brand);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.top10-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.top10-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.top10-card{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"rank rank" "avatar name" "avatar value";column-gap:12px;align-items:center;padding:13px;background:#fff;border:1px solid #ddd;color:var(--ink);text-decoration:none;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.top10-podium .top10-card{grid-template-columns:88px minmax(0,1fr);min-height:150px;padding:16px}
.top10-card.rank-1{border:2px solid var(--brand);background:linear-gradient(135deg,#fff 70%,#fff1f2)}
.top10-rank{grid-area:rank;margin-bottom:9px;font-weight:900;font-size:.92rem;color:#333}
.top10-podium .top10-rank{font-size:1.15rem}
.top10-card.rank-1 .top10-rank{color:var(--brand)}
.top10-card img,.top10-avatar{grid-area:avatar;width:58px;height:58px;border-radius:50%;object-fit:cover;border:1px solid #dedede}
.top10-podium .top10-card img,.top10-podium .top10-avatar{width:84px;height:84px}
.top10-name{grid-area:name;min-width:0;font-weight:800;line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.top10-value{grid-area:value;min-width:0;margin-top:4px;color:var(--brand);font-size:.83rem;font-weight:850;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){.top10-card:hover{transform:translateY(-2px);border-color:#aaa;box-shadow:0 5px 14px rgba(0,0,0,.06)}}
@media(max-width:760px){.top10-section{padding:14px!important}.top10-heading{display:block}.top10-heading h2{font-size:1.12rem}.top10-heading p{margin-bottom:5px}.top10-podium{grid-template-columns:1fr}.top10-podium .top10-card{grid-template-columns:68px minmax(0,1fr);min-height:0;padding:12px}.top10-podium .top10-card img,.top10-podium .top10-avatar{width:64px;height:64px}.top10-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.top10-card{grid-template-columns:48px minmax(0,1fr);column-gap:8px;padding:10px}.top10-card img,.top10-avatar{width:46px;height:46px}.top10-value{font-size:.76rem}}
@media(max-width:390px){.top10-section{margin:14px 0!important;padding:11px!important}.top10-grid{gap:7px}.top10-card{grid-template-columns:40px minmax(0,1fr);padding:8px 7px}.top10-card img,.top10-avatar{width:38px;height:38px}.top10-name{font-size:.82rem}.top10-value{font-size:.68rem}.top10-rank{font-size:.78rem}}

/* 2026-09-25 creator tools promo on ranking home */
.creator-tools-promo{
    margin:18px 0!important;
    padding:20px!important;
    background:#fff!important;
    border:1px solid var(--line)!important;
    border-radius:4px!important;
    overflow:hidden
}
.creator-tools-heading{
    margin:0 0 16px;
    padding:0 0 14px;
    border-bottom:2px solid #1d1d1d
}
.creator-tools-heading h2{
    margin:2px 0 7px;
    font-size:1.3rem;
    line-height:1.35;
    letter-spacing:-.02em
}
.creator-tools-eyebrow{
    margin:0 0 4px;
    color:var(--brand);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.12em
}
.creator-tools-heading .section-lead{
    margin:0;
    color:var(--ink);
    font-size:.92rem
}
.creator-tools-disclosure{
    margin:7px 0 0!important;
    color:var(--muted)!important;
    font-size:.78rem!important
}
.creator-tools-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
}
.creator-tool-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:18px;
    background:#fff;
    border:1px solid #ddd
}
.creator-tool-category{
    display:block;
    margin:0 0 6px;
    color:var(--brand);
    font-size:.78rem;
    font-weight:800
}
.creator-tool-card h3{
    margin:0 0 8px;
    color:var(--ink);
    font-size:1.08rem;
    line-height:1.4
}
.creator-tool-card>p{
    margin:0 0 12px;
    color:var(--muted);
    font-size:.9rem
}
.creator-tool-ad{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:260px;
    margin-top:auto;
    overflow:hidden;
    text-align:center
}
.creator-tool-ad a{
    display:inline-block;
    max-width:100%
}
.creator-tool-ad img:not([width="1"]){
    display:block;
    max-width:100%;
    height:auto;
    margin:0 auto
}
.creator-tool-ad>img[width="1"]{
    width:1px;
    height:1px
}
.creator-tool-more{
    align-self:flex-start;
    display:inline-block;
    margin-top:10px;
    color:#245c8a;
    font-size:.86rem;
    font-weight:700;
    text-decoration:none;
    border-bottom:1px solid currentColor
}
.creator-tool-more:hover{
    color:var(--brand)
}
.creator-tools-cta{
    margin:16px 0 0
}
.creator-tools-cta a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:48px;
    padding:12px 16px;
    border:1px solid var(--brand);
    background:var(--brand);
    color:#fff;
    text-decoration:none;
    font-weight:800;
    letter-spacing:.01em
}
.creator-tools-cta a:hover,
.creator-tools-cta a:focus-visible{
    background:#fff;
    color:var(--brand)
}
@media(max-width:760px){
    .creator-tools-promo{padding:14px!important}
    .creator-tools-heading h2{font-size:1.12rem}
    .creator-tools-grid{grid-template-columns:1fr}
    .creator-tool-card{padding:14px}
    .creator-tool-ad{min-height:0;padding:6px 0}
}
