:root{--surface:#141414;--red:#f0628f;--mono:ui-monospace, "SF Mono", "JetBrains Mono", "Liberation Mono", Consolas, monospace;--hand:"Excalifont", "Comic Sans MS", "Segoe Print", cursive;--card-shadow:0 1px 0 #ffffff08 inset, 0 30px 70px -40px #000, 0 4px 14px -6px #0007}::selection{background:#2ec4b640}:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:10px}h2,h3{font-family:Nunito,Liberation Sans,sans-serif;font-weight:700}button{font:inherit;color:inherit}kbd{min-width:22px;height:22px;font:11px var(--mono);color:#d6d6d6;background:#1d1d1d;border:1px solid #333;border-bottom-width:2px;border-radius:6px;place-items:center;padding:0 6px;display:inline-grid}.bar{transition:background .5s var(--ease), border-color .5s var(--ease);border-bottom:1px solid #0000}.bar.is-scrolled{-webkit-backdrop-filter:blur(16px)saturate(1.2);background:#101010d9;border-color:#ffffff0d}.nav{color:var(--muted);background:#151515b3;border:1px solid #ffffff0f;border-radius:999px;gap:4px;padding:4px;font-size:14px;display:flex}.nav a{border-radius:999px;padding:7px 14px;transition:color .2s,background .2s}.nav a:hover{color:var(--fg);background:#222}.bar-end{align-items:center;gap:4px;display:flex}.blog{color:var(--muted);border-radius:999px;padding:7px 12px;font-size:14px;transition:color .2s,background .2s}.blog:hover{color:var(--fg);background:#1c1c1c}.github{width:40px;height:40px;color:var(--coral);border-radius:999px;place-items:center;transition:background .2s;display:grid}.github:hover{background:#1c1c1c}.bar-progress{background:linear-gradient(90deg, var(--coral), var(--teal));transform-origin:0;opacity:.85;height:2px;position:absolute;bottom:-1px;left:0;right:0;transform:scaleX(0)}.hero-inner>:not(.mark){animation:rise 1s var(--ease) both}.hero-inner>:nth-child(2){animation-delay:.1s}.hero-inner>:nth-child(3){animation-delay:.18s}.hero-inner>:nth-child(4){animation-delay:.26s}.hero-inner>:nth-child(5){animation-delay:.34s}@keyframes rise{0%{opacity:0;filter:blur(6px);transform:translateY(18px)}}.platforms button{transition:background .25s var(--ease), color .25s}.platforms button:hover{color:var(--fg)}.download{transition:transform .2s var(--ease), box-shadow .3s}.download:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px #2ec4b6bb}.download:active{transform:scale(.97)}.scroll-cue{left:50%;bottom:max(26px, env(safe-area-inset-bottom));color:#777;letter-spacing:.22em;justify-items:center;gap:8px;font-size:11px;transition:opacity .5s;display:grid;position:absolute;translate:-50%}.scroll-cue svg{fill:none;stroke-width:2.4px;stroke-linecap:round;width:34px;height:20px;transform:rotate(90deg)}.scroll-cue path{stroke:var(--coral);animation:cue 1.8s var(--ease) infinite}.scroll-cue path:nth-child(2){stroke:#b7a493;animation-delay:.18s}.scroll-cue path:nth-child(3){stroke:var(--teal);animation-delay:.36s}@keyframes cue{0%,to{opacity:.12}40%{opacity:1}}.is-scrolled-past .scroll-cue{opacity:0}@media (min-width:900px) and (max-height:820px){.hero{padding-top:84px;padding-bottom:96px}.hero .mark{width:clamp(110px,17vh,150px)}h1{margin-top:26px;font-size:clamp(54px,7vw,88px)}.lede{margin-top:30px}.getcard{margin-top:26px}}.wrap{width:min(100% - 40px,1120px);margin-inline:auto}.section{padding:clamp(110px,14vw,180px) 0 0}.split{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,6vw,80px);display:grid}.section-head h2,.get h2{letter-spacing:-.04em;margin:16px 0 0;font-size:clamp(36px,5.6vw,68px);line-height:1.04}.section-head>p:not(.kicker){color:#b3b3b3;max-width:600px;margin:22px 0 0;font-size:clamp(16px,1.6vw,18px);line-height:1.65}.section-head>p.aside{color:var(--muted);margin-top:14px;font-size:15px}.section-head.center{text-align:center}.section-head.center>p{margin-inline:auto}.kicker{border:1px solid var(--line);background:var(--surface);color:#cfcfcf;border-radius:999px;align-items:center;gap:10px;margin:0;padding:6px 12px 6px 6px;font-size:13px;display:inline-flex}.kicker span{min-width:26px;height:22px;color:var(--teal);font:12px var(--mono);background:#0f2a27;border-radius:999px;place-items:center;padding:0 6px;display:inline-grid}.footnote{text-align:center;max-width:680px;color:var(--muted);margin:26px auto 0;font-size:14px;line-height:1.75}.name-scene .mark .src,.name-scene .mark .echo,.get .mark .src,.get .mark .echo{animation:none}.name-scene .mark .echo,.get .mark .echo{transform:rotate(var(--turn,180deg))}.scene{margin:clamp(36px,5vw,60px) 0 0}.scene svg,.compare svg{width:100%;height:auto;display:block;overflow:visible}.hand{font-family:var(--hand)}svg:not(.is-live) .ambient{visibility:hidden}.story-steps{counter-reset:step;justify-content:center;gap:8px;margin:26px 0 0;padding:0;list-style:none;display:flex}.story-steps li{border:1px solid var(--line);background:var(--surface);color:#777;border-radius:999px;align-items:center;gap:8px;padding:7px 14px 7px 8px;font-size:13px;transition:color .4s,border-color .4s,background .4s;display:inline-flex}.story-steps li:before{counter-increment:step;content:counter(step);width:20px;height:20px;font:11px var(--mono);background:#222;border-radius:50%;place-items:center;transition:background .4s,color .4s;display:grid}.story-steps li.is-active{color:var(--fg);border-color:#fff2}.story-steps li.is-active:before{background:var(--coral);color:#2a0c08}.story-steps li.is-active:last-child:before{background:var(--teal);color:var(--ink)}.name-scene{justify-items:center;margin:0;display:grid;position:relative}.spelling{letter-spacing:-.045em;perspective:600px;margin:0;font:700 clamp(52px,7vw,84px)/1 Nunito,Liberation Sans,sans-serif;display:grid;position:relative}.spelling span{text-align:center;grid-area:1/1}.spelling [data-spelling=eko]{color:var(--coral)}.spelling [data-spelling=echo]{color:var(--teal);opacity:0}.phonetic{color:var(--muted);font:18px var(--hand);margin:12px 0 0}.name-mark{width:min(100%,340px);margin-top:84px;position:relative}.name-mark .mark{width:100%;height:auto}.name-notes{pointer-events:none;width:137.5%;height:137.5%;position:absolute;inset:-18.75%;overflow:visible}.listeners,.choice,.segmented{justify-content:center;align-items:center;gap:10px;display:flex}.listeners{margin-top:26px}.listeners p{text-align:center;min-width:210px;color:var(--muted);margin:0;font-size:15px}.listeners b{color:var(--fg);font-variant-numeric:tabular-nums}.listeners b[data-listener-count]{color:var(--teal)}.listeners button,.choice button{border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:background .2s, border-color .2s, transform .2s var(--ease), opacity .3s}.listeners button{border-radius:50%;place-items:center;width:40px;height:40px;font-size:20px;display:grid}.listeners button:hover,.choice button:hover{background:#1d1d1d;border-color:#333}.listeners button:active,.choice button:active{transform:scale(.94)}.listeners button:disabled,.choice button:disabled{opacity:.35;cursor:default}.choice{margin-top:22px}.choice button{border-radius:12px;min-width:108px;padding:11px 18px;font-size:14px;font-weight:700}.choice [data-decide=allow]{background:var(--teal);color:var(--ink);border-color:#0000}.choice [data-decide=allow]:hover{background:#5fd9cc}.choice [data-decide=deny]:hover{color:var(--red);border-color:#f0628f66}.segmented{background:#0f0f0f;border:1px solid #222;border-radius:999px;gap:2px;width:max-content;margin:34px auto 0;padding:3px}.segmented button{color:var(--muted);cursor:pointer;transition:background .25s var(--ease), color .25s;background:0 0;border:0;border-radius:999px;padding:7px 16px;font-size:14px}.segmented button:hover{color:var(--fg)}.segmented [aria-selected=true]{color:var(--fg);background:#262626;box-shadow:0 1px 2px #0006}.segmented+.scene{margin-top:20px}.trio article,.compare li,.getcard{isolation:isolate;position:relative}.trio article:after,.compare li:after{content:"";z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), #2ec4b614, transparent 65%);transition:opacity .4s;position:absolute;inset:0}.trio article:hover:after,.compare li:hover:after{opacity:1}.trio article,.compare li{border:1px solid var(--line);background:var(--surface);box-shadow:var(--card-shadow)}.trio{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;display:grid}.trio article{border-radius:24px;padding:24px}.trio h3{letter-spacing:-.02em;margin:0;font-size:17px}.trio p{color:var(--muted);margin:8px 0 0;font-size:14.5px;line-height:1.6}.trio article:first-child h3{color:var(--coral)}.trio article:nth-child(2) h3{color:var(--teal)}.trio article:nth-child(3) h3{color:#8fb4ff}.compare{grid-template-columns:repeat(5,1fr);gap:14px;margin:clamp(40px,5vw,56px) 0 0;padding:0;list-style:none;display:grid}.compare li{border-radius:22px;align-content:start;gap:6px;padding:16px 16px 20px;display:grid}.compare svg{margin-bottom:8px}.compare h3{letter-spacing:-.02em;margin:0;font-size:16px}.compare p{color:var(--muted);margin:0;font-size:13.5px;line-height:1.55}.compare .is-eko{background:linear-gradient(180deg, #2ec4b610, var(--surface) 60%);border-color:#2ec4b655}.compare .is-eko h3{color:var(--teal)}.checks{flex-wrap:wrap;justify-content:center;gap:8px;margin:34px 0 0;padding:0;list-style:none;display:flex}.checks li{border:1px solid var(--line);background:var(--surface);color:#cfcfcf;border-radius:999px;align-items:center;gap:8px;padding:7px 14px 7px 10px;font-size:13.5px;display:inline-flex}.checks li:before{content:"";border:solid var(--teal);border-width:0 0 2px 2px;width:14px;height:8px;margin-top:-4px;transform:rotate(-45deg)}.get{text-align:center;padding:clamp(120px,16vw,200px) 0 clamp(90px,12vw,140px);position:relative;overflow:hidden}.get:before{content:"";pointer-events:none;background:radial-gradient(closest-side,#2ec4b618,#0000),radial-gradient(closest-side at 40%,#ff6b5b0e,#0000);width:70vmax;height:40vmax;position:absolute;top:40%;left:50%;translate:-50% -50%}.get-inner{justify-items:center;display:grid;position:relative}.mark-lg{width:clamp(100px,13vw,140px);height:auto}.get h2{margin-top:30px}.after{color:var(--muted);margin:16px 0 0;font-size:15.5px}.links{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:28px 0 0;font-size:14px;display:flex}.links a{border-bottom:1px solid #333;padding-bottom:2px;transition:color .2s,border-color .2s}.links a:hover{color:var(--fg);border-color:var(--teal)}.foot{padding:26px clamp(16px, 4vw, 40px) max(26px, env(safe-area-inset-bottom));color:#7a7a7a;border-top:1px solid #1c1c1c;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-size:13px;display:flex}.foot span:first-child{align-items:center;gap:8px;display:inline-flex}.egg kbd{min-width:18px;height:18px;margin-left:2px;font-size:10px}.ripple{z-index:40;border:2px solid var(--coral);pointer-events:none;border-radius:50%;width:40vmax;height:40vmax;margin:-20vmax 0 0 -20vmax;position:fixed;top:50%;left:50%}.ripple.is-echo{border-color:var(--teal)}.eko-toast{gap:12px!important;box-shadow:0 18px 50px -18px #000,inset 0 0 0 1px #ffffff08!important}.eko-toast [data-title]{font-weight:700}.eko-toast [data-description]{color:#9a9a9a!important}@media (max-width:960px){.nav{display:none}.split,.trio{grid-template-columns:1fr}.compare{grid-template-columns:repeat(2,1fr)}.compare .is-eko{grid-column:1/-1}}@media (max-width:640px){.story-steps li{padding-right:10px;font-size:12px}.name-mark{width:min(70%,260px)}.compare{grid-template-columns:1fr}.compare svg{width:150px}.foot{text-align:center;justify-content:center}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
