@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --ground:#04100b; --deep:#082a1d; --accent:#5ee3a4; --accent-2:#8ef0c0;
  --paper:#f5fbf7; --text:rgba(245,251,247,.86); --mid:rgba(245,251,247,.6); --dim:rgba(245,251,247,.42);
  --line:rgba(94,227,164,.22); --glass:rgba(94,227,164,.06); --chip:rgba(245,251,247,.08); --chip-hi:rgba(245,251,247,.16);
  --display:"Inter Tight",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:62.5%;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font:400 1.6rem/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:var(--ground) radial-gradient(120% 60% at 50% 0%,#0a3322 0%,var(--ground) 60%) no-repeat}
a{color:inherit}
::selection{background:var(--accent);color:var(--ground)}
.wrap{max-width:128rem;margin:0 auto;padding:0 4rem}

.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:2.4rem 4rem;background:linear-gradient(rgba(4,16,11,.85),rgba(4,16,11,0))}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none;font:400 2.4rem/1 var(--display);color:var(--paper);letter-spacing:-.01em;position:relative;z-index:31}
.mark{width:2.4rem;height:2.4rem;display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.mark i{border-radius:.4rem;background:var(--paper)}
.mark i:nth-child(4){background:var(--accent)}
.menu{appearance:none;background:none;border:0;cursor:pointer;width:4.4rem;height:4.4rem;position:relative;z-index:31}
.menu i{position:absolute;left:.8rem;right:.8rem;height:2px;background:var(--paper);border-radius:2px;transition:transform .25s,top .25s}
.menu i:first-child{top:1.7rem}.menu i:last-child{top:2.5rem}
.menu[aria-expanded="true"] i:first-child{top:2.1rem;transform:rotate(45deg)}
.menu[aria-expanded="true"] i:last-child{top:2.1rem;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:29;background:rgba(4,16,11,.97);display:flex;flex-direction:column;justify-content:center;padding:0 4rem;gap:1.2rem;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer.is-open{opacity:1;pointer-events:auto}
.drawer a{font:300 clamp(4rem,7vw,7.2rem)/1.05 var(--display);text-decoration:none;color:var(--paper);letter-spacing:-.02em}
.drawer a:hover{color:var(--accent)}

.pill{display:inline-flex;align-items:center;gap:.8rem;min-height:4.8rem;padding:0 2.4rem;border-radius:99rem;background:var(--chip);color:var(--paper);text-decoration:none;font:500 1.5rem/1 var(--body);border:1px solid rgba(245,251,247,.12);cursor:pointer}
.pill:hover{background:var(--chip-hi)}
.pill.solid{background:var(--accent);color:var(--ground);border-color:var(--accent)}
.pill.solid:hover{background:var(--accent-2)}
.pill[disabled]{background:var(--chip);color:var(--dim);border-color:transparent;cursor:not-allowed}

.hero{position:relative;height:100svh;min-height:64rem;max-height:120rem;display:flex;align-items:center;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap{position:relative;z-index:1;width:100%}
.h1{margin:0;font:400 clamp(5.2rem,9vw,11.2rem)/1 var(--display);letter-spacing:-.035em;color:var(--paper)}
.roll{display:block;height:1.1em;overflow:hidden}
.roll span{display:block;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.roll b{display:block;height:1.1em;font-weight:400;color:var(--accent);white-space:nowrap}
.hero .lede{margin:3.2rem 0 0;max-width:46rem;font-size:1.9rem;line-height:1.45;color:var(--mid)}
.hero .cta{display:flex;gap:1.2rem;margin-top:3.6rem;flex-wrap:wrap}

.statement{padding:16rem 0 10rem}
.statement h2{margin:0;font:400 clamp(4.4rem,7vw,8.8rem)/1 var(--display);letter-spacing:-.03em;color:var(--paper);max-width:12em}
.statement h2 em{font-style:normal;color:var(--accent)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:6.4rem;align-items:start}
.split p{margin:0;font:400 2.6rem/1.2 var(--display);color:var(--paper);letter-spacing:-.01em;max-width:14em}
.split p.soft{font:400 1.8rem/1.5 var(--body);color:var(--mid);max-width:30em;letter-spacing:0}

.demo{padding:2rem 0 14rem}
.demo-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2.4rem;margin-bottom:3.2rem;flex-wrap:wrap}
.demo-head h3{margin:0;font:400 4rem/1.02 var(--display);letter-spacing:-.02em;color:var(--paper)}
.count{display:flex;align-items:center;gap:1.2rem}
.count strong{font:300 8rem/1 var(--display);color:var(--paper);letter-spacing:-.04em}
.count span{font-size:1.3rem;color:var(--dim);line-height:1.3}
.stage{background:linear-gradient(180deg,rgba(94,227,164,.07),rgba(94,227,164,.02));border:1px solid var(--line);border-radius:2.4rem;padding:3.2rem 3.2rem 2.4rem}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;margin-bottom:2rem;color:var(--dim);font-size:1.4rem}
.dots{display:flex;gap:.8rem}
.dots button{width:3.6rem;height:.4rem;border:0;border-radius:99rem;background:rgba(245,251,247,.18);padding:0;cursor:pointer}
.dots button[aria-current="true"]{background:var(--accent)}
.rule{font:400 clamp(2.6rem,4vw,4.4rem)/1.5 var(--display);letter-spacing:-.015em;color:var(--mid);min-height:2.9em;transition:opacity .25s}
.rule.fade{opacity:0}
.rule .k{color:var(--paper)}
.chip{appearance:none;-webkit-appearance:none;font:inherit;letter-spacing:inherit;color:var(--paper);background:var(--chip);border:1px solid rgba(245,251,247,.1);border-radius:99rem;padding:0 .45em;margin:0 .06em;line-height:1.3;height:1.3em;vertical-align:baseline;cursor:pointer;text-align:center;outline:none}
.chip:hover{background:var(--chip-hi)}
.chip:focus-visible{border-color:var(--accent)}
select.chip option{background:#08221a;color:#fff;font-size:1.6rem}
.chip.box{display:inline-flex;align-items:center;cursor:text;padding:0 .45em}
input.bare{appearance:none;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;padding:0;margin:0;outline:none;height:1.3em;text-align:center;min-width:.6em}
.chip.box:focus-within{border-color:var(--accent)}
.stage-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.6rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line);color:var(--dim);font-size:1.4rem}

.layers{padding:12rem 0}
.layers h2,.sec h2,.steps-sec h2{margin:0 0 2rem;font:400 clamp(4rem,6vw,7.2rem)/1.02 var(--display);letter-spacing:-.03em;color:var(--paper);max-width:13em}
.layers .intro,.steps-sec .intro{color:var(--mid);font-size:1.8rem;max-width:44rem;margin:0 0 6.4rem}
.layers-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1.6rem;padding:2.4rem 0;font:500 1.4rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.acc summary::-webkit-details-marker{display:none}
.ic{width:1.4rem;height:1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:2px;flex:none}
.ic i{background:var(--accent);border-radius:1px}
.ic i.o{background:transparent}
.pm{margin-left:auto;flex:none;width:1.8rem;height:1.8rem;position:relative}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--paper)}
.pm::after{transform:rotate(90deg);transition:transform .25s}
details[open] > summary .pm::after{transform:rotate(0)}
.acc .body{padding:0 0 2.8rem;color:var(--text);font-size:1.7rem;max-width:52rem}
.acc .body p{margin:0 0 1.6rem}
.acc .body ul{margin:0;padding:0;list-style:none}
.acc .body li::before{content:"– ";color:var(--accent)}
.object{aspect-ratio:1;max-width:52rem;justify-self:center;width:100%}
.object canvas{width:100%;height:100%;display:block}

.flow{padding:2rem 0 12rem}
.flow .row{display:flex;justify-content:space-between;align-items:center;gap:2.4rem;padding:3.6rem 0;border-bottom:1px solid var(--line);font:400 clamp(2.6rem,3.6vw,4.4rem)/1.05 var(--display);letter-spacing:-.02em;text-transform:uppercase;color:var(--paper)}
.flow .row small{display:block;margin-top:1.2rem;font:400 1.5rem/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--mid)}
.chev{flex:none;width:1.4rem;height:1.4rem;border-right:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg)}
.every{display:flex;align-items:center;gap:2.4rem;margin-top:8rem;font:400 clamp(2.6rem,3.6vw,4.4rem)/1 var(--display);text-transform:uppercase;color:var(--paper);flex-wrap:wrap}
.every .plus{color:var(--accent);font-weight:300}
.marquee{overflow:hidden;margin-top:3.2rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;gap:1.2rem;width:max-content;animation:slide 50s linear infinite}
.marquee span{padding:1.2rem 2rem;border:1px solid var(--line);border-radius:99rem;font:400 1.5rem/1 var(--body);color:var(--paper);background:var(--glass);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

.sec{padding:12rem 0}
.eyebrow{font:500 1.3rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 1.6rem}
.sec .lead{font-size:2rem;line-height:1.45;color:var(--paper);max-width:62rem;margin:0 0 6.4rem}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0 4rem}
.nums > div{border-top:1px solid var(--line);padding:2.4rem 0 4.8rem}
.nums .l{font:500 1.3rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.nums .v{font:300 clamp(5.6rem,7vw,8.8rem)/1 var(--display);letter-spacing:-.04em;color:var(--paper);margin:2.4rem 0 1.6rem}
.nums .d{font-size:1.5rem;color:var(--mid);max-width:26rem}
.fine{font-size:1.4rem;color:var(--dim);margin-top:1.2rem}

.steps-sec{padding:12rem 0;overflow:hidden}
.steps{display:flex;gap:2.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:2rem 4rem;margin:0 -4rem;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{flex:0 0 min(38rem,80vw);scroll-snap-align:start}
.step:nth-child(even){margin-top:5.6rem}
.card{position:relative;aspect-ratio:1.08;border-radius:2rem;overflow:hidden;background:linear-gradient(160deg,#0f4a33 0%,#082a1d 55%,#04100b 100%);border:1px solid var(--line)}
.card .n{position:absolute;left:2.4rem;top:2rem;font:300 9.6rem/1 var(--display);color:var(--paper);letter-spacing:-.04em;text-shadow:0 0 30px rgba(94,227,164,.35)}
.card .ui{position:absolute;right:-1.2rem;bottom:-1.2rem;width:68%;background:var(--paper);color:#06150f;border-radius:1.6rem;padding:1.6rem 1.6rem 2.4rem;font-size:1.25rem;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.ui .t{font-weight:500;font-size:1.3rem;margin-bottom:1rem;text-align:center}
.ui .r{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:1rem;background:#e4f2ea;margin-top:.6rem}
.ui .r b{font-weight:500}
.ui .on{background:#0f4a33;color:var(--paper)}
.ui .tag{font-size:1.1rem;padding:.3rem .8rem;border-radius:99rem;background:var(--accent);color:var(--ground);white-space:nowrap}
.step h3{margin:2.4rem 0 0;padding-bottom:2rem;border-bottom:1px solid var(--line);font:400 2.6rem/1.15 var(--display);color:var(--paper);letter-spacing:-.01em}
.step h3 sup{font:400 1.2rem/1 var(--body);color:var(--accent);margin-left:.6rem}
.step p{color:var(--mid);font-size:1.5rem;margin:1.6rem 0 0}
.steps-nav{display:flex;gap:1rem;margin-top:3.2rem}
.steps-nav button{width:4.8rem;height:4.8rem;border-radius:50%;border:1px solid var(--line);background:none;color:var(--paper);cursor:pointer;font-size:1.8rem}
.steps-nav button:hover{background:var(--glass)}

.wall-head{display:flex;align-items:center;gap:2rem;margin:0 0 6rem}
.wall-head strong{font:300 9.6rem/1 var(--display);letter-spacing:-.04em;color:var(--paper)}
.wall-head span{color:var(--mid);font-size:1.5rem;line-height:1.3}
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem}
.tile{aspect-ratio:1;border-radius:1.8rem;border:1px solid var(--line);background:linear-gradient(160deg,rgba(94,227,164,.12),rgba(94,227,164,.02));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem}
.tile b{font:500 2rem/1 var(--mono);color:var(--paper)}
.tile span{font-size:1.2rem;color:var(--dim);text-align:center;padding:0 .8rem}

.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:2.4rem;padding:3.2rem 0;font:400 clamp(2rem,2.6vw,3rem)/1.15 var(--display);text-transform:uppercase;color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq .body{color:var(--text);font-size:1.7rem;max-width:74rem;padding:0 0 3.2rem;margin:0}

.final{padding:14rem 0 10rem}
.final .eyebrow{color:var(--mid)}
.final h2{margin:0;font:400 clamp(4.4rem,7vw,8.8rem)/1 var(--display);letter-spacing:-.03em;color:var(--paper)}
.final h2 .plus{color:var(--accent);font-weight:300}
.final p{margin:4rem 0 0;font:400 2.6rem/1.25 var(--display);color:var(--paper);max-width:26em}
.final p a{color:var(--accent);text-underline-offset:.2em}
footer{border-top:1px solid var(--line);padding:6.4rem 0 4.8rem;background:rgba(0,0,0,.25);color:var(--mid);font-size:1.4rem}
.foot{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem}
.foot p{max-width:32rem;margin:2rem 0 0}
.foot nav{display:flex;gap:2.4rem;margin-top:3.2rem;text-transform:uppercase;letter-spacing:.06em;font-size:1.3rem;flex-wrap:wrap}
.foot nav a{text-decoration:none;color:var(--paper)}
.foot nav a:hover{color:var(--accent)}
.foot .label{text-transform:uppercase;letter-spacing:.08em;font-size:1.2rem;color:var(--dim);margin:0 0 1.2rem}
.status{display:inline-flex;align-items:center;gap:1rem;padding:1.2rem 1.8rem;border-radius:99rem;background:var(--chip);font:400 1.4rem/1.3 var(--body);color:var(--text)}
.status i{width:.8rem;height:.8rem;border-radius:50%;background:var(--dim);flex:none}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.6rem;margin-top:4.8rem;padding-top:2.4rem;border-top:1px solid var(--line);color:var(--dim)}

.rv{opacity:0;transform:translateY(2rem);transition:opacity .7s ease,transform .7s ease}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.marquee .track{animation:none}.roll span{transition:none}}

.build{padding:14rem 0 8rem}
.build .h1{font-size:clamp(4.8rem,8vw,8.8rem)}
.build .lede{margin:2.4rem 0 4rem;max-width:52rem;color:var(--mid);font-size:1.9rem}
.panel{background:var(--glass);border:1px solid var(--line);border-radius:2.4rem;padding:3.2rem;margin-top:1.6rem}
.tools{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.tools .pill{min-height:4rem;font-size:1.4rem;padding:0 1.6rem}
select.pill{appearance:none;-webkit-appearance:none;max-width:34rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
select.pill option{background:#08221a;color:#fff}
.warn{margin:1.6rem 0 0;padding:0;list-style:none;color:var(--text);font-size:1.5rem}
.warn li{padding:.4rem 0 .4rem 2rem;position:relative}
.warn li::before{content:"";position:absolute;left:0;top:1.2rem;width:.8rem;height:.8rem;border-radius:50%;border:1.5px solid var(--accent)}
.stored{width:100%;border-collapse:collapse;font-size:1.5rem}
.stored th{width:24rem;text-align:left;font-weight:400;color:var(--dim);padding:1.4rem 1.6rem 1.4rem 0;vertical-align:top;border-top:1px solid var(--line)}
.stored td{padding:1.4rem 0;border-top:1px solid var(--line);color:var(--text)}
.stored td .m{font-family:var(--mono);font-size:1.4rem;color:var(--accent)}
.panel h3{margin:0 0 1.6rem;font:400 2.6rem/1.2 var(--display);color:var(--paper)}
.note{color:var(--dim);font-size:1.4rem;margin:1.6rem 0 0}
.actions{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:2.4rem}
.x{appearance:none;border:1px solid rgba(245,251,247,.2);background:none;color:var(--mid);width:1.1em;height:1.1em;border-radius:50%;font:400 .6em/1 var(--body);cursor:pointer;vertical-align:.12em;padding:0;margin-left:.15em}
.x:hover{background:var(--accent);color:var(--ground);border-color:var(--accent)}

@media (max-width:900px){
  .layers-grid,.split,.foot{grid-template-columns:1fr}
  .object{order:-1;max-width:36rem}
  .nums{grid-template-columns:1fr 1fr}
  .wall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .wrap{padding:0 1.6rem}
  .top{padding:1.6rem}
  .drawer{padding:0 1.6rem}
  .steps{padding:2rem 1.6rem;margin:0 -1.6rem}
  .step:nth-child(even){margin-top:0}
  .stage{padding:2.2rem 1.8rem 1.8rem;border-radius:2rem}
  .nums{grid-template-columns:1fr}
  .statement{padding:10rem 0 6rem}
  .layers,.sec,.steps-sec{padding:8rem 0}
  .split p{font-size:2.2rem}
  .wall-head strong{font-size:7.2rem}
  .stored th{width:auto;display:block;border:0;padding-bottom:0}
  .stored td{display:block;border:0;padding-top:.4rem}
  .stored tr{display:block;border-top:1px solid var(--line);padding:.6rem 0}
  .panel{padding:2.2rem 1.8rem}
}

/* composer: WHEN / AND / THEN rows, words you can change are underlined */
.rule.composer{display:flex;flex-direction:column;min-height:0;font-size:inherit;line-height:inherit}
.line{display:grid;grid-template-columns:8.8rem 1fr auto;align-items:baseline;gap:2.4rem;padding:2rem 0;border-top:1px solid var(--line)}
.line:first-child{border-top:0;padding-top:.4rem}
.line.is-then{padding-bottom:.4rem}
.lab{font:500 1.2rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);transform:translateY(-.4rem)}
.is-then .lab{color:var(--paper)}
.clause{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.32em;row-gap:.35em;font:400 clamp(2.6rem,3.4vw,3.8rem)/1.2 var(--display);letter-spacing:-.02em;color:var(--dim)}
.clause .w{color:var(--dim)}
.tok{position:relative;display:inline-flex;align-items:baseline;color:var(--paper);background-image:linear-gradient(90deg,rgba(94,227,164,.55) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;background-position:0 100%;padding-bottom:.08em;cursor:pointer;transition:color .15s}
.tok:hover,.tok:focus-within{background-image:linear-gradient(var(--accent),var(--accent));color:#fff}
.tok select{appearance:none;-webkit-appearance:none;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;padding:0 .5em 0 0;margin:0;cursor:pointer;outline:none;height:auto;line-height:inherit}
.tok select:disabled{cursor:default;opacity:1;color:inherit}
.tok select option{background:#08221a;color:#fff;font:400 1.6rem var(--body)}
.tok:not(.num)::after{content:"";position:absolute;right:.06em;top:52%;width:.2em;height:.2em;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-80%) rotate(45deg);pointer-events:none}
.tok.num{cursor:text}
.tok.num input{appearance:none;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;padding:0;margin:0;outline:none;min-width:.5em;line-height:inherit}
.rm{appearance:none;align-self:center;width:3.2rem;height:3.2rem;border-radius:50%;border:1px solid var(--line);background:none;color:var(--mid);font:400 1.8rem/1 var(--body);cursor:pointer}
.rm:hover{background:var(--glass);color:var(--paper)}

/* builder tools: quiet, secondary to the sentence */
.tools{margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line);gap:1rem;align-items:center}
.tools .pill{min-height:3.8rem;font-size:1.4rem;padding:0 1.6rem;background:none;border:1px dashed rgba(94,227,164,.35);color:var(--text)}
.tools .pill:hover{border-style:solid;border-color:var(--accent);color:var(--paper);background:var(--glass)}
.tools .pill:disabled{opacity:.4;cursor:not-allowed}
.tools select.pill{border-style:solid;border-color:var(--line);padding-right:3.6rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235ee3a4' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 1.6rem center;margin-left:auto;max-width:30rem}

@media (max-width:600px){
  .line{grid-template-columns:1fr auto;gap:1rem 1.6rem;padding:1.6rem 0}
  .lab{grid-column:1/-1;transform:none}
  .clause{grid-column:1;font-size:2.6rem}
  .rm{grid-column:2;grid-row:2}
  .tools select.pill{margin-left:0;max-width:100%}
}

/* picker tokens */
.tok.pick{appearance:none;-webkit-appearance:none;background-color:transparent;border:0;margin:0;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(--paper);padding:0 .62em .08em 0;cursor:pointer;display:inline-flex;align-items:center;gap:.28em}
.tok.pick:disabled{cursor:default}
.tok.pick:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:.2em}
.tok.pick[aria-expanded="true"]{color:#fff;background-image:linear-gradient(var(--accent),var(--accent))}
.tok.is-asset .logo{width:.82em;height:.82em;border-radius:50%;background:#fff;object-fit:contain;padding:.07em;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.2)}

/* the popover */
.picker{position:fixed;z-index:60;width:32rem;max-height:min(52rem,70vh);display:flex;flex-direction:column;background:#0a1f16;border:1px solid rgba(94,227,164,.28);border-radius:1.8rem;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);overflow:hidden;animation:pk-in .14s ease-out}
.picker.is-assets{width:38rem}
@keyframes pk-in{from{opacity:0;transform:translateY(-4px)}}
.pk-head{padding:1.2rem 1.2rem .6rem}
.pk-head input{width:100%;height:4.4rem;border-radius:1.2rem;border:1px solid var(--line);background:rgba(245,251,247,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235ee3a4' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") no-repeat 1.4rem center;padding:0 1.4rem 0 4rem;color:var(--paper);font:400 1.5rem var(--body);outline:none}
.pk-head input:focus{border-color:var(--accent)}
.pk-head input::-webkit-search-cancel-button{display:none}
.pk-list{overflow-y:auto;padding:.6rem;overscroll-behavior:contain}
.pk-item{appearance:none;width:100%;display:flex;align-items:center;gap:1.2rem;padding:1rem 1.2rem;border:0;border-radius:1.2rem;background:none;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.pk-item.is-active{background:rgba(94,227,164,.1)}
.pk-item[aria-selected="true"] b{color:var(--accent)}
.pk-item .logo{width:3.6rem;height:3.6rem;border-radius:50%;background:#fff;object-fit:contain;padding:.45rem;flex:none}
.pk-txt{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.pk-txt b{font:500 1.6rem/1.2 var(--body);color:var(--paper)}
.pk-txt small{font:400 1.3rem/1.3 var(--body);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-right{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex:none}
.pk-price{font:500 1.4rem/1 var(--mono);color:var(--paper)}
.pk-fee{font:500 1.1rem/1 var(--body);color:#ffcf8a;background:rgba(255,207,138,.1);padding:.3rem .7rem;border-radius:99rem}
.pk-check{width:1.6rem;height:1.6rem;flex:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235ee3a4' stroke-width='2'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E")}
.pk-foot{margin:0;padding:1rem 1.6rem 1.2rem;border-top:1px solid var(--line);font-size:1.2rem;color:var(--dim)}
.pk-empty{margin:0;padding:2rem;text-align:center;color:var(--dim);font-size:1.4rem}
.picker.is-sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-height:78vh;border-radius:2rem 2rem 0 0;animation:pk-up .2s ease-out}
.picker.is-sheet .pk-item{padding:1.2rem}
@keyframes pk-up{from{transform:translateY(20px);opacity:0}}

/* ticker wall with logos */
.tile .logo{width:4.8rem;height:4.8rem;border-radius:50%;background:#fff;object-fit:contain;padding:.6rem;margin-bottom:.4rem}
.tile .px{font:500 1.3rem/1 var(--mono);color:var(--mid)}
.marquee span .logo{width:2rem;height:2rem;border-radius:50%;background:#fff;object-fit:contain;padding:.2rem;vertical-align:-.5rem;margin-right:.8rem}

/* Trigr mark */
.mark-img{width:3rem;height:3rem;border-radius:50%;display:block;flex:none;box-shadow:0 0 0 1px rgba(245,251,247,.18)}

/* ---------------------------------------------------------------- app: header, wallet, vault, rules */
.top-r{display:flex;gap:.8rem;align-items:center;position:relative;z-index:31}
.pill.ghost-sm{min-height:4rem;padding:0 1.6rem;font-size:1.4rem;background:none}
.pill.ghost-sm:hover{background:var(--glass)}
.netbar{position:fixed;top:8.4rem;left:50%;transform:translateX(-50%);z-index:25;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 3.2rem);padding:1rem 1.2rem 1rem 1.8rem;border-radius:1.6rem;background:#3a2a0c;border:1px solid #7a5a1c;color:#ffe2ad;font-size:1.4rem}
.netbar button{appearance:none;border:0;border-radius:99rem;background:#ffcf8a;color:#2a1a00;font:500 1.3rem var(--body);padding:.7rem 1.4rem;cursor:pointer}
.warn li.is-note{color:var(--mid)}
.warn li.is-note::before{border-color:var(--dim)}
.txline{margin:1.6rem 0 0;font-size:1.5rem;color:var(--text)}
.txline.is-ok{color:var(--accent)}
.txline.is-err{color:#ffb4a8}
.txline a{color:inherit;text-underline-offset:.2em}
.panel-top{display:flex;justify-content:space-between;align-items:baseline;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.2rem}
.panel-top h3{margin:0}
.vval{font:500 1.5rem var(--mono);color:var(--paper)}
.fund{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:.8rem}
.amt{display:flex;align-items:center;gap:.6rem;height:4.8rem;padding:0 .6rem 0 1.6rem;border-radius:99rem;border:1px solid var(--line);background:rgba(245,251,247,.04);flex:1 1 22rem;max-width:32rem}
.amt:focus-within{border-color:var(--accent)}
.amt span{color:var(--dim);font:500 1.6rem var(--mono)}
.amt input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--paper);font:500 1.8rem var(--mono)}
.max{appearance:none;border:0;border-radius:99rem;background:var(--chip);color:var(--accent);font:500 1.2rem var(--body);padding:.8rem 1.2rem;cursor:pointer}
.max:hover{background:var(--chip-hi)}
.holdings{margin-top:2rem;border-top:1px solid var(--line)}
.hold{display:grid;grid-template-columns:1fr auto auto;gap:1.6rem;align-items:center;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.hold-n{display:flex;align-items:center;gap:1.2rem;min-width:0}
.hold-n .logo{width:3.2rem;height:3.2rem;border-radius:50%;background:#fff;object-fit:contain;padding:.4rem;flex:none}
.hold-n b{display:block;color:var(--paper);font-weight:500}
.hold-n small{color:var(--dim);font-size:1.3rem}
.hold-a{font:500 1.5rem var(--mono);color:var(--paper)}
.rlist{display:grid;gap:1.2rem}
.rcard{border:1px solid var(--line);border-radius:1.8rem;padding:2rem 2.2rem;background:rgba(4,16,11,.35)}
.rc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.rc-id{font:500 1.3rem var(--mono);color:var(--dim)}
.rc-st{font:500 1.2rem var(--body);padding:.4rem 1rem;border-radius:99rem;background:var(--chip);color:var(--text)}
.rc-st.is-go{background:var(--accent);color:var(--ground)}
.rc-st.is-ok{background:rgba(94,227,164,.16);color:var(--accent)}
.rc-st.is-off{color:var(--dim)}
.rc-s{margin:0;font:400 2.2rem/1.3 var(--display);color:var(--paper);letter-spacing:-.01em}
.rc-s .logo{width:2.2rem;height:2.2rem;border-radius:50%;background:#fff;object-fit:contain;padding:.25rem;vertical-align:-.3rem;margin-right:1rem}
.rc-meta{margin:1rem 0 0;font-size:1.4rem;color:var(--dim)}
.rc-fill{margin:1rem 0 0;font-size:1.4rem;color:var(--text)}
.rc-fill a{color:var(--accent);text-decoration:none}
.rc-cancel{margin-top:1.4rem}
.contract-line{margin:3.2rem 0 0;font-size:1.4rem;color:var(--dim)}
.contract-line a{font-family:var(--mono);color:var(--mid)}
.pill:disabled{opacity:.5;cursor:not-allowed}

/* wallet modal */
.wmodal{position:fixed;inset:0;z-index:80;background:rgba(2,8,5,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:1.6rem}
.wm-card{width:100%;max-width:40rem;background:#0a1f16;border:1px solid rgba(94,227,164,.28);border-radius:2.2rem;padding:2rem;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.wm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4rem}
.wm-top h3{margin:0;font:400 2.4rem var(--display);color:var(--paper)}
.wm-x{appearance:none;border:0;background:var(--chip);color:var(--paper);width:3.6rem;height:3.6rem;border-radius:50%;font-size:2rem;cursor:pointer}
.wm-list{display:grid;gap:.8rem}
.wm-item{appearance:none;display:flex;align-items:center;gap:1.4rem;width:100%;padding:1.4rem 1.6rem;border-radius:1.4rem;border:1px solid var(--line);background:rgba(245,251,247,.03);color:var(--paper);font:500 1.6rem var(--body);cursor:pointer;text-decoration:none;text-align:left}
.wm-item:hover{border-color:var(--accent);background:rgba(94,227,164,.08)}
.wm-item b{flex:1;font-weight:500}
.wm-ic{width:3.6rem;height:3.6rem;border-radius:1rem;background:var(--chip);display:grid;place-items:center;overflow:hidden;font-weight:600;color:var(--accent)}
.wm-ic img{width:100%;height:100%;object-fit:contain}
.wm-go{color:var(--accent)}
.wm-none{margin:0 0 .4rem;color:var(--mid);font-size:1.5rem}
.wm-err{margin:1.2rem 0 0;color:#ffb4a8;font-size:1.4rem}
.wm-note{margin:1.4rem 0 0;color:var(--dim);font-size:1.3rem}
@media (max-width:600px){
  .top-r .ghost-sm{display:none}
  .netbar{top:7.2rem}
  .hold{grid-template-columns:1fr auto;}
  .hold .pill{grid-column:1/-1;justify-self:start}
  .rc-s{font-size:1.9rem}
}
.status{text-decoration:none}
.status i.is-live{background:var(--accent);box-shadow:0 0 0 4px rgba(94,227,164,.18)}
.faq .body a{color:var(--accent);font-family:var(--mono);font-size:.9em}

/* $TRIGR contract address pill */
.ca{display:inline-flex;align-items:center;gap:.4rem;max-width:100%;margin-top:1.6rem;padding:.5rem .5rem .5rem 1.4rem;border-radius:99rem;background:rgba(4,16,11,.55);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ca-l{font:600 1.3rem var(--body);color:var(--accent);flex:none}
.ca-a{display:block;min-width:0;padding:0 .8rem;font:400 1.35rem var(--mono);color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:.2em}
.ca-short{display:none}
.ca-c{appearance:none;flex:none;border:0;border-radius:99rem;background:var(--chip);color:var(--paper);font:500 1.3rem var(--body);padding:.8rem 1.4rem;cursor:pointer}
.ca-c:hover{background:var(--chip-hi)}
.ca-c.is-done{background:var(--accent);color:var(--ground)}
.hero .ca{margin-top:2.4rem}
.foot .ca{margin-top:0}
.build-ca{margin-top:3.2rem}
@media (max-width:600px){ .ca-full{display:none} .ca-short{display:inline} }

/* grids must be allowed to shrink below their content on a phone */
.wall{grid-template-columns:repeat(6,minmax(0,1fr))}
.nums{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{min-width:0;padding:0 .4rem}
.tile span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){ .wall{grid-template-columns:repeat(3,minmax(0,1fr))} .nums{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .nums{grid-template-columns:minmax(0,1fr)} .tile .logo{width:3.6rem;height:3.6rem} .tile b{font-size:1.6rem} .wall-head strong{font-size:6rem} }

/* X link */
.xbtn{display:inline-grid;place-items:center;width:4rem;height:4rem;border-radius:50%;border:1px solid rgba(245,251,247,.14);color:var(--paper);background:rgba(4,16,11,.35);text-decoration:none;flex:none}
.xbtn:hover{background:var(--chip-hi)}
@media (max-width:600px){ .top-r .xbtn{display:inline-grid} }