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

:root{
  --mb-orange:#ff7a00;
  --mb-orange-strong:#e66e00;
  --mb-orange-soft:#ffc247;
  --mb-orange-pale:#fff1e3;
  --mb-ink:#12100d;
  --mb-black:#080808;
  --mb-paper:#ffffff;
  --mb-cream:#fffdf8;
  --mb-surface:#f2f0eb;
  --mb-surface-dark:#1a1815;
  --mb-muted:#69655e;
  --mb-muted-light:#aaa69f;
  --mb-line:#d8d4cc;
  --mb-line-dark:#393630;
  --mb-success:#60d978;
  --mb-danger:#d84b36;
  --mb-font-heading:"Chivo",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --mb-font-body:"Albert Sans",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans CJK JP","Noto Sans KR","Malgun Gothic",sans-serif;
  --mb-font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --mb-fs-xs:.6875rem;
  --mb-fs-sm:.8125rem;
  --mb-fs-body:.9375rem;
  --mb-fs-lead:1.125rem;
  --mb-fs-h3:1.5rem;
  --mb-fs-h2:3.375rem;
  --mb-fs-h1:5rem;
  --mb-lh-tight:.98;
  --mb-lh-heading:1.08;
  --mb-lh-body:1.6;
  --mb-space-1:.5rem;
  --mb-space-2:1rem;
  --mb-space-3:1.5rem;
  --mb-space-4:2.5rem;
  --mb-space-5:4rem;
  --mb-space-6:6rem;
  --mb-space-7:7.5rem;
  --mb-radius-sm:.25rem;
  --mb-radius-md:.5rem;
  --mb-radius-lg:1.25rem;
  --mb-shadow-soft:0 18px 48px rgba(18,16,13,.08);
  --mb-container-narrow:47rem;
  --mb-container:75rem;
  --mb-container-wide:82.5rem;
  --mb-header-height:4.25rem;
  --mb-transition:180ms cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;text-size-adjust:100%}
body{
  margin:0;
  min-width:0;
  overflow-x:hidden;
  background:var(--mb-paper);
  color:var(--mb-ink);
  font-family:var(--mb-font-body);
  font-size:var(--mb-fs-body);
  line-height:var(--mb-lh-body);
  -webkit-font-smoothing:antialiased;
}
main{display:block;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,h4,h5,h6,blockquote,figure{margin-top:0}
p:last-child{margin-bottom:0}
h1,h2,h3,h4,h5,h6{
  color:inherit;
  font-family:var(--mb-font-heading);
  font-weight:650;
  letter-spacing:-.035em;
}
h1{font-size:clamp(3.25rem,6.2vw,var(--mb-fs-h1));line-height:var(--mb-lh-tight)}
h2{font-size:clamp(2.4rem,4.3vw,var(--mb-fs-h2));line-height:var(--mb-lh-heading)}
h3{font-size:var(--mb-fs-h3);line-height:1.18}
::selection{background:var(--mb-orange-soft);color:var(--mb-ink)}
:focus-visible{outline:3px solid var(--mb-orange-soft);outline-offset:3px}
.mb-container,.mb-container-wide,.mb-container-narrow{
  width:calc(100% - 2rem);
  margin-inline:auto;
}
.mb-container{max-width:var(--mb-container)}
.mb-container-wide{max-width:var(--mb-container-wide)}
.mb-container-narrow{max-width:var(--mb-container-narrow)}
.mb-grid{display:grid;gap:var(--mb-space-2)}
.mb-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mb-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mb-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mb-grid>*{min-width:0}
.mb-stack>*+*{margin-top:var(--mb-space-3)}
.mb-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mb-space-2)}
.mb-split{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--mb-space-4)}
.mb-mono{
  font-family:var(--mb-font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.mb-lead{color:#504c46;font-size:var(--mb-fs-lead);line-height:1.55}
.mb-muted{color:var(--mb-muted)}
.mb-on-dark{color:var(--mb-paper)}
.mb-text-center{text-align:center}
.mb-max-copy{max-width:43rem}
.mb-space-top-2{margin-top:var(--mb-space-2)}
.mb-space-top-3{margin-top:var(--mb-space-3)}
.mb-space-top-4{margin-top:var(--mb-space-4)}
.mb-space-top-5{margin-top:var(--mb-space-5)}
.mb-pad-block-5{padding-block:var(--mb-space-5)}
.mb-pad-block-6{padding-block:var(--mb-space-6)}
.mb-pad-block-7{padding-block:var(--mb-space-7)}
.mb-visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.mb-code,.mb-prose pre{
  max-width:100%;
  overflow-x:auto;
  padding:var(--mb-space-3);
  border:1px solid var(--mb-line-dark);
  border-radius:var(--mb-radius-md);
  background:var(--mb-ink);
  color:#ddd8ce;
  font-family:var(--mb-font-mono);
  font-size:var(--mb-fs-sm);
  font-variant-numeric:tabular-nums;
}
.mb-prose{font-size:1rem}
.mb-prose>*+*{margin-top:var(--mb-space-3)}
.mb-prose h2{margin-top:var(--mb-space-5)}
.mb-prose h3{margin-top:var(--mb-space-4)}
.mb-prose a{text-decoration:underline;text-decoration-color:var(--mb-orange);text-underline-offset:.2em}
.mb-prose ul,.mb-prose ol{padding-left:1.35rem}
.reveal,.reveal-up,.reveal-scale{opacity:0;transition:opacity .55s ease,transform .55s ease}
.reveal-up{transform:translateY(18px)}
.reveal-scale{transform:scale(.985)}
.reveal.is-visible,.reveal-up.is-visible,.reveal-scale.is-visible{opacity:1;transform:none}
@media (max-width:900px){
  :root{--mb-space-7:5rem;--mb-fs-h2:2.75rem}
  .mb-grid-3,.mb-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mb-split{align-items:flex-start;flex-direction:column}
}
@media (max-width:620px){
  .mb-container,.mb-container-wide,.mb-container-narrow{width:calc(100% - 1.5rem)}
  .mb-grid-2,.mb-grid-3,.mb-grid-4{grid-template-columns:1fr}
}
@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,.reveal-up,.reveal-scale{opacity:1;transform:none}
}