/* Layout: inputs on the left (ring size, stone, setting, coverage), the answer on the right as big
   numbers, then the ring drawn to scale from above with every stone placed, and the band unrolled
   with the gaps measured; then the method and sources. */
:root {
  --paper: #ffffff;
  --ink: #16161a;
  --ink-soft: #3d3d45;
  --muted: #6b6b75;
  --rule: #e4e2de;
  --mist: #f4f3f1;
  --ruby: #9b1b30;
  --gold: #b8892f;
  --metal: #d9c08a;
  --metal-dark: #8a6a33;
  --stone: #eef3f8;
  --stage: #f4f1ea;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

:root[data-theme="dark"] {
  --paper: #121216; --ink: #f1efe9; --ink-soft: #c9c6bf; --muted: #9a978f; --rule: #2c2c33; --mist: #1b1b21;
  --ruby: #e0566c; --gold: #e1b25a; --stage: #1a1b20; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; margin: 0; }
a { color: var(--ink); text-decoration-color: var(--ruby); text-underline-offset: 3px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 48px; display: grid; gap: 24px; }
header.top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ruby); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; flex: none; width: 4px; height: 15px; background: var(--gold); clip-path: polygon(0 24%, 100% 0, 100% 76%, 0 100%); }
h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.03; letter-spacing: -.01em; margin: 6px 0 0; text-wrap: balance; }
h2.sec { font-family: var(--font-display); font-weight: 500; font-size: 28px; margin: 0; line-height: 1.1; }
.lede { max-width: 66ch; color: var(--ink-soft); margin: 6px 0 0; }
.prototype { font-size: 12px; color: var(--muted); border: 1px solid var(--rule); padding: 4px 10px; white-space: nowrap; }
.help { font-size: 12px; color: var(--muted); margin: 0; }
section.study { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 14px; }
.tool { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
@media (max-width: 880px) { .tool { grid-template-columns: 1fr; } }
form { display: grid; gap: 14px; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 13px; font-weight: 600; }
.row2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
select, input[type=number] { font: 500 15px var(--font-body); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); padding: 7px 9px; border-radius: 0; width: 100%; }
input[type=range] { width: 100%; accent-color: var(--ruby); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font: 600 13px var(--font-body); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 5px 10px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ruby); outline-offset: 2px; }

.answer { background: var(--ink); color: var(--paper); padding: 18px 20px; display: grid; gap: 14px; }
.answer .lab { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.big { font-family: var(--font-display); font-size: clamp(52px, 8vw, 76px); line-height: .9; }
.big small { font-size: .32em; font-family: var(--font-body); opacity: .75; margin-left: 6px; }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 12px; }
@media (max-width: 520px) { .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kv div { display: grid; gap: 2px; }
.kv b { font-family: var(--font-display); font-weight: 500; font-size: 24px; font-variant-numeric: tabular-nums; }
.kv span { font-size: 12px; opacity: .7; }
.warn { font-size: 13px; background: rgba(255,255,255,.08); padding: 8px 10px; border-left: 3px solid var(--gold); }

.views { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 880px) { .views { grid-template-columns: 1fr; } }
.view { background: var(--stage); display: grid; gap: 6px; padding: 10px; }
.view svg { width: 100%; height: auto; display: block; }
.stage3d { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 50% 35%, #2a2b31, #0e0f12); }
.stage3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.stage3d .tip { position: absolute; left: 10px; bottom: 8px; font-size: 12px; color: #c9c6bf; pointer-events: none; }
.view p { margin: 0; font-size: 12.5px; color: var(--muted); }
.strip { overflow-x: auto; }
.strip svg { min-width: 560px; }
.method { display: grid; gap: 8px; font-size: 14px; color: var(--ink-soft); max-width: 82ch; }
.method p { margin: 0; }
code { font-family: var(--font-data); font-size: 13px; background: var(--mist); padding: 1px 5px; }
table { border-collapse: collapse; font-size: 13.5px; width: 100%; max-width: 640px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--rule); }
th { border-bottom: 1px solid var(--ink); }
td.num { font-variant-numeric: tabular-nums; }
/* jewelloop.net: one column that never grows wider than the screen */
.wrap { grid-template-columns: minmax(0, 1fr); }
.jl-table-scroll { overflow-x: auto; max-width: 100%; }
/* shown once the page's script has run (static/visual/ready.js): no jump while loading */
html:not(.jl-ready) .wrap { visibility: hidden; }

/* On jewelloop.net the page around it shows the title and the introduction. */
header.top { display: none !important; }