:root{color-scheme:dark}.google-auto-placed{display:none!important;height:0!important;min-height:0!important;overflow:hidden!important}.mx-header{position:sticky;top:0;z-index:1000;height:64px;border-bottom:1px solid #30363d;background:rgba(9,11,12,.97);color:#f4f6f8}.mx-header__inner{box-sizing:border-box;width:100%;height:64px;margin:0;padding:0 clamp(14px,2.2vw,34px);display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,48px)}.mx-brand{display:flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none!important;font:18px "Varela Round",sans-serif;white-space:nowrap}.mx-brand img{width:28px;height:28px;border-radius:4px}.mx-nav{display:flex;align-items:center;gap:clamp(18px,2.3vw,40px)}.mx-nav a{color:#a9b1ba!important;text-decoration:none!important;font-size:14px;font-weight:600}.mx-nav a:hover,.mx-nav a:focus-visible,.mx-nav a[aria-current=page]{color:#fff!important}.mx-theme-toggle,.mx-menu-toggle{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #39414a;border-radius:5px;background:#171a1d;color:#dce3e8;cursor:pointer}.mx-theme-toggle:hover,.mx-menu-toggle:hover{border-color:#08a7df;color:#fff}.mx-theme-toggle svg,.mx-menu-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.mx-theme-moon{display:none}.mx-menu-toggle{display:none}
html[data-theme=light]{color-scheme:light;--bg:#f3f5f7;--panel:#fff;--panel2:#edf1f4;--line:#cbd3da;--text:#15191d;--muted:#5d6872;--mx-bg:#f3f5f7;--mx-panel:#fff;--mx-panel2:#edf1f4;--mx-line:#cbd3da;--mx-text:#15191d;--mx-muted:#5d6872;--compare-bg:#f3f5f7;--compare-panel:#fff;--compare-panel-2:#edf1f4;--compare-line:#cbd3da;--compare-text:#15191d;--compare-muted:#5d6872}.mx-theme-sun{display:none}.mx-theme-moon{display:block}html[data-theme=light] body{background-color:#f3f5f7!important;background-image:linear-gradient(rgba(20,30,40,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,30,40,.045) 1px,transparent 1px)!important;color:#15191d!important}html[data-theme=light] .mx-header{border-color:#d4dbe1;background:rgba(255,255,255,.97);color:#15191d}html[data-theme=light] .mx-brand,html[data-theme=light] .mx-nav a[aria-current=page],html[data-theme=light] .mx-nav a:hover{color:#15191d!important}html[data-theme=light] .mx-nav a{color:#5d6872!important}html[data-theme=light] .mx-theme-toggle,html[data-theme=light] .mx-menu-toggle{border-color:#cbd3da;background:#f4f6f8;color:#25303a}html[data-theme=light] .pls,html[data-theme=light] .paketti,html[data-theme=light] .profile-card,html[data-theme=light] .sidebox,html[data-theme=light] .usergraph,html[data-theme=light] .compare-panel,html[data-theme=light] .content,html[data-theme=light] .platform-grid>.paketti{border-color:#cbd3da!important;background:#fff!important;color:#15191d!important;box-shadow:0 12px 32px rgba(30,45,60,.09)!important}html[data-theme=light] input,html[data-theme=light] select,html[data-theme=light] textarea{border-color:#bfc8d0!important;background:#fff!important;color:#15191d!important}html[data-theme=light] button:not(.mx-theme-toggle):not(.mx-menu-toggle){color:#15191d}html[data-theme=light] .counterlink,html[data-theme=light] .profile-card~section.paketti p,html[data-theme=light] .profile-card~section.paketti details,html[data-theme=light] .userid{color:#4f5b65!important}html[data-theme=light] .odometer,html[data-theme=light] .username,html[data-theme=light] .countertype,html[data-theme=light] .sidebox a,html[data-theme=light] h1,html[data-theme=light] h2,html[data-theme=light] h3{color:#15191d!important}html[data-theme=light] .highcharts-background{fill:#fff!important}html[data-theme=light] .highcharts-grid-line{stroke:#d8dee4!important}html[data-theme=light] .highcharts-axis-labels text,html[data-theme=light] .highcharts-title{fill:#303942!important}html[data-theme=light] .button,html[data-theme=light] .button2,html[data-theme=light] .compare-action button{color:#fff!important}html[data-theme=light] #shareButtons .mx-share-actions a,html[data-theme=light] #shareButtons .mx-share-actions button{color:#15191d!important}
@media(max-width:760px){.mx-header__inner{padding:0 12px;gap:12px}.mx-menu-toggle{display:grid;margin-left:auto}.mx-nav{position:absolute;top:64px;left:0;right:0;display:none;padding:14px 12px;border-bottom:1px solid #30363d;background:#111315;box-shadow:0 14px 30px rgba(0,0,0,.28)}.mx-nav.is-open{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mx-nav a{display:flex;align-items:center;min-height:42px;padding:9px 12px;border:1px solid #30363d;border-radius:4px;background:#191c1f}.mx-theme-toggle{width:100%;grid-column:span 2}html[data-theme=light] .mx-nav{border-color:#cbd3da;background:#fff}html[data-theme=light] .mx-nav a{border-color:#cbd3da;background:#f4f6f8}}

/* mx-odometer-light: the digit ribbons carry their own colour, so the generic
   .odometer rule left them white-on-white in light mode (only the comma marks
   were visible). */
html[data-theme=light] .odometer,html[data-theme=light] .odometer .odometer-digit,html[data-theme=light] .odometer .odometer-value,html[data-theme=light] .odometer .odometer-ribbon-inner,html[data-theme=light] .odometer .odometer-formatting-mark{color:#15191d!important}

/* mx-light-contrast: in light mode the result cards inherited white text and the
   platform badge had a white fill, which hid the white-glyph logos (Threads,
   Mastodon, Bluesky). Dark badge + dark card text fixes both without needing to
   know which logo is which colour. */
html[data-theme=light] #box>.paketti,html[data-theme=light] #box>.paketti a,html[data-theme=light] #box>.paketti p,html[data-theme=light] .result-grid>.paketti,html[data-theme=light] .result-grid>.paketti button,html[data-theme=light] .result-grid>.paketti p{color:#15191d!important}
html[data-theme=light] #box>.paketti,html[data-theme=light] .result-grid>.paketti{background:#fff!important;border-color:#cbd3da!important}
html[data-theme=light] .mx-platform-badge{background:#1b1f24!important;box-shadow:0 0 0 3px #fff!important}
html[data-theme=light] .mx-popular-grid a,html[data-theme=light] .mx-popular-grid a *{color:#15191d!important}
html[data-theme=light] .mx-discover-card,html[data-theme=light] .mx-discover-card *{color:#15191d!important}
