:root {
  color-scheme:dark;
  --bg:#101913;
  --panel:#19251d;
  --line:#344439;
  --ink:#f0f4e9;
  --mute:#b2c1b5;
  --lime:#c8ff57;
  font:16px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  min-height:100vh;
  background:radial-gradient(ellipse at 77% 0%,#1d3829,transparent 55%);
}
main {
  width:min(1120px,100%);
  padding:0 clamp(18px,4vw,48px) 64px;
  margin:auto;
}
header,.header-end,.brand,.section-head,.entry,.tools,.card-actions {
  display:flex;
  align-items:center;
}
header {
  height:80px;
  border-bottom:1px solid var(--line);
  justify-content:space-between;
}
.header-end {
  gap:22px;
}
.brand {
  gap:10px;
  font-weight:800;
  letter-spacing:-.06em;
  font-size:24px;
  text-decoration:none;
  color:var(--ink);
}
.owner,.kicker,.count,.stats small,#completed,.pill {
  font-family:ui-monospace,Consolas,monospace;
}
.owner {
  color:var(--mute);
  font-size:12px;
}
.hidden {
  display:none!important;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3,.stats strong {
  line-height:1;
  letter-spacing:-.065em;
}
h1 {
  font-size:clamp(48px,7vw,88px);
}
h1 span {
  color:var(--lime);
}
h2 {
  font-size:clamp(24px,3vw,35px);
}
.kicker {
  display:block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  font-weight:650;
  color:#bef18a;
  margin-bottom:18px;
}
button,input,.upload {
  font:inherit;
}
button,.upload {
  cursor:pointer;
}
button {
  color:inherit;
}
button:focus-visible,a:focus-visible,input:focus-visible,.upload:focus-within {
  outline:3px solid var(--lime);
  outline-offset:4px;
}
.quiet,.tools button,.upload {
  background:transparent;
  border:1px solid var(--line);
  border-radius:9px;
  padding:9px 15px;
  font-size:13px;
}
.quiet:hover,.tools button:hover,.upload:hover {
  background:#283c2e;
}
.access {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  border-radius:25px;
  overflow:hidden;
  margin-top:clamp(40px,9vh,110px);
  background:var(--panel);
}
.access-copy {
  padding:clamp(28px,4vw,54px);
  align-self:center;
}
.intro,.card p,.history p {
  color:var(--mute);
}
.intro {
  margin-top:24px;
}
form {
  margin-top:46px;
}
form label {
  display:block;
  font-size:13px;
  font-weight:650;
  margin-bottom:8px;
}
.entry {
  gap:8px;
}
.entry input {
  width:0;
  flex:1;
  border:1px solid #58685a;
  background:#101a13;
  padding:14px;
  color:var(--ink);
  border-radius:9px;
}
.primary {
  background:var(--lime);
  color:#152512;
  border:0;
  border-radius:9px;
  font-weight:750;
  padding:14px 21px;
}
.primary span {
  margin-left:12px;
}
#login-error {
  color:#ffb1a2;
  font-size:13px;
  margin-top:8px;
}
.access-art {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#9ed685;
  background-image:linear-gradient(#376b4021 1px,transparent 1px),linear-gradient(90deg,#376b4021 1px,transparent 1px),radial-gradient(ellipse at 40% 25%,#e5f9ac,transparent 70%);
  background-size:28px 28px,28px 28px,auto;
}
.access-art {
  min-height:390px;
  display:grid;
  place-items:center;
}
.orbit {
  position:absolute;
  border:1px solid #33593e66;
  width:85%;
  height:46%;
  border-radius:50%;
  transform:rotate(-30deg);
}
.orbit-two {
  width:106%;
  height:66%;
  transform:rotate(33deg);
}
.badge {
  width:42%;
  max-width:190px;
  aspect-ratio:1;
  border-radius:24%;
  background:#223c24;
  box-shadow:4px 6px #5c8240,8px 12px #335735,12px 18px #214125;
  transform:rotate(-15deg) skewY(-6deg);
  animation:float 6s ease-in-out infinite;
}
.badge img {
  width:100%;
  display:block;
}
.badge-shadow {
  position:absolute;
  width:42%;
  height:13%;
  background:#18381b40;
  filter:blur(12px);
  border-radius:50%;
  top:72%;
}
.page-head {
  padding:56px 0 32px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:34px;
}
.page-intro {
  width:min(330px,100%);
  padding-bottom:8px;
  color:var(--mute);
  font-size:14px;
}
.project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.app-panel {
  --app-accent:var(--lime);
  position:relative;
  min-width:0;
  min-height:190px;
  display:grid;
  grid-template-columns:108px minmax(0,1fr) 34px;
  align-items:center;
  gap:22px;
  padding:26px;
  overflow:hidden;
  text-align:left;
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(135deg,#1b2a20 0%,var(--panel) 70%);
  box-shadow:0 14px 35px #0711091f;
  transition:transform .25s ease,border-color .25s ease,background-color .25s ease;
}
.app-panel:before {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-90px;
  bottom:-120px;
  border-radius:50%;
  background:var(--app-accent);
  opacity:.08;
  filter:blur(4px);
}
.app-panel:hover {
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--app-accent) 55%,var(--line));
  background:#1e2e23;
}
.app-icon {
  width:108px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:25px;
  background:#0b110d;
  border:1px solid #ffffff17;
  box-shadow:0 12px 25px #050c0773;
}
.app-icon img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.financeel {
  --app-accent:#73db3d;
}
.financeel .app-icon {
  padding:8px;
  background:linear-gradient(145deg,#f3ffe9,#bceca3);
}
.gym {
  --app-accent:#ff2929;
}
.futsalix {
  --app-accent:#258cff;
}
.portfolio {
  --app-accent:#a67eea;
}
.portfolio .app-icon img {
  image-rendering:pixelated;
}
.raid {
  --app-accent:#7dc9d1;
  grid-column:1/-1;
  min-height:166px;
  cursor:pointer;
}
.raid-icon {
  background:radial-gradient(circle at 44% 35%,#dff5b7,#70aeb1 70%);
}
.raid-icon img {
  width:112%;
  height:112%;
  object-fit:contain;
  filter:drop-shadow(0 7px 4px #173b464d);
}
.app-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.app-meta {
  margin-bottom:10px;
  color:color-mix(in srgb,var(--app-accent) 80%,white);
  font:650 10px/1.3 ui-monospace,Consolas,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.app-copy strong {
  font-size:clamp(25px,3vw,36px);
  line-height:1;
  letter-spacing:-.055em;
}
.app-copy>span:last-child {
  max-width:34ch;
  margin-top:12px;
  color:var(--mute);
  font-size:13px;
  line-height:1.45;
}
.app-open {
  position:relative;
  z-index:1;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  align-self:start;
  border:1px solid #ffffff1f;
  border-radius:50%;
  color:var(--app-accent);
  font-size:18px;
  transition:transform .25s ease,background .25s ease;
}
.app-panel:hover .app-open {
  transform:translate(2px,-2px);
  background:#ffffff0d;
}
.portrait:before {
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  border:1px solid #fff7;
  transform:rotate(-25deg) scaleY(.76);
}
.back {
  margin:26px 0;
}
.tracker-title h1 {
  font-size:clamp(44px,6vw,76px);
}
.stats {
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  gap:12px;
  margin:28px 0 38px;
}
.stats>div {
  background:var(--panel);
  border:1px solid var(--line);
  padding:clamp(14px,2.3vw,27px);
  border-radius:15px;
}
.stats>div:first-child {
  background:var(--lime);
  color:#17311a;
}
.stats span,.stats small,.stats strong {
  display:block;
}
.stats span {
  font-weight:620;
  font-size:14px;
}
.stats strong {
  font-size:clamp(32px,5vw,61px);
  margin:10px 0 7px;
  font-variant-numeric:tabular-nums;
}
.stats small {
  font-size:11px;
  opacity:.8;
}
.section-head {
  justify-content:space-between;
  margin-bottom:16px;
}
#completed,.pill {
  font-size:10px;
  letter-spacing:.06em;
}
.cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.card {
  --accent:#b0e5f2;
  --shade:#44697e;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--panel);
}
.card:nth-child(2) {
  --accent:#ffd2b5;
  --shade:#a76d67;
}
.card:nth-child(3) {
  --accent:#f4eada;
  --shade:#929bb3;
}
.card:nth-child(4) {
  --accent:#b2afe6;
  --shade:#596083;
}
.portrait {
  position:relative;
  height:150px;
  overflow:hidden;
  background:repeating-linear-gradient(135deg,transparent 0 16px,#fff1 17px 18px),linear-gradient(105deg,var(--accent),var(--shade));
}
.portrait:before {
  inset:-38% 10% -25% 27%;
}
.portrait img {
  position:absolute;
  right:3%;
  top:-15%;
  height:142%;
  width:73%;
  object-fit:contain;
  filter:drop-shadow(0 5px 4px #11233140);
  transition:transform .4s;
}
.card:hover img {
  transform:translateY(-3px) rotate(-2deg);
}
.pill {
  position:absolute;
  left:16px;
  top:14px;
  background:#17291fe6;
  color:white;
  border-radius:30px;
  padding:5px 10px;
}
.done .pill {
  background:var(--lime);
  color:#142313;
}
.card-body {
  padding:20px;
}
.card h3 {
  font-size:26px;
}
.card p {
  font-size:14px;
  margin:9px 0 17px;
}
.count {
  font-size:12px;
}
.bar {
  appearance:none;
  width:100%;
  display:block;
  height:5px;
  border:none;
  border-radius:4px;
  overflow:hidden;
  background:#344438;
  margin:9px 0 18px;
}
.bar::-webkit-progress-bar {
  background:#344438;
}
.bar::-webkit-progress-value {
  background:var(--accent);
}
.bar::-moz-progress-bar {
  background:var(--accent);
}
.card-actions {
  gap:8px;
}
.round,.finish {
  border:1px solid #4c6152;
  background:#25362b;
  border-radius:9px;
  min-height:44px;
}
.round {
  width:44px;
  font-size:21px;
}
.plus {
  background:var(--accent);
  border-color:transparent;
  color:#14231a;
}
.finish {
  margin-left:auto;
  font-size:13px;
  padding:0 12px;
}
button:disabled {
  opacity:.35;
  cursor:default;
}
.tools {
  gap:8px;
  flex-wrap:wrap;
  margin-top:24px;
}
.upload {
  position:relative;
  overflow:hidden;
}
.upload input {
  position:absolute;
  inset:0;
  width:100%;
  opacity:0;
  cursor:pointer;
}
.history {
  margin-top:40px;
}
.history h2 {
  font-size:22px;
  margin-bottom:14px;
}
.history p {
  font-size:13px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
#notice {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#e6f5d8;
  color:#152719;
  border-radius:12px;
  padding:12px 18px;
  display:none;
}
@keyframes float {
  50% {
    transform:translateY(-8px) rotate(-10deg) skewY(-6deg);
  }
}
@keyframes appear {
  from {
    opacity:0;
    transform:translateY(8px);
  }
  to {
    opacity:1;
    transform:none;
  }
}
section:not(.hidden) {
  animation:appear .32s ease-out;
}
button:active:not(:disabled) {
  scale:.985;
}
@media(max-width:680px) {
  header {
    height:64px;
  }
  .header-end {
    gap:8px;
  }
  .header-end:has(#logout:not(.hidden)) .owner {
    display:none;
  }
  .access {
    grid-template-columns:1fr;
    margin-top:24px;
  }
  .access-art {
    order:-1;
    min-height:165px;
  }
  .badge {
    width:85px;
  }
  .access-copy {
    padding:25px;
  }
  .intro {
    margin-top:12px;
  }
  form {
    margin-top:25px;
  }
  .page-head {
    padding:34px 0 22px;
    display:block;
  }
  .page-intro {
    margin-top:15px;
    padding:0;
  }
  .project-grid {
    grid-template-columns:1fr;
  }
  .app-panel,.raid {
    grid-column:auto;
    grid-template-columns:76px minmax(0,1fr) 30px;
    gap:14px;
    min-height:138px;
    padding:17px;
    border-radius:16px;
  }
  .app-icon {
    width:76px;
    border-radius:18px;
  }
  .app-copy strong {
    font-size:25px;
  }
  .app-copy>span:last-child {
    margin-top:8px;
    font-size:12px;
  }
  .app-meta {
    margin-bottom:7px;
    font-size:8px;
  }
  .app-open {
    width:30px;
    height:30px;
  }
  .stats {
    grid-template-columns:1.15fr 1fr 1fr;
    gap:6px;
  }
  .stats>div {
    padding:13px 9px;
  }
  .stats span {
    font-size:12px;
  }
  .stats small {
    font-size:10px;
  }
  .cards {
    grid-template-columns:1fr;
  }
  .portrait {
    height:133px;
  }
  .section-head {
    align-items:center;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}