/* Edge Mode: one stylesheet for / and /brand. No inline styles (CSP). */

@font-face{font-family:"Geist";src:url(/fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* tokens:start */
/* Edge Mode is dark only. Volt is the edge: the button to press, something live,
   money made. Nothing else. The slash (19deg, Geist's own "/") is the one shape. */
:root{
  --night:#07080C;   /* page */
  --plate:#0E1016;   /* raised surfaces */
  --plate-2:#141720; /* chat bubbles, inputs */
  --ghost:#11141B;   /* the giant tonal mark */
  --line:#1C2029;
  --line-2:#2A2F3B;
  --paper:#ECEEF2;   /* text, the E */
  --paper-2:#B4B9C6; /* secondary text */
  --fog:#8A90A0;     /* quiet text, Edge Mode off */
  --volt:#DCFF1E;    /* the edge */
  --volt-hi:#EAFF73; /* volt, hovered */
  --volt-ink:#0B1200;/* text on volt */
  --volt-deep:#5B7300;/* volt on light backgrounds */
  --loss:#FF4D5E;    /* losses and warnings only */
  --acc:var(--volt); /* the live accent: turns fog when Edge Mode is switched off */

  --f-text:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* type scale: major third (1.25) from 17px; display steps are fluid */
  --t-xs:.8125rem;--t-sm:.9375rem;--t-base:1.0625rem;--t-lead:clamp(1.125rem,1.03rem + .35vw,1.3125rem);
  --t-h3:1.3125rem;--t-h2:clamp(2.1rem,1.35rem + 2.9vw,3.6rem);--t-h1:clamp(2.9rem,1.6rem + 4.4vw,5.5rem);
  --t-display:clamp(6rem,3rem + 10vw,12rem);

  --slant:19deg;     /* the slash: buttons, dividers, the mark */
  --r-tag:3px;--r:10px;--r-lg:20px;--r-phone:38px; /* tags, rows, panels, the phone */
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1200px;--gutter:16px;
  color-scheme:dark;
}
/* tokens:end */
@media (min-width:768px){:root{--gutter:32px}}
:root.off{--acc:var(--fog)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--paper);font:400 var(--t-base)/1.6 var(--f-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:.95;letter-spacing:-.05em}
h2{font-size:var(--t-h2);line-height:1;letter-spacing:-.04em}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em}
p{margin:0}
code,kbd,.mono{font-family:var(--f-mono);font-feature-settings:"zero" 1}
:focus-visible{outline:2px solid var(--volt);outline-offset:4px;border-radius:2px}
::selection{background:var(--volt);color:var(--volt-ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--volt);color:var(--volt-ink);padding:8px 12px;z-index:99;border-radius:var(--r-tag)}
.skip:focus{left:8px}
.lead{font-size:var(--t-lead);color:var(--paper-2);max-width:34em;line-height:1.5}
.quiet{color:var(--fog)}
.note{font-size:var(--t-xs);color:var(--fog)}

/* buttons: the label stays upright, the plate behind it leans on the slash */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.6em;min-height:50px;padding:0 28px;font:600 var(--t-sm)/1 var(--f-text);text-decoration:none;color:var(--paper);white-space:nowrap;transition:color .3s var(--ease),transform .2s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(calc(var(--slant) * -1));transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-volt{color:var(--volt-ink)}
.btn-volt::before{background:var(--acc)}
.btn-volt:hover::before{background:var(--volt-hi)}
:root.off .btn-volt:hover::before{background:var(--paper-2)}
.btn-line::before{box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-line:hover::before{box-shadow:inset 0 0 0 1px var(--paper-2)}
.btn svg{width:18px;height:18px}
.ctas{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:36px;padding-left:9px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgb(7 8 12/.8);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgb(255 255 255/.06)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.top .logo img{height:24px;width:auto}
.top nav{display:none;gap:28px;margin-left:auto;font-size:var(--t-sm);color:var(--paper-2)}
.top nav a{text-decoration:none;transition:color .2s var(--ease)}
.top nav a:hover{color:var(--paper)}
.top .btn{margin-left:auto;min-height:38px;padding:0 16px;font-size:var(--t-xs)}
@media (min-width:480px){.top .btn{font-size:var(--t-sm);padding:0 18px}}
@media (max-width:479px){.top .logo img{height:19px}}
@media (min-width:960px){.top nav{display:flex}.top .btn{margin-left:8px}}

/* hero: the page opens on the mark at the scale of the screen */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:48px 0 0}
.hero-mark{position:absolute;z-index:-1;pointer-events:none;aspect-ratio:95/100;height:620px;right:-260px;bottom:-40px}
.hero-mark::before,.hero-mark::after{content:"";position:absolute;inset:0}
.hero-mark::before{background:var(--ghost);clip-path:polygon(0 0,77.89% 0,69.2% 24%,28.42% 24%,28.42% 38%,64.13% 38%,55.43% 62%,28.42% 62%,28.42% 76%,50.36% 76%,41.66% 100%,0 100%)}
.hero-mark::after{background:var(--acc);clip-path:polygon(86.32% 0,100% 0,63.77% 100%,50.08% 100%);transition:background-color .5s var(--ease)}
.hero-grid{display:grid;gap:56px;align-items:end}
.hero-copy{padding-bottom:8px}
.hero h1{max-width:9em;margin-top:28px}
.hero .lead{margin-top:26px;max-width:27em}
@media (min-width:1000px){
  .hero{padding-top:72px}
  .hero-grid{grid-template-columns:1.3fr .7fr;min-height:min(calc(100dvh - 68px),860px)}
  .hero-copy{align-self:center;padding-bottom:48px}
  .hero-mark{height:min(112%,980px);bottom:auto;top:-4%;right:-250px}
}

/* the mode switch: the hero's one interaction */
.mode{display:inline-flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;border:1px solid var(--line-2);background:var(--plate);color:var(--paper);font:600 var(--t-sm)/1 var(--f-text);cursor:pointer;border-radius:var(--r-tag)}
.mode-track{position:relative;width:46px;height:24px;background:var(--line);transform:skewX(calc(var(--slant) * -1));margin-left:6px}
.mode-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--acc);transform:translateX(22px);transition:transform .45s var(--ease),background-color .45s var(--ease)}
.mode[aria-checked="false"] .mode-knob{transform:none}
.mode-state{font:500 var(--t-xs)/1 var(--f-mono);color:var(--acc);min-width:2.2em;transition:color .45s var(--ease)}
.mode:hover{border-color:var(--fog)}

/* phone + chat (an illustration of the bot, not a screenshot) */
.phone{position:relative;justify-self:center;width:min(100%,370px);margin:0;background:#0A0C11;border:1px solid var(--line-2);border-bottom:0;border-radius:var(--r-phone) var(--r-phone) 0 0;padding:12px 10px 0;box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 -40px 120px -50px rgb(220 255 30/.22)}
.phone-bar{display:flex;align-items:center;gap:11px;padding:8px 10px 12px;border-bottom:1px solid var(--line)}
.phone-bar img{width:38px;height:38px;border-radius:50%}
.phone-bar b{display:block;font-size:var(--t-sm);line-height:1.25}
.phone-bar span{font-size:var(--t-xs);color:var(--fog)}
.chat{list-style:none;margin:0;padding:14px 4px 18px;display:flex;flex-direction:column;gap:7px;font-size:.84rem;line-height:1.45;min-height:520px}
.msg{max-width:90%;padding:8px 11px;border-radius:14px;background:var(--plate-2)}
.msg.me{align-self:flex-end;background:#232C0B;color:#F1FFC7;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;border-bottom-left-radius:4px}
.msg code{font-size:.92em;color:var(--paper-2)}
.msg b{font-weight:600}
.msg .row{display:grid;grid-template-columns:4em 1fr;gap:6px}
.msg .row span:first-child{color:var(--fog)}
.up{color:var(--acc);font-family:var(--f-mono);transition:color .45s var(--ease)}
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}
.kb span{padding:7px 4px;text-align:center;border-radius:8px;background:rgb(255 255 255/.06);font-size:.78rem}
.kb .on{background:var(--acc);color:var(--volt-ink);font-weight:600;transition:background-color .45s var(--ease)}
.kb-1{grid-template-columns:1fr}
.typing{display:flex;gap:4px;padding:12px 13px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--fog)}
.phone figcaption{font-size:var(--t-xs);color:var(--fog);padding:0 10px 14px}

/* the one orchestrated moment: Edge Mode switches on, then the chat plays once */
@media (prefers-reduced-motion:no-preference){
  .mode-knob{animation:knob .7s var(--ease) .5s backwards}
  .mode-state{animation:dim .7s var(--ease) .5s backwards}
  .hero-mark::after{animation:boot 1s var(--ease) .55s backwards}
  @keyframes knob{from{transform:none;background:var(--fog)}}
  @keyframes dim{from{color:var(--fog)}}
  @keyframes boot{from{background:var(--line-2)}}
  .chat li{opacity:0;transform:translateY(8px);animation:in .5s var(--ease) forwards}
  .chat li:nth-child(1){animation-delay:.9s}.chat li:nth-child(2){animation-delay:1.6s}
  .chat li:nth-child(3){animation-delay:2.5s}.chat li:nth-child(4){animation-delay:3.3s}
  .chat li:nth-child(5){animation-delay:4.4s}.chat li:nth-child(6){animation-delay:5.5s}
  .chat li:nth-child(7){animation-delay:6.4s}
  @keyframes in{to{opacity:1;transform:none}}
  .typing i{animation:dot 1.2s var(--ease) infinite}
  .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
  @keyframes dot{40%{transform:translateY(-3px);background:var(--paper-2)}}
}

/* sections */
.sec{padding:104px 0;position:relative}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:20px;margin-bottom:56px;max-width:44em}
@media (min-width:768px){.sec{padding:144px 0}}

/* steps: a real sequence, led by the command you send */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:40px;counter-reset:s}
.steps li{position:relative;display:grid;gap:12px;align-content:start}
.steps .cmd{font:500 clamp(1.6rem,1.2rem + 1.4vw,2.3rem)/1 var(--f-mono);letter-spacing:-.03em;color:var(--paper);margin-bottom:14px}
.steps .cmd .slash{color:var(--acc);transition:color .45s var(--ease)}
.steps li::before{counter-increment:s;content:counter(s);font:500 var(--t-xs)/1 var(--f-mono);color:var(--fog)}
.steps p{color:var(--paper-2);max-width:26em}
.steps code{color:var(--paper)}
@media (min-width:880px){
  .steps{grid-template-columns:repeat(3,1fr);gap:0}
  .steps li{padding:0 40px}
  .steps li:first-child{padding-left:0}
  .steps li + li{border-left:1px solid var(--line)}
}

/* trader board */
.board-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--plate)}
.board{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.board caption{caption-side:top;text-align:left;padding:18px 22px 0}
.board th{font-weight:500;color:var(--fog);text-align:left;padding:16px 22px 12px;white-space:nowrap;font-size:var(--t-xs)}
.board td{padding:16px 22px;border-top:1px solid var(--line);white-space:nowrap}
.board .num{text-align:right;font-family:var(--f-mono)}
.board .who code{color:var(--paper)}
.board .src{display:block;font-size:var(--t-xs);color:var(--fog)}
.tag{display:inline-block;padding:3px 8px;border-radius:var(--r-tag);font:500 var(--t-xs)/1.4 var(--f-text);border:1px solid var(--line-2);color:var(--paper-2)}
.tag.ok{border-color:rgb(220 255 30/.4);color:var(--volt)}
.tag.warn{border-color:rgb(255 77 94/.45);color:var(--loss)}
.tag.ex{background:var(--line);border-color:var(--line);color:var(--paper-2)}
.board-note{margin-top:16px;font-size:var(--t-xs);color:var(--fog);max-width:60em}

/* features: an uneven grid, five cells for five things */
.bento{display:grid;gap:14px}
.cell{position:relative;overflow:hidden;padding:32px 28px;border-radius:var(--r-lg);background:var(--plate);border:1px solid var(--line);display:grid;gap:14px;align-content:start}
.cell h3{max-width:16em}
.cell p{color:var(--paper-2);max-width:32em}
.cell code{color:var(--paper)}
.cell-copy{background:linear-gradient(160deg,var(--plate-2),var(--plate) 60%)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips code{padding:9px 13px;background:var(--night);border:1px solid var(--line-2);border-radius:var(--r-tag);font-size:var(--t-sm);color:var(--paper-2)}
.chips .shot{border-style:dashed;color:var(--paper)}
.found{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:.86rem;max-width:22em}
.found .msg{max-width:100%}
.found .me{align-self:flex-end}
.cell-alert{background:var(--acc);border-color:transparent;color:var(--volt-ink);transition:background-color .45s var(--ease)}
.cell-alert p{color:#2B3A00}
:root.off .cell-alert p{color:var(--night)}
.alert-card{margin-top:8px;padding:14px 16px;background:var(--night);color:var(--paper);border-radius:var(--r);font-size:.86rem;line-height:1.5}
.alert-card .kb{margin-top:10px}
.alert-card .kb span{background:rgb(255 255 255/.08)}
.cell-keys{background:var(--night)}
.facts{margin:auto 0 0;display:grid;gap:0}
.facts div{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.facts dt{color:var(--paper-2);font-size:var(--t-sm)}
.facts dd{margin:0;font:500 var(--t-lead)/1 var(--f-mono)}
.cell-out{align-content:stretch}
.cell-wide{grid-template-columns:1fr;align-items:center}
.cell-wide .notice{padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--paper-2);font-size:var(--t-sm)}
.cell-wide .notice b{color:var(--paper)}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .cell-copy{grid-column:span 4}
  .cell-presets{grid-column:span 2;grid-row:span 2}
  .cell-alert,.cell-out{grid-column:span 2}
  .cell-wide{grid-column:1/-1;grid-template-columns:1.2fr 1fr;gap:40px}
}

/* presets: three radio buttons, one panel each (falls back to Balanced) */
.presets fieldset{border:0;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--night);border-radius:var(--r);padding:4px}
.presets input{position:absolute;opacity:0;pointer-events:none}
.presets label{padding:10px 4px;text-align:center;border-radius:7px;font-size:var(--t-sm);font-weight:600;color:var(--paper-2);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.presets input:checked + label{background:var(--paper);color:var(--night)}
.presets input:focus-visible + label{outline:2px solid var(--volt);outline-offset:2px}
.pv{display:none;margin:18px 0 0;gap:0}
.pv-balanced{display:grid}
.presets:has(#p-safe:checked) .pv-balanced,.presets:has(#p-degen:checked) .pv-balanced{display:none}
.presets:has(#p-safe:checked) .pv-safe,.presets:has(#p-degen:checked) .pv-degen{display:grid}
.pv div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.pv dt{color:var(--paper-2)}
.pv dd{margin:0;font-family:var(--f-mono);text-align:right}
.pv-extra{display:block!important;color:var(--fog);font-size:var(--t-xs);border-bottom:0!important}

/* fees */
.fees{display:grid;gap:64px}
.fee-big{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-top:40px}
.fee-big strong{font:600 var(--t-display)/.82 var(--f-mono);letter-spacing:-.08em;color:var(--paper)}
.fee-big ul{list-style:none;margin:0;padding:0 0 10px;font:500 var(--t-lead)/1.5 var(--f-mono)}
.fee-big li::before{content:"/";color:var(--acc);margin-right:.4em;transition:color .45s var(--ease)}
.fees .lead{margin-top:28px}
.tiers{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.tiers li{display:grid;gap:6px;padding:4px 18px 0;border-left:1px solid var(--line)}
.tiers li:first-child{padding-left:0;border-left:0}
.tiers strong{font:600 clamp(2rem,1.5rem + 2vw,3.2rem)/1 var(--f-mono);letter-spacing:-.05em}
.tiers span{font-size:var(--t-sm);color:var(--paper-2)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin-top:40px}
.tbl caption{text-align:left;font-weight:600;padding-bottom:8px}
.tbl th,.tbl td{padding:12px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.tbl td{text-align:right;font-family:var(--f-mono)}
.tbl th{color:var(--paper-2)}
@media (min-width:900px){.fees{grid-template-columns:1.15fr 1fr;gap:96px;align-items:start}}

/* terminal teaser */
.term{display:grid;gap:44px;align-items:center}
@media (min-width:900px){.term{grid-template-columns:.85fr 1.15fr}}
.soon{justify-self:start;display:inline-flex;align-items:center;gap:8px;font:500 var(--t-xs)/1 var(--f-mono);color:var(--acc);border:1px solid currentColor;border-radius:var(--r-tag);padding:6px 9px;transition:color .45s var(--ease)}
.chart{margin:0;padding:6px;border-radius:calc(var(--r-lg) + 6px);background:rgb(255 255 255/.03);border:1px solid var(--line)}
.chart-in{padding:20px;border-radius:var(--r-lg);background:var(--plate);box-shadow:inset 0 1px 0 rgb(255 255 255/.05)}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-sm);margin-bottom:14px}
.chart-head b{font-family:var(--f-mono);font-weight:500}
.chart svg{width:100%;height:auto}
.chart .grid{stroke:var(--line)}
.chart .price{stroke:var(--paper);fill:none;stroke-width:2;stroke-linejoin:round}
.chart .buy{fill:var(--acc);transition:fill .45s var(--ease)}
.chart .sell{fill:var(--loss)}
.chart figcaption{padding:12px 14px 6px}

/* faq */
.faq-wrap{display:grid;gap:40px}
@media (min-width:900px){.faq-wrap{grid-template-columns:.7fr 1.3fr;gap:80px}}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:22px 0;font-weight:600;font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.4rem/1 var(--f-mono);color:var(--fog);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--paper-2);max-width:40em}

/* final + footer */
.final{position:relative;isolation:isolate;overflow:hidden;padding:136px 0;border-top:1px solid var(--line)}
.final::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:8%;width:clamp(48px,7vw,104px);background:var(--acc);transform:skewX(calc(var(--slant) * -1));transform-origin:bottom;transition:background-color .45s var(--ease)}
.final h2{max-width:9.5em;font-size:clamp(2.4rem,1.4rem + 4vw,4.8rem)}
@media (max-width:700px){.final::after{right:-6%;opacity:.9}}
.foot{border-top:1px solid var(--line);padding:64px 0 44px;font-size:var(--t-sm);color:var(--fog)}
.foot .wrap{display:grid;gap:32px}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 26px}
.foot nav a{text-decoration:none;color:var(--paper-2)}
.foot nav a:hover{color:var(--paper)}
.foot img{height:22px;width:auto}
.risk{max-width:54em;line-height:1.6}
.risk b{color:var(--paper-2)}

/* telegram nudge */
.tgpop{position:fixed;right:16px;bottom:16px;left:16px;z-index:30;max-width:360px;margin-left:auto;padding:20px 22px;background:var(--plate);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 30px 80px -20px rgb(0 0 0/.7)}
.tgpop[hidden]{display:none}
.tgpop p{color:var(--paper-2);font-size:var(--t-sm);margin:6px 0 18px}
.tgpop b{color:var(--paper)}
.tgpop .btn{margin-left:9px}
.tgpop-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;background:none;color:var(--fog);font-size:1.4rem;cursor:pointer;border-radius:var(--r-tag)}
.tgpop-x:hover{color:var(--paper)}

/* /brand */
.bk-hero{position:relative;isolation:isolate;overflow:hidden;padding:88px 0 96px}
.bk-hero .hero-mark{height:560px;top:-40px;bottom:auto;right:-140px}
.bk-hero h1{max-width:8em}
.bk-hero .lead{margin-top:24px}
.bk-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.bk-nav a{padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-tag);font-size:var(--t-sm);text-decoration:none;color:var(--paper-2)}
.bk-nav a:hover{color:var(--paper);border-color:var(--fog)}
.bk-grid{display:grid;gap:14px}
@media (min-width:760px){.bk-grid{grid-template-columns:repeat(2,1fr)}.bk-grid.three{grid-template-columns:repeat(3,1fr)}.bk-grid.four{grid-template-columns:repeat(4,1fr)}}
.bk-grid + .bk-grid,#xh{margin-top:14px}
#icons{margin-top:40px}
#tg-text{margin-top:14px}
.bk-tile{display:grid;place-items:center;min-height:240px;padding:40px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--plate)}
.bk-tile.night{background:var(--night)}
.bk-tile.paper{background:#F3F4F6;border-color:#F3F4F6}
.bk-tile.volt{background:var(--volt);border-color:var(--volt)}
.bk-tile.flush{padding:0;overflow:hidden;min-height:0}
.bk-tile img{max-height:120px;width:auto}
.bk-tile.flush img{max-height:none;width:100%;height:auto}
.bk-tile .lg{max-height:none;width:min(100%,520px)}
.bk-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:10px 2px 0;font-size:var(--t-xs);color:var(--fog)}
.bk-cap span{color:var(--paper-2)}
.bk-cap .dl{display:flex;gap:12px}
.bk-cap a{color:var(--paper-2);text-decoration-color:var(--line-2);text-underline-offset:3px}
.bk-cap a:hover{color:var(--paper)}
.bk-split{display:grid;gap:40px;align-items:start}
@media (min-width:900px){.bk-split{grid-template-columns:1fr 1fr;gap:72px}}
.bk-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bk-list li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--paper-2)}
.bk-list li:first-child{border-top:1px solid var(--line)}
.bk-list b{color:var(--paper);font-weight:600}
.explore{display:grid;gap:14px}
@media (min-width:760px){.explore{grid-template-columns:repeat(4,1fr)}}
.explore figure{margin:0}
.explore img{border-radius:var(--r-lg);border:1px solid var(--line);width:100%;height:auto}
.explore figcaption{margin-top:12px;font-size:var(--t-sm);color:var(--paper-2)}
.explore figcaption b{display:block;color:var(--paper);margin-bottom:4px}
.dont{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.dont{grid-template-columns:repeat(3,1fr)}}
.dont figure{margin:0}
.dont img{border-radius:var(--r);width:100%;height:auto;border:1px solid var(--line)}
.dont figcaption{margin-top:10px;font-size:var(--t-sm);color:var(--paper-2)}
.dont figcaption::before{content:"\00d7";color:var(--loss);font-weight:700;margin-right:8px}
.sizes{display:flex;flex-wrap:wrap;align-items:end;gap:28px}
.sizes figure{margin:0;display:grid;gap:10px;justify-items:start}
.sizes figcaption{font-size:var(--t-xs);color:var(--fog);font-family:var(--f-mono)}
.sz-16{width:16px;height:16px}.sz-24{width:24px;height:24px}.sz-40{width:40px;height:40px;border-radius:50%}.sz-64{width:64px;height:64px;border-radius:50%}
.sz-lock{height:20px;width:auto}
.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.sw > div{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:var(--t-xs)}
.sw i{display:block;height:92px}
.sw p{padding:12px 14px;color:var(--paper-2);display:grid;gap:2px}
.sw b{color:var(--paper);font-size:var(--t-sm)}
.sw code{color:var(--paper)}
.c-night{background:#07080C}.c-plate{background:#0E1016}.c-plate2{background:#141720}.c-line{background:#1C2029}.c-paper{background:#ECEEF2}.c-paper2{background:#B4B9C6}
.c-fog{background:#8A90A0}.c-volt{background:#DCFF1E}.c-voltdeep{background:#5B7300}.c-loss{background:#FF4D5E}
.ctr{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin-top:28px}
.ctr th,.ctr td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.ctr th{color:var(--fog);font-size:var(--t-xs)}
.ctr td.n{font-family:var(--f-mono)}
.ctr .pass{color:var(--volt)}.ctr .fail{color:var(--loss)}
.scale{display:grid;gap:0}
.scale > div{display:grid;grid-template-columns:7.5em 1fr;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.scale span{font:500 var(--t-xs)/1.4 var(--f-mono);color:var(--fog)}
.scale .s-display{font:600 clamp(4rem,2.5rem + 5vw,7rem)/.9 var(--f-mono);letter-spacing:-.08em}
.scale .s-h1{font-size:var(--t-h1);font-weight:700;letter-spacing:-.05em;line-height:.95}
.scale .s-h2{font-size:var(--t-h2);font-weight:700;letter-spacing:-.04em;line-height:1}
.scale .s-h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em}
.scale .s-lead{font-size:var(--t-lead);color:var(--paper-2)}
.scale .s-mono{font:500 var(--t-base)/1.4 var(--f-mono)}
.scale .s-xs{font-size:var(--t-xs);color:var(--fog)}
.voice{display:grid;gap:14px}
@media (min-width:860px){.voice{grid-template-columns:1fr 1fr}}
.say{padding:20px 22px;border-radius:var(--r);background:var(--plate);border:1px solid var(--line);display:grid;gap:10px;align-content:start}
.say h3{font-size:var(--t-sm);font-weight:600;letter-spacing:0}
.say.good h3{color:var(--volt)}.say.bad h3{color:var(--loss)}
.say .msg{font-size:.88rem;max-width:100%}
.say p{font-size:var(--t-sm);color:var(--paper-2)}
.emoji{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.emoji th,.emoji td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400;vertical-align:top}
.emoji th{color:var(--fog);font-size:var(--t-xs)}
.emoji td:first-child{font-size:1.3rem;width:2.4em}
.emoji td:nth-child(2){color:var(--paper)}
.emoji td:last-child{color:var(--paper-2)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}