:root{
  --bg:#E7E9EC; --surface:#F4F5F7; --surface-2:#DBDFE4; --raised:#FFFFFF;
  --ink:#14181F; --ink-2:#4B5462; --ink-3:#6A7381;
  --line:#C6CBD3; --line-soft:#D6DAE0;
  --accent:#8A5A12; --accent-wash:rgba(138,90,18,.12);
  --verd:#1D6159; --alarm:#9B3B31; --alarm-wash:rgba(155,59,49,.09);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111419; --surface:#181C23; --surface-2:#212731; --raised:#1E242D;
    --ink:#E9EBEF; --ink-2:#A5AEBB; --ink-3:#7F8896;
    --line:#2B323D; --line-soft:#242A34;
    --accent:#D3A44A; --accent-wash:rgba(211,164,74,.14);
    --verd:#57AFA3; --alarm:#D3695C; --alarm-wash:rgba(211,105,92,.12);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111419; --surface:#181C23; --surface-2:#212731; --raised:#1E242D;
  --ink:#E9EBEF; --ink-2:#A5AEBB; --ink-3:#7F8896;
  --line:#2B323D; --line-soft:#242A34;
  --accent:#D3A44A; --accent-wash:rgba(211,164,74,.14);
  --verd:#57AFA3; --alarm:#D3695C; --alarm-wash:rgba(211,105,92,.12);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{background:var(--bg); color:var(--ink); margin:0; overflow-x:hidden;
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1120px; margin:0 auto; padding-inline:20px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
code{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:.86em; background:var(--surface-2);
  padding:1px 5px; border-radius:3px; overflow-wrap:anywhere}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.mast{padding-block:52px 30px}
.eyebrow{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; margin:0 0 16px; display:flex; gap:14px; flex-wrap:wrap}
.eyebrow b{color:var(--accent); font-weight:600}
h1{font-family:Fraunces,Georgia,serif; font-weight:800; font-size:clamp(40px,7.2vw,68px);
  line-height:1.02; letter-spacing:-.018em; margin:0; text-wrap:balance}
h1 em{font-style:normal; color:var(--accent)}
.lede{color:var(--ink-2); font-size:17px; max-width:62ch; margin:20px 0 0; text-wrap:pretty}
.lede strong{color:var(--ink); font-weight:600}
h2{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:23px; letter-spacing:-.01em; margin:0}
.note{color:var(--ink-2); font-size:14.5px; max-width:70ch; margin:8px 0 14px}
.hint{color:var(--ink-3); font-size:13px; margin:12px 0 0; max-width:80ch}
.path{font-size:12px}

.steps{display:grid; grid-template-columns:minmax(0,1fr); gap:20px;
  border-top:1px solid var(--line); padding-top:28px}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px 22px 22px}
.stephead{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.stepno{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:15px; color:var(--accent);
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--accent);
  display:grid; place-items:center; flex:none}
.opt{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
  border:1px solid var(--line); border-radius:3px; padding:2px 6px}

.drop{display:flex; flex-direction:column; gap:8px; justify-content:center; min-height:178px;
  border:1.5px dashed var(--line); border-radius:6px; padding:22px; cursor:pointer;
  background:var(--raised); text-align:center; transition:border-color .12s, background .12s}
.step.over{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.drop:hover,.drop.over{border-color:var(--accent); background:var(--accent-wash)}
.dropmain{font-size:16.5px; font-weight:600}
.dropmain u{color:var(--accent); text-underline-offset:3px}
.dropsub{font-size:13px; color:var(--ink-3)}

.recent{margin-top:14px}
.recenthead{display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700; padding-bottom:6px; border-bottom:1px solid var(--line-soft)}
.linkbtn{font:inherit; letter-spacing:.08em; background:none; border:0; color:var(--ink-3); cursor:pointer; padding:2px 0}
.linkbtn:hover{color:var(--accent)}
.recentlist{list-style:none; margin:0; padding:0}
.recentlist li{display:flex; align-items:stretch; border-bottom:1px solid var(--line-soft)}
.recentopen{flex:1; min-width:0; text-align:left; background:none; border:0; padding:8px 6px; cursor:pointer;
  display:flex; flex-direction:column; gap:1px; font:inherit; color:var(--ink); border-radius:4px}
.recentopen:hover{background:var(--accent-wash)}
.recentopen:hover .recentname{color:var(--accent)}
.recentname{font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.recentmeta{font-size:12px; color:var(--ink-3); font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.recentopen.missing .recentname{color:var(--ink-3); text-decoration:line-through}
.recenttick{accent-color:var(--accent); margin:0 4px 0 2px; align-self:center; width:15px; height:15px; flex:none}
.recentcompare{margin-top:10px; width:100%}
.recentdel{background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:18px; padding:0 10px; border-radius:4px}
.recentdel:hover{color:var(--alarm); background:var(--alarm-wash)}
.btn{font:600 11.5px/1 Archivo,sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line);
  border-radius:4px; padding:9px 13px; cursor:pointer; white-space:nowrap}
.btn:hover{color:var(--accent); border-color:var(--accent)}
.btn.primary{color:var(--accent); border-color:var(--accent); background:var(--accent-wash)}
.btn.quiet{background:transparent}
.btn:disabled{opacity:.5; cursor:default}
.gamerow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.gamestatus{font-size:13.5px; color:var(--ink-3); overflow-wrap:anywhere}
.gamestatus.ok{color:var(--verd); font-weight:600}
.fallback{margin-top:12px; font-size:13px; color:var(--ink-2)}
.fallback summary{cursor:pointer; color:var(--ink-3)}
.fallback summary:hover{color:var(--accent)}
.fallback p{margin:8px 0}
.cmdrow{display:flex; gap:8px; align-items:flex-start}
.cmdrow code{flex:1; display:block; padding:8px 10px; font-size:11.5px; line-height:1.5; user-select:all}
.opts{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px; padding-top:14px;
  border-top:1px solid var(--line-soft); font-size:13.5px; color:var(--ink-2)}
.optgd{font-size:12.5px; color:var(--ink-3); flex-basis:100%}
.opts label{display:flex; align-items:center; gap:7px; cursor:pointer}
.opts input[type=checkbox]{accent-color:var(--accent); margin:0}
.opts input[type=number]{width:56px; font:inherit; color:var(--ink); background:var(--raised);
  border:1px solid var(--line); border-radius:4px; padding:3px 6px}

.status{margin-top:20px; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:14px 18px}
.statusline{display:flex; align-items:center; gap:12px; font-weight:600}
.elapsed{margin-left:auto; color:var(--ink-3); font-weight:400; font-size:13px}
.spinner{width:16px; height:16px; border-radius:50%; border:2px solid var(--line);
  border-top-color:var(--accent); animation:spin .8s linear infinite; flex:none}
.spinner.stop{animation:none; border-color:var(--verd)}
.spinner.fail{animation:none; border-color:var(--alarm)}
@keyframes spin{to{transform:rotate(360deg)}}
progress.bar{display:block; width:100%; height:6px; margin-top:12px; border:0; border-radius:3px;
  overflow:hidden; background:var(--surface-2); appearance:none; -webkit-appearance:none}
progress.bar::-webkit-progress-bar{background:var(--surface-2)}
progress.bar::-webkit-progress-value{background:var(--accent); transition:width .2s}
progress.bar::-moz-progress-bar{background:var(--accent)}
progress.bar[hidden]{display:none}
progress.bar:indeterminate{background:linear-gradient(90deg,var(--surface-2) 0 30%,var(--accent) 50%,var(--surface-2) 70% 100%);
  background-size:300% 100%; animation:slide 1.4s linear infinite}
progress.bar:indeterminate::-webkit-progress-bar{background:transparent}
progress.bar:indeterminate::-moz-progress-bar{background:transparent}
@keyframes slide{from{background-position:100% 0}to{background-position:0 0}}
.errorbox{margin-top:12px; padding:12px 14px; border-radius:5px; background:var(--alarm-wash);
  border-left:3px solid var(--alarm); color:var(--ink); font-size:14px}
.logbox{margin-top:10px}
.logbox summary{cursor:pointer; font-size:12.5px; color:var(--ink-3)}
.logbox summary:hover{color:var(--accent)}
.logbox pre{margin:8px 0 0; max-height:220px; overflow:auto; font-family:"IBM Plex Mono",Menlo,monospace;
  font-size:12px; line-height:1.5; color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere}

.result{margin-top:28px; border-top:1px solid var(--line)}
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-block:16px 4px}
.toolbar .spacer{flex:1}
.savename{font-size:12.5px; color:var(--ink-3); overflow-wrap:anywhere}
.notice{margin:8px 0 0; font-size:13.5px; color:var(--ink-2); padding:10px 14px; border-radius:5px;
  background:var(--accent-wash); border-left:3px solid var(--accent)}
/* sharing */
.sharepanel{margin:12px 0 4px; padding:16px 18px; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
.sharehead{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-bottom:8px}
.sharehead h3{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:19px; margin:0}
.sharenote,.sharestep,.sharewhat,.shareexisting{font-size:13.5px; color:var(--ink-2); margin:6px 0}
.sharekey{margin-left:auto; font-size:11.5px; color:var(--ink-3); background:var(--surface-2); border-radius:3px; padding:2px 6px}
.sharehow{margin:6px 0 10px; padding-left:20px; font-size:13.5px; color:var(--ink-2)}
.sharehow li{margin:4px 0}
.sharetokrow,.sharelink,.sharebtns{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px}
.sharetokrow input[type=password],.sharelink input{flex:1 1 260px; min-width:0; font:13px "IBM Plex Mono",monospace;
  color:var(--ink); background:var(--raised); border:1px solid var(--line); border-radius:4px; padding:8px 10px}
.shareremember{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2)}
.shareremember input{accent-color:var(--accent); margin:0}
.sharebusy{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-2)}
.sharefoot{margin:8px 0 0; font-size:12px}
a.btn{text-decoration:none; display:inline-block}
/* viewer mode: a shared link shows only the report */
.viewbar{border-bottom:1px solid var(--line); background:var(--surface)}
.viewbarin{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding-block:14px}
.viewtitle{font-family:Fraunces,Georgia,serif; font-weight:700; font-size:18px}
.viewtitle b{color:var(--accent); font-weight:600}
.viewmeta{font-size:12.5px; color:var(--ink-3)}
.viewbarin .spacer{flex:1}
.viewown{font-size:13px}
html.viewer .mast, html.viewer .steps, html.viewer .help, html.viewer #sharebtn, html.viewer #addsave,
html.viewer #rebuild, html.viewer #sharepanel, html.viewer .savename{display:none!important}
html.viewer .result{margin-top:0; border-top:0}
#report{display:block; width:100%; height:80vh; border:0; background:var(--bg)}

.help{padding-block:56px 0}
.sechead{display:flex; align-items:baseline; gap:16px; margin-bottom:4px}
.sechead .rule{flex:1; height:1px; background:var(--line)}
.howto{margin:0; padding-left:22px; max-width:74ch; color:var(--ink)}
.howto li{margin:6px 0; padding-left:4px}
.faq{margin-top:26px; border-top:1px solid var(--line-soft); max-width:80ch}
.faq details{border-bottom:1px solid var(--line-soft); padding:12px 0}
.faq summary{cursor:pointer; font-weight:600}
.faq summary:hover{color:var(--accent)}
.faq p{color:var(--ink-2); margin:8px 0 2px}
footer{margin-top:48px; padding-block:22px 40px; border-top:1px solid var(--line); color:var(--ink-3); font-size:12.5px}
@media (max-width:640px){.mast{padding-block:36px 22px} .step{padding:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important} .spinner{animation-duration:3s}}

/* the leaderboard's save, offered on the capital finder and rights advisor */
.linked{margin-top:12px}
.lbsave{display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--raised)}
.lbsave > span{display:flex; flex-direction:column; gap:2px; min-width:0}
.lbsave b{font-size:13.5px}
.lbsave .recentmeta{overflow-wrap:anywhere}
.linked details.recent summary{cursor:pointer; list-style:none}
.linked details.recent summary::-webkit-details-marker{display:none}
.linked details.recent summary span::after{content:" ▾"}

/* sortable, filterable tables (js/grid.js) */
.rank th.sortable{cursor:pointer; user-select:none}
.rank th.sortable:hover{color:var(--accent)}
.rank th[aria-sort="ascending"],.rank th[aria-sort="descending"]{color:var(--accent)}
.filters{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 16px; margin:4px 0 8px}
.filters:empty{display:none}
.filters .fl{display:flex; flex-direction:column; gap:3px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600}
.filters .fl.chk{flex-direction:row; align-items:center; text-transform:none; letter-spacing:0; font-size:13px; padding-bottom:6px}
.filters input[type=number],.filters input[type=search],.filters select{font:500 13.5px Archivo,sans-serif; letter-spacing:0;
  text-transform:none; color:var(--ink); background:var(--raised); border:1px solid var(--line); border-radius:4px; padding:5px 7px}
.filters input[type=number]{width:90px}
.filters input[type=search]{width:150px}
.filters .linkbtn{padding-bottom:7px}
.flcount{font-size:12.5px; color:var(--ink-3); padding-bottom:7px; margin-left:auto}
.tablewrap.scroll{max-height:520px; overflow:auto}
.tablewrap.scroll thead th{position:sticky; top:0; background:var(--surface); z-index:1}