@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;}
:root {
--site-bg: #111114;
--site-panel: #18181b;
--site-surface: #1c1c1f;
--site-surface-raised: #222225;
--site-border: #27272a;
--site-sep: #1f1f22;
--site-text: #ececf1;
--site-value: #d4d4d8;
--site-mute: #a1a1aa;
--site-label: #8b8b92;
--site-focus: #6b8699;
--site-focus-glow: rgba(107, 134, 153, 0.28);
--site-accent-border: rgba(107, 134, 153, 0.42);
--site-action-bg: #131316;
--site-paper: #fafafa;
--site-paper-text: #18181b;
--site-paper-mute: #52525b;
--site-paper-label: #71717a;
--site-paper-border: #e4e4e7;
--site-paper-surface: #ffffff;}
html,
body {
background: var(--site-bg);
color: var(--site-text);}
body {
font-family: 'Inter', system-ui, sans-serif;
font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'ss01', 'cv11';}
::selection {
background: var(--site-focus);
color: #fff;}
.hair {
background: var(--site-sep);}
.hair-strong {
background: var(--site-border);}
button:focus-visible,
a:focus-visible {
outline: 1px solid var(--site-focus);
outline-offset: 2px;
box-shadow: 0 0 0 3px var(--site-focus-glow);}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1.125rem;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
color: var(--site-paper-text);
background: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
transition:
background-color 0.14s ease,
border-color 0.14s ease,
color 0.14s ease,
box-shadow 0.14s ease,
transform 0.14s ease;
text-decoration: none;}
.btn-primary:hover {
background: #f4f4f5;
border-color: rgba(255, 255, 255, 0.55);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);}
.btn-primary:active {
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1.125rem;
font-size: 0.78rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.01em;
color: var(--site-text);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
box-shadow: none;
transition:
background-color 0.14s ease,
border-color 0.14s ease,
color 0.14s ease,
filter 0.14s ease;
text-decoration: none;}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.28);
color: var(--site-text);}
.btn-ghost:active {
filter: brightness(0.92);}
.btn-full {
width: 100%;
justify-content: center;}
.no-scrollbar::-webkit-scrollbar {
display: none;}
.no-scrollbar {
scrollbar-width: none;}
.brand-mark {
display: block;
flex: none;
object-fit: contain;}
.brand-wordmark {
display: block;
flex: none;
object-fit: contain;}
.eyebrow {
font-family: ui-monospace, 'Cascadia Mono', 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--site-label);}
.site-container {
width: 100%;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;}
.pricing-plans {
align-items: stretch;}
.plan-card {
display: flex;
flex-direction: column;
align-self: stretch;
min-height: 100%;}
.plan-card-intro {
flex: none;
height: 15.75rem;
display: flex;
flex-direction: column;}
.plan-card-badge {
display: flex;
justify-content: flex-end;
align-items: flex-start;
height: 1.75rem;
flex: none;}
.plan-card-sub {
flex: 1;
min-height: 0;
margin-top: 0.375rem;}
.plan-card-price {
display: flex;
align-items: baseline;
gap: 0.375rem;
height: 3.25rem;
flex: none;
margin-top: 1.5rem;}
.plan-card-unit {
height: 2.5rem;
flex: none;
margin-top: 0.5rem;}
.plan-card-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;}
.plan-card-features {
min-height: 11.25rem;}
@media (max-width: 767px) {
.plan-card-intro {
height: auto;}
.plan-card-features {
min-height: 0;}}
.section-dark {
background: var(--site-bg);
color: var(--site-text);}
.section-light {
background: var(--site-paper);
color: var(--site-paper-text);}
.section-light .eyebrow {
color: var(--site-paper-label);}
.section-light .btn-primary {
color: #fafafa;
background: var(--site-paper-text);
border-color: var(--site-paper-text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);}
.section-light .btn-primary:hover {
background: #27272a;
border-color: #27272a;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);}
.section-light .btn-ghost {
color: var(--site-paper-text);
background: var(--site-paper-surface);
border-color: var(--site-paper-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);}
.section-light .btn-ghost:hover {
background: #fafafa;
border-color: #d4d4d8;
color: var(--site-paper-text);}
.section-light .text-ink-text {
color: var(--site-paper-text);}
.section-light .text-ink-mute {
color: var(--site-paper-mute);}
.section-light .text-ink-label {
color: var(--site-paper-label);}
.section-light .text-ink-value {
color: var(--site-paper-mute);}
.section-light .text-ink-faint {
color: var(--site-paper-label);}
.section-light .bg-ink-s1,
.section-light .bg-ink-s2,
.section-light .bg-ink-s3 {
background-color: var(--site-paper-surface);}
.section-light .border-ink-b1,
.section-light .border-ink-b2,
.section-light .border-ink-b3 {
border-color: var(--site-paper-border);}
.section-light .bg-ink-b2 {
background-color: var(--site-paper-border);}
.section-light .hair {
background: var(--site-paper-border);}
.section-light .bg-ink-ax {
background-color: var(--site-paper-text);}
.section-light .rounded-\[8px\].border.bg-ink-s2,
.section-light .rounded-\[6px\].border.bg-ink-s2 {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);}
.app-screenshot-placeholder {
background: var(--site-surface-raised, #1c1c1f);}
.section-light .app-screenshot-placeholder {
background: #f4f4f5;}
.tag-chip {
display: inline-flex;
align-items: center;
font-family: ui-monospace, 'Cascadia Mono', 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
font-size: 10px;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 3px 6px;
border-radius: 3px;
border: 1px solid transparent;
white-space: nowrap;}
.tag-chip--accent {
background: rgba(107, 134, 153, 0.16);
color: #c5d5e3;
border-color: rgba(107, 134, 153, 0.42);}
.tag-chip--neutral {
background: rgba(255, 255, 255, 0.05);
color: #d4d4d8;
border-color: #2e2e33;}
.tag-chip--muted {
background: rgba(255, 255, 255, 0.03);
color: #a1a1aa;
border-color: #29292e;}
.section-light .tag-chip--accent {
background: rgba(107, 134, 153, 0.16);
color: #3c5161;
border-color: rgba(107, 134, 153, 0.5);}
.section-light .tag-chip--neutral {
background: #f4f4f5;
color: #52525b;
border-color: #e4e4e7;}
.section-light .tag-chip--muted {
background: #fafafa;
color: #71717a;
border-color: #e4e4e7;}
.nav-links {
display: none;
align-items: center;
gap: 0.125rem;}
@media (min-width: 768px) {
.nav-links {
display: flex;}}
.nav-link {
position: relative;
display: inline-flex;
align-items: center;
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.01em;
color: var(--site-value);
border-radius: 6px;
text-decoration: none;
transition:
color 0.14s ease,
background-color 0.14s ease;}
.nav-link:hover {
color: var(--site-text);
background: rgba(255, 255, 255, 0.06);}
.nav-link.is-active {
color: var(--site-text);
background: rgba(255, 255, 255, 0.08);}
.nav-actions {
display: flex;
align-items: center;
gap: 0.5rem;}
.nav-signin {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.3;
color: var(--site-value);
border-radius: 6px;
text-decoration: none;
transition:
color 0.14s ease,
background-color 0.14s ease;}
.nav-signin:hover {
color: var(--site-text);
background: rgba(255, 255, 255, 0.06);}
.nav-signin.is-active {
color: var(--site-text);
background: rgba(255, 255, 255, 0.08);}
.nav-download {
padding: 0.5rem 1rem;
font-size: 0.8125rem;}
.nav-on-light .nav-link {
color: var(--site-paper-mute);}
.nav-on-light .nav-link:hover {
color: var(--site-paper-text);
background: rgba(0, 0, 0, 0.05);}
.nav-on-light .nav-link.is-active {
color: var(--site-paper-text);
background: rgba(0, 0, 0, 0.07);}
.nav-on-light .nav-signin {
color: var(--site-paper-mute);}
.nav-on-light .nav-signin:hover {
color: var(--site-paper-text);
background: rgba(0, 0, 0, 0.05);}
.nav-on-light .nav-signin.is-active {
color: var(--site-paper-text);
background: rgba(0, 0, 0, 0.07);}
.nav-on-light .btn-primary {
color: #fafafa;
background: var(--site-paper-text);
border-color: var(--site-paper-text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);}
.nav-on-light .btn-primary:hover {
background: #27272a;
border-color: #27272a;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);}
.brand-wordmark--on-paper {
filter: brightness(0);}
.brand-wordmark--on-dark {
filter: brightness(0) invert(1);}
.download-variant {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
margin-top: 1.25rem;}
.download-variant-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.125rem;
padding: 0.625rem 0.75rem;
border-radius: 6px;
border: 1px solid var(--site-paper-border);
background: var(--site-paper-surface);
text-align: left;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;}
.download-variant-btn:hover {
border-color: #d4d4d8;
background: #fafafa;}
.download-variant-btn--active {
border-color: var(--site-paper-text);
background: #fafafa;}
.download-variant-label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--site-paper-text);}
.download-variant-size {
font-size: 0.6875rem;
color: var(--site-paper-mute);}
.download-cta {
flex-direction: column;
align-items: stretch;
gap: 0.25rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
text-align: center;}
.download-cta-top {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.9375rem;
font-weight: 600;}
.download-cta-sub {
display: block;
font-size: 0.75rem;
font-weight: 400;
opacity: 0.72;
letter-spacing: 0.01em;}
.download-alt {
text-align: center;}
.download-alt-trigger {
border: none;
background: none;
padding: 0;
font-size: 0.8125rem;
color: var(--site-paper-mute);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;}
.download-alt-trigger:hover {
color: var(--site-paper-text);}
.download-select {
width: 100%;
padding: 0.5rem 0.625rem;
border-radius: 6px;
border: 1px solid var(--site-paper-border);
background: var(--site-paper-surface);
font-size: 0.8125rem;
color: var(--site-paper-text);
cursor: pointer;}
.download-select:focus {
outline: none;
border-color: var(--site-focus);
box-shadow: 0 0 0 2px rgba(107, 134, 153, 0.2);}
.auth-screen {
min-height: calc(100svh - 3.5rem);
display: flex;
align-items: center;
padding-top: 3.5rem;}
.auth-screen-inner {
width: 100%;
padding-top: 1.75rem;
padding-bottom: 2rem;}
@media (min-width: 640px) {
.auth-screen-inner {
padding-top: 2.5rem;
padding-bottom: 2.5rem;}}
.auth-screen-grid {
display: grid;
gap: 2rem;
align-items: start;}
@media (min-width: 1024px) {
.auth-screen-grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 2.5rem 3rem;}
.auth-intro {
grid-column: span 5;}
.auth-screen-form {
grid-column: 7 / span 6;}}
.auth-intro {
min-width: 0;}
.auth-card {
border-radius: 8px;
border: 1px solid var(--site-paper-border);
background: var(--site-paper-surface);
padding: 1.25rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);}
.auth-card .btn-primary {
color: #fafafa;
background: var(--site-paper-text);
border-color: var(--site-paper-text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);}
.auth-card .btn-primary:hover {
background: #27272a;
border-color: #27272a;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);}
.auth-card .btn-ghost {
color: var(--site-paper-text);
background: var(--site-paper-surface);
border-color: var(--site-paper-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);}
.auth-card .btn-ghost:hover {
background: #fafafa;
border-color: #d4d4d8;
color: var(--site-paper-text);}
@media (min-width: 640px) {
.auth-card {
padding: 1.5rem;}}
.auth-form {
display: flex;
flex-direction: column;
gap: 0.875rem;}
.auth-form-row {
display: flex;
justify-content: flex-end;
margin-top: -0.125rem;}
.auth-oauth-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.625rem;}
.auth-oauth-grid .btn-ghost {
justify-content: center;
width: 100%;}
.auth-switch {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--site-paper-border);
text-align: center;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--site-paper-mute);}
.auth-switch-link {
color: var(--site-paper-text);
font-weight: 500;
text-decoration: none;}
.auth-switch-link:hover {
text-decoration: underline;
text-underline-offset: 3px;}
.auth-legal {
margin-top: 0.875rem;
text-align: center;
font-size: 0.6875rem;
line-height: 1.5;
color: var(--site-paper-label);}
.auth-inline-link {
color: var(--site-paper-mute);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--site-paper-border);
transition: color 0.14s ease, text-decoration-color 0.14s ease;}
.auth-inline-link:hover {
color: var(--site-paper-text);
text-decoration-color: #a1a1aa;}
.form-field {
display: flex;
flex-direction: column;
gap: 0.375rem;}
.form-label {
font-family: ui-monospace, 'Cascadia Mono', 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--site-paper-label);}
.form-input {
width: 100%;
padding: 0.625rem 0.75rem;
font-family: inherit;
font-size: 0.84375rem;
font-weight: 500;
line-height: 1.4;
color: var(--site-paper-text);
background: var(--site-paper-surface);
border: 1px solid var(--site-paper-border);
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition:
border-color 0.14s ease,
box-shadow 0.14s ease;}
.form-input::placeholder {
color: var(--site-paper-label);}
.form-input:hover {
border-color: #d4d4d8;}
.form-input:focus {
outline: none;
border-color: #a1a1aa;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 0 0 3px rgba(24, 24, 27, 0.06);}
.auth-divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1rem 0;}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--site-paper-border);}
.form-input-wrap {
position: relative;}
.form-input--with-toggle {
padding-right: 2.75rem;}
.form-input-toggle {
position: absolute;
right: 0.375rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.875rem;
height: 1.875rem;
padding: 0;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--site-paper-label);
cursor: pointer;
transition: color 0.14s ease, background 0.14s ease;}
.form-input-toggle:hover {
color: var(--site-paper-text);
background: #f4f4f5;}
.form-input-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.12);}
.auth-linkbtn {
background: none;
border: 0;
padding: 0;
font: inherit;
cursor: pointer;}
.auth-resend {
align-self: flex-start;
margin-top: -0.25rem;
background: none;
border: 0;
padding: 0;
font-size: 0.8125rem;
font-weight: 500;
color: var(--site-paper-text);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;}
.auth-resend:disabled {
opacity: 0.5;
cursor: default;}
.auth-form-intro {
margin-bottom: 0.25rem;
font-size: 0.84375rem;
line-height: 1.5;
color: var(--site-paper-mute);}
.auth-btn-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;}
.auth-card .btn-primary:disabled,
.auth-card .btn-ghost:disabled {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;}
.auth-card .btn-primary:disabled:hover,
.auth-card .btn-ghost:disabled:hover {
background: var(--site-paper-text);
border-color: var(--site-paper-text);}
.auth-card .btn-ghost:disabled:hover {
background: var(--site-paper-surface);
border-color: var(--site-paper-border);}
.form-hint {
margin-top: 0.125rem;
font-size: 0.75rem;
line-height: 1.4;
color: var(--site-paper-mute);}
.form-hint--warn {
color: #b45309;}
.pw-strength {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: -0.375rem;}
.pw-strength-track {
display: flex;
gap: 3px;
flex: 1;}
.pw-strength-seg {
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--site-paper-border);
transition: background 0.18s ease;}
.pw-strength-label {
font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;}
.dash-body {
overflow: hidden;
height: 100svh;
background: var(--site-bg);}
.dash-body #root {
height: 100%;}
.dash-body main {
height: 100svh;
overflow-x: hidden;
overflow-y: auto;}
.dash-body {
--dc-field: #0a0a0b;
--dc-rail: #0d0d0e;
--dc-card: #161618;
--dc-elev: #202024;
--dc-elev-hover: #26262b;
--dc-line-strong: #2a2a2e;
--dc-line-subtle: #1b1b1e;
--dc-text: #ededee;
--dc-value: #cfced2;
--dc-mute: #9a9a9f;
--dc-label: #929297;
--dc-faint: #87878c;
background: var(--dc-field);
color: var(--dc-text);
-moz-osx-font-smoothing: grayscale;}
.dash-body .bg-ink-bg { background-color: var(--dc-field); }
.dash-body .bg-ink-s1 { background-color: var(--dc-rail); }
.dash-body .bg-ink-s2 { background-color: var(--dc-card); }
.dash-body .bg-ink-s3 { background-color: var(--dc-elev); }
.dash-body .bg-ink-b1 { background-color: var(--dc-line-strong); }
.dash-body .border-ink-b1 { border-color: var(--dc-line-strong); }
.dash-body .divide-ink-b1 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dc-line-strong); }
.dash-body .ring-ink-b2 { --tw-ring-color: var(--dc-line-subtle); }
.dash-body .ring-ink-s1 { --tw-ring-color: var(--dc-rail); }
.dash-body .text-ink-text { color: var(--dc-text); }
.dash-body .text-ink-value { color: var(--dc-value); }
.dash-body .text-ink-mute { color: var(--dc-mute); }
.dash-body .text-ink-label { color: var(--dc-label); }
.dash-body .text-ink-faint { color: var(--dc-faint); }
.dash-body .hover\:bg-ink-s2:hover { background-color: var(--dc-elev); }
.dash-body .hover\:bg-ink-s3:hover { background-color: var(--dc-elev); }
.dash-body .focus\:bg-ink-s3:focus { background-color: var(--dc-elev); }
.dash-body .hover\:text-ink-text:hover { color: var(--dc-text); }
.dash-body .hover\:text-ink-value:hover { color: var(--dc-value); }
.dash-body .bg-ink-faint { background-color: var(--dc-faint); }
.dash-body .border-ink-faint { border-color: var(--dc-faint); }
.dash-body .bg-ink-mute { background-color: var(--dc-mute); }
.dash-body .ring-ink-b1 { --tw-ring-color: var(--dc-line-strong); }
.dash-body .fill-ink-text { fill: var(--dc-text); }
.dash-body .fill-ink-mute { fill: var(--dc-mute); }
.dash-body .stroke-ink-s3 { stroke: var(--dc-elev); }
.dash-body .bg-ink-s2\/40 { background-color: color-mix(in srgb, var(--dc-card) 40%, transparent); }
.dash-body .placeholder\:text-ink-faint::placeholder { color: var(--dc-faint); }
.dash-body .group:hover .group-hover\:text-ink-value { color: var(--dc-value); }
.dash-body .hover\:ring-ink-b2:hover { --tw-ring-color: var(--dc-line-subtle); }
@media (pointer: coarse) {
.dash-body [role="menuitem"] { min-height: 44px; }}
@keyframes dash-shim {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }}
.dash-body .dash-shim { animation: dash-shim 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes dashFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dash-body .dash-fade { animation: dashFade 0.18s ease-out; }
.dash-focus:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.dash-body { scrollbar-width: thin; scrollbar-color: var(--dc-line-strong) transparent; }
.dash-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.dash-body ::-webkit-scrollbar-track { background: transparent; }
.dash-body ::-webkit-scrollbar-thumb {
background: var(--dc-line-strong);
border-radius: 999px;
border: 3px solid transparent;
background-clip: padding-box;}
.dash-body ::-webkit-scrollbar-thumb:hover { background: var(--dc-mute); }
.dash-body ::-webkit-scrollbar-corner { background: transparent; }
.dash-body ::selection { background: rgba(99, 102, 241, 0.26); color: var(--dc-text); }
.dash-body { accent-color: #6366f1; -webkit-tap-highlight-color: transparent; }
.dash-body input, .dash-body textarea { caret-color: #6366f1; }
.dash-body .uppercase.text-ink-label { letter-spacing: 0.06em; }
.dash-body tbody td { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.dash-body thead th { padding-bottom: 0.625rem; }
.dash-body thead th:first-child, .dash-body tbody td:first-child { padding-left: 0; }
.dash-body thead th:last-child, .dash-body tbody td:last-child { padding-right: 0; }
.dash-body .rounded-xl.bg-ink-s2 { border-color: var(--dc-line-subtle); }
.dash-body button.bg-ink-s2.border-ink-b1 { background: var(--dc-elev); border-color: transparent; }
.dash-body button.bg-ink-s2.border-ink-b1:hover { background: var(--dc-elev-hover); }
.dash-body input:focus-visible,
.dash-body textarea:focus-visible,
.dash-body select:focus-visible {
outline: none;
border-color: rgba(99, 102, 241, 0.55);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);}
.dash-body button:active { transform: translateY(0.5px); }
.dash-body a.dbtn:active { transform: translateY(0.5px); }
.dash-body a, .dash-body button, .dash-body [role="menuitem"],
.dash-body input, .dash-body select, .dash-body textarea {
transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, opacity .14s ease;}
.dash-body tbody tr { transition: background-color .14s ease; }
.dash-body {
--dt-hero: 34px;
--dt-metric: 22px;
--dr-surface: 10px;
--dr-control: 6px;
--dt-topband: 70px;
--dc-accent: #6366f1;
--dc-accent-quiet: #6667b0;}
.dash-body .rounded-xl { border-radius: var(--dr-surface); }
.dash-body .rounded-lg { border-radius: 8px; }
.dash-body .rounded-md { border-radius: var(--dr-control); }
.dash-body .rounded { border-radius: var(--dr-control); }
.dash-body .font-semibold, .dash-body strong { font-weight: 550; }
.dash-body .dash-hero, .dash-body .dash-metric { letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }
.dash-body .dash-hero { font-size: var(--dt-hero); font-weight: 480; line-height: 1; }
.dash-body .dash-metric { font-size: var(--dt-metric); font-weight: 550; line-height: 1.1; }
.dash-body thead th.uppercase { letter-spacing: 0.06em; }
.dash-body .dbtn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
border-radius: var(--dr-control); border: 1px solid transparent;
padding: 0.3125rem 0.625rem; font-size: 12px; font-weight: 500; line-height: 1.25rem;
white-space: nowrap; cursor: pointer;}
.dash-body .dbtn-lg { padding: 0.4375rem 0.8125rem; font-size: 13px; }
.dash-body .dbtn:disabled, .dash-body .dbtn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.dash-body .dbtn-primary { background: #ededee; color: #101012; }
.dash-body .dbtn-primary:hover { background: #ffffff; }
.dash-body .dbtn-secondary { background: var(--dc-elev); color: var(--dc-value); }
.dash-body .dbtn-secondary:hover { background: var(--dc-elev-hover); color: var(--dc-text); }
.dash-body .bg-ink-s3 .dbtn-secondary { background: var(--dc-card); }
.dash-body .bg-ink-s3 .dbtn-secondary:hover { background: var(--dc-elev); }
.dash-body .dbtn-ghost { background: transparent; color: var(--dc-mute); }
.dash-body .dbtn-ghost:hover { background: var(--dc-elev); color: var(--dc-text); }
.dash-body .dbtn-danger { border-color: rgba(244, 63, 94, 0.3); color: #fda4af; background: transparent; }
.dash-body .dbtn-danger:hover { background: rgba(244, 63, 94, 0.1); }
.dash-body .dbtn-danger-solid { background: #e11d48; color: #fff; }
.dash-body .dbtn-danger-solid:hover { background: #be123c; }
.dash-body .dbtn[aria-pressed="true"],
.dash-body [role="group"] button[aria-pressed="true"] {
background: rgba(99, 102, 241, 0.14);
box-shadow: inset 0 0 0 1px var(--dc-accent);
color: var(--dc-text);}
.dash-body .dbtn[aria-pressed="true"]:hover,
.dash-body [role="group"] button[aria-pressed="true"]:hover { background: rgba(99, 102, 241, 0.2); }
.dash-body .dash-pagehead {
z-index: 20;
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
margin: 0 0 1.25rem; padding: 0.875rem 0 0.8125rem;
min-height: var(--dt-topband); box-sizing: border-box;
background: var(--dc-field);
box-shadow: inset 0 -1px 0 var(--dc-line-subtle);}
.dash-body .dash-railhead {
display: flex; align-items: center; flex: none;
height: var(--dt-topband); padding: 0 1.5rem;
box-shadow: inset 0 -1px 0 var(--dc-line-subtle);}
.dash-body .dash-railhead img { transition: opacity .14s ease; }
.dash-body .dash-railhead a:hover img { opacity: 0.72; }
.dash-body .dash-pagehead h1 { font-size: 15px; font-weight: 550; color: var(--dc-text); letter-spacing: -0.012em; }
.dash-body .dash-pagehead p { margin-top: 0.125rem; font-size: 12px; color: var(--dc-mute); }
@media (min-width: 1024px) {
.dash-body .dash-pagehead { position: sticky; top: 0; }}
.dash-body .dash-bar { background: var(--dc-accent-quiet); }
.dash-body .dash-bar-active { background: var(--dc-accent); }
.dash-body .dash-meter-fill { background: var(--dc-accent-quiet); }
.dash-body .dash-bar-col { max-width: 44px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;}}
.sr-only-abs {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;}
.preview-page {
display: flex;
min-height: 100svh;
flex-direction: column;
background: var(--site-bg);}
.preview-skip {
position: absolute;
left: 0.75rem;
top: -3rem;
z-index: 50;
border-radius: 6px;
border: 1px solid var(--site-border);
background: var(--site-panel);
padding: 0.5rem 0.875rem;
font-size: 0.8125rem;
color: var(--site-text);
transition: top 0.15s ease;}
.preview-skip:focus {
top: 0.75rem;}
.preview-main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
outline: none;}
.preview-header {
flex: none;
padding: 1.5rem 0 0.5rem;}
.preview-header-inner {
display: flex;
align-items: center;}
.preview-brand {
display: inline-flex;
align-items: center;
border-radius: 4px;
padding: 0.25rem;
margin: -0.25rem;}
.preview-footer {
flex: none;
padding: 1.5rem 0 1.5rem;}
.preview-footer-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
border-top: 1px solid var(--site-sep);
padding-top: 1.25rem;}
.preview-footer-copy {
font-size: 0.75rem;
color: var(--site-label);
margin: 0;}
.preview-footer-legal {
flex-basis: 100%;
order: 3;}
.preview-footer-nav {
display: flex;
gap: 1.25rem;}
.preview-footer-nav a {
font-size: 0.75rem;
color: var(--site-mute);
text-decoration: none;
border-radius: 3px;}
.preview-footer-nav a:hover {
color: var(--site-text);
text-decoration: underline;
text-underline-offset: 3px;}
.preview-hero {
padding-block: 3rem 3.5rem;
text-align: left;}
@media (min-width: 640px) {
.preview-hero {
padding-block: 4.5rem 5rem;}}
.preview-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--site-accent-border);
border-radius: 999px;
padding: 0.3125rem 0.75rem;
font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
font-size: 0.6875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--site-value);
background: rgba(107, 134, 153, 0.08);}
.preview-badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--site-focus);}
.preview-hero-title {
margin: 0;
font-size: clamp(44px, 9vw, 84px);
line-height: 0.98;
letter-spacing: -0.045em;
font-weight: 500;
color: var(--site-text);}
.preview-hero-sub {
margin: 0.75rem 0 0;
font-size: clamp(18px, 3.2vw, 26px);
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: 500;
color: var(--site-mute);}
.preview-hero-lede {
margin: 1.75rem 0 0;
max-width: 34rem;
font-size: 1rem;
line-height: 1.6;
color: var(--site-mute);}
.preview-hero-lede strong {
color: var(--site-value);
font-weight: 600;}
.preview-actions {
margin-top: 2.25rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;}
.preview-actions .btn-primary,
.preview-actions .btn-ghost {
min-height: 44px;
padding: 0.75rem 1.25rem;
font-size: 0.8125rem;}
.waitlist {
margin-top: 2.25rem;
max-width: 28rem;}
.waitlist-form {
display: flex;
flex-direction: column;
gap: 0.625rem;}
@media (min-width: 480px) {
.waitlist-form {
flex-direction: row;
align-items: flex-start;}}
.waitlist-field {
flex: 1 1 auto;
min-width: 0;}
.waitlist-input {
width: 100%;
min-height: 44px;
border-radius: 6px;
border: 1px solid var(--site-border);
background: var(--site-panel);
padding: 0.6875rem 0.875rem;
font-size: 0.875rem;
color: var(--site-text);
outline: none;}
.waitlist-input::placeholder {
color: var(--site-label);}
.waitlist-input:hover {
border-color: #34343a;}
.waitlist-input:focus-visible {
border-color: var(--site-focus);
box-shadow: 0 0 0 3px var(--site-focus-glow);}
.waitlist-input[aria-invalid='true'] {
border-color: #f87171;}
.waitlist-submit {
min-height: 44px;
flex: none;}
.waitlist-hp {
position: absolute !important;
left: -9999px !important;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;}
.waitlist-note {
margin: 0.75rem 0 0;
font-size: 0.75rem;
line-height: 1.5;
color: var(--site-label);}
.waitlist-note a {
color: var(--site-mute);
text-decoration: underline;
text-underline-offset: 3px;}
.waitlist-done {
display: flex;
align-items: flex-start;
gap: 0.75rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: var(--site-panel);
padding: 1rem 1.125rem;}
.waitlist-done-mark {
flex: none;
margin-top: 2px;
color: #4ade80;}
.waitlist-done-title {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--site-text);}
.waitlist-done-body {
margin: 0.25rem 0 0;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--site-mute);}
.preview-alert {
margin-top: 0.875rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
border-radius: 6px;
border: 1px solid var(--site-border);
background: var(--site-panel);
padding: 0.6875rem 0.875rem;}
.preview-alert--error {
border-color: rgba(248, 113, 113, 0.42);
background: rgba(248, 113, 113, 0.07);}
.preview-alert-text {
margin: 0;
flex: 1 1 12rem;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--site-value);}
.preview-alert--error .preview-alert-text {
color: #fca5a5;}
.preview-alert-action {
flex: none;}
.preview-spinner-wrap {
display: inline-flex;
align-items: center;}
.preview-spinner {
display: inline-block;
border-radius: 50%;
border: 2px solid rgba(236, 241, 248, 0.25);
border-top-color: var(--site-text);
animation: preview-spin 0.7s linear infinite;}
@keyframes preview-spin {
to {
transform: rotate(360deg);}}
.preview-avatar {
flex: none;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--site-border);
background: var(--site-surface);}
.preview-avatar--fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 600;
color: var(--site-value);}
.preview-panel {
width: 100%;
margin: 0 auto;
border-radius: 10px;
border: 1px solid var(--site-border);
background: var(--site-panel);
padding: 1.75rem 1.5rem;}
@media (min-width: 640px) {
.preview-panel {
padding: 2rem 1.875rem;}}
.preview-panel-head {
margin-bottom: 1.25rem;}
.preview-panel-title {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--site-text);}
.preview-panel-sub {
margin: 0.375rem 0 0;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--site-mute);}
.preview-panel-center {
text-align: center;}
.preview-stack {
display: flex;
flex-direction: column;
gap: 0.625rem;
margin-top: 1.25rem;}
.preview-stack .btn-primary,
.preview-stack .btn-ghost {
width: 100%;
min-height: 44px;}
.preview-identity {
display: flex;
align-items: center;
gap: 0.875rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: var(--site-surface);
padding: 0.875rem 1rem;
text-align: left;}
.preview-identity-name {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--site-text);
overflow-wrap: anywhere;}
.preview-identity-hint {
margin: 0.125rem 0 0;
font-size: 0.75rem;
color: var(--site-label);
font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
overflow-wrap: anywhere;}
.preview-steps {
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
text-align: left;}
.preview-step {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--site-label);}
.preview-step[data-state='active'] {
color: var(--site-text);}
.preview-step[data-state='done'] {
color: var(--site-mute);}
.preview-auth {
padding-block: 2rem 3rem;}
@media (min-width: 640px) {
.preview-auth {
padding-block: 3rem 4rem;}}
.preview-auth-col {
width: 100%;
max-width: 27rem;
margin: 0 auto;}
.preview-auth-head {
margin-bottom: 1.5rem;}
.preview-auth-title {
margin: 0.75rem 0 0;
font-size: clamp(26px, 5vw, 34px);
line-height: 1.08;
letter-spacing: -0.03em;
font-weight: 500;
color: var(--site-text);}
.preview-auth-sub {
margin: 0.625rem 0 0;
font-size: 0.875rem;
line-height: 1.6;
color: var(--site-mute);}
.preview-auth-foot {
margin-top: 1.25rem;
text-align: center;
font-size: 0.8125rem;
color: var(--site-mute);}
.preview-auth-foot a {
color: var(--site-text);
text-decoration: underline;
text-underline-offset: 3px;}
.auth-google-host {
display: flex;
justify-content: center;
min-height: 40px;}
.auth-google-host > div {
max-width: 100%;}
.preview-legal-head {
padding-block: 2.5rem 1.5rem;}
.preview-legal-body {
margin-top: 0.5rem;}
.preview-main .preview-legal-body {
align-self: stretch;}
.preview-footer-nav a,
.preview-brand,
.preview-skip {
display: inline-flex;
align-items: center;
min-height: 24px;
padding-block: 0.25rem;}
.preview-footer-nav {
gap: 1rem;}
.waitlist-note a,
.auth-inline-link {
text-decoration: underline;
text-underline-offset: 3px;}
.preview-placeholder {
max-width: 42rem;}
.preview-badge--sm {
padding: 0.1875rem 0.5rem;
font-size: 0.625rem;}
.preview-placeholder-note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
border: 1px solid var(--site-border);
border-radius: 8px;
background: var(--site-panel);
padding: 0.875rem 1rem;}
.preview-placeholder-note p {
margin: 0;
flex: 1 1 16rem;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--site-mute);}
.preview-placeholder-grid {
list-style: none;
margin: 1.25rem 0 0;
padding: 0;
display: grid;
gap: 0.75rem;}
@media (min-width: 640px) {
.preview-placeholder-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));}}
.preview-placeholder-card {
border: 1px solid var(--site-sep);
border-radius: 8px;
background: var(--site-surface);
padding: 0.875rem 1rem;}
.preview-placeholder-card-title {
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
color: var(--site-text);}
.preview-placeholder-card-body {
margin: 0.25rem 0 0;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--site-label);}
.preview-placeholder .preview-stack {
margin-top: 1.5rem;}
.dash-body :focus-visible {
box-shadow: none;}
@media (forced-colors: active) {
.dash-body [role="progressbar"],
.dash-body [role="img"],
.dash-body svg,
.dash-body table {
border: 1px solid CanvasText;}
.dash-body :focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;}
.dash-body [role="progressbar"] > * {
forced-color-adjust: none;
background: Highlight;}}
.dash-body .dash-hero-blank { font-size: var(--dt-metric); color: var(--dc-faint); }
.dash-body .dash-metric.dash-hero-blank { font-size: var(--dt-metric); }
.dash-body select.dash-focus { padding-right: 1.75rem; cursor: pointer; }