AdrianLepers HF Staff
Show the contact address as click-to-copy text, for visitors who don't want a mail client opening
dcf226d verified | /* ============================================================ | |
| Storage Cost Calculator — Hugging Face design language | |
| System sans (Hub UI) · system mono (repo names / figures) | |
| Flat white surfaces · gray borders · #FFD21E as accent | |
| ============================================================ */ | |
| :root { | |
| --paper: #FFFFFF; | |
| --paper-2: #F9FAFB; /* gray-50: subtle section fill */ | |
| --card: #FFFFFF; | |
| --ink: #111827; /* gray-900 */ | |
| --ink-soft: #4B5563; /* gray-600 */ | |
| --ink-faint: #9CA3AF; /* gray-400 */ | |
| --line: #E5E7EB; /* gray-200 */ | |
| --line-soft: #F3F4F6; /* gray-100 */ | |
| --hf: #FFD21E; /* Hugging Face yellow */ | |
| --hf-deep: #FF9D00; /* HF orange (gradient / hover) */ | |
| --save: #059669; /* emerald-600 */ | |
| --save-bg: #ECFDF5; /* emerald-50 */ | |
| --save-line: #A7F3D0; /* emerald-200 */ | |
| --cost: #DC2626; /* red-600 */ | |
| --cost-soft: #EF4444; | |
| --cost-bg: #FEF2F2; /* red-50 */ | |
| --cloud-store: #D1D5DB; /* gray-300 */ | |
| --dark: #0B0F19; /* HF dark-mode canvas */ | |
| --dark-2: #111827; | |
| --dark-line: #1F2937; | |
| --dark-ink: #E5E7EB; | |
| --dark-faint: #6B7280; | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| --shadow-sm: 0 1px 2px rgba(17,24,39,.05); | |
| --shadow-md: 0 1px 3px rgba(17,24,39,.08), 0 1px 2px rgba(17,24,39,.04); | |
| --shadow-card: 0 4px 24px rgba(17,24,39,.10); | |
| --mono: ui-monospace, "SF Mono", SFMono-Regular, "IBM Plex Mono", Menlo, Consolas, monospace; | |
| --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| --display: var(--ui); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { -webkit-text-size-adjust: 100%; } | |
| body { | |
| font-family: var(--ui); | |
| color: var(--ink); | |
| background: var(--paper); | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| min-height: 100vh; | |
| } | |
| .wrap { | |
| position: relative; z-index: 1; | |
| max-width: 1080px; | |
| margin: 0 auto; | |
| padding: clamp(24px, 4vw, 52px) clamp(18px, 4vw, 40px) 64px; | |
| } | |
| .lede { margin-bottom: 30px; } | |
| .lede .eyebrow { | |
| display: inline-flex; align-items: center; gap: 7px; | |
| font-size: 12px; letter-spacing: .01em; text-transform: none; | |
| color: var(--ink-soft); font-weight: 600; margin-bottom: 14px; | |
| background: var(--paper-2); border: 1px solid var(--line); | |
| padding: 4px 11px 4px 9px; border-radius: 999px; | |
| } | |
| .lede .eyebrow-ico { font-size: 14px; line-height: 1; } | |
| .lede h1 { | |
| font-family: var(--display); | |
| font-weight: 800; | |
| font-size: clamp(32px, 5.4vw, 56px); | |
| line-height: 1.04; | |
| letter-spacing: -.03em; | |
| margin-bottom: 14px; | |
| white-space: nowrap; | |
| } | |
| /* highlighter accent — a very HF marketing tell */ | |
| .lede h1 em { | |
| font-style: normal; font-weight: 800; | |
| background: linear-gradient(180deg, transparent 62%, var(--hf) 62%, var(--hf) 94%, transparent 94%); | |
| padding: 0 3px; border-radius: 2px; | |
| } | |
| .lede p { font-size: 16px; color: var(--ink-soft); max-width: 640px; } | |
| /* ---------- main grid ---------- */ | |
| .console { | |
| display: grid; | |
| grid-template-columns: 0.86fr 1.05fr; | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow-md); | |
| overflow: hidden; | |
| } | |
| /* ---------- inputs ---------- */ | |
| .inputs { | |
| padding: clamp(20px, 2.6vw, 30px); | |
| background: linear-gradient(180deg, var(--paper-2), #fff 70%); | |
| border-right: 1px solid var(--line-soft); | |
| } | |
| .panel-label { | |
| font-size: 11px; letter-spacing: .15em; text-transform: uppercase; | |
| color: var(--ink-faint); font-weight: 700; margin-bottom: 20px; | |
| } | |
| .field { margin-bottom: 24px; } | |
| .field:last-child { margin-bottom: 0; } | |
| .field .top { | |
| display: flex; align-items: baseline; justify-content: space-between; gap: 10px; | |
| margin-bottom: 2px; | |
| } | |
| .field .lbl { font-size: 13.5px; font-weight: 600; color: var(--ink); } | |
| .field .val { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -.01em; } | |
| .field .val .unit { color: var(--ink-faint); font-size: 12px; margin-left: 1px; } | |
| .field .hint { font-size: 11.5px; color: var(--ink-faint); margin-top: 7px; line-height: 1.45; } | |
| .field .hint b { color: var(--ink-soft); font-weight: 600; } | |
| /* egress free tier callout */ | |
| .hf-egress-note { | |
| color: var(--save); background: var(--save-bg); | |
| border-radius: 7px; padding: 5px 9px; margin-top: 7px; | |
| } | |
| .hf-egress-note b { color: var(--save); font-weight: 700; } | |
| /* range slider */ | |
| input[type="range"] { | |
| -webkit-appearance: none; appearance: none; | |
| width: 100%; height: 6px; border-radius: 999px; | |
| background: var(--line); outline: none; margin: 12px 0 2px; | |
| cursor: pointer; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; appearance: none; | |
| width: 19px; height: 19px; border-radius: 50%; | |
| background: #fff; border: 3px solid var(--ink); | |
| box-shadow: var(--shadow-sm); cursor: grab; transition: transform .12s ease; | |
| } | |
| input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 19px; height: 19px; border-radius: 50%; | |
| background: #fff; border: 3px solid var(--ink); box-shadow: var(--shadow-sm); cursor: grab; | |
| } | |
| /* segmented control */ | |
| .seg { | |
| display: inline-flex; border: 1px solid var(--line); border-radius: 9px; | |
| background: var(--paper-2); padding: 2px; gap: 2px; | |
| } | |
| .seg button { | |
| font-family: var(--ui); font-size: 12.5px; font-weight: 600; | |
| color: var(--ink-soft); background: transparent; border: 0; | |
| padding: 5px 13px; border-radius: 7px; cursor: pointer; transition: all .15s ease; | |
| } | |
| .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); } | |
| /* provider tabs */ | |
| .providers { display: flex; gap: 7px; flex-wrap: wrap; } | |
| .providers button { | |
| font-family: var(--ui); font-size: 12.5px; font-weight: 600; | |
| color: var(--ink-soft); background: #fff; border: 1px solid var(--line); | |
| padding: 7px 13px; border-radius: 9px; cursor: pointer; transition: all .15s ease; | |
| } | |
| .providers button:hover { border-color: var(--ink-faint); } | |
| .providers button[aria-pressed="true"] { | |
| background: var(--ink); color: #fff; border-color: var(--ink); | |
| } | |
| .row-split { display: flex; align-items: center; justify-content: space-between; gap: 14px; } | |
| /* ---------- volume pricing table ---------- */ | |
| .field.vp { margin-top: 26px; } | |
| .vp-unit { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); } | |
| .vp-table { | |
| border: 1px solid var(--line); border-radius: var(--radius-sm); | |
| overflow: hidden; margin-top: 10px; background: #fff; | |
| } | |
| .vp-row { | |
| display: grid; grid-template-columns: 1fr 64px 64px; | |
| padding: 6px 12px; font-size: 12.5px; align-items: baseline; | |
| border-bottom: 1px solid var(--line-soft); | |
| } | |
| .vp-row:last-child { border-bottom: 0; } | |
| .vp-vol { color: var(--ink-soft); font-weight: 500; } | |
| .vp-rate { | |
| font-family: var(--mono); text-align: right; font-weight: 600; | |
| font-variant-numeric: tabular-nums lining-nums; color: var(--ink-faint); | |
| } | |
| .vp-rate.act { color: var(--ink); } | |
| .vp-head { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 5px 12px; } | |
| .vp-head .vp-vol, .vp-head .vp-rate { | |
| font-family: var(--mono); font-size: 10px; letter-spacing: .05em; | |
| text-transform: uppercase; color: var(--ink-soft); font-weight: 700; | |
| } | |
| /* the bracket your slider position lands in */ | |
| .vp-row.on { | |
| background: linear-gradient(90deg, rgba(255, 210, 30, .18), rgba(255, 210, 30, .04)); | |
| box-shadow: inset 2px 0 0 var(--hf); | |
| } | |
| .vp-row.on .vp-vol { color: var(--ink); font-weight: 700; } | |
| .vp-row.on .vp-rate.act { font-weight: 800; } | |
| .vp-nudge b { color: #B45309; } /* amber-700: hf-deep is too light for text on white */ | |
| /* ---------- results ---------- */ | |
| .results { padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; } | |
| .headline { | |
| background: var(--save-bg); | |
| border: 1px solid var(--save-line); | |
| border-radius: var(--radius-sm); | |
| padding: 18px 20px; margin-bottom: 18px; | |
| position: relative; overflow: hidden; | |
| } | |
| .headline .cap { | |
| font-size: 11px; letter-spacing: .12em; text-transform: uppercase; | |
| color: var(--save); font-weight: 700; margin-bottom: 4px; | |
| } | |
| .headline .figure { | |
| font-family: var(--ui); font-weight: 800; | |
| font-size: clamp(38px, 6.3vw, 56px); line-height: 1; color: var(--save); | |
| letter-spacing: -.032em; font-variant-numeric: tabular-nums lining-nums; | |
| } | |
| .headline .figure .per { font-family: var(--ui); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--save); opacity: .8; } | |
| .headline .sub { font-size: 13px; color: var(--save); margin-top: 11px; font-weight: 500; } | |
| .headline .sub b { font-weight: 700; } | |
| /* two-column ledger with a continuous "vs" divider */ | |
| .ledger { display: grid; grid-template-columns: 1fr auto 34px auto; align-items: stretch; } | |
| .ledger > div { display: flex; align-items: center; justify-content: flex-end; } | |
| .ledger .lc { padding: 11px 0; border-bottom: 1px solid var(--line-soft); } | |
| .ledger .rlabel { justify-content: flex-start; font-family: var(--ui); font-size: 13.5px; color: var(--ink-soft); font-weight: 500; white-space: nowrap; } | |
| .ledger .rlabel .permo { color: var(--ink-faint); margin-left: 2px; } | |
| .ledger .hfcol, .ledger .ccol { | |
| font-family: var(--mono); font-size: 14px; font-weight: 600; | |
| font-variant-numeric: tabular-nums lining-nums; color: var(--ink); min-width: 76px; | |
| } | |
| .ledger .ccol { color: var(--cost); min-width: 84px; } | |
| .ledger .zero { color: var(--save); font-weight: 700; } | |
| .ledger .total { font-weight: 800; } | |
| .ledger .total.ccol { color: var(--cost); } | |
| .ledger .total.rlabel { color: var(--ink); font-weight: 700; } | |
| .ledger .total.hfcol { color: var(--ink); } | |
| /* header row */ | |
| .ledger .lh { | |
| padding: 0 0 8px; border-bottom: 1px solid var(--line); align-items: flex-end; | |
| font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; | |
| text-transform: uppercase; color: var(--ink-soft); font-weight: 700; | |
| } | |
| /* the vertical divider column (continuous line, horizontal rules break around it) */ | |
| .ledger .dv { justify-content: center; padding: 0; } | |
| .ledger .lc.dv { border-bottom: 0; } | |
| .ledger .lc.dv::before { content: ""; width: 1px; align-self: stretch; background: var(--line); } | |
| /* competitor column header: name row + tier chip stacked */ | |
| .comp-name-row { display: inline-flex; align-items: center; } | |
| .ledger .lh.ccol { flex-direction: column; align-items: flex-end; justify-content: flex-end; } | |
| .tier-chip { | |
| font-family: var(--mono); font-size: 9px; font-weight: 500; | |
| color: var(--ink-faint); text-transform: none; letter-spacing: 0; | |
| margin-top: 2px; white-space: nowrap; | |
| } | |
| /* "also not in their bill" strip */ | |
| .notincl-strip { | |
| margin-top: 14px; padding: 9px 12px; | |
| background: var(--paper-2); border: 1px solid var(--line-soft); | |
| border-left: 2px solid var(--hf); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| } | |
| .notincl-hd { | |
| display: block; font-size: 11px; font-weight: 700; | |
| color: var(--ink-soft); margin-bottom: 5px; | |
| } | |
| .notincl-list { | |
| margin: 0; padding-left: 14px; | |
| font-size: 11.5px; color: var(--ink-faint); line-height: 1.65; | |
| } | |
| .notincl-list li::marker { color: var(--hf-deep); } | |
| /* provider logos on tabs */ | |
| .providers button { display: inline-flex; align-items: center; gap: 7px; } | |
| .plogo { width: 16px; height: 16px; display: block; flex: none; } | |
| .providers button[aria-pressed="true"] .plogo { filter: none; } | |
| /* share-card bar logo + ledger column logo */ | |
| .blogo { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 5px; } | |
| .lh-logo { margin-right: 5px; font-size: 12px; vertical-align: -1px; } | |
| .effective { | |
| margin-top: 14px; padding: 14px 16px 16px; border-radius: var(--radius-sm); | |
| background: var(--paper-2); border: 1px solid var(--line-soft); | |
| } | |
| .effective .elabel { | |
| font-size: 11px; letter-spacing: .07em; text-transform: uppercase; | |
| color: var(--ink-faint); font-weight: 700; | |
| } | |
| .faceoff { | |
| display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; | |
| align-items: end; margin-top: 10px; | |
| } | |
| .fo-name { | |
| font-size: 12px; font-weight: 600; color: var(--ink-soft); | |
| margin-bottom: 1px; white-space: nowrap; | |
| } | |
| .fo-ico { margin-right: 5px; } /* mirrors .lh-logo in the ledger header */ | |
| .fo-side.bad .fo-name, .fo-side.bad .fo-rate { text-align: right; } | |
| .fo-num { | |
| font-weight: 800; font-size: clamp(22px, 3.2vw, 27px); line-height: 1.1; | |
| letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; | |
| } | |
| .fo-side.good .fo-num { color: var(--save); } | |
| .fo-side.bad .fo-num { color: var(--cost); } | |
| .fo-unit { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; margin-left: 4px; } | |
| .fo-vs { | |
| font-size: 11px; font-weight: 700; color: var(--ink-faint); | |
| text-transform: uppercase; padding-bottom: 16px; | |
| } | |
| /* proportional underline bars: widths set by app.js, scaled to the pricier rate */ | |
| .fo-bar { height: 5px; border-radius: 999px; background: var(--line-soft); margin-top: 8px; overflow: hidden; } | |
| .fo-bar span { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; } | |
| .fo-bar.good span { background: var(--save); } | |
| .fo-bar.bad span { background: var(--cost); margin-left: auto; } /* fills from the right, mirroring its side */ | |
| /* a rate past the top of the scale fades out on its open end, rather than | |
| sitting at a full track and reading as "exactly the maximum" */ | |
| .fo-bar.good span.clipped { | |
| -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); | |
| mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); | |
| } | |
| .fo-bar.bad span.clipped { | |
| -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px); | |
| mask-image: linear-gradient(90deg, transparent, #000 18px); | |
| } | |
| /* show the math */ | |
| .math { margin-top: 16px; } | |
| .math summary { | |
| font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; | |
| list-style: none; display: inline-flex; align-items: center; gap: 7px; | |
| padding: 5px 0; | |
| } | |
| .math summary::-webkit-details-marker { display: none; } | |
| .math summary .chev { transition: transform .2s ease; color: var(--ink-faint); } | |
| .math[open] summary .chev { transform: rotate(90deg); } | |
| .math .body { | |
| font-size: 12px; color: var(--ink-soft); line-height: 1.6; | |
| border: 1px dashed var(--line); border-radius: var(--radius-sm); | |
| padding: 12px 14px; margin-top: 8px; background: var(--paper-2); | |
| } | |
| .math .body b { color: var(--ink); font-weight: 600; } | |
| .math .body a { color: var(--hf-deep); text-decoration: none; border-bottom: 1px solid var(--line); } | |
| .math .body a:hover { border-color: var(--hf-deep); } | |
| .math .body .mrow { margin-bottom: 7px; } | |
| .math .body .src { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 8px; } | |
| .math .body .notincl { border-left: 2px solid var(--hf); padding-left: 10px; margin-top: 10px; } | |
| /* ---------- why / advantages ---------- */ | |
| .why { margin-top: 28px; } | |
| .why-head { | |
| font-size: 11px; letter-spacing: .15em; text-transform: uppercase; | |
| color: var(--ink-faint); font-weight: 700; margin-bottom: 14px; | |
| } | |
| .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 14px; } | |
| .why-card { | |
| background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); | |
| padding: 18px 18px 20px; box-shadow: var(--shadow-sm); | |
| } | |
| .why-ico { | |
| height: 32px; min-width: 32px; width: max-content; padding: 0 10px; border-radius: 9px; | |
| display: inline-grid; place-items: center; margin-bottom: 13px; | |
| font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: -.01em; | |
| } | |
| .why-ico.egress { background: var(--save-bg); color: var(--save); } | |
| .why-ico.xet { background: #FEF3C7; color: #B45309; } | |
| .why-ico.ml { background: var(--line-soft); color: var(--ink); } | |
| .why-ico.migrate { background: #EFF6FF; color: #2563EB; } | |
| .why-card h3 { font-family: var(--ui); font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; } | |
| .why-card p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; } | |
| @media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } } | |
| /* ---------- CTA + trust ---------- */ | |
| .cta { margin-top: 28px; } | |
| .cta-inner { | |
| display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; | |
| background: linear-gradient(180deg, #fff, var(--paper-2)); | |
| border: 1px solid var(--line); border-radius: var(--radius); | |
| padding: 24px 26px; box-shadow: var(--shadow-md); | |
| } | |
| .cta-copy h2 { | |
| font-family: var(--display); font-weight: 800; | |
| font-size: clamp(21px, 3vw, 28px); letter-spacing: -.025em; line-height: 1.08; margin-bottom: 6px; | |
| } | |
| .cta-copy p { font-size: 14px; color: var(--ink-soft); max-width: 470px; } | |
| .cta-side { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; } | |
| .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; } | |
| /* plain-text address for anyone avoiding the mailto */ | |
| .cta-alt { font-size: 12.5px; color: var(--ink-faint); } | |
| .email-copy { | |
| font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); | |
| background: none; border: 0; border-bottom: 1px dashed var(--ink-faint); | |
| padding: 0; cursor: copy; transition: color .15s ease, border-color .15s ease; | |
| } | |
| .email-copy:hover { color: var(--ink); border-color: var(--ink); } | |
| .email-copy.copied { color: var(--save); border-bottom-color: transparent; font-weight: 600; } | |
| .cta-btn { | |
| font-family: var(--ui); font-size: 14px; font-weight: 700; text-decoration: none; | |
| padding: 11px 20px; border-radius: 11px; white-space: nowrap; transition: all .15s ease; | |
| border: 1px solid var(--line); background: #fff; color: var(--ink); | |
| } | |
| .cta-btn:hover { border-color: var(--ink-faint); } | |
| .cta-btn.primary { background: var(--hf); border-color: var(--hf-deep); color: var(--ink); box-shadow: var(--shadow-sm); } | |
| .cta-btn.primary:hover { background: var(--hf-deep); } | |
| .topbar { | |
| font-family: var(--mono); font-size: 11px; color: var(--ink-faint); | |
| letter-spacing: .02em; text-align: center; padding-bottom: 14px; | |
| } | |
| @media (max-width: 640px) { | |
| .cta-inner { flex-direction: column; align-items: flex-start; } | |
| .cta-side { width: 100%; align-items: flex-start; } | |
| .cta-actions { width: 100%; } | |
| .cta-btn { flex: 1; text-align: center; } | |
| } | |
| /* footer */ | |
| .foot { | |
| margin-top: 28px; font-size: 11.5px; color: var(--ink-faint); | |
| display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; | |
| font-family: var(--mono); | |
| } | |
| .foot a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); } | |
| /* ---------- entrance animation ---------- */ | |
| @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } | |
| .anim { opacity: 0; animation: rise .6s cubic-bezier(.2,.7,.2,1) forwards; } | |
| .d1 { animation-delay: .04s; } .d2 { animation-delay: .12s; } | |
| .d3 { animation-delay: .20s; } .d4 { animation-delay: .30s; } | |
| @media (prefers-reduced-motion: reduce) { .anim { animation: none; opacity: 1; } } | |
| /* ---------- responsive ---------- */ | |
| @media (max-width: 920px) { | |
| .lede h1 { white-space: normal; } | |
| } | |
| @media (max-width: 760px) { | |
| .console { grid-template-columns: 1fr; } | |
| .inputs { border-right: 0; border-bottom: 1px solid var(--line-soft); } | |
| } | |
| /* ---------- phones ---------- */ | |
| @media (max-width: 480px) { | |
| /* face-off: tighten the gap so both rates stay on one row */ | |
| .faceoff { gap: 10px; } | |
| .fo-num { font-size: 21px; } | |
| } | |
| /* ---------- touch devices: larger, comfier hit targets ---------- */ | |
| @media (pointer: coarse) { | |
| input[type="range"] { height: 8px; margin: 14px 0 2px; } | |
| input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; } | |
| input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; } | |
| .seg button { padding: 9px 16px; font-size: 13px; } | |
| .providers button { padding: 10px 14px; font-size: 13px; } | |
| .math summary { padding: 9px 0; } | |
| } | |