:root{color-scheme:dark;--cream:#f5eddd;--gold:#d8b17d;--dim:#b5a895;--sans:Arial,Helvetica,sans-serif;--mono:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#211b13;color:var(--cream);font:13px/1.5 var(--sans);height:100svh}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:5px}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}button,a{-webkit-tap-highlight-color:transparent}p,h1,h2{margin:0}[hidden]{display:none!important}#world{position:fixed;inset:0;overflow:hidden;background:#21180e;touch-action:none}#terrain{position:absolute;top:0;left:0;transform-origin:0 0;width:1600px;height:6300px;will-change:transform}#soil{width:1600px;height:6300px;display:block;pointer-events:none}#world-canvas,#ant-fallback{position:absolute;inset:0;width:100%;height:100%}#world-canvas{touch-action:none;cursor:grab}#world-canvas.is-dragging{cursor:grabbing}#world-canvas.over-ant{cursor:pointer}.world-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0c0b0885 0%,transparent 24%,transparent 76%,#0c0b0870 100%)}.grain{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 180px 20px #100d0850}.world-header{position:fixed;z-index:5;left:36px;right:36px;top:23px;display:flex;align-items:center;gap:31px}.world-brand{display:flex;align-items:center;gap:9px;letter-spacing:-.09em;font-size:34px;font-weight:600}.world-brand .brand-mark{width:28px;height:28px;display:block;object-fit:contain}.world-breadcrumb{display:flex;gap:14px;font-size:10px;align-items:center;color:#d5c7b4}.world-breadcrumb>span{color:#aa9272}.world-breadcrumb strong{font-weight:400;color:#f3e6d3}.back-home{margin-left:auto;border:1px solid #dec9a42e;background:#18161090;backdrop-filter:blur(18px);border-radius:25px;padding:10px 16px;font-size:10px;display:flex;gap:12px;transition:background .2s}.back-home:hover{background:#544630aa}.world-title{position:fixed;top:135px;left:55px;pointer-events:none;max-width:380px;z-index:2;text-shadow:0 2px 20px #140e0690;transition:opacity .5s,transform .5s}.overline{font:8px/1.6 var(--mono);letter-spacing:.13em;color:#d6c2a2}.world-title .overline{display:flex;align-items:center;gap:9px}.overline i{width:5px;height:5px;border-radius:50%;background:#d7b07a;box-shadow:0 0 10px #d7b07a80}.world-title h1{font-size:clamp(57px,5.5vw,88px);line-height:1.03;letter-spacing:-.065em;font-weight:400;margin:24px 0}.world-title h1 em{font-family:var(--sans);font-weight:400;color:#eac593;letter-spacing:-.08em}.world-subtitle{font-size:12px;color:#e3d5bf;line-height:1.8}.experience-tag{display:block;margin-top:26px;font:7px var(--mono);letter-spacing:.1em;color:#bdb096}.world-title.is-muted{opacity:0;transform:translateY(-10px)}.world-readout{position:fixed;right:36px;top:127px;z-index:3;width:190px;padding:17px 18px;border:1px solid #ddc59924;border-radius:12px;background:#16130ca6;backdrop-filter:blur(22px)}.readout-caption{font:7px var(--mono);letter-spacing:.13em;color:#ae9d81;display:block;margin-bottom:15px}.world-readout>div:not(.environment-status){display:flex;align-items:center;justify-content:space-between;margin:9px 0;color:#c8b89e;font-size:10px}.world-readout strong{color:#f1ddbc;font:11px var(--mono);font-weight:400}.environment-status{display:flex;align-items:center;gap:6px;border-top:1px solid #af966128;padding-top:11px;margin-top:15px;font-size:8px;color:#c4b48f}.environment-status i{width:4px;height:4px;border-radius:50%;background:#a8b17c}.layer-picker{position:fixed;left:36px;bottom:130px;z-index:3;display:flex;flex-direction:column;gap:6px}.layer-picker button{display:flex;gap:12px;align-items:center;text-align:left;font-size:10px;color:#cbbd9f;padding:9px 13px;background:#1e1a1280;border:1px solid #c3a87612;border-radius:6px;backdrop-filter:blur(14px);transition:background .2s,color .2s}.layer-picker button span{font:8px var(--mono);color:#a58d67}.layer-picker button:hover,.layer-picker button.is-active{background:#d7b888;color:#241d13}.layer-picker button.is-active span{color:#6f5533}.world-controls{position:fixed;z-index:7;left:50%;transform:translateX(-50%);bottom:48px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 40px)}.control-group{display:flex;align-items:center;background:#17160dce;backdrop-filter:blur(20px);border:1px solid #d8c79c2e;border-radius:12px;height:46px;padding:4px;box-shadow:0 4px 30px #0002}.control-group button{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;min-width:35px;height:35px;padding:0 12px;font-size:14px;transition:background .2s,color .2s}.control-group button:hover{background:#d4b5802b;color:#fff1d5}.control-group svg{width:16px;height:16px}.control-text{font-size:10px;white-space:nowrap}.control-divider{width:1px;height:17px;background:#cbb8852d;margin:0 2px}#zoom-value{min-width:42px;text-align:center;font:9px var(--mono);color:#cbb68f}#speed-world{font-size:11px;font-family:var(--mono)}.world-footer{position:fixed;left:36px;right:36px;bottom:18px;display:flex;justify-content:space-between;pointer-events:none;z-index:3;font:7px var(--mono);letter-spacing:.09em;color:#cec0a2}.world-footer i{font-style:normal;color:#7e6f53;margin:0 7px}.depth-map{position:fixed;z-index:3;right:38px;bottom:117px;width:49px;height:191px;border:1px solid #dbc7a645;border-radius:7px;overflow:hidden;background:#1f1a12;box-shadow:0 4px 25px #0003;opacity:.9}.depth-map img{width:100%;height:100%;display:block;filter:brightness(.75)}#map-window{position:absolute;left:0;right:0;top:0;height:25px;background:#d1b47d35;border:1px solid #f3d4a7aa;pointer-events:none;min-height:6px}#map-target{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;padding:0}.hover-label{position:fixed;pointer-events:none;z-index:5;padding:7px 11px;background:#18160de6;border:1px solid #d4b88866;border-radius:5px;font:9px var(--mono);color:#e6c899;box-shadow:0 5px 20px #0004}.selection-ring{position:fixed;width:65px;height:65px;border:1px solid #e2b66f9c;border-radius:50%;pointer-events:none;z-index:2;transform:translate(-50%,-50%);box-shadow:0 0 0 8px #dfb66f12}.selection-ring::before,.selection-ring::after{content:'';position:absolute;background:#d8b576aa}.selection-ring::before{height:1px;width:9px;top:50%;left:-5px}.selection-ring::after{height:1px;width:9px;top:50%;right:-5px}.ant-inspector{position:fixed;z-index:6;right:34px;top:108px;width:270px;border:1px solid #d8c59b36;border-radius:15px;background:#191810e8;backdrop-filter:blur(25px);padding:24px;box-shadow:0 12px 50px #0004}.inspector-close{position:absolute;top:11px;right:13px;font-size:23px;color:#c7b897;width:28px;height:28px}.ant-inspector>.overline{font-size:7px;color:#b6a37b}.ant-inspector h2{font-size:24px;font-weight:400;letter-spacing:-.04em;margin:14px 0 12px}.inspector-badges{display:flex;gap:7px;font-size:8px;color:#e4c899}.inspector-badges span{padding:3px 8px;border:1px solid #ae956337;border-radius:4px}.ant-behavior{font-size:10px;color:#bdb895;margin:18px 0}.inspector-section{padding-top:15px;border-top:1px solid #b69b652a}.inspector-section>.overline{font-size:7px;display:block;margin-bottom:15px;color:#b5a982}.inspector-trait{display:grid;grid-template-columns:1fr 65px 27px;gap:7px;align-items:center;font-size:8px;color:#b7b092;margin:11px 0}.inspector-trait i{height:3px;background:#4d4732;border-radius:3px;overflow:hidden}.inspector-trait b{display:block;height:100%;background:#c5a56e}.inspector-trait>span:last-child{font:8px var(--mono);color:#cbb891;text-align:right}.inspector-reputation{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin:21px 0 19px;border-top:1px solid #b69b652a;padding-top:15px;color:#b8ab85}.inspector-reputation strong{font:17px var(--mono);color:#e4d1a4}.follow-button{width:100%;padding:11px 13px;background:#d9bb87;border-radius:6px;font-size:10px;color:#2a2215;display:flex;justify-content:space-between}.follow-button:hover{background:#e5cfa7}.follow-button[aria-pressed=true]{background:#847c53;color:#fff3d4}.inspector-note{font-size:8px;line-height:1.7;color:#a79b7f;margin-top:14px}.world-help{position:fixed;z-index:8;left:50%;transform:translateX(-50%);bottom:105px;width:350px;max-width:calc(100% - 34px);background:#211f14ed;border:1px solid #d9bd8445;border-radius:13px;padding:23px;backdrop-filter:blur(25px);box-shadow:0 15px 60px #0004}.world-help strong{font-size:14px;font-weight:500;color:#f1dcba}.world-help p{font-size:11px;color:#c6b99a;line-height:1.8;margin:14px 0}.world-help small{font-size:9px;color:#a99c7b}.world-help kbd{font:8px var(--mono);padding:3px 5px;background:#675b393f;border:1px solid #b5a06c33;border-radius:3px;margin-right:4px}.world-loading{position:fixed;inset:0;z-index:10;background:#171711;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;transition:opacity .6s,visibility .6s}.world-loading.is-ready{opacity:0;visibility:hidden;pointer-events:none}.world-loading>span{font-size:14px;letter-spacing:-.02em}.world-loading small{color:#928b72;font-size:10px}.loading-ring{width:31px;height:31px;border:1px solid #84755140;border-top-color:#d6b477;border-radius:50%;animation:rotate 1.6s linear infinite}.no-script{position:fixed;z-index:20;left:10%;right:10%;top:40%;padding:25px;background:#211d13;border:1px solid #d4b988}.no-script a{text-decoration:underline}@keyframes rotate{to{transform:rotate(360deg)}}
@media(max-width:800px){.world-header{left:24px;right:24px;top:20px}.world-breadcrumb{display:none}.world-title{left:30px;top:118px}.world-title h1{font-size:64px}.world-readout{right:24px;top:115px;width:165px}.layer-picker{left:24px;bottom:125px}.depth-map{right:26px;bottom:120px}.ant-inspector{right:24px;width:255px;padding:22px}.world-footer{left:24px;right:24px}.world-controls{gap:7px}.control-group button{padding-inline:10px}.control-text{font-size:9px}}
@media(max-width:580px){.world-header{top:17px;left:20px;right:20px}.world-brand{font-size:29px}.world-brand .brand-mark{width:24px;height:24px}.back-home{font-size:8px;padding:9px 12px;gap:7px}.world-title{top:104px;left:25px;max-width:260px}.world-title .overline{font-size:6px;gap:7px;letter-spacing:.07em}.world-title h1{font-size:58px;margin:18px 0}.world-subtitle{font-size:10px}.experience-tag{font-size:5px;margin-top:16px}.world-readout{top:auto;bottom:118px;right:20px;width:141px;padding:13px;background:#17130ca6}.readout-caption{font-size:6px;margin-bottom:9px}.world-readout>div:not(.environment-status){font-size:8px;margin-block:7px}.world-readout strong{font-size:9px}.environment-status{font-size:6px;padding-top:8px;margin-top:10px}.layer-picker{left:20px;bottom:127px;gap:5px}.layer-picker button{font-size:8px;padding:8px 10px;gap:8px}.layer-picker button span{font-size:6px}.depth-map{display:none}.world-controls{bottom:51px;gap:6px;max-width:calc(100% - 30px)}.control-group{height:42px;border-radius:10px;padding:3px}.control-group button{min-width:29px;height:32px;padding-inline:8px;font-size:13px}.control-group .control-text{display:none}#zoom-value{font-size:8px;min-width:35px}#speed-world{font-size:10px}.control-divider{margin:0 1px;height:14px}.world-footer{left:20px;right:20px;bottom:23px;font-size:5px;letter-spacing:.06em}.world-footer>span:last-child{display:none}.world-footer>span:first-child{margin:auto}.ant-inspector{right:15px;left:15px;top:auto;bottom:108px;width:auto;padding:18px 21px;max-height:calc(100svh - 210px);overflow:auto;border-radius:13px}.ant-inspector h2{font-size:24px;margin-block:9px}.inspector-badges{font-size:7px}.ant-behavior{margin-block:12px;font-size:9px}.inspector-section{padding-top:12px}.inspector-section>.overline{margin-bottom:11px}.inspector-trait{grid-template-columns:1fr 95px 27px;margin-block:9px;font-size:9px}.inspector-reputation{margin:15px 0;padding-top:12px;font-size:9px}.inspector-note{font-size:7px;line-height:1.5;margin-top:10px}.inspector-note br{display:none}.world-help{bottom:105px;padding:20px;width:330px}.world-help strong{font-size:13px}.world-help p{font-size:10px}.world-help small{font-size:8px}.world-title.inspector-open{opacity:0}.hover-label{font-size:8px;padding:5px 8px}.selection-ring{width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- wallet (Privy / Solana) ---------- */
.wallet-mount{margin-left:auto;position:relative;z-index:6}
.wallet-box{position:relative}
.wallet-button{display:flex;align-items:center;gap:9px;padding:11px 17px;border-radius:25px;font-size:10px;color:#f0e4cf;border:1px solid #dec9a42e;background:#18161090;backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);box-shadow:inset 0 1px 0 #f5e6c81f,0 6px 24px #0000004d;transition:background .25s,border-color .25s,transform .15s}
.wallet-button:hover{background:#544630aa;border-color:#e6cfa552}
.wallet-button:active{transform:translateY(1px)}
.wallet-button.is-loading{opacity:.45;cursor:default}
.wallet-address{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.wallet-dot{width:6px;height:6px;border-radius:50%;background:#a8b17c;box-shadow:0 0 8px #a8b17c99;animation:wallet-pulse 3s ease-in-out infinite}
.wallet-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:168px;display:flex;flex-direction:column;padding:6px;border-radius:12px;border:1px solid #d8c59b36;background:#191810e8;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);box-shadow:0 12px 40px #00000059;animation:wallet-in .18s ease}
.wallet-menu button{text-align:left;padding:9px 11px;border-radius:8px;font-size:10px;color:#cbbd9f;transition:background .2s,color .2s}
.wallet-menu button:hover{background:#d4b5802b;color:#fff1d5}
@keyframes wallet-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes wallet-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:580px){.wallet-button{font-size:9px;padding:9px 13px;gap:7px}.wallet-menu{min-width:150px}}
@media(prefers-reduced-motion:reduce){.wallet-dot,.wallet-menu{animation:none}}

/* ---------- the signed-in wallet's own ant ---------- */
.user-ring{position:fixed;width:76px;height:76px;border-radius:50%;pointer-events:none;z-index:2;transform:translate(-50%,-50%);border:1px solid #e8d3a866;background:radial-gradient(circle,#e8d3a814 0%,transparent 62%);box-shadow:0 0 0 1px #e8d3a81a,0 0 24px #e0bb7a2e;animation:user-breathe 4.5s ease-in-out infinite}
.user-ring-label{position:absolute;left:50%;top:-17px;transform:translateX(-50%);font-size:6px;letter-spacing:.18em;color:#f2e0ba;background:#181610b3;border:1px solid #dec9a43d;border-radius:4px;padding:2px 7px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@keyframes user-breathe{0%,100%{box-shadow:0 0 0 1px #e8d3a81a,0 0 24px #e0bb7a2e;border-color:#e8d3a855}50%{box-shadow:0 0 0 4px #e8d3a810,0 0 36px #e0bb7a47;border-color:#f0dcb082}}
@media(prefers-reduced-motion:reduce){.user-ring{animation:none}}
@media(max-width:580px){.user-ring{width:60px;height:60px}}

/* =========================================================================
   Wallet · ant · colony surfaces
   Extends the existing habitat language rather than replacing it: same gold,
   same translucency, same restraint. Glass has two tiers — primary for
   surfaces you act on, secondary for the data inside them.
   ========================================================================= */

.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}

/* ---------- header cluster ---------- */
.header-cluster{margin-left:auto;display:flex;align-items:center;gap:9px}
.colony-pulse{display:flex;align-items:center;gap:7px;font-size:9px;color:#bdae8e;font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:4px}
.colony-pulse i{width:4px;height:4px;border-radius:50%;background:#a8b17c;box-shadow:0 0 7px #a8b17c88;animation:wallet-pulse 3s ease-in-out infinite}
.header-nav{display:flex;align-items:center;gap:2px}
.nav-link{padding:9px 11px;border-radius:8px;font-size:10px;color:#c6b89b;transition:background .2s,color .2s}
.nav-link:hover{background:#d4b5801f;color:#f3e4c6}
.nav-box{position:relative}

/* ---------- pills ---------- */
.wallet-button.is-primary{background:#d9bb87;color:#241d13;border-color:#e7cfa2;box-shadow:inset 0 1px 0 #fff6e0aa,0 6px 22px #d9bb8724}
.wallet-button.is-primary:hover{background:#e7cea3}
.wallet-button.is-ghost{background:#14130d7a;color:#cdbe9e}
.wallet-button.is-error{border-color:#c98a6a55;color:#e8b79b}
.wallet-button.is-icon{padding:11px 14px;font-size:13px}
.wallet-dot.is-working{background:#a8b17c;box-shadow:0 0 8px #a8b17c99}
.wallet-dot.is-exploring{background:#d9bb87;box-shadow:0 0 8px #d9bb8799}
.wallet-dot.is-resting{background:#8d8471;box-shadow:none;animation:none}
.pill-spinner{width:9px;height:9px;border:1px solid #cbb88f40;border-top-color:#d9bb87;border-radius:50%;animation:rotate 1s linear infinite}

/* ---------- glass ---------- */
.glass{border-radius:16px;background:#17150ecc;backdrop-filter:blur(28px) saturate(1.2);-webkit-backdrop-filter:blur(28px) saturate(1.2);border:1px solid #d8c59b30;box-shadow:inset 0 1px 0 #f7e9c714,0 18px 60px #00000066}
.glass-secondary{background:#1c1a1299;border-color:#c9b58e24;box-shadow:inset 0 1px 0 #f7e9c70f}

/* ---------- sheets ---------- */
.sheet-layer{position:fixed;inset:0;z-index:30;display:flex;justify-content:flex-end;align-items:stretch;padding:18px}
.sheet-scrim{position:absolute;inset:0;background:#0b0a0688;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:0;cursor:default;animation:fade-in .25s ease}
.sheet{position:relative;width:min(420px,100%);display:flex;flex-direction:column;max-height:100%;animation:sheet-in .3s cubic-bezier(.22,1,.36,1)}
.sheet.is-wide{width:min(540px,100%)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 14px;border-bottom:1px solid #b69b6524}
.sheet-head h2{font-size:19px;font-weight:400;letter-spacing:-.03em;color:#f3e4c8}
.sheet-close{font-size:22px;color:#c7b897;width:30px;height:30px;border-radius:8px;transition:background .2s}
.sheet-close:hover{background:#d4b5802b}
.sheet-body{padding:18px 24px 26px;overflow:auto;overscroll-behavior:contain}
.sheet-body section{padding-top:20px;margin-top:20px;border-top:1px solid #b69b651f}
.sheet-body section:first-of-type{border-top:0;margin-top:0;padding-top:4px}
.panel-lede{font-size:11px;color:#bbae90;line-height:1.7;margin-bottom:14px}

.section-title{display:flex;align-items:center;gap:9px;font:8px var(--mono);letter-spacing:.13em;color:#b3a583;text-transform:uppercase;margin-bottom:14px}
.section-title em{font-style:normal;margin-left:auto}
.simulated-tag{font:7px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#cbae7c;border:1px solid #c9a86f3d;background:#c9a86f14;border-radius:4px;padding:3px 6px}

/* ---------- metrics ---------- */
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.glass-metric{padding:13px 14px;border-radius:11px;background:#1d1a1280;border:1px solid #c9b58e1f}
.glass-metric-label{display:block;font-size:9px;color:#a99d82;margin-bottom:7px}
.glass-metric-value{display:block;font-size:17px;font-weight:400;color:#f0e1c2;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.glass-metric-value.is-up{color:#b6c089}
.glass-metric-value.is-down{color:#dfa886}
.glass-metric-value.is-measured{color:#f3e4c8}
.glass-metric-sub{display:block;font:7px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8e8369;margin-top:5px}

.bar{display:block;height:3px;background:#4d4732;border-radius:3px;overflow:hidden;flex:1}
.bar b{display:block;height:100%;background:#c5a56e;border-radius:3px;transition:width .5s cubic-bezier(.22,1,.36,1)}

.fine-note{font-size:9px;line-height:1.75;color:#9e937a;margin-top:12px}
.fine-note b{color:#c3b48f;font-weight:400}
.empty-note{font-size:10px;color:#9e937a}
.active-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:#a8b17c;margin:0 5px 0 2px;vertical-align:middle}

/* ---------- my ant ---------- */
.ant-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.ant-owner{font-size:10px;color:#a99d82}
.ant-owner b{color:#e3d2ae;font-weight:400;font-variant-numeric:tabular-nums}
.ant-sub{font-size:9px;color:#8e8369;margin-top:5px}
.ant-status{display:flex;align-items:center;gap:6px;font:7px var(--mono);letter-spacing:.11em;padding:5px 9px;border-radius:20px;border:1px solid #c9b58e2e;color:#ddcaa4;white-space:nowrap}
.ant-status i{width:5px;height:5px;border-radius:50%;background:#d9bb87;animation:wallet-pulse 3s ease-in-out infinite}
.ant-status.is-working i{background:#a8b17c}
.ant-status.is-resting i{background:#8d8471;animation:none}

.task-problem{font-size:12px;color:#ebdcbc;margin-bottom:11px}
.task-holdings{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 13px}
.task-holdings li{font:9px var(--mono);letter-spacing:.06em;padding:4px 8px;border-radius:5px;background:#c9a86f17;border:1px solid #c9a86f2e;color:#e0c79b}
.task-progress{display:flex;align-items:center;gap:11px}
.task-progress b{font:10px var(--mono);color:#dcc79c;font-weight:400;min-width:34px;text-align:right;font-variant-numeric:tabular-nums}

.trait-list,.birth-genome{margin:0}
.trait-list>div,.birth-genome>div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;margin:10px 0}
.trait-list dt,.birth-genome dt{font-size:9px;color:#a99d82}
.trait-list dd,.birth-genome dd{display:flex;align-items:center;gap:10px;margin:0}
.trait-list dd b,.birth-genome dd b{font:10px var(--mono);color:#dcc79c;font-weight:400;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}

.best-discovery{display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding:11px 13px;border-radius:10px;background:#c9a86f12;border:1px solid #c9a86f26;font-size:9px;color:#a99d82}
.best-discovery strong{font:11px var(--mono);color:#e9d3a6;font-weight:400;font-variant-numeric:tabular-nums}

.primary-button{width:100%;margin-top:14px;padding:13px;border-radius:9px;background:#d9bb87;color:#2a2215;font-size:10px;letter-spacing:.06em;text-align:center;box-shadow:inset 0 1px 0 #fff6e0aa;transition:background .2s}
.primary-button:hover{background:#e7cea3}
.primary-button.is-disabled,.primary-button:disabled{background:#4a4331;color:#a2977d;box-shadow:none;cursor:not-allowed}

/* ---------- colony / method ---------- */
.pipeline{list-style:none;padding:0;margin:0;counter-reset:step}
.pipeline li{position:relative;padding:0 0 16px 20px;border-left:1px solid #b69b6533}
.pipeline li:last-child{border-left-color:transparent;padding-bottom:0}
.pipeline li::before{content:'';position:absolute;left:-4px;top:4px;width:7px;height:7px;border-radius:50%;background:#1a1810;border:1px solid #c9a86f70}
.pipeline-label{display:block;font:8px var(--mono);letter-spacing:.12em;color:#e0c79b}
.pipeline-detail{display:block;font-size:9px;color:#9e937a;margin-top:4px}

.input-list{list-style:none;padding:0;margin:0}
.input-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #b69b651a;font-size:10px;color:#c3b48f}
.input-list li:last-child{border-bottom:0}
.input-status{font:7px var(--mono);letter-spacing:.09em;text-transform:uppercase;font-style:normal;padding:3px 7px;border-radius:4px;white-space:nowrap}
.input-status.is-live{color:#c2cc93;background:#a8b17c1f;border:1px solid #a8b17c3d}
.input-status.is-planned{color:#a1957b;background:#ffffff08;border:1px solid #b69b6533}

.paper-banner,.honesty-banner{display:flex;flex-direction:column;gap:6px;padding:13px 15px;border-radius:11px;margin-bottom:6px;background:#c9a86f12;border:1px solid #c9a86f33}
.paper-banner strong,.honesty-banner strong{font:8px var(--mono);letter-spacing:.14em;color:#eccf9d}
.paper-banner span,.honesty-banner span{font-size:9px;line-height:1.7;color:#a99d82}

.allocation{list-style:none;padding:0;margin:0}
.allocation li{display:grid;grid-template-columns:52px 1fr 48px;gap:11px;align-items:center;margin:9px 0}
.alloc-ticker{font:10px var(--mono);color:#ddcaa4;letter-spacing:.04em}
.alloc-bar{display:block;height:5px;background:#403a2a;border-radius:3px;overflow:hidden}
.alloc-bar b{display:block;height:100%;background:linear-gradient(90deg,#b8945d,#e0c288);border-radius:3px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.alloc-weight{font:10px var(--mono);color:#e2cea4;font-weight:400;text-align:right;font-variant-numeric:tabular-nums}

.qa-list{margin:0}
.qa-list>div{padding:13px 0;border-bottom:1px solid #b69b651a}
.qa-list>div:last-child{border-bottom:0}
.qa-list dt{font-size:11px;color:#ebdcbc;margin-bottom:7px}
.qa-list dd{margin:0;font-size:9px;line-height:1.8;color:#9e937a}

/* ---------- birth ---------- */
.birth-layer{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:#0b0a06c4;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fade-in .35s ease}
.birth-card{width:min(400px,100%);padding:34px 32px;text-align:left}
.birth-orb{position:relative;width:54px;height:54px;margin:0 auto 26px}
.birth-orb span{position:absolute;inset:0;border-radius:50%;border:1px solid #d9bb8759;animation:orb 2.6s ease-in-out infinite}
.birth-orb span:nth-child(2){animation-delay:.5s}
.birth-orb span:nth-child(3){animation-delay:1s}
.birth-steps{list-style:none;padding:0;margin:0}
.birth-steps li{display:flex;align-items:center;gap:11px;font:8px var(--mono);letter-spacing:.12em;color:#6f674f;padding:7px 0;transition:color .4s}
.birth-steps li i{width:5px;height:5px;border-radius:50%;background:#4a4331;transition:background .4s,box-shadow .4s}
.birth-steps li.is-active{color:#e6d0a4}
.birth-steps li.is-active i{background:#d9bb87;box-shadow:0 0 9px #d9bb8799}
.birth-steps li.is-done{color:#9c9070}
.birth-steps li.is-done i{background:#8d9a6a}
.birth-note{font-size:9px;color:#8e8369;margin-top:18px;text-align:center}
.birth-note.is-error,.birth-step.is-error{color:#dfa886;font:9px var(--mono);letter-spacing:.1em;text-align:center}
.birth-reveal{animation:fade-in .5s ease}
.birth-born{font:11px var(--mono);letter-spacing:.16em;color:#eccf9d;text-align:center;margin-bottom:16px}
.birth-meta{display:flex;align-items:center;justify-content:center;gap:14px;font:7px var(--mono);letter-spacing:.11em;color:#a1957b;margin-bottom:22px}
.birth-status{display:flex;align-items:center;gap:6px}
.birth-status i{width:5px;height:5px;border-radius:50%;background:#a8b17c;box-shadow:0 0 8px #a8b17c88}

/* ---------- toast ---------- */
.toast{position:fixed;z-index:50;left:50%;transform:translateX(-50%);bottom:110px;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:11px;background:#221c14ee;border:1px solid #c98a6a45;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:10px;color:#e9cdb8;box-shadow:0 12px 40px #00000059;max-width:calc(100% - 32px)}
.toast button{font-size:10px;color:#f0d6a8;text-decoration:underline}

@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes sheet-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes orb{0%{transform:scale(.55);opacity:0}45%{opacity:.85}100%{transform:scale(1.25);opacity:0}}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .header-cluster{gap:7px}
  .sheet-layer{padding:0;align-items:flex-end}
  .sheet,.sheet.is-wide{width:100%;max-height:86svh;border-radius:18px 18px 0 0;animation:sheet-up .32s cubic-bezier(.22,1,.36,1)}
  .sheet-head{padding:18px 20px 12px}
  .sheet-body{padding:16px 20px calc(24px + env(safe-area-inset-bottom))}
  .metric-grid{gap:7px}
  .glass-metric-value{font-size:16px}
  .trait-list>div,.birth-genome>div{grid-template-columns:84px 1fr}
  .birth-card{padding:28px 22px}
}
@keyframes sheet-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .sheet,.sheet-scrim,.birth-layer,.birth-reveal,.birth-orb span,.colony-pulse i,.ant-status i,.pill-spinner{animation:none!important}
  .bar b,.alloc-bar b{transition:none}
}

/* =========================================================================
   Liquid glass buttons
   The optical build from the Framer reference, rebuilt in two pseudo-elements
   instead of eight nested spans, and retuned for a dark charcoal/gold surface
   rather than the white-on-light original.

   Layers, outermost first:
     body      three stacked drop shadows, so the control sits above the world
     surface   gradient + backdrop blur/saturate
     shoulder  inset shadows that read as the thickness of the glass
     rim       ::before, a conic gradient masked to a 1.25px border
     sweep     ::after, an angled specular highlight plus a bottom caustic
     light     a cursor-tracked radial highlight, driven by --lg-x/--lg-y
   ========================================================================= */

.wallet-button,
.primary-button,
.follow-button,
.control-group,
.layer-picker button,
.nav-link,
.sheet-close,
.inspector-close,
.wallet-menu button{
  position:relative;
  isolation:isolate;
  border-color:transparent;           /* the rim replaces the flat border */
  transition:background .25s,box-shadow .25s,transform .14s,color .25s;
}

/* --- surfaces that are actually translucent -------------------------- */
.wallet-button,
.control-group,
.layer-picker button{
  background:linear-gradient(150deg,#ffffff16,#ffffff05 44%,#ffffff12),#15130caa;
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:
    inset 0 9px 12px -8px #00000070,
    inset 0 -9px 9px -7px #f6e3bb2e,
    inset 5px 0 8px -7px #00000055,
    inset -5px 0 8px -7px #00000040,
    0 1px 1px #00000055,
    0 4px 6px -3px #00000055,
    0 14px 24px -12px #00000066;
}

/* --- the refractive rim ---------------------------------------------- */
.wallet-button::before,
.primary-button::before,
.follow-button::before,
.control-group::before,
.layer-picker button::before,
.nav-link::before,
.sheet-close::before,
.inspector-close::before,
.wallet-menu button::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;padding:1.25px;
  background:conic-gradient(from 180deg,
    #f5e7c8c4 0deg,#f5e7c85c 36deg,#ffffff0a 68deg,#00000026 112deg,
    #ffffff1a 155deg,#fff8e8e6 190deg,#f3e3c2ad 217deg,#ffffff0f 256deg,
    #00000014 300deg,#ffffff17 335deg,#f5e7c8c4 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.72;transition:opacity .25s;
}

/* --- specular sweep + the bright caustic along the bottom edge -------- */
.wallet-button::after,
.primary-button::after,
.follow-button::after,
.control-group::after,
.layer-picker button::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;overflow:hidden;
  background:
    radial-gradient(60px 34px at var(--lg-x,50%) var(--lg-y,50%),#ffffff2e 0%,#ffffff12 38%,#ffffff00 78%),
    linear-gradient(90deg,#fff0 0,#f7e8c805 18%,#fdf1d9c4 53%,#f7e8c812 86%,#fff0 100%) 50% calc(100% - 1.25px)/70% 1px no-repeat,
    linear-gradient(112deg,#fff0 27%,#ffffff05 32%,#ffffff26 42%,#ffffff38 46%,#ffffff10 53%,#fff0 61%);
  opacity:.52;transition:opacity .3s;
}

.wallet-button:hover::after,
.primary-button:hover::after,
.follow-button:hover::after,
.control-group:hover::after,
.layer-picker button:hover::after{opacity:.9}
.wallet-button:hover::before,
.primary-button:hover::before,
.follow-button:hover::before,
.control-group:hover::before,
.layer-picker button:hover::before,
.nav-link:hover::before,
.sheet-close:hover::before,
.inspector-close:hover::before,
.wallet-menu button:hover::before{opacity:1}

.wallet-button:active,
.primary-button:active,
.follow-button:active,
.layer-picker button:active{transform:translateY(1px)}

/* the copper fills keep their colour and simply gain the optics */
.wallet-button.is-primary,
.primary-button,
.follow-button{
  box-shadow:
    inset 0 1px 0 #fff6e0b3,
    inset 0 -7px 9px -7px #7a5f2e4d,
    0 1px 1px #00000040,
    0 4px 6px -3px #00000040,
    0 12px 22px -12px #c69d5e4d;
}
.primary-button.is-disabled,.primary-button:disabled{box-shadow:none}
.primary-button.is-disabled::after,.primary-button:disabled::after,
.primary-button.is-disabled::before,.primary-button:disabled::before{opacity:.22}

/* in-panel controls stay quieter: rim only, no sweep — glass hierarchy */
.nav-link::before,.sheet-close::before,.inspector-close::before,.wallet-menu button::before{opacity:0}
.nav-link,.sheet-close,.inspector-close,.wallet-menu button{border-radius:999px}
.wallet-menu button{border-radius:9px}

/* the pill controls read best fully rounded */
.layer-picker button{border-radius:999px}
.wallet-button.is-loading{box-shadow:inset 0 1px 0 #f5e6c814,0 1px 1px #00000040}

/* --- graceful degradation, mirroring the reference ------------------- */
@media(prefers-reduced-motion:reduce){
  .wallet-button,.primary-button,.follow-button,.control-group,.layer-picker button,
  .nav-link,.sheet-close,.inspector-close,.wallet-menu button{transition:none}
  .wallet-button::after,.primary-button::after,.follow-button::after,
  .control-group::after,.layer-picker button::after{background-image:none}
}
@media(prefers-reduced-transparency:reduce){
  .wallet-button,.control-group,.layer-picker button{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#201d14}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wallet-button,.control-group,.layer-picker button{background:#201d14}
}
@media(forced-colors:active){
  .wallet-button,.primary-button,.follow-button,.layer-picker button{border:2px solid ButtonText;color:ButtonText}
  .wallet-button::before,.wallet-button::after,.primary-button::before,.primary-button::after,
  .follow-button::before,.follow-button::after,.control-group::before,.control-group::after,
  .layer-picker button::before,.layer-picker button::after{display:none}
}

/* =========================================================================
   Liquid glass panels
   The same optical build as the buttons, retuned for large surfaces: a softer
   shoulder, a quieter rim, and the bottom caustic kept while the diagonal
   specular sweep is dropped — at panel size that sweep reads as a cheap sheen
   rather than as glass.
   ========================================================================= */

.world-readout,
.ant-inspector,
.world-help,
.wallet-menu,
.hover-label,
.depth-map,
.toast,
.glass{
  /* NO position here: these panels are already fixed/absolute and setting
     position:relative knocked them out of their anchored spot. isolation is
     what the z-index:-1 pseudo-elements actually need, and a fixed or
     absolute element is already a containing block for them. */
  isolation:isolate;
  border-color:transparent;
  background:linear-gradient(157deg,#ffffff12,#ffffff04 46%,#ffffff0d),#16130cd1;
  backdrop-filter:blur(26px) saturate(1.22);
  -webkit-backdrop-filter:blur(26px) saturate(1.22);
  box-shadow:
    inset 0 11px 16px -12px #00000066,
    inset 0 -11px 12px -10px #f6e3bb24,
    inset 6px 0 10px -9px #0000004d,
    inset -6px 0 10px -9px #00000038,
    0 1px 1px #0000004d,
    0 6px 10px -5px #00000050,
    0 22px 44px -18px #00000073;
}

.world-readout::before,
.ant-inspector::before,
.world-help::before,
.wallet-menu::before,
.hover-label::before,
.depth-map::before,
.toast::before,
.glass::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;padding:1px;
  background:conic-gradient(from 180deg,
    #f5e7c891 0deg,#f5e7c840 36deg,#ffffff08 68deg,#0000001f 112deg,
    #ffffff14 155deg,#fff8e8ba 190deg,#f3e3c278 217deg,#ffffff0d 256deg,
    #00000010 300deg,#ffffff12 335deg,#f5e7c891 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* top shoulder highlight + the caustic along the bottom edge */
.world-readout::after,
.ant-inspector::after,
.world-help::after,
.wallet-menu::after,
.depth-map::after,
.toast::after,
.glass::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,#fff0 0,#f7e8c804 20%,#fdf1d9a8 52%,#f7e8c80f 84%,#fff0 100%) 50% calc(100% - 1px)/62% 1px no-repeat,
    linear-gradient(180deg,#ffffff14 0,#ffffff00 34%);
}

/* .birth-card uses .glass without being positioned itself, so it needs this;
   .sheet already sets position:relative on its own. */
.glass{position:relative}

/* the readout is the one panel that sits over open sky — give it a touch more
   separation so its figures stay legible against a bright chamber */
.world-readout{box-shadow:
  inset 0 11px 16px -12px #00000070,
  inset 0 -11px 12px -10px #f6e3bb28,
  inset 6px 0 10px -9px #00000055,
  inset -6px 0 10px -9px #00000040,
  0 1px 1px #00000055,
  0 6px 10px -5px #0000005c,
  0 26px 50px -18px #00000080}
.world-readout strong{font-variant-numeric:tabular-nums}

/* the depth map holds an image, so it keeps its own clipping */
.depth-map{overflow:hidden}

@media(prefers-reduced-transparency:reduce){
  .world-readout,.ant-inspector,.world-help,.wallet-menu,.hover-label,.depth-map,.toast,.glass{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#1b1810}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .world-readout,.ant-inspector,.world-help,.wallet-menu,.hover-label,.depth-map,.toast,.glass{background:#1b1810}
}
@media(forced-colors:active){
  .world-readout::before,.world-readout::after,.ant-inspector::before,.ant-inspector::after,
  .world-help::before,.world-help::after,.wallet-menu::before,.wallet-menu::after,
  .hover-label::before,.depth-map::before,.depth-map::after,.toast::before,.toast::after,
  .glass::before,.glass::after{display:none}
  .world-readout,.ant-inspector,.world-help,.wallet-menu,.toast,.glass{border:1px solid CanvasText}
}

/* =========================================================================
   Liquid glass — inner surfaces (tier 3)
   Tiles, banners, chips and bars that live INSIDE an already-blurred panel.
   They deliberately get no backdrop-filter of their own: stacking a second
   blur on top of a blurred parent costs a full extra pass and muddies the
   result. Thickness here comes from gradients, inset highlights and a
   hairline rim instead.
   ========================================================================= */

.glass-metric,
.paper-banner,
.honesty-banner,
.best-discovery{
  position:relative;
  isolation:isolate;
  border-color:transparent;
  box-shadow:
    inset 0 1px 0 #f7e9c71f,
    inset 0 7px 10px -9px #00000059,
    inset 0 -7px 8px -8px #f6e3bb14,
    0 1px 2px #0000002e;
}

.glass-metric{background:linear-gradient(161deg,#ffffff0f,#ffffff03 50%,#ffffff09),#1d1a1299}
.paper-banner,.honesty-banner{background:linear-gradient(161deg,#e3c08f1f,#c9a86f0a 52%,#e3c08f14),#1e1a1180}
.best-discovery{background:linear-gradient(161deg,#e3c08f1a,#c9a86f08 52%,#e3c08f10),#1d190f73}

.glass-metric::before,
.paper-banner::before,
.honesty-banner::before,
.best-discovery::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;padding:1px;
  background:conic-gradient(from 180deg,
    #f5e7c857 0deg,#f5e7c824 40deg,#ffffff05 72deg,#00000014 115deg,
    #ffffff0d 158deg,#fff8e880 192deg,#f3e3c247 220deg,#ffffff08 258deg,
    #0000000a 302deg,#ffffff0a 338deg,#f5e7c857 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* --- chips and status pills ------------------------------------------ */
.task-holdings li,
.simulated-tag,
.input-status,
.ant-status,
.inspector-badges span{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;
  border-color:transparent;
  box-shadow:inset 0 1px 0 #f7e9c71a,inset 0 -4px 6px -6px #00000045;
}
.task-holdings li::before,
.simulated-tag::before,
.input-status::before,
.ant-status::before,
.inspector-badges span::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,#f5e7c863,#ffffff0a 48%,#f5e7c82e);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* --- bars read as liquid in a channel --------------------------------- */
.bar,.alloc-bar,.inspector-trait i{
  background:#0f0d0899;
  box-shadow:inset 0 1px 2px #00000080,inset 0 -1px 0 #f6e3bb14;
}
.bar b,.alloc-bar b,.inspector-trait b{
  background:linear-gradient(180deg,#e6c795,#b8945d 58%,#a8824d);
  box-shadow:inset 0 1px 0 #fff3d9a6,0 0 7px #d9bb8740;
}

/* --- the sheet header gains the same hairline as the panel edge -------- */
.sheet-head{border-bottom-color:transparent;box-shadow:0 1px 0 #f6e3bb1c}

@media(prefers-reduced-transparency:reduce){
  .glass-metric,.paper-banner,.honesty-banner,.best-discovery{background:#232017}
}
@media(forced-colors:active){
  .glass-metric::before,.paper-banner::before,.honesty-banner::before,.best-discovery::before,
  .task-holdings li::before,.simulated-tag::before,.input-status::before,.ant-status::before,
  .inspector-badges span::before{display:none}
  .glass-metric,.paper-banner,.honesty-banner,.best-discovery{border:1px solid CanvasText}
}