:root{
  --paper:#f3ecdd; --ink:#1f2a24; --mute:#6b6a5c; --rule:#cfc4aa; --card:#faf6ea;
  --string:#4f7a63; --number:#c9822b; --boolean:#8a5a8f; --null:#9a9585; --object:#2f5d73; --mixed:#b5473a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);font:16px/1.5 var(--serif);max-width:1180px;margin:0 auto;padding:20px 18px 40px;overflow-x:hidden}
.top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;font-size:28px;letter-spacing:-.01em}
.mark{width:26px;height:26px;display:inline-block;background:
  linear-gradient(var(--ink),var(--ink)) 0 0/16px 100% no-repeat,
  linear-gradient(var(--number),var(--number)) 18px 0/8px 55% no-repeat,
  linear-gradient(var(--string),var(--string)) 18px 100%/8px 41% no-repeat}
.tag{margin:0;color:var(--mute);font-style:italic}
.drop{background:var(--card);border:1.5px dashed var(--ink);padding:12px;transition:background .15s}
.drop.over{background:#efe2bd}
textarea{width:100%;height:110px;resize:vertical;border:0;background:transparent;font:13px/1.4 var(--mono);color:var(--ink);outline:none}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.sep{color:var(--mute);font-style:italic}
.btn,.chip,.seg button,.linkbtn{font:600 14px var(--serif);cursor:pointer}
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);padding:7px 14px;text-decoration:none}
.btn:hover{background:#34443b}
.btn.gated{background:transparent;color:var(--ink)}
.btn.gated:hover{background:#e9dfc6}
.btn.pay{background:var(--number);border-color:var(--number);color:#1f1608}
.chip{background:transparent;border:1.5px solid var(--ink);border-radius:99px;padding:4px 14px;color:var(--ink);font-family:var(--mono);font-size:13px;font-weight:500}
.chip:hover{background:var(--ink);color:var(--paper)}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:3px solid var(--number);outline-offset:2px}
.err{color:var(--mixed);margin:6px 0 0;min-height:1.5em;font-size:14px}
.bar{display:flex;flex-wrap:wrap;gap:10px 28px;margin:22px 0 10px}
.seg{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.lbl{margin-right:10px;color:var(--mute);font-style:italic}
.seg button{background:transparent;border:1.5px solid var(--ink);margin-left:-1.5px;padding:5px 12px;color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.crumbs{margin:0 0 8px;font:13px var(--mono);color:var(--mute);min-height:1.5em;overflow-wrap:anywhere}
.crumbs button{all:unset;cursor:pointer;color:var(--object);text-decoration:underline}
.stage{border:2px solid var(--ink);background:var(--ink)}
.map{position:relative;width:100%;height:min(66vh,620px);min-height:380px;overflow:hidden}
.cell{position:absolute;overflow:hidden;border:1.5px solid var(--ink);padding:3px 5px;font:600 12px/1.2 var(--mono);color:#fff;cursor:pointer;transition:filter .1s}
.cell.grp{background:rgba(0,0,0,0);color:var(--ink);cursor:pointer;pointer-events:none;border-color:var(--ink);background:#e4d9bd}
.cell.grp>span{background:#e4d9bd;pointer-events:auto;position:relative;z-index:2;padding:0 2px}
.cell.leaf:hover,.cell.sel{filter:brightness(1.18);z-index:3}
.cell.sel{outline:3px solid var(--paper);outline-offset:-4px}
.cell small{display:block;font-weight:400;opacity:.85;margin-top:2px}
.cell.dark{color:#1f2a24}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0;font:13px var(--mono)}
.legend i{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border:1px solid var(--ink)}
.detail{background:var(--card);border:1.5px solid var(--ink);padding:12px 14px;min-height:92px;font-size:15px}
.detail .p{font:600 14px var(--mono);overflow-wrap:anywhere;color:var(--object)}
.detail dl{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:8px 0 0}
.detail dt{color:var(--mute);font-style:italic}.detail dd{margin:0;font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.detail .hint{color:var(--mute);font-style:italic;margin:0}
.export{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;margin-top:22px;padding-top:16px;border-top:2px solid var(--ink)}
.export h2{margin:0;font-size:20px}.export p{margin:2px 0 0;color:var(--mute);max-width:46ch}
.exbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.linkbtn{background:none;border:0;color:var(--mute);text-decoration:underline;font-weight:400}
.unlocked .pay,.unlocked .linkbtn{display:none}
.unlocked .gated{background:var(--ink);color:var(--paper)}
footer{margin-top:30px;color:var(--mute);font-size:13px;text-align:center}
@media(max-width:600px){body{padding:14px 12px 30px}.brand{font-size:24px}.map{height:62vh;min-height:360px}.cell{font-size:11px}.btn{padding:7px 11px}}
footer a{color:inherit}