/* bestpianosongs.com: "The Piano Bracket". Vintage tournament draw sheet: paper, black rules, cobalt, trophy yellow. Slab numerals. */
@font-face{font-family:"Alfa Slab One";src:url(/fonts/alfaslab.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Rubik";src:url(/fonts/rubik.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--paper:#F3EFE4;--paper2:#E7E0CE;--ink:#111;--ink2:#4A463E;--blue:#1E36C2;--blue2:#14248A;--sky:#C9D2FF;--yel:#FFCB2E;--yel2:#C99A00;--red:#D6402A;
--fd:"Alfa Slab One","Rockwell","Roboto Slab",Georgia,serif;--fb:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;--sh:4px 4px 0 var(--ink)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--fb);padding-bottom:98px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.hero :focus-visible,.ph-blue :focus-visible,.ph-dark :focus-visible,.sec.blue :focus-visible,.sec.dark :focus-visible,.pb :focus-visible,.hd :focus-visible{outline-color:var(--yel)}
button{font:inherit;color:inherit;cursor:pointer}
.w{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--yel);color:var(--ink);padding:8px 14px;font-weight:700;border:3px solid var(--ink)}
.skip:focus{left:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* header */
.hd{background:var(--paper);border-bottom:3px solid var(--ink)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 22px/1 var(--fd);letter-spacing:-.01em}
.brand .lg{width:38px;height:38px}
.brand b{font-weight:400;color:var(--blue)}
.nv{display:flex;gap:2px;flex-wrap:wrap}
.nv a{text-decoration:none;padding:7px 11px;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border:2px solid transparent}
.nv a:hover{border-color:var(--ink)}
.nv a[aria-current=page]{background:var(--ink);color:var(--paper)}
/* type */
.kicker{font:700 13px/1.3 var(--fb);letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:var(--ink2);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tix{display:inline-block;background:var(--yel);color:var(--ink);padding:5px 12px;border:2px dashed var(--ink);letter-spacing:.12em}
.h1{font:400 clamp(54px,9.4vw,138px)/.86 var(--fd);letter-spacing:-.02em;margin:0 0 18px;text-transform:uppercase}
.h1 span{display:block;color:var(--yel);-webkit-text-stroke:0}
.h1.sm{font-size:clamp(40px,6.4vw,84px);line-height:.92;text-transform:none}
.h2{font:400 clamp(32px,4.4vw,54px)/1 var(--fd);letter-spacing:-.01em;margin:0 0 14px}
.h1 em,.h2 em{font-style:normal;color:var(--blue)}
.hero .h1 em,.ph-blue em,.ph-dark em,.sec.blue em,.sec.dark em{color:var(--yel)}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:44ch;margin:0 0 22px}
.lede a{font-weight:600}
.sub{color:var(--ink2);max-width:64ch;margin:0 0 18px}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--ink);background:var(--yel);color:var(--ink);font:700 16px/1 var(--fb);letter-spacing:.04em;text-transform:uppercase;padding:14px 20px;text-decoration:none;box-shadow:var(--sh);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.sm{padding:10px 14px;font-size:14px;box-shadow:3px 3px 0 var(--ink)}
.btn.pc-on,.btn.now{background:var(--blue);color:#fff}
.btn.pick[aria-pressed=true]{background:var(--blue);color:#fff}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 0;align-items:center}
/* hero */
.hero{background:var(--blue);color:#fff;border-bottom:3px solid var(--ink);padding:46px 0 54px;position:relative;overflow:hidden;
 background-image:radial-gradient(rgba(255,255,255,.13) 1.4px,transparent 1.6px);background-size:14px 14px}
.hero .kicker{color:var(--sky)}
.hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center}
.tagline{font:400 clamp(21px,2.3vw,29px)/1.2 var(--fd);margin:0 0 16px}
.tagline em{font-style:normal;color:var(--yel)}
.hero .lede a{color:#fff}
.hero .btn.ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--ink)}
/* match of the day */
.mod{background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:16px 18px 14px;transform:rotate(.6deg)}
.mod-k{margin:0 0 12px;font:700 13px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;border-bottom:3px solid var(--ink);padding-bottom:10px}
.mod-g{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.vs{align-self:center;width:58px;height:58px;border-radius:50%;background:var(--yel);border:3px solid var(--ink);display:grid;place-items:center;font:400 22px/1 var(--fd);box-shadow:3px 3px 0 var(--ink)}
.tp{display:flex;flex-direction:column;gap:6px;min-width:0}
.tp img{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--ink)}
.tp.win img{outline:5px solid var(--yel);outline-offset:-8px}
.tp-seed{align-self:flex-start;background:var(--ink);color:var(--paper);font:700 12px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px}
.tp-t{font:400 clamp(18px,1.8vw,23px)/1.1 var(--fd);overflow-wrap:anywhere}
.tp-a{font-size:13px;color:var(--ink2)}
.tp-x{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.mod .btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.mod-f{margin:14px 0 0;font-size:14px;color:var(--ink2);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mod-f a{font-weight:700;color:var(--ink)}
.mod-done{grid-column:1/-1;text-align:center;padding:30px 0}
.mod-done p{font:400 26px/1.2 var(--fd);margin:0 0 16px}
/* stat bars */
.st{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px;font:600 11px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.st-b{height:10px;border:2px solid var(--ink);background:var(--paper);position:relative;overflow:hidden}
.st-b i{position:absolute;left:0;top:0;bottom:0;background:var(--blue)}
.st-b.q i{background:var(--yel)}
/* bands */
.sec{padding:78px 0}
.sec.paper2{background:var(--paper2);border-top:3px solid var(--ink)}
.sec.blue{background:var(--blue);color:#fff;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.sec.blue .kicker,.sec.blue .sub{color:var(--sky)}
.sec.dark{background:var(--ink);color:var(--paper)}
.sec.dark .kicker,.sec.dark .sub{color:#BDB6A6}
.sec.dark a{color:var(--yel)}
.sec-h{margin-bottom:30px;max-width:760px}
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.ph{padding:58px 0 44px;background:var(--paper2);border-bottom:3px solid var(--ink)}
.ph-blue{background:var(--blue);color:#fff;background-image:radial-gradient(rgba(255,255,255,.13) 1.4px,transparent 1.6px);background-size:14px 14px}
.ph-blue .kicker{color:var(--sky)}
.ph-dark{background:var(--ink);color:var(--paper)}
.ph-dark .kicker{color:#BDB6A6}
.ph-blue .btn.ghost,.ph-dark .btn.ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 #000}
/* scoreboard rows */
.rows{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.rw{display:flex;align-items:center;gap:8px;border-bottom:2px solid var(--ink)}
.rw-p{flex:1;min-width:0;display:grid;grid-template-columns:58px 48px minmax(0,1fr) 190px 46px;align-items:center;gap:14px;border:0;background:none;text-align:left;padding:10px 6px}
.rw-p:hover{background:rgba(30,54,194,.07)}
.rw-n{font:400 28px/1 var(--fd);text-align:center}
.rw-p img{width:48px;height:48px;border:2px solid var(--ink)}
.rw-tt{min-width:0}
.rw-t{display:block;font-weight:700;font-size:17px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-a{display:block;font-size:13px;color:var(--ink2);margin:0}
.rw-st{display:grid;gap:5px}
.rw-d{font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink2);text-align:right}
.rw-dl{flex:none;font:700 12px/1 var(--fb);letter-spacing:.08em;text-decoration:none;border:2px solid var(--ink);padding:7px 8px;margin-right:4px}
.rw-dl:hover{background:var(--yel)}
.rw.on .rw-p{background:var(--yel)}
.rw.on .rw-n{color:var(--blue)}
.rw-p.now .rw-n::after{content:" ▶";font-size:13px;vertical-align:middle}
.sec.paper2 .rw-p:hover{background:rgba(255,255,255,.4)}
/* chart cards */
.ccs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.cc{position:relative;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:20px 20px 18px;display:flex;flex-direction:column;gap:8px}
.cc::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--c,#1E36C2);border-bottom:3px solid var(--ink)}
.cc-k{margin-top:8px;font:700 12px/1.3 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.cc h3{font:400 27px/1.05 var(--fd);margin:0}
.cc h3 a{text-decoration:none}
.cc h3 a::after{content:"";position:absolute;inset:0}
.cc p{margin:0;font-size:15px;line-height:1.45}
.cc-i{display:flex;gap:6px;margin-top:6px}
.cc-i img{width:48px;height:48px;border:2px solid var(--ink)}
.cc-play{position:absolute;right:16px;bottom:18px;z-index:2;border:3px solid var(--ink);background:var(--yel);font:700 13px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;padding:9px 13px;box-shadow:3px 3px 0 var(--ink)}
.cc-play.pc-on{background:var(--blue);color:#fff}
.cc-sad{--c:#5D6E9E}.cc-happy{--c:#FFCB2E}.cc-calm{--c:#8FB9A8}.cc-upbeat{--c:#D6402A}.cc-beautiful{--c:#C9D2FF}.cc-study{--c:#B08A5A}
.ph.cc-sad,.ph.cc-happy,.ph.cc-calm,.ph.cc-upbeat,.ph.cc-beautiful,.ph.cc-study{background:var(--c);color:var(--ink)}
.ph.cc-sad{color:#fff}.ph.cc-sad .kicker{color:#E3E8F7}.ph.cc-sad .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.ph.cc-upbeat{background:#E8573F}
/* how */
.how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:3px solid var(--ink);counter-reset:h}
.how li{padding:22px 20px;border-right:3px solid var(--ink);counter-increment:h}
.how li:last-child{border-right:0}
.how li::before{content:counter(h);display:block;font:400 46px/1 var(--fd);color:var(--blue);margin-bottom:10px}
.how b{font:400 22px/1.1 var(--fd)}
.how p{margin:8px 0 0;font-size:15px;color:var(--ink2)}
/* credit + faq */
.credit{background:var(--paper);color:var(--ink);border:3px solid var(--ink);padding:20px;box-shadow:6px 6px 0 var(--yel)}
.credit-l{margin:0 0 8px;font:700 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.credit pre{white-space:pre-wrap;font:500 15px/1.5 ui-monospace,Menlo,Consolas,monospace;margin:0 0 14px;background:var(--paper2);padding:12px;border:2px solid var(--ink)}
.faq details{border-bottom:2px solid var(--ink)}
.faq details:first-child{border-top:3px solid var(--ink)}
.faq summary{cursor:pointer;font-weight:700;font-size:18px;padding:16px 34px 16px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font:400 26px var(--fd);color:var(--blue)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px;color:var(--ink2)}
/* top ten features */
.feats{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.ft1{display:grid;grid-template-columns:90px 150px minmax(0,1fr);gap:24px;align-items:start;border:3px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:20px}
.ft1.on{box-shadow:6px 6px 0 var(--blue)}
.ft1-n{font:400 82px/.8 var(--fd);color:var(--blue)}
.ft1 img{border:3px solid var(--ink)}
.ft1-t{font:400 30px/1.05 var(--fd);margin:0 0 4px}
.ft1-b p{margin:0 0 10px}
.ft1-s{display:grid;gap:6px;max-width:340px;margin:12px 0 8px}
/* contender cards */
.tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:10px}
.seg{display:flex;flex-wrap:wrap;border:3px solid var(--ink);background:var(--paper)}
.seg button{border:0;border-right:2px solid var(--ink);background:none;padding:9px 13px;font-weight:600;font-size:14px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.count{font-weight:700;margin:16px 0 0}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px}
.cd{border:3px solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink);display:flex;flex-direction:column}
.cd[hidden]{display:none}
.cd.on{box-shadow:5px 5px 0 var(--blue);background:#FFF6D6}
.cd-p{border:0;background:none;text-align:left;padding:10px 10px 6px;display:flex;flex-direction:column;gap:5px;flex:1}
.cd-img{position:relative;display:block;border:2px solid var(--ink)}
.cd-img img{width:100%;aspect-ratio:1;object-fit:cover}
.cd-n{position:absolute;left:-2px;top:-2px;background:var(--yel);border:2px solid var(--ink);font:400 20px/1 var(--fd);padding:6px 8px}
.cd-p.now .cd-n{background:var(--blue);color:#fff}
.cd-t{font:400 19px/1.1 var(--fd);margin-top:6px}
.cd-a{font-size:13px;color:var(--ink2)}
.cd-st{display:grid;gap:5px;margin-top:6px}
.cd-dl{border-top:2px solid var(--ink);text-align:center;font:700 12px/1 var(--fb);letter-spacing:.08em;text-decoration:none;padding:10px}
.cd-dl:hover{background:var(--yel)}
/* bracket */
.bk-sec{padding-top:44px}
.bk-c{font-weight:700;color:#fff}
.rtabs{display:none}
.bk{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px;align-items:stretch}
.bk-draw{grid-column:1/-1}
.bk-col{display:flex;flex-direction:column;justify-content:space-around;gap:14px}
.mt{border:3px solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink);position:relative}
.bk-col:not(.r3) .mt::after{content:"";position:absolute;right:-31px;top:50%;width:28px;border-top:3px solid var(--ink)}
.bk-col.r3 .mt{border-width:4px;box-shadow:7px 7px 0 var(--yel),7px 7px 0 3px var(--ink)}
.mt-h{margin:0;padding:5px 9px;font:700 11px/1.2 var(--fb);letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--paper)}
.en{display:grid;grid-template-columns:24px 40px minmax(0,1fr) 30px auto;gap:8px;align-items:center;padding:6px 7px;border-top:2px solid var(--ink)}
.mt-h+.en{border-top:0}
.en-s{font:400 15px/1 var(--fd);text-align:center}
.en img{width:40px;height:40px;border:2px solid var(--ink)}
.en-tt{min-width:0}
.en-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:700;font-size:14px;line-height:1.2;overflow:hidden;overflow-wrap:break-word}
.en-a{display:block;font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en-l{width:30px;height:30px;border:2px solid var(--ink);background:var(--paper);position:relative;padding:0}
.en-l::before{content:"";position:absolute;left:10px;top:7px;border-left:10px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.en-l.now{background:var(--blue)}
.en-l.now::before{left:8px;top:7px;width:4px;height:12px;border:0;background:#fff;box-shadow:6px 0 0 #fff}
.en-p{border:2px solid var(--ink);background:var(--yel);font:700 11px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;padding:8px 8px;min-width:50px}
@media (min-width:761px){.bk-col.r1 .en img,.bk-col.r2 .en img,.bk-col.r3 .en img{display:none}.bk-col.r1 .en,.bk-col.r2 .en,.bk-col.r3 .en{grid-template-columns:22px minmax(0,1fr) 30px auto}.bk-col.r2 .en-a,.bk-col.r3 .en-a{display:none}}
.en-p[aria-pressed=true]{background:var(--blue);color:#fff}
.en.win{background:#FFF1BF}
.en.out{opacity:.5}
.en.out img{filter:grayscale(1)}
.en.on .en-t{color:var(--blue)}
.en.tbd{grid-template-columns:24px minmax(0,1fr);color:var(--ink2);min-height:56px}
.en.tbd .en-t{font-weight:500;font-style:italic}
.bk-draw{list-style:none;margin:0;padding:0;display:none}
.champ{margin-top:44px;border:4px solid var(--ink);background:var(--yel);box-shadow:10px 10px 0 var(--ink);padding:26px}
.champ .kicker{color:var(--ink)}
.champ-g{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:center}
.champ img{border:4px solid var(--ink)}
.champ .sub{color:var(--ink)}
.champ .btn.ghost{background:var(--paper)}
/* prose */
.prose{max-width:780px}
.prose h2{font:400 30px/1.1 var(--fd);margin:38px 0 10px}
.prose h2:first-child{margin-top:0}
.tbl{width:100%;border-collapse:collapse;margin:14px 0 26px;font-size:15px;border:3px solid var(--ink)}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:2px solid var(--ink);vertical-align:top}
.tbl th{background:var(--ink);color:var(--paper);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
/* footer */
.ft{background:var(--ink);color:var(--paper);padding:62px 0 30px;border-top:3px solid var(--ink)}
.ft-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.ft-big{font:400 32px/1.05 var(--fd);margin:0 0 10px}
.ft-big span{color:var(--yel)}
.ft-s{color:#BDB6A6;font-size:14px;margin:0}
.ft h2{font:700 12px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:#BDB6A6;margin:6px 0 14px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.ft a{text-decoration:none}
.ft a:hover{text-decoration:underline;text-decoration-color:var(--yel)}
.fine{font-size:13px;color:#BDB6A6;margin-top:40px;border-top:1px solid #3A3833;padding-top:20px}
.fine a{color:var(--paper)}
/* player */
.pb{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);color:var(--paper);border-top:4px solid var(--yel);padding-bottom:env(safe-area-inset-bottom)}
.pb-in{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px}
.pb-rank{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--yel);color:var(--ink);min-width:62px;height:52px;padding:0 6px;border:2px solid var(--paper)}
.pb-rank small{font:700 9px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase}
.pb-rank b{font:400 22px/1 var(--fd);font-weight:400}
.pb-pp{flex:none;width:52px;height:52px;border:2px solid var(--paper);background:var(--blue);display:grid;place-items:center;padding:0}
.pb-pp svg{width:20px;height:20px;fill:#fff}
.pb-c{width:44px;height:44px;border:2px solid var(--paper);flex:none}
.pb-m{flex:1;min-width:0}
.pb-now{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.pb-now b{font-weight:700}
.pb-s{color:#BDB6A6;font-size:13px}
.pb-bar{display:flex;align-items:center;gap:10px;font-size:12px;color:#BDB6A6;font-variant-numeric:tabular-nums;position:relative;margin-top:4px}
.pb-line{flex:1;height:6px;background:#3A3833;position:relative;overflow:hidden}
.pb-line i{position:absolute;inset:0;background:var(--yel);transform-origin:left;transform:scaleX(0)}
.pb-seek{position:absolute;left:38px;right:38px;top:50%;transform:translateY(-50%);width:calc(100% - 76px);margin:0;opacity:0;height:22px;cursor:pointer}
.pb-b{flex:none;width:40px;height:40px;border:2px solid #5A574F;background:none;display:grid;place-items:center;color:var(--paper);text-decoration:none;padding:0}
.pb-b svg{width:14px;height:14px;fill:currentColor}
.pb-b:hover{border-color:var(--yel)}
.pb-b.dl{width:auto;padding:0 10px;font:700 12px/1 var(--fb);letter-spacing:.08em}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:var(--yel);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:11px 18px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.nf{min-height:52vh;display:flex;align-items:center}
/* responsive */
@media (max-width:1080px){.bk{grid-template-columns:repeat(2,minmax(0,1fr))}.bk-col:nth-child(2n) .mt::after,.bk-col.r1 .mt::after{display:none}.bk-col:not(.r3) .mt::after{display:none}}
@media (max-width:980px){.hero-g,.two{grid-template-columns:1fr}.mod{transform:none}.how{grid-template-columns:1fr 1fr}.how li:nth-child(2){border-right:0}.how li:nth-child(-n+2){border-bottom:3px solid var(--ink)}
 .ft-g{grid-template-columns:1fr 1fr}.rw-p{grid-template-columns:50px 48px minmax(0,1fr) 150px 44px}}
@media (max-width:760px){
 .rtabs{display:flex;border:3px solid var(--ink);margin-bottom:18px;background:var(--paper);overflow-x:auto}
 .rtabs button{flex:1;border:0;border-right:2px solid var(--ink);background:none;padding:11px 8px;font-weight:700;font-size:13px;white-space:nowrap}
 .rtabs button:last-child{border-right:0}
 .rtabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
 .bk{display:block}.bk-col{display:none}.bk-col.on{display:flex}
 .champ-g{grid-template-columns:1fr}.champ img{max-width:200px}
 .ft1{grid-template-columns:1fr;gap:14px}.ft1-n{font-size:56px}.ft1 img{max-width:160px}
 .rw-p{grid-template-columns:38px 44px minmax(0,1fr) 42px;gap:10px}.rw-st{display:none}.rw-t{white-space:normal;font-size:16px}.rw-n{font-size:21px}.rw-p img{width:44px;height:44px}
 .nv{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:2px solid var(--ink);margin:4px 0 0}.nv a{white-space:nowrap;padding:0 4px;min-height:40px;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.02em;border:0;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}.nv a:nth-child(4n){border-right:0}.nv a:nth-child(n+5){border-bottom:0}.nv a:last-child{grid-column:span 2;border-right:0}
 .hd-in{min-height:0}.sec{padding:56px 0}.how{grid-template-columns:1fr}.how li{border-right:0!important;border-bottom:3px solid var(--ink)}.how li:last-child{border-bottom:0}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.cd-t{font-size:16px}.st{grid-template-columns:58px 1fr;font-size:10px}
 .pb-in{padding:8px 12px;gap:8px}.pb-c,.pb-b[data-pc=prev]{display:none}.pb-rank{min-width:50px;height:46px}.pb-rank b{font-size:18px}.pb-pp{width:46px;height:46px}.pb-b{width:36px;height:36px}
 .mod{padding:12px;box-shadow:6px 6px 0 var(--ink)}.mod-g{gap:6px}.vs{width:42px;height:42px;font-size:16px}.tp-x .btn.sm{padding:8px 10px;font-size:12px}
 .ft-g{grid-template-columns:1fr}.toast{bottom:84px}}
@media (max-width:420px){.tp .st{grid-template-columns:1fr;gap:3px}.tp-x{flex-direction:column}.tp-x .btn{justify-content:center}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.two>*{min-width:0}.credit pre{overflow-wrap:anywhere}
@media(max-width:400px){.nv a{font-size:11.5px;letter-spacing:0}}