<meta
name="description"
content="Fonoster: The open-source alternative to Twilio"
/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..700&display=swap"
rel="stylesheet"
/>
<style>
:root {
--font-sans:
"Poppins", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
* {
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: rgb(226 232 240);
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
html,
body {
font-feature-settings:
"rlig" 1,
"calt" 1;
-webkit-tap-highlight-color: transparent;
text-rendering: optimizeLegibility;
font-family: var(--font-sans);
}
[data-sonner-toast][data-styled="true"] [data-content] {
width: 100%;
}
#storybook-root {
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
width: 100%;
}
.sbdocs.sbdocs-content {
max-width: 840px;
}
.sbdocs :is(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)) {
font-size: 3.5rem;
line-height: 3.5rem;
font-weight: bold;
}
.sbdocs :is(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) {
font-size: 2rem;
line-height: 2.25rem;
font-weight: bold;
border: none;
margin-bottom: 1rem;
}
.sbdocs :is(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) {
font-size: 1.5rem;
line-height: 1.75rem;
font-weight: bold;
}
.sbdocs :is(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) {
font-size: 1.25rem;
line-height: 1.5rem;
font-weight: bold;
}
.sbdocs :is(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
.sbdocs :is(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
font-size: 1.125rem;
line-height: 1.5rem;
}
.sbdocs :is(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)) {
text-decoration: underline;
text-underline-position: under;
}
.sbdocs :is(em:not(.sb-anchor, .sb-unstyled, .sb-unstyled em)) {
font-style: italic;
}
.sbdocs :is(strong:not(.sb-anchor, .sb-unstyled, .sb-unstyled strong)) {
font-weight: 700;
}
</style>