html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
.wpage { padding-block: 56px 80px; }
.wpage:focus { outline: none; }
/* GoldR week by week: the share of winning weeks as a ring beside the headline, then every start day as a calendar square,
   the spread of results and the years. One dark look in the site's own tokens. Everything is scoped to .wk so the page can
   sit inside the site's shell (privacy.css) as well as stand alone as the owner's preview. */
.wk {
  color-scheme: dark;
  --bg: #07080a; --surface: #0e1014; --raised: #15181e; --ink: #f5f3ec; --muted: #aab2be; --quiet: #7f8997;
  --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16);
  --gold: #e2c46c; --gold-soft: #f3dc93; --gold-deep: #a9873a; --on-gold: #17130a;
  --up: #7ee0a3; --down: #ff8b86;
  /* calendar steps: losses, profits, drops inside the week, untested days */
  --l3: #ff8b86; --l2: #b8524c; --l1: #6a302e;
  --p1: #21432f; --p2: #2f7550; --p3: #50b47c; --p4: #93f2b8;
  --d1: #2f2a1d; --d2: #5b4a24; --d3: #957532; --d4: #e2c46c; --d5: #ff8b86;
  --none: #1f232b;
  --display: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  display: grid; gap: 28px; color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased;
}
.wk *, .wk *::before, .wk *::after { box-sizing: border-box; }
.wk .draft { margin: 0; padding: 10px 14px; border: 1px dashed var(--gold-deep); border-radius: 12px; color: var(--gold-soft); font-size: 14px; }
.wk :focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

/* hero */
/* the top: one card, the question and the switches beside the result, the last 260 tests under both */
.wk .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px 44px; align-items: start; padding: clamp(20px, 3.4vw, 38px);
  border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%), var(--surface); }
.wk .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--gold); font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.wk .eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.wk h1 { font: 700 clamp(32px, 4.6vw, 54px)/1.04 var(--display); letter-spacing: -.035em; margin: 16px 0 14px; text-wrap: balance; }
.wk .gold-text { background: linear-gradient(100deg, #f7e3a3 0%, var(--gold) 38%, #c99f45 70%, #f3dc93 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk .lede { color: var(--muted); max-width: 46ch; margin: 0; font-size: 16.5px; }
.wk .switch { display: grid; gap: 8px; margin-top: 22px; }
.wk .switch > span { color: var(--quiet); font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
/* under the version buttons: the versions these tests ran on, 7.6 and 7.6.1 (owner 19 Oct). At 1440 the
   words column stays no taller than the ring and facts beside it (423 px), so the top keeps its height: 4 px of the gap to the
   period switch pay for the line. */
.wk .vnote { margin: 0 0 -4px; color: var(--quiet); font-size: 13px; line-height: 1.45; }
.wk .vnote a { color: var(--gold-soft); font-weight: 600; }
.wk .vnote a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Version and Period share one label column, so both button rows start on one line; where the three versions no longer fit
   beside the label (owner's phone, 2026-10-03: Version above, Period beside) both rows put the label above */
.wk .hero .lead { container-type: inline-size; min-width: 0; }
@container (max-width: 400px) { .wk .switch .seg.big button { padding-inline: 10px; font-size: 13px; } }   /* the period row on one line */
@container (max-width: 340px) { .wk .switch .seg.big button { padding-inline: 7px; font-size: 12.5px; } }
@media (max-width: 420px) { .wk #modes button { white-space: nowrap; padding-inline: 10px; } }   /* "Drop inside the half-year" never splits at its hyphen (A-Z #21) */
@media (max-width: 379px) { .wk #modes button { padding-inline: 8px; font-size: 12.5px; } }   /* "Quarter result" and "Drop inside the quarter" keep one row at 360 */
.wk .eyebrow > span { text-wrap: balance; }
.wk .result { display: grid; gap: 18px; min-width: 0; }
@media (min-width: 761px) and (max-width: 1100px) { .wk .hero .result { align-self: stretch; grid-template-rows: 1fr auto; } .wk .ringrow { align-self: center; } }   /* the facts end with the switches beside them, 64 px over at 1000 (A-Z #23) */
/* the ring beside two lines: how many ended in profit, and the license fee under it (roast 19 Oct #19). The fee line sits in the
   room beside the ring, so the top keeps its 1440 height. Up to 950 px the top's two columns left it 120-200 px there (768: 15
   lines, the top 878 px tall; review 20 Oct), so it runs under the ring at the row's full width: the top is shorter that way up
   to 950 px and taller from 960 (1000: 692 px against 673 beside the ring) */
.wk .ringrow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 22px; }
.wk .ringrow .ring { grid-row: 1 / span 2; }
.wk .said { align-self: end; margin: 0; color: var(--muted); font-size: 15.5px; }
.wk .fee { align-self: start; margin: 0; color: var(--quiet); font-size: 13px; line-height: 1.5; }
.wk .fee b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* "+" and "€292" on one line */
.wk .fee:empty { display: none; }
@media (max-width: 950px) { .wk .ringrow .ring { grid-row: auto; } .wk .said { align-self: center; } .wk .fee { grid-column: 1 / -1; } }
.wk .said b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wk .ring { position: relative; flex: none; width: clamp(150px, 15vw, 196px); aspect-ratio: 1; max-width: 100%; margin: 0; }
.wk .ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.wk .ring .track { fill: none; stroke: var(--line-strong); stroke-width: 9; }
.wk .ring .val { fill: none; stroke: url(#ringGold); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 527.79 527.79; stroke-dashoffset: 121.39; animation: wk-draw 1.6s var(--ease) .15s both; }
/* drawn to the 77% the page shows before its data loads: the ring said 77% over an empty arc (live audit 2026-10-12) */
.wk .ring .val.settled { animation: none; transition: stroke-dashoffset 1s var(--ease); }
@keyframes wk-draw { from { stroke-dashoffset: 527.79; } }
.wk .ring figcaption { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; }
.wk .ring strong { font: 700 clamp(38px, 3.6vw, 50px)/1 var(--display); letter-spacing: -.04em; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.wk .ring span { color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.3; }

/* facts */
.wk .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.wk .facts div { background: var(--raised); padding: 14px 16px; display: grid; gap: 4px; align-content: start; min-width: 0; grid-row: span 3; grid-template-rows: subgrid; }
.wk .facts span { color: var(--quiet); font-size: 13px; }
.wk .facts strong { font: 650 23px/1.15 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wk .facts small { color: var(--quiet); font-size: 12.5px; }
.wk .facts .down { color: var(--down); } .wk .facts .up { color: var(--up); }

/* panels */
.wk .panel { min-width: 0; display: grid; gap: 20px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line); border-radius: 22px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(226,196,108,.06), transparent 55%), linear-gradient(180deg, #111318, #0c0e12); }
.wk .phead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; }
.wk .phead h2 { font: 650 clamp(22px, 2.6vw, 28px)/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 6px; }
.wk .phead p { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 62ch; }
.wk .seg { display: inline-flex; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255,255,255,.02); }
.wk .seg button { border: 0; background: transparent; color: var(--muted); padding: 8px 15px; border-radius: 999px; font: 600 13px/1 var(--body); cursor: pointer; transition: background .2s, color .2s; }
.wk .seg.big button { padding: 11px 18px; font-size: 14px; }
.wk .seg button:hover { color: var(--ink); }
.wk .seg button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
/* a tap: the gold switch shines and what will change fades while the page redraws (results.js soon(), owner 2026-10-11) */
/* one gold thumb slides to the tapped option (results.js slide(); without script the pressed button stays gold) */
.wk .seg.slide { position: relative; isolation: isolate; }
.wk .seg.slide button { position: relative; z-index: 1; }
.wk .seg.slide button[aria-pressed="true"] { background: transparent; }
.wk .seg .thumb { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--gold); box-shadow: 0 6px 18px -8px rgba(226,196,108,.7);
  transition: transform .34s var(--ease), width .34s var(--ease), height .34s var(--ease); }
.wk .seg .thumb.now { transition: none; }
/* the switches of the top fill their column: a row of equal parts */
.wk .hero .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.wk .hero .seg button { padding: 11px 6px; font-size: 13.5px; white-space: nowrap; }
/* four versions on a phone: two by two, each name on one line (owner's phone 2026-10-11: one row of four ran past the right edge) */
@container (max-width: 489px) { .wk #vers { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px; } }
/* five periods on one phone row (owner 11 Oct): the short words show, the long ones stay for
   screen readers */
.wk #period .ps { display: none; }
@container (max-width: 489px) {
  .wk #period .pl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wk #period .ps { display: inline; }
}

/* colour steps, shared by the squares and the key */
.wk .l3 { fill: var(--l3); background: var(--l3); } .wk .l2 { fill: var(--l2); background: var(--l2); } .wk .l1 { fill: var(--l1); background: var(--l1); }
.wk .p1 { fill: var(--p1); background: var(--p1); } .wk .p2 { fill: var(--p2); background: var(--p2); } .wk .p3 { fill: var(--p3); background: var(--p3); } .wk .p4 { fill: var(--p4); background: var(--p4); }
.wk .d1 { fill: var(--d1); background: var(--d1); } .wk .d2 { fill: var(--d2); background: var(--d2); } .wk .d3 { fill: var(--d3); background: var(--d3); } .wk .d4 { fill: var(--d4); background: var(--d4); } .wk .d5 { fill: var(--d5); background: var(--d5); }
.wk .none { fill: var(--none); background: var(--none); }
.wk .shut { fill: transparent; stroke: var(--quiet); stroke-opacity: .55; stroke-width: 1px; vector-effect: non-scaling-stroke; box-shadow: inset 0 0 0 1px var(--quiet); }
.wk .key i.shut { opacity: .55; }   /* market closed: 0 ticks in the tester */
.wk .idle { fill: transparent; stroke: var(--gold); stroke-opacity: .5; stroke-width: 1px; vector-effect: non-scaling-stroke; box-shadow: inset 0 0 0 1px var(--gold); }
.wk .key i.idle { opacity: .55; }   /* GoldR holiday (its HOLIDAYS table, 2023 on): prices, no trades */
.wk .key { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 14px; color: var(--quiet); font-size: 12.5px; }
.wk .steps { position: relative; display: grid; grid-auto-flow: column; gap: 3px; padding-bottom: 16px; margin-bottom: -16px; }
.wk .steps i, .wk .key .nk i { display: block; height: 12px; border-radius: 3px; }
.wk .steps b { position: absolute; top: 16px; transform: translateX(-50%); font: 500 10px/1 var(--mono); color: var(--quiet); white-space: nowrap; }
.wk .key .nk { display: inline-flex; align-items: center; gap: 7px; }
.wk .key .steps + .lohi { margin-right: 8px; }
.wk .key .nk i { width: 12px; }

/* the selected week; .calbox is a plain flex column so the sticky detail can move along the whole calendar */
.wk .calbox { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wk .detail { position: sticky; top: 8px; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 12px 20px; align-items: center; min-height: 88px;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: #0b0c0f; box-shadow: 0 10px 24px -12px rgba(0,0,0,.9); }
.wk .detail .when { font: 600 15px/1.3 var(--display); }
.wk .detail .wd { font-style: normal; }
.wk .detail .when small { display: block; margin-top: 4px; color: var(--quiet); font: 12px/1.2 var(--mono); }
.wk .detail span { display: grid; gap: 3px; color: var(--quiet); font-size: 12px; grid-row: span 2; grid-template-rows: subgrid; }   /* values level when a label wraps */
.wk .detail .when { grid-row: span 2; }
.wk .detail b { color: var(--ink); font: 600 18px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.wk .detail b.up { color: var(--up); } .wk .detail b.down { color: var(--down); }

/* calendar */
.wk #cal { display: grid; gap: 20px; border-radius: 10px; }
.wk .yr { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 16px; }
.wk .yr-head { display: grid; align-content: start; gap: 3px; padding-top: 16px; }
.wk .yr-head b { font: 650 19px/1 var(--display); letter-spacing: -.01em; margin-bottom: 3px; }
.wk .yr-head span { color: var(--quiet); font: 12px/1.35 var(--mono); }
.wk .parts { display: grid; gap: 10px; min-width: 0; }
.wk .part { display: grid; gap: 4px; min-width: 0; }
.wk .mons { position: relative; height: 14px; color: var(--quiet); font: 10.5px/14px var(--mono); }
.wk .mons span { position: absolute; top: 0; }
.wk .part svg { display: block; width: 100%; height: auto; touch-action: pan-y; overflow: visible; }   /* the chosen square's ring is drawn whole on the Monday and Friday rows (owner's phone 2026-10-11: it was cut) */
.wk .part rect[data-i] { cursor: crosshair; }
.wk .part rect.sel { stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
/* a switch recolours the squares in place, in a wave from the left (results.js sets each column's delay) */
.wk .part rect { transition: fill .45s var(--ease); }
.wk .strip { grid-column: 1 / -1; display: grid; gap: 10px; }
.wk .strip-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.wk .strip-head b { font: 600 14px/1.3 var(--body); }
.wk .strip-head > span { color: var(--quiet); font: 500 12px/1.3 var(--mono); }
.wk .squares { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.wk .squares i { aspect-ratio: 1; border-radius: 2.5px; transition: background-color .45s var(--ease); }
.wk .squares:empty { aspect-ratio: 10.7; }   /* its height before the data lands: 52 columns of 5 (audit 19 Oct #89) */

/* spread of results */
.wk .hist { position: relative; height: 250px; margin: 22px 0 22px 36px; }
.wk .hist .bars { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid var(--line-strong); }
.wk .hist .bars span { flex: 1; min-width: 0; display: flex; align-items: flex-end; cursor: crosshair; }
.wk .hist .bars i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--p3); transition: filter .15s; transform-origin: bottom; animation: wk-grow .5s var(--ease) both; }
@keyframes wk-grow { from { transform: scaleY(0); } }
.wk .hist .bars i.neg { background: var(--l2); }
.wk .hist .bars i.over { background: repeating-linear-gradient(135deg, var(--p3) 0 6px, var(--p2) 6px 9px); }
.wk .hist .bars { touch-action: pan-y; }   /* a finger slides along the bars */
.wk .hist .oc { position: absolute; top: 2px; transform: translateX(calc(-100% - 5px)); color: var(--ink); font: 600 10.5px/1 var(--mono); pointer-events: none; }
.wk .hist .bars span:hover i, .wk .hist .bars span.on i { filter: brightness(1.35); }
.wk .hist .gl { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); pointer-events: none; }
.wk .hist .gl b { position: absolute; right: calc(100% + 8px); top: -7px; color: var(--quiet); font: 500 10.5px/1 var(--mono); }
.wk .hist .x { position: absolute; top: calc(100% + 8px); transform: translateX(-50%); color: var(--quiet); font: 500 10.5px/1 var(--mono); white-space: nowrap; }
.wk .hist .med { position: absolute; top: -18px; bottom: 0; border-left: 1.5px dashed var(--gold); pointer-events: none; }
.wk .hist .med.flip b { left: auto; right: 6px; }
.wk .hist .med b { position: absolute; left: 6px; top: -2px; color: var(--gold-soft); font: 600 11px/1 var(--mono); white-space: nowrap; }
.wk .hcap { display: grid; min-height: 22px; color: var(--muted); font: 13px/1.5 var(--mono); }
.wk .hcap > span { grid-area: 1 / 1; }
.wk .hcap .cnt, .wk .hcap.on .rest { visibility: hidden; }
.wk .hcap.on .cnt { visibility: visible; }
.wk .hcap b { color: var(--ink); font-weight: 600; }

/* years */
.wk .tablewrap { overflow-x: auto; }
.wk table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wk th, .wk td { padding: 13px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wk th:first-child { text-align: left; }
.wk thead th { color: var(--quiet); font: 500 11.5px/1.3 var(--body); text-transform: uppercase; letter-spacing: .07em; }
.wk tbody th { font: 600 16px/1.6 var(--display); }
.wk tbody tr:last-child th, .wk tbody tr:last-child td { border-bottom: 0; }
.wk .to { color: var(--quiet); font: 500 12px var(--body); margin-left: 6px; }
.wk td.up { color: var(--up); } .wk td.down { color: var(--down); }
.wk .sharein { display: inline-flex; align-items: center; gap: 12px; }
.wk .sharein .pc { min-width: 3em; text-align: right; }   /* "100%" no longer pushes its meter left (audit 19 Oct #91) */
.wk .meter { width: 90px; height: 6px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.wk .meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft)); transform-origin: left; animation: wk-grow-x .6s var(--ease) both; }
.wk .meter i:not([style]) { width: 0; }   /* the HTML's year rows (idea 03): empty until results.js sets the width, never a full bar for 68% */
@keyframes wk-grow-x { from { transform: scaleX(0); } }

.wk .fine { color: var(--quiet); font-size: 13px; max-width: 82ch; margin: 0; }
.wk .fine + .fine { margin-top: -12px; }

@media (max-width: 1100px) {
  .wk .detail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wk .detail .when { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 1020px) {   /* 1020, not 980: the 6-month Aggressive year table was cut at 981-1014 px (live audit 2026-10-12) */
  .wk .meter { display: none; }
  .wk th, .wk td { padding-inline: 7px; }
  .wk .to { display: block; margin: 2px 0 0; font-size: 11px; line-height: 1.2; }
  .wk thead th { white-space: normal; }   /* headers wrap from 1020: 'Median half-year' kept the 6-month table 22 px too wide at 768 (audit #33) */
}
@media (max-width: 860px) { .wk .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .wk .hero { grid-template-columns: minmax(0, 1fr); }
  .wk .ring { width: 150px; }
  .wk .lohi { display: none; }
  /* the selected day as a bar held at the bottom of the screen, under the thumb, while the calendar is on screen; with the
     browser bar hidden it sits just above the iPhone home bar (inset 34 px: 20 px), not 44 px up (owner's phone, 2026-10-03) */
  .wk .calbox > .detail { order: 1; top: auto; bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) - 14px)); grid-template-columns: repeat(4, auto);
    justify-content: space-between; gap: 3px 8px; min-height: 0; padding: 10px 14px; border-color: var(--line-strong); background: #0c0e12;
    box-shadow: 0 -4px 10px -6px rgba(7,8,10,.75); }
  .wk .detail .when { font-size: 14px; }
  .wk .detail .when small { display: none; }
  .wk .detail span { font-size: 11px; white-space: nowrap; }
  .wk .detail b { font-size: 16px; white-space: nowrap; }
  .wk .yr { grid-template-columns: minmax(0, 1fr); }
  .wk .yr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 0; }
  .wk .hist { height: 200px; margin-left: 30px; }
  .wk .hist .bars { gap: 2px; }
  .wk .hist .x.minor { display: none; }
  .wk table { font-size: 13.5px; }
  .wk th, .wk td { padding: 11px 6px; }
  .wk thead th { white-space: normal; font-size: 10.5px; letter-spacing: .04em; }
  .wk th:nth-child(2), .wk td:nth-child(2), .wk th:nth-child(7), .wk td:nth-child(7) { display: none; }
  .wk .facts div { padding: 14px; }
  .wk .facts strong { font-size: 21px; }
  .wk .squares { gap: 2px; }
  .wk .squares:empty { aspect-ratio: 5.3; }   /* 26 columns of 5 on a phone */
}
@media (max-width: 399px) { .wk .key { row-gap: 10px; align-items: flex-start; } .wk .steps { margin: 4px 0 0; } }
@media (max-width: 480px) { .wk .eyebrow { font-size: 11px; letter-spacing: .1em; line-height: 1.35; } .wk .eyebrow::before { display: none; } }   /* one line on a phone, inside the card */
@media (max-width: 380px) { .wk .ringrow { gap: 14px; } .wk .ring { width: 132px; } .wk .hero .seg button { font-size: 12.5px; } .wk table { font-size: 12.5px; } .wk th, .wk td { padding: 9px 3px; } .wk thead th { font-size: 10px; letter-spacing: .02em; } .wk .detail b { font-size: 15px; } }
/* below 360 px the bar drops the weekday and shows its four values two by two (one row does not fit "Deepest drop" and cents) */
@media (max-width: 359px) { .wk .detail .wd { display: none; } .wk .calbox > .detail { grid-template-columns: repeat(2, auto); } }
@media (max-width: 760px) { .wk .calbox > .detail.big { grid-template-columns: repeat(2, auto); } }   /* a million or more: two rows of two, never past the screen */
@media (max-width: 520px) { .wk table.big { font-size: 11px; } .wk table.big th, .wk table.big td { padding-inline: 3px; } }   /* a million in the year table: nothing cut at 360/390 */
@media (max-width: 340px) { .wk th, .wk td { padding-inline: 2px; } }
@media (prefers-reduced-motion: reduce) { .wk .ring .val, .wk .ring .val.settled { animation: none; transition: none; } .wk .seg button, .wk .hist .bars i { transition: none; }
  .wk .seg .thumb, .wk .part rect, .wk .squares i { transition: none; } .wk .hist .bars i, .wk .meter i { animation: none; } }
/* owner 2026-10-11 (3440 px screen): from 1800 px the page is 1360 wide, as the homepage */
@media (min-width: 1800px) { .shell { width: min(1360px, calc(100% - 48px)); } }