/* mrxlabs. house style: dark, monochrome, hairline rules. colour carries
   meaning only. serif display, mono for facts, calm asymmetric motion. */
:root{
--bg:#0a0a0c;--surface:#131316;--surface-2:#1a1a1e;--surface-3:#232329;
--border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.13);
--text:#f5f5f7;--text-2:#9a9aa2;--text-3:#5d5d66;--red:#ff453a;
--radius:10px;--radius-lg:16px;
--ease:cubic-bezier(.32,.72,0,1);--ease-out:cubic-bezier(.16,1,.3,1);--back:cubic-bezier(.34,1.4,.64,1);
--display:'Sitka Display','Sitka Heading',Georgia,serif;
--body:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
--mono:'Cascadia Mono',Consolas,ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);scrollbar-color:var(--surface-3) var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.65 var(--body)}
/* film grain, above the background and below everything else */
body::before{content:"";position:fixed;inset:0;z-index:-1;opacity:.04;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
main{max-width:60rem;padding:2rem 2rem 4rem}
section{margin:0 0 2.5rem}
a{color:var(--text);text-decoration-color:var(--border-strong);text-underline-offset:2px}
a:hover{color:#fff;text-decoration-color:var(--text-2)}
:focus-visible{outline:1px solid var(--text-3);outline-offset:2px}

/* type */
h1,h2{font-family:var(--display);letter-spacing:-.025em;font-weight:600;margin:.4rem 0 .8rem;animation:rise .5s var(--ease-out) both}
h3{font-family:var(--display);letter-spacing:-.02em;font-weight:600;font-size:1.05rem;margin:1.75rem 0 .4rem}
h2 a{text-decoration:none}
.lead{color:var(--text-2);max-width:38rem;font-size:1.05rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--text-2)} .small{font-size:.85rem} .err{color:var(--red)}
.right{text-align:right}
.empty{font-family:var(--display);font-weight:400;font-size:1.4rem;color:var(--text-3);margin:3rem 0 .5rem;animation:rise .5s var(--ease-out) both}
.label{font-family:var(--mono);font-size:.78rem;color:var(--text-3);margin:2.75rem 0 .25rem;letter-spacing:normal}
.wide{max-width:46rem}
.auth{max-width:24rem}

/* entrance kinds: headings rise, hero words climb out of a mask, rows wipe */
@keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes wordup{from{transform:translateY(115%)}to{transform:none}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.wiperow{animation:wipe .45s var(--ease) both}
.wiperow:nth-child(2){animation-delay:.03s}.wiperow:nth-child(3){animation-delay:.06s}
.wiperow:nth-child(4){animation-delay:.09s}.wiperow:nth-child(5){animation-delay:.12s}
.wiperow:nth-child(6){animation-delay:.15s}.wiperow:nth-child(7){animation-delay:.18s}

/* hero */
.hero{margin:3rem 0 3.5rem}
.hero h1{font-size:clamp(2.4rem,6vw,4rem);line-height:1.08;margin:0 0 1.25rem;animation:none}
.hero-h .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.hero-h .w>span{display:inline-block;transform:translateY(115%);animation:wordup .7s var(--ease-out) forwards}
.hero-h .w:nth-child(1)>span{animation-delay:.05s}.hero-h .w:nth-child(2)>span{animation-delay:.11s}
.hero-h .w:nth-child(3)>span{animation-delay:.17s}.hero-h .w:nth-child(4)>span{animation-delay:.23s}
.cta{margin-top:1.75rem}

/* facts on the landing page: a list, sized to its content, hairline rules */
.facts{margin:0;max-width:36rem}
.facts div{display:flex;gap:1.25rem;padding:.6rem 0;border-bottom:1px solid var(--border);animation:wipe .45s var(--ease) both}
.facts div:nth-child(2){animation-delay:.05s}.facts div:nth-child(3){animation-delay:.1s}
.facts div:nth-child(4){animation-delay:.15s}.facts div:nth-child(5){animation-delay:.2s}.facts div:nth-child(6){animation-delay:.25s}
.facts dt{width:12rem;flex:none;color:var(--text-3);font-size:.78rem;padding-top:.2rem}
.facts dd{margin:0;color:var(--text-2)}

/* nav */
.nav{display:flex;gap:1.5rem;align-items:center;padding:.9rem 2rem;border-bottom:1px solid var(--border);
position:sticky;top:0;background:var(--bg);z-index:10}
.navspace{flex:1}
.nav a{color:var(--text-2);text-decoration:none;font-size:.92rem}
.nav a:hover{color:#fff}
.nav .link{background:none;border:0;color:var(--text-2);font:inherit;cursor:pointer;padding:0}
.nav .link:hover{color:#fff}
.wordmark{font-family:var(--display);font-size:1.15rem;letter-spacing:-.02em;margin-right:1rem;color:var(--text)!important}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--border);padding:1rem 2rem;font-size:.72rem;color:var(--text-3)}

/* buttons: fast press, slow settle with overshoot */
.btn,button[type=submit]{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface-3);
color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius);padding:.45rem 1.05rem;
font:inherit;cursor:pointer;text-decoration:none;transition:transform .42s var(--back),border-color .15s,background-color .15s}
.btn:hover,button[type=submit]:hover{border-color:rgba(255,255,255,.3);background:#2b2b33}
.btn:active,button[type=submit]:active,button.link:active,button.chipbutton:active{transform:scale(.97);transition-duration:.09s}
.btn.primary,button[type=submit].primary{background:var(--text);color:#0a0a0c;border-color:transparent}
.btn.primary:hover,button[type=submit].primary:hover{background:#fff}
button.link{background:none;border:0;color:var(--text-2);font:inherit;cursor:pointer;padding:0;transition:transform .42s var(--back)}
button.link:hover{color:#fff}
.inline{display:inline}

/* forms */
form label{display:block;margin:1rem 0;font-family:var(--mono);font-size:.78rem;color:var(--text-2)}
input,select,textarea{display:block;width:100%;max-width:22rem;background:var(--surface);border:1px solid var(--border-strong);
border-radius:var(--radius);color:var(--text);padding:.5rem .75rem;font:inherit;margin-top:.3rem;
transition:border-color .15s,box-shadow .15s}
textarea{max-width:36rem}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.22)}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(255,255,255,.35);box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.row{display:flex;gap:.75rem;align-items:center;margin:.6rem 0;flex-wrap:wrap}
.alt{margin-top:2.5rem;border-top:1px solid var(--border);padding-top:.5rem}
.alt .label{margin-top:.75rem}

/* tables */
table.files{border-collapse:collapse;width:100%;margin:1rem 0}
table.files td{padding:.45rem .75rem;border-bottom:1px solid var(--border);transition:background-color .15s}
table.files tr:hover td{background:var(--surface)}

/* chips, tabs, filters */
.chip{display:inline-block;border:1px solid var(--border-strong);border-radius:6px;padding:.05rem .55rem;font-size:.72rem;color:var(--text-2)}
button.chipbutton{display:inline-block;background:none;border:1px solid var(--border-strong);border-radius:6px;padding:.05rem .55rem;
font-family:var(--mono);font-size:.72rem;color:var(--text-2);cursor:pointer;margin-right:.3rem;transition:transform .42s var(--back)}
button.chipbutton:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.tabs{display:flex;gap:1.5rem;margin:1.25rem 0 0;border-bottom:1px solid var(--border)}
.tabs a{color:var(--text-2);text-decoration:none;font-size:.82rem;padding:.45rem 0}
.tabs a:hover{color:#fff}
.tabs a.on{color:var(--text);border-bottom:2px solid var(--text)}
.filters a{color:var(--text-2);text-decoration:none;margin-right:1rem;font-size:.78rem}
.filters a:hover{color:#fff}
.filters a.on{color:var(--text)}

/* repo, code, readme */
.repohead{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.repohead h2{margin:0}
.clone{border:1px solid var(--border);border-radius:var(--radius);padding:.5rem .75rem;display:inline-flex;align-items:center;gap:.75rem;color:var(--text-2);font-size:.82rem}
pre.code{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;overflow:auto;font-size:.85rem}
.readme{margin-top:2rem;max-width:44rem}
.readme h1,.readme h2,.readme h3{font-family:var(--display);letter-spacing:-.02em}
.readme pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem;overflow:auto}
.readme code{font-family:var(--mono);font-size:.9em}
.readme blockquote{color:var(--text-2);border-left:2px solid var(--border-strong);margin-left:0;padding-left:1rem}
.readme img{max-width:100%}

/* issues */
.issuetop{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;flex-wrap:wrap;gap:.75rem}
.issuehead{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.issuehead h2{margin:0}
.comment{border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin:1rem 0;max-width:44rem}
.issueactions{border-top:1px solid var(--border);margin-top:2rem;padding-top:1rem}
.issueactions form{display:inline-block;margin-right:1.5rem;vertical-align:top}
.issueactions label{display:inline;margin-right:.3rem;font-size:.78rem}
.issueactions select{display:inline-block;width:auto;max-width:16rem}

/* recovery codes */
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,15rem));gap:.5rem;margin:1.25rem 0}
.code{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.4rem .6rem;font-size:.85rem;color:var(--text);animation:wipe .45s var(--ease) both}
.code:nth-child(2){animation-delay:.03s}.code:nth-child(3){animation-delay:.06s}.code:nth-child(4){animation-delay:.09s}
.code:nth-child(5){animation-delay:.12s}.code:nth-child(6){animation-delay:.15s}
.code:nth-child(7){animation-delay:.18s}.code:nth-child(8){animation-delay:.21s}
.code:nth-child(9){animation-delay:.24s}.code:nth-child(10){animation-delay:.27s}

/* dashboard */
.dashhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

@media (max-width:640px){
main{padding:1.25rem 1rem 3rem}
.nav{padding:.8rem 1rem;gap:1rem}
.foot{padding:1rem}
.facts dt{width:8.5rem}
.facts div{gap:.75rem}
.codes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.hero-h .w>span{transform:none}
}