/* Theme copied from tick3d (github.com/Yarden-zamir/tick3d): neo-brutalist, flat fills, thick lines, hard offset
   shadows, a dotted page. Light by default, tick3d's dark tokens under prefers-color-scheme: dark. Hebrew glyphs
   fall back from Bricolage Grotesque to Rubik / Heebo per glyph. */
:root {
  --x: #ff5277; --o: #00b3ff; --win: #7cff8a; --primary: #ffe14d; --toggle-on: #b9a8ff; --danger: #ff8a8a; --on-color: #000000;
  --border: 3px;
  --page: #e4e7ff; --dot: rgb(0 0 0 / 0.14); --surface: #ffffff; --surface-2: #f1f2ff; --ink: #000000; --muted: #3d3d5c;
  --line: #000000; --shadow: #000000; --slab: #ffe14d; --peer: #d9d2ff;
  --good: var(--win); --mid: var(--primary); --bad: var(--x); --none: var(--surface-2);
  --sans: "Bricolage Grotesque", "Heebo", ui-rounded, system-ui, sans-serif;
  --head: "Bricolage Grotesque", "Rubik", "Heebo", sans-serif;
  --measure: 48rem;
  --sheet: 80rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #15122b; --dot: rgb(243 240 255 / 0.12); --surface: #262147; --surface-2: #1d1938; --ink: #f3f0ff; --muted: #bdb6e6;
    --line: #f3f0ff; --shadow: #f3f0ff; --slab: #6c5ce7; --peer: #4b3f9e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #15122b; --dot: rgb(243 240 255 / 0.12); --surface: #262147; --surface-2: #1d1938; --ink: #f3f0ff; --muted: #bdb6e6;
  --line: #f3f0ff; --shadow: #f3f0ff; --slab: #6c5ce7; --peer: #4b3f9e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100dvh; color: var(--ink);
  background: radial-gradient(var(--dot) 1.2px, transparent 1.6px) 0 0 / 22px 22px, var(--page);
  font-family: var(--sans); font-size: 17.5px; line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.sheet { max-width: var(--sheet); margin: 0 auto; padding: 0 clamp(14px, 5vw, 4.5rem) 4rem; }
@media (min-width: 60rem) { .sheet { padding-top: 2.5rem; } }
main { max-width: var(--measure); margin: 0 auto; }

/* cards: the shared brutalist surface */
.card, figure.chart, .verdict, .facts div, .doors div, table, .geomap, .origin img, .toc { background: var(--surface); border: var(--border) solid var(--line); }
figure.chart, .verdict, .geomap, .origin img, .toc, .wrap { box-shadow: 6px 6px 0 var(--shadow); }

/* masthead */
.masthead { padding: 3rem 0 1.4rem; margin-bottom: 1.6rem; text-align: start; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em; padding: .2rem .6rem; border: var(--border) solid var(--line); background: var(--primary); color: var(--on-color); box-shadow: 3px 3px 0 var(--shadow); margin: 0 0 1.4rem; }
h1 { font-family: var(--head); font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; margin: 0 0 1rem; letter-spacing: -.02em; text-wrap: balance; }
.dek { font-size: 1.15rem; color: var(--muted); max-width: 36rem; margin: 0; line-height: 1.55; font-weight: 500; }
.meta { font-size: 13.5px; color: var(--muted); margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.meta a { border: 2px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; padding: .05rem .5rem; border-radius: 999px; font-weight: 600; }
.meta a:hover { background: var(--o); color: var(--on-color); }

h2 { font-family: var(--head); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.1; margin: 4rem 0 1.1rem; display: flex; align-items: center; gap: .75rem; scroll-margin-top: 1rem; letter-spacing: -.01em; }
h2 .num { flex: none; font-size: .9rem; font-weight: 800; padding: .15rem .55rem; border: var(--border) solid var(--line); background: var(--primary); color: var(--on-color); box-shadow: 3px 3px 0 var(--shadow); }
h3 { font-family: var(--head); font-weight: 700; font-size: 1.3rem; line-height: 1.25; margin: 2.6rem 0 .7rem; scroll-margin-top: 1rem; }
h3.profile { padding-bottom: .4rem; border-bottom: var(--border) solid var(--line); }
p { margin: 0 0 1.15rem; text-wrap: pretty; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; text-decoration-color: var(--o); font-weight: 600; transition: background .12s; }
a:hover { background: var(--o); color: var(--on-color); text-decoration-color: var(--on-color); }
a.place { text-decoration-color: var(--toggle-on); } a.place:hover { background: var(--toggle-on); }
a.deg { text-decoration-color: var(--win); } a.deg:hover { background: var(--win); }
strong { font-weight: 700; }
hr { border: 0; height: var(--border); background: var(--line); margin: 3rem 0; }
ul, ol { padding-inline-start: 1.3rem; }
li { margin-bottom: .5rem; }
li::marker { font-weight: 700; }
blockquote { margin: 1.5rem 0; padding: .4rem 1.1rem; border-inline-start: 6px solid var(--line); background: var(--surface-2); }

/* verdict box, toc, notes */
.verdict { background: var(--primary); color: var(--on-color); padding: 1.3rem 1.5rem; margin: 2rem 0; }
.verdict a { color: var(--on-color); text-decoration-color: var(--on-color); } .verdict a:hover { background: var(--on-color); color: var(--primary); }
.verdict sup a { color: var(--on-color); }
.verdict p:last-child { margin-bottom: 0; }
.verdict .label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; margin-bottom: .5rem; }
.toc { font-size: .95rem; columns: 2; column-gap: 2rem; margin: 0 0 2rem; padding: 1rem 1.2rem; }
@media (max-width: 600px) { .toc { columns: 1; } }
.toc a { display: block; padding: .25rem 0; text-decoration: none; font-weight: 600; }
.toc a:hover { background: none; color: var(--ink); } .toc a:hover .n { background: var(--o); }
.toc a .n { display: inline-block; min-width: 1.6rem; text-align: center; font-size: 12px; font-weight: 800; border: 2px solid var(--line); margin-inline-end: .5rem; background: var(--surface-2); color: var(--ink); }
.note { font-size: .9rem; color: var(--muted); }
sup { line-height: 0; }
sup a { font-size: .66em; text-decoration: none; color: var(--muted); font-weight: 700; }
sup a:hover { background: var(--primary); color: var(--on-color); }

/* dots as status markers */
.dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; vertical-align: middle; margin-inline-end: .35em; margin-bottom: .1em; border: 2px solid var(--line); }
.dot.good { background: var(--good); } .dot.mid { background: var(--mid); } .dot.bad { background: var(--bad); } .dot.none { background: var(--none); }

/* tables */
.wrap { overflow-x: auto; margin: 1.2rem 0 2.2rem; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
th, td { text-align: start; padding: .55rem .7rem; border-bottom: 2px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: 12.5px; font-weight: 800; background: var(--surface-2); white-space: nowrap; border-bottom: var(--border) solid var(--line); }
th a { text-decoration-thickness: 2px; }
td.num, td.n { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; direction: ltr; unicode-bidi: isolate; text-align: end; }
table.score { min-width: 60rem; }
table.score td { font-size: 13.5px; line-height: 1.45; min-width: 6.5rem; }
table.score td:first-child { min-width: 9.5rem; }
/* wide blocks step out of the text column on desktop: tables to 68rem, charts and the map to 58rem */
.breakout { --w: min(var(--sheet) - 4rem, calc(100vw - 32px)); width: var(--w); margin-inline: calc(50% - var(--w) / 2); }
@media (min-width: 60rem) {
  .wrap:not(.breakout) { --w: min(68rem, calc(100vw - 32px)); width: var(--w); margin-inline: calc(50% - var(--w) / 2); }
  figure.chart, .geomap, .facts, #tree { --w: min(58rem, calc(100vw - 32px)); width: var(--w); margin-inline: calc(50% - var(--w) / 2); }
}

/* figures and charts */
figure { margin: 1.8rem 0 2.4rem; }
figure.chart { padding: 1rem 1.1rem .9rem; }
figure.chart figcaption, .origin figcaption { font-size: 13px; color: var(--muted); margin-top: .7rem; line-height: 1.5; }
figure.chart .title { font-family: var(--head); font-weight: 800; font-size: 1.05rem; margin: 0 0 .7rem; }
figure.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
svg text { font-family: var(--sans); fill: var(--ink); }
svg .lbl { font-size: 13px; font-weight: 600; }
svg a { cursor: pointer; text-decoration: none; } svg a .lbl { fill: var(--ink); } svg a:hover .lbl { fill: var(--o); }
svg text { unicode-bidi: plaintext; }
svg .val { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
svg .axis { stroke: var(--line); stroke-width: 2; }
svg .grid { stroke: var(--line); stroke-dasharray: 2 5; opacity: .35; }
svg .bar { stroke: var(--line); stroke-width: 2; }
svg .bar.good { fill: var(--good); } svg .bar.mid { fill: var(--mid); } svg .bar.bad { fill: var(--bad); } svg .bar.ink { fill: var(--ink); } svg .bar.muted { fill: var(--muted); } svg .bar.soft { fill: var(--peer); }
svg .range { stroke-linecap: butt; } svg .range.good { stroke: var(--good); } svg .range.mid { stroke: var(--mid); } svg .range.bad { stroke: var(--bad); } svg .range.ink { stroke: var(--ink); }
svg .edge { fill: none; stroke-width: 3; stroke: var(--line); opacity: .85; } svg .edge.mid { stroke-dasharray: 6 5; opacity: .5; } svg .edge.bad { stroke-dasharray: 2 5; }
svg .node { fill: var(--surface); stroke: var(--line); stroke-width: 2.5; }
svg .node.good { fill: var(--win); }
svg a:hover .node { fill: var(--o); }
.origin { text-align: center; }
.origin img { max-width: 100%; max-height: 22rem; transform: rotate(-1.5deg); padding: 6px; }

/* doors strip under each degree profile: five target sectors, one light each */
.doors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: var(--border) solid var(--line); box-shadow: 4px 4px 0 var(--shadow); margin: 0 0 1.5rem; font-size: 12.5px; line-height: 1.35; }
.doors div { border: 0; border-inline-end: 2px solid var(--line); padding: .55rem .4rem .5rem; text-align: center; }
.doors div:last-child { border-inline-end: 0; }
.doors a { display: block; color: inherit; text-decoration: none; font-weight: 500; }
.doors a:hover { background: var(--surface-2); color: var(--ink); }
.doors b { display: block; font-weight: 800; font-size: 11px; margin-bottom: .3rem; }
.doors .dot { display: block; margin: 0 auto .3rem; width: .95rem; height: .95rem; }
@media (max-width: 520px) { .doors { font-size: 11px; } .doors b { font-size: 9.5px; } }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; margin: 1.4rem 0 1.8rem; }
.facts div { padding: .8rem .9rem; min-width: 0; box-shadow: 4px 4px 0 var(--shadow); }
/* numbers read left to right even on the RTL page, and shrink instead of overflowing the card */
.facts b { display: block; font-family: var(--head); font-size: clamp(1.25rem, 2.6vw + .4rem, 1.8rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; direction: ltr; unicode-bidi: isolate; text-align: start; overflow-wrap: anywhere; }
.facts div { container-type: inline-size; }
@container (max-width: 11rem) { .facts b { font-size: 1.25rem; } }
.facts span { display: block; font-size: 12.5px; color: var(--muted); margin-top: .35rem; line-height: 1.4; }

/* lead-in labels in the degree profiles */
p.field { padding-inline-start: 7.5rem; position: relative; min-height: 1.6rem; }
p.field .k { position: absolute; inset-inline-start: 0; top: .35rem; width: 6.8rem; font-size: 11px; line-height: 1.3; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { p.field { padding-inline-start: 0; } p.field .k { position: static; display: block; width: auto; margin-bottom: .15rem; } }

ol.sources { font-size: 13px; color: var(--muted); padding-inline-start: 1.6rem; }
ol.sources li { margin-bottom: .4rem; overflow-wrap: anywhere; }
ol.sources li:target { background: var(--primary); color: var(--on-color); outline: 3px solid var(--line); outline-offset: 3px; }
ol.sources a { font-size: 12px; color: var(--muted); text-decoration-thickness: 1px; font-weight: 500; }
footer { margin-top: 5rem; padding-top: 1.2rem; border-top: var(--border) solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.6; }

/* the dot rail, copied from gr52: fixed on the left, a dash per section and a dot per degree profile, the current one lit */
.dots{position:fixed;left:2px;top:50%;transform:translate(-9px,-50%);opacity:.35;z-index:6;display:flex;flex-direction:column;gap:0;padding:4px 2px;direction:ltr;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .25s,opacity .25s}
.dots.live,.dots.scrub,.dots:hover{transform:translate(0,-50%);opacity:1}
.dots::before{content:"";position:absolute;left:2px;top:0;bottom:0;width:20px;border-radius:12px;background:var(--surface);border:2px solid var(--line);z-index:-1;opacity:0;transition:opacity .25s}
.dots.live::before,.dots.scrub::before,.dots:hover::before{opacity:1}
.dots::after{content:"";position:absolute;top:0;bottom:0;left:0;right:-4px}
.dots[hidden]{display:none}
.dots a{position:relative;display:flex;align-items:center;height:13px;padding:0 4px;text-decoration:none;color:var(--ink);cursor:pointer}
.dots a:hover{background:none}
.dots i{--c:var(--muted);flex:none;width:6px;height:6px;border-radius:50%;background:var(--c);opacity:.8;transition:transform .15s,opacity .15s,background .15s}
.dots a.sec i{width:8px;height:3px;border-radius:2px}
.dots a.end i{width:0;height:0;border-radius:0;background:none;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid var(--c)}
.dots a.on i{--c:var(--x);opacity:1;transform:scale(1.6)}
.dots a.top{height:auto;padding:2px 4px 6px} .dots a.top i{display:none}
.dots a.top span{position:static;transform:rotate(180deg);opacity:1;background:none;border:0;box-shadow:none;padding:0;font:800 9.5px var(--sans);letter-spacing:.12em;color:var(--muted);writing-mode:vertical-rl;pointer-events:none}
.dots a.top.on span{color:var(--x)}
.dots span{position:absolute;left:22px;top:50%;transform:translateY(-50%);font:700 11.5px var(--sans);color:var(--ink);background:var(--surface);border:2px solid var(--line);box-shadow:3px 3px 0 var(--shadow);padding:2px 9px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;direction:rtl}
.dots.scrub a.on span,.dots:not(.scrub) a:hover span{opacity:1}
@media print{.dots{display:none} body{background:#fff} figure.chart,.verdict,.geomap,.origin img,.toc,.wrap{box-shadow:none}}

/* the decision tree at the end of the page */
#tree { position: relative; margin: 1.5rem 0 2rem; }
.tree-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.tree-progress { flex: 1; height: 14px; border: var(--border) solid var(--line); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); overflow: hidden; }
.tree-progress i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.tree-mute { font: inherit; font-size: 1rem; line-height: 1; padding: .3rem .5rem; border: var(--border) solid var(--line); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); cursor: pointer; }
.tree-stage { position: relative; min-height: 22rem; perspective: 1200px; }
.tree-card { position: relative; background: var(--surface); border: var(--border) solid var(--line); box-shadow: 8px 8px 0 var(--shadow); padding: 1.4rem 1.5rem 1.3rem; transform-origin: center top; overflow: hidden; }
.tree-card + .tree-card { position: absolute; inset: 0 0 auto 0; }
.tree-card.enter-next { opacity: 0; transform: translateX(-40px) rotateY(-12deg); }
.tree-card.enter-back { opacity: 0; transform: translateX(40px) rotateY(12deg); }
.tree-card.in { opacity: 1; transform: none; transition: opacity .32s ease, transform .38s cubic-bezier(.2,.8,.2,1); }
.tree-card.leave-next { opacity: 0; transform: translateX(40px) rotateY(10deg) scale(.98); transition: opacity .25s ease, transform .3s ease; pointer-events: none; }
.tree-card.leave-back { opacity: 0; transform: translateX(-40px) rotateY(-10deg) scale(.98); transition: opacity .25s ease, transform .3s ease; pointer-events: none; }
.tree-card h3 { margin: .2rem 0 .8rem; font-size: 1.35rem; }
.tree-kicker { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--muted); margin: 0 0 .2rem; text-transform: uppercase; }
.tree-hint { font-size: .92rem; color: var(--muted); margin: -.3rem 0 .9rem; }
.tree-lead { font-size: 1.05rem; font-weight: 500; }
.tree-opts { display: grid; gap: .6rem; margin: .4rem 0 1rem; }
.tree-opt { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: start; font: inherit; font-weight: 600; color: var(--ink); background: var(--surface-2); border: var(--border) solid var(--line); box-shadow: 4px 4px 0 var(--shadow); padding: .7rem .9rem; cursor: pointer; transition: translate .08s, box-shadow .08s, background .15s; }
.tree-opt:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--shadow); background: var(--surface); }
.tree-opt:active, .tree-opt.picked { translate: 3px 3px; box-shadow: 1px 1px 0 var(--shadow); background: var(--primary); color: var(--on-color); }
.tree-opt .n { flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 2px solid var(--line); font-size: .8rem; font-weight: 800; background: var(--surface); color: var(--ink); }
.tree-nav { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.tree-btn { font: inherit; font-weight: 700; color: var(--ink); background: var(--surface); border: var(--border) solid var(--line); box-shadow: 3px 3px 0 var(--shadow); padding: .5rem .9rem; cursor: pointer; transition: translate .08s, box-shadow .08s; }
.tree-btn.primary { background: var(--primary); color: var(--on-color); font-size: 1.05rem; padding: .7rem 1.4rem; }
.tree-btn:hover:not(:disabled) { translate: -2px -2px; box-shadow: 5px 5px 0 var(--shadow); }
.tree-btn:active:not(:disabled) { translate: 3px 3px; box-shadow: 0 0 0 var(--shadow); }
.tree-btn:disabled { opacity: .4; cursor: default; }
.tree-rows { display: grid; gap: .9rem; margin: 1rem 0; }
.tree-row { opacity: 0; transform: translateY(12px); animation: tree-rise .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d); }
@keyframes tree-rise { to { opacity: 1; transform: none; } }
.tree-row.top { padding: .8rem .9rem; background: var(--win); color: var(--on-color); border: var(--border) solid var(--line); box-shadow: 5px 5px 0 var(--shadow); }
.tree-row.top a, .tree-row.top .note { color: var(--on-color); }
.tree-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.tree-row-head a { text-decoration: none; }
.tree-row-head a:hover { background: none; text-decoration: underline; text-decoration-color: var(--o); text-decoration-thickness: 3px; }
.tree-row-head .note { font-size: .8rem; }
.tree-score { font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; }
.tree-bar { height: 12px; border: 2px solid var(--line); background: var(--surface); margin-top: .35rem; overflow: hidden; }
.tree-bar i { display: block; height: 100%; width: 0; background: var(--ink); animation: tree-grow .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d) + .2s); }
.tree-row.top .tree-bar i { background: var(--on-color); }
@keyframes tree-grow { to { width: var(--w); } }
.tree-why, .tree-flags { margin: .5rem 0 0; padding-inline-start: 1.1rem; font-size: .9rem; }
.tree-why li { margin-bottom: .15rem; }
.tree-flags { color: var(--bad); font-weight: 600; } .tree-row.top .tree-flags { color: var(--on-color); }
.tree-confetti { position: absolute; inset: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tree-card, .tree-card.in, .tree-row, .tree-bar i, .tree-progress i { transition: none; animation: none; opacity: 1; transform: none; } .tree-bar i { width: var(--w); } }