:root{
  color-scheme:light;
  --bg:#eef0f7;--surface:#ffffff;--surface-2:#e4e7f3;--ink:#151a33;--muted:#545b7a;--line:#cdd2e6;
  --green:#1d8f50;--green-deep:#17733f;--red:#cc3a42;--blue:#285fc6;--yellow:#856000;--yellow-fill:#f5bd2c;--violet:#6a46c9;--teal:#0b7285;
  --track:#dde1ef;--glow:transparent;
  --display:"Sora","Sora Fallback","Segoe UI",system-ui,sans-serif;
  --body:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#10132a;--surface:#181c38;--surface-2:#20254a;--ink:#eceefe;--muted:#a3a9cd;--line:#2e3462;
    --green:#4fdc8b;--green-deep:#4fdc8b;--red:#ff6b70;--blue:#6ea1ff;--yellow:#ffd15c;--yellow-fill:#ffd15c;--violet:#b49cff;--teal:#4fd1e0;
    --track:#262b55;--glow:rgba(110,161,255,.18);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#10132a;--surface:#181c38;--surface-2:#20254a;--ink:#eceefe;--muted:#a3a9cd;--line:#2e3462;
  --green:#4fdc8b;--green-deep:#4fdc8b;--red:#ff6b70;--blue:#6ea1ff;--yellow:#ffd15c;--yellow-fill:#ffd15c;--violet:#b49cff;--teal:#4fd1e0;
  --track:#262b55;--glow:rgba(110,161,255,.18);
}
/* Colour rules (site-wide): green (--green-deep, .save, .tag) = a saving or the cheapest price; red (--red, .more) = only errors,
   warnings or "more expensive"; violet = the Money section and totals (a neutral accent); one colour per home page section:
   blue = Downloads and storage, violet = Money, teal = Compatibility and launches. */
[hidden]{display:none!important}
/* widths in em, not ch: ch changes with the font, so the boxes would resize when the web font swaps in (45em = the old 66ch in DM Sans) */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--surface)}
a{color:var(--blue);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--tool,var(--blue));outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0 0 .4em;letter-spacing:-.02em}
h1:focus{outline:none}
p{margin:0 0 1em;max-width:45em}
/* side padding: 20px, more on notched phones in landscape; page classes set only padding-top/bottom so they keep it */
.wrap{width:100%;max-width:74rem;margin:0 auto;padding-left:max(1.25rem,env(safe-area-inset-left,0px));padding-right:max(1.25rem,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--surface);padding:.5rem .8rem;z-index:50}

.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:flex-start;gap:1.5rem;padding-top:.65rem;padding-bottom:.65rem}
.wordmark{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none;flex:none}
.ctry-wrap{display:flex;align-items:center;gap:.35rem;flex:none;color:var(--muted)}
.ctry-wrap select{width:10.5rem;min-height:36px;padding:.3rem .5rem;font-size:.9rem;background:var(--surface)}
@media (max-width:520px){.ctry-wrap select{width:7.5rem}.wordmark{font-size:1.1rem}}
.header-inner nav{flex:1;display:flex;justify-content:flex-end;justify-content:safe flex-end;gap:.2rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.header-inner nav::-webkit-scrollbar{display:none}
.header-inner nav a{font-size:.93rem;font-weight:600;color:var(--muted);text-decoration:none;padding:.4rem .6rem;border-radius:8px;white-space:nowrap}
.site-header nav a:hover,.site-header nav a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
/* phones and small tablets: the Main links move into the Menu panel (all tools); without JavaScript the Main links stay in a scrolling row */
.menu-btn{display:none;align-items:center;gap:.4rem;flex:none;min-height:44px;min-width:44px;padding:.4rem .7rem;font:inherit;font-weight:600;font-size:.93rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;cursor:pointer}
.menu-btn svg{width:20px;height:20px}
.menu-btn[aria-expanded="true"] .mb-open,.menu-btn:not([aria-expanded="true"]) .mb-close{display:none}
.menu{position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.18);max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain}
.menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.menu .menu-h{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--muted);margin:.9rem 0 .2rem;max-width:none}
.menu a{display:flex;align-items:center;min-height:44px;padding:.3rem .6rem;margin:0 -.6rem;font-weight:600;color:var(--ink);text-decoration:none;border-radius:8px}
.menu .wrap{padding-top:.3rem;padding-bottom:1rem}
@media (max-width:420px){.menu ul{grid-template-columns:1fr}}
@media (max-width:899px){.js .header-inner nav{display:none}.js .menu-btn{display:inline-flex}.header-inner{gap:.6rem}.ctry-wrap{margin-left:auto}}
@media (min-width:900px){.menu{display:none}}
@media (max-width:899px){.header-inner nav{justify-content:flex-start}}
@media (max-width:520px){.menu-btn .mb-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (max-width:400px){.ctry-wrap svg{display:none}.ctry-wrap select{width:6.5rem}}

.page{display:none}
.page.active{display:block}

.hero{padding:3.2rem 0 2.6rem}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:2.5rem;align-items:center}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr;gap:1.8rem}}
.hero h1{font-size:clamp(2.1rem,4.8vw,3.4rem);font-weight:700;max-width:11.4em}
.hero .lede{font-size:1.15rem;color:var(--muted);max-width:30em}
.hero-console{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.4rem 1.2rem;box-shadow:0 0 0 6px var(--surface-2),0 20px 60px var(--glow)}
.hero-console .q{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:.9rem}
.hero-inputs{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.dl-bar{margin-top:1.2rem}
.dl-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.9rem;color:var(--muted);margin-bottom:.4rem}
.dl-meta strong{font-family:var(--display);font-size:1.8rem;color:var(--ink);font-weight:700}
.track{height:18px;background:var(--track);border-radius:4px;overflow:hidden;position:relative}
.fill{position:absolute;inset:0;overflow:hidden;border-radius:4px;transform:translateX(-100%);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.fill::before{content:"";position:absolute;top:0;bottom:0;left:-28px;right:0;background:repeating-linear-gradient(-45deg,var(--blue) 0 10px,color-mix(in srgb,var(--blue) 78%,white) 10px 20px);background-size:28px 28px;animation:stripes 1s linear infinite}
@keyframes stripes{to{transform:translateX(28px)}}
@media (prefers-reduced-motion:reduce){.fill{transition:none}.fill::before{animation:none}}
.dl-foot{font-size:.85rem;color:var(--muted);margin-top:.6rem;min-height:3.1em}
.dl-foot a{font-weight:600}

.section-title{font-size:1.5rem;margin:2.4rem 0 1rem}
.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media (max-width:880px){.picker{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.picker{grid-template-columns:1fr}}
.pick{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--tool);border-radius:10px;padding:1rem 1rem 1.05rem}
.pick:hover{background:var(--surface-2)}
.pick h3{font-size:1.08rem;margin:.6rem 0 .25rem}
.pick p{font-size:.92rem;color:var(--muted);margin:0}
.btn-glyph{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--tool);color:var(--tool)}
.btn-glyph svg{width:18px;height:18px}

.spotlight{display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:1.4rem;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--teal);border-radius:10px;padding:1rem 1.2rem}
.sp-text{flex:1 1 20rem;min-width:0}
.spotlight strong,.spotlight .note{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.spotlight strong{font-family:var(--display);font-size:1.15rem;line-height:1.3;min-height:1.3em}
.spotlight .note{min-height:1.55em}
@media (max-width:620px){.spotlight strong{min-height:2.6em}.spotlight .note{min-height:3.1em}}
.spotlight .cd{font-variant-numeric:tabular-nums;width:13em;white-space:nowrap;font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.3;color:var(--teal)}
.spotlight .cd-l{display:block;font-family:var(--body);font-weight:600;font-size:.85rem;color:var(--muted);white-space:normal}

.tool-page{padding-top:2rem;padding-bottom:1rem}
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:1rem}
.crumbs a{color:var(--muted)}
.tool-head{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.3rem}
.tool-head .btn-glyph{width:46px;height:46px;flex:none;margin-top:.2rem}
.tool-head .btn-glyph svg{width:22px;height:22px}
.tool-head h1{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.tool-head p{color:var(--muted);margin:0}
.calc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);margin-bottom:1.2rem}
@media (max-width:820px){.calc{grid-template-columns:1fr}}
.calc.wide{grid-template-columns:1fr}
.calc-in{padding:1.3rem}
.calc-in h2{font-size:1.15rem;margin-bottom:.9rem}
.calc-out{padding:1.3rem;background:var(--surface-2);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:.9rem;min-width:0}
.calc.wide .calc-out{border-left:0;border-top:1px solid var(--line)}
@media (max-width:820px){.calc-out{border-left:0;border-top:1px solid var(--line)}}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.fields.three{grid-template-columns:repeat(3,1fr)}
.fields .full{grid-column:1/-1}
@media (max-width:620px){.fields.three{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.fields,.fields.three,.hero-inputs{grid-template-columns:1fr}}
label{display:block;font-size:.88rem;font-weight:600;color:var(--muted);margin-bottom:.3rem}
input,select{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:.55rem .65rem;min-height:44px}
input:focus,select:focus{border-color:var(--tool,var(--blue));outline:none}
input:disabled{opacity:.7}
.inline{display:flex;gap:.5rem}
.inline select{width:auto;flex:none}
.big{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4.2vw,2.6rem);line-height:1;color:var(--tool)}
.big-label{font-size:.92rem;color:var(--muted);margin-top:.35rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media (max-width:420px){.stats{grid-template-columns:1fr}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.6rem .7rem}
.stat b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:700}
.stat span{font-size:.8rem;color:var(--muted)}
.note{font-size:.85rem;color:var(--muted);margin:0}
.say{font-size:1.05rem;margin:0;padding:.75rem .9rem;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.say strong{color:var(--tool)}
.say p{margin:0}.say p+p{margin-top:.4rem}
.say .err,.ferr{color:var(--red);font-weight:600}
.ferr{font-size:.85rem;margin:.3rem 0 0}.fhint{font-size:.85rem;color:var(--muted);margin:.3rem 0 0}.fhint:empty{display:none}
input[aria-invalid="true"]{border-color:var(--red)}
.how{margin-top:1rem;font-size:.92rem;color:var(--muted)}
.how p{margin:.5rem 0 0}
.rnote ul{margin:0;padding-left:1.1rem}.rnote li{margin-bottom:.3rem}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.82rem;color:var(--muted);font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody th[scope="row"]{font-size:.95rem;font-weight:500;color:var(--ink)}
caption{caption-side:top;text-align:left;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink);padding:0 0 .5rem}
/* table.stack: label/value cards on phones; every td carries data-label (docs/guide-style.md, Tables) */
@media (max-width:480px){
  table.stack caption{display:block;width:100%}table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack,table.stack tbody,table.stack tr,table.stack th,table.stack td{display:block;width:100%}
  table.stack tr{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.5rem .75rem;margin-bottom:.6rem}
  table.stack tbody th{font-family:var(--display);font-size:1rem;color:var(--ink);border:0;padding:.15rem 0 .3rem;white-space:normal}
  table.stack td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.25rem 0;text-align:right;white-space:normal}
  table.stack td::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;font-size:.85rem;font-weight:600;color:var(--muted)}
  table.stack td:not([data-label]){display:block;text-align:left;font-family:var(--display);font-weight:600;padding:.15rem 0 .3rem}
  table.stack td:not([data-label])::before{content:none}
  table.stack td:not([data-label]) .rp{font-family:var(--body)}
  table.stack tr.cat-row{background:none;border:0;padding:.6rem 0 .1rem;margin:0}
  table.stack tr.cat-row td{border:0;padding:0}
}
.faq details .scroll{margin:.6rem 0 0}.faq details p+p{margin-top:.5rem}
tr.total td{font-weight:700;border-bottom:0;font-family:var(--display);font-size:1.05rem}
tr.best td{font-weight:700}
.scroll{overflow-x:auto}
/* a table wider than its box scrolls inside it; the side with more to see fades out (browsers without scroll timelines just scroll) */
@property --fade-l{syntax:'<length>';inherits:false;initial-value:0px}
@property --fade-r{syntax:'<length>';inherits:false;initial-value:0px}
@supports (animation-timeline:scroll()){
  .scroll{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);animation:edge-fade linear both;animation-timeline:scroll(self inline)}
  @keyframes edge-fade{0%{--fade-l:0px;--fade-r:2.5rem}10%{--fade-l:2.5rem}90%{--fade-r:2.5rem}100%{--fade-l:2.5rem;--fade-r:0px}}
}
.barcell{width:30%;min-width:80px}
.minibar{height:10px;border-radius:3px;background:var(--tool)}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.tabs button{font:inherit;font-weight:600;font-size:.95rem;padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;min-height:44px}
.tabs button[aria-selected="true"]{border-color:var(--tool);color:var(--tool)}
.facts{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}}
tr.cat-row td{font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--muted);padding-top:1.1rem;border-bottom:1px solid var(--line)}
td .rp{display:block;font-size:.82rem;color:var(--muted);font-weight:400}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:var(--green-deep);color:var(--surface);margin-left:.4rem;vertical-align:middle}
.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:600;font-size:.95rem;padding:.6rem .9rem;border-radius:8px;border:1.5px solid var(--tool);color:var(--tool);background:transparent;cursor:pointer;text-decoration:none;min-height:44px}
.btn:hover{background:var(--surface)}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(22px,1fr));gap:4px}
.slot{aspect-ratio:1;border-radius:4px;background:var(--tool);opacity:.9}
.slot.used{background:var(--muted);opacity:.35}
.slot.empty{background:transparent;border:1.5px dashed var(--line)}

.verdict{border-radius:10px;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--muted)}
.verdict.ok{border-left-color:var(--green)}
.verdict.warn{border-left-color:var(--yellow-fill)}
.verdict.no{border-left-color:var(--red)}
.verdict h2{font-size:1.3rem;margin-bottom:.3rem}
.verdict p{margin:0}.verdict p+p{margin-top:.35rem}
.checks{margin:0;padding-left:1.1rem;font-size:.95rem}
.checks li{margin-bottom:.35rem}

.cross{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:.9rem 1.1rem;font-size:.95rem;margin-bottom:1.2rem}

.release-list{list-style:none;margin:0;padding:0}
.release-list li{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.8rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line)}
@media (max-width:520px){.release-list li{grid-template-columns:1fr auto}.release-list .rd{grid-column:1/-1}}
.release-list .rd{font-weight:600;font-variant-numeric:tabular-nums}
.release-list .rp{display:block;font-size:.85rem;color:var(--muted)}
.release-list .rin{font-size:.88rem;color:var(--muted);white-space:nowrap;min-width:6em;text-align:right}
.release-list li.star .rn{font-weight:700}
.month-h{font-size:1.1rem;margin:1.3rem 0 .2rem}
#gp{min-height:100vh}

.content{padding-top:1.2rem}
.content h2{font-size:1.4rem;margin-top:2rem}
.faq details{border-bottom:1px solid var(--line);padding:.3rem 0}
.faq details p{margin:.6rem 0 0;color:var(--muted)}.faq details[open]{padding-bottom:.9rem}
.related{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.related a{font-size:.93rem;font-weight:600;text-decoration:none;padding:.45rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink)}
.related a:hover{border-color:var(--blue)}

.prose{max-width:46rem;padding-top:2rem;padding-bottom:1rem}
.prose h1{font-size:clamp(1.8rem,3.6vw,2.4rem)}
.prose h2{font-size:1.3rem;margin-top:2rem}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.45rem}
.prose .updated{color:var(--muted);font-size:.92rem}
.ans-box{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--tool,var(--blue));border-radius:10px;padding:.9rem 1.1rem;margin:0 0 1rem}
.ans-box p{margin:0;font-size:1.1rem;font-weight:500}
.fyc{min-height:3.2em;padding:.6rem .9rem;background:var(--surface-2);border-radius:8px;font-size:.98rem}
@media (max-width:620px){.fyc{min-height:6.4em}}
.prose .scroll{margin:.4rem 0 .5rem}
.prose td .rp{white-space:normal}.save,.say .save{color:var(--green-deep)}.more,.say .more{color:var(--red)}
.prose .src{font-size:.92rem;color:var(--muted)}
.placeholder{background:color-mix(in srgb,var(--yellow-fill) 30%,transparent);padding:0 .3rem;border-radius:4px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.searchbar input{font-size:1.1rem;min-height:52px;padding:.7rem 1rem;border-radius:12px}
.homesearch{margin-top:1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem}
.homesearch label{font-size:1rem;color:var(--ink);font-weight:400;margin-bottom:.6rem}
.homesearch .inline input{flex:1}
#gs-list{min-height:100vh}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:.9rem;margin-top:1.2rem}
.gcard{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:10px;padding:1rem}
.gcard:hover{background:var(--surface-2)}
.gname{font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.25;text-wrap:balance}
.gmeta{font-size:.9rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.chip-btn{cursor:pointer;font:inherit;font-size:.78rem;font-weight:600;color:var(--ink)}.chip-btn:hover{border-color:var(--teal)}
.pfilter{margin:.2rem 0 1rem}.pfilter .chip-btn{font-size:.9rem;padding:.4rem .9rem;min-height:40px}.chip-btn[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--surface)}
@media (pointer:coarse){.chip-btn,.pfilter .chip-btn,.ctry-wrap select,.pcc .pcc-f select,.tabs button,button.btn{min-height:44px}.related a,.chips .chip-btn{display:inline-flex;align-items:center;min-height:44px}}
.chip{font-size:.78rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;border:1px solid var(--line);background:var(--surface-2)}
.chip.on{background:var(--teal);border-color:var(--teal);color:var(--surface)}
.ghead{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
@media (max-width:700px){.ghead{grid-template-columns:1fr}}
.ghead h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:.2rem}
.gprice{text-align:right}
.gprice.conv .big{font-size:1.35rem;color:var(--muted)}.gprice.conv .big-label{font-size:.85rem}
.cvt,td.num.cvt{color:var(--muted);font-size:.88rem}
@media (max-width:700px){.gprice{text-align:left}}
table.spec th[scope="row"]{font-weight:600;color:var(--muted);font-size:.88rem;white-space:nowrap}
table.spec tr.target td{font-weight:600}
table.spec thead th{color:var(--ink);font-family:var(--display);font-size:.9rem}
.gpanel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.gpanel .note{margin-bottom:.6rem}
dl.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));align-items:start;gap:.6rem;margin:0 0 .6rem}dl.facts div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem}dl.facts dt{font-size:.8rem;color:var(--muted)}dl.facts dd{margin:.15rem 0 0;font-weight:700}
.pcc{margin-top:1rem;background:var(--bg);border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:12px;padding:1rem 1.1rem}.pcc h3{margin:0 0 .3rem;font-size:1.1rem}
.pcc-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem;margin:.6rem 0}.pcc-f label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600;color:var(--muted)}
.pcc-f select{font:inherit;font-size:.95rem;padding:.5rem .6rem;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);min-height:42px}
.pcc-out ul{margin:.3rem 0 0;padding-left:1.1rem}.pcc-v{margin:.4rem 0 0}.pcc .l2{color:var(--green-deep)}.pcc .l0{color:var(--red)}.pcc .l1{color:var(--ink)}
.lede-s{font-size:1.15rem;color:var(--muted)}
.prose ol{padding-left:1.3rem}.prose ol li{margin-bottom:.6rem}
.wtb{margin:1.2rem 0;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--violet);border-radius:12px;padding:.8rem 1rem}.wtb p{margin:.25rem 0}
.wtb-h{font-family:var(--display);font-weight:700}.wtb-l{color:var(--muted)}.wtb-row a{display:inline-block;margin-right:.7rem;padding:.3rem 0;font-weight:600}.wtb-d,.aff-d{color:var(--muted);font-size:.85rem}
td .rp.buy a{font-weight:600}
.consent{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:40;max-width:40rem;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;box-shadow:0 10px 40px rgba(0,0,0,.25);display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.consent p{margin:0;font-size:.92rem;flex:1 1 16rem}
.consent-btns{display:flex;gap:.5rem}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--surface)}
.consent .btn{--tool:var(--blue)}
.top10{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.6rem}
.t-cov{width:45px;height:64px;border-radius:5px;object-fit:cover;background:var(--surface-2);display:block}
.top10 li{display:grid;grid-template-columns:2.4rem 45px 1fr auto;gap:.8rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:10px;padding:.75rem 1rem}
.t-rank{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--teal);text-align:center}
.t-name{display:block;font-weight:700;font-size:1.05rem}.t-name a{color:var(--ink);text-decoration:none}.t-name a:hover{text-decoration:underline}
.t-meta{display:block;font-size:.88rem;color:var(--muted)}
.t-cd{font-family:var(--display);font-weight:700;color:var(--teal);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:6.5em;text-align:right}
@media (max-width:520px){.top10 li{grid-template-columns:2rem 45px 1fr}.t-cd{grid-column:3;text-align:left}}
.release-list .rn a{color:var(--ink)}
.gcard.has-cov{flex-direction:row;align-items:flex-start;gap:1rem}
.gcov{width:90px;height:128px;flex:none;border-radius:6px;object-fit:cover;background:var(--surface-2);display:block}
.gtxt{display:flex;flex-direction:column;gap:.3rem;min-width:0}
select.scrolly{position:relative;z-index:60;height:auto;padding:.25rem;box-shadow:0 12px 32px rgba(0,0,0,.28);overflow-y:auto}
select.scrolly option{padding:.35rem .5rem;border-radius:4px}
.ctry-wrap{position:relative}
footer{margin-top:4rem;border-top:1px solid var(--line);background:var(--surface);padding:2.2rem 0 2.6rem;font-size:.92rem;color:var(--muted)}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:1.5rem}
.foot-brand{align-self:start}.foot .foot-brand .wordmark{display:inline-flex;color:var(--ink);padding:0;font-size:1.2rem}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}}
.foot .fh{font-family:var(--display);color:var(--ink);font-size:.95rem;margin:0 0 .5rem}
.foot a{display:block;color:var(--muted);text-decoration:none;padding:.4rem 0}
.dl-foot a{display:inline-block;padding:.35rem 0}
.foot a:hover{color:var(--ink)}
.legal{margin-top:1.6rem;font-size:.82rem}

.wc{margin-top:1.4rem;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--violet);border-radius:12px;padding:1.1rem 1.2rem}
.wc h2{font-size:1.35rem;margin-bottom:.7rem}
.wc-in{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:420px){.wc-in{grid-template-columns:1fr}}
.wc-out{min-height:12.5rem;margin-top:.9rem}
@media (max-width:620px){.wc-out{min-height:17rem}}
.wc-ans{font-size:1.05rem;margin:0 0 .7rem}
.wc-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:.7rem}
@media (max-width:620px){.wc-nums{grid-template-columns:1fr 1fr}.wc-nums div:last-child{grid-column:1/-1}}
.wc-nums div{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;min-width:0}
.wc-nums span{display:block;font-size:.8rem;color:var(--muted)}
.wc-nums b{display:block;font-family:var(--display);font-size:1.15rem;overflow-wrap:anywhere}
.wc .save{color:var(--green-deep)}.wc .more{color:var(--red)}
.wc-go{display:inline-block;font-weight:600;padding:.5rem 0}
.wc-quick{border-top:1px solid var(--line);margin-top:.6rem;padding-top:.7rem}
.wc-quick h2{font-size:1rem;margin-bottom:.4rem}
.wc-quick ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
@media (max-width:760px){.wc-quick ul{grid-template-columns:1fr}}
.wc-quick a{display:block;height:100%;text-decoration:none;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;font-size:.92rem}
.wc-quick a:hover{border-color:var(--violet)}
.wc-quick a b{display:block}
summary{cursor:pointer;display:block;position:relative;list-style:none;font-weight:600;font-size:1.03rem;color:var(--ink);padding:.55rem 2rem .55rem 0}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.35rem;top:50%;width:.55em;height:.55em;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
details[open]>summary::after{transform:translateY(-20%) rotate(-135deg)}
@media (prefers-reduced-motion:reduce){summary::after{transition:none}}
.nc-btn{display:flex;align-items:center;gap:.6rem;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);background:none;border:0;padding:.2rem 0;min-height:44px;cursor:pointer}
.nc-btn::after{content:"";width:.5em;height:.5em;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:translateY(-.15em) rotate(45deg)}
.nc-btn[aria-expanded="true"]::after{transform:translateY(.1em) rotate(-135deg)}
.sp-cov{flex:none;display:block;width:60px;height:85px;border-radius:6px;overflow:hidden;background:var(--surface-2)}.sp-cov:empty{display:none}.sp-cov img{display:block;width:60px;height:85px;object-fit:cover}
.poprow .covers{list-style:none;margin:0;padding:0 0 .4rem;display:grid;grid-auto-flow:column;grid-auto-columns:7.5rem;gap:1rem}
@media (min-width:1100px){.poprow .covers{grid-auto-flow:row;grid-template-columns:repeat(8,1fr)}}
.poprow a{display:flex;flex-direction:column;gap:.4rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:.88rem;line-height:1.25;text-wrap:balance}
.poprow img,.poprow .noimg{display:block;width:100%;height:auto;aspect-ratio:90/128;border-radius:8px;object-fit:cover;background:var(--surface-2)}
.poprow a:hover span{text-decoration:underline}
.gd-card .gdate{font-size:.82rem;color:var(--muted);margin-top:.15rem}
.gd-cov img{display:block;width:72px;height:102px;border-radius:6px;object-fit:cover;background:var(--surface-2)}.gd-cov:empty{display:none}
.gd-card{flex-direction:row;align-items:flex-start;gap:1rem;border-left-color:var(--blue)}
.t-blue{--tool:var(--blue)}.t-violet{--tool:var(--violet)}.t-teal{--tool:var(--teal)}