:root{
  --clr-orange: #F99837;
  --clr-green: #168A43;
  --default-bg: oklch(0.205 0 0);
  --default-fg: oklch(0.985 0 0);
  --primary-bg: oklch(0.623 0.214 259.815);
  --primary-fg: oklch(1 0 0);
  --secondary-bg: oklch(0.97 0 0);
  --secondary-fg: oklch(0.205 0 0);
  --destructive-bg: oklch(0.577 0.245 27.325);
  --destructive-fg: oklch(1 0 0);
  --outline-bg: transparent;
  --outline-border: oklch(0.922 0 0);
  --outline-fg: oklch(0.145 0 0);
  --success-bg: oklch(62.7% .194 149.214);
  --success-fg: oklch(1 0 0);
  --warning-bg: oklch(79.5% .184 86.047);
  --warning-fg: oklch(1 0 0);
  --info-bg: oklch(82.8% .111 230.318);
  --info-fg: oklch(0.145 0 0);
}
*{margin:0;padding:0;box-sizing:border-box}
::placeholder{font-weight:normal;opacity:0.5;font-size:0.85rem}
html{scroll-behavior: smooth;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body{font-family:Geist,system-ui,sans-serif;font-size:16px;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
input,textarea,button,select,option{font-family:inherit;font-size:inherit}
.container{width:100vw;max-height:100vh;height:100%;max-width:1400px;margin:auto}
b{letter-spacing:-0.5px;}
h1,h2,h3,h4,h5,h6{font-weight:normal}
a{text-decoration:none;color:inherit}
a>*{pointer-events:none}
.link{color:var(--clr-orange);transition:300ms ease-in-out;cursor:pointer;}
.link:hover{color:var(--clr-green)}
.err{border-color:red !important}
ul,li{margin-left:1rem}
.flex{display:flex;flex-direction:row}
.flex-col{display:flex;flex-direction:column}
.fw{flex-wrap:wrap}
.f1{flex:1}.f2{flex:2}.f3{flex:3}
.jcfs{justify-content:flex-start}.jcc{justify-content:center}.jcfe{justify-content:flex-end}.jcsa{justify-content:space-around}.jcsb{justify-content:space-between}.jcse{justify-content:space-evenly}
.acfs{align-content:flex-start}.acc{align-content:center}.acfe{align-content:flex-end}.acsa{align-content:space-around}.acsb{align-content:space-between}.acse{align-content:space-evenly}
.aifs{align-items:flex-start}.aic{align-items:center}.aife{align-items:flex-end}
.tal{text-align:left}.tac{text-align:center}.taj{text-align:justify}.tar{text-align:right}
.g0{gap:0}.g05{gap:0.5rem}.g1{gap:1rem}.g15{gap:1.5rem}.g2{gap:2rem}.g25{gap:2.5rem}.g3{gap:3rem}
.m0{margin:0}.m05{margin:0.5rem}.m1{margin:1rem}.m15{margin:1.5rem}.m2{margin:2rem}.m25{margin:2.5rem}.m3{margin:3rem}
.mx0{margin-inline:0}.mx05{margin-inline:0.5rem}.mx1{margin-inline:1rem}.mx15{margin-inline:1.5rem}.mx2{margin-inline:2rem}.mx25{margin-inline:2.5rem}.mx3{margin-inline:3rem}
.my0{margin-block:0}.my05{margin-block:0.5rem}.my1{margin-block:1rem}.my15{margin-block:1.5rem}.my2{margin-block:2rem}.my25{margin-block:2.5rem}.my3{margin-block:3rem}
.mt0{margin-top:0}.mt05{margin-top:0.5rem}.mt1{margin-top:1rem}.mt15{margin-top:1.5rem}.mt2{margin-top:2rem}.mt25{margin-top:2.5rem}.mt3{margin-top:3rem}
.mr0{margin-right:0}.mr05{margin-right:0.5rem}.mr1{margin-right:1rem}.mr15{margin-right:1.5rem}.mr2{margin-right:2rem}.mr25{margin-right:2.5rem}.mr3{margin-right:3rem}
.mb0{margin-bottom:0}.mb05{margin-bottom:0.5rem}.mb1{margin-bottom:1rem}.mb15{margin-bottom:1.5rem}.mb2{margin-bottom:2rem}.mb25{margin-bottom:2.5rem}.mb3{margin-bottom:3rem}
.ml0{margin-left:0}.ml05{margin-left:0.5rem}.ml1{margin-left:1rem}.ml15{margin-left:1.5rem}.ml2{margin-left:2rem}.ml25{margin-left:2.5rem}.ml3{margin-left:3rem}
.p0{padding:0}.p05{padding:0.5rem}.p1{padding:1rem}.p15{padding:1.5rem}.p2{padding:2rem}.p25{padding:2.5rem}.p3{padding:3rem}
.px0{padding-inline:0}.px05{padding-inline:0.5rem}.px1{padding-inline:1rem}.px15{padding-inline:1.5rem}.px2{padding-inline:2rem}.px25{padding-inline:2.5rem}.px3{padding-inline:3rem}.px5{padding-inline:5rem}
.py0{padding-block:0}.py05{padding-block:0.5rem}.py1{padding-block:1rem}.py15{padding-block:1.5rem}.py2{padding-block:2rem}.py25{padding-block:2.5rem}.py3{padding-block:3rem}.px5{padding-block:5rem}
.pt0{padding-top:0}.pt05{padding-top:0.5rem}.pt1{padding-top:1rem}.pt15{padding-top:1.5rem}.pt2{padding-top:2rem}.pt25{padding-top:2.5rem}.pt3{padding-top:3rem}
.pr0{padding-right:0}.pr05{padding-right:0.5rem}.pr1{padding-right:1rem}.pr15{padding-right:1.5rem}.pr2{padding-right:2rem}.pr25{padding-right:2.5rem}.pr3{padding-right:3rem}
.pb0{padding-bottom:0}.pb05{padding-bottom:0.5rem}.pb1{padding-bottom:1rem}.pb15{padding-bottom:1.5rem}.pb2{padding-bottom:2rem}.pb25{padding-bottom:2.5rem}.pb3{padding-bottom:3rem}
.pl0{padding-left:0}.pl05{padding-left:0.5rem}.pl1{padding-left:1rem}.pl15{padding-left:1.5rem}.pl2{padding-left:2rem}.pl25{padding-left:2.5rem}.pl3{padding-left:3rem}

.fw1{font-weight:100}.fw2{font-weight:200}.fw3{font-weight:300}.fw4{font-weight:400}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fw9{font-weight:900}
.fs05{font-size:0.5rem}.fs075{font-size:0.75rem}.fs085{font-size:0.85rem}.fs1{font-size:1rem}.fs125{font-size:1.25rem}.fs15{font-size:1.5rem}.fs175{font-size:1.75rem}.fs2{font-size:2rem}.fs25{font-size:2.5rem}.fs3{font-size:3rem}.fs35{font-size:3.5rem}.fs4{font-size:4rem}.fs45{font-size:4.5rem}.fs5{font-size:5rem}
.ls-1{letter-spacing:-1px}.ls-2{letter-spacing:-2px}.ls-3{letter-spacing:-3px}.ls-4{letter-spacing:-4px}.ls-5{letter-spacing:-5px}.ls{letter-spacing:0}.ls1{letter-spacing:1px}.ls2{letter-spacing:2px}.ls3{letter-spacing:3px}.ls4{letter-spacing:4px}.ls5{letter-spacing:5px}
.o0{opacity:0}.o1{opacity:0.1}.o2{opacity:0.2}.o3{opacity:0.3}.o4{opacity:0.4}.o5{opacity:0.5}.o5{opacity:0.5}.o6{opacity:0.6}.o7{opacity:0.7}.o8{opacity:0.8}.o9{opacity:0.9}.o{opacity:1}
.lh1{line-height:1}.lh125{line-height:1.25}.lh15{line-height:1.5}.lh2{line-height:2}.lh225{line-height:2.25}.lh25{line-height:2.5}.lh3{line-height:3}

header{background:linear-gradient(45deg,white,#afffff);box-shadow:0 0 8px 4px rgba(0,0,0,0.1);position:sticky;left:0;top:0;z-index:1;padding-top:env(safe-area-inset-top);}
.inner{max-width:1200px;margin:auto;width:100%;padding:0.5rem 1rem}
.brand{display:flex;align-items:center;gap:0.5rem}
.logo {--size:8px;width:calc(3 * var(--size));background-color:white;height:calc(3 * var(--size));border-top:var(--size) solid var(--clr-orange);border-bottom:var(--size) solid var(--clr-green);display:block;border-radius:100%;}
nav{display:flex;gap:2rem;font-weight:500;opacity:1}
nav a{transition:300ms ease-in-out;}
nav a.active,nav a:hover{font-weight:800}
/* nav a.active{color:purple} */
nav a.disabled{opacity:0.5;user-select:none;pointer-events:none}
.btn{background-color:black;color:#fff;font-size:14px;padding:0.5rem 1rem;border-radius:9999px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:300ms linear;outline:transparent;}
.btn-primary{background-color:royalblue}
.btn-secondary{background-color:silver;color:#333}
.btn-ghost{background-color:transparent;color:#333}
.btn-outline{background-color:transparent;color:#333;border:1px solid #999}
.btn-success{background-color:forestgreen}
.btn-warning{background-color:orange}
.btn-danger{background-color:red}
.btn-info{background-color:skyblue;color:#333}
.nav_btn{width:24px;height:24px;background-color:transparent;border:none;cursor:pointer;display:none;}
.btn:hover,.btn:focus{opacity:0.75;background-color:black;color:#fff}

main{min-height:calc(100dvh - 90px)}
footer{text-align:center;display:block;}
.profile { background-color:var(--clr-orange); color:white;border-radius:100%;width:32px;height:32px;display:grid;place-content:center;place-items:center;cursor:pointer;text-align:center;font-weight:600}

/* Form related */
ul.errors {border: 1px solid #999;padding: 1rem;margin: 0;margin-bottom: 1rem;border-radius: 0.5rem;background-color: #ff7f5022;}
ul.errors li.header {font-weight: bold;font-size: 1rem;list-style-type: none;margin: 0;margin-bottom: 0.25rem;color: red;}
ul.errors li {font-size: 0.8rem;color: #333;line-height: 1.5;}
.group {display:flex;flex-direction:column;gap: 0.35rem;margin-bottom:1rem;width:100%}
.group label {font-size: 0.9rem;opacity: 0.75;width:100%}
.group input {padding: 0.5rem;border-radius: 0.35rem;border: 1px solid #ccc;outline: transparent;width:100%;&:focus {border: 1.5px solid #999;}}
.group small {opacity: 0.5;width:100%}
.show-error {border-color:red;}
.error-message {color:red;font-size: 0.75rem;}

.box {border:1px solid transparent;padding:1.5rem;max-width:375px;width:100%;border-radius:1.5rem;box-shadow: 0 0 8px 8px rgba(0,0,0,0.1);}
.busy{--delay:100ms;width:8px;height:8px;background-color:purple;border-radius:100%;display:inline-block;position:relative;animation: busy 1s var(--delay) ease-in-out infinite alternate-reverse;display:flex;justify-self:center; }
.busy::before{position:absolute;content:'';width:8px;height:8px;background-color:purple;border-radius:100%;display:inline-block;left:12px;--delay:0ms;animation: busy 1s var(--delay) ease-in-out infinite alternate-reverse}
.busy::after{position:absolute;content:'';width:8px;height:8px;background-color:purple;border-radius:100%;display:inline-block;left:24px;--delay:200ms;animation: busy 1s var(--delay) ease-in-out infinite alternate-reverse}

@keyframes busy {
  from{opacity:0;transform:scale(0.9) translateY(-4px);animation-delay:var(--delay);} to{opacity:1;transform:scale(1.1) translateY(4px);animation-delay:var(--delay);}
}


@media screen and (max-width: 800px) {  
  nav{position:absolute;top:calc(51px + env(safe-area-inset-top));right:0;overflow:auto;background-color:white;width:100%;height:fit-content;padding:1rem;border-bottom:1px solid #999;justify-content:center;opacity:0;max-width:100%;pointer-events:none;}
  nav a:first-child{display:none;}
  .nav_btn{display:unset}
}