:root{color-scheme:light dark;
  --paper:#f3ecdd; --ink:#1f2a24; --mute:#6b6a5c; --rule:#cfc4aa; --card:#faf6ea;
  --string:#4f7a63; --number:#c9822b; --boolean:#8a5a8f; --null:#9a9585; --object:#2f5d73; --mixed:#b5473a;
  --grp:color-mix(in srgb,var(--rule) 50%,var(--card));
  --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:color-mix(in srgb,var(--number) 15%,var(--paper))}
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:color-mix(in srgb,var(--ink) 85%,var(--paper))}
.btn.gated{background:transparent;color:var(--ink)}
.btn.gated:hover{background:color-mix(in srgb,var(--rule) 40%,var(--card))}
.btn.pay{background:var(--number);border-color:var(--number);color:#1f2a24}
.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:#faf6ea;cursor:pointer;transition:filter .1s}
.cell.grp{color:var(--ink);cursor:pointer;pointer-events:none;border-color:var(--ink);background:var(--grp)}
.cell.grp>span{background:var(--grp);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;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}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.row:has(#file:focus-visible) label[for=file]{outline:3px solid var(--number);outline-offset:2px}
.job{font:400 clamp(24px,5vw,36px)/1.15 var(--serif);margin:0 0 8px;letter-spacing:-.01em}
.scope,.asof,.allow{color:var(--mute);font-size:14px;margin:6px 0}
.btn,.chip,.seg button,.linkbtn,.crumbs button,.detail .chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.btn.pay{min-height:44px}
:focus-visible{outline:3px solid var(--number);outline-offset:2px}
@media (prefers-color-scheme:dark){
 :root{--paper:#161b18;--ink:#ece6d6;--mute:#a9a898;--rule:#3a443d;--card:#1e2420}
 .detail .p{color:var(--string)}
}

/* paywall on the lock (per-app overrides; shared paywall.js untouched) */
body .tp-ov{background:color-mix(in srgb,var(--ink) 55%,transparent)}
body .tp-box{background:var(--card);color:var(--ink);border:1px solid var(--rule);box-shadow:none}
body .tp-box h2{color:var(--ink)}
body .tp-box p,body .tp-box ul,body .tp-box li{color:var(--mute)!important}
body .tp-box input{background:var(--paper);color:var(--ink);border-color:var(--rule)}
body .tp-btn{background:var(--object);color:var(--card)}
body .tp-btn:not(.tp-ghost):hover{background:var(--ink);color:var(--paper)}
body .tp-btn.tp-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
body .tp-btn.tp-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--ink)}
body .tp-spin{border-color:var(--rule);border-top-color:var(--object)}
body .tp-msg{color:var(--mixed)}
body .tp-code{background:var(--paper);color:var(--ink)}
body .tp-inline .tp-box{border-color:var(--rule)}
body .tp-bar{background:var(--card);color:var(--ink);border-top-color:var(--rule);box-shadow:none}
body .tp-bar a{background:var(--object);color:var(--card)}
body .tp-bar button{background:transparent;color:var(--ink);border:1px solid var(--rule)}
body .tp-bar button:hover{background:var(--paper);border-color:var(--ink)}
body .tp-bar :focus-visible,body .tp-box :focus-visible{outline-color:var(--object)}
@media (prefers-color-scheme:dark){body .tp-btn:not(.tp-ghost),body .tp-bar a{background:var(--ink);color:var(--paper)}body .tp-btn:not(.tp-ghost):hover,body .tp-bar a:hover{background:var(--mute);color:var(--paper)}body .tp-spin{border-top-color:var(--ink)}body .tp-bar :focus-visible,body .tp-box :focus-visible{outline-color:var(--ink)}}
.adclip{margin:0 auto 18px;width:100%;max-width:560px}
.adclip video{display:block;width:100%;height:auto;aspect-ratio:1;border:1px solid var(--rule);background:var(--card)}
.ppx{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.pp{min-width:44px;min-height:44px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--ink);font:600 14px/1 var(--mono);padding:0 14px;cursor:pointer}
.pp:hover{border-color:var(--ink)}
.pp:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media(min-width:900px){.hero{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:36px;align-items:center;margin-bottom:22px}.hero .adclip{margin:0;max-width:none}.hero .job{font-size:44px}.hero .scope{font-size:19px}}