@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/assets/fonts/realm/Inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(/assets/fonts/realm/Inter-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600 800;font-display:swap;src:url(/assets/fonts/realm/Inter-600.woff2) format("woff2")}
@font-face{font-family:"Pixelify Sans";font-weight:700;font-display:swap;src:url(/assets/fonts/realm/PixelifySans-700.woff2) format("woff2")}
@font-face{font-family:JetBrains Mono;font-weight:100 800;font-display:swap;src:url(/assets/fonts/558ca1a6aa3cb55e-s.p.woff2) format("woff2")}

/* REALM: quiet and dark. Cream on near-black, a pixel wordmark, hairline cards, a live galaxy. */
html{background:#0b0d10}
body{background:#0b0d10;position:relative}
main,.foot{position:relative;z-index:1}
.blob,.progress{display:none !important}

/* type */
.display,.headline,h1,h2,.px{font-family:var(--pixel);font-weight:700;letter-spacing:-.02em}
.display{font-size:clamp(40px,6vw,84px);line-height:.98}
.headline{font-size:clamp(30px,4vw,54px);line-height:1.02}
.title-l,h3{font-weight:600;letter-spacing:-.005em}
.hl{color:var(--on-surface-variant)}
.hl::after,.hl::before{display:none !important}
.label,.eyebrow,.mono,.k{font-family:var(--mono)}

/* header */
.bar,.bar.is-solid{background:transparent !important;box-shadow:none !important;border:0}
.bar.is-solid{background:rgba(11,13,16,.7) !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bar-in{max-width:1200px;padding:0 var(--pad)}
.brand{gap:10px}
.brand span{font-family:var(--pixel);font-weight:700;font-size:21px;letter-spacing:.01em;text-transform:none}
.mk-anim{display:inline-block;width:var(--s,36px);height:var(--s,36px);flex:none;background:url(/assets/img/logo-spin.png) 0 0/calc(var(--s,36px) * 48) var(--s,36px) no-repeat;image-rendering:pixelated;animation:mk-spin 5.6s steps(48) infinite}
@keyframes mk-spin{to{background-position:calc(var(--s,36px) * -48) 0}}
@media (prefers-reduced-motion:reduce){.mk-anim{animation:none}}
.nav{background:rgba(11,13,16,.45);border:1px solid rgba(237,230,214,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:3px}
.nav-ind{background:rgba(237,230,214,.1)}
.nav a{height:34px;padding:0 16px;font-size:14px;color:#b6b0a3;font-weight:400}
.nav a:hover{color:#ede6d6}
.nav a.on{color:#ede6d6}
.bar-actions{gap:22px}
.bar .btn{height:auto;padding:0;border:0;background:none;color:#b6b0a3;font-size:14px;font-weight:400;border-radius:0;min-width:0}
.bar .btn::before{display:none}
.bar .btn:hover{color:#ede6d6;opacity:1}
.bar .btn.btn-accent{color:#ede6d6;font-weight:500}
.bar .btn svg{display:none}
.x-btn{display:inline-grid;place-items:center;color:#b6b0a3;transition:color .2s}
.x-btn:hover{color:#ede6d6}
.x-btn.is-off{opacity:.5;cursor:default}
.x-btn svg{width:16px;height:16px}
.btn{border-radius:999px;font-weight:500}
.btn-tonal{background:transparent;border:1px solid rgba(237,230,214,.3);color:#ede6d6}
.btn-tonal:hover{background:rgba(237,230,214,.08)}
.btn-accent,.btn-filled{background:#ede6d6;color:#0b0d10}
.btn-accent:hover,.btn-filled:hover{opacity:.92}

/* surfaces */
.card,.ecard,.lcard,.step,.stat,.preview,.try,.cta,.rd{border-radius:6px}
.card,.step,.stat,.preview,.lcard{background:#0e1115;border:1px solid rgba(237,230,214,.09)}
.card.tonal,.card.outl{background:#0e1115;border:1px solid rgba(237,230,214,.09)}
.card.outl{border-style:dashed}
.chip{border-radius:999px}
.stat b{color:#ede6d6}
.tile,.portrait,.profile-art{background:#0b0d10}
.foot{border-top:1px solid rgba(237,230,214,.09);margin-top:clamp(60px,10vh,120px);background:transparent;border-radius:0}
.foot .brand span{font-size:30px}

/* galaxies */
.gx{position:relative;width:100%;height:100%}
.gx-fill{position:absolute;inset:0}
.gx-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.gx-fallback,.gx-still{width:100%;height:100%;object-fit:cover;display:block}
.gx-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gx-tag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;font:500 12px/1 var(--font);color:#fff;white-space:nowrap;will-change:transform;text-shadow:0 1px 3px #000,0 0 8px #000}
.gx-tag i{width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}
.gx-tag.cap{font-weight:600;font-size:13px}
.gx-tag.cap i{width:11px;height:11px;margin-left:-5.5px;background:var(--fc);box-shadow:0 0 12px var(--fc),0 0 0 2px rgba(0,0,0,.5)}
.seal,.dcard-gx,.atlas-gx{display:block;width:100%;height:auto}
.seal{border-radius:50%}

/* HERO */
.dhero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.dhero-scene{position:absolute;right:0;top:0;bottom:0;width:78%;z-index:-2}
.dhero-fade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b0d10 0%,#0b0d10 22%,rgba(11,13,16,.55) 46%,transparent 70%),linear-gradient(0deg,#0b0d10 0%,transparent 24%),linear-gradient(180deg,rgba(11,13,16,.6),transparent 18%)}
.dhero-in{width:100%;max-width:1200px;margin:0 auto;padding:calc(var(--bar) + 30px) var(--pad) 90px}
.wordmark{font-family:var(--pixel);font-weight:700;font-size:clamp(84px,12.5vw,168px);line-height:.9;letter-spacing:-.045em;color:#ede6d6;margin:0}
.tagline{margin-top:30px;font-size:clamp(19px,1.8vw,24px);font-weight:500;color:#ede6d6;max-width:24em}
.sub{margin-top:14px;font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:#b6b0a3;max-width:34em}
.dcta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.dcta .btn{height:50px;padding:0 28px;font-size:15px}
.ticker{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12.5px;color:#7c776c}
.tk-ca{color:#ede6d6}
.tk-copy{font:inherit;color:#7c776c;text-decoration:underline;text-underline-offset:3px}
.tk-copy:hover{color:#ede6d6}
.tk-link{color:#b6b0a3;text-decoration:underline;text-underline-offset:3px}
.tk-link.is-off{opacity:.5;text-decoration:none}

/* SECTIONS */
.dsec{padding:clamp(70px,12vh,140px) 0 0}
.dwrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.px{font-size:clamp(34px,4.4vw,56px);line-height:1.02;color:#ede6d6;margin:0}
.px.sm{font-size:clamp(30px,3.4vw,44px)}
.dlede{margin-top:18px;max-width:40em;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:#b6b0a3}
.dhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.dlink{display:inline-flex;align-items:center;gap:8px;color:#ede6d6;font-size:14px;text-decoration:underline;text-underline-offset:4px;margin-top:20px}
.dhead .dlink{margin-top:0}
.dcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.dcard{background:#0e1115;border:1px solid rgba(237,230,214,.09);border-radius:6px;padding:0 0 22px;overflow:hidden;display:grid;align-content:start}
.dcard-img{aspect-ratio:1;background:#0b0d10;overflow:hidden;margin-bottom:16px;border-bottom:1px solid rgba(237,230,214,.07)}
.dcard h3,.dcard p,.dcard small{padding:0 20px}
.dcard h3{font-size:16px;margin-bottom:8px}
.dcard p{font-size:14px;line-height:1.55;color:#b6b0a3}
.dcard small{margin-top:14px;font-size:12px;color:#7c776c;font-family:var(--mono)}
.found{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center;background:#0e1115;border:1px solid rgba(237,230,214,.09);border-radius:6px;padding:clamp(22px,4vw,52px)}
.found-art{display:grid;gap:14px}
.found-gx{aspect-ratio:1;max-width:520px;width:100%;justify-self:center;border-radius:4px;overflow:hidden;background:#0b0d10}
.found-gx.swap .found-img{animation:fadein .6s ease}
@keyframes fadein{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.found-img{width:100%;height:100%;object-fit:cover;display:block}
.found-meta{display:grid;gap:4px;color:#b6b0a3;font-size:14.5px;line-height:1.5;max-width:520px;justify-self:center;width:100%}
.found-meta b{color:#ede6d6;font-weight:600}
.dband{position:relative;margin-top:clamp(70px,12vh,140px);padding:clamp(70px,12vh,130px) 0;overflow:hidden;isolation:isolate;border-top:1px solid rgba(237,230,214,.07);border-bottom:1px solid rgba(237,230,214,.07)}
.dband-bg{position:absolute;inset:0;z-index:-2}
.dband-fade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b0d10 0%,rgba(11,13,16,.88) 38%,rgba(11,13,16,.2) 80%),linear-gradient(0deg,#0b0d10,transparent 18%),linear-gradient(180deg,#0b0d10,transparent 18%)}
.road{margin-top:34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;max-width:860px}
.road-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 0;border-top:1px solid rgba(237,230,214,.1)}
.road-row b{display:block;font-weight:600;font-size:15px}
.road-row span{display:block;color:#b6b0a3;font-size:13.5px;line-height:1.5;margin-top:3px}
.tag{font-style:normal;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid rgba(237,230,214,.25);color:#b6b0a3;flex:none;margin-top:2px}
.tag.live{border-color:rgba(168,230,194,.5);color:#a8e6c2}
.atlas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.atlas-card{display:grid;gap:3px;align-content:start;padding:0 0 16px;background:#0e1115;border:1px solid rgba(237,230,214,.09);border-radius:6px;overflow:hidden;transition:border-color .25s,transform .4s var(--emph)}
a.atlas-card:hover{border-color:rgba(237,230,214,.35);transform:translateY(-4px)}
.atlas-img{aspect-ratio:1;background:#0b0d10;margin-bottom:12px;overflow:hidden}
.atlas-card b,.atlas-card small{padding:0 16px}
.atlas-card b{font-weight:600;font-size:15px}
.atlas-card small{color:#7c776c;font-size:12.5px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,6vw,90px);align-items:start}
.faq{display:grid;border:1px solid rgba(237,230,214,.1);border-radius:6px;background:#0e1115}
.faq details{border-top:1px solid rgba(237,230,214,.08)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-size:14.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:10px;height:10px;position:relative;flex:none;opacity:.6}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:4px;height:1.5px;background:currentColor;transition:transform .25s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:none}
.faq details p{padding:0 22px 20px;color:#b6b0a3;font-size:14.5px;line-height:1.65}

/* the trader's own coin image sits on its galaxy */
.coin-badge{position:absolute;left:14px;bottom:14px;width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #ede6d6;background:#0b0d10;box-shadow:0 6px 22px rgba(0,0,0,.6);z-index:2}
.coin-badge.hide{display:none}
.ecard .tile{position:relative}
.ecard .tile .coin-badge{left:8px;bottom:8px;width:44px;height:44px;border-width:2px}
.atlas-img,.dcard-img{position:relative}
.dropzone{position:relative;display:grid;place-items:center;aspect-ratio:2/1;max-height:220px;border:1px dashed rgba(237,230,214,.35);background:#0b0d10;border-radius:6px;cursor:pointer;overflow:hidden;transition:border-color .2s,background .2s}
.dropzone:hover,.dropzone.is-over{border-color:#ede6d6;background:#101317}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dz-empty{display:grid;justify-items:center;gap:4px;color:var(--on-surface-variant);text-align:center}
.dz-empty b{font:600 15px var(--mono);color:var(--on-surface)}
.dz-empty small{font-size:13px}
.dz-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b0d10}
.realm-id{display:flex;align-items:center;gap:16px}
.realm-coin{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid #ede6d6;flex:none;background:#0b0d10}

/* inner pages */
.fdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;flex:none}
.fdot.lg{width:14px;height:14px;margin:0 0 4px;background:var(--fc)}
.preview-art.map-art{aspect-ratio:3/2;padding:0;background:#0b0d10;position:relative;overflow:hidden}
.preview-art.map-art .portrait{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.preview-art.map-art .ghost{opacity:.9;position:relative;z-index:1}
.preview-art.map-art .ghost .mk-anim{--s:96px;margin:0 auto 10px}
.look img.seal{width:100%;height:100%;display:block}
.ecard .tile{background:#0b0d10;border-radius:4px;overflow:hidden}
.ecard .tile .seal{border-radius:0;width:100%}
.ecard .fd{display:flex;align-items:center;padding:0 6px;gap:0}
.ecard .fd small{margin-left:6px;color:var(--on-surface-variant);font-size:12px}
.realm-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,52px);align-items:center;padding-top:calc(var(--bar) + 10px)}
.realm-map{position:relative;aspect-ratio:3/2;border:1px solid rgba(237,230,214,.1);border-radius:6px;overflow:hidden;background:#0b0d10}
.realm-info{display:grid;gap:14px;align-content:center}
.faction-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.faction{display:grid;gap:6px;align-content:start;border-color:color-mix(in srgb,var(--fc) 45%,transparent) !important}
.faction p{color:var(--on-surface-variant);font-size:14.5px;line-height:1.5}
.chron{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0}
.chron li{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:14px 0;border-top:1px solid rgba(237,230,214,.08)}
.chron li:first-child{border-top:0}
.chron b{font-family:var(--pixel);font-weight:700;color:var(--on-surface-variant)}

@media (max-width:1000px){.dcards,.atlas{grid-template-columns:repeat(2,minmax(0,1fr))}.found,.split,.realm-hero{grid-template-columns:minmax(0,1fr)}.road{grid-template-columns:1fr}.dhero-scene{width:100%;opacity:.8}}
@media (max-width:760px){
  .dhero{align-items:flex-end}
  .dhero-scene{top:0;bottom:30%;width:100%;opacity:1}
  .dhero-fade{background:linear-gradient(0deg,#0b0d10 38%,rgba(11,13,16,.4) 70%,rgba(11,13,16,.6) 100%)}
  .dhero-in{padding-bottom:60px}
  .dcards,.atlas{grid-template-columns:1fr 1fr}
  .bar-actions .btn:not(.btn-accent),.bar-actions .x-btn{display:none}
  .chron li{grid-template-columns:70px 1fr}
}

/* the trader's coin image leads; the realm is the place around it */
.preview-art.coin-art{aspect-ratio:1;padding:0;background:#0e1115;position:relative;overflow:hidden;display:grid;place-items:center}
.coin-big{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.preview-art.coin-art .ghost{display:grid;justify-items:center;gap:10px;color:#7c776c;text-align:center;font-size:14px}
.slot-ph{display:grid;place-items:center;align-content:center;gap:4px;width:100%;height:100%;aspect-ratio:1;border:1px dashed rgba(237,230,214,.25);background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(237,230,214,.03) 12px 24px);color:#7c776c}
.slot-ph b{font:300 40px var(--font);color:#b6b0a3;line-height:1}
.slot-ph small{font-size:12px;letter-spacing:.08em}
.ecard .tile .up-img,.atlas-img .up-img{width:100%;height:100%;object-fit:cover;display:block}
.ecard .tile{aspect-ratio:1}
.atlas-img .slot-ph{border:0}
.places-min{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0;border-top:1px solid rgba(237,230,214,.08)}
.places-min li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(237,230,214,.06);font-size:13.5px}
.places-min span{color:#7c776c}
.realm-hero{align-items:center}
.realm-pic{aspect-ratio:1;max-width:460px;width:100%;border:1px solid rgba(237,230,214,.12);border-radius:6px;overflow:hidden;background:#0e1115;justify-self:center}
.realm-pic img{width:100%;height:100%;object-fit:cover;display:block}
.realm-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.found-art{display:block}
.realm-card{display:grid;gap:14px;background:#0b0d10;border:1px solid rgba(237,230,214,.09);border-radius:6px;padding:22px}
.realm-card.swap{animation:fadein .5s ease}
.rc-top{display:grid;gap:2px}
.rc-top b{font:700 22px var(--pixel)}
.rc-top span{color:#b6b0a3;font-size:13.5px}
.rc-motto{color:#ede6d6;font-size:15px}
.rc-powers{display:grid;gap:8px}
.rc-powers div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline;font-size:13.5px}
.rc-powers b{font-weight:600}
.rc-powers span{grid-column:2;color:#b6b0a3;font-size:12.5px}
.rc-places{display:flex;flex-wrap:wrap;gap:6px}
.rc-places span{border:1px solid rgba(237,230,214,.16);border-radius:999px;padding:4px 11px;font-size:12.5px}
.rc-places small{margin-left:6px;color:#7c776c}
.rc-chron{color:#b6b0a3;font-size:13.5px;line-height:1.5;border-top:1px solid rgba(237,230,214,.08);padding-top:12px}
.rc-chron b{font-family:var(--pixel);color:#ede6d6;margin-right:6px}