@font-face{font-display:fallback;font-family:Geist Variable;font-style:normal;font-weight:100 900;src:url(/playground/identity/fonts/Geist-Variable.woff2)format("woff2-variations")}@font-face{font-display:fallback;font-family:Geist Mono Variable;font-style:normal;font-weight:100 900;src:url(/playground/identity/fonts/GeistMono-Variable.woff2)format("woff2-variations")}:root{--sans:"Geist Variable", ui-sans-serif, system-ui, sans-serif;--mono:"Geist Mono Variable", ui-monospace, monospace;--bg:#060606;--panel:#191919;--panel-head:#191919;--ink:#ebebeb;--secondary:#a6a6a6;--dim:#757575;--line:#ebebeb33;--line-soft:#ebebeb1a;--button:#191919;--button-hover:#262626;--purple:#9e94ff;--green:#98f3aa;--orange:#fa9247;--red:#e96367;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--ink);font:14px / 1.5 var(--sans), sans-serif;margin:0}::selection{background:var(--ink);color:var(--bg)}button,input{color:inherit;font:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}button:disabled{cursor:default;opacity:.5}.header{justify-content:space-between;align-items:center;gap:24px;padding:20px 32px;display:flex}.logo{color:var(--ink);display:block}.logo svg{width:auto;height:18px;display:block}.nav{flex-wrap:wrap;gap:8px;display:flex}.nav-item,.button{background:var(--button);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;padding:6px 12px;font-size:13px;line-height:16px;text-decoration:none}.nav-item:hover,.button:hover:not(:disabled){background:var(--button-hover);border-color:var(--secondary)}.page{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:48px;max-width:1440px;margin:0 auto;padding:40px 32px 64px;display:grid}.main{flex-direction:column;gap:24px;display:flex}.intro{flex-direction:column;gap:16px;padding-bottom:8px;display:flex}.label{color:var(--purple);font-family:var(--mono);text-transform:uppercase;font-size:13px;line-height:16px}.label:before{color:currentColor;content:"■ "}.title{letter-spacing:-.03em;margin:0;font-size:48px;font-weight:400;line-height:1}.lede{color:var(--secondary);margin:0;font-size:18px;line-height:1.3}.dim{color:var(--dim)}.ink{color:var(--ink)}.prompt{color:var(--purple)}.error{color:var(--red)}.link{color:var(--ink);text-decoration:underline;-webkit-text-decoration-color:var(--dim);text-decoration-color:var(--dim);text-underline-offset:3px;width:fit-content;text-decoration-thickness:1px}.link:hover:not(:disabled){-webkit-text-decoration-color:var(--ink);text-decoration-color:var(--ink)}.action{color:var(--purple);white-space:nowrap}.action:hover:not(:disabled){text-underline-offset:3px;text-decoration:underline}.tabs{flex-wrap:wrap;gap:4px;display:flex}.tab{color:var(--secondary);border:1px solid #0000;padding:5px 12px;font-size:15px}.tab:hover{color:var(--ink)}.tab[data-active=true]{border-color:var(--ink);color:var(--ink)}.tab .price{color:var(--dim);font-family:var(--mono);font-size:12px}.panel{background:var(--panel);font-family:var(--mono);border:1px solid #3c3c3c;border-radius:0;flex-direction:column;font-size:13px;line-height:1.64;display:flex;overflow:hidden}.panel-head{background:var(--panel-head);color:oklch(90% 0 0);letter-spacing:-.14px;text-transform:uppercase;border-bottom:1px solid oklch(27% 0 0);align-items:center;gap:16px;min-height:48px;padding:0 16px;font-size:14px;line-height:16px;display:flex}.panel-body{flex-direction:column;gap:12px;min-height:200px;padding:16px 20px;display:flex}.panel-row{border-top:1px solid var(--line-soft);align-items:center;gap:10px;min-height:44px;padding:8px 20px;display:flex}.placeholder{color:var(--dim)}.input{caret-color:var(--purple);background:0 0;border:0;outline:none;flex:1;min-width:0;padding:0}.input::placeholder{color:var(--dim);opacity:1}.panel .button{padding:4px 10px;font-size:12px}.result{flex-direction:column;gap:16px;display:flex}.haiku{font-family:var(--sans);letter-spacing:-.01em;font-size:22px;line-height:1.4}.hops{font-family:var(--mono);flex-direction:column;gap:4px;font-size:13px;display:flex}.hop{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;display:grid}.hop-path{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[data-status=ok]{color:var(--green)}[data-status=pay]{color:var(--orange)}.code-stack{flex-direction:column;gap:16px;height:calc(100vh - 120px);display:flex;position:sticky;top:24px}.code{flex:1;min-height:0}.code-body{flex:1;padding:8px;display:grid;overflow:auto}.code-lines{color:#adbac7;font-family:var(--mono);overflow-wrap:anywhere;white-space:pre-wrap;min-width:0;margin:0;padding:8px 0;font-size:13px;line-height:20px}.code-plain{padding:8px}.code-line{min-height:20px;padding:0 8px 0 14px;position:relative}.code-lines:not([data-diff]) .code-line{padding-left:8px}.code-changed{border-radius:3px}[data-change=add]>.code-changed{background:#55aa5a33}[data-change=del]>.code-changed{background:#e5534b33}.code-note{background:#272727;display:flow-root}.code-line[data-change]:before{content:"";width:4px;position:absolute;top:0;bottom:0;left:0}.code-line[data-change=add]{background:linear-gradient(90deg,#222b21 6px,#263326 6px)}.code-line[data-change=add]:before{background:#57ab5a}.code-line[data-change=del]{background:linear-gradient(90deg,#352420 6px,#3e2622 6px)}.code-line[data-change=del]:before{background:linear-gradient(#e5534b 50%,#3d2723 50%) 0 0/4px 4px}@media (width<=960px){.page{grid-template-columns:minmax(0,1fr);padding:24px 20px 48px}.header{padding:16px 20px}.title{font-size:36px}.code-stack{height:auto;position:static}}.coming-soon{color:#00d66f;font-weight:400}.panel-row:has(.topic){flex-wrap:wrap}.topic{flex-basis:100%;align-items:center;gap:8px;padding-left:20px;display:flex}.tab[data-tier=link]{color:#00d66f}.tab[data-tier=link][data-active=true]{border-color:#00d66f}.explain-toggle{flex-shrink:0;margin-left:auto}.explain-toggle[aria-pressed=true]{border-color:var(--purple);color:var(--purple)}.code-explanation{border-left:2px solid var(--purple);color:#b9b4d8;font-family:var(--sans);white-space:normal;background:#202024;margin:8px 16px;padding:8px 12px;font-size:13px;line-height:1.5}.header .logo{flex-shrink:0}.nav{justify-content:flex-end}.nav-dropdown{position:relative}.nav-dropdown summary{cursor:pointer;list-style:none}.nav-dropdown summary::-webkit-details-marker{display:none}.nav-dropdown-items{background:var(--panel);border:1px solid var(--line);z-index:10;flex-direction:column;min-width:220px;padding:4px;display:flex;position:absolute;top:calc(100% + 8px);right:0}.nav-dropdown-items a{color:var(--secondary);font-family:var(--mono);padding:8px 12px;font-size:13px;text-decoration:none}.nav-dropdown-items a:hover,.nav-dropdown-items a:focus-visible{background:var(--button-hover);color:var(--ink)}@media (width<=640px){.header{flex-direction:column;align-items:flex-start;gap:16px}.nav{justify-content:flex-start;width:100%;position:relative}.nav-dropdown{position:static}}.t0{color:#f47067}.t1{color:#96d0ff}.t2{color:#768390}.t3{color:#f69d50}.t4{color:#6cb6ff}.t5{color:#dcbdfb}