@import url("../fonts/fonts.css");

:root{
  --mr-color-primary:#B7FF2A;
  --mr-color-accent:#E4FF70;
  --mr-color-dark:#1F1633;
  --mr-color-dark-deep:#150E23;
  --mr-color-surface:#2B2044;
  --mr-color-surface-raised:#352750;
  --mr-color-surface-soft:#40305D;
  --mr-color-light:#FFFDF7;
  --mr-color-text:#FFFDF7;
  --mr-color-text-muted:#C8C0D7;
  --mr-color-text-dim:#998DA8;
  --mr-color-violet:#7553FF;
  --mr-color-danger:#FF655A;
  --mr-color-warning:#FFCF52;
  --mr-color-success:#B7FF2A;
  --mr-line:rgba(228,255,112,.22);
  --mr-line-strong:rgba(183,255,42,.48);
  --mr-line-purple:rgba(180,154,255,.24);
  --mr-grid-line:rgba(255,255,255,.018);
  --mr-focus:0 0 0 3px rgba(183,255,42,.25);
  --mr-shadow-sm:5px 6px 0 rgba(13,8,24,.28);
  --mr-shadow-md:10px 12px 0 rgba(13,8,24,.3);
  --mr-shadow-glow:0 0 36px rgba(183,255,42,.09);
  --mr-font-heading:"Bricolage Grotesque",-apple-system,"PingFang SC","PingFang TC","Hiragino Sans GB","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans CJK KR","Microsoft YaHei",sans-serif;
  --mr-font-body:"Chivo",-apple-system,"PingFang SC","PingFang TC","Hiragino Sans GB","Hiragino Kaku Gothic ProN","Yu Gothic","Malgun Gothic","Microsoft YaHei",sans-serif;
  --mr-font-mono:"SFMono-Regular","Cascadia Code","Roboto Mono",Consolas,"Liberation Mono",monospace;
  --mr-fs-0:.75rem;
  --mr-fs-1:.875rem;
  --mr-fs-2:1rem;
  --mr-fs-3:1.25rem;
  --mr-fs-4:1.625rem;
  --mr-fs-5:2.5rem;
  --mr-fs-6:clamp(3rem,6vw,5.5rem);
  --mr-lh-tight:.98;
  --mr-lh-heading:1.08;
  --mr-lh-body:1.68;
  --mr-lh-code:1.65;
  --mr-weight-regular:400;
  --mr-weight-medium:600;
  --mr-weight-bold:700;
  --mr-weight-black:800;
  --mr-space-1:.5rem;
  --mr-space-2:1rem;
  --mr-space-3:1.5rem;
  --mr-space-4:2.5rem;
  --mr-space-5:4rem;
  --mr-space-6:6rem;
  --mr-space-7:8.75rem;
  --mr-radius-sm:.375rem;
  --mr-radius-md:.625rem;
  --mr-radius-lg:.875rem;
  --mr-radius-pill:999px;
  --mr-container-narrow:48rem;
  --mr-container-standard:73.75rem;
  --mr-container-wide:86rem;
  --mr-header-height:5rem;
  --mr-transition-fast:160ms cubic-bezier(.2,.8,.2,1);
  --mr-transition-base:220ms cubic-bezier(.2,.8,.2,1);
  --mr-z-header:100;
  --mr-z-menu:120;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  color-scheme:dark;
  scroll-behavior:auto;
  scroll-padding-top:calc(var(--mr-header-height) + var(--mr-space-3));
}

body{
  margin:0;
  min-width:0;
  overflow-x:hidden;
  color:var(--mr-color-text);
  background:
    radial-gradient(circle at 50% 0,rgba(117,83,255,.18),transparent 29rem),
    radial-gradient(circle at 88% 28%,rgba(183,255,42,.05),transparent 22rem),
    var(--mr-color-dark);
  font-family:var(--mr-font-body);
  font-size:var(--mr-fs-2);
  font-weight:var(--mr-weight-regular);
  line-height:var(--mr-lh-body);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.75;
  background-image:
    linear-gradient(var(--mr-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--mr-grid-line) 1px,transparent 1px);
  background-size:3rem 3rem;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 78%);
  mask-image:linear-gradient(to bottom,#000,transparent 78%);
}

img,
svg,
video,
canvas{
  display:block;
  max-width:100%;
}

img{
  height:auto;
}

button,
input,
textarea,
select{
  color:inherit;
  font:inherit;
}

button,
select{
  cursor:pointer;
}

a{
  color:inherit;
  text-decoration:none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6{
  overflow-wrap:anywhere;
}

h1,
h2,
h3,
h4,
h5,
h6{
  margin-block:0;
  font-family:var(--mr-font-heading);
  font-weight:var(--mr-weight-black);
  line-height:var(--mr-lh-heading);
  letter-spacing:-.03em;
}

h1{
  font-size:var(--mr-fs-6);
  line-height:var(--mr-lh-tight);
}

h2{
  font-size:clamp(2.25rem,4.5vw,3.5rem);
}

h3{
  font-size:var(--mr-fs-4);
}

h4{
  font-size:var(--mr-fs-3);
}

p{
  margin-block:0 1em;
}

strong{
  font-weight:var(--mr-weight-bold);
}

small{
  font-size:var(--mr-fs-0);
}

ul,
ol{
  margin-block:0;
  padding-inline-start:1.25rem;
}

table{
  width:100%;
  border-collapse:collapse;
}

pre,
code,
kbd,
samp{
  font-family:var(--mr-font-mono);
  font-variant-numeric:tabular-nums;
}

code{
  overflow-wrap:anywhere;
}

pre{
  max-width:100%;
  margin:0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  white-space:pre;
  -webkit-overflow-scrolling:touch;
}

::selection{
  color:var(--mr-color-dark);
  background:var(--mr-color-primary);
}

:focus-visible{
  outline:2px solid var(--mr-color-primary);
  outline-offset:3px;
}

[hidden]{
  display:none!important;
}

.mr-container,
.mr-container--narrow,
.mr-container--wide{
  width:min(100% - 2rem,var(--mr-container-standard));
  margin-inline:auto;
}

.mr-container--narrow{
  max-width:var(--mr-container-narrow);
}

.mr-container--wide{
  max-width:var(--mr-container-wide);
}

.mr-grid{
  display:grid;
  align-items:start;
  gap:var(--mr-space-3);
}

.mr-grid>*{
  min-width:0;
}

.mr-grid--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.mr-grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.mr-grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.mr-grid--sidebar{
  grid-template-columns:minmax(0,2fr) minmax(16rem,1fr);
}

.mr-stack{
  display:flex;
  flex-direction:column;
  gap:var(--mr-space-3);
}

.mr-cluster{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--mr-space-2);
}

.mr-center{
  text-align:center;
}

.mr-mono,
.mr-data{
  font-family:var(--mr-font-mono);
  font-variant-numeric:tabular-nums;
}

.mr-text-muted{
  color:var(--mr-color-text-muted);
}

.mr-text-lime{
  color:var(--mr-color-primary);
}

.mr-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.mr-mt-1{margin-top:var(--mr-space-1)}
.mr-mt-2{margin-top:var(--mr-space-2)}
.mr-mt-3{margin-top:var(--mr-space-3)}
.mr-mt-4{margin-top:var(--mr-space-4)}
.mr-mt-5{margin-top:var(--mr-space-5)}
.mr-mb-0{margin-bottom:0}
.mr-mb-2{margin-bottom:var(--mr-space-2)}
.mr-mb-3{margin-bottom:var(--mr-space-3)}
.mr-p-2{padding:var(--mr-space-2)}
.mr-p-3{padding:var(--mr-space-3)}
.mr-p-4{padding:var(--mr-space-4)}

main{overflow:clip}

.reveal{
  opacity:0;
  transform:translateY(1.25rem);
  transition:
    opacity 620ms cubic-bezier(.2,.8,.2,1),
    transform 620ms cubic-bezier(.2,.8,.2,1);
}

.reveal--left{
  transform:translateX(-1.25rem);
}

.reveal--right{
  transform:translateX(1.25rem);
}

.reveal--scale{
  transform:scale(.975);
}

.reveal.is-visible,
.reveal.reveal-immediate{
  opacity:1;
  transform:none;
}

@media(max-width:900px){
  :root{
    --mr-space-7:6rem;
  }

  .mr-grid--3,
  .mr-grid--4,
  .mr-grid--sidebar{
    grid-template-columns:1fr;
  }

  .mr-grid--2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  :root{
    --mr-fs-6:clamp(2.65rem,13vw,4.25rem);
    --mr-space-6:4.5rem;
    --mr-space-7:5rem;
    --mr-header-height:4.25rem;
  }

  .mr-container,
  .mr-container--narrow,
  .mr-container--wide{
    width:min(100% - 1.25rem,var(--mr-container-standard));
  }

  .mr-grid--2{
    grid-template-columns:1fr;
  }

  .mr-cluster{
    gap:.75rem;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }
}