:root{
    --bg:#070707;
    --surface:#0D0D0D;
    --card:#131313;
    --onyx:#1A1A1A;
    --line:rgba(255,255,255,.07);
    --line-2:rgba(204,255,0,.22);
    --fg:#F2F2F2;
    --fg-2:#8E8E8E;
    --fg-3:#525252;
    --green:#CCFF00;
    --green-dim:rgba(204,255,0,.09);
    --r:14px;
    --ease:cubic-bezier(.22,1,.36,1);
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--fg);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--green);color:#000}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#222;border-radius:8px;border:3px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:#333}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
  input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
  input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  input[type=number]{-moz-appearance:textfield}
  :focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}

  /* ---------- shell ---------- */
  .view{display:none}
  .view.on{display:block}

  /* ---------- nav ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:64px;padding:0 28px;
    display:flex;align-items:center;gap:32px;
    background:rgba(5,5,5,.72);
    backdrop-filter:blur(20px);
    border-bottom:1px solid transparent;
    transition:border-color .3s var(--ease);
  }
  nav.scrolled{border-bottom-color:var(--line)}
  .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:-.01em}
  .nav-logo{display:none;align-items:center;flex:none;margin-right:8px}
  .nav-logo .mark{display:flex;align-items:center;justify-content:center}
  .nav-logo .mark svg{width:15px;height:15px}
  .nav-logo-text{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--fg);margin-left:9px}
  .nav-cta{white-space:nowrap}
  .mark{
    width:24px;height:24px;border-radius:7px;
    background:var(--green);
    display:grid;place-items:center;
    flex:none;
  }
  .mark svg{width:15px;height:15px;display:block}
  .navlinks{display:flex;gap:26px;margin-left:12px}
  #homeTokenSortTabs{margin-left:0}
  #homeTokensSection{padding-top:40px}
  .navlinks button{
    font-size:13.5px;color:var(--fg-2);
    transition:color .2s;
  }
  .navlinks button:hover,.navlinks button.active{color:var(--fg)}
  #homeTokenSortTabs{gap:10px}
  #homeTokenSortTabs .pftab{display:flex;align-items:center;gap:6px;background:var(--onyx);border:1px solid var(--line-2);border-radius:10px;padding:8px 14px;color:#fff;font-size:13px;font-weight:500;transition:all .15s ease}
  #homeTokenSortTabs .pftab svg{width:14px;height:14px;flex:none}
  #homeTokenSortTabs .pftab:hover{border-color:var(--fg-2);color:#fff}
  #homeTokenSortTabs .pftab.active{background:var(--green);border-color:var(--green);color:#000}
  #ttSlippageRow button{background:var(--onyx);border:1px solid var(--line-2);border-radius:8px;color:var(--fg-2);cursor:pointer;transition:all .15s ease}
  #ttSlippageRow button.active{background:var(--green);color:#000;border-color:var(--green);font-weight:600}
  #ttSlippageRow button:hover:not(.active){border-color:var(--fg-2);color:var(--fg)}
  .navright{position:fixed;top:0;right:28px;height:64px;display:flex;align-items:center;gap:12px;z-index:101}
  #nav{position:fixed}
  .navburger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px;z-index:60}
  .navburger span{display:block;width:22px;height:2px;background:var(--fg);border-radius:2px;transition:transform .2s,opacity .2s}
  .navburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navburger.open span:nth-child(2){opacity:0}
  .navburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  #mobileMenu{display:none;position:absolute;top:100%;left:0;right:0;background:#0A0A0A;border-bottom:1px solid var(--line);z-index:50;flex-direction:column;padding:8px 20px 16px;box-shadow:0 12px 24px rgba(0,0,0,.4)}
  #mobileMenu.open{display:flex}

  /* ---------- sidebar ---------- */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:240px;z-index:110;
    background:#0A0A0A;border-right:1px solid var(--line);
    display:flex;flex-direction:column;padding:22px 14px 18px;
    overflow-y:auto;
  }
  .sidebar-logo{display:flex;align-items:center;gap:11px;margin-bottom:28px;padding:0 8px}
  .sidebar-logo .mark{width:32px;height:32px;border-radius:9px}
  .sidebar-logo .mark svg{width:19px;height:19px}
  .sidebar-logo span{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
  .sidebar-nav{display:flex;flex-direction:column;gap:2px}
  .sidebar-nav button{
    display:flex;align-items:center;gap:14px;padding:13px 12px;border-radius:10px;
    font-size:16px;color:var(--fg-2);text-align:left;width:100%;font-weight:500;
    transition:background .15s,color .15s;
  }
  .sidebar-nav button svg{width:23px;height:23px;flex:none}
  .sidebar-nav button:hover{background:var(--onyx);color:var(--fg)}
  .sidebar-nav button.active{background:rgba(204,255,0,.1);color:var(--green)}
  .sidebar-divider{height:1px;background:var(--line);margin:14px 8px}
  .sidebar-fabs{margin-top:24px;display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
  .sidebar-fabs .fab-btn{position:static;width:100%;justify-content:center}
  .sidebar-social-row{display:flex;gap:10px;margin-top:auto;padding:16px 4px 0}
  .sidebar-icon-btn{
    width:42px;height:42px;border-radius:11px;
    background:var(--onyx);border:1px solid var(--line-2);
    display:flex;align-items:center;justify-content:center;
    color:var(--fg-2);cursor:pointer;transition:all .15s ease;
  }
  .sidebar-icon-btn:hover{color:var(--fg);border-color:var(--fg-2)}
  .page-btn{
    min-width:34px;height:34px;padding:0 10px;border-radius:9px;
    background:var(--onyx);border:1px solid var(--line-2);color:var(--fg-2);
    font-size:13px;cursor:pointer;transition:all .15s ease;
  }
  .page-btn:hover{border-color:var(--fg-2);color:var(--fg)}
  .page-btn.active{background:var(--green);color:#000;border-color:var(--green);font-weight:600}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:105}
  .sidebar-backdrop.open{display:block}
  .navburger2{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px}
  .navburger2 span{display:block;width:22px;height:2px;background:var(--fg);border-radius:2px;transition:transform .2s,opacity .2s}
  .navburger2.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navburger2.open span:nth-child(2){opacity:0}
  .navburger2.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav{left:240px}
  .view{margin-left:240px}
  @media(max-width:860px){
    .sidebar{transform:translateX(-100%);transition:transform .25s ease}
    .sidebar.open{transform:translateX(0)}
    .view{margin-left:0}
    nav{left:0}
    .navburger2{display:flex}
    .nav-logo{display:flex}
    .navright{right:14px;gap:6px}
    .nav-cta{padding:0 12px;font-size:12.5px;height:34px}
  }
  #mobileMenu button{text-align:left;padding:14px 4px;font-size:15px;color:var(--fg-2);border-bottom:1px solid rgba(255,255,255,.06)}
  #mobileMenu button:last-child{border-bottom:none}
  #mobileMenu button:hover,#mobileMenu button.active{color:var(--fg)}

  /* ---------- buttons ---------- */
  [hidden]{display:none!important}
  .btn{
    height:38px;padding:0 18px;border-radius:10px;
    font-size:13.5px;font-weight:500;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    transition:transform .18s var(--ease), background .2s, border-color .2s, opacity .2s;
    white-space:nowrap;
  }
  .btn:active{transform:scale(.97)}
  .btn:disabled{cursor:not-allowed}
  /* Fading a lime fill to 40% lands on a muddy olive. A disabled button
     should read as *absent*, so it drops the fill and keeps only an outline. */
  .btn-primary:disabled{
    background:transparent;color:var(--fg-3);
    box-shadow:inset 0 0 0 1px var(--line);
  }
  .btn-ghost:disabled{color:var(--fg-3);border-color:var(--line);opacity:.55}
  /* Stop is not a destructive action — it is an interrupt. Neutral fill with
     a square glyph, the universal stop mark, rather than an alarm colour. */
  .btn-stop{
    background:var(--onyx)!important;color:var(--fg)!important;
    box-shadow:inset 0 0 0 1px var(--line-2);
  }
  .btn-stop:hover{background:#232323!important}
  .btn-stop::before{
    content:'';width:8px;height:8px;border-radius:2px;
    background:var(--fg);flex:none;
  }
  .btn-primary{background:var(--green);color:#000;font-weight:600}
  .btn-sell{background:#E24B4A;color:#fff;font-weight:600}
  .btn-pulse{animation:btn-pulse .35s ease}
  @keyframes trade-in-buy{
    0%{background:rgba(204,255,0,.28);transform:translateX(-6px);opacity:0}
    100%{background:transparent;transform:translateX(0);opacity:1}
  }
  @keyframes trade-in-sell{
    0%{background:rgba(226,75,74,.28);transform:translateX(-6px);opacity:0}
    100%{background:transparent;transform:translateX(0);opacity:1}
  }
  @keyframes trade-in-burn{
    0%{background:rgba(255,138,61,.35)}
    60%{background:rgba(255,138,61,.18)}
    100%{background:transparent}
  }
  .trade-row-new-buy{animation:trade-in-buy 1.1s ease}
  .trade-row-new-sell{animation:trade-in-sell 1.1s ease}
  .trade-row-new-burn{animation:trade-in-burn 1.6s ease}
  .tt-stat-label{font-size:10px;color:var(--fg-2);text-transform:uppercase;letter-spacing:.05em}
  .tt-stat-value{font-size:15px;font-weight:600;color:var(--fg);font-family:var(--mono);margin-top:3px}
  .tt-social-btn{
    width:38px;height:38px;border-radius:11px;
    background:var(--onyx);border:1px solid var(--line-2);
    display:flex;align-items:center;justify-content:center;
    color:var(--fg-2);cursor:pointer;text-decoration:none;flex:none;padding:0;font:inherit;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .2s,border-color .2s,box-shadow .3s;
  }
  .tt-social-btn:hover{
    transform:translateY(-4px) rotateX(14deg) rotateY(-10deg) scale(1.1);
    color:var(--green);border-color:var(--line-2);
    box-shadow:0 10px 18px rgba(0,0,0,.45);
  }
  #ttContractBtn:hover{border-color:var(--line-2);color:var(--fg)}
  #ttDevLink:hover{color:var(--fg)}
  @keyframes btn-pulse{
    0%{transform:scale(1)}
    40%{transform:scale(.96)}
    100%{transform:scale(1)}
  }
  .btn-primary:hover:not(:disabled){background:#D9FF3D}
  .btn-ghost{border:1px solid var(--line);color:var(--fg-2)}
  .btn-ghost:hover:not(:disabled){border-color:var(--line-2);color:var(--fg);background:rgba(255,255,255,.03)}
  .herocta .btn-ghost{
    border-color:rgba(255,255,255,.28);color:#F2F2F2;
    background:rgba(7,7,7,.82);backdrop-filter:blur(8px);
    box-shadow:0 4px 20px rgba(0,0,0,.5);
  }
  .herocta .btn-ghost:hover{
    border-color:rgba(204,255,0,.6);color:#fff;
    background:rgba(20,26,4,.9);
  }
  .btn-lg{height:48px;padding:0 26px;font-size:15px;border-radius:12px}
  .btn-sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}

  /* ---------- hero ---------- */
  #canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
  .hero{
    position:relative;z-index:1;
    min-height:78vh;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    text-align:left;padding:160px 56px 40px;
  }
  .hero::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:220px;
    background:linear-gradient(to bottom,transparent,var(--bg));
    pointer-events:none;
  }
  /* radial vignette pins the eye to the type and keeps the field in the wings */
  .hero::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 60% 50% at 50% 45%,
      rgba(7,7,7,.88) 0%, rgba(7,7,7,.55) 45%, transparent 75%);
  }
  .pill{
    display:inline-flex;align-items:center;gap:8px;
    height:30px;padding:0 12px 0 8px;border-radius:99px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(7,7,7,.75);backdrop-filter:blur(8px);
    font-size:12.5px;color:#B8B8B8;margin-bottom:36px;
  }
  .dot{width:6px;height:6px;border-radius:99px;background:var(--green);
    box-shadow:0 0 0 0 rgba(204,255,0,.4);animation:pulse 2.4s infinite}
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(204,255,0,.35)}
    70%{box-shadow:0 0 0 7px rgba(204,255,0,0)}
    100%{box-shadow:0 0 0 0 rgba(204,255,0,0)}
  }
  h1{
    font-size:clamp(32px,5vw,64px);
    line-height:1.05;letter-spacing:-.035em;font-weight:600;
    max-width:none;
  }
  /* Characters are individually wrapped, so the browser can no longer see
     word boundaries. Words are re-grouped in .w so wrapping stays sane. */
  .d3 .w{display:inline-block;white-space:nowrap}
  h1 em{font-style:normal;color:var(--green)}
  .sub{
    margin-top:26px;font-size:clamp(13px,1.3vw,16px);
    color:#C4C4C4;line-height:1.6;max-width:44ch;
    text-shadow:0 2px 18px rgba(7,7,7,.95), 0 0 40px rgba(7,7,7,.8);
  }
  .herocta{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}
  .hero-stats{position:absolute;top:160px;right:56px;z-index:2;display:flex;flex-direction:column;gap:16px;padding:20px 24px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(10,10,10,.8);backdrop-filter:blur(12px);min-width:380px;box-shadow:0 8px 32px rgba(0,0,0,.4)}
  .hero-stats .stat-row{display:flex;align-items:center;gap:12px}
  .hero-stats .stat-row+.stat-row{padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
  .hero-stats .stat-icon{width:34px;height:34px;border-radius:10px;background:rgba(204,255,0,.1);display:flex;align-items:center;justify-content:center;flex:none;color:var(--green)}
  .hero-stats .stat-icon svg{width:17px;height:17px}
  .hero-stats .stat-text{display:flex;flex-direction:column;gap:2px;min-width:0}
  .hero-stats .stat-label{font-size:10.5px;color:#ffffff;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
  .hero-stats .stat-value{font-size:17px;font-weight:700;color:var(--fg);font-family:var(--mono);white-space:nowrap}
  @media(max-width:860px){.hero-stats{display:none}}

  /* ---------- recent projects dropdown ----------
     Two states matter and only two: live (deployed, has a URL) and
     draft (generated, not deployed). The dot carries that, so the row
     doesn't need a badge as well. */
  .recent{position:relative}
  #recentBtn{gap:7px}
  .count{
    min-width:17px;height:17px;padding:0 4px;border-radius:5px;
    background:var(--onyx);border:1px solid var(--line);
    font-family:var(--mono);font-size:10.5px;
    display:grid;place-items:center;color:var(--fg-3);
  }
  .recent.has .count{background:var(--green);color:#111;border-color:transparent;font-weight:600}
  .drop{
    position:absolute;top:calc(100% + 10px);right:0;
    width:308px;
    background:var(--card);border:1px solid var(--line);
    border-radius:13px;overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.7);
    opacity:0;transform:translateY(-6px) scale(.98);
    pointer-events:none;
    transition:opacity .2s var(--ease), transform .24s var(--ease);
  }
  .recent.open .drop{opacity:1;transform:none;pointer-events:auto}
  .drophead{
    display:flex;align-items:center;
    padding:12px 14px;border-bottom:1px solid var(--line);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--fg-3);
  }
  .drophead button{
    margin-left:auto;color:var(--green);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;
  }
  .drophead button:hover{opacity:.75}
  .droplist{max-height:300px;overflow-y:auto}
  .pitem{
    display:flex;align-items:center;gap:11px;
    padding:12px 14px;width:100%;text-align:left;
    border-bottom:1px solid var(--line);
    transition:background .18s;
  }
  .pitem:last-child{border-bottom:none}
  .pitem:hover{background:var(--onyx)}
  .pdot{
    width:6px;height:6px;border-radius:99px;flex:none;
    background:var(--fg-3);
  }
  .pitem.live .pdot{background:var(--green);box-shadow:0 0 7px rgba(204,255,0,.55)}
  .pinfo{min-width:0;flex:1}
  .pinfo .nm{
    font-size:13px;font-weight:500;color:var(--fg);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .pinfo .st{
    font-family:var(--mono);font-size:10.5px;color:var(--fg-3);margin-top:3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .pitem.live .st{color:var(--green)}

  .swap{
    color:var(--green);
    display:inline-block;
    will-change:transform,opacity;
  }

  .cell-tag{
    display:inline-block;font-family:var(--mono);font-size:9.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);
    padding:3px 8px;border:1px solid var(--line);border-radius:99px;
    margin-bottom:10px;
  }
  .cell-tag.token{color:var(--green);border-color:rgba(204,255,0,.35)}

  /* ---------- profile: my apps list ---------- */
  .pf-app-row{
    display:flex;align-items:center;gap:11px;width:100%;text-align:left;
    padding:12px 14px;border-bottom:1px solid var(--line);
    transition:background .18s;
  }
  .pf-app-row:hover{background:var(--line)}
  .pf-dot{width:6px;height:6px;border-radius:99px;flex:none;background:#D8B400}
  .pf-dot.published{
    background:var(--green);
    animation:pfPulse 1.8s ease-in-out infinite;
  }
  @keyframes pfPulse{
    0%,100%{opacity:1;box-shadow:0 0 7px rgba(204,255,0,.55)}
    50%{opacity:.35;box-shadow:none}
  }
  .pf-app-name{font-size:13px;font-weight:500;color:var(--fg);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-app-status{
    font-family:var(--mono);font-size:10.5px;color:var(--fg-3);
    margin-left:16px;flex:none;
  }
  .dropempty{padding:26px 16px;text-align:center}
  .dropempty p{font-size:12.5px;color:var(--fg-3);line-height:1.55}

  /* ---------- account menu ---------- */
  .acct{position:relative}
  #acctBtn{gap:8px;padding-left:6px}
  .av{
    width:20px;height:20px;border-radius:6px;flex:none;
    background:linear-gradient(135deg,var(--green),#7A9E00);
  }
  .acct .drop{
    position:absolute;top:calc(100% + 10px);right:0;
    width:236px;
    background:var(--card);border:1px solid var(--line);
    border-radius:13px;overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.7);
    opacity:0;transform:translateY(-6px) scale(.98);
    pointer-events:none;
    transition:opacity .2s var(--ease), transform .24s var(--ease);
  }
  .acct.open .drop{opacity:1;transform:none;pointer-events:auto}

  .navsearch{margin-left:20px;flex:1;max-width:340px}
  .hero-search-wrap{width:100%;max-width:460px;margin:28px 0 0;display:flex;justify-content:flex-start}
  .hero-search-wrap .navsearch{margin-left:0;max-width:100%;width:100%;flex:none}
  .hero-search-wrap .navsearch input{height:48px;font-size:15px;padding:0 18px 0 42px;border-radius:14px}
  .hero-search-wrap .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none}
  .navsearch input{
    width:100%;height:36px;padding:0 14px;border-radius:10px;
    background:var(--bg-2,rgba(255,255,255,.04));border:1px solid var(--line);
    color:var(--fg);font-size:13.5px;
  }
  .navsearch input::placeholder{color:var(--fg-3)}
  .navsearch{position:relative;max-width:320px;flex-shrink:1;min-width:0}
  .search-drop{
    display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:#0A0A0A;border:1px solid var(--line-2);border-radius:12px;
    max-height:360px;overflow-y:auto;box-shadow:0 12px 30px rgba(0,0,0,.5);
    z-index:200;
  }
  .search-drop.open{display:block}
  .search-drop-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
  .search-drop-item:last-child{border-bottom:none}
  .search-drop-item:hover{background:var(--onyx)}
  .search-drop-badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border-radius:6px;flex:none}
  .search-drop-badge.app{background:rgba(204,255,0,.12);color:var(--green)}
  .search-drop-badge.token{background:rgba(98,126,234,.15);color:#8CA0F0}
  .search-drop-name{font-size:13.5px;color:var(--fg);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .search-drop-sub{font-size:11px;color:var(--fg-2);flex:none}
  .search-drop-empty{padding:16px;font-size:12.5px;color:var(--fg-2);text-align:center}
  .navsearch .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--fg-3);pointer-events:none}
  .navsearch input{padding-left:38px}
  .walletnav{position:relative}
  .walletnav .drop{width:200px}
  .walletnav.open .drop{opacity:1;transform:none;pointer-events:auto}
  .walletnav .drop button{
    display:block;width:100%;text-align:left;padding:12px 14px;
    border-bottom:1px solid var(--line);font-size:13.5px;color:var(--fg-2);
    transition:background .18s,color .18s;
  }
  .walletnav .drop button:last-child{border-bottom:none}
  .walletnav .drop button:hover{background:var(--line);color:var(--fg)}

  .lpWalletPicker{
    position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;
    display:flex;align-items:center;justify-content:center;
  }
  .lpWalletPickerCard{
    background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:20px;width:320px;max-width:90vw;
  }
  .lpWalletPickerCard h3{font-size:15px;margin-bottom:14px;color:var(--fg)}
  .lpWalletOption{
    display:flex;align-items:center;gap:12px;width:100%;padding:12px;
    border:1px solid var(--line);border-radius:12px;margin-bottom:8px;
    background:transparent;transition:background .18s,border-color .18s;
  }
  .lpWalletOption:hover{background:var(--line);border-color:var(--line-2)}
  .lpWalletOption img{width:28px;height:28px;border-radius:8px;flex:none}
  .lpWalletOption span{font-size:14px;color:var(--fg)}
  .lpWalletPickerClose{
    width:100%;padding:10px;margin-top:6px;color:var(--fg-3);font-size:13px;
  }

  .exploreNav{position:relative}
  .exploreNav .drop{width:160px;left:0;right:auto}
  .exploreNav.open .drop{opacity:1;transform:none;pointer-events:auto}
  .exploreNav .drop button{
    display:block;width:100%;text-align:left;padding:12px 14px;
    border-bottom:1px solid var(--line);font-size:13.5px;color:var(--fg-2);
    transition:background .18s,color .18s;
  }
  .exploreNav .drop button:last-child{border-bottom:none}
  .exploreNav .drop button:hover{background:var(--line);color:var(--fg)}

  /* ---------- locked CTA ----------
     Dim, not disabled. It still works — it just does not pretend to be the
     brightest thing on the page until there is a wallet behind it. */
  /* Locked is dim on purpose — it is the one place the CTA should not shout. */
  .btn-primary.locked{
    background:#5C7A0A;color:#E8F5C0;
    box-shadow:inset 0 0 0 1px rgba(204,255,0,.4), 0 4px 20px rgba(0,0,0,.5);
  }
  .btn-primary.locked:hover{
    background:#6E9010;color:#F2FADF;
    box-shadow:inset 0 0 0 1px rgba(204,255,0,.6), 0 6px 26px rgba(0,0,0,.55);
  }
  /* The secondary hero button was reading as disabled next to a glowing
     primary. Give it a real edge so it looks like a choice, not a leftover. */
  .herocta .btn-ghost{
    border-color:rgba(255,255,255,.18);color:var(--fg);
    background:rgba(255,255,255,.02);
  }
  .herocta .btn-ghost:hover{
    border-color:rgba(204,255,0,.45);color:var(--fg);
    background:rgba(204,255,0,.05);
  }

  /* ---------- builder gate ---------- */
  .gate{
    min-height:100vh;padding:64px 24px 0;
    display:none;place-items:center;
    position:relative;z-index:2;
    background:var(--bg);
  }
  .gate.on{display:grid}
  .gatein{
    text-align:center;max-width:400px;
    display:flex;flex-direction:column;align-items:center;
  }
  .glock{
    width:52px;height:52px;border-radius:15px;
    display:grid;place-items:center;margin-bottom:24px;
    background:var(--card);border:1px solid var(--line);
    color:var(--green);
  }
  .gatein h2{font-size:24px;letter-spacing:-.025em;margin-bottom:12px}
  .gatein p{
    font-size:14.5px;color:var(--fg-2);line-height:1.65;
    margin-bottom:28px;
  }
  .gatein .btn{width:100%;max-width:260px}
  .gatein .btn-ghost{margin-top:10px;background:none;border:none;color:var(--fg-3)}
  .gatein .btn-ghost:hover{color:var(--fg-2);background:none}
  .builder.hide{display:none}

  /* ---------- username claim ---------- */
  .uwrap{
    display:flex;align-items:center;gap:2px;
    background:var(--surface);border:1px solid var(--line);
    border-radius:9px;padding:0 12px;height:44px;
    transition:border-color .2s;
  }
  .uwrap:focus-within{border-color:rgba(204,255,0,.45)}
  .uwrap .at{font-family:var(--mono);font-size:14px;color:var(--fg-3)}
  .uwrap input{
    flex:1;height:100%;font-size:14px;font-family:var(--mono);
    background:none;border:none;padding:0 4px;
  }
  .uhint.ok{color:var(--green)}
  .uhint{
    font-family:var(--mono);font-size:10.5px;color:var(--fg-3);
    margin-top:8px;line-height:1.5;
  }
  .uhint.no{color:#FF8080}

  /* ---------- shipped ---------- */
  .shipmark{
    width:46px;height:46px;border-radius:14px;margin:0 auto 20px;
    display:grid;place-items:center;
    background:var(--green-dim);border:1px solid rgba(204,255,0,.25);
    color:var(--green);
  }
  .shiplink{
    display:block;width:100%;
    font-family:var(--mono);font-size:12px;color:var(--green);
    padding:12px;border-radius:10px;margin-bottom:20px;
    background:var(--green-dim);border:1px solid rgba(204,255,0,.18);
    word-break:break-all;
    transition:background .18s;
  }
  .shiplink:hover{background:rgba(204,255,0,.14)}
  #shipX{gap:9px}

  /* ---------- docs ---------- */
  .doc{
    margin-top:44px;padding-top:26px;
    border-top:1px solid var(--line);
  }
  .doc h3{
    font-size:17px;font-weight:600;letter-spacing:-.015em;
    margin-bottom:14px;
  }
  .doc p{
    font-size:14.5px;color:var(--fg-2);line-height:1.7;
    margin-bottom:12px;max-width:62ch;
  }
  .doc p:last-child{margin-bottom:0}
  .mono{font-family:var(--mono);font-size:.92em;color:var(--green)}

  /* A definition list is the right shape for a pipeline: each step is a term
     and a consequence, not a bullet in a bag. */
  .dl{margin:0}
  .dl dt{
    font-size:13px;font-weight:600;color:var(--fg);
    margin-top:16px;
  }
  .dl dt:first-child{margin-top:0}
  .dl dd{
    margin:5px 0 0;padding-left:0;
    font-size:14px;color:var(--fg-2);line-height:1.65;max-width:60ch;
  }

  .kv{
    border:1px solid var(--line);border-radius:11px;
    overflow:hidden;margin-bottom:16px;
  }
  .kv div{
    display:flex;align-items:center;
    padding:11px 14px;border-bottom:1px solid var(--line);
  }
  .kv div:last-child{border-bottom:none}
  .kv span{
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--fg-3);
    width:100px;flex:none;
  }
  .kv b{font-size:13.5px;font-weight:500;color:var(--fg)}

  .ul{margin:0;padding-left:18px}
  .ul li{
    font-size:14px;color:var(--fg-2);line-height:1.7;
    margin-bottom:7px;max-width:60ch;
  }
  .ul li::marker{color:var(--fg-3)}

  /* ---------- planning ----------
     Options are buttons because typing "the first one" is not an answer
     anybody should have to give. */
  .opts-row{
    display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;
  }
  .qopt{
    height:30px;padding:0 12px;border-radius:8px;
    font-size:12.5px;color:var(--fg-2);
    border:1px solid var(--line);background:var(--card);
    transition:all .16s var(--ease);
  }
  .qopt:hover{
    color:#0A0A0A;background:var(--green);border-color:var(--green);
    transform:translateY(-1px);
  }
  .bubble.picked{
    display:inline-block;margin-top:9px;
    padding:7px 12px;border-radius:8px;
    font-size:12.5px;font-weight:500;
    color:var(--green);background:var(--green-dim);
    border:1px solid rgba(204,255,0,.22);
  }

  .plan{
    border:1px solid var(--line);border-radius:12px;
    background:var(--card);overflow:hidden;
  }
  .psum{
    padding:13px 14px;font-size:13.5px;line-height:1.55;color:var(--fg);
    border-bottom:1px solid var(--line);
  }
  .pfeat{
    margin:0;padding:12px 14px 12px 30px;list-style:none;
  }
  .pfeat li{
    position:relative;font-size:13px;color:var(--fg-2);
    line-height:1.55;margin-bottom:7px;
  }
  .pfeat li:last-child{margin-bottom:0}
  .pfeat li::before{
    content:"";position:absolute;left:-15px;top:7px;
    width:5px;height:5px;border-radius:2px;background:var(--green);
  }
  .pact{
    display:flex;gap:7px;padding:11px 14px;
    border-top:1px solid var(--line);background:var(--surface);
  }

  /* ---------- blocked ----------
     Amber, not red. Nothing went wrong here — this is a limit, stated before
     anyone wastes a minute on it, with a door in it. */
  .blocked{
    border:1px solid rgba(255,180,60,.28);border-radius:12px;
    background:rgba(255,180,60,.05);overflow:hidden;
  }
  .btop{
    display:flex;align-items:center;gap:9px;
    padding:11px 13px;border-bottom:1px solid rgba(255,180,60,.18);
    font-size:12.5px;font-weight:600;color:#FFC864;
  }
  .bicon{
    width:17px;height:17px;border-radius:5px;flex:none;
    display:grid;place-items:center;
    background:rgba(255,180,60,.16);color:#FFC864;
    font-family:var(--mono);font-size:11px;font-weight:700;
  }
  .breason{padding:12px 13px;font-size:13px;line-height:1.6;color:var(--fg-2)}
  .bopts{
    padding:11px 13px;border-top:1px solid rgba(255,180,60,.14);
    background:rgba(0,0,0,.2);
  }
  .blbl{
    font-family:var(--mono);font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--fg-3);margin-bottom:8px;
  }
  .bopt{
    display:block;width:100%;text-align:left;
    padding:9px 11px;margin-bottom:5px;border-radius:8px;
    font-size:12.5px;color:var(--fg-2);
    border:1px solid var(--line);background:var(--card);
    transition:all .16s var(--ease);
  }
  .bopt:last-child{margin-bottom:0}
  .bopt:hover{
    color:#0A0A0A;background:var(--green);border-color:var(--green);
    transform:translateX(2px);
  }

  /* ---------- plan check ---------- */
  .check{
    border:1px solid var(--line);border-radius:11px;
    background:var(--card);padding:10px 12px;
  }
  .ck{
    display:flex;gap:9px;align-items:flex-start;
    font-size:12.5px;line-height:1.5;padding:3px 0;
  }
  .ck .mk{flex:none;width:12px;font-family:var(--mono);font-size:12px}
  .ck.y{color:var(--fg-2)}
  .ck.y .mk{color:var(--green)}
  .ck.n{color:#FF8080}
  .ck.n .mk{color:#FF6B6B}
  .verdict{
    font-size:12.5px;color:var(--fg-2);line-height:1.55;
    margin-top:9px;
  }

  /* ---------- sections ---------- */
  section{position:relative;z-index:1;padding:110px 28px;max-width:1180px;margin:0 auto}
  #v-launchpad section{max-width:none!important;width:100%!important;padding-left:5%!important;padding-right:5%!important;box-sizing:border-box!important;margin:0!important}
  section::before{
    content:"";position:absolute;inset:-40px 0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 72% 62% at 50% 45%,
      rgba(7,7,7,.90) 0%, rgba(7,7,7,.66) 55%, transparent 90%);
  }
  section > *{position:relative;z-index:2}
  .card{background:var(--card)}
  .board,.doc,.empty{background:var(--bg)}
  footer{background:linear-gradient(to bottom, rgba(7,7,7,.80), var(--bg) 55%)}
  .fin,.fbot{position:relative;z-index:2}
  .card,.board,.search,.filters .chip{position:relative;z-index:2}
  .card{background:var(--card)}
  .board{background:var(--bg)}
  .eyebrow{
    font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--green);margin-bottom:18px;
  }
  h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.028em;font-weight:600;line-height:1.15}
  .lede{margin-top:14px;color:var(--fg-2);font-size:16px;max-width:52ch;line-height:1.6}

  /* pipeline — the one place we go bold */
  .pipe{
    margin-top:56px;
    display:grid;grid-template-columns:repeat(5,1fr);
    border:1px solid var(--line);border-radius:var(--r);
    overflow:hidden;background:var(--surface);
  }
  .step{
    padding:30px 22px;border-right:1px solid var(--line);
    position:relative;overflow:hidden;
    transition:background .3s var(--ease);
  }
  .step:last-child{border-right:none}
  .step:hover{background:var(--card)}
  .step .n{
    font-family:var(--mono);font-size:11px;color:var(--fg-3);
    margin-bottom:14px;display:block;
  }
  .step h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
  .step p{font-size:13.5px;color:var(--fg-2);line-height:1.55}
  .step::before{
    content:'';position:absolute;top:0;left:0;height:1px;width:0;
    background:var(--green);transition:width .5s var(--ease);
  }
  .step.lit::before{width:100%}

  /* features */
  .grid{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .cell{background:var(--bg);padding:30px 26px;transition:background .3s}
  .cell:hover{background:var(--surface)}
  .cell h3{font-size:15.5px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
  .cell p{font-size:13.5px;color:var(--fg-2);line-height:1.6}

  /* ---------- feed ---------- */
  .feedhead{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
  .feedhead .lede{flex:1;min-width:280px}
  .filters{display:flex;gap:6px;margin-top:36px;flex-wrap:wrap;align-items:center}
  #exploreBackBtn{
    background:rgba(255,255,255,.05)!important;
    border:1px solid var(--line);border-radius:10px;
    padding:10px 18px!important;font-size:14px!important;font-weight:500;
  }
  #exploreBackBtn:hover{background:rgba(255,255,255,.09)!important}
  .chip{
    height:30px;padding:0 12px;border-radius:8px;
    border:1px solid var(--line);font-size:12.5px;color:var(--fg-3);
    transition:all .18s;white-space:nowrap;
  }
  .chip:hover{color:var(--fg);border-color:var(--line-2);background:rgba(255,255,255,.03)}
  #topChip{
    height:auto!important;background:rgba(255,255,255,.05)!important;
    border:1px solid var(--line);border-radius:10px!important;
    padding:10px 18px!important;font-size:14px!important;font-weight:500;
    color:var(--fg)!important;
  }
  #topChip:hover{background:rgba(255,255,255,.09)!important}
  #topChip.active{background:rgba(204,255,0,.08)!important;border-color:rgba(204,255,0,.3)!important;color:var(--green)!important}
  .search{
    display:flex;align-items:center;gap:8px;
    height:34px;padding:0 12px;border-radius:9px;
    border:1px solid var(--line);background:var(--surface);
    min-width:200px;margin-right:auto;
  }
  .search input{font-size:13.5px;width:100%}
  .search input::placeholder{color:var(--fg-3)}
  .token-card{
    display:flex;flex-direction:column;
    background:var(--onyx);border:1px solid var(--line);
    border-radius:var(--r);padding:16px;
    cursor:pointer;transition:border-color .2s;
  }
  .token-card:hover{border-color:var(--line-2)}
  .token-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .token-card-name{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .token-card-sym{font-family:var(--mono);font-size:11.5px;color:var(--fg-3);margin-top:2px}
  .token-card-mc{font-size:18px;font-weight:700;color:var(--fg);margin-top:6px}
  .token-card-mc span{font-size:11px;font-weight:500;color:var(--fg-3);margin-left:4px;text-transform:uppercase;letter-spacing:.04em}
  .token-card-sub{font-size:12px;color:var(--fg-3);margin-top:4px}
  .token-card-divider{height:1px;background:var(--line);margin:14px 0 12px}
  .token-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .token-card-copy{
    width:26px;height:26px;border-radius:7px;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface);border:1px solid var(--line-2);color:var(--fg-3);
    flex:none;transition:color .2s,border-color .2s;
  }
  .token-card-copy:hover{color:var(--fg);border-color:var(--line)}
  .token-card-addr{font-family:var(--mono);font-size:12px;color:var(--fg-3)}
  .token-card-bottom-left{display:flex;align-items:center;gap:8px}
  .token-card-age{font-family:var(--mono);font-size:12px;color:var(--fg-3)}
  .token-card-socials{display:flex;align-items:center;gap:10px}
  .token-card-social{display:inline-flex;align-items:center;justify-content:center;color:var(--fg-3);transition:color .2s}
  .token-card-social:hover{color:var(--fg)}

  .skel{
    background:linear-gradient(90deg,var(--line) 25%,var(--line-2) 37%,var(--line) 63%);
    background-size:400% 100%;
    animation:skel-shimmer 1.4s ease infinite;
    border-radius:6px;
  }
  @keyframes skel-shimmer{
    0%{background-position:100% 50%}
    100%{background-position:0 50%}
  }
  .skel-img{width:44px;height:44px;border-radius:10px;flex:none}
  .skel-line{height:12px}
  .token-skeleton{cursor:default}
  .token-skeleton:hover{border-color:var(--line-2)}
  .skel-text{display:inline-block;width:56px;height:13px;border-radius:5px;vertical-align:middle}
  .mytoken-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 14px;border-radius:12px;cursor:pointer;
    transition:background .2s;
  }
  .mytoken-row:hover{background:var(--onyx)}
  .mytoken-left{display:flex;align-items:center;gap:12px;min-width:0}
  .mytoken-name{font-size:14px;font-weight:600}
  .mytoken-sym{font-size:12px;color:var(--fg-3);margin-top:1px}
  .mytoken-right{text-align:right;flex:none;margin-left:12px}
  .mytoken-price{font-size:14px;font-weight:600;font-family:var(--mono)}
  .mytoken-change{font-size:12px;margin-top:2px}
  .mytoken-change.up{color:var(--green)}
  .mytoken-change.down{color:#ff6b6b}
  .mytoken-change.flat{color:var(--fg-3)}

  .fab-btn{
    position:fixed;right:24px;top:84px;z-index:40;
    display:flex;align-items:center;gap:10px;
    padding:16px 26px;border-radius:999px;
    background:var(--green);color:#0a0a0a;
    font-size:15px;font-weight:700;
    border:none;cursor:pointer;
    box-shadow:0 8px 30px rgba(204,255,0,.35),0 2px 10px rgba(0,0,0,.45);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;
  }
  .fab-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 38px rgba(204,255,0,.45),0 4px 14px rgba(0,0,0,.5)}
  .fab-btn:active{transform:translateY(-1px) scale(.97)}
  .fab-btn svg{width:22px;height:22px;flex:none;transition:transform .3s ease}

  .fab-launch:hover svg{transform:translate(2px,-3px) rotate(12deg)}
  .fab-launch.launching svg{animation:rocket-launch .38s ease forwards}
  @keyframes rocket-launch{
    0%{transform:translate(0,0) rotate(0)}
    100%{transform:translate(16px,-32px) rotate(24deg);opacity:0}
  }

  .fab-build:hover svg{animation:craft-wiggle .5s ease}
  @keyframes craft-wiggle{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(-16deg)}
    75%{transform:rotate(16deg)}
  }
  .fab-build.crafting svg{animation:craft-hit .3s ease}
  @keyframes craft-hit{
    0%{transform:rotate(0) scale(1)}
    40%{transform:rotate(-22deg) scale(1.15)}
    100%{transform:rotate(0) scale(1)}
  }

  @media(max-width:640px){
    #homeTokenSortTabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
    #homeTokenSortTabs::-webkit-scrollbar{display:none}
    #homeTokenSortTabs .pftab{flex:none;white-space:nowrap}
    .fab-btn{right:16px;top:76px;padding:13px 19px;font-size:13.5px;gap:8px}
    .fab-btn svg{width:19px;height:19px}
  }


  .cards{
    margin-top:32px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    align-items:stretch;
  }
  .card{
    display:flex;flex-direction:column;
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--r);overflow:hidden;
    transition:transform .28s var(--ease), border-color .28s;
    cursor:pointer;
  }
  .card:hover{transform:translateY(-3px);border-color:var(--line-2)}
  .cover{
    height:118px;position:relative;overflow:hidden;
    border-bottom:1px solid var(--line);
    display:grid;place-items:center;
  }
  .cover span{
    font-family:var(--mono);font-size:26px;font-weight:500;
    color:rgba(255,255,255,.9);letter-spacing:-.02em;
  }
  .cover.img{padding:0}
  .cover.img img{
    width:64px;height:64px;
    object-fit:contain;
    border-radius:14px;
    background:var(--bg);padding:7px;
    border:1px solid var(--line);
    box-shadow:0 8px 24px rgba(0,0,0,.55);
    transition:transform .4s var(--ease);
  }
  .card:hover .cover.img img{transform:translateY(-2px) scale(1.04)}
  .card:hover .cover.img img{transform:scale(1.03)}

  /* A contract address is something people copy, not something they read.
     One tap, no modal, no page. */
  .tok{
    margin-left:auto;
    font-family:var(--mono);font-size:10.5px;
    color:var(--fg-3);padding:3px 7px;border-radius:5px;
    border:1px solid var(--line);background:var(--surface);
    transition:color .18s, border-color .18s;
  }
  .tok:hover{color:var(--green);border-color:rgba(204,255,0,.3)}

  .links{display:flex;gap:9px;align-items:center}
  .links a{
    color:var(--fg-3);display:grid;place-items:center;
    transition:color .18s, transform .18s var(--ease);
  }
  .links a:hover{color:var(--green);transform:translateY(-1px)}
  .cbody{padding:14px;display:flex;flex-direction:column;flex:1}
  .ctop{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .cat{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--green);background:var(--green-dim);
    padding:3px 7px;border-radius:5px;
  }
  .card h3{font-size:14px;font-weight:600;letter-spacing:-.01em}
  .card p{
    font-size:12.5px;color:var(--fg-2);line-height:1.5;margin-top:5px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;min-height:2.6em;
  }
  .cmeta{
    display:flex;align-items:center;gap:14px;margin-top:16px;
    padding-top:14px;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:11.5px;color:var(--fg-3);
  }
  .by{color:var(--fg-2)}
  .vw{color:var(--fg-3)}
  .links{margin-left:auto}
  .empty{
    grid-column:1/-1;padding:70px 20px;text-align:center;
    border:1px dashed var(--line);border-radius:var(--r);
  }
  .empty h3{font-size:17px;margin-bottom:8px;font-weight:600}
  .empty p{color:var(--fg-2);font-size:14px;margin-bottom:22px}

  /* ---------- leaderboard ---------- */
  .board{margin-top:44px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .row{
    display:grid;grid-template-columns:40px 36px 1fr auto;
    align-items:center;gap:14px;
    padding:14px 20px;border-bottom:1px solid var(--line);
    transition:background .2s;cursor:pointer;
  }
  .rmark{
    width:36px;height:36px;border-radius:10px;
    object-fit:contain;background:var(--bg);padding:4px;
    border:1px solid var(--line);display:block;
  }
  .rmark.gen{
    display:grid;place-items:center;padding:0;
    font-family:var(--mono);font-size:12px;font-weight:500;
    color:rgba(255,255,255,.85);
  }
  .rinfo{min-width:0}
  .row:last-child{border-bottom:none}
  .row:hover{background:var(--surface)}
  .rank{font-family:var(--mono);font-size:13px;color:var(--fg-3)}
  .row.top .rank{color:var(--green)}
  .rname{font-size:14.5px;font-weight:500}
  .rsub{font-family:var(--mono);font-size:11.5px;color:var(--fg-3);margin-top:3px}
  .rstat{font-family:var(--mono);font-size:13px;color:var(--fg-2);text-align:right}
  .rstat b{color:var(--fg);font-weight:500}

  /* ---------- builder ---------- */
  .builder{
    height:100vh;padding-top:64px;
    display:grid;grid-template-columns:340px 1fr 300px;
    position:relative;z-index:2;
    background:var(--bg);
  }
  .pane{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
  .pane:last-child{border-right:none;border-left:1px solid var(--line)}
  .ptitle{
    height:44px;flex:none;padding:0 16px;
    display:flex;align-items:center;gap:8px;
    border-bottom:1px solid var(--line);
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--fg-3);
  }
  .ptitle .right{margin-left:auto;display:flex;gap:6px}

  .build-back-btn{
    position:fixed;top:78px;left:20px;z-index:50;
    display:flex;align-items:center;gap:7px;
    padding:10px 16px;border-radius:11px;
    background:rgba(10,10,10,.78);backdrop-filter:blur(10px);
    border:1px solid var(--line-2);
    color:var(--fg);font-size:14px;font-weight:500;
    cursor:pointer;transition:background .2s,border-color .2s;
  }
  .build-back-btn:hover{background:rgba(10,10,10,.92);border-color:var(--line)}
  @media(max-width:860px){
    .build-back-btn{top:72px;left:14px;padding:9px 14px;font-size:13.5px}
  }

  /* chat */
  .chat{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
  .msg{font-size:13.5px;line-height:1.6}
  .msg .who{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--fg-3);margin-bottom:6px;
  }
  .msg.u .bubble{background:var(--card);border:1px solid var(--line);
    padding:11px 13px;border-radius:10px;color:var(--fg)}
  .msg.a .bubble{color:var(--fg-2)}
  .msg.a.err .who{color:#FF4D4D}
  .msg.a.err .bubble{color:#FF8080}
  .thinking{display:flex;align-items:center;gap:8px;color:var(--fg-3);font-size:13px}
  .spin{
    width:12px;height:12px;border:1.5px solid var(--line-2);
    border-top-color:var(--green);border-radius:99px;
    animation:sp .7s linear infinite;flex:none;
  }
  @keyframes sp{to{transform:rotate(360deg)}}
  .composer{
    flex:none;border-top:1px solid var(--line);padding:12px;
  }
  .cbox{
    background:var(--card);border:1px solid var(--line);border-radius:11px;
    padding:11px 12px;transition:border-color .2s;
  }
  .cbox:focus-within{border-color:rgba(204,255,0,.35)}
  .cbox textarea{width:100%;resize:none;font-size:13.5px;line-height:1.5;min-height:56px}
  .cbox textarea::placeholder{color:var(--fg-3)}
  .crow{display:flex;align-items:center;margin-top:8px;gap:8px}
  .hint{font-family:var(--mono);font-size:10.5px;color:var(--fg-3);margin-right:auto}

  /* preview */
  .pvtop{
    height:46px;flex:none;padding:0 12px;
    display:flex;align-items:center;gap:8px;
    border-bottom:1px solid var(--line);
  }
  .seg{
    display:flex;gap:2px;
    background:var(--surface);border:1px solid var(--line);
    border-radius:9px;padding:3px;
  }
  .seg button{
    height:24px;padding:0 12px;border-radius:6px;
    font-size:11.5px;font-weight:500;line-height:1;
    color:var(--fg-3);
    transition:background .18s, color .18s;
  }
  .seg button:hover{color:var(--fg-2)}
  .seg button.on{background:var(--onyx);color:var(--fg)}
  .pvright{margin-left:auto;display:flex;gap:6px;align-items:center}

  .stage{
    flex:1;min-height:0;
    display:flex;align-items:stretch;justify-content:center;
    padding:20px;overflow:hidden;
    background:
      linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px) 0 0/26px 26px,
      linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px) 0 0/26px 26px,
      var(--bg);
  }
  .frame{
    width:100%;max-width:100%;
    display:flex;flex-direction:column;
    background:#0A0A0A;
    border:1px solid var(--line);border-radius:12px;
    overflow:hidden;
    transition:max-width .4s var(--ease);
    box-shadow:0 20px 60px rgba(0,0,0,.55);
  }
  .frame.tablet{max-width:768px}
  .frame.mobile{max-width:390px}
  .frame iframe{
    flex:1;width:100%;border:none;display:block;background:#070707;
  }

  /* The empty state centres inside the frame instead of pinning to the top,
     which is what made the panel look like it had lost its content. */
  .blank{
    flex:1;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    text-align:center;padding:32px;color:var(--fg-3);
  }
  .blank .mark{
    width:42px;height:42px;border-radius:12px;
    margin:0 0 20px;opacity:.9;
  }
  .blank .mark svg{width:26px;height:26px}
  .blank h3{
    font-size:16px;color:var(--fg);font-weight:600;
    letter-spacing:-.01em;margin-bottom:8px;
  }
  .blank p{font-size:13.5px;line-height:1.6;max-width:30ch}

  /* ---------- live code stream ----------
     Reads as a file being written: a header bar with the filename and a
     growing byte count, then the source itself scrolling under a caret. */
  .writing{
    flex:1;min-height:0;
    display:flex;flex-direction:column;
  }
  .wtop{
    flex:none;height:38px;padding:0 14px;
    display:flex;align-items:center;gap:10px;
    border-bottom:1px solid var(--line);
    background:var(--surface);
  }
  .wtop .spin{width:11px;height:11px;border-width:1.5px}
  .wname{
    font-family:var(--mono);font-size:12px;color:var(--fg-2);
  }
  .wsize{
    margin-left:auto;
    font-family:var(--mono);font-size:11px;color:var(--green);
  }
  .wtoggle{
    font-family:var(--mono);font-size:10.5px;color:var(--fg-3);
    background:none;border:1px solid var(--line);border-radius:6px;
    padding:3px 8px;cursor:pointer;transition:color .15s,border-color .15s;
  }
  .wtoggle:hover{color:var(--fg-2);border-color:var(--fg-3)}
  /* the plain-words status is the main thing while building */
  .wstage{
    flex:1;min-height:0;
    display:flex;align-items:center;justify-content:center;
    padding:32px 24px;text-align:center;
    font-family:var(--mono);font-size:15px;line-height:1.5;
    color:var(--fg-2);letter-spacing:-0.01em;
  }
  /* code hidden by default — the toggle reveals it */
  .writing .wcode{display:none}
  .writing.showcode .wstage{
    flex:none;padding:16px 24px;font-size:12px;color:var(--fg-3);
    border-bottom:1px solid var(--line);
  }
  .writing.showcode .wcode{display:block}
  .writing.live .wstage{display:none}
  .writing.live .wcode{display:none}
  .wlive{
    flex:1;min-height:0;width:100%;height:100%;border:0;display:block;
    background:#fff;
  }
  .wlive{
    flex:1;min-height:0;width:100%;border:0;
    border-top:1px solid var(--line);background:#000;
  }
  .wcode{
    flex:1;min-height:0;overflow:auto;
    margin:0;padding:16px 18px;
    font-family:var(--mono);font-size:11.5px;line-height:1.65;
    color:var(--fg-3);
    white-space:pre-wrap;word-break:break-word;
    scroll-behavior:auto;
  }
  /* the most recent lines are the interesting ones — fade the history out */
  .wcode code{
    display:block;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 90px);
            mask-image:linear-gradient(to bottom,transparent,#000 90px);
  }
  .caret{
    display:inline-block;width:7px;height:13px;
    background:var(--green);vertical-align:-2px;margin-left:1px;
    animation:blink 1.1s step-end infinite;
  }
  @keyframes blink{50%{opacity:0}}
  .wcode::-webkit-scrollbar{width:8px}
  .wcode::-webkit-scrollbar-thumb{background:#1E1E1E;border-radius:8px}

  /* right rail */
  .rail{flex:1;overflow-y:auto;padding:16px}
  .file{
    display:flex;align-items:center;gap:9px;
    height:38px;padding:0 11px;border-radius:9px;
    font-family:var(--mono);font-size:12px;color:var(--fg-2);
    border:1px solid var(--line);background:var(--card);
  }
  .file .sz{margin-left:auto;color:var(--fg-3);font-size:11px}
  .sect{margin-top:22px}
  .sect .lbl{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--fg-3);margin-bottom:10px;
  }
  .logs{
    font-family:var(--mono);font-size:11.5px;line-height:1.7;
    color:var(--fg-3);max-height:200px;overflow-y:auto;
  }
  .logs div{padding:2px 0}
  .logs .ok{color:var(--green)}
  .logs .bad{color:#FF6B6B}
  .actions{
    flex:none;border-top:1px solid var(--line);padding:12px;
    display:flex;flex-direction:column;gap:8px;
  }
  .actions .btn{width:100%}
  .durl{
    font-family:var(--mono);font-size:11px;color:var(--green);
    padding:9px 10px;border-radius:8px;background:var(--green-dim);
    border:1px solid rgba(204,255,0,.18);
    word-break:break-all;text-align:center;
  }

  /* ---------- modal ---------- */
  .veil{
    position:fixed;inset:0;z-index:200;
    background:rgba(5,5,5,.8);backdrop-filter:blur(8px);
    display:none;place-items:center;padding:24px;
  }
  .veil.on{display:grid}
  .modal{
    width:100%;max-width:460px;
    max-height:86vh;overflow-y:auto;
    background:var(--card);border:1px solid var(--line);
    border-radius:18px;padding:28px;
    animation:rise .32s var(--ease);
  }
  .modal::-webkit-scrollbar{width:8px}
  .modal::-webkit-scrollbar-thumb{background:#222;border-radius:8px;border:2px solid var(--card)}

  /* "optional" is doing real work here — it tells you what you can skip,
     which is the difference between a form you fill in and one you abandon. */
  .opt{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--fg-3);
    padding:2px 5px;border-radius:4px;background:var(--surface);
    border:1px solid var(--line);margin-left:6px;
  }

  /* ---------- cover dropzone ----------
     Named .dz, not .drop — the navbar dropdown already owns .drop, and it
     carries opacity:0, which is what was making this box render empty. */
  .dz{
    position:relative;
    height:132px;border-radius:11px;
    border:1px dashed var(--line-2);background:var(--surface);
    display:grid;place-items:center;overflow:hidden;
    cursor:pointer;transition:border-color .2s, background .2s;
  }
  .dz:hover,.dz.over{border-color:rgba(204,255,0,.5);background:var(--onyx)}
  .dz.has{border-style:solid;border-color:var(--line)}
  .dzin{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    text-align:center;padding:0 16px;pointer-events:none;
  }
  .dzin .di{font-size:19px;color:var(--fg-3);line-height:1}
  .dzin .dt{font-size:13px;color:var(--fg-2)}
  .dzin .dh{font-family:var(--mono);font-size:10.5px;color:var(--fg-3)}
  .dz img{
    width:100%;height:100%;object-fit:contain;display:block;background:var(--onyx);
  }
  .clr{
    position:absolute;top:8px;right:8px;
    height:26px;padding:0 10px;border-radius:7px;
    background:rgba(7,7,7,.82);backdrop-filter:blur(6px);
    border:1px solid var(--line-2);
    font-size:11.5px;color:var(--fg);
  }
  .clr:hover{background:rgba(7,7,7,.95)}
  .dz.up{pointer-events:none}
  .dz.up::after{
    content:'Uploading…';
    position:absolute;inset:0;display:grid;place-items:center;
    background:rgba(7,7,7,.72);
    font-family:var(--mono);font-size:11.5px;color:var(--green);
  }

  /* ---------- collapsed extras ---------- */
  .more{
    display:flex;align-items:center;gap:2px;width:100%;
    margin-top:4px;padding:11px 0;
    font-size:13.5px;color:var(--fg-2);
    border-top:1px solid var(--line);
    transition:color .2s;
  }
  .more:hover{color:var(--fg)}
  .more .chev{margin-left:auto;color:var(--fg-3);transition:transform .24s var(--ease)}
  .more.open .chev{transform:rotate(180deg)}
  .extra{
    display:none;
    padding-top:4px;
  }
  .extra.open{display:block}
  @keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}}
  .modal h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
  .modal>p{font-size:13.5px;color:var(--fg-2);line-height:1.6;margin-bottom:22px}
  .field{margin-bottom:14px}
  .field label{
    display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--fg-3);margin-bottom:7px;
  }
  .field input,.field textarea,.field select{
    width:100%;background:var(--surface);border:1px solid var(--line);
    border-radius:9px;padding:10px 12px;font-size:13.5px;
    transition:border-color .2s;
  }
  .field select{cursor:pointer;appearance:none}
  .field select option{background:var(--surface)}
  .field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(204,255,0,.35)}
  .field textarea{resize:vertical;min-height:66px;line-height:1.5}

  /* A native <select> hands its dropdown to the OS, which is why the options
     came back Windows-blue. This is a plain listbox, so it inherits the page. */
  .pick{position:relative}
  .picked{
    width:100%;height:40px;padding:0 12px;
    display:flex;align-items:center;gap:8px;
    background:var(--surface);border:1px solid var(--line);
    border-radius:9px;font-size:13.5px;color:var(--fg);
    transition:border-color .2s;
  }
  .picked:hover{border-color:var(--line-2)}
  .pick.open .picked{border-color:rgba(204,255,0,.45)}
  .chev{margin-left:auto;color:var(--fg-3);transition:transform .22s var(--ease)}
  .pick.open .chev{transform:rotate(180deg)}
  .opts{
    position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:10;
    background:var(--card);border:1px solid var(--line);
    border-radius:10px;padding:4px;overflow:hidden;
    box-shadow:0 16px 44px rgba(0,0,0,.7);
    opacity:0;transform:translateY(-4px);pointer-events:none;
    transition:opacity .16s var(--ease), transform .2s var(--ease);
  }
  .pick.open .opts{opacity:1;transform:none;pointer-events:auto}
  .opts button{
    display:block;width:100%;text-align:left;
    padding:9px 10px;border-radius:7px;
    font-size:13.5px;color:var(--fg-2);
    transition:background .15s, color .15s;
  }
  .opts button:hover{background:var(--onyx);color:var(--fg)}
  .opts button[aria-selected="true"]{color:var(--green)}
  .mrow{display:flex;gap:8px;margin-top:22px}
  .mrow .btn{flex:1}

  /* ---------- toast ---------- */
  #toasts{position:fixed;bottom:22px;right:22px;z-index:300;
    display:flex;flex-direction:column;gap:8px;align-items:flex-end}
  .toast{
    display:flex;align-items:center;gap:10px;
    background:var(--card);border:1px solid var(--line);
    border-radius:11px;padding:12px 16px;font-size:13.5px;
    box-shadow:0 14px 40px rgba(0,0,0,.5);
    animation:slide .3s var(--ease);
  }
  @keyframes slide{from{opacity:0;transform:translateX(16px)}}
  .toast .dot{animation:none;box-shadow:none}
  .toast.bad .dot{background:#FF4D4D}

  /* ---------- footer ---------- */
  footer{
    position:relative;z-index:1;
    border-top:1px solid var(--line);
    padding:56px 28px 40px;
  }
  .fin{max-width:1180px;margin:0 auto;display:flex;gap:60px;flex-wrap:wrap}
  .fbrand{max-width:260px}
  .fbrand p{margin-top:14px;font-size:13px;color:var(--fg-3);line-height:1.6}
  .fcols{display:flex;gap:60px;margin-left:auto;flex-wrap:wrap}
  .fcol .lbl{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--fg-3);margin-bottom:14px;
  }
  .fcol a,.fcol button{display:block;font-size:13.5px;color:var(--fg-2);margin-bottom:10px;
    transition:color .2s;text-align:left}
  .fcol a:hover,.fcol button:hover{color:var(--fg)}
  .fbot{
    max-width:1180px;margin:44px auto 0;padding-top:24px;
    border-top:1px solid var(--line);
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-family:var(--mono);font-size:11.5px;color:var(--fg-3);
  }

  /* ---------- 3D type ----------
     Characters are split into spans and flipped in on the Z axis.
     The parent holds the perspective so the rotation reads as depth,
     not as a flat skew. Hero also tracks the mouse. */
  .d3{
    perspective:900px;
    transform-style:preserve-3d;
  }
  .d3 .ch{
    display:inline-block;
    transform-origin:50% 50% -22px;
    transform:rotateX(-92deg) translateZ(24px);
    opacity:0;
    transition:transform .95s var(--ease), opacity .6s ease;
    will-change:transform,opacity;
  }
  .d3.in .ch{transform:none;opacity:1}
  .d3 .sp{display:inline-block;width:.28em}
  h1.d3{
    transform-style:preserve-3d;
    transition:transform .5s var(--ease);
  }
  h1.d3 em .ch{
    color:var(--green);
    text-shadow:0 0 26px rgba(204,255,0,.28);
  }

  /* ---------- reveal ---------- */
  .rv{opacity:0;transform:translateY(20px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .rv.in{opacity:1;transform:none}

  /* ---------- launchpad component styles (global, all screen sizes) ---------- */
  .lp-inputs input, .lp-inputs textarea{
    background:var(--onyx);border:1px solid var(--line);border-radius:12px;
    padding:14px 16px;font-size:15px;color:var(--fg);width:100%;
  }
  .lp-inputs input::placeholder, .lp-inputs textarea::placeholder{color:var(--fg-3)}
  .lp-inputs textarea{font-family:inherit;resize:vertical}
  #lpMainBtn{background:#5C7A0A;color:#E8F5C0}
  #lpMainBtn:hover{background:#6B8C0C}
  .lp-inputs input, .lp-inputs textarea{background:#0A0A0A}

  .lp-logo-box{
    align-self:stretch;border-radius:16px;flex:none;cursor:pointer;
    background:#0A0A0A;border:2px dashed var(--line-2);color:var(--fg-3);
    display:flex;align-items:center;justify-content:center;
    transition:border-color .18s, background .18s;
  }
  .lp-logo-box:hover{border-color:rgba(204,255,0,.55);background:rgba(204,255,0,.03)}

  .lp-chain-badge{
    display:flex;align-items:center;gap:8px;width:100%;height:52px;
    background:#0A0A0A;border:1px solid var(--line);border-radius:12px;
    padding:0 16px;font-size:14px;color:var(--fg);white-space:nowrap;box-sizing:border-box;
  }
  .lp-chain-dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}

  .lp-social-box{
    border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:24px;
  }
  .lp-social-header{
    display:flex;align-items:center;gap:10px;padding:16px;
    font-weight:600;font-size:14px;color:var(--fg);
    border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
  }
  .lp-social-box .lp-inputs{padding-top:16px}

  .lp-divider{height:1px;background:var(--line);margin:24px 0}

  .lp-inputs input:focus, .lp-inputs textarea:focus{
    outline:none;border-color:rgba(204,255,0,.18);
  }
  .lp-card :focus-visible{outline:2px solid rgba(204,255,0,.35);outline-offset:2px}
  /* ---------- responsive ---------- */
  @media(max-width:1100px){
    .builder{grid-template-columns:300px 1fr}
    .cards{grid-template-columns:repeat(3,1fr)}

    /* The rail leaves the grid and pins to the bottom of the viewport. It
       carries the only action that matters here, so it can never be the thing
       that scrolls away. */
    .pane.rail-pane{
      position:fixed;left:0;right:0;bottom:0;z-index:30;
      border:none;border-top:1px solid var(--line);
      background:var(--surface);
      flex-direction:row;align-items:stretch;
      height:auto;
    }
    .rail-pane .ptitle{display:none}
    .rail-pane .rail{
      flex:1;min-width:0;padding:10px 12px;
      display:flex;align-items:center;gap:10px;
      overflow:hidden;
    }
    .rail-pane .rail .file{flex:none;height:32px;font-size:11px}
    .rail-pane .rail .sect{margin:0;flex:1;min-width:0}
    .rail-pane .rail .sect .lbl{display:none}
    /* Only the newest line survives — a log column on a phone is a wall. */
    .rail-pane .logs{
      max-height:none;white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;
      font-size:10.5px;
    }
    .rail-pane .logs div{display:none}
    .rail-pane .logs div:last-child{display:block}
    .rail-pane .actions{
      flex:none;border:none;padding:10px 12px 10px 0;
      flex-direction:row;align-items:center;gap:8px;
    }
    .rail-pane .actions .btn{width:auto;padding:0 20px;white-space:nowrap}
    .rail-pane .durl{
      display:none!important;   /* the toast already says where it went */
    }

    /* Room for the bar, so the last message is never sitting under it. */
    .builder{padding-bottom:58px}
  }
  @media(max-width:860px){
    nav{border-bottom-color:var(--line);padding:0 14px;gap:10px}
    .navright{right:14px;gap:8px}
    #recentBtn{padding:8px 10px;font-size:12.5px}
    #cwBtn{padding:8px 12px;font-size:12.5px}
    #tokenSortTabs{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .navburger{display:flex}
    .navsearch{max-width:none;margin-left:16px}
    .lp-grid{grid-template-columns:1fr!important}
  .lp-inputs input, .lp-inputs textarea{
    background:var(--onyx);border:1px solid var(--line);border-radius:12px;
    padding:14px 16px;font-size:15px;color:var(--fg);width:100%;
  }
  .lp-inputs input::placeholder, .lp-inputs textarea::placeholder{color:var(--fg-3)}
  .lp-inputs textarea{font-family:inherit;resize:vertical}
  #lpMainBtn{background:#5C7A0A;color:#E8F5C0}
  #lpMainBtn:hover{background:#6B8C0C}
  .lp-inputs input, .lp-inputs textarea{background:#0A0A0A}

  .lp-logo-box{
    width:160px;align-self:stretch;border-radius:16px;flex:none;cursor:pointer;
    background:#0A0A0A;border:2px dashed var(--line-2);color:var(--fg-3);
    display:flex;align-items:center;justify-content:center;
    transition:border-color .18s, background .18s;
  }
  .lp-logo-box:hover{border-color:rgba(204,255,0,.55);background:rgba(204,255,0,.03)}

  .lp-chain-badge{
    display:flex;align-items:center;gap:8px;width:100%;height:52px;
    background:#0A0A0A;border:1px solid var(--line);border-radius:12px;
    padding:0 16px;font-size:14px;color:var(--fg);white-space:nowrap;box-sizing:border-box;
  }
  .lp-chain-dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}

  .lp-social-box{
    border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:24px;
  }
  .lp-social-header{
    display:flex;align-items:center;gap:10px;padding:16px;
    font-weight:600;font-size:14px;color:var(--fg);
    border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
  }
  .lp-social-box .lp-inputs{padding-top:16px}

  .lp-divider{height:1px;background:var(--line);margin:24px 0}

  .lp-inputs input, .lp-inputs textarea{background:#0A0A0A}
  .lp-inputs input:focus, .lp-inputs textarea:focus{
    outline:none;border-color:rgba(204,255,0,.18);
  }
  .lp-card :focus-visible{outline:2px solid rgba(204,255,0,.35);outline-offset:2px}
    nav{padding:0 16px;gap:12px}
    .drop{width:270px}
    .herocta{width:100%}
    .herocta .btn{flex:1;min-width:150px}
    .pipe,.grid{grid-template-columns:1fr}
    .step{border-right:none;border-bottom:1px solid var(--line)}
    .step:last-child{border-bottom:none}
    .builder{grid-template-columns:1fr;height:auto;min-height:100vh;padding-bottom:62px}
    .pane{border-right:none;border-bottom:1px solid var(--line)}
    .pane.chat-pane{height:52vh}
    .pane.pv-pane{height:60vh}
    .cards{grid-template-columns:repeat(2,1fr)}
    .row{grid-template-columns:36px 1fr auto}
    .row .rstat.hide-sm{display:none}
    .fcols{margin-left:0;gap:40px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .rv{opacity:1;transform:none}
    /* without this the split characters would stay at opacity 0 forever */
    .d3 .ch{transform:none!important;opacity:1!important}
    h1.d3{transform:none!important}
    .caret{animation:none!important;opacity:1!important}
  }

  /* === Patch 11: search position + mobile nav fix === */
  @media(min-width:861px){
    .hero-search-wrap{margin-top:195px}
  }
  @media(max-width:860px){
    .navright{position:static;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
    nav{flex-wrap:wrap;height:auto;min-height:64px;padding:10px 16px;row-gap:6px}
    .nav-logo{margin-right:0}
    .nav-logo-text{font-size:15px}
  }
  @media(max-width:480px){
    .nav-cta{padding:0 10px;font-size:11.5px;height:32px}
    #cwBtn{padding:0 10px;font-size:11.5px;height:32px}
  }
  /* === Patch 17: hero kosong kegedean sekarang headline dihapus, kompakin === */
  .hero{min-height:auto;padding:130px 56px 32px}
  .hero-search-wrap{margin-top:16px}
  #homeTokensSection{padding-top:20px}
  @media(min-width:861px){
    .hero-search-wrap{margin-top:120px}
  }
  @media(max-width:860px){
    .hero{padding:96px 20px 20px;min-height:auto}
    .hero-search-wrap{margin-top:12px}
    #homeTokensSection{padding-top:16px}
  }
  /* === Patch 18: fix gradient gelap + kompakin tab sort mobile === */
  @media(max-width:860px){
    .hero{padding-top:112px}
    .hero::after{height:70px}
  }
  @media(max-width:640px){
    #homeTokenSortTabs{gap:6px}
    #homeTokenSortTabs .pftab{padding:6px 9px;font-size:11px;gap:4px}
    #homeTokenSortTabs .pftab svg{width:11px;height:11px}
  }
  /* === Patch 19: search box hero lebih terang === */
  .hero-search-wrap .navsearch input{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18)}
  .hero-search-wrap .navsearch input::placeholder{color:rgba(255,255,255,.55)}
  .hero-search-wrap .navsearch input:focus{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);outline:none}
  /* === Patch 20: fix gradient fade juga di desktop (hero udah dikompakin semua ukuran) === */
  .hero::after{height:80px}
  /* === Patch 21: fix overlap search vs hero-stats di lebar tablet (861-1100px) === */
  @media(min-width:861px) and (max-width:1100px){
    .hero-search-wrap{max-width:280px;margin-top:70px}
  }
  /* === Patch 22: search width dihitung dinamis, gak nabrak stats di lebar berapapun === */
  @media(min-width:861px){
    .hero-search-wrap{max-width:min(460px, calc(100vw - 532px));margin-top:70px}
  }


/* === Token Terminal: mobile responsive (chart + swap tidak lagi ke-zoom/kepotong) === */
@media(max-width:860px){
  #v-tokenTerminal > section{padding-top:80px !important;padding-left:16px;padding-right:16px}
  .tt-header-grid{grid-template-columns:1fr !important;gap:18px !important}
  .tt-main-grid{grid-template-columns:1fr !important;gap:14px !important}
  .tt-stat-grid{grid-template-columns:repeat(2,1fr) !important}
  #ttChartWrap{height:260px !important}
}
@media(max-width:480px){
  .tt-header-grid > div:first-child{min-width:0 !important}
}

/* === Launch flow: loading spinner + success modal === */
.lp-spinner{
  display:inline-block;width:13px;height:13px;
  border:2px solid rgba(255,255,255,.15);border-top-color:var(--green);
  border-radius:50%;
  animation:lpSpin .7s linear infinite;
  vertical-align:middle;margin-right:7px;
}
@keyframes lpSpin{to{transform:rotate(360deg)}}