/* A crisp habitat and an artwork-first token directory. */
:root{--ink:#eef8fb;--ink-2:#a7bec8;--ink-3:#7897a3;--paper:#0b1c23;--paper-2:#102832;--edge:#2b4d59}
.stage{max-width:none;padding:0 0 24px}
.pixel-world{background:#245782;border:0;box-shadow:none}
.world-scenery{mask-image:none!important;-webkit-mask-image:none!important;opacity:1}
.pixel-world::after{background:none;box-shadow:none}
.world-shade{background:linear-gradient(180deg,#07242b22,transparent 40%)}
.world-mascot{width:132px;height:132px;rotate:none;animation:none}
.world-ui{left:24px;right:24px}.world-foot{left:24px;right:24px}
.top{background:#081c24;border-color:#3d6976;backdrop-filter:none}
.top .brand img,.footer-brand .brand img{rotate:none;object-fit:contain}
.stage .colony-overview{max-width:1360px;margin:0 auto;background:#0b242d;border-color:#345965;padding:24px 30px;box-shadow:none}
.stage .feed-status{max-width:1360px;margin:12px auto 0;padding-inline:30px;color:#b2ced4}
body::before{background:linear-gradient(#04182066,#04182066),url('/assets/host/forest-continuation.webp') center/cover no-repeat}
body::after{background:linear-gradient(90deg,transparent,#071c2399 20%,#071c2399 80%,transparent)}
.tandem-story{max-width:1280px;clip-path:none;background:#0b2029;border:1px solid #365763;backdrop-filter:none;box-shadow:none;margin:28px auto 58px}
.tandem-story>div{padding:24px 28px;border-color:#2d4853}.tandem-story span{color:#9ccdda}.tandem-story h2{font:700 22px var(--body);color:#effaff}.tandem-story p{color:#a5bdc6;font-size:14px}
main .sec{padding:52px 36px}.sec-in{max-width:1280px}
main .sec-head{display:grid;grid-template-columns:1fr 350px;align-items:end;column-gap:40px;border-bottom:1px solid #41616b;background:#091e26f5;margin:0;padding:28px 30px;box-shadow:inset 3px 0 #b7e7f4}
main .sec-head:after{display:none}main .sec-head>.eyebrow{font:10px var(--mono);letter-spacing:1.5px;margin-bottom:18px;color:#9ebecb}
main .sec-head h2{font:700 clamp(30px,3.7vw,48px)/1.12 var(--body);letter-spacing:-1.5px;color:#f0f8fa}main .sec-head h2 em{color:#b5e5f3}
main .sec-sub{font:14px/1.6 var(--body);color:#afc4cd;margin:0}
.host-toolbar{display:flex;align-items:center;gap:16px;background:#0a1e26;border:1px solid #35545f;border-top:0;box-shadow:none;backdrop-filter:none;margin:0;padding:18px 22px}
.host-toolbar .fld{display:flex;flex-direction:row;align-items:center;gap:18px;margin:0;flex:1;min-width:0}.host-toolbar .lbl{color:#9dbcc9;font:10px var(--mono);letter-spacing:1px;margin:0;white-space:nowrap}
.host-toolbar .in{height:44px;min-width:0;background:#06151d;border:1px solid #355560;font:14px var(--body);color:#e9f4f8;box-shadow:none}
.host-toolbar>.rt{width:auto;min-height:44px;padding:10px 16px;font:11px var(--mono)!important;border:1px solid #476672;background:#142e38;color:#d5eaf1;box-shadow:none}
.host-toolbar>.rt:after{display:none}
.directory-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #4a6974;background:#091e26eb;padding:18px 0 0}
.host-sort{display:flex;gap:0}.host-sort button{appearance:none;background:transparent;color:#b6cdd5;border:0;border-bottom:2px solid transparent;min-height:43px;padding:12px 22px;font:700 12px var(--body);cursor:pointer;transition:background .18s,color .18s}
.host-sort button:hover{background:#15333e;color:#edfaff}.host-sort button[aria-pressed=true]{color:#c5f1fe;border-bottom-color:#b8eafa;background:#163440}
.host-sort button:focus-visible,.token-pair:focus-visible{outline:2px solid #c6f3ff;outline-offset:3px}
.host-result{font:11px var(--mono);color:#b6cdd5;padding-right:20px}
[data-host-status]{font:10px var(--mono);letter-spacing:.2px;color:#b4cbd0;margin:14px 0 22px;text-shadow:0 1px #05131a}
.stonk-hosts[data-hosts]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0}
[data-hosts] .host-card.token-card{display:flex;flex-direction:column;position:relative;gap:0;padding:0;min-height:0;min-width:0;background:#091b23;border:1px solid #36545e;box-shadow:0 6px 20px #04131d40;clip-path:none;backdrop-filter:none;overflow:hidden;transition:border-color .18s,transform .18s}
[data-hosts] .token-card:before,[data-hosts] .token-card:after{display:none}
[data-hosts] .token-card:hover{border-color:#a3d6e6;transform:translateY(-3px);background:#0b2029}
[data-hosts] .token-card.selected{border-color:#c7effd;box-shadow:0 0 0 1px #c7effd}
.token-art{height:178px;position:relative;overflow:hidden;isolation:isolate;background:#07151b;border-bottom:1px solid #34505c}
[data-hosts] .token-art>img{width:100%;height:100%;border:0;border-radius:0;object-fit:cover;image-rendering:auto;display:block;transition:transform .3s}
.token-card:hover .token-art>img{transform:scale(1.035)}
.token-art:after{content:'';position:absolute;inset:0;box-shadow:inset 0 35px 35px -20px #04121dcc;pointer-events:none}
.token-rank,.token-status{position:absolute;z-index:1;top:10px;font:9px var(--mono);letter-spacing:.6px;line-height:1;padding:7px 8px}
.token-rank{left:10px;background:#b5e7f6;color:#0b2430}.token-status{right:10px;background:#071821e8;color:#c2dde6;border:1px solid #77a1ae55;display:flex;align-items:center;gap:5px}.token-status i{width:4px;height:4px;background:#9ddacb;border-radius:50%}
.token-info{padding:18px 16px 12px;flex:1;min-width:0}
.token-title{display:flex;flex-direction:column;gap:5px;min-width:0}
[data-hosts] .token-title h3{font:700 20px/1.2 var(--body);letter-spacing:-.5px;margin:0;color:#f2f9fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.token-title>span{font:10px var(--mono);color:#91acb9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.token-tags{display:flex;gap:6px;margin:14px 0}.token-tags span{font:9px var(--mono);padding:5px 7px;border:1px solid #34515d;color:#b3d4df;line-height:1}
[data-hosts] .token-card dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:14px 0;border-top:1px solid #2e4752;grid-column:auto}
[data-hosts] .token-card dl>div{display:flex;flex-direction:column;gap:7px;padding:0;border:0!important;min-height:0;grid-column:auto;grid-row:auto}
[data-hosts] .token-card dt{font:8px var(--mono);letter-spacing:.7px;color:#819fad;text-transform:uppercase}
[data-hosts] .token-card dd{font:700 17px/1.1 var(--body);letter-spacing:0;color:#e5f4f8;text-align:left;margin:0;font-variant-numeric:tabular-nums}
.token-address{display:flex;justify-content:space-between;gap:5px;align-items:center;padding-top:12px;border-top:1px solid #233e49;font:8px var(--mono);color:#6f929f;white-space:nowrap}
.token-address a{font:10px var(--body);color:#a4d5e5;text-decoration:none}.token-address a:hover{text-decoration:underline}
.token-pair{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:47px;padding:12px 16px;background:#143340;border:0;border-top:1px solid #3c606e;color:#c4eaf6;font:700 12px var(--body);cursor:pointer;transition:background .18s,color .18s}.token-pair>span{font:22px/1 var(--body)}.token-pair:hover,.selected .token-pair{background:#b2e5f6;color:#102733}
.stonk-hosts[data-hosts]>a.rt{grid-column:1/-1;display:block;background:#0b222c;border:1px solid #416472;color:#bce7f6;text-align:center;padding:18px;margin-top:8px;font:700 13px var(--body);clip-path:none}
.host-empty{background:#0b222c;border-color:#416472;color:#bce0e8;grid-column:1/-1}
.sec .form.board{background:#0a202a;backdrop-filter:none;box-shadow:none;border-color:#3c5b68;padding:30px}
.inoc-grid{margin-top:24px}.form .lbl{color:#b7ced8}.form .step{background:#b1dfe9;color:#122e3a}.form .note,.launch-mode .note{color:#a9bfc9}
main .sec .in,.coins-page .in{background:#071820;border-color:#365764;color:#e5f4fa}
.launch-mode{background:#102a35;border-color:#355461}.form .form-foot{border-color:#355461}
.inoc-side .dish{background:#102f3a url('/assets/symbio-woodland/woodland.png') center/cover no-repeat;border:1px solid #456b76;box-shadow:none}.inoc-side .preview{background:#0b222df2;border-color:#7099ab}.pv-pic{background-image:url('/assets/host/logo-original.png')}
.inoc-side .dish .syr.bond-seal{width:132px;height:132px}.dish-note{background:#0b202a;color:#a9c4cd;border:1px solid #345563}
.end{background:#071b24;border-color:#3d6171;backdrop-filter:none}.guide .board{background:#0c222c;border-color:#426370}
[data-page=coins] main .sec.register{padding-top:44px}
@media(min-width:1600px){.stage{max-width:none}.sec-in{max-width:1360px}.token-art{height:200px}}
@media(max-width:1100px){.stonk-hosts[data-hosts]{grid-template-columns:repeat(3,minmax(0,1fr))}.tandem-story{margin-inline:28px}.token-art{height:180px}main .sec-head{grid-template-columns:1fr 300px}}
@media(max-width:780px){.stage{padding:0 0 20px}.world-scenery{mask-image:none!important;-webkit-mask-image:none!important}.pixel-world{background:#245782}.world-ui,.world-foot{left:14px;right:14px}.world-mascot{width:128px;height:128px}.stage .colony-overview{margin:0;padding:22px 20px}.tandem-story{margin:20px 18px 40px}.tandem-story>div{padding:22px}.stonk-hosts[data-hosts]{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}main .sec{padding:36px 20px}main .sec-head{grid-template-columns:1fr;gap:16px;padding:24px}.sec-head h2{font-size:36px!important;letter-spacing:-1px!important}main .sec-head>.eyebrow{margin:0}.host-toolbar{padding:14px;gap:10px}.host-toolbar .lbl{display:none}.host-toolbar .fld{display:block}.host-toolbar>.rt{font-size:0!important;width:44px;padding:10px;flex:none}.host-toolbar>.rt:after{display:block;content:'↻';font:22px var(--body)}.host-sort button{padding:12px 14px;font-size:11px}.host-result{font-size:9px;padding-right:10px}.token-art{height:175px}}
@media(max-width:520px){.stonk-hosts[data-hosts]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}main .sec{padding-inline:14px}.token-art{height:138px}.token-info{padding:13px 11px 10px}[data-hosts] .token-title h3{font-size:17px}.token-title>span{font-size:8px}.token-rank,.token-status{font-size:7px;padding:5px}.token-rank{left:7px;top:7px}.token-status{right:7px;top:7px}.token-tags{gap:4px;margin:12px 0}.token-tags span{font-size:7px;padding:4px}[data-hosts] .token-card dl{grid-template-columns:1fr;gap:10px;padding:12px 0}[data-hosts] .token-card dl>div{flex-direction:row;align-items:center;justify-content:space-between;gap:5px}[data-hosts] .token-card dt{font-size:6px;letter-spacing:0}[data-hosts] .token-card dd{font-size:13px}.token-address{font-size:7px;flex-direction:column;align-items:start;gap:7px}.token-address a{font-size:9px}.token-pair{font-size:11px;padding:11px;min-height:44px}.token-pair>span{font-size:19px}.directory-controls{gap:10px;flex-wrap:wrap;padding-top:8px}.host-sort{width:100%}.host-sort button{flex:1}.host-result{padding:0 12px 10px}.host-toolbar .in{font-size:12px}.sec .form.board{padding:20px}.world-tagline{color:#f0fbff;text-shadow:0 2px #123b5a}}
@media(max-width:340px){.stonk-hosts[data-hosts]{grid-template-columns:1fr}.token-art{height:190px}}
@media(prefers-reduced-motion:reduce){[data-hosts] .token-card,.token-art>img{transition:none}.token-card:hover .token-art>img{transform:none}}
[data-hosts] .host-card.token-card{align-items:stretch}
.token-art,.token-info{width:100%;box-sizing:border-box}
[data-hosts] .token-card dl>div:first-child,[data-hosts] .token-card dl>div:last-child{grid-column:auto;grid-row:auto}
@media(max-width:520px){[data-hosts] .token-card dl>div{flex-direction:column;align-items:flex-start;gap:4px}[data-hosts] .token-card dt{font-size:8px}[data-hosts] .token-card dd{font-size:16px}}
/* The habitat is a separate, opaque window inside the surrounding forest. */
.stage{max-width:1450px;margin-inline:auto;padding:26px 30px 24px}
.pixel-world{border:3px solid #06141d;box-shadow:0 0 0 1px #4d6c74,0 12px 36px #03101680;background:#245782}
.world-scenery{opacity:1;mask-image:none!important;-webkit-mask-image:none!important}
.pixel-world::after{background:none;box-shadow:inset 0 0 0 1px #071821;pointer-events:none}
.stage .colony-overview{margin-top:16px;border:1px solid #35515d}
.pv-pic{background-image:url('/assets/host/logo-circle.png')}
@media(min-width:1600px){.stage{max-width:1500px}}
@media(max-width:780px){.stage{padding:18px 16px 22px}.pixel-world{border-width:2px}.stage .colony-overview{margin-top:14px}.world-ui,.world-foot{left:10px;right:10px}}
/* Original preview proportions, with subdued woodland outside the crisp frame.
   Blend the surrounding palette rather than reducing the scene's opacity. */
body{background-color:#102d37;background-image:none}
body::before{display:block;content:'';position:fixed;inset:0;width:100%;height:100lvh;background:linear-gradient(#102d37a6,#081f2bbd),url('/assets/host/forest-continuation.webp') center/cover no-repeat;opacity:1;transform:none;animation:none;z-index:-2;pointer-events:none}
body::after{display:none}
.stage{max-width:1440px;padding:26px 28px 36px;margin:0 auto}
.pixel-world{height:780px;border:3px solid #071f2b;border-radius:0;background-color:#245782;box-shadow:7px 7px 0 #061b2666,inset 0 0 0 3px #c1eaf333}
.pixel-world::after{background:none;box-shadow:inset 0 0 0 3px #c1eaf326}
.stage .colony-overview{margin-top:22px;box-shadow:4px 4px 0 #061b264d;border:2px solid #274b5c}
@media(max-width:1080px){.pixel-world{height:780px}}
@media(max-width:780px){.stage{padding:20px 18px 28px}.pixel-world{height:750px;border-width:3px}.world-ui{left:12px;right:12px}.world-foot{left:11px;right:11px}.stage .colony-overview{margin-top:21px}}
@media(max-width:400px){.stage{padding-inline:12px}}