/* Kano Idle sites: one component library, three themes (data-theme on ). */ :root{ --bg:#12100C;--bg2:#1A1712;--surf:#211D16;--surf2:#2B251C;--line:#38301F;--line2:#4A3F2A; --tx:#F7F3EA;--tx2:#BFB4A0;--tx3:#968B76;--acc:#F0A93C;--acc2:#FFC978;--acc3:#C87A3C;--good:#6FA85B;--warn:#E0703C; --onacc:#12100C;--r:14px;--rs:10px;--mx:1160px; --f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } [data-theme="monster"]{--bg:#100D1B;--bg2:#171329;--surf:#1D1833;--surf2:#27203F;--line:#33295A;--line2:#45387A;--tx:#F3EFFF;--tx2:#BDB3D9;--tx3:#9086B0;--acc:#A98BFF;--acc2:#C9B5FF;--acc3:#6FD38A;--good:#6FD38A;--onacc:#100D1B} [data-theme="sports"]{--bg:#0B1220;--bg2:#101A2E;--surf:#152238;--surf2:#1C2C48;--line:#243A5E;--line2:#2F4B78;--tx:#F2F6FC;--tx2:#B6C3D9;--tx3:#8494B0;--acc:#F5C542;--acc2:#FFDB7A;--acc3:#3E7BFF;--good:#5FCF8C;--onacc:#0B1220} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--tx);font-family:var(--f);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-999px;top:8px;background:var(--acc);color:var(--onacc);padding:8px 12px;border-radius:8px;z-index:1000;font-weight:700} .skip:focus{left:8px} .wrap{max-width:var(--mx);margin:0 auto;padding:0 22px} .eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--acc);margin-bottom:10px} h1{font-size:clamp(34px,5.2vw,58px);line-height:1.04;letter-spacing:-.028em;font-weight:850} .hero h1.h1-long{font-size:clamp(30px,3.9vw,46px);line-height:1.08} h2{font-size:clamp(23px,3vw,33px);line-height:1.16;letter-spacing:-.02em;font-weight:800} h3{font-size:19px;line-height:1.3;font-weight:750;letter-spacing:-.01em} h4{font-size:15px;font-weight:750} .lede{font-size:18px;color:var(--tx2);max-width:62ch;margin-top:12px} .small{font-size:13.5px;color:var(--tx3)} section{padding:66px 0} .tight{padding:46px 0} .mono{font-family:var(--mono)} .card{background:var(--surf);border:1px solid var(--line);border-radius:var(--rs);padding:20px} /* Buttons and store CTAs */ .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:11px;font-weight:750;font-size:15px;border:1px solid transparent;cursor:pointer;font-family:var(--f);transition:.15s;white-space:nowrap;line-height:1.2} .btn-pri{background:var(--acc);color:var(--onacc)} .btn-pri:hover{background:var(--acc2)} .btn-gho{background:var(--surf2);color:var(--tx);border-color:var(--line2)} .btn-gho:hover{border-color:var(--tx3)} .btn-sm{padding:9px 15px;font-size:13.5px;border-radius:9px} .btn-lg{padding:15px 26px;font-size:16.5px;border-radius:13px} .cta{display:flex;flex-direction:column;gap:14px;margin-top:24px} .cta-hero{align-items:flex-start} .cta-card{margin-top:14px} .cta-card .btn{width:100%;justify-content:center} .badges{display:flex;gap:10px;flex-wrap:wrap} .badge img{height:42px;width:auto;display:block} .badge:hover img{opacity:.85} .cta-note{font-size:12.5px;color:var(--tx3);margin-top:-4px} .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:var(--surf2);border:1px solid var(--line2);font-size:12px;font-weight:650;color:var(--tx2);line-height:1.3} .pill.own{background:color-mix(in srgb,var(--acc) 16%,transparent);border-color:color-mix(in srgb,var(--acc) 45%,transparent);color:var(--acc2)} /* Nav */ .nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .nav-in{max-width:var(--mx);margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;gap:28px} .logo{display:flex;align-items:center;gap:10px;font-weight:850;font-size:16px;letter-spacing:-.02em;white-space:nowrap} .logo-mk{width:30px;height:30px;border-radius:8px} .nlinks{display:flex;gap:22px;font-size:14.5px;font-weight:600;color:var(--tx2)} .nlinks a:hover,.nlinks a[aria-current]{color:var(--tx)} .ncta{margin-left:auto} .nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line2);border-radius:8px;width:44px;height:44px;padding:12px 10px;flex-direction:column;justify-content:space-between;cursor:pointer} .nav-toggle span{display:block;height:2px;background:var(--tx);border-radius:2px} .mnav{display:none;flex-direction:column;border-top:1px solid var(--line);background:var(--bg2)} .mnav a{padding:14px 22px;border-bottom:1px solid var(--line);font-weight:650} .mnav:not([hidden]){display:flex} /* Hero */ .hero{position:relative;padding:64px 0 52px;overflow:hidden;isolation:isolate} .hero::before{content:"";position:absolute;inset:0;background-image:var(--hero-bg);background-size:cover;background-position:center;opacity:.28;z-index:-2;filter:saturate(1.1)} .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent) 0%,var(--bg) 92%),radial-gradient(760px 420px at 78% -8%,color-mix(in srgb,var(--acc) 28%,transparent),transparent 62%)} .hgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center} .hero .lede{max-width:56ch} .hfacts{display:flex;flex-wrap:wrap;gap:4px 10px;list-style:none;margin:16px 0 0;padding:0;font-size:14px;font-weight:750;color:var(--acc)} .hfacts li+li::before{content:"·";margin-right:10px;color:var(--tx3)} .hexpect{margin-top:14px;font-size:14.5px;color:var(--tx2);max-width:56ch;border-left:2px solid var(--line2);padding-left:12px} .trust{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap;list-style:none} .trust li b{display:block;font-size:20px;font-weight:850;line-height:1.1} .trust li span{font-size:12.5px;color:var(--tx3);font-weight:650} .trust .star{color:var(--acc);font-size:16px;margin-left:3px;vertical-align:2px} .hart{position:relative;display:grid;place-items:center;min-height:320px} .hlogo{width:min(100%,420px);filter:drop-shadow(0 24px 40px rgba(0,0,0,.55))} .hchars{position:absolute;inset:auto 0 -10px 0;display:flex;justify-content:center;gap:0;pointer-events:none} .hc{height:150px;width:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))} .hc1{transform:translate(28px,10px) rotate(-6deg)}.hc2{transform:translateY(-6px)}.hc3{transform:translate(-28px,10px) rotate(6deg)}.hc4{display:none} /* Screenshots */ .shots{padding-top:8px} .shot-row{display:grid;gap:16px} /* Portrait phone captures (720x1600 from the real build, 2026-09-11). Contained, never cropped: .shot img is width:100% with intrinsic height, so the full screen is visible. The row is capped so three 9:20 frames do not each become 800px tall on a wide screen. */ .shot-port{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px;margin-inline:auto} .shot-port.shots-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px} .shot-port.shots-1{grid-template-columns:minmax(0,1fr);max-width:280px} .shot-land{grid-template-columns:repeat(3,1fr)} .shot{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35)} .shot img{width:100%} .shot-port .shot{border-radius:26px;border-width:6px;border-color:var(--surf2)} .shot figcaption{font-size:13px;color:var(--tx3);padding:10px 14px;border-top:1px solid var(--line)} /* A single capture sitting inside prose: a step image in a guide, or a wide illustration. */ .shot-step{max-width:280px;margin:20px 0 24px;border-radius:26px;border-width:6px;border-color:var(--surf2)} .shot-wide{max-width:100%;margin:24px 0} /* Guide sections sit inside .abody: the global section padding (66px) stacked on the h2 margin left large gaps around each step (live audit 2026-09-11, item 7). */ .guide .abody section{padding:6px 0 0} /* Full-size view for gameplay captures (2026-09-12). The link works without JS (opens the image); site.js turns it into an in-page lightbox. */ .shot-zoom{display:block;position:relative;color:inherit} .shot-zoom::after{content:"Tap to enlarge";position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 8px;border-radius:99px;background:rgba(0,0,0,.62);color:#fff;pointer-events:none} @media (hover:hover){.shot-zoom::after{content:"Click to enlarge"}} .shot-zoom:focus-visible{outline:2px solid var(--acc);outline-offset:-3px} .lb{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 16px calc(16px + env(safe-area-inset-bottom))} .lb img{max-width:min(96vw,1280px);max-height:84vh;width:auto;height:auto;object-fit:contain;border-radius:12px;background:var(--surf)} .lb-x{position:absolute;top:10px;right:12px;background:rgba(0,0,0,.5);border:1px solid var(--line2);color:#fff;font-size:28px;line-height:1;cursor:pointer;width:44px;height:44px;border-radius:10px} .lb-x:hover{background:var(--surf2)} .lb-cap{text-align:center;font-size:13px;color:#fff;max-width:60ch;margin:0} body.lb-open{overflow:hidden} body.lb-open .sticky{visibility:hidden} /* Sticky install bar: keep the end of the page and any focused link above the bar. */ html.has-sticky{scroll-padding-bottom:88px} body.has-sticky main{padding-bottom:76px} /* Artwork sequence (topic.njk sec.art, 2026-09-12): same-scale tiles so growth is not exaggerated */ .art-row-wrap{margin:22px 0 28px} .art-h{font-size:17px;margin:0 0 12px} .art-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.art-row.art-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}.art-row.art-1{grid-template-columns:minmax(0,1fr);max-width:360px} .art-tile{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column} .art-tile img{width:100%;height:auto;display:block;background:var(--surf2)} .art-label{font-size:13px;color:var(--tx2);padding:9px 12px;border-top:1px solid var(--line)} .art-row-wrap figcaption{font-size:13px;color:var(--tx3);margin-top:10px} @media (max-width:720px){.art-row{grid-template-columns:minmax(0,1fr);max-width:320px;margin-inline:auto}} @media (max-width:720px){.shot-step{max-width:min(62vw,240px);margin-inline:auto}} .shot-port .shot figcaption{display:block} /* Trailer (click-to-play facade; iframe injected by site.js) */ .trailer{padding:8px 0 10px} .yt-video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000} .yt-poster{border:0;padding:0;background:none;cursor:pointer;width:100%;height:100%;text-align:left} .yt.playing .yt-poster{display:none} .yt{position:relative;max-width:880px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.35)} .yt-poster{display:block;position:absolute;inset:0} .yt-poster img{width:100%;height:100%;object-fit:cover;transition:transform .35s} .yt-poster:hover img{transform:scale(1.03)} .yt-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45))} .yt-btn{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--acc);color:var(--onacc);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:.15s;z-index:1} .yt-btn svg{margin-left:4px} .yt-poster:hover .yt-btn{background:var(--acc2);transform:scale(1.06)} .yt-len{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700;padding:3px 7px;border-radius:6px;z-index:1} .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Player reviews */ .rev{background:var(--surf);border:1px solid var(--line);border-radius:var(--rs);padding:22px;display:flex;flex-direction:column;gap:10px} .rev .stars{color:var(--acc);letter-spacing:2px;font-size:15px;line-height:1} .rev blockquote{font-size:15.5px;line-height:1.55;color:var(--tx);flex:1} .rev blockquote::before{content:"\201C";color:var(--acc);font-weight:800;margin-right:2px} .rev blockquote::after{content:"\201D";color:var(--acc);font-weight:800;margin-left:2px} .rev figcaption{font-size:12.5px;color:var(--tx3);font-weight:650} .rev-all{font-size:14px;font-weight:700;color:var(--acc2);white-space:nowrap} .rev-all:hover{color:var(--acc)} /* Features */ .shead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;gap:22px;flex-wrap:wrap} .shead p{color:var(--tx2);margin-top:8px;max-width:64ch} .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .fc{background:var(--surf);border:1px solid var(--line);border-radius:var(--rs);padding:22px} .fc img{height:150px;width:auto;margin:0 auto 14px} .fc h3{font-size:17px;margin-bottom:6px} .fc p{font-size:14.5px;color:var(--tx2)} .c3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .cc{background:var(--surf);border:1px solid var(--line);border-radius:var(--rs);padding:21px;transition:.16s;display:block} .cc:hover{border-color:var(--acc);background:var(--surf2)} .cc .kw{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);font-weight:750;margin-bottom:8px;display:block} .cc h3{font-size:17px;margin-bottom:6px} .cc p{font-size:14px;color:var(--tx2)} /* Article grid / body */ .agrid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:44px;align-items:start} .abody{min-width:0} .abody h2{margin:40px 0 14px} .abody h3{margin:26px 0 8px} .abody p,.abody li{color:color-mix(in srgb,var(--tx) 88%,var(--tx2));font-size:16.5px;line-height:1.72} .abody p{margin-bottom:14px;max-width:72ch} .abody ul,.abody ol{margin:0 0 16px 22px} .abody li{margin-bottom:6px} .abody a:not(.btn){color:var(--acc2);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 45%,transparent);text-underline-offset:3px} .abody a:not(.btn):hover{text-decoration-color:var(--acc)} .abody blockquote{border-left:3px solid var(--acc3);padding:10px 16px;background:var(--surf);border-radius:0 8px 8px 0;margin:16px 0;color:var(--tx2)} .abody table{width:100%;border-collapse:collapse;font-size:14.5px;margin:12px 0 18px} .abody th,.abody td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top} .abody th{color:var(--tx3);font-size:12px;letter-spacing:.08em;text-transform:uppercase} .tscroll{overflow-x:auto;max-width:100%} .cmp tr.own td{background:color-mix(in srgb,var(--acc) 7%,transparent)} .hlink{opacity:0;margin-left:8px;font-weight:400;color:var(--tx3);text-decoration:none!important} h2:hover .hlink,h3:hover .hlink,.hlink:focus-visible{opacity:1} .abody h2,.abody h3,.quick,.method,#outro,#comparison{scroll-margin-top:90px} .ahead{padding:34px 0 10px;max-width:820px} .ahead .lede{max-width:70ch} .byline{margin-top:14px;max-width:80ch} .byline a{color:var(--acc2)} .crumb{font-size:13px;color:var(--tx3);margin-top:20px;font-weight:600;display:flex;flex-wrap:wrap;gap:0} .crumb span{opacity:.6;margin:0 7px} .crumb span[aria-current]{opacity:1;color:var(--tx2);margin:0} .crumb a:hover{color:var(--tx2)} .method{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:26px 0} .method h2{margin-top:0;font-size:20px} .method p,.method li{font-size:15px} .quick-ol{margin:0 0 10px 22px} .quick-ol li{margin-bottom:6px} .quick-ol a{color:var(--tx)!important;font-weight:650;text-decoration:none!important} .quick-ol a:hover{color:var(--acc2)!important} /* Ranked entry */ .entry{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin:22px 0;display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;scroll-margin-top:90px} .entry.own{border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 7%,transparent),transparent 60%),var(--surf)} .eart{width:72px;height:72px;border-radius:16px;background:var(--surf2);display:grid;place-items:center;overflow:hidden;border:1px solid var(--line2)} .eart img{width:72px;height:72px;object-fit:cover} .eart .mono{font-weight:800;font-size:22px;color:var(--tx3);letter-spacing:-.04em} .eh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px} .eh h3{font-size:20px;margin:0;overflow-wrap:anywhere} .rank{font-size:12.5px;font-weight:850;color:var(--acc);font-family:var(--mono)} .emeta{margin-bottom:8px!important} .etag{font-weight:650;color:var(--tx)!important;margin-bottom:8px!important} .entry p{font-size:15.5px;max-width:none;margin-bottom:10px} .bw{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0} .bw div{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:11px 13px} .bw b{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:4px} .bw p{font-size:14.5px;margin:0;color:var(--tx2)} .verdict{background:var(--surf2);border-left:3px solid var(--acc3);padding:12px 15px;border-radius:0 8px 8px 0;font-size:15px;color:var(--tx2)} .verdict b{color:var(--tx)} .elinks{margin:12px 0 0!important} .elinks a:not(.btn){color:var(--acc2)} /* Aside */ .aside{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px} .toc h4{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin-bottom:10px;font-weight:800} .toc a{display:block;padding:6px 0 6px 12px;font-size:14px;color:var(--tx2);border-left:2px solid var(--line);line-height:1.35} .toc a:hover,.toc a.on{color:var(--acc);border-color:var(--acc)} .install-card{text-align:center} .install-card img{margin:0 auto 10px;border-radius:16px} .install-card h3{font-size:17px} .ilist{list-style:none} .ilist li{border-bottom:1px solid var(--line);padding:9px 0;font-size:14.5px;font-weight:600} .ilist li:last-child{border:0} .ilist a:hover{color:var(--acc2)} /* FAQ */ .faq-sec{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line);padding:16px 0} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start} .faq summary h3,.faq summary .faq-q{font-size:17px;font-weight:700;margin:0} .faq summary .faq-q{display:block} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--acc);font-size:24px;font-weight:300;line-height:1;flex:none} .faq details[open] summary::after{content:"−"} .faq-a{margin-top:10px;color:var(--tx2);font-size:15.5px;max-width:78ch} .faq-a p{margin-bottom:10px} .faq-a a{color:var(--acc2);text-decoration:underline;text-underline-offset:3px} .faq-group{margin-bottom:30px} .contact-card{margin-top:30px} .contact-card h2{margin-top:0;font-size:22px} .contact-card a{color:var(--acc2)} /* Characters strip */ .char-row{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap} .charc{flex:1 1 140px;background:var(--surf);border:1px solid var(--line);border-radius:var(--rs);padding:16px 12px 10px;text-align:center} .charc img{height:160px;width:auto;margin:0 auto} .charc figcaption{font-size:13px;color:var(--tx3);margin-top:8px;font-weight:650} /* Name and bio are

(block by default) so the line break never depends on this file arriving. */ .charc .char-name{color:var(--tx2);font-weight:750} .charc .char-bio{font-size:12px;font-weight:450;line-height:1.4;margin-top:3px;color:var(--tx3)} /* Final CTA */ .final{background:radial-gradient(600px 300px at 50% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%)} .final-in{text-align:center;display:flex;flex-direction:column;align-items:center} .final-in img{border-radius:22px;margin-bottom:16px;box-shadow:0 18px 40px rgba(0,0,0,.45)} .final-in .lede{margin:8px auto 0} .final .cta{align-items:center} /* Footer */ .foot{border-top:1px solid var(--line);padding:44px 0 90px;background:var(--bg2)} .more-kano{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:28px} .more-kano .eyebrow{margin:0} .more-kano ul{display:flex;gap:16px;list-style:none;flex-wrap:wrap} .more-kano a{font-weight:650;color:var(--tx2)} .more-kano a:hover{color:var(--acc2)} .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px} .foot-brand img{opacity:.9} .foot-partner{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:12.5px;color:var(--tx3)} .foot-brand .small{margin-top:10px;max-width:46ch} .foot-brand a{color:var(--tx2)} .foot-links h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin-bottom:12px} .foot-links a{display:block;font-size:14.5px;color:var(--tx2);padding:5px 0} .foot-links a:hover{color:var(--tx)} .foot-legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--tx3)} .foot-legal a{color:var(--tx2)} .foot-legal .small{flex-basis:100%;font-size:12px} /* Sticky install bar (mobile only) */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg2) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line2);box-shadow:0 -10px 30px rgba(0,0,0,.35);transform:translateY(110%);transition:transform .25s} .sticky img{border-radius:10px} .sticky-txt{display:flex;flex-direction:column;min-width:0;flex:1} .sticky-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sticky-txt span{font-size:12px;color:var(--tx3)} .sticky{visibility:hidden} .sticky.show{transform:none;visibility:visible} /* Responsive */ /* Theme landing (layouts/topic.njk, 2026-09-07): compact compared grid + notes */ .cmp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:6px} .entry.compact{margin:0;padding:20px;grid-template-columns:56px minmax(0,1fr);gap:16px} .entry.compact .eart,.entry.compact .eart img{width:56px;height:56px} .entry.compact .eh h3{font-size:18px} .entry.compact p{font-size:14.5px;margin-bottom:8px} .entry.compact .elinks{margin-top:6px} .method-note{margin-top:18px;color:var(--tx3);max-width:none} .topic .abody .crumb{margin:0 0 18px} .topic-hero .hlogo{width:min(100%,360px)} @media (max-width:820px){.cmp-grid{grid-template-columns:1fr}} /* Mobile jump menu under the article answer. Desktop keeps the sticky aside .toc instead; exactly one of the two is visible at any width (audit 2026-09-10 P1-06). */ .toc-m{display:none} .toc-m summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--surf);border:1px solid var(--line);border-radius:var(--rs);font-weight:750;font-size:15px} .toc-m summary::-webkit-details-marker{display:none} .toc-m summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg);margin-right:4px;flex:0 0 auto} .toc-m[open] summary::after{transform:rotate(-135deg)} .toc-m-n{margin-left:auto;font-size:12.5px;font-weight:650;color:var(--tx3)} .toc-m nav{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--rs) var(--rs);padding:6px 14px 12px} .toc-m nav a{display:block;padding:8px 0;font-size:15px;color:var(--tx2);border-bottom:1px solid var(--line)} .toc-m nav a:last-child{border-bottom:0} @media (max-width:980px){ .toc-m{display:block;margin-top:20px} .article .aside .toc{display:none} .hgrid{grid-template-columns:1fr;gap:18px} .hart{order:-1;min-height:0} .hlogo{width:min(46%,220px)} .hlogo-type img{width:96px;height:96px;border-radius:22px} .hchars{display:none} .feat,.c3{grid-template-columns:1fr 1fr} .agrid{grid-template-columns:minmax(0,1fr)} .aside{position:static} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:720px){ .nlinks,.ncta{display:none} .nav-toggle{display:flex} .feat,.c3,.bw{grid-template-columns:1fr} .shot-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .shot-row .shot{flex:0 0 auto;scroll-snap-align:start} .shot-port .shot{width:min(62vw,240px)} .shot-land .shot{width:min(86vw,360px)} .shot-port .shot figcaption{display:block} .entry{grid-template-columns:minmax(0,1fr);gap:12px} .foot-grid{grid-template-columns:1fr} section{padding:48px 0}.tight{padding:36px 0} .sticky{display:flex} .yt-btn{width:60px;height:60px;margin:-30px 0 0 -30px} .trust{gap:14px 18px;margin-top:18px} .trust li b{font-size:17px} .hero{padding:22px 0 34px} .hero .lede{font-size:16.5px} .cta{margin-top:18px} } /* --- Per-theme accents ----------------------------------------------------- Small, additive brand treatment built only from existing design tokens and type. No new artwork, no placeholder graphics, no emoji. Each rule degrades to the shared component if the theme attribute is missing. */ /* Sports: the trust row reads as a scoreboard strip. */ [data-theme="sports"] .trust{gap:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--rs);overflow:hidden;background:var(--surf)} [data-theme="sports"] .trust li{padding:11px 14px;border-right:1px solid var(--line);text-align:center} [data-theme="sports"] .trust li:last-child{border-right:0} [data-theme="sports"] .trust li b{font-variant-numeric:tabular-nums;letter-spacing:.02em} [data-theme="sports"] .shead .eyebrow,[data-theme="sports"] .ahead .eyebrow{border-left:3px solid var(--acc);padding-left:9px} /* Distiller: a copper rule across the top of each card, like a barrel band. */ [data-theme="distiller"] .cc{border-top:2px solid var(--acc)} /* Monster: softer, cozier corners. */ [data-theme="monster"] .cc,[data-theme="monster"] .card{border-radius:calc(var(--rs) + 6px)} @media (max-width:720px){ [data-theme="sports"] .trust{grid-template-columns:repeat(2,1fr)} [data-theme="sports"] .trust li:nth-child(2n){border-right:0} [data-theme="sports"] .trust li:nth-child(-n+2){border-bottom:1px solid var(--line)} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sticky{transition:none}} @media print{.nav,.sticky,.aside,.final,.foot .more-kano{display:none}} /* --- 2026-09-08 audit additions ----------------------------------------- */ /* Typographic hero brand (used while a wordmark is stale: sites..logo_stale) */ .hlogo-type{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} .hlogo-type img{width:200px;height:200px;border-radius:44px;box-shadow:0 24px 48px rgba(0,0,0,.55)} .hlogo-type span{display:none} /* Home reviews: four short quotes in one row */ .revs-4{grid-template-columns:repeat(4,1fr)} .rev-links{margin:0;max-width:34ch;text-align:right} .rev-links .rev-all{font-size:inherit} @media (max-width:980px){.revs-4{grid-template-columns:1fr 1fr}.rev-links{text-align:left}} @media (max-width:720px){.revs-4{grid-template-columns:1fr}} /* Product facts in the install card */ .facts{text-align:left;margin:8px 0 6px;display:grid;gap:6px} .facts div{display:grid;grid-template-columns:78px 1fr;gap:8px;border-bottom:1px solid var(--line);padding-bottom:6px} .facts div:last-child{border:0} .facts dt{color:var(--tx3);font-weight:750;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px} .facts dd{color:var(--tx2)} /* Our-game fit box on ranked pages */ .fit{background:var(--surf);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-left:4px solid var(--acc);border-radius:var(--rs);padding:16px 18px;margin:18px 0 6px} .fit p{margin-bottom:6px;font-size:15px} .fit .fit-h{font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .fit a:not(.btn){color:var(--acc2)} /* Methodology as a disclosure at the end */ details.method summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px} details.method summary::-webkit-details-marker{display:none} details.method summary::after{content:"+";color:var(--acc);font-size:24px;font-weight:300;line-height:1;flex:none} details.method[open] summary::after{content:"−"} details.method summary h2{margin:0;font-size:18px} .method-in{margin-top:14px} .quick-ol.plain{list-style:none;margin-left:0} .quick-ol.plain li{padding-left:0} /* Desktop install panel */ .dl{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.66);display:grid;place-items:center;padding:20px} .dl[hidden]{display:none} .dl-box{position:relative;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r);padding:28px 28px 24px;max-width:520px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)} .dl-box>img{margin:0 auto 12px;border-radius:16px} .dl-box h2{font-size:22px} .dl-box .small{margin:8px auto 18px;max-width:40ch} .dl-x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--tx2);font-size:28px;line-height:1;cursor:pointer;width:44px;height:44px;border-radius:10px} .dl-x:hover{color:var(--tx);background:var(--surf2)} .dl-grid{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;text-align:left} .dl-qr{background:#fff;padding:8px;border-radius:12px;width:150px;height:150px} .dl-qr svg{width:100%;height:100%;display:block} .dl-badges{flex-direction:column;align-items:flex-start} body.dl-open{overflow:hidden} @media (max-width:720px){.dl-grid{grid-template-columns:1fr;justify-items:center;text-align:center}.dl-badges{align-items:center}} .hub-h{margin:26px 0 -20px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}