:root{
  --paper:#f3eddb; --paper2:#e9e1cb; --ink:#111314; --ink2:#55524a; --rule:#cbbfa6;
  --rust:#c9531a; --moss:#56613d;
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono: "IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.5}
.masthead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:28px 48px 18px;border-bottom:1px solid var(--ink)}
.mark .title{font-size:44px;letter-spacing:.01em;font-weight:400;font-style:italic;line-height:1}
.mark .sub{display:block;margin-top:8px;font-size:14px;color:var(--ink2);letter-spacing:.02em}
.ledger{display:flex;gap:28px;margin:0}
.ledger div{border-left:1px solid var(--rule);padding-left:12px}
.ledger dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.ledger dd{margin:2px 0 0;font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;padding:32px 48px}
.plate canvas{width:100%;max-width:820px;aspect-ratio:1;display:block;margin:0 auto;cursor:crosshair}
.caption{max-width:820px;margin:14px auto 0;font-size:14px;color:var(--ink2);border-top:1px solid var(--rule);padding-top:10px}
.fig{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-right:6px}
.notes{display:flex;flex-direction:column;gap:26px}
.block h2{margin:0 0 10px;font-weight:400;font-size:13px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:6px}
.hint{margin:0 0 12px;font-size:13.5px;color:var(--ink2)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
button{font:inherit;color:inherit;background:transparent;border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:10px 12px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;transition:background .25s}
button:hover{background:var(--paper2)}
button em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--rust)}
.release{margin-top:16px}
.release label{display:block;font-size:13.5px;color:var(--ink2);margin-bottom:6px}
.release .row{display:flex;border:1px solid var(--rule)}
.release input{flex:1;font:inherit;font-style:italic;background:transparent;border:0;padding:9px 12px;color:var(--ink);outline:none}
.release button{border-right:0;border-bottom:0;border-left:1px solid var(--rule);gap:14px}
.specimen{font-size:14px;min-height:62px}
.specimen.empty{color:var(--ink2);font-style:italic}
.specimen .name{font-style:italic;font-size:20px}
.specimen .meta{font-family:var(--mono);font-size:11.5px;color:var(--ink2);margin-top:4px;display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
#brain,#tree{width:100%;display:block;margin-top:8px}
.log{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:11.5px;max-height:150px;overflow:auto}
.log li{display:flex;gap:12px;padding:4px 0;border-bottom:1px dotted var(--rule)}
.log li b{font-weight:400;color:var(--ink2);min-width:64px}
.colophon{margin:12px 48px 40px;padding-top:12px;border-top:1px solid var(--ink);font-size:13.5px;color:var(--ink2);display:flex;justify-content:space-between;gap:40px}
.colophon p{margin:0;max-width:640px}.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:1100px){.layout{grid-template-columns:1fr}.ledger{flex-wrap:wrap}}
.masthead{align-items:center}
.wallet{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:170px}
.wallet .mono{color:var(--ink2)}
.ghost{border:1px solid var(--ink);padding:7px 14px;justify-content:center}
.viewport{position:relative;max-width:820px;margin:0 auto}
.zoom{position:absolute;right:0;bottom:0;display:flex;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.zoom button{font-family:var(--mono);font-size:12px;padding:4px 10px;justify-content:center;background:var(--paper)}
.sync{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--moss);margin-left:6px}
.sync.bad{color:var(--rust)}
.below{max-width:820px;margin:34px auto 0}
.hall{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.hall h3,.skilltree h3{font-weight:400;font-style:italic;font-size:15px;margin:0 0 6px}
.rank{list-style:none;margin:0;padding:0;font-size:14px}
.rank li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;padding:6px 0;border-bottom:1px dotted var(--rule);align-items:baseline}
.rank .pl{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.rank .nm{font-style:italic}
.rank .sc{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.rank .sub{grid-column:2/4;font-family:var(--mono);font-size:10.5px;color:var(--ink2)}
a{color:var(--rust);text-decoration:none;border-bottom:1px solid rgba(201,83,26,.35)}
a:hover{border-bottom-color:var(--rust)}
.toast{margin-top:12px;border-left:2px solid var(--rust);padding:6px 10px;font-size:13.5px;background:var(--paper2)}
.muted{color:var(--ink2)}
button:disabled{cursor:default;opacity:.6}button:disabled:hover{background:transparent}
.cardrow{display:flex;gap:10px;margin-top:10px}
.skilltree{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.skilltree.empty{display:block;border:0;font-style:italic;color:var(--ink2);font-size:14px}
.node{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 9px;font-size:12.5px;line-height:1.35;min-height:74px;position:relative}
.node .br{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.node .lb{display:block;font-style:italic;font-size:14px;margin:2px 0}
.node .st{font-family:var(--mono);font-size:10px;color:var(--ink2)}
.node.on{background:var(--paper2)}.node.on .st{color:var(--moss)}
.node.on:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--moss)}
.node.lock{opacity:.45}.node.lock .lb{text-decoration:line-through}
.node.ready .st{color:var(--rust)}
.node button{padding:2px 0;border:0;font-family:var(--mono);font-size:10px;color:var(--rust)}
.log li a{margin-left:auto}
.mark{display:flex;align-items:center;gap:16px}.mark .seal{width:56px;height:56px;border-radius:50%;border:1px solid var(--ink);flex:none}
.mark .title{display:block}
.viewport canvas.bg{position:absolute;left:0;top:0;pointer-events:none}.viewport #tank{position:relative;background:transparent}
.wrow{display:flex;gap:10px;align-items:center}
.sound{border:1px solid var(--ink);border-radius:50%;width:36px;height:36px;padding:0;justify-content:center;align-items:center;color:var(--ink)}
.sound:hover{color:var(--rust)}.sound .mute{display:none}.sound[aria-pressed="false"] .waves{display:none}.sound[aria-pressed="false"] .mute{display:inline}.sound[aria-pressed="false"]{color:var(--ink2)}
.lines{list-style:none;margin:0;padding:0;font-size:13.5px}
.lines li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:7px 0 7px 8px;border-bottom:1px dotted var(--rule);position:relative}
.lines li.muted{display:block;font-style:italic;padding-left:0}
.lines li.on:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--rust)}
.lines .nm{font-style:italic}.lines .sc{grid-column:1;font-family:var(--mono);font-size:10.5px;color:var(--ink2)}
.lines .btns{grid-column:2;grid-row:1/3;display:flex;gap:0;align-items:center;border-left:1px solid var(--rule)}
.lines .btns button{border:0;border-right:1px solid var(--rule);padding:4px 8px;font-family:var(--mono);font-size:10.5px;color:var(--ink)}
.lines .btns button:hover{color:var(--rust)}.lines .st{color:var(--ink2)!important}.lines .st.on{color:var(--rust)!important}.lines .st.on path{fill:currentColor}
.search{margin-top:10px;border:1px solid var(--rule)}.search input{width:100%;font:inherit;font-style:italic;background:transparent;border:0;padding:8px 10px;color:var(--ink);outline:none}
.camnote{max-width:820px;margin:6px auto 0;font-family:var(--mono);font-size:11px;color:var(--rust);letter-spacing:.04em}
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;padding:34px 48px 30px;border-bottom:1px solid var(--rule);align-items:end}
.hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);margin:0 0 10px}
.hero h1{font-weight:400;font-size:40px;line-height:1.12;margin:0;max-width:760px;letter-spacing:-.005em}
.hero .lede{font-size:17px;color:var(--ink2);max-width:640px;margin:14px 0 22px}
.cta{display:flex;gap:22px;align-items:center}
.primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:13px 22px;font-size:17px;justify-content:center;transition:background .2s,border-color .2s}
.primary:hover{background:var(--rust);border-color:var(--rust)}
.how{font-size:16px}
.link{border:0;padding:8px 4px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.steps li{display:grid;grid-template-columns:44px 1fr;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule);font-size:16px}
.steps b{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--rust);border:1px solid var(--rust);border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}
.steps i{font-style:italic;color:var(--ink)}
.guide{position:fixed;inset:0;background:rgba(17,19,20,.38);display:flex;align-items:center;justify-content:center;z-index:50}
.guide[hidden]{display:none}
.guide .card{background:var(--paper);border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-7px;padding:34px 38px 26px;max-width:480px;box-shadow:0 18px 50px rgba(17,19,20,.25)}
.guide h2{font-weight:400;font-style:italic;font-size:30px;margin:4px 0 10px}
.guide p{font-size:16px;color:var(--ink2);margin:0 0 14px}
.gstep{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)!important}
.gnav{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.dlgrow{display:flex;border:1px solid var(--ink)}.dlgrow input{flex:1;font:inherit;font-size:18px;font-style:italic;background:transparent;border:0;padding:11px 12px;color:var(--ink);outline:none}
.small{font-size:13px!important}
.est{font-family:var(--mono);font-size:10.5px;color:var(--rust)}
.ledger div{cursor:help}
@media (max-width:1100px){.hero{grid-template-columns:1fr}.hero h1{font-size:32px}}
/* ---- polish pass: 8px grid, numerals, focus, motion, PvP panels, mobile */
:root{--ease:cubic-bezier(.22,.61,.36,1)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
dd,.sc,.log,.feed b,.mono{font-variant-numeric:tabular-nums lining-nums}
h1,h2,.title{font-feature-settings:"liga","kern"}
::selection{background:var(--rust);color:var(--paper)}
:focus{outline:none}
:focus-visible{outline:1.5px solid var(--rust);outline-offset:2px}
button,a,.lines li{transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.actions button{align-items:center;padding:12px 14px}
.actions button span{display:inline-flex;align-items:center;gap:10px}
.actions button:last-child:nth-child(odd){grid-column:1/3}
.actions button:hover em{color:var(--ink)}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.actions button:hover .ic{color:var(--rust)}
.primary:active,.ghost:active,.actions button:active{transform:translateY(1px)}
.ghost:hover{background:var(--ink);color:var(--paper)}
.block{scroll-margin-top:16px}
.notes{gap:32px}
/* loading */
.loading{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink);font-style:italic;font-size:15px;background:radial-gradient(circle at 50% 50%,#ece5d2 0,#e7e0cd 60%,transparent 61%)}
.booting .loading{display:flex}
.loading .spin{transform-origin:30px 30px;animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* battle feed */
.rules{list-style:none;margin:0 0 14px;padding:0;font-size:13.5px;color:var(--ink2)}
.rules li{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:5px 0;align-items:start}
.rules svg{width:18px;height:18px;color:var(--rust);margin-top:2px}
.rules b{font-weight:400;font-style:italic;color:var(--ink)}
.feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);max-height:232px;overflow:auto}
.feed li{display:grid;grid-template-columns:58px 1fr;gap:10px;padding:7px 0;border-bottom:1px dotted var(--rule);font-size:14px;line-height:1.35}
.feed li.muted{display:block;font-style:italic;font-size:13.5px}
.feed b{font-family:var(--mono);font-weight:400;font-size:10.5px;color:var(--ink2);padding-top:2px}
.feed i{color:var(--ink)}
.feed .zone span:before{content:"";display:inline-block;width:8px;height:8px;background:var(--rust);margin-right:7px;clip-path:polygon(0 0,100% 30%,70% 50%,100% 70%,0 100%)}
.feed .hunt span:before{content:"";display:inline-block;width:7px;height:7px;border:1.3px solid var(--ink);border-radius:50%;margin-right:7px}
.feed .season{color:var(--ink2)}
.feed .new{animation:ink .9s var(--ease)}
@keyframes ink{from{background:rgba(201,83,26,.16)}to{background:transparent}}
/* specimen card */
.specimen:not(.empty){border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-5px;padding:14px 16px}
.specimen .name{font-size:22px;line-height:1.15;margin-bottom:8px}
.specimen .meta{gap:4px 18px;border-top:1px solid var(--rule);padding-top:8px}
.rank li{padding:8px 0}
.rank li:first-child .pl{color:var(--rust)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* mobile */
@media (max-width:760px){
  .masthead{display:grid;grid-template-columns:1fr auto;gap:14px 12px;padding:16px 18px 12px;align-items:center}
  .mark .title{font-size:30px}.mark .seal{width:40px;height:40px}.mark .sub{font-size:12px;margin-top:4px}
  .ledger{grid-column:1/3;grid-row:2;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 0}
  .ledger div{padding-left:10px}.ledger dd{font-size:15px}.ledger dt{font-size:9px;letter-spacing:.1em}
  .wallet{min-width:0}.wallet .ghost{padding:6px 10px;font-size:14px}
  .hero{grid-template-columns:1fr;gap:22px;padding:22px 18px}
  .hero h1{font-size:28px}.hero .lede{font-size:15.5px;margin:10px 0 16px}
  .cta{flex-direction:column;align-items:stretch;gap:10px}.cta .primary{justify-content:center}.cta .how{text-align:center;border:0}
  .layout{padding:18px;gap:28px}.caption{font-size:13px}
  .hall{grid-template-columns:1fr;gap:18px}
  .colophon{flex-direction:column;margin:12px 18px 28px;gap:12px}
  .guide .card{margin:0 14px;padding:26px 22px 20px}.guide h2{font-size:25px}
}

/* zoom controls and touch */
#tank{touch-action:none;-webkit-user-select:none;user-select:none}
.zoom{right:8px;bottom:8px;border:1px solid var(--ink);background:var(--paper);box-shadow:0 2px 0 rgba(17,19,20,.12)}
.zoom button{min-width:38px;height:36px;font-size:15px;color:var(--ink);border-right:1px solid var(--ink);border-bottom:0;padding:0 10px}
.zoom button:last-child{border-right:0;font-size:12px}
.zoom button:hover{background:var(--ink);color:var(--paper)}
.zhint{position:absolute;right:8px;bottom:50px;margin:0;font-style:italic;font-size:13px;color:var(--ink2);background:rgba(243,237,219,.9);padding:3px 8px;border-left:2px solid var(--rust);pointer-events:none;transition:opacity .6s var(--ease)}
.zhint.gone{opacity:0}
@media (max-width:760px){.zoom button{min-width:44px;height:44px}.zhint{bottom:58px;font-size:12px}}
.zoom button{align-items:center;justify-content:center;line-height:1}