@layer theme, legacy, base, components, utilities;
@import url('./tokens.css');
@layer legacy {
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--nf-paper);color:var(--nf-pencil);font-family:var(--nf-font-ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
a{color:inherit;text-underline-offset:5px}button,a,input,textarea,select{touch-action:manipulation}
button{cursor:pointer}button:disabled{cursor:default}
:focus-visible{outline:var(--focus);outline-offset:5px}
img,svg{max-width:100%}svg.icon{width:20px;height:20px;vertical-align:middle;flex:none}
.skip{position:absolute;top:-100px;left:20px;z-index:5;padding:12px;background:var(--nf-pencil);color:var(--nf-on-accent)}.skip:focus{top:10px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

}