@font-face{font-family:'IBM Plex Mono';src:url('./assets/fonts/plex-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('./assets/fonts/plex-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Silkscreen';src:url('./assets/fonts/silkscreen-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Silkscreen';src:url('./assets/fonts/silkscreen-bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --bg:#0e1012;--panel:#131518;--raised:#191c20;--line:#2a2e34;--line-strong:#3a3f46;
  --text:#e4e6e8;--muted:#8b929b;--dim:#5d646c;--green:#7fe08a;--amber:#e0b35a;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--pixel:'Silkscreen','IBM Plex Mono',monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;
  --frame:1440px;--side:340px;--world-height:720px;--target:40px;--focus:2px;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--text);text-decoration:none}a:hover{color:var(--green)}
:focus-visible{outline:var(--focus) solid var(--green);outline-offset:2px}
[hidden]{display:none!important}
h1,h2{margin:0;font-family:var(--pixel);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
p{margin:0 0 var(--s3)}
strong{font-weight:500;color:var(--text)}
.skip{position:absolute;top:var(--s2);left:var(--s2);transform:translateY(-200%);background:var(--green);color:var(--bg);padding:var(--s2) var(--s3);z-index:5}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dot{display:inline-block;width:8px;height:8px;margin-right:var(--s2);background:var(--dim);vertical-align:1px}
.dot.live{background:var(--green)}.dot.sim{background:var(--amber)}

/* header strip */
.top{display:flex;align-items:center;gap:var(--s8);height:56px;padding:0 var(--s4);border-bottom:1px solid var(--line);background:var(--panel)}
.brand{display:flex;align-items:center;gap:var(--s3)}
.brand:hover{color:var(--text)}
.mark{width:28px;height:28px;border:1px solid var(--line-strong);background:var(--raised) url('./favicon.svg') center/16px no-repeat}
.wordmark{font-family:var(--pixel);font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.strip{display:flex;gap:var(--s8);margin:0;flex:1}
.strip div{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
dt{font-family:var(--pixel);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.strip dd{font-size:15px}
.launch{display:flex;align-items:center;gap:var(--s2)}
.ca{padding:0 var(--s3);height:36px;display:inline-flex;align-items:center;border:1px solid var(--line-strong);background:var(--bg);color:var(--muted);font-size:12px;white-space:nowrap;max-width:48ch;overflow:hidden;text-overflow:ellipsis}
.ca a{color:var(--text)}
.button{height:36px;display:inline-flex;align-items:center;padding:0 var(--s4);background:var(--green);color:var(--bg);font-family:var(--pixel);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--green);white-space:nowrap}
.button:hover{background:var(--bg);color:var(--green)}
#connection{margin:0;padding:var(--s2) var(--s4);background:var(--amber);color:var(--bg)}

/* dashboard grid */
.dash{width:min(var(--frame),100%);margin:0 auto;padding:var(--s4);display:grid;grid-template-columns:minmax(0,1fr) var(--side);grid-template-areas:"world side" "how how" "fees real" "wallets wallets";gap:var(--s4);flex:1}
.dash{align-items:start}
.world-region{grid-area:world}.side{grid-area:side;display:flex;flex-direction:column;gap:var(--s4);min-height:0;height:var(--side-height,auto)}
#how{grid-area:how}.wallets{grid-area:wallets}
.dash>.panel:nth-of-type(3){grid-area:fees}.dash>.panel:nth-of-type(4){grid-area:real}
.panel{border:1px solid var(--line);background:var(--panel);min-width:0}
.panel-head{display:flex;align-items:center;gap:var(--s4);height:40px;padding:0 var(--s4);border-bottom:1px solid var(--line)}
.panel-head h2{flex:none}
.panel-head .hint{margin-left:auto}
.panel-head .value{margin-left:auto;font-weight:500;font-variant-numeric:tabular-nums}
.hint{color:var(--muted);font-size:12px}
.note{color:var(--muted);font-size:12px}
.prose{padding:var(--s4);max-width:78ch}
#how .prose{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s12)}
#how .prose>div{max-width:70ch}
#how .life{margin:0;max-width:70ch}
.prose p:last-child{margin-bottom:0}
.weather{color:var(--muted);white-space:nowrap}

/* world panel */
.world-viewport{position:relative;width:100%;height:min(76vh,var(--world-height));min-height:320px;overflow:hidden;background:#464646}
#world{display:block;width:100%;height:100%;cursor:grab;touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges}
#world.dragging{cursor:grabbing}
.panel-foot{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.panel-foot strong{color:var(--text)}
.world-tools,.map-panel,.world-selection{position:absolute;background:#0e1012e6;border:1px solid var(--line-strong);color:var(--text)}
.world-tools{left:var(--s4);bottom:var(--s4);display:flex;align-items:stretch}
.world-tools button{font:inherit;font-size:12px;color:inherit;background:transparent;border:0;border-right:1px solid var(--line);min-width:var(--target);min-height:var(--target);padding:0 var(--s3);cursor:pointer}
.world-tools button:last-child{border-right:0}
.world-tools button:hover{background:#ffffff14}
.world-tools button:disabled{color:var(--dim);cursor:default}
.world-tools #zoom-level{display:inline-flex;align-items:center;padding:0 var(--s2);min-width:48px;justify-content:center;border-right:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}
.world-tools #zoom-in,.world-tools #zoom-out{font-size:18px}
.map-panel{top:var(--s4);right:var(--s4);width:176px;padding:var(--s2)}
.map-panel>span{display:block;font-family:var(--pixel);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
#world-map{display:block;width:100%;aspect-ratio:4/3;cursor:pointer;image-rendering:pixelated}
.map-panel .map-instruction{display:none}
.map-panel.expanded{width:min(560px,calc(100% - var(--s8)));max-height:calc(100% - var(--s8));overflow:auto}
.map-panel.expanded .map-instruction{display:block;margin-top:var(--s2);margin-bottom:0}
.world-selection{left:var(--s4);bottom:calc(var(--s4) + var(--target) + var(--s3));padding:var(--s3);min-width:220px;max-width:calc(100% - var(--s8))}
.world-selection>div{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.world-selection strong{font-weight:500}
.world-selection button{font:inherit;color:var(--muted);background:transparent;border:0;cursor:pointer;min-width:24px;min-height:24px}
.world-selection button:hover{color:var(--text)}
.world-selection p{margin:var(--s1) 0 0;color:var(--muted);font-size:12px}

/* side panels */
progress{appearance:none;display:block;width:calc(100% - var(--s8));height:10px;margin:var(--s4) var(--s4) var(--s2);border:1px solid var(--line-strong);background:var(--bg)}
progress::-webkit-progress-bar{background:var(--bg)}progress::-webkit-progress-value{background:var(--green)}progress::-moz-progress-bar{background:var(--green)}
#spawn-note{padding:0 var(--s4) var(--s4);margin:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4);margin:0;padding:var(--s4)}
.grid div{display:flex;flex-direction:column;gap:2px}
.grid dd{font-size:15px}
.feed-panel{flex:1;display:flex;flex-direction:column;min-height:0}
#feed{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:200px}
#feed li{display:grid;grid-template-columns:52px 8px 1fr;align-items:baseline;gap:var(--s3);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);font-size:12px;line-height:1.5}
#feed li:last-child{border-bottom:0}
#feed .empty{display:block;color:var(--muted)}
#feed time{color:var(--muted);font-variant-numeric:tabular-nums}
.swatch{height:8px;width:8px;background:var(--dim);display:inline-block;align-self:center}
#feed a{color:var(--text)}#feed a:hover{color:var(--green)}

/* lower panels */
.life{margin:var(--s3) 0;padding-left:var(--s6)}
.life li{margin-bottom:var(--s2);padding-left:var(--s1)}
.life li::marker{color:var(--muted)}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;vertical-align:top;padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);font-size:13px}
thead th{font-family:var(--pixel);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400}
tbody th{font-weight:500;white-space:nowrap}
td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums}
td:last-child{color:var(--muted)}
.wallet-row{padding:var(--s4);display:grid;grid-template-columns:auto minmax(200px,360px) 1fr;gap:var(--s3) var(--s4);align-items:center}
.wallet-row label{font-family:var(--pixel);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
select{width:100%;min-height:36px;padding:0 var(--s3);font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line-strong);border-radius:0}
select:hover{border-color:var(--muted)}select:disabled{color:var(--dim)}
#wallet-detail{margin:0;overflow-wrap:anywhere;color:var(--muted);font-size:12px}
#wallet-detail a{color:var(--text)}
.bar{display:flex;align-items:center;gap:var(--s8);height:40px;padding:0 var(--s4);border-top:1px solid var(--line);background:var(--panel);font-size:12px;color:var(--muted)}
.bar #engine{color:var(--text)}
.bar .hint{margin-left:auto}

@media(max-width:1100px){
  .dash{grid-template-columns:1fr;grid-template-areas:"world" "side" "how" "fees" "real" "wallets"}
  .side{display:grid;grid-template-columns:1fr 1fr;height:auto}
  .side .feed-panel{grid-column:1/-1;min-height:320px}
  .strip{gap:var(--s6)}
}
@media(max-width:820px){
  .top{height:auto;flex-wrap:wrap;gap:var(--s3) var(--s4);padding:var(--s3) var(--s4)}
  .brand{order:0}.launch{order:1;margin-left:auto}.strip{order:2;flex-basis:100%;gap:var(--s4);overflow:auto;padding-bottom:2px}
  .strip dd{font-size:14px}
  .ca{max-width:22ch}
  .side{grid-template-columns:1fr}
  .wallet-row{grid-template-columns:1fr}
  #how .prose{grid-template-columns:1fr}
  .world-viewport{height:min(64vh,480px)}
  .panel-head .hint{display:none}
  .bar .hint{display:none}
}
@media(max-width:480px){
  .dash{padding:var(--s2)}
  .map-panel{width:112px;top:var(--s2);right:var(--s2)}
  .map-panel>span{display:none}.map-panel.expanded>span{display:block}
  .world-tools{left:var(--s2);right:var(--s2);bottom:var(--s2);justify-content:space-between}
  .world-selection{left:var(--s2);max-width:calc(100% - var(--s4))}
  .prose{padding:var(--s3)}
  .grid{padding:var(--s3)}
  th,td{padding:var(--s2)}
}

/* landing */
.links{display:flex;gap:var(--s6);flex:1;font-size:12px;color:var(--muted)}
.links a{color:var(--muted)}.links a:hover{color:var(--text)}
.land{width:min(var(--frame),100%);margin:0 auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);flex:1}
.hero{padding:var(--s8) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:var(--s6);align-items:stretch}
.hero-text{padding:var(--s8) 0 var(--s4);max-width:64ch}
.ticker{font-family:var(--pixel);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:var(--s4)}
.button.muted{background:transparent;color:var(--muted);border-color:var(--line-strong)}
.button.muted:hover{color:var(--text);border-color:var(--text)}
.hero .figures{padding:var(--s4) 0 0;gap:var(--s8);flex-wrap:wrap}
.mascot-panel{display:flex;flex-direction:column}
.stage{position:relative;flex:1;min-height:440px;background:var(--panel)}
#mascot{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:pointer;touch-action:manipulation}
.mirror-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s6);padding:var(--s4);align-items:center;max-width:90ch}
#mirror{display:block;width:168px;height:216px;image-rendering:pixelated;background:var(--bg);border:1px solid var(--line)}
.mirror-row label{display:block;font-family:var(--pixel);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
input[type=text]{width:100%;min-height:36px;padding:0 var(--s3);font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line-strong);border-radius:0;margin-bottom:var(--s3)}
input[type=text]:hover{border-color:var(--muted)}
.hero h1{font-size:clamp(28px,4.2vw,52px);letter-spacing:.02em;line-height:1.1;text-transform:none;margin-bottom:var(--s6)}
.lede{font-size:16px;line-height:1.6;color:var(--muted);margin-bottom:var(--s6)}
.lede,.hero .actions{max-width:64ch}
.actions{display:flex;align-items:center;gap:var(--s6);margin:0}
.text-link{color:var(--muted);border-bottom:1px solid var(--line-strong)}
.text-link:hover{color:var(--text);border-color:var(--text)}
.figures{padding:var(--s3) var(--s4);gap:var(--s12)}
.figures dd:empty::before{content:'–';color:var(--dim)}
.note.wide{padding:0 var(--s1);margin:0}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.pair .actions{margin-top:var(--s4)}
@media(max-width:820px){
  .links{display:none}
  .hero{grid-template-columns:1fr;padding-top:var(--s4)}
  .hero-text{padding-top:var(--s4)}
  .stage{min-height:320px}
  .mirror-row{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .figures{gap:var(--s4);overflow:auto}
}

/* explainer scenes */
.scenes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);padding:var(--s4) var(--s4) 0}
.scene h3{margin:var(--s3) 0 var(--s2);font-family:var(--pixel);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.scene p{margin:0;color:var(--muted)}
.scene-stage{position:relative;height:200px;border:1px solid var(--line);background:var(--panel)}
.scene-stage canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
@media(max-width:820px){.scenes{grid-template-columns:1fr}}

/* ecosystem and quests */
.eco{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s6);padding:var(--s4)}
.eco h3{margin:0 0 var(--s2);font-family:var(--pixel);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.eco p{margin:0;color:var(--muted)}
.quests-intro{padding-bottom:0}
.quests{list-style:none;margin:0;padding:var(--s2) var(--s4) var(--s4);display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s4)}
.quests li{border:1px solid var(--line);padding:var(--s3);display:grid;gap:var(--s2);background:var(--bg)}
.quest-row{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}
.quest-row strong{font-family:var(--pixel);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.quest-burn{font-size:12px;color:var(--amber);white-space:nowrap}
.quests p{margin:0;color:var(--muted);font-size:13px}
.quests progress{width:100%;margin:var(--s1) 0 0;height:8px}
.quest-progress{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.quests li.done{border-color:var(--green)}
.quests li.done .quest-progress{color:var(--green)}
@media(max-width:1100px){.eco,.quests{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.eco,.quests{grid-template-columns:1fr}}

.ca.copy{cursor:pointer;color:var(--text);max-width:none}
.ca.copy strong{font-weight:500;margin-left:6px}
.ca.copy:hover{border-color:var(--muted)}