/* GENERATED by scripts/brand/build.mjs. Do not edit; change the source in brand/ and run `npm run brand:build`. */
@font-face{font-family:"StepQuest Body";src:url("fonts/stepquest-body.ttf") format("truetype");font-display:block}
@font-face{font-family:"StepQuest Label";src:url("fonts/stepquest-label.ttf") format("truetype");font-display:block}
:root{--sq-ink:#000000;--sq-paper:#FFFFFF;--sq-muted:#767676;--sq-phoneLightPale:#E3F1FD;--sq-phoneLightBlue:#C7ECFD;--sq-phoneLightCyan:#B7F4FE}
.sq-type-label{font-family:"StepQuest Label",monospace;font-size:24px;line-height:24px}
.sq-type-label-large{font-family:"StepQuest Label",monospace;font-size:36px;line-height:36px}
.sq-type-body{font-family:"StepQuest Body",monospace;font-size:24px;line-height:24px}
.sq-type-caption{font-family:"StepQuest Body",monospace;font-size:18px;line-height:18px}
.sq-type-micro{font-family:"StepQuest Body",monospace;font-size:12px;line-height:12px}
[class*="sq-type-"]{font-weight:400;font-style:normal;font-synthesis:none;font-kerning:none;font-variant-ligatures:none;letter-spacing:0}
.sq-pixelated{image-rendering:pixelated}
.sq-button{border-style:solid;border-color:transparent;border-width:calc(3px * var(--sq-scale, 2)) calc(3px * var(--sq-scale, 2)) calc(3px * var(--sq-scale, 2)) calc(3px * var(--sq-scale, 2));border-image:url("ui/button.svg") 3 3 3 3 fill / calc(3px * var(--sq-scale, 2)) calc(3px * var(--sq-scale, 2)) calc(3px * var(--sq-scale, 2)) calc(3px * var(--sq-scale, 2)) / 0 stretch;image-rendering:pixelated;background-clip:padding-box}
.sq-frame{border-style:solid;border-color:transparent;border-width:calc(2px * var(--sq-scale, 2)) calc(2px * var(--sq-scale, 2)) calc(2px * var(--sq-scale, 2)) calc(2px * var(--sq-scale, 2));border-image:url("ui/frame.svg") 2 2 2 2 fill / calc(2px * var(--sq-scale, 2)) calc(2px * var(--sq-scale, 2)) calc(2px * var(--sq-scale, 2)) calc(2px * var(--sq-scale, 2)) / 0 stretch;image-rendering:pixelated;background-clip:padding-box}