/* scaffold — shared between the landing page and the builder. */

:root{
  --bg:#ffffff; --panel:#fbfbf9; --panel2:#f5f5f2;
  --ink:#14161a; --mid:#5b626d; --faint:#9aa0aa;
  --line:#e8e8e3; --line2:#f1f1ec;
  --ac:#e2600e; --acs:#ff6f14; --acw:#fdf2e9;
  --ok:#1f8a4c; --bad:#c0392b;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);
  font-size:13.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.1}
p{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--acw)}
.num{font-variant-numeric:tabular-nums}
.sp{flex:1}

/* ------------------------------------------------------------------ shell */
.appbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;
  padding:0 18px;height:52px;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.8) blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.glyph{display:block;width:26px;height:30px;object-fit:contain;object-position:center;
  flex:0 0 auto}
.wm{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.035em}
.wm b{color:var(--ac)}
.tabs{display:flex;gap:1px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);
  text-decoration:none;padding:6px 9px;border-radius:5px;white-space:nowrap}
.tabs a:hover,.tabs a.on{color:var(--ac);background:var(--acw)}
.token-ca{display:flex;align-items:center;justify-content:center;flex:0 0 32px;
  width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:50%;
  padding:0;cursor:pointer;color:var(--mid);white-space:nowrap}
.token-ca:hover{border-color:var(--ac);color:var(--ac)}
.token-ca span{font-size:8px;letter-spacing:.12em;color:var(--ac)}
.token-ca b{display:none}
.meter{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:6px;
  padding:5px 11px;font-size:11.5px;color:var(--mid);white-space:nowrap}
.meter b{color:var(--ink);font-weight:600}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.dot.off{background:var(--faint)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid var(--ac);background:var(--ac);color:#fff;border-radius:6px;
  padding:9px 15px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  font-family:var(--sans);letter-spacing:-.01em;text-decoration:none;
  transition:opacity .15s,transform .1s,box-shadow .2s}
.btn:hover:not(:disabled){opacity:.9}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover:not(:disabled){border-color:var(--ac);color:var(--ac);opacity:1}
.btn.sm{padding:6px 11px;font-size:11.5px}
.btn.big{font-size:16px;padding:16px 28px;border-radius:8px;letter-spacing:-.02em;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 26px -12px rgba(226,96,14,.75)}
.btn.big:hover{box-shadow:0 1px 0 rgba(0,0,0,.04),0 14px 32px -12px rgba(226,96,14,.9);opacity:1}
.btn.big .ar{font-family:var(--mono);font-weight:400;opacity:.85;transition:transform .18s}
.btn.big:hover .ar{transform:translateX(3px)}
.build-menu{position:relative;flex:0 0 auto}
.wallet-connect{flex:0 0 auto}
.wallet-connect.connected{border-color:var(--ac);color:var(--ac)}
.build-menu .btn{gap:7px}
.menu-caret{font-size:14px;line-height:.7;transform:translateY(-1px)}
.build-menu-panel{position:absolute;top:calc(100% + 8px);right:0;width:238px;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 12px 28px -16px rgba(20,22,26,.45);z-index:70}
.menu-label{padding:6px 9px 7px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint)}
.build-menu-panel a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px;border-radius:5px;text-decoration:none;color:var(--ink);font-family:var(--sans);
  font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.build-menu-panel a:hover,.build-menu-panel a:focus-visible{background:var(--acw);outline:0}
.build-menu-panel small{color:var(--faint);font-family:var(--mono);font-size:9px;
  font-weight:400;white-space:nowrap}
@media (max-width:1040px){.tabs{display:none}}
@media (max-width:700px){.meter{display:none}}
@media (max-width:560px){
  .wallet-connect{font-size:0;width:36px;padding-inline:7px}
  .wallet-connect::before{content:'◉';font-size:13px}
}

/* ------------------------------------------------------------- the reading */
.sec{border-top:1px solid var(--line);padding:60px 0}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 15px;margin-bottom:28px}
.head .n{font-size:10.5px;color:var(--ac);letter-spacing:.16em}
.head h2{font-size:clamp(21px,2.6vw,30px)}
.head .sub{width:100%;font-size:12.5px;color:var(--faint);line-height:1.75}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.three > div{background:#fff;padding:22px;display:flex;flex-direction:column}
.three .e{font-size:10.5px;letter-spacing:.16em;color:var(--ac)}
.three .t{font-family:var(--sans);font-size:15.5px;letter-spacing:-.025em;margin-top:9px;font-weight:600}
.three .d{margin-top:7px;font-size:12px;color:var(--mid);line-height:1.68}
.three .p{margin-top:auto;padding-top:14px;font-size:11px;color:var(--ac);letter-spacing:.05em}
.prose{max-width:76ch;font-size:12.8px;color:var(--mid);line-height:1.85}
.prose b{color:var(--ink)}
code{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:11.5px}

#rungs{display:grid;gap:10px}
.rung{border:1px solid var(--line);border-radius:10px;background:var(--panel);position:relative;
  display:grid;grid-template-columns:minmax(190px,248px) 1fr;overflow:hidden}
.rung.me{border-color:var(--ac);box-shadow:inset 3px 0 0 var(--ac)}
.rung .left{padding:16px 18px;border-right:1px solid var(--line2);background:#fff}
.rung .nm{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.03em}
.rung .hold{font-size:10.5px;color:var(--ac);margin-top:3px;letter-spacing:.05em}
.rung .why{font-size:11.5px;color:var(--mid);margin-top:9px;line-height:1.6}
.rung .right{padding:30px 18px 16px;display:flex;flex-wrap:wrap;gap:2px 24px;align-items:flex-end}
.rung .f{min-width:60px;padding:2px 0}
.rung .f .k{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.rung .f .v{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-.03em}
.rung .f .v.sm{font-size:13px}
.rung .eng{position:absolute;right:18px;top:13px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid)}
.rung .eng i{color:var(--faint);font-style:normal}
.freeflag{position:absolute;left:0;top:0;background:var(--acs);color:#fff;font-size:8.5px;
  letter-spacing:.2em;text-transform:uppercase;padding:3px 10px;border-bottom-right-radius:8px}

.tok{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tok .c{background:#fff;padding:18px}
.tok .k{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--faint)}
.tok .v{font-family:var(--sans);font-size:clamp(19px,2.3vw,27px);font-weight:600;
  letter-spacing:-.035em;margin-top:6px;line-height:1.1}
.tok .s{font-size:11px;color:var(--mid);margin-top:5px}
.up{color:var(--ok)} .dn{color:var(--bad)}
.holdings{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:#fff;
  overflow:hidden}
.holdings-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:17px 18px 12px}
.eyebrow{display:block;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--faint)}
.holdings-value{display:flex;align-items:baseline;gap:12px;margin-top:5px}
.holdings-value strong{font-family:var(--sans);font-size:24px;letter-spacing:-.035em}
.holdings-value span{font-size:11px;color:var(--mid)}
.live-read{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mid);padding-top:3px}
.live-read i{width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px rgba(31,138,76,.10);animation:pulse-live 1.8s ease-out infinite}
@keyframes pulse-live{50%{box-shadow:0 0 0 7px rgba(31,138,76,0)}}
.holdings-chart{height:250px;position:relative;border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);background:linear-gradient(180deg,#fff,var(--panel))}
.holdings-chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart-grid line{stroke:var(--line2);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-area{fill:url(#feeFill)}
.chart-line{fill:none;stroke:var(--ac);stroke-width:2.5;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart-point{fill:#fff;stroke:var(--ac);stroke-width:3;vector-effect:non-scaling-stroke}
.chart-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:var(--faint)}
.chart-empty[hidden]{display:none}
.chart-max,.chart-min{position:absolute;right:12px;font-size:9.5px;color:var(--faint);
  background:rgba(255,255,255,.84);padding:1px 4px}
.chart-max{top:8px}.chart-min{bottom:8px}
.holdings-foot{display:flex;gap:16px;align-items:center;padding:10px 18px;
  font-size:10.5px;color:var(--faint)}
.holdings-foot a{margin-left:auto;color:var(--ink);text-decoration:none}
.holdings-foot a:hover{color:var(--ac)}
.addrline{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;
  font-size:11.5px;color:var(--faint)}
.ca{font-size:11.5px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  padding:5px 9px;user-select:all;overflow-wrap:anywhere;color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:10px;
  grid-auto-rows:88px;max-height:480px;overflow-y:auto;align-content:start;
  padding:0 8px 0 0;scrollbar-gutter:stable}
.tile{border:1px solid var(--line);border-radius:9px;background:#fff;padding:13px 14px 13px 17px;
  display:block;text-decoration:none;position:relative;overflow:hidden}
.tile:hover{border-color:var(--ac)}
.tile .n{font-family:var(--sans);font-size:15px;letter-spacing:-.025em;font-weight:600}
.tile .d{font-size:11.5px;color:var(--mid);margin-top:4px;height:2.9em;overflow:hidden}
.tile .m{margin-top:9px;font-size:10px;color:var(--faint);letter-spacing:.06em;display:flex;gap:9px}
.tile .barx{position:absolute;left:0;top:0;bottom:0;width:3px}
.empty{border:1px dashed var(--line);border-radius:9px;padding:26px;text-align:center;
  color:var(--faint);font-size:12px}
.code2{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:16px;overflow-x:auto;font-size:11.6px;line-height:1.75;color:var(--mid)}
.code2 .c{color:var(--faint)} .code2 .s{color:var(--ac)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.grid2 > div{background:#fff;padding:20px}
.grid2 h3{font-size:14px;letter-spacing:-.025em}
.grid2 p{font-size:12px;color:var(--mid);margin-top:7px;line-height:1.75}
footer{border-top:1px solid var(--line);padding:28px 0 44px;font-size:11.5px;color:var(--faint);
  text-align:center}
footer .in{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
@media (max-width:860px){
  .three,.tok,.cols,.grid2{grid-template-columns:1fr}
  .grid{grid-auto-rows:112px;max-height:600px}
  .holdings-chart{height:210px}
  .holdings-foot{flex-wrap:wrap;gap:6px 14px}
  .holdings-foot a{width:100%;margin-left:0}
  .rung{grid-template-columns:1fr}
  .rung .left{border-right:0;border-bottom:1px solid var(--line2)}
  .rung .eng{position:static;margin-bottom:6px;width:100%}
  .rung .right{padding-top:16px}
}

/* =================================================================== hero
   The picture runs clean across the top of the page — no frame, no caption,
   just four sites going up at once. Then the words, centred under it. */
.riglane{overflow:hidden;background:linear-gradient(#fff,#fdfcfa);
  border-bottom:1px solid var(--line2);display:flex;justify-content:center;
  padding:clamp(10px,2.5vh,22px) 0 clamp(8px,2vh,14px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.riglane .layers{position:relative}
.riglane pre{margin:0;font-family:var(--mono);font-weight:700;white-space:pre;
  line-height:1.06;text-align:left;font-size:clamp(5.4px,1vh,9px);width:max-content}
#sc{color:var(--ac)}
#pg{position:absolute;inset:0;color:var(--ink)}
@media (max-width:900px){.riglane pre{font-size:clamp(5px,1vh,7px)}}
@media (max-width:520px){.riglane pre{font-size:clamp(4px,1vh,5.4px)}}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  min-height:calc(100svh - 52px - clamp(122px,24vh,170px));
  display:flex;flex-direction:column;align-items:stretch;
  background:radial-gradient(760px 340px at 50% -30%,var(--acw),transparent 70%)}
.hero .wrap{max-width:940px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:100%;flex:1;min-height:0;
  padding-block:clamp(16px,3vh,38px) clamp(18px,3vh,38px);
  transform:translateY(-clamp(8px,2vh,16px))}
.hero-wordmark{display:flex;align-items:center;justify-content:center;
  margin:0 auto clamp(8px,1.5vh,14px)}
.hero-wordmark span{font-family:var(--sans);font-size:clamp(44px,4.5vw,60px);
  font-weight:600;letter-spacing:-.07em;line-height:.9;color:var(--ink)}
.hero-wordmark b{color:var(--ac);font-weight:600}
.kicker{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  background:#fff;border-radius:999px;padding:6px 13px;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mid)}
.kicker .dot{background:var(--acs)}
.hero h1{margin:0 auto;font-size:clamp(29px,min(4vw,5vh),48px);letter-spacing:-.04em;
  line-height:1.04;max-width:24ch}
.hero h1 .line{display:block}
.hero h1 em{font-style:normal;color:var(--ac)}
.hero .lede{margin:12px auto 0;font-size:clamp(11px,min(1.15vw,1.8vh),14px);color:var(--mid);
  line-height:1.45;max-width:70ch}
.cta{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.hero .btn.big{font-size:clamp(13px,1.7vw,16px);padding:clamp(11px,1.8vh,16px)
  clamp(18px,2.2vw,28px)}
.hero-how{display:inline-flex;align-items:center;gap:7px;padding:8px 2px;
  color:var(--mid);font-family:var(--sans);font-size:13px;font-weight:600;
  text-decoration:none;letter-spacing:-.01em}
.hero-how span{color:var(--ac);font-family:var(--mono);font-size:15px;
  transition:transform .15s}
.hero-how:hover{color:var(--ink)}
.hero-how:hover span{transform:translateY(3px)}
.under{display:block;margin-top:8px;font-size:clamp(10px,1.5vh,11.5px);color:var(--faint)}
.badges{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.badges span{border:1px solid var(--line);background:#fff;border-radius:6px;padding:4px 8px;
  font-size:10px;color:var(--mid)}
.badges span b{color:var(--ac);font-weight:600}
.hero-scroll{display:inline-flex;align-items:center;gap:7px;align-self:center;
  margin:0 0 10px;color:var(--faint);font-size:9px;letter-spacing:.16em;
  text-decoration:none;text-transform:uppercase}
.hero-scroll i{font-size:15px;font-style:normal;line-height:.7;color:var(--ac);
  transition:transform .15s}
.hero-scroll:hover{color:var(--ink)}
.hero-scroll:hover i{transform:translateY(3px)}

@media (max-height:760px){
  .hero .wrap{padding-block:12px 16px}
  .hero-wordmark span{font-size:clamp(42px,4.2vw,54px)}
  .hero h1{font-size:clamp(27px,min(3.8vw,4.4vh),42px)}
  .hero .lede{margin-top:9px;line-height:1.35}
  .hero .cta{margin-top:12px}
  .hero .badges{margin-top:9px}
}
@media (max-width:520px){
  .hero .wrap{padding-inline:18px}
  .hero h1{max-width:18ch}
  .hero .lede{max-width:43ch}
  .hero .cta{gap:8px}
}

/* the three-step strip under the hero */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);flex:0 0 auto;
  margin-bottom:clamp(20px,4vh,30px)}
.steps3 > div{background:rgba(255,255,255,.88);padding:11px 22px;display:flex;gap:12px;align-items:flex-start}
.steps3 .n{font-family:var(--sans);font-weight:600;font-size:13px;color:#fff;background:var(--ac);
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.steps3 .t{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:-.02em}
.steps3 .d{font-size:11px;color:var(--mid);margin-top:3px;line-height:1.4}
@media (max-width:860px){.steps3{grid-template-columns:1fr}}

/* the closing call */
.close{border-top:1px solid var(--line);background:var(--panel);padding:66px 0;text-align:center}
.close h2{font-size:clamp(24px,3.4vw,42px);letter-spacing:-.035em;max-width:20ch;margin:0 auto}
.close p{margin:16px auto 0;max-width:56ch;color:var(--mid);font-size:13px;line-height:1.75}
.close .cta{justify-content:center;margin-top:28px}
.close pre{margin:26px auto 0;font-size:6.5px;line-height:1.04;color:var(--ac);font-weight:700;
  white-space:pre;overflow-x:auto}

/* the segmented picker, used by both pages */
.segs{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;background:#fff;width:max-content;max-width:100%}
.segs button{border:0;background:none;padding:7px 12px;font-size:10.5px;color:var(--mid);
  cursor:pointer;letter-spacing:.1em;text-transform:uppercase}
.segs button + button{border-left:1px solid var(--line)}
.segs button.on{background:var(--ac);color:#fff}

/* the live example frame */
.shot{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
  margin-top:12px;box-shadow:0 1px 2px rgba(15,20,30,.04),0 22px 54px -34px rgba(15,20,30,.45)}
#exFrame{display:block;width:100%;height:min(72vh,620px);border:0;background:#fff}
.exfoot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;
  font-size:11.5px;color:var(--mid)}