*,*::before,*::after{
box-sizing:border-box;
}
html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
background:var(--bg0);
}
body{
margin:0;
background:var(--bg0);
color:var(--tx1);
font-family:var(--ff1);
font-size:var(--fz1);
line-height:var(--lh1);
overflow-wrap:break-word;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{
margin:0;
}
ol,ul{
padding:0;
list-style:none;
}
svg{
display:block;
}
button,input{
margin:0;
border:0;
font:inherit;
color:inherit;
}
button{
cursor:pointer;
}
[hidden]{
display:none !important;
}
strong{
font-weight:700;
}
h1,h2,h3,h4{
font-family:var(--ff2);
font-weight:700;
line-height:var(--lh3);
letter-spacing:var(--ls1);
text-wrap:balance;
}
h1{
font-size:var(--fh2);
}
h2{
font-size:var(--fh3);
}
h3,h4{
font-size:var(--fh4);
}
.title-xl{
font-size:var(--fh1);
line-height:var(--lh2);
letter-spacing:var(--ls2);
}
.title-lg{
font-size:var(--fh2);
line-height:var(--lh2);
letter-spacing:var(--ls2);
}
.title-md{
font-size:var(--fh3);
}
.title-sm{
font-size:var(--fh4);
}
.mono{
font-family:var(--ff3);
}
.muted{
color:var(--tx2);
}
.lead{
max-width:var(--mw3);
color:var(--tx2);
font-size:var(--fz3);
}
.lead .mono{
color:var(--tx1);
}
a{
color:inherit;
text-decoration:none;
text-decoration-thickness:var(--ul1);
text-underline-offset:var(--ul2);
}
a:hover,a:focus-visible{
text-decoration-line:underline;
}
:focus-visible{
outline:var(--fo1);
outline-offset:var(--fo2);
}
[tabindex="-1"]:focus{
outline:none;
}
.visually-hidden,.skip-link:not(:focus){
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
}
.skip-link{
position:absolute;
top:var(--sp2);
left:var(--sp2);
z-index:10;
display:inline-flex;
align-items:center;
min-height:var(--bh1);
padding:0 var(--gp1);
border-radius:var(--br9);
background:var(--tx1);
color:var(--tx3);
font-weight:700;
}
.wrap{
width:100%;
max-width:var(--mw1);
margin-inline:auto;
padding-inline:var(--gp3);
}
.wrap-narrow{
max-width:var(--mw2);
}
.section{
margin-top:var(--gp2);
scroll-margin-top:var(--sp4);
}
.section-title,.section-head{
margin-bottom:var(--sp5);
}
.section-head .lead{
margin-top:var(--gp1);
}
.site-header{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:0 var(--gp1);
max-width:var(--mw1);
margin-inline:auto;
padding:var(--gp1) var(--gp3);
}
.brand{
display:inline-flex;
align-items:center;
gap:var(--sp2);
min-height:var(--bh1);
font-family:var(--ff3);
font-size:var(--fz3);
font-weight:700;
}
.brand-hook{
flex:none;
width:var(--hk1);
height:var(--hk2);
color:var(--ac1);
}
.site-nav{
display:flex;
flex-wrap:wrap;
gap:0 var(--sp4);
}
.site-nav a{
display:inline-flex;
align-items:center;
min-height:var(--th1);
color:var(--tx2);
font-size:var(--fz2);
font-weight:500;
}
.site-nav a:hover,.site-nav a:focus-visible{
color:var(--tx1);
}
.site-footer{
max-width:var(--mw1);
margin:var(--gp2) auto 0;
padding:var(--sp5) var(--gp3);
color:var(--tx2);
font-size:var(--fz2);
}
.site-footer p{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:0 var(--gp1);
}
.site-footer a{
display:inline-flex;
align-items:center;
min-height:var(--th1);
color:var(--tx1);
}
.site-footer a[href^="mailto:"]{
font-family:var(--ff3);
}
.pill{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--pg1);
min-height:var(--bh1);
padding:var(--sp2) var(--gp1);
border-radius:var(--br9);
font-family:var(--ff1);
font-size:var(--fz2);
font-weight:700;
line-height:var(--lh3);
text-align:center;
text-decoration:none;
white-space:nowrap;
cursor:pointer;
transition:background-color .15s,color .15s;
}
.pill:hover,.pill:focus-visible{
text-decoration:none;
}
.pill-light{
background:var(--tx1);
color:var(--tx3);
}
.pill-light:hover{
background:var(--ac1);
}
.pill-dark{
background:var(--bg2);
color:var(--tx1);
}
.pill-dark:hover{
background:var(--bg3);
}
.pill-lg{
min-height:var(--bh2);
padding-inline:var(--sp4);
font-size:var(--fz3);
}
.copy-done{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
visibility:hidden;
}
.copy-button.is-copied .copy-label{
visibility:hidden;
}
.copy-button.is-copied .copy-done{
visibility:visible;
}
.copy-short{
display:none;
}
.text-link{
display:inline-flex;
align-items:center;
min-height:var(--bh1);
font-weight:700;
}
.panel{
padding:var(--gp3);
background:var(--bg1);
}
.grid{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:var(--sp3);
}
.chip,.tag{
display:inline-flex;
align-items:center;
padding:var(--sp1) var(--sp2);
font-family:var(--ff3);
font-size:var(--fz2);
font-weight:800;
line-height:var(--lh3);
letter-spacing:var(--ls3);
}
.chip{
background:var(--tx2);
color:var(--tx3);
}
.chip-ok{
background:var(--ok1);
}
.chip-warn{
background:var(--wn1);
}
.chip-bad{
background:var(--bd1);
}
.tag{
background:var(--bg3);
color:var(--tx2);
font-weight:500;
letter-spacing:0;
}
.field-label{
display:block;
margin-bottom:var(--sp2);
font-weight:700;
}
.field{
width:100%;
min-height:var(--bh1);
padding:0 var(--gp1);
border-radius:var(--br9);
background:var(--bg2);
color:var(--tx1);
font-size:var(--fz1);
}
.field::placeholder{
color:var(--tx2);
opacity:1;
}
.form-error{
color:var(--bd1);
font-weight:700;
}
.form-error:not(:empty){
margin-top:var(--sp2);
}
.hero-line{
display:block;
}
.hero{
padding-top:var(--sp6);
}
.hero-grid{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:var(--sp5);
margin-top:var(--sp5);
}
.actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--sp3) var(--gp1);
margin-top:var(--sp4);
}
.note{
margin-top:var(--gp1);
color:var(--tx2);
font-size:var(--fz2);
}
.sandbox{
padding:0;
}
.sandbox-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp3);
padding:var(--sp1) var(--sp1) var(--sp1) var(--gp3);
background:var(--bg2);
color:var(--tx2);
font-size:var(--fz2);
}
.sandbox-name{
display:flex;
align-items:center;
gap:var(--sp2);
min-height:var(--bh1);
}
.sandbox-toggle{
min-width:var(--tg1);
}
.terminal{
padding:var(--gp3);
font-size:var(--fz2);
line-height:var(--lh1);
font-variant-ligatures:none;
}
.term-lines{
display:grid;
gap:var(--sp1);
}
.term-line{
padding-left:2ch;
text-indent:-2ch;
overflow-wrap:anywhere;
}
.term-prompt{
color:var(--ac1);
font-weight:700;
}
.term-key{
color:var(--tx2);
}
.term-bad{
color:var(--bd1);
font-weight:800;
}
.pixel-badge{
width:100%;
max-width:var(--bw1);
height:auto;
margin-top:var(--gp1);
transform-origin:left center;
}
.badge-fill{
fill:var(--bd1);
}
.badge-ink{
fill:var(--tx3);
}
.is-playing .term-char{
position:relative;
color:transparent;
}
.is-playing .term-char.is-on{
color:inherit;
}
.is-playing .term-line:not(.is-on) .term-prompt{
visibility:hidden;
}
.is-playing .term-char.is-caret::after{
content:"";
position:absolute;
top:0;
bottom:0;
left:100%;
width:1ch;
background:var(--ac1);
animation:caret 1s steps(1) infinite;
}
.is-playing:not(.is-done) .pixel-badge{
visibility:hidden;
}
.is-playing.is-done .pixel-badge{
animation:badge-in .45s steps(3) both;
}
.is-paused .term-char.is-caret::after,.is-paused .pixel-badge{
animation:none;
}
@keyframes caret{
50%{
opacity:0;
}
}
@keyframes badge-in{
from{
transform:scale(1.25);
}
to{
transform:scale(1);
}
}
.card{
display:flex;
flex-direction:column;
gap:var(--sp2);
}
.card p{
color:var(--tx2);
}
.card .mono{
color:var(--tx1);
}
.card-num{
color:var(--ac1);
}
.card .card-lead{
color:var(--tx1);
font-size:var(--fz3);
}
.tip{
margin-top:var(--gp1);
color:var(--tx2);
}
.tip strong{
color:var(--tx1);
}
.soon-item{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:var(--sp2);
}
.soon-name{
font-family:var(--ff2);
font-size:var(--fh4);
font-weight:700;
line-height:var(--lh3);
letter-spacing:var(--ls1);
}
.split{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:var(--sp5);
}
.split .section-head{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:var(--sp4);
margin:0;
}
.mock{
display:flex;
flex-direction:column;
gap:var(--gp1);
}
.mock-lead{
font-family:var(--ff2);
font-size:var(--fh4);
font-weight:700;
line-height:var(--lh3);
letter-spacing:var(--ls1);
}
.mock-rows{
display:grid;
gap:var(--sp1);
}
.mock-row{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:0 var(--gp1);
padding:var(--sp2) var(--sp3);
background:var(--bg2);
}
.mock-row dt{
color:var(--tx2);
}
.mock-row .mono{
overflow-wrap:anywhere;
}
.faq{
display:grid;
gap:var(--sp1);
max-width:var(--mw2);
}
.faq-item{
padding:0;
}
.faq-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--gp1);
min-height:var(--bh1);
padding:var(--gp1) var(--gp3);
font-family:var(--ff2);
font-size:var(--fz3);
font-weight:700;
line-height:var(--lh3);
list-style:none;
cursor:pointer;
}
.faq-item summary::-webkit-details-marker{
display:none;
}
.faq-item summary::after{
content:"+";
flex:none;
color:var(--ac1);
font-family:var(--ff3);
font-size:var(--fh4);
line-height:1;
}
.faq-item[open] summary::after{
content:"-";
}
.faq-item summary:focus-visible{
outline-offset:calc(var(--fo2) * -1);
}
.faq-item p{
padding:0 var(--gp3) var(--gp1);
color:var(--tx2);
}
.join{
display:grid;
gap:var(--sp4);
max-width:var(--mw3);
margin-inline:auto;
text-align:center;
}
.join-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--sp2);
}
.join .field{
background:var(--bg3);
}
.join-row .field{
flex:1 1 16em;
width:auto;
min-width:0;
padding:var(--sp3) var(--sp4);
}
.join-row .pill{
flex:none;
}
.join-done{
font-family:var(--ff2);
font-size:var(--fh3);
font-weight:700;
line-height:var(--lh3);
color:var(--ok1);
}
.prose{
padding-top:var(--sp6);
}
.prose>*+*{
margin-top:var(--sp3);
}
.prose h1{
margin-bottom:var(--sp4);
}
.prose h2{
margin-top:var(--sp5);
}
.prose ul{
padding-left:1.2em;
list-style:square;
}
.prose li+li{
margin-top:var(--sp1);
}
.prose li::marker{
color:var(--ac1);
}
.prose p a,.prose li a{
color:var(--ac1);
}
.prose .lead{
margin-bottom:var(--sp4);
}
.missing .pill{
margin-top:var(--sp4);
}
@media (min-width:480px){
.grid-4{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.soon-item{
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
}
.mock-row{
grid-template-columns:minmax(0,11em) minmax(0,1fr);
}
}
@media (min-width:600px){
.terminal{
font-size:var(--fz1);
}
}
@media (min-width:720px){
.grid-3{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (min-width:880px){
.site-nav{
order:0;
}
}
@media (max-width:879px){
.site-nav{
order:3;
width:100%;
gap:0 var(--sp3);
}
}
@media (max-width:419px){
.site-header{
gap:0 var(--sp2);
}
.copy-long{
display:none;
}
.copy-short{
display:inline;
}
}
@media (min-width:1000px){
.grid-3{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.grid-4{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.hero-grid{
grid-template-columns:minmax(0,5fr) minmax(0,7fr);
align-items:start;
}
.split{
grid-template-columns:minmax(0,5fr) minmax(0,7fr);
align-items:start;
}
}
@media (max-width:359px){
.brand-name{
position:absolute;
width:1px;
height:1px;
margin:-1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
}
}
@media (prefers-reduced-motion:no-preference){
html{
scroll-behavior:smooth;
}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation:none !important;
transition:none !important;
}
}