/* Wheel Offset Calculator. Everything is rooted on #woc so it beats the theme's .entry-content / .tg-content rules without !important. */
/* The tool is the page: the featured image stays for og:image and schema, hidden here so the tool starts high. */
body:has(#woc) .tg-arthero, body:has(#woc) .tg-ribbon { display: none; }
#woc {
	--ink: #0f0f12; --ink2: #17171c; --ink3: #202127; --red: #e11d2a; --amber: #ffb020; --green: #35c46b; --cyan: #5fd0ff;
	--line: rgba(255,255,255,.13); --line2: rgba(255,255,255,.07); --text: #f3f1ec; --soft: #b5b3ae; --mute: #8c8c92;
	--disp: var(--font-display, Oswald, 'Arial Narrow', sans-serif); --body: var(--font-body, Spectral, Georgia, serif); --ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ease: cubic-bezier(.16,1,.3,1); --st: var(--soft);
	position: relative; isolation: isolate; overflow: hidden;
	margin: 20px 0 32px; padding: 14px 24px 20px;
	border-radius: 2px; border-top: 3px solid var(--red); color: var(--text);
	background: radial-gradient(760px 340px at 96% -6%, rgba(225,29,42,.15), transparent 62%), linear-gradient(160deg, var(--ink2), var(--ink));
	font-family: var(--body); font-size: 16px; line-height: 1.45; container-type: inline-size;
}
#woc *, #woc *::before, #woc *::after { box-sizing: border-box; }
#woc div, #woc span, #woc label, #woc li, #woc summary { font-size: inherit; line-height: inherit; color: inherit; }
#woc ul { margin: 0; padding: 0; list-style: none; }
#woc li { margin: 0; padding: 0; list-style: none; }
#woc li::marker { content: ''; } #woc li::before { content: none; }
#woc button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; margin: 0; padding: 0; border-radius: 2px; text-transform: none; letter-spacing: normal; box-shadow: none; }
#woc input { margin: 0; font: inherit; color: inherit; box-shadow: none; }
#woc label { margin: 0; display: inline; font-weight: inherit; }
#woc button:focus-visible, #woc input:focus-visible, #woc summary:focus-visible, #woc [role=tab]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
#woc b { font-weight: 600; color: var(--text); }
#woc svg { display: block; }

/* top bar */
#woc .woc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 14px; }
#woc .woc-tabs { display: flex; gap: 4px; padding: 3px; background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 2px; }
#woc .woc-tabs button, #woc .woc-units button, #woc .woc-seg button, #woc .woc-axle button { padding: 9px 14px; min-height: 40px; font: 500 15px/1.1 var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); transition: background .2s, color .2s; }
#woc .woc-tabs button:hover, #woc .woc-units button:hover, #woc .woc-seg button:hover { color: #fff; }
#woc .woc-tabs button[aria-selected=true], #woc .woc-units button[aria-pressed=true], #woc .woc-seg button[aria-pressed=true], #woc .woc-axle button[aria-pressed=true] { background: var(--red); color: #fff; }
#woc .woc-units { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 2px; background: rgba(0,0,0,.35); }
#woc .woc-units button { min-width: 48px; }

/* picker */
#woc .woc-pick { padding: 14px 16px 12px; margin-bottom: 14px; background: var(--ink3); border: 1px solid var(--line2); }
#woc .woc-pick-h { margin-bottom: 8px; font: 500 14px/1.2 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
#woc .woc-pick-h span { text-transform: none; letter-spacing: 0; font: 400 14px/1.2 var(--body); color: var(--mute); }
#woc .woc-pick-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#woc .woc-cb label { display: block; margin-bottom: 3px; font: 500 12px/1.2 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
#woc .woc-cb-box { position: relative; }
#woc .woc-cb input { width: 100%; height: 46px; padding: 0 34px 0 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 2px; background: #08090a; color: #fff; font: 500 17px/1 var(--disp); letter-spacing: .03em; outline: 0; transition: border-color .2s, box-shadow .2s; }
#woc .woc-cb input::placeholder { color: #5f6068; opacity: 1; }
#woc .woc-cb input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(225,29,42,.25); }
#woc .woc-cb input:disabled { opacity: .45; cursor: not-allowed; }
#woc .woc-cb-x { position: absolute; right: 2px; top: 2px; width: 40px; height: 42px; font-size: 22px; line-height: 1; color: var(--soft); }
#woc .woc-cb-x:hover { color: #fff; }
#woc .woc-cb ul { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 3px); max-height: 264px; overflow: auto; background: #0b0b0e; border: 1px solid var(--red); box-shadow: 0 14px 32px rgba(0,0,0,.55); }
#woc .woc-cb ul[hidden] { display: none; }
#woc .woc-cb li { padding: 11px 12px; font: 400 16px/1.25 var(--body); cursor: pointer; border-top: 1px solid var(--line2); }
#woc .woc-cb li:first-child { border-top: 0; }
#woc .woc-cb li small { display: block; margin-top: 2px; font: 400 13px/1.2 var(--body); color: var(--mute); }
#woc .woc-cb li[aria-selected=true], #woc .woc-cb li:hover { background: rgba(225,29,42,.22); }
#woc .woc-cb li.woc-none { cursor: default; color: var(--mute); }
#woc .woc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#woc .woc-chips[hidden] { display: none; }
#woc .woc-chip { padding: 5px 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font: 500 13px/1.3 var(--disp); letter-spacing: .05em; color: var(--text); animation: woc-pop .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
#woc .woc-chip b { color: var(--amber); font-weight: 500; }
#woc .woc-chip-n { flex: 1 1 100%; padding: 0; border: 0; background: none; font: 400 14px/1.35 var(--body); color: var(--soft); }
#woc .woc-chip-n b { color: #fff; font-weight: 600; }
#woc .woc-chip.is-warn { border-color: var(--amber); }
#woc .woc-chip-n.is-warn { padding: 8px 10px; border: 1px solid var(--amber); background: rgba(255,176,32,.08); color: var(--text); }

/* stage */
#woc .woc-stage { position: relative; margin: 0 -24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(520px 260px at 50% 40%, #16171c, #0a0b0d 78%); }
#woc .woc-stage-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 24px 0; }
#woc .woc-seg { display: flex; border: 1px solid var(--line); }
#woc .woc-seg button { padding: 8px 12px; min-height: 38px; font-size: 14px; }
#woc .woc-key { display: flex; align-items: center; gap: 6px; font: 500 13px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
#woc .woc-key i { display: inline-block; width: 22px; height: 12px; margin-left: 10px; border: 1px dashed #9a9aa2; } #woc .woc-key i:first-child { margin-left: 0; }
#woc .woc-key i.woc-k-new { border: 0; background: linear-gradient(#e2e3e8, #8c8d96); border-radius: 1px; }
#woc .woc-svgbox { position: relative; aspect-ratio: 720 / 460; width: 100%; --k: 17; }
#woc .woc-svgbox.is-narrow .s-opt { display: none; }
#woc .woc-svgbox svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
#woc .woc-svgbox svg[hidden] { display: none; }
#woc .woc-ns { padding: 8px 24px; font-size: 14px; color: var(--mute); }
/* svg parts: every stroke/fill sits on a class that only lands on an SVG child */
#woc .s-bg { fill: none; }
#woc .s-axis { stroke: rgba(255,255,255,.28); stroke-width: 1.2; stroke-dasharray: 6 6; fill: none; }
#woc .s-cl { stroke: var(--amber); stroke-width: 1.6; stroke-dasharray: 8 5; fill: none; }
#woc .s-ghost { fill: rgba(255,255,255,.035); stroke: #9a9aa2; stroke-width: 1.5; stroke-dasharray: 6 5; }
#woc .s-ghost-l { fill: none; stroke: #9a9aa2; stroke-width: 1.5; stroke-dasharray: 6 5; }
#woc .s-tire { fill: url(#woc-g-tire); stroke: #4a4b53; stroke-width: 1.5; }
#woc .s-tread { fill: none; stroke: #07070a; stroke-width: 7; stroke-dasharray: 7 5; }
#woc .s-wheel { fill: url(#woc-g-metal); stroke: #3d3e46; stroke-width: 1.5; }
#woc .s-rim { fill: none; stroke: #c4c6ce; stroke-linejoin: round; stroke-linecap: round; }
#woc .s-web { fill: none; stroke: #a4a6b0; stroke-linecap: butt; stroke-linejoin: round; }
#woc .s-hub { fill: url(#woc-g-hub); stroke: #3a3b42; stroke-width: 1.2; }
#woc .s-pad { fill: none; stroke: var(--red); stroke-width: 2.4; }
#woc .s-spacer { fill: var(--amber); fill-opacity: .85; stroke: #7a5200; stroke-width: 1; }
#woc .s-strut { fill: url(#woc-g-strut); stroke: #4a4b53; stroke-width: 1.2; }
#woc .s-fender { fill: url(#woc-g-body); stroke: #5a5b64; stroke-width: 1.2; }
#woc .s-lipline { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; }
#woc .s-zone { fill: var(--zc, rgba(255,255,255,.08)); stroke: var(--zs, rgba(255,255,255,.3)); stroke-width: 1; stroke-dasharray: 3 4; transition: fill .5s, stroke .5s; }
#woc .s-zone.is-live { stroke-dasharray: none; animation: woc-glow 2.4s ease-in-out infinite; }
#woc .s-dim { stroke: #fff; stroke-width: 1.4; fill: none; }
#woc .s-dimh { stroke: var(--amber); }
#woc .s-tx { fill: #e8e6e1; font: 500 calc(var(--k) * 1px) var(--disp); letter-spacing: .06em; text-anchor: middle; paint-order: stroke; stroke: rgba(8,9,11,.92); stroke-width: 4px; stroke-linejoin: round; }
#woc .s-tx.s-sm { font-size: calc(var(--k) * .82px); fill: var(--soft); text-transform: uppercase; letter-spacing: .1em; }
#woc .s-tx.s-am { fill: var(--amber); } #woc .s-tx.s-gr { fill: var(--green); } #woc .s-tx.s-rd { fill: #ff6a73; } #woc .s-tx.s-st { text-anchor: start; } #woc .s-tx.s-en { text-anchor: end; }
#woc .s-body { fill: url(#woc-g-body); stroke: #4a4b53; stroke-width: 1.5; }
#woc .s-car { fill: none; stroke: #4a4b53; stroke-width: 1.5; }
#woc .s-axle { stroke: #5a5b64; stroke-width: 9; stroke-linecap: round; }
#woc .s-trk { stroke: var(--amber); stroke-width: 1.6; fill: none; }

/* verdict */
#woc .woc-verdict { display: flex; align-items: center; gap: 14px; margin: 0 -24px 16px; padding: 14px 24px; background: linear-gradient(90deg, color-mix(in srgb, var(--st) 18%, #0b0b0e), #0b0b0e 80%); border-bottom: 1px solid var(--line); border-left: 5px solid var(--st); transition: border-color .4s, background .4s; }
#woc .woc-verdict[data-status=fit] { --st: var(--green); } #woc .woc-verdict[data-status=tight] { --st: var(--amber); } #woc .woc-verdict[data-status=rub] { --st: var(--red); } #woc .woc-verdict[data-status=info] { --st: #8fb4c8; }
#woc .woc-vi { flex: none; width: 48px; height: 48px; }
#woc .woc-vi svg { width: 100%; height: 100%; }
#woc .woc-vh { font: 600 26px/1.1 var(--disp); letter-spacing: .02em; text-transform: uppercase; color: var(--st); transition: color .4s; }
#woc .woc-vt { margin-top: 3px; font: 400 17px/1.4 var(--body); color: var(--text); }
#woc .woc-wspin { transform-origin: 24px 24px; }
#woc .woc-wring { stroke: var(--st); transition: stroke .4s; }

/* setups */
#woc .woc-sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#woc .woc-card { padding: 16px 16px 14px; background: var(--ink3); border: 1px solid var(--line2); min-width: 0; }
#woc .woc-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-height: 30px; }
#woc .woc-h { font: 500 14px/1.2 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
#woc .woc-card-h .woc-h { font-size: 17px; color: #fff; }
#woc .woc-dot { width: 12px; height: 12px; border: 2px dashed #9a9aa2; flex: none; }
#woc .woc-set[data-set=nw] .woc-dot { border: 0; background: linear-gradient(#e2e3e8, #8c8d96); }
#woc .woc-dot-g { border: 2px solid var(--green); }
#woc .woc-opt { margin-left: auto; font: 400 13px/1 var(--body); color: var(--mute); }
#woc .woc-axle { margin-left: auto; display: flex; border: 1px solid var(--line); }
#woc .woc-axle[hidden] { display: none; }
#woc .woc-axle button { padding: 5px 10px; min-height: 30px; font-size: 13px; }
#woc .woc-row { margin-bottom: 12px; }
#woc .woc-row:last-child { margin-bottom: 0; }
#woc .woc-lab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; font: 500 13px/1.2 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
#woc .woc-lab label { color: #fff; font-size: 14px; }
#woc .woc-un { color: var(--mute); }
#woc .woc-step { display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,.22); background: #08090a; transition: border-color .2s, box-shadow .2s; }
#woc .woc-step:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(225,29,42,.25); }
#woc .woc-step button { flex: none; width: 48px; height: 48px; font: 400 26px/1 var(--disp); color: var(--soft); transition: background .15s, color .15s; }
#woc .woc-step button:hover { background: rgba(225,29,42,.25); color: #fff; }
#woc .woc-step button:active { background: var(--red); }
#woc .woc-step input, #woc .woc-text { flex: 1 1 auto; min-width: 0; width: 100%; height: 48px; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: #fff; text-align: center; font: 500 24px/1 var(--disp); letter-spacing: .04em; outline: 0; -moz-appearance: textfield; appearance: textfield; }
#woc .woc-step input::-webkit-outer-spin-button, #woc .woc-step input::-webkit-inner-spin-button, #woc .woc-text::-webkit-outer-spin-button, #woc .woc-text::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#woc .woc-text { border: 1px solid rgba(255,255,255,.22); background: #08090a; text-align: left; padding: 0 12px; transition: border-color .2s, box-shadow .2s; }
#woc input.woc-text[type=text] { text-transform: uppercase; }
#woc .woc-text:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(225,29,42,.25); }
#woc .woc-text::placeholder { color: #5f6068; opacity: 1; text-transform: none; font-size: 20px; }
#woc .woc-text.is-bad { border-color: var(--red); }
#woc .woc-hint { margin-top: 5px; font: 400 14px/1.35 var(--body); color: var(--mute); min-height: 1.35em; }
#woc .woc-range { display: block; width: 100%; height: 22px; margin: 6px 0 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 50%; }
#woc .woc-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--red) var(--p), rgba(255,255,255,.16) var(--p)); }
#woc .woc-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--red) var(--p), rgba(255,255,255,.16) var(--p)); }
#woc .woc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border: 2px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .15s; }
#woc .woc-range::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--red); }
#woc .woc-range:active::-webkit-slider-thumb { transform: scale(1.18); }
#woc .woc-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2); }
#woc .woc-pl { flex: 1 1 100%; font: 500 12px/1.2 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
#woc .woc-presets button, #woc .woc-sug-b button, #woc .woc-act button { min-height: 38px; padding: 7px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font: 500 14px/1.2 var(--disp); letter-spacing: .05em; color: var(--text); transition: border-color .15s, background .15s, transform .15s; }
#woc .woc-presets button:hover, #woc .woc-sug-b button:hover, #woc .woc-act button:hover { border-color: var(--red); background: rgba(225,29,42,.15); transform: translateY(-2px); }
#woc .woc-presets button.is-on { background: var(--red); border-color: var(--red); color: #fff; }

/* clearances */
#woc .woc-clr { margin-top: 14px; }
#woc .woc-clr-t { margin: -4px 0 12px; font: 400 15px/1.4 var(--body); color: var(--soft); }
#woc .woc-clr-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
#woc .woc-clr .woc-text { text-align: center; font-size: 24px; padding: 0 8px; }
#woc .woc-how { margin-top: 10px; border-top: 1px solid var(--line2); padding-top: 8px; }
#woc .woc-how summary { cursor: pointer; font: 500 14px/1.3 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); padding: 6px 0; list-style: none; }
#woc .woc-how summary::-webkit-details-marker { display: none; }
#woc .woc-how summary::before { content: '+'; display: inline-block; width: 18px; color: var(--red); }
#woc .woc-how[open] summary::before { content: '\2212'; }
#woc .woc-how-b { padding: 4px 0 4px 18px; font: 400 15px/1.5 var(--body); color: var(--soft); }
#woc .woc-lip { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#woc .woc-lip label { font: 500 13px/1.2 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
#woc .woc-lip .woc-text { width: 96px; flex: none; height: 42px; font-size: 20px; text-align: center; }

/* results */
#woc .woc-results { margin-top: 16px; }
#woc .woc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#woc .woc-rc { position: relative; min-width: 0; padding: 16px 16px 14px; background: var(--ink3); border: 1px solid var(--line2); border-top: 2px solid var(--red); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
#woc .woc-rc:hover { transform: translateY(-3px); border-color: rgba(225,29,42,.6); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
#woc .woc-big { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font: 600 44px/1.05 var(--disp); color: #fff; font-variant-numeric: tabular-nums; }
#woc .woc-big .woc-u { font: 500 17px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
#woc .woc-big-t { font-size: 28px; text-transform: uppercase; letter-spacing: .02em; min-height: 46px; align-items: center; }
#woc .woc-rl { margin-top: 2px; font: 500 15px/1.2 var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
#woc .woc-ra { margin-top: 2px; font: 400 14px/1.3 var(--body); color: var(--mute); }
#woc .woc-rt { margin-top: 8px; font: 400 15px/1.45 var(--body); color: var(--soft); }
#woc .woc-rc.is-flash { animation: woc-flash .7s ease-out; }
#woc .woc-sug { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line); }
#woc .woc-sug .woc-pl { margin-bottom: 8px; flex: none; }
#woc .woc-sug-b { display: flex; flex-wrap: wrap; gap: 8px; }
#woc .woc-sug-b button[hidden] { display: none; }
#woc .woc-sug-b b { color: var(--amber); font-weight: 500; }
#woc .woc-notes { margin-top: 12px; }
#woc .woc-notes[hidden] { display: none; }
#woc .woc-notes li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--line2); font: 400 15px/1.4 var(--body); color: var(--soft); }
#woc .woc-notes li::before { content: '!'; display: block; position: absolute; left: 0; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--amber); color: #000; font: 700 11px/15px var(--disp); text-align: center; }
#woc .woc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
#woc .woc-toast { font: 500 14px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--green); opacity: 0; transition: opacity .3s; }
#woc .woc-toast.is-on { opacity: 1; }
#woc .woc-disc { margin-top: 16px; font: 400 13px/1.4 var(--body); color: var(--mute); }

/* converter */
#woc .woc-conv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px; align-items: start; }
#woc .woc-conv-g { display: grid; gap: 4px; }
#woc .woc-conv .woc-text { text-align: center; font-size: 24px; }
#woc .woc-conv-fig { margin: -4px -4px 8px; aspect-ratio: 480 / 220; --k: 17; }
#woc .woc-conv-fig svg { width: 100%; height: 100%; }
#woc .woc-conv-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#woc .woc-cr { padding: 10px 12px; background: rgba(0,0,0,.28); border-left: 2px solid var(--red); }
#woc .woc-cr .woc-big { font-size: 34px; }
#woc [hidden] { display: none; }

/* motion */
#woc .woc-pick, #woc .woc-stage, #woc .woc-verdict, #woc .woc-card, #woc .woc-rc, #woc .woc-sug, #woc .woc-act { animation: woc-up .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
#woc .woc-pick { --i: 1; } #woc .woc-stage { --i: 2; } #woc .woc-verdict { --i: 3; } #woc .woc-sets .woc-card:first-child { --i: 4; } #woc .woc-sets .woc-card:last-child { --i: 5; } #woc .woc-clr { --i: 6; }
#woc .woc-rc:nth-child(1) { --i: 7; } #woc .woc-rc:nth-child(2) { --i: 8; } #woc .woc-rc:nth-child(3) { --i: 9; } #woc .woc-rc:nth-child(4) { --i: 10; } #woc .woc-rc:nth-child(5) { --i: 11; } #woc .woc-rc:nth-child(6) { --i: 12; }
#woc [role=tabpanel]:not([hidden]).is-swap { animation: woc-up .45s var(--ease); }
@keyframes woc-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes woc-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes woc-glow { 0%, 100% { fill-opacity: .8; } 50% { fill-opacity: 1; } }
@keyframes woc-flash { 0% { box-shadow: 0 0 0 0 rgba(225,29,42,.7); } 100% { box-shadow: 0 0 0 14px rgba(225,29,42,0); } }
@keyframes woc-spin { from { transform: rotate(-420deg); } to { transform: rotate(0); } }
#woc .woc-wspin { animation: woc-spin 1.6s cubic-bezier(.1,.7,.2,1) both; }

@container (max-width: 700px) {
	#woc .woc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#woc .woc-conv { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 560px) {
	#woc .woc-svgbox { aspect-ratio: 480 / 460; }
	#woc .woc-sets, #woc .woc-clr-g { grid-template-columns: minmax(0, 1fr); }
	#woc .woc-pick-g { grid-template-columns: minmax(0, 1fr); }
	#woc .woc-cards { grid-template-columns: minmax(0, 1fr); }
	#woc .woc-clr-g .woc-row { margin-bottom: 12px; }
	#woc .woc-big { font-size: 40px; }
	#woc .woc-vh { font-size: 22px; } #woc .woc-vt { font-size: 16px; }
	#woc .woc-tabs { width: 100%; } #woc .woc-tabs button { flex: 1 1 0; padding: 9px 8px; font-size: 14px; }
	#woc .woc-units { margin-left: auto; }
}
@media (max-width: 560px) {
	body:has(#woc) .tg-arthead__standfirst { display: none; }
	#woc { padding: 12px 16px 16px; }
	#woc .woc-stage, #woc .woc-verdict { margin-left: -16px; margin-right: -16px; }
	#woc .woc-stage-bar, #woc .woc-verdict { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	#woc *, #woc *::before, #woc *::after { animation: none !important; transition: none !important; }
}