:root{--em-violet: #8b5cf6;--em-violet-deep: #6d28d9;--em-pink: #ec4899;--em-muted: #9ca3af;--em-panel: #181c25;--em-gradient: linear-gradient(120deg, var(--em-violet), var(--em-pink))}.em-hero{position:relative;margin:1rem 0 2rem;text-align:center;&:before{position:absolute;inset:-3rem 10% auto;z-index:-1;filter:blur(60px);background:radial-gradient(closest-side,rgb(139 92 246 / .35),transparent);height:14rem;content:""}& h1{margin:.5rem 0 1rem;background:var(--em-gradient);background-clip:text;color:transparent;font-size:clamp(2.2rem,6vw,3.4rem);letter-spacing:-.02em}& p{margin:0 auto;max-width:42rem;font-size:1.05rem}}.em-kicker{border:1px solid rgb(139 92 246 / .4);border-radius:999px;background:#8b5cf61f;padding:.2rem .8rem;color:#c4b5fd;font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.em-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin:0 0 2.5rem;padding:0;list-style:none;& li{display:flex;flex-direction:column;gap:.35rem;border:1px solid var(--border);border-radius:1rem;background:linear-gradient(160deg,#ffffff0d,#ffffff03);padding:1.1rem 1.2rem}& span{font-size:1.6rem}& small{color:var(--em-muted);line-height:1.5}& code{border:1px solid rgb(139 92 246 / .45);background:#8b5cf626;padding:0 .3rem;color:var(--color);font-weight:600}}.em-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.75rem;margin-bottom:1.5rem;& a{display:grid;grid-template-columns:auto 1fr;column-gap:.75rem;align-items:center;transition:border-color .2s,transform .2s;border:1px solid var(--border);border-radius:.9rem;background:var(--em-panel);padding:.8rem 1rem;color:inherit;text-decoration:none;&:hover{transform:translateY(-2px);border-color:#8b5cf699}&[aria-current=page]{border-color:transparent;background:linear-gradient(var(--em-panel),var(--em-panel)) padding-box,var(--em-gradient) border-box;border:2px solid transparent;box-shadow:0 10px 30px -12px #8b5cf6b3}}& small{grid-column:2;color:var(--em-muted);font-size:.8rem}}.em-picker-icon{display:grid;grid-row:span 2;place-items:center;border-radius:.6rem;background:#8b5cf626;width:2.4rem;height:2.4rem;font-size:1.3rem}.em-window{border:1px solid var(--border);border-radius:1rem;background:var(--em-panel);overflow:hidden;box-shadow:0 30px 60px -30px #000c}.em-chrome,.em-editor>figcaption{display:flex;align-items:center;gap:.4rem;border-bottom:1px solid var(--border);background:#12151c;padding:.6rem 1rem;color:var(--em-muted);font-size:.8rem;& i{border-radius:50%;background:#ff5f57;width:.7rem;height:.7rem;&:nth-child(2){background:#febc2e}&:nth-child(3){background:#28c840}}>span:last-child{margin-left:auto}}.em-chrome>span{flex:1;margin-right:2.5rem;text-align:center}.em-message{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.9rem;border-bottom:1px solid var(--border);padding:1.1rem 1.25rem;>div{display:flex;flex:1;flex-direction:column;gap:.2rem;min-width:14rem}& strong{font-size:1.1rem}& small{color:var(--em-muted);overflow-wrap:anywhere}}.em-avatar{display:grid;flex:none;place-items:center;border-radius:50%;background:var(--em-gradient);width:2.75rem;height:2.75rem;color:#fff;font-weight:800;font-size:1.1rem}.em-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem;& span{border:1px solid var(--border);border-radius:999px;padding:.05rem .55rem;color:var(--em-muted);font-size:.72rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}}.em-download{align-self:center;transition:filter .2s;border-radius:.6rem;background:var(--em-gradient);padding:.55rem 1.1rem;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;&:hover{filter:brightness(1.12)}}.em-panes{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem;padding:1rem;& figure{display:flex;flex-direction:column;margin:0;border:1px solid var(--border);border-radius:.75rem;min-width:0;overflow:hidden}& figcaption{display:flex;align-items:center;gap:.5rem;background:#12151c;padding:.5rem 1rem;color:var(--em-muted);font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;& small{margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none}}& iframe{border:0;background:#f4f4f7;width:100%;height:34rem}.em-plain{background:#0f1117}}.em-dot{border-radius:50%;background:var(--em-violet);width:.55rem;height:.55rem;&[data-kind=text]{background:#22d3ee}}.em-source{margin-top:3rem;& h2{margin-bottom:.25rem}>p{margin-bottom:1rem;color:var(--em-muted);text-align:center}}.em-editor{margin:0;border:1px solid var(--border);border-radius:.75rem;background:var(--code-bg);overflow:hidden;box-shadow:0 .75rem 2rem #00000059;>figcaption{background:color-mix(in srgb,var(--secondary) 10%,var(--code-bg));& code{margin-left:.6rem;background:none;padding:0;color:#e5e7eb}}}.em-chrome-dots{display:flex;gap:.4rem}.em-code{margin:0;border-radius:0;background:none;max-height:32rem;overflow:auto;color:#f8f8f2;font-size:.8rem;white-space:pre;>code{padding:1rem 1.25rem;min-width:max-content;line-height:1.6}}