@font-face{font-family:"Newsreader";src:url(fonts/newsreader-latin.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-latin-ext.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;src:url(fonts/newsreader-italic-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Newsreader";font-style:italic;src:url(fonts/newsreader-italic-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans-latin.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2212}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans-latin-ext.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  --bg:#f6f1e7;--card:#fffaf2;--fg:#1d1a24;--mut:#4a4552;--line:#cdc3cf;--line-soft:#e6ddd9;
  --acc:#7d3410;--happy:#7a4204;--mean:#4337a6;--axis:#9b91a3;--field:#fbf6ee;--glow-a:#f4c76a;--glow-b:#b9b0f2;
  --pin:#1d1a24;--ghost:#554e5d;--top:52px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Plex",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12101a;--card:#1b1825;--fg:#f2ece3;--mut:#cbc3d4;--line:#3a3445;--line-soft:#27222f;
  --acc:#f5a77d;--happy:#f2b45a;--mean:#b4a9ff;--axis:#6d6578;--field:#16131f;--glow-a:#6b4a12;--glow-b:#2e2669;
  --pin:#f2ece3;--ghost:#b6aec0;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12101a;--card:#1b1825;--fg:#f2ece3;--mut:#cbc3d4;--line:#3a3445;--line-soft:#27222f;
  --acc:#f5a77d;--happy:#f2b45a;--mean:#b4a9ff;--axis:#6d6578;--field:#16131f;--glow-a:#6b4a12;--glow-b:#2e2669;
  --pin:#f2ece3;--ghost:#b6aec0;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
svg [hidden],svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 12px)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.15rem/1.62 var(--serif);overflow-x:hidden}
a{color:var(--acc);text-underline-offset:.15em}
.skip-link{position:absolute;left:-999px;top:0;background:var(--card);color:var(--fg);padding:.5rem 1rem;z-index:99}
.skip-link:focus{left:.5rem}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
section{scroll-margin-top:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)) + 8px)}

/* top bar: one quiet line */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);height:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)));padding:var(--browser-safe-top,env(safe-area-inset-top)) .9rem 0;display:flex;align-items:center;gap:.6rem;font:500 .86rem/1 var(--sans);border-bottom:1px solid transparent;transition:border-color .3s}
.topbar.scrolled{border-bottom-color:var(--line-soft)}
.topbar .home{display:flex;align-items:center;gap:.45rem;color:var(--fg);text-decoration:none;white-space:nowrap;font-weight:600}
.topbar .home svg{width:22px;height:22px;flex:none}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0;margin-left:.6rem}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--mut);text-decoration:none;white-space:nowrap;padding:.4rem 0}
.topnav a:hover{color:var(--fg)}
.spacer{flex:1}
.chip{color:var(--mut);text-decoration:none;padding:.35rem .5rem;border-radius:.4rem;font-weight:600}
.chip[aria-current]{color:var(--fg);background:var(--line-soft)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--fg);cursor:pointer}
:root[data-theme="dark"] .i-sun,:root:not([data-theme="dark"]) .i-moon{display:none}
@media (max-width:620px){.topnav{display:none}.topbar .home span{max-width:44vw;overflow:hidden;text-overflow:ellipsis}}

/* columns */
.col{max-width:40rem;margin-inline:auto;padding-inline:1.1rem}
.wide{max-width:72rem;margin-inline:auto;padding-inline:1.1rem}
main>section{margin-block:3.2rem}
h1{font:500 clamp(2.15rem,5.4vw,3.6rem)/1.06 var(--serif);letter-spacing:-.012em;margin:.4rem 0 1rem;text-wrap:balance}
h2{font:500 clamp(1.55rem,3.4vw,2.1rem)/1.15 var(--serif);margin:0 0 .8rem;text-wrap:balance}
h3{font:600 1rem/1.3 var(--sans);margin:1.6rem 0 .5rem}
.kicker{font:600 .8rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0}
.deck{font-size:1.24rem;line-height:1.55;color:var(--fg)}
.opening{padding-top:2.2rem}
.small,.note{font:400 .9rem/1.5 var(--sans);color:var(--mut)}
.happy{color:var(--happy);font-weight:600}
.mean{color:var(--mean);font-weight:600}
b,strong{font-weight:600}

/* buttons */
.btn{font:600 .95rem/1 var(--sans);min-height:44px;padding:.7rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.btn:hover{border-color:var(--fg)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn[disabled]{opacity:.45;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}

/* story: sticky field + steps */
.story{position:relative;display:grid;grid-template-columns:minmax(19rem,27rem) minmax(0,1fr);gap:clamp(1.2rem,3vw,3rem);max-width:84rem;margin-inline:auto;padding-inline:1.1rem}
.stage{position:sticky;top:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)) + 12px);height:calc(100svh - var(--top) - var(--browser-safe-top,env(safe-area-inset-top)) - 24px);grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;min-height:0}
.steps{grid-column:1;grid-row:1;padding-bottom:30svh}
.step{min-height:82svh;display:flex;align-items:center}
.step:first-child{min-height:60svh;align-items:flex-start;padding-top:1rem}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:1rem;padding:1.15rem 1.25rem;box-shadow:0 10px 30px rgba(20,10,30,.06)}
.card p{margin:.5rem 0}
.card p:first-child{margin-top:0}
.field-wrap{position:relative;height:100%;aspect-ratio:1/1;max-width:100%;max-height:100%}
svg.field{display:block;width:100%;height:100%;overflow:visible;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.field .bgrect{fill:var(--field)}
.field .axis{stroke:var(--axis);stroke-width:1.2;stroke-dasharray:3 6}
.field .diag{stroke:var(--axis);stroke-width:1;opacity:.45}
.field .frame{fill:none;stroke:var(--line-soft);stroke-width:1.2}
.field text{font-family:var(--sans);fill:var(--mut)}
.field .qlab{font-size:21px;font-weight:600;letter-spacing:.02em;opacity:.85}
.field .alab{font-size:22px;font-weight:600}
.field .alab.h{fill:var(--happy)}.field .alab.m{fill:var(--mean)}
.field .clab{font-size:19px;fill:var(--ghost)}
.lantern{cursor:pointer;transition:opacity .6s,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.lantern .core{stroke:var(--pin);stroke-width:1.4;stroke-opacity:.35}
.lantern.dim{opacity:.16}
.lantern.off{opacity:0;pointer-events:none}
.lantern.hot .core{stroke-opacity:.9;stroke-width:2.2}
.labels .lab{font-size:22px;font-weight:600;fill:var(--fg);paint-order:stroke;stroke:var(--field);stroke-width:6px;stroke-linejoin:round;opacity:0;transition:opacity .4s,transform 1.1s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.labels .lab.on,.labels .lab.hover{opacity:1}
.labels .lab.dimmed.hover{opacity:1}
.lantern.guess .core{fill:var(--ghost);fill-opacity:.55}
.lantern.guess > circle:first-child{opacity:0}
.lantern:focus{outline:none}
.lantern:focus-visible .core{stroke:var(--acc);stroke-width:4;stroke-opacity:1}
.lantern .ci{stroke:var(--pin);stroke-width:2;opacity:0;transition:opacity .3s}
.lantern.sel .ci{opacity:.6}
.lantern.guess{cursor:grab;touch-action:none}
.lantern.guess:active{cursor:grabbing}
.ghost circle{fill:none;stroke:var(--ghost);stroke-width:2;stroke-dasharray:4 5}
.ghost line{stroke:var(--ghost);stroke-width:1.6;stroke-dasharray:2 6}
.ghost text{font-size:19px;fill:var(--ghost)}
.arrow line{stroke:var(--fg);stroke-width:3.5;stroke-linecap:round}
.arrow path{fill:var(--fg)}
.arrow text{font-size:23px;font-weight:600;fill:var(--fg);paint-order:stroke;stroke:var(--field);stroke-width:6px}
.arrow.neg line{stroke:var(--ghost)}.arrow.neg path{fill:var(--ghost)}
.arrows{transition:opacity .6s}
.origin-dot{fill:var(--fg)}
.pop{position:absolute;z-index:5;max-width:17rem;font:400 .88rem/1.45 var(--sans);background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:.8rem;padding:.75rem .9rem .8rem;box-shadow:0 12px 34px rgba(0,0,0,.18)}
.pop h4{margin:0 1.6rem .35rem 0;font:600 .98rem/1.25 var(--sans)}
.pop p{margin:.25rem 0}
.pop .x{position:absolute;top:.3rem;right:.3rem;width:32px;height:32px;border:0;background:transparent;color:var(--mut);font-size:1.2rem;cursor:pointer;border-radius:50%}
.hint-line{font:500 .88rem/1.4 var(--sans);color:var(--mut)}
.reveal-list{list-style:none;padding:0;margin:.6rem 0 0}
.reveal-list li{margin:.55rem 0;padding-left:1.1rem;position:relative}
.reveal-list li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;border-radius:50%;background:var(--sw,var(--fg))}

/* phone: the field sits on top, never under the text */
@media (max-width:899px){
  .story{display:block;padding-inline:0}
  .stage{position:sticky;top:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)));height:40svh;z-index:4;background:var(--bg);padding:.35rem 0;border-bottom:1px solid var(--line-soft)}
  .steps{padding-inline:1rem;position:relative;z-index:3;padding-bottom:20svh}
  .step{min-height:70svh;align-items:flex-start;padding-top:12svh}
  .step:first-child{min-height:auto;padding-top:1rem}
  .card{box-shadow:none}
}

/* grid of the two answers */
.grid7{display:block;width:100%;max-width:30rem;margin:1rem auto 0}
.grid7 text{font-family:var(--sans);font-size:13px;fill:var(--mut)}
.grid7 .cell-lab{font-size:11px;fill:var(--fg)}

/* table */
.tablewrap{overflow-x:auto;margin-top:1rem}
table{border-collapse:collapse;width:100%;font:400 .92rem/1.35 var(--sans)}
th,td{padding:.5rem .55rem;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
th{font-weight:600;color:var(--mut);font-size:.82rem}
td.pos{color:var(--fg)}
tbody tr.more{display:none}
tbody.open tr.more{display:table-row}

/* day builder */
.day{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
.day-list{list-style:none;padding:0;margin:0}
.day-list li{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:.4rem;padding:.28rem 0;border-bottom:1px solid var(--line-soft);font:400 .95rem/1.25 var(--sans)}
.day-list .sw{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.45rem;vertical-align:-.05rem}
.day-list output{min-width:4.2rem;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.step-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);font:600 1.15rem/1 var(--sans);cursor:pointer}
.day-side{position:sticky;top:calc(var(--top) + 1.2rem)}
.day-field{max-width:30rem;margin:0 auto}
.day-total{font:500 .95rem/1.4 var(--sans);color:var(--mut);margin:.6rem 0}
.day-verdict{font-size:1.2rem;line-height:1.45;margin:.4rem 0 .8rem}
.dpoint{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.dpoint circle.ring{fill:none;stroke:var(--fg);stroke-width:2.5}
.dpoint circle.c{fill:var(--fg)}
.trail circle{fill:var(--ghost)}
@media (max-width:899px){.day{grid-template-columns:1fr}.day-side{position:static;order:-1}}

/* share row: one line of quiet round buttons */
.share-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0 .4rem}
.share-row .sh{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--fg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.share-row .sh svg{width:18px;height:18px}
@media (pointer:coarse){.share-row .sh{width:44px;height:44px}}
.share-row .lbl{font:500 .85rem/1 var(--sans);color:var(--mut);margin-right:.2rem}
.copied{font:500 .85rem/1 var(--sans);color:var(--mut)}

/* lists, method, footer */
ul.plain{padding-left:1.1rem}
ul.plain li{margin:.45rem 0}
.method{font-size:1.02rem}
.sources li{font:400 .92rem/1.5 var(--sans);margin:.5rem 0}
.site-footer{max-width:40rem;margin:4rem auto 3rem;padding:1.2rem 1.1rem 0;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;font:400 .86rem/1.4 var(--sans);color:var(--mut)}
.site-footer a{color:var(--mut)}

/* reading rail */
.rail{display:none}
@media(min-width:1460px){
.rail{--col:84rem;--gut:.4rem;display:flex;flex-direction:column;position:fixed;top:50%;right:.6rem;transform:translateY(-50%);z-index:40;margin:0;padding:.4rem 0}
.rail::before{content:"";position:absolute;left:calc(.875rem - .5px);top:1.1rem;bottom:1.1rem;width:1px;background:var(--line)}
.rail-dot{position:relative;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;text-decoration:none;border-radius:50%}
.rail-dot .dot{width:7px;height:7px;border-radius:50%;background:var(--mut);box-shadow:0 0 0 3px var(--bg);transition:transform .2s,background .2s;flex:none}
.rail-dot:hover .dot,.rail-dot:focus-visible .dot{background:var(--acc);transform:scale(1.25)}
.rail-dot[aria-current=true] .dot{background:var(--acc);transform:scale(1.45)}
.rail-label{position:absolute;right:calc(100% + .3rem);top:50%;transform:translate(6px,-50%);padding:.22rem .65rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--fg);font:600 .82rem/1.3 var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1;transform:translate(0,-50%)}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
@media(forced-colors:active){.lantern .core{stroke:CanvasText}}
.stop-a{stop-color:var(--glow-a);stop-opacity:.8}.stop-a0{stop-color:var(--glow-a);stop-opacity:0}
.stop-b{stop-color:var(--glow-b);stop-opacity:.8}.stop-b0{stop-color:var(--glow-b);stop-opacity:0}
.grid7 .cell-lab.inv{fill:var(--bg)}
.grid7 rect{color:var(--mean)}
.col.flush{padding-inline:0;margin-inline:0}
.arrow line.leader{stroke:var(--ghost);stroke-width:1.2;stroke-dasharray:2 4}
.arrow text{font-size:22px}
.day-after{margin-top:1rem}
@media (max-width:899px){
  .day-side{position:sticky;top:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)));z-index:4;background:var(--bg);display:grid;grid-template-columns:min(30svh,42vw) 1fr;gap:.8rem;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--line-soft)}
  .day-side .day-field{max-width:none;margin:0}
  .day-side .day-total{display:none}
  .day-side .day-verdict{font-size:1rem;margin:0}
}
.field[data-step="company"] .clab.centre{opacity:0}