onyx-tyre-tools,onyx-tyre-compare,onyx-tyre-size-info,onyx-plus-sizing,onyx-speedo-calculator,onyx-load-speed-index,onyx-tyre-age,onyx-pressure-converter,onyx-rpm-calculator,onyx-wheel-offset,onyx-tread-depth,onyx-tyre-cost{display:block;margin:0 0 16px}
.tt{--tt-accent:var(--tt-accent-override,#FFC615);--tt-accent-fg:var(--tt-accent-fg-override,#0E0E10);--tt-accent-soft:var(--tt-accent-soft-override,#FEEEB2);--tt-highlight:var(--tt-highlight-override,#0E0E10);--tt-focus:var(--tt-focus-override,#0E0E10);--tt-bg:var(--tt-bg-override,#FFFFFF);--tt-fg:var(--tt-fg-override,#0E0E10);--tt-muted:#5C5F66;--tt-border:#E6E8EB;--tt-line:#D9D9D9;--tt-soft:#F8F9FB;--tt-field:#F2F3F5;--tt-ok:#2DB65C;--tt-ok-bg:#EDF9EF;--tt-ok-fg:#16632F;--tt-warn:#F59E0B;--tt-warn-bg:#FFF6E5;--tt-warn-fg:#8A4B00;--tt-bad:#E5484D;--tt-bad-bg:#FDEDED;--tt-bad-fg:#A1161B;--tt-info:#3B82F6;--tt-info-bg:#EAF2FE;--tt-info-fg:#1D4ED8;--tt-radius:var(--tt-radius-override,14px);
  font:inherit;color:var(--tt-fg);background:var(--tt-bg);border:1px solid var(--tt-border);border-radius:var(--tt-radius);padding:16px;box-sizing:border-box;display:block;max-width:100%;line-height:1.45;container-type:inline-size}
.tt *,.tt *::before,.tt *::after{box-sizing:border-box}
.tt-dark .tt,.tt[data-theme=dark]{--tt-accent:var(--tt-accent-override,#FFC615);--tt-accent-fg:var(--tt-accent-fg-override,#0E0E10);--tt-accent-soft:#3A2F0A;--tt-highlight:var(--tt-highlight-dark-override,#FFC615);--tt-focus:#FFC615;--tt-bg:#111113;--tt-fg:#F4F4F5;--tt-muted:#A1A1AA;--tt-border:#2E2E33;--tt-line:#3A3A40;--tt-soft:#1B1B1F;--tt-field:#1F1F24;--tt-ok:#3FCB6F;--tt-ok-bg:#12291B;--tt-ok-fg:#7EE2A0;--tt-warn:#F5B544;--tt-warn-bg:#2E2210;--tt-warn-fg:#F8CD7A;--tt-bad:#F0685C;--tt-bad-bg:#321514;--tt-bad-fg:#F7A39B;--tt-info:#6AA8F0;--tt-info-bg:#122238;--tt-info-fg:#A5C8F5}
@media (prefers-color-scheme:dark){.tt[data-theme=auto]{--tt-accent:var(--tt-accent-override,#FFC615);--tt-accent-fg:var(--tt-accent-fg-override,#0E0E10);--tt-accent-soft:#3A2F0A;--tt-highlight:var(--tt-highlight-dark-override,#FFC615);--tt-focus:#FFC615;--tt-bg:#111113;--tt-fg:#F4F4F5;--tt-muted:#A1A1AA;--tt-border:#2E2E33;--tt-line:#3A3A40;--tt-soft:#1B1B1F;--tt-field:#1F1F24;--tt-ok:#3FCB6F;--tt-ok-bg:#12291B;--tt-ok-fg:#7EE2A0;--tt-warn:#F5B544;--tt-warn-bg:#2E2210;--tt-warn-fg:#F8CD7A;--tt-bad:#F0685C;--tt-bad-bg:#321514;--tt-bad-fg:#F7A39B;--tt-info:#6AA8F0;--tt-info-bg:#122238;--tt-info-fg:#A5C8F5}}
.tt h2,.tt h3,.tt h4{margin:0 0 8px;line-height:1.25;font-weight:700}
.tt h2{font-size:1.25em}.tt h3{font-size:1.05em}.tt h4{font-size:.95em;color:var(--tt-muted);text-transform:uppercase;letter-spacing:.04em}
.tt p{margin:0 0 8px}
.tt small,.tt .tt-muted{color:var(--tt-muted);font-size:.875em}
.tt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 16px;margin-bottom:12px}
.tt-fieldset{border:1px solid var(--tt-border);border-radius:var(--tt-radius);padding:12px;margin:0;min-width:0}
.tt-fieldset legend{font-weight:600;padding:0 6px;font-size:.95em}
.tt-row{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.tt-field{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 90px}
.tt-field label{font-size:.8em;color:var(--tt-muted);font-weight:600}
.tt input,.tt select,.tt button{font:inherit;color:inherit}
.tt input[type=text],.tt input[type=number],.tt select{width:100%;padding:8px 12px;border:1px solid var(--tt-line);border-radius:calc(var(--tt-radius) - 4px);background:var(--tt-bg);min-height:44px}
.tt input:focus,.tt select:focus{outline:none;border-color:var(--tt-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--tt-accent) 45%,transparent)}
.tt button:focus-visible,.tt a:focus-visible,.tt summary:focus-visible{outline:2px solid var(--tt-focus);outline-offset:2px}
.tt-size-text{flex:2 1 160px}
.tt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border:1px solid var(--tt-accent);border-radius:calc(var(--tt-radius) - 2px);background:var(--tt-accent);color:var(--tt-accent-fg);cursor:pointer;text-decoration:none;font-weight:700;min-height:44px}
.tt-btn:hover{filter:brightness(.96)}
.tt-btn--ghost{background:var(--tt-bg);color:var(--tt-fg);border-color:var(--tt-line);font-weight:500}
.tt-btn--ghost:hover{filter:none;border-color:var(--tt-fg)}
.tt-btn--sm{padding:6px 12px;min-height:36px;font-size:.875em}
.tt-results{margin-top:12px}
.tt-table{width:100%;border-collapse:collapse;font-size:.95em;margin:8px 0 12px}
.tt-table th,.tt-table td{padding:7px 8px;border-bottom:1px solid var(--tt-border);text-align:right;vertical-align:top}
.tt-table th:first-child,.tt-table td:first-child{text-align:left}
.tt-table thead th{background:var(--tt-soft);font-weight:600}
.tt-table tbody tr:last-child td{border-bottom:0}
.tt-table .tt-diff{font-variant-numeric:tabular-nums;white-space:nowrap}
.tt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tt-verdict{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:calc(var(--tt-radius) - 4px);border:1px solid var(--tt-border);border-left-width:5px;background:var(--tt-soft);margin:8px 0}
.tt-verdict--ok{border-color:color-mix(in srgb,var(--tt-ok) 35%,var(--tt-bg));border-left-color:var(--tt-ok);background:var(--tt-ok-bg)}
.tt-verdict--caution,.tt-verdict--certification,.tt-verdict--inspect,.tt-verdict--replace-soon{border-color:color-mix(in srgb,var(--tt-warn) 35%,var(--tt-bg));border-left-color:var(--tt-warn);background:var(--tt-warn-bg)}
.tt-verdict--warning,.tt-verdict--fail,.tt-verdict--replace,.tt-verdict--illegal,.tt-verdict--stretch,.tt-verdict--narrow{border-color:color-mix(in srgb,var(--tt-bad) 35%,var(--tt-bg));border-left-color:var(--tt-bad);background:var(--tt-bad-bg)}
.tt-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75em;font-weight:700;background:var(--tt-field);color:var(--tt-muted);vertical-align:middle;white-space:nowrap;border:1px solid transparent}
.tt-badge--ok{background:var(--tt-ok-bg);color:var(--tt-ok-fg);border-color:var(--tt-ok)}.tt-badge--check{background:var(--tt-info-bg);color:var(--tt-info-fg);border-color:var(--tt-info)}.tt-badge--caution,.tt-badge--certification,.tt-badge--unknown{background:var(--tt-warn-bg);color:var(--tt-warn-fg);border-color:var(--tt-warn)}.tt-badge--warning,.tt-badge--fail{background:var(--tt-bad-bg);color:var(--tt-bad-fg);border-color:var(--tt-bad)}
.tt-badge--brand{background:var(--tt-accent);color:var(--tt-accent-fg);border-color:var(--tt-accent)}
.tt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:8px 0 12px}
.tt-stat{padding:12px 14px;border:0;border-radius:calc(var(--tt-radius) - 2px);background:var(--tt-soft)}
.tt-stat b{display:block;font-size:1.35em;font-weight:800;font-variant-numeric:tabular-nums}
.tt-stat span{font-size:.8em;color:var(--tt-muted)}
.tt-notes{margin:8px 0;padding-left:18px}.tt-notes li{margin:4px 0}
.tt-error{color:var(--tt-bad-fg);font-size:.9em;margin:6px 0}
.tt-cta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tt-footer{margin-top:12px;font-size:.75em;color:var(--tt-muted)}
.tt-footer a{color:inherit}
.tt-panel[hidden]{display:none}
/* ---- Shield from theme styles. WordPress themes often style button, select, td, summary… with their own
   fonts, sizes and colours; the :not(#tt_) adds id-level specificity so these resets win. ---- */
.tt:not(#tt_) :is(button,input,select,textarea,option,label,legend,fieldset,table,th,td,summary,details,li,ul,small,b,strong,em,a,p,span,code,div,svg text){font-family:inherit;letter-spacing:normal;text-transform:none;text-shadow:none;font-style:normal}
.tt:not(#tt_) :is(button,input,select,textarea){font-size:inherit;line-height:1.3;box-shadow:none;margin:0;height:auto;min-width:0;max-width:100%;text-decoration:none}
.tt:not(#tt_) :is(input[type=text],input[type=number],select){width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--tt-line);border-radius:calc(var(--tt-radius) - 4px);background:var(--tt-bg);color:var(--tt-fg);font-weight:400}
.tt:not(#tt_) :is(input[type=text],input[type=number],select):focus{outline:none;border-color:var(--tt-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--tt-accent) 45%,transparent)}
.tt:not(#tt_) :is(th,td){font-size:inherit;background:transparent;color:inherit}
.tt:not(#tt_) .tt-table{border:0;border-collapse:collapse;margin:8px 0 12px;width:100%}
.tt:not(#tt_) .tt-table :is(th,td){padding:7px 8px;border:0;border-bottom:1px solid var(--tt-border);text-align:right;vertical-align:top}
.tt:not(#tt_) .tt-table :is(th,td):first-child{text-align:left}
.tt:not(#tt_) .tt-table tbody tr:last-child td{border-bottom:0}
.tt:not(#tt_) .tt-table thead th{background:var(--tt-soft);font-weight:600;border-bottom:1px solid var(--tt-border)}
.tt:not(#tt_) summary{font-size:inherit;color:inherit}
.tt:not(#tt_) .tt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;padding:10px 18px;border:1px solid var(--tt-accent);border-radius:calc(var(--tt-radius) - 2px);background:var(--tt-accent);color:var(--tt-accent-fg);font-weight:700;min-height:44px;cursor:pointer}
.tt:not(#tt_) .tt-btn--ghost{background:var(--tt-bg);color:var(--tt-fg);border-color:var(--tt-line);font-weight:500}
.tt:not(#tt_) .tt-btn--sm{padding:6px 12px;min-height:36px;font-size:.9em}
/* ---- Tool menu (hub). Narrow: one swipeable row. Wide (container 860 px+): sidebar with icons and hints. ---- */
.tt-hub{padding:0;overflow:clip}
.tt-hub-nav{background:var(--tt-soft);border-bottom:1px solid var(--tt-border)}
.tt:not(#tt_) .tt-tabs{position:relative;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:12px;margin:0;list-style:none}
.tt-tabs::-webkit-scrollbar{display:none}
.tt:not(#tt_) .tt-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;scroll-snap-align:start;white-space:nowrap;padding:6px 14px 6px 6px;border:1px solid var(--tt-line);border-radius:999px;background:var(--tt-bg);color:var(--tt-fg);font-size:.92em;font-weight:600;cursor:pointer;text-align:left;width:auto;min-height:0}
.tt:not(#tt_) .tt-tab:hover{border-color:var(--tt-fg)}
.tt:not(#tt_) .tt-tab:focus-visible{outline:2px solid var(--tt-focus);outline-offset:2px}
.tt:not(#tt_) .tt-tab[aria-selected=true]{background:var(--tt-accent);border-color:var(--tt-accent);color:var(--tt-accent-fg)}
.tt:not(#tt_) .tt-tab-ico{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 5px;border-radius:999px;background:var(--tt-field);color:var(--tt-fg);font-size:.78em;font-weight:800;line-height:1}
.tt:not(#tt_) .tt-tab[aria-selected=true] .tt-tab-ico{background:var(--tt-accent-fg);color:var(--tt-accent)}
.tt-tab-text{display:flex;flex-direction:column;line-height:1.2}
.tt-tab-hint{display:none}
.tt-hub-panels{padding:16px;min-width:0}
.tt-hub-panels .tt{border:0;padding:0;border-radius:0;background:transparent}
.tt-panel:focus{outline:none}
@container (min-width:860px){
  .tt-hub-layout{display:grid;grid-template-columns:260px minmax(0,1fr)}
  .tt-hub-nav{border-bottom:0;border-right:1px solid var(--tt-border)}
  .tt:not(#tt_) .tt-tabs{flex-direction:column;overflow:visible;gap:4px;padding:14px;position:sticky;top:12px}
  .tt:not(#tt_) .tt-tab{width:100%;white-space:normal;border-radius:12px;border-color:transparent;background:transparent;padding:10px 12px;gap:12px}
  .tt:not(#tt_) .tt-tab:hover{background:var(--tt-bg);border-color:var(--tt-border)}
  .tt:not(#tt_) .tt-tab[aria-selected=true]{background:var(--tt-accent);border-color:var(--tt-accent)}
  .tt:not(#tt_) .tt-tab-ico{min-width:36px;height:36px;border-radius:10px;background:var(--tt-bg);border:1px solid var(--tt-border)}
  .tt:not(#tt_) .tt-tab[aria-selected=true] .tt-tab-ico{border-color:var(--tt-accent-fg)}
  .tt-tab-label{font-size:1em}
  .tt-tab-hint{display:block;margin-top:2px;font-size:.8em;font-weight:500;color:var(--tt-muted)}
  .tt-tab[aria-selected=true] .tt-tab-hint{color:var(--tt-accent-fg);opacity:.75}
  .tt-hub-panels{padding:22px 26px}
}

.tt-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.tt-chip{padding:3px 9px;border:1px solid var(--tt-border);border-radius:999px;font-size:.8em;cursor:pointer;background:var(--tt-bg)}
.tt-chip:hover{border-color:var(--tt-fg)}
.tt-svg{width:100%;height:auto;display:block;margin:8px 0}
.tt-faq{margin:12px 0 0}.tt-faq details{border-top:1px solid var(--tt-border);padding:8px 0}.tt-faq summary{cursor:pointer;font-weight:600}
.tt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@container (max-width:480px){.tt{padding:12px}.tt-table{font-size:.85em}.tt-table th,.tt-table td{padding:6px 4px}}