/* Shellfarm. Plain CSS, no build step. Dark sea by default, pearl-white shell in light mode. */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --bg:#061520;--bg2:#0a2433;--bg3:#0f3346;
  --panel:#0c2838;--panel2:#10344a;--line:rgba(176,228,236,.16);--line2:rgba(176,228,236,.3);
  --ink:#e9f5f3;--mut:#8fb2b8;--dim:#648a92;
  --pink:#ffc6e3;--lilac:#cdbdff;--aqua:#8fe8ff;--gold:#f3d58e;
  --accent:#7fe3d4;
  --up:#6ee7b7;--down:#ff8aa0;
  --c-cre:#f3d58e;--c-hold:#8fe8ff;
  --go-bg:linear-gradient(115deg,#ffc6e3 0%,#cdbdff 48%,#8fe8ff 100%);--go-ink:#061520;
  --btn-bg:rgba(176,228,236,.1);--btn-ink:#e9f5f3;
  --shadow:0 18px 50px -22px rgba(0,0,0,.7);
  --f-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#eef4f3;--bg2:#e1edec;--bg3:#d2e4e5;
  --panel:#ffffff;--panel2:#f4f9f8;--line:rgba(8,52,72,.14);--line2:rgba(8,52,72,.3);
  --ink:#0b2431;--mut:#4a6b75;--dim:#7a979e;
  --accent:#0a7f84;--up:#0d8a5e;--down:#c42c4d;
  --c-cre:#b07a14;--c-hold:#0b7c9a;
  --go-bg:linear-gradient(115deg,#0b2a3a 0%,#164a62 100%);--go-ink:#f4faf9;
  --btn-bg:rgba(8,52,72,.07);--btn-ink:#0b2431;
  --shadow:0 18px 44px -24px rgba(11,60,84,.35);
  color-scheme:light}}
:root[data-theme="light"]{
  --bg:#eef4f3;--bg2:#e1edec;--bg3:#d2e4e5;
  --panel:#ffffff;--panel2:#f4f9f8;--line:rgba(8,52,72,.14);--line2:rgba(8,52,72,.3);
  --ink:#0b2431;--mut:#4a6b75;--dim:#7a979e;
  --accent:#0a7f84;--up:#0d8a5e;--down:#c42c4d;
  --c-cre:#b07a14;--c-hold:#0b7c9a;
  --go-bg:linear-gradient(115deg,#0b2a3a 0%,#164a62 100%);--go-ink:#f4faf9;
  --btn-bg:rgba(8,52,72,.07);--btn-ink:#0b2431;
  --shadow:0 18px 44px -24px rgba(11,60,84,.35);
  color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--f-body);min-height:100vh;padding-bottom:104px;overflow-x:hidden;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.4vw,5rem)}h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}h3{font-size:1.25rem;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:8px 14px;border-radius:10px;z-index:99}.skip:focus{left:8px}
.mut{color:var(--mut)}.dim{color:var(--dim)}.sm{font-size:.86rem}.num{font-variant-numeric:tabular-nums}.mono{font-family:var(--f-mono);font-size:.88em}
.up{color:var(--up)}.down{color:var(--down)}
.stack{display:grid;gap:16px;min-width:0}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.between{justify-content:space-between}
.spin{display:inline-block;width:15px;height:15px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- sea backdrop, one look per page ---------- */
.sea{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bg);transition:opacity .4s}
.sea::before,.sea::after{content:"";position:absolute;inset:0}
body[data-page="home"] .sea{background:
  radial-gradient(60% 40% at 78% 8%,rgba(143,232,255,.26),transparent 70%),
  radial-gradient(50% 36% at 14% 4%,rgba(255,198,227,.16),transparent 70%),
  linear-gradient(180deg,#0e4660 0%,#0a2e44 34%,#061520 78%)}
body[data-page="home"] .sea::before{background:repeating-conic-gradient(from 198deg at 70% -12%,rgba(190,240,255,.09) 0 3deg,transparent 3deg 9deg);mask-image:linear-gradient(180deg,#000,transparent 62%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 62%)}
body[data-page="market"] .sea{background:
  radial-gradient(circle at 20% 30%,rgba(205,189,255,.1) 0 2px,transparent 3px) 0 0/90px 90px,
  radial-gradient(circle at 70% 60%,rgba(255,198,227,.1) 0 3px,transparent 4px) 0 0/130px 130px,
  linear-gradient(180deg,#07202e,#0b3a4a 55%,#134a52)}
body[data-page="market"] .sea::after{top:auto;height:34%;background:repeating-radial-gradient(ellipse 120% 90px at 50% 130%,rgba(243,213,142,.12) 0 2px,transparent 2px 22px)}
body[data-page="token"] .sea{background:
  repeating-linear-gradient(180deg,transparent 0 47px,rgba(143,232,255,.07) 47px 48px),
  repeating-linear-gradient(90deg,transparent 0 95px,rgba(143,232,255,.05) 95px 96px),
  linear-gradient(170deg,#051019,#0a2433 60%,#0c2d40)}
body[data-page="launch"] .sea{background:
  radial-gradient(70% 50% at 50% 0,rgba(255,170,150,.3),transparent 70%),
  radial-gradient(60% 40% at 90% 30%,rgba(205,189,255,.22),transparent 70%),
  linear-gradient(180deg,#4a2a58 0%,#2c2552 32%,#0d2038 70%,#061520)}
body[data-page="launch"] .sea::after{top:auto;height:26%;background:linear-gradient(180deg,transparent,rgba(6,21,32,.9)),repeating-linear-gradient(0deg,rgba(255,198,227,.07) 0 1px,transparent 1px 14px)}
body[data-page="rewards"] .sea{background:
  repeating-radial-gradient(circle at 50% 36%,rgba(255,198,227,.1) 0 1px,transparent 1px 38px),
  radial-gradient(50% 50% at 50% 36%,rgba(205,189,255,.2),transparent 70%),
  linear-gradient(180deg,#0a1626,#08121e)}
body[data-page="how"] .sea{background:linear-gradient(180deg,#1b6c86 0%,#0d3f58 16%,#0a2a3e 34%,#071c2c 56%,#050f1a 100%)}
body[data-page="faq"] .sea{background:
  repeating-radial-gradient(ellipse 160% 120px at 30% 112%,rgba(243,213,142,.1) 0 2px,transparent 2px 26px),
  linear-gradient(180deg,#0b2a3a,#123a47 60%,#2a4a46)}
/* light mode: the same scenes, washed in pearl */
:root[data-theme="light"] body[data-page="home"] .sea{background:radial-gradient(60% 40% at 78% 6%,rgba(143,232,255,.6),transparent 70%),radial-gradient(50% 36% at 12% 2%,rgba(255,198,227,.55),transparent 70%),linear-gradient(180deg,#cfeaf0 0%,#e4f1f1 40%,#eef4f3 80%)}
:root[data-theme="light"] body[data-page="home"] .sea::before{background:repeating-conic-gradient(from 198deg at 70% -12%,rgba(255,255,255,.55) 0 3deg,transparent 3deg 9deg)}
:root[data-theme="light"] body[data-page="market"] .sea{background:radial-gradient(circle at 20% 30%,rgba(140,120,220,.16) 0 2px,transparent 3px) 0 0/90px 90px,radial-gradient(circle at 70% 60%,rgba(230,120,170,.16) 0 3px,transparent 4px) 0 0/130px 130px,linear-gradient(180deg,#e7f1f1,#d6e9e8 60%,#e9e4cf)}
:root[data-theme="light"] body[data-page="market"] .sea::after{background:repeating-radial-gradient(ellipse 120% 90px at 50% 130%,rgba(176,122,20,.16) 0 2px,transparent 2px 22px)}
:root[data-theme="light"] body[data-page="token"] .sea{background:repeating-linear-gradient(180deg,transparent 0 47px,rgba(11,124,154,.1) 47px 48px),repeating-linear-gradient(90deg,transparent 0 95px,rgba(11,124,154,.07) 95px 96px),linear-gradient(170deg,#f4f9f8,#e3eeee)}
:root[data-theme="light"] body[data-page="launch"] .sea{background:radial-gradient(70% 50% at 50% 0,rgba(255,196,170,.7),transparent 70%),radial-gradient(60% 40% at 90% 30%,rgba(205,189,255,.55),transparent 70%),linear-gradient(180deg,#f6e6ee 0%,#e6e2f3 36%,#dce9ee 70%,#eef4f3)}
:root[data-theme="light"] body[data-page="launch"] .sea::after{background:linear-gradient(180deg,transparent,rgba(238,244,243,.95)),repeating-linear-gradient(0deg,rgba(214,90,150,.1) 0 1px,transparent 1px 14px)}
:root[data-theme="light"] body[data-page="rewards"] .sea{background:repeating-radial-gradient(circle at 50% 36%,rgba(176,70,130,.12) 0 1px,transparent 1px 38px),radial-gradient(50% 50% at 50% 36%,rgba(205,189,255,.55),transparent 70%),linear-gradient(180deg,#f5eef5,#eaf1f2)}
:root[data-theme="light"] body[data-page="how"] .sea{background:linear-gradient(180deg,#bfe3ec 0%,#d3ebee 18%,#dfeeee 40%,#e6eeee 62%,#e1e6e6 100%)}
:root[data-theme="light"] body[data-page="faq"] .sea{background:repeating-radial-gradient(ellipse 160% 120px at 30% 112%,rgba(176,122,20,.14) 0 2px,transparent 2px 26px),linear-gradient(180deg,#e7f1f1,#eef1e6 70%,#efe6c9)}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) body[data-page="home"] .sea{background:radial-gradient(60% 40% at 78% 6%,rgba(143,232,255,.6),transparent 70%),radial-gradient(50% 36% at 12% 2%,rgba(255,198,227,.55),transparent 70%),linear-gradient(180deg,#cfeaf0 0%,#e4f1f1 40%,#eef4f3 80%)}
  :root:not([data-theme="dark"]) body[data-page="home"] .sea::before{background:repeating-conic-gradient(from 198deg at 70% -12%,rgba(255,255,255,.55) 0 3deg,transparent 3deg 9deg)}
  :root:not([data-theme="dark"]) body[data-page="market"] .sea{background:radial-gradient(circle at 20% 30%,rgba(140,120,220,.16) 0 2px,transparent 3px) 0 0/90px 90px,radial-gradient(circle at 70% 60%,rgba(230,120,170,.16) 0 3px,transparent 4px) 0 0/130px 130px,linear-gradient(180deg,#e7f1f1,#d6e9e8 60%,#e9e4cf)}
  :root:not([data-theme="dark"]) body[data-page="market"] .sea::after{background:repeating-radial-gradient(ellipse 120% 90px at 50% 130%,rgba(176,122,20,.16) 0 2px,transparent 2px 22px)}
  :root:not([data-theme="dark"]) body[data-page="token"] .sea{background:repeating-linear-gradient(180deg,transparent 0 47px,rgba(11,124,154,.1) 47px 48px),repeating-linear-gradient(90deg,transparent 0 95px,rgba(11,124,154,.07) 95px 96px),linear-gradient(170deg,#f4f9f8,#e3eeee)}
  :root:not([data-theme="dark"]) body[data-page="launch"] .sea{background:radial-gradient(70% 50% at 50% 0,rgba(255,196,170,.7),transparent 70%),radial-gradient(60% 40% at 90% 30%,rgba(205,189,255,.55),transparent 70%),linear-gradient(180deg,#f6e6ee 0%,#e6e2f3 36%,#dce9ee 70%,#eef4f3)}
  :root:not([data-theme="dark"]) body[data-page="launch"] .sea::after{background:linear-gradient(180deg,transparent,rgba(238,244,243,.95)),repeating-linear-gradient(0deg,rgba(214,90,150,.1) 0 1px,transparent 1px 14px)}
  :root:not([data-theme="dark"]) body[data-page="rewards"] .sea{background:repeating-radial-gradient(circle at 50% 36%,rgba(176,70,130,.12) 0 1px,transparent 1px 38px),radial-gradient(50% 50% at 50% 36%,rgba(205,189,255,.55),transparent 70%),linear-gradient(180deg,#f5eef5,#eaf1f2)}
  :root:not([data-theme="dark"]) body[data-page="how"] .sea{background:linear-gradient(180deg,#bfe3ec 0%,#d3ebee 18%,#dfeeee 40%,#e6eeee 62%,#e1e6e6 100%)}
  :root:not([data-theme="dark"]) body[data-page="faq"] .sea{background:repeating-radial-gradient(ellipse 160% 120px at 30% 112%,rgba(176,122,20,.14) 0 2px,transparent 2px 26px),linear-gradient(180deg,#e7f1f1,#eef1e6 70%,#efe6c9)}
}

/* ---------- chrome: brand + tools on top, bubble nav at the bottom ---------- */
.top{max-width:1240px;margin:0 auto;padding:max(14px,env(safe-area-inset-top,0px)) 20px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 1.45rem/1 var(--f-display);letter-spacing:-.02em}
.brand svg{width:40px;height:40px;filter:drop-shadow(0 6px 14px rgba(143,232,255,.35))}
.tools{display:flex;align-items:center;gap:8px}
.wprlchip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 8px;border-radius:999px;background:var(--btn-bg);border:1px solid var(--line);font-size:.85rem}
.wprlchip svg{width:20px;height:20px}.wprlchip b{font-weight:700}.wprlchip span{color:var(--mut)}
.ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--btn-bg);color:var(--ink);cursor:pointer}
.ib:hover{border-color:var(--line2)}
.wbtn{height:40px;padding:0 18px;border-radius:999px;border:0;font:700 .92rem var(--f-body);cursor:pointer;background:var(--go-bg);color:var(--go-ink)}
.wbtn.on{background:var(--btn-bg);color:var(--ink);border:1px solid var(--line2);font-family:var(--f-mono);font-weight:500;font-size:.85rem}
.reef{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;display:flex;gap:4px;padding:6px;border-radius:999px;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line2);box-shadow:var(--shadow);max-width:calc(100vw - 20px)}
.reef a{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--mut);white-space:nowrap}
.reef a svg{flex:none}
.reef a:hover{color:var(--ink)}
.reef a.on{background:var(--go-bg);color:var(--go-ink)}
.page{max-width:1240px;margin:0 auto;padding:30px 20px 40px;min-height:62vh;outline:0}
.foot{max-width:1240px;margin:0 auto;padding:10px 20px 20px}
.fin{display:grid;gap:14px;border-top:1px solid var(--line);padding-top:22px}
.fbrand{display:flex;gap:12px;align-items:center}.fbrand b{font:600 1.15rem var(--f-display);display:block}.fbrand small{color:var(--mut)}
.fl{display:flex;gap:6px 20px;flex-wrap:wrap}.fl a{color:var(--mut);text-decoration:none;font-weight:600;font-size:.92rem}.fl a:hover{color:var(--ink)}
.warn{color:var(--dim);max-width:78ch;line-height:1.5}

/* ---------- buttons, chips, fields ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--line2);background:var(--btn-bg);color:var(--btn-ink);font:700 .95rem var(--f-body);text-decoration:none;cursor:pointer;transition:transform .15s,border-color .15s}
.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(1px)}
.btn.go{background:var(--go-bg);color:var(--go-ink);border-color:transparent}
.btn.go:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}.btn.sm{min-height:36px;padding:0 15px;font-size:.86rem}.btn.big{min-height:52px;padding:0 30px;font-size:1.02rem}.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;background:var(--btn-bg);border:1px solid var(--line);font-size:.8rem;font-weight:700;white-space:nowrap}
.chip.up{color:var(--up)}.chip.down{color:var(--down)}.chip.cre{color:var(--c-cre)}.chip.hold{color:var(--c-hold)}
.addr{font:500 .8rem var(--f-mono);padding:3px 10px;border-radius:999px;border:1px dashed var(--line2);background:transparent;color:var(--mut);cursor:pointer}
.card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px;min-width:0}
.card.soft{background:color-mix(in srgb,var(--panel) 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.field{display:grid;gap:7px}.field label,.fl-lab{font-weight:700;font-size:.88rem}.hint{color:var(--mut);font-size:.84rem}
.in{width:100%;min-height:48px;padding:0 16px;border-radius:16px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:500 1rem var(--f-body);outline:0}
.in:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
textarea.in{padding:12px 16px;min-height:96px;resize:vertical}
.in-row{display:flex;align-items:center;border-radius:16px;border:1px solid var(--line2);background:var(--panel2)}
.in-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.in-row .in{border:0;background:transparent;box-shadow:none}.suf{padding-right:16px;font-weight:700;color:var(--mut);white-space:nowrap}
.seg{display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:var(--btn-bg);border:1px solid var(--line);flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--mut);font:700 .86rem var(--f-body);padding:7px 15px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--go-bg);color:var(--go-ink)}
.qs{display:flex;gap:6px;flex-wrap:wrap}.qs button{border:1px solid var(--line2);background:transparent;color:var(--ink);font:700 .82rem var(--f-body);padding:6px 13px;border-radius:999px;cursor:pointer}
.qs button:hover,.qs button.on{border-color:var(--accent);color:var(--accent)}
.kv{display:grid;gap:9px}.kv>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}.kv span{color:var(--mut)}.kv b{text-align:right;font-weight:700}
.err{color:var(--down);font-weight:600;font-size:.92rem}
.empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:34px 16px;color:var(--mut)}.empty svg.eg{width:64px;height:64px;opacity:.9}
.tscroll{overflow-x:auto}.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;font-weight:700;color:var(--mut);font-size:.8rem;padding:8px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}.tbl tr[data-href]{cursor:pointer}.tbl tr[data-href]:hover td{background:var(--btn-bg)}
.tbl td.num,.tbl th.num{text-align:right}
.tag{font-size:.74rem;font-weight:800;padding:2px 9px;border-radius:999px}.tag.b{background:color-mix(in srgb,var(--up) 22%,transparent);color:var(--up)}.tag.s{background:color-mix(in srgb,var(--down) 22%,transparent);color:var(--down)}

/* pearl avatar */
.pa{--s:48px;width:var(--s);height:var(--s);border-radius:50%;flex:none;position:relative;display:inline-block;background:radial-gradient(circle at 32% 26%,#fff 0 12%,hsl(var(--h) 80% 86%) 34%,hsl(var(--h) 60% 66%) 72%,hsl(calc(var(--h) + 40) 50% 48%) 100%);box-shadow:inset 0 -5px 10px rgba(0,0,0,.18),0 6px 16px -6px hsl(var(--h) 70% 50%/.6);overflow:hidden}
.pa img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.pa.has::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.pa i{position:absolute;left:18%;top:14%;width:34%;height:20%;border-radius:50%;background:rgba(255,255,255,.7);transform:rotate(-32deg);filter:blur(.5px)}

/* split bar: only two parts, the founder and the holders */
.sbar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--line);gap:3px}
.sbar.lg{height:20px}.sbar i{display:block;min-width:0}.sbar .cre{background:var(--c-cre)}.sbar .hol{background:var(--c-hold)}
.lg2{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:.86rem}.lg2 span{display:inline-flex;align-items:center;gap:7px;color:var(--mut)}.lg2 b{color:var(--ink)}
.dot-cre,.dot-hold{display:inline-block;width:11px;height:11px;border-radius:50%}.dot-cre{background:var(--c-cre)}.dot-hold{background:var(--c-hold)}

/* ---------- home: the shell opens ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:20px 0 10px}
.hero h1{max-width:11ch}.hero .lead{font-size:1.18rem;color:var(--mut);max-width:50ch;margin:20px 0 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.livebar{display:flex;gap:10px 30px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.livebar div{display:grid;gap:2px}.livebar b{font:600 1.6rem/1.1 var(--f-display)}.livebar span{color:var(--mut);font-size:.84rem}
.oyster{width:100%;max-width:560px;margin:0 auto;display:block;overflow:visible}
.oyster .lid{transform-box:fill-box;transform-origin:8% 100%;animation:lidopen 2.4s cubic-bezier(.2,.8,.2,1) .25s both}
.oyster .pr{animation:prise 2.4s cubic-bezier(.2,.8,.2,1) .5s both}
.oyster .glow{animation:pglow 3.2s ease-in-out 2.4s infinite alternate}
@keyframes lidopen{from{transform:rotate(0)}to{transform:rotate(-23deg)}}
@keyframes prise{from{transform:translateY(34px);opacity:.2}to{transform:translateY(0);opacity:1}}
@keyframes pglow{from{opacity:.45}to{opacity:.95}}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.vs .col{border-radius:28px;padding:28px;border:1px solid var(--line);background:var(--panel)}
.vs .col.farm{background:linear-gradient(160deg,color-mix(in srgb,var(--pink) 20%,var(--panel)),color-mix(in srgb,var(--aqua) 18%,var(--panel)));border-color:var(--line2)}
.vs h3{font-size:1.6rem;margin-bottom:14px}
.vs ul{list-style:none;margin:0;padding:0;display:grid}.vs li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}.vs li span{color:var(--mut)}.vs li b{text-align:right}
.sec{margin-top:70px}.sech{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}.sech p{color:var(--mut);margin-top:6px;max-width:58ch}
.more{color:var(--accent);font-weight:700;text-decoration:none}.more:hover{text-decoration:underline}
.shelf{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;margin:0 -20px;padding-inline:20px;scrollbar-width:thin}
.shell-card{flex:0 0 min(300px,80vw);scroll-snap-align:start;display:grid;gap:14px;text-decoration:none;border-radius:26px;padding:20px;background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden}
.shell-card:hover{border-color:var(--accent)}
.shell-card::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,hsl(var(--h) 80% 70%/.35),transparent 70%)}
.shell-card .hd{display:flex;gap:12px;align-items:center;position:relative}.shell-card .nm{min-width:0}.shell-card .nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shell-card .nm small{color:var(--mut)}
.shell-card .cap{font:600 1.7rem/1 var(--f-display)}.shell-card .mid{display:flex;justify-content:space-between;align-items:end;gap:10px}.shell-card .ft{display:flex;gap:10px;font-size:.82rem;color:var(--mut);flex-wrap:wrap}
.spark{width:96px;height:36px}
.flow2{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.flow2 .src{border-radius:24px;padding:22px;background:var(--panel);border:1px solid var(--line);text-align:center}.flow2 .src b{font:600 2.4rem/1 var(--f-display);display:block}
.flow2 .arrow{color:var(--dim);font-size:2rem}
.flow2 .parts{display:grid;gap:12px}.flow2 .p{border-radius:20px;padding:16px 20px;border:1px solid var(--line);background:var(--panel)}
.flow2 .p.cre{border-color:color-mix(in srgb,var(--c-cre) 55%,transparent)}.flow2 .p.hol{border-color:color-mix(in srgb,var(--c-hold) 55%,transparent)}
.flow2 .p b{font:600 1.5rem var(--f-display)}.flow2 .p span{color:var(--mut);display:block;font-size:.9rem}
.tide{display:grid;gap:2px}.tide a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;text-decoration:none}.tide a:hover{background:var(--btn-bg)}
.tide a .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta-band{margin-top:70px;border-radius:32px;padding:clamp(26px,5vw,52px);display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;background:linear-gradient(120deg,color-mix(in srgb,var(--pink) 26%,var(--panel)),color-mix(in srgb,var(--lilac) 22%,var(--panel)) 50%,color-mix(in srgb,var(--aqua) 24%,var(--panel)));border:1px solid var(--line2)}
.cta-band svg{width:96px;height:96px}
.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}

/* ---------- explore: the reef ---------- */
.rh{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}.rh p{color:var(--mut);margin-top:10px;max-width:56ch}
.rtools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:26px 0 8px}
.sq{flex:1 1 260px;position:relative}.sq .in{padding-left:44px;border-radius:999px}.sq svg{position:absolute;left:16px;top:14px;color:var(--mut)}
.reefmap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;padding:26px 0 10px}
.bub{--d:120px;width:var(--d);height:var(--d);border-radius:50%;display:grid;place-content:center;text-align:center;text-decoration:none;position:relative;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),hsl(var(--h) 70% 60%/.28) 40%,hsl(var(--h) 60% 40%/.22) 100%);border:1.5px solid hsl(var(--h) 80% 80%/.55);box-shadow:inset 0 -10px 24px hsl(var(--h) 60% 40%/.25),0 10px 30px -14px hsl(var(--h) 80% 50%/.6);transition:transform .2s}
.bub:hover{transform:translateY(-5px) scale(1.04)}
.bub b{font:600 calc(var(--d)/6.6) var(--f-display);white-space:nowrap;width:max-content;max-width:none;margin:0 auto}
.bub small{font-weight:700;font-size:calc(var(--d)/9.5)}.bub .mc{color:var(--mut);font-size:calc(var(--d)/10)}
.bub.dn{border-color:color-mix(in srgb,var(--down) 60%,transparent)}
.rows{display:grid;gap:8px}
.rrow{display:grid;grid-template-columns:44px minmax(150px,1.4fr) repeat(4,minmax(0,1fr));gap:12px;align-items:center;padding:12px 18px;border-radius:20px;background:var(--panel);border:1px solid var(--line);text-decoration:none}
.rrow:hover{border-color:var(--accent)}.rrow .nm{min-width:0}.rrow .nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rrow .nm small,.rrow small{color:var(--mut)}.rrow>div{min-width:0}.rrow .c small{display:block;font-size:.74rem}
.rrow.head{background:transparent;border:0;padding-block:0;font-size:.78rem;font-weight:700;color:var(--mut)}

/* ---------- token: tide chart ---------- */
.tkh{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center}
.tkh h1{font-size:clamp(2rem,4.4vw,3.2rem)}.tkh .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.tkh .px{text-align:right}.tkh .cap{font:600 clamp(1.9rem,4vw,2.8rem)/1 var(--f-display)}
.desc{color:var(--mut);max-width:70ch;margin-top:14px}
.gauges{display:flex;gap:0;margin:22px 0;border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow-x:auto}
.gauges>div{flex:1 0 auto;padding:14px 22px;border-left:1px solid var(--line);display:grid;gap:2px}.gauges>div:first-child{border-left:0}.gauges span{color:var(--mut);font-size:.78rem;font-weight:700}.gauges b{font-weight:700;white-space:nowrap}
.tkgrid{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:22px;align-items:start}
.tkl{position:sticky;top:14px;display:grid;gap:18px;min-width:0}
.chartbox{position:relative;touch-action:none;color:var(--mut)}.chart{width:100%;height:260px;display:block}
.xh{position:absolute;top:0;bottom:0;width:1px;background:var(--line2);display:none}.xd{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--pink);border:2px solid var(--bg);display:none}.xt{position:absolute;top:-4px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700;display:none;white-space:nowrap;color:var(--ink)}
.chartbox:hover .xh,.chartbox:hover .xd,.chartbox:hover .xt{display:block}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px 0 14px;overflow-x:auto}.tabs button{border:0;background:transparent;color:var(--mut);font:700 .92rem var(--f-body);padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}.tabs button.on{color:var(--ink);border-color:var(--accent)}
.jar{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.ring{--p:0;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--c-hold) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center;position:relative}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--panel)}.ring b{position:relative;font:600 1.15rem var(--f-display)}
.jar .v{font:600 1.9rem/1.05 var(--f-display)}
.ln{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.ln span:nth-child(2){flex:1}
.callout{border-radius:16px;padding:14px 16px;background:var(--btn-bg);border:1px solid var(--line);font-size:.92rem;margin-top:12px}

/* ---------- launch: seeding an oyster ---------- */
.lh{text-align:center;max-width:62ch;margin:0 auto 26px}.lh p{color:var(--mut);margin-top:12px}
.lids{display:flex;justify-content:center;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.lid{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;border:1px solid var(--line2);background:color-mix(in srgb,var(--panel) 70%,transparent);color:var(--mut);font:700 .9rem var(--f-body);cursor:pointer}
.lid i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--btn-bg);font-style:normal}
.lid.on{color:var(--ink);border-color:var(--accent)}.lid.on i{background:var(--go-bg);color:var(--go-ink)}.lid.done i{background:var(--c-hold);color:#061520}
.lwrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;max-width:1060px;margin:0 auto}
.lprev{position:sticky;top:14px;display:grid;gap:16px}
.pearls{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pearls button{display:grid;justify-items:center;gap:6px;padding:12px 4px;border-radius:20px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);cursor:pointer;font:700 1rem var(--f-body)}
.pearls button i{display:block;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,#e6d8f7 40%,#9fc4e4);box-shadow:inset 0 -3px 6px rgba(0,0,0,.18)}
.pearls button small{color:var(--mut);font-weight:600;font-size:.72rem}
.pearls button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel2))}
.slider{width:100%;accent-color:var(--accent)}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;cursor:pointer}.agree input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px}
.upimg{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.upimg input[type=file]{font:inherit;color:var(--mut);max-width:100%}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.g21{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.done{max-width:620px;margin:40px auto;text-align:center;display:grid;gap:16px;justify-items:center}

/* ---------- harvest ---------- */
.hv{display:grid;justify-items:center;text-align:center;gap:10px;padding:10px 0 6px}
.hv .jarart{width:150px;height:150px}.hv .big{font:600 clamp(2.8rem,8vw,5.2rem)/1 var(--f-display)}.hv p{color:var(--mut);max-width:52ch}
.hv3{display:flex;gap:10px 34px;justify-content:center;flex-wrap:wrap;margin:16px 0 4px}.hv3 div{display:grid;gap:2px}.hv3 span{color:var(--mut);font-size:.82rem}.hv3 b{font:600 1.35rem var(--f-display)}
.crates{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.crate{display:grid;gap:16px;border-radius:26px;padding:20px;background:var(--panel);border:1px solid var(--line)}
.crate .hd{display:flex;gap:12px;align-items:center;text-decoration:none;min-width:0}.crate .hd b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crate .hd small{color:var(--mut)}
.crate .am{display:grid;grid-template-columns:1fr 1fr;gap:10px}.crate .am small{color:var(--mut);display:block;font-size:.76rem}.crate .am b{font:600 1.3rem var(--f-display)}

/* ---------- how: going down ---------- */
.dive{position:relative;max-width:900px;margin:0 auto;padding-left:70px}
.dive::before{content:"";position:absolute;left:23px;top:30px;bottom:30px;width:2px;background:linear-gradient(180deg,var(--pink),var(--lilac),var(--aqua));opacity:.7}
.dstep{position:relative;margin-bottom:34px}
.dstep .orb{position:absolute;left:-70px;top:4px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,#e9d9f7 40%,#9fc4e4);box-shadow:inset 0 -4px 8px rgba(0,0,0,.2),0 0 26px rgba(205,189,255,.5)}
.dstep .dep{position:absolute;left:-70px;top:calc(var(--o) + 12px);font:600 .74rem var(--f-mono);color:var(--dim);width:48px;text-align:center}
.dstep h3{font-size:1.5rem;margin-bottom:8px}.dstep p{color:var(--mut);max-width:62ch}
.hdiag{margin:40px 0;border-radius:28px;padding:26px;background:var(--panel);border:1px solid var(--line)}

/* ---------- faq ---------- */
.fq{display:grid;grid-template-columns:minmax(240px,.8fr) 1.6fr;gap:40px;max-width:1080px;margin:0 auto;align-items:start}
.fq aside{position:sticky;top:14px;display:grid;gap:16px}.fq aside p{color:var(--mut)}.fq aside svg{width:100%;max-width:240px}
.fq details{border-bottom:1px solid var(--line);padding:4px 0}.fq summary{cursor:pointer;list-style:none;padding:16px 0;font:600 1.12rem var(--f-display);display:flex;justify-content:space-between;gap:16px;align-items:center}
.fq summary::-webkit-details-marker{display:none}.fq summary::after{content:"+";font:400 1.6rem var(--f-body);color:var(--accent);flex:none}.fq details[open] summary::after{content:"–"}
.fq details p{color:var(--mut);padding:0 0 18px;max-width:64ch}

/* ---------- search + toast ---------- */
.find{position:fixed;inset:0;z-index:60;background:rgba(3,10,16,.6);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 0}.find.open{display:flex}
.find .box{width:min(560px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:24px;padding:12px;box-shadow:var(--shadow)}
.find input{width:100%;min-height:50px;border:0;background:transparent;color:var(--ink);font:500 1.05rem var(--f-body);padding:0 12px;outline:0}
.find .res{display:grid;margin-top:6px;max-height:50vh;overflow:auto}.find .res a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;text-decoration:none}.find .res a.sel,.find .res a:hover{background:var(--btn-bg)}
.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--panel2);border:1px solid var(--line2);padding:11px 20px;border-radius:999px;font-weight:600;z-index:70;transition:.25s;max-width:92vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- small screens ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}.hero h1{max-width:none}.oyster{max-width:420px}
  .tkgrid,.lwrap,.grid2,.fq{grid-template-columns:1fr}.tkl,.lprev,.fq aside{position:static}
  .vs{grid-template-columns:1fr}.flow2{grid-template-columns:1fr}.flow2 .arrow{transform:rotate(90deg);justify-self:center}
  .cta-band{grid-template-columns:1fr;text-align:center;justify-items:center}
  .tkh{grid-template-columns:auto 1fr}.tkh .px{grid-column:1/-1;text-align:left}
}
@media (max-width:640px){
  .page{padding:20px 16px 30px}.top{padding-inline:16px}.foot{padding-inline:16px}.wprlchip{display:none}
  .brand span{font-size:1.2rem}.wbtn{padding:0 14px}
  .reef{left:8px;right:8px;transform:none;justify-content:space-between;max-width:none}.reef a{flex:1;justify-content:center;flex-direction:column;gap:2px;padding:8px 4px;font-size:.7rem}
  .rrow{grid-template-columns:44px 1fr auto}.rrow .c.x{display:none}
  .g3,.g21{grid-template-columns:1fr}.dive{padding-left:56px}.dstep .orb,.dstep .dep{left:-56px}.dive::before{left:17px}
  .shelf{margin:0 -16px;padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}