*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0 0 var(--sp-2); color:var(--ink); }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ margin:0 0 var(--sp-3); }
a{ color:inherit; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent-soft); color:var(--ink); }

input,textarea,select{
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--paper-raised);
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  width:100%;
  transition:border-color var(--dur-fast) var(--ease);
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{ resize:vertical; }
label{ display:block; font-size:var(--fs-small); color:var(--ink-soft); margin:0 0 6px; }

*:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:var(--hairline-strong); border-radius:99px; border:3px solid var(--paper); }
::-webkit-scrollbar-track{ background:transparent; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}