/* Generated by ArchaicTools.Web.Build from Styles/main.css. Edit the files in Styles/. */
@layer settings, base, layout, components, themes;
@layer settings {
:root {
--color-snow: #ffffff;
--color-frost: #f6f7f9;
--color-mist: #eceef2;
--color-silver-200: #dfe2e7;
--color-silver-300: #c9ced6;
--color-silver-500: #7f8792;
--color-graphite: #4b505a;
--color-ink: #1c1e23;
--color-night: #24262d;
--color-coal: #15171b;
--color-graphite-900: #191c21;
--color-graphite-850: #1f2227;
--color-graphite-700: #33363b;
--color-graphite-600: #45484d;
--color-graphite-400: #8b909a;
--color-graphite-200: #b7bac3;
--color-moon: #e8eaee;
--color-brand-accent: #86704f;
--color-brand-accent-strong: #63513a;
--color-brand-accent-soft: #f3f1ed;
--color-brand-accent-light: #a58a63;
--color-brand-accent-pale: #c4a77d;
--color-brand-accent-dusk: #2a2520;
--color-localsound-dark: #4a2626;
--color-localsound-mid: #a8461f;
--color-localsound-light: #ee8a3a;
--color-localmoney-dark: #1a1c45;
--color-localmoney-mid: #2b4796;
--color-localmoney-light: #5aa2e6;
--color-localsound-vivid: #f26b1d;
--color-localsound-vivid-light: #ffa149;
--color-localsound-vivid-text: #c2410c;
--color-localmoney-vivid: #2f7bf0;
--color-localmoney-vivid-light: #6cc0ff;
--color-localmoney-vivid-text: #1a5fd8;
--accent: var(--color-brand-accent);
--accent-strong: var(--color-brand-accent-strong);
--accent-soft: var(--color-brand-accent-soft);
--accent-glow: rgb(134 112 79 / 0.1);
--accent-band: linear-gradient(90deg, var(--color-silver-300), var(--color-mist));
--accent-button: linear-gradient(180deg, var(--color-brand-accent), var(--color-brand-accent-strong));
--on-accent: #ffffff;
--text: var(--color-ink);
--text-muted: var(--color-graphite);
--text-subtle: var(--color-silver-500);
--surface: var(--color-snow);
--surface-alt: var(--color-frost);
--surface-sunken: var(--color-mist);
--border: var(--color-silver-200);
--border-strong: var(--color-silver-300);
--danger: #a3261d;
--success: #2f6b45;
--success-soft: #e4f2e9;
--code-surface: var(--color-night);
--code-text: #e4e6eb;
--code-muted: #8d94a0;
--code-key: #9ec5fe;
--code-string: #b9dd95;
--code-number: #f5a97f;
--font-heading: "Tenor Sans", Optima, Candara, "Segoe UI", sans-serif;
--font-body: "Inter Tight", "Segoe UI", Ubuntu, system-ui, sans-serif;
--font-mono: "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
--text-xs: 0.8125rem;
--text-s: 0.9375rem;
--text-m: 1.0625rem;
--text-l: 1.25rem;
--text-xl: 1.625rem;
--text-2xl: 2.125rem;
--text-3xl: 2.75rem;
--text-4xl: 3.5rem;
--weight-regular: 400;
--weight-medium: 520;
--weight-semibold: 620;
--weight-bold: 700;
--leading-tight: 1.15;
--leading-snug: 1.35;
--leading-normal: 1.6;
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
--radius-s: 4px;
--radius-m: 6px;
--radius-l: 8px;
--shadow-s: 0 1px 2px rgb(28 30 35 / 0.06);
--shadow-card: 0 1px 2px rgb(28 30 35 / 0.04), 0 2px 8px rgb(28 30 35 / 0.05);
--shadow-m: 0 1px 3px rgb(28 30 35 / 0.06), 0 4px 14px rgb(28 30 35 / 0.08);
--shadow-l: 0 2px 6px rgb(28 30 35 / 0.08), 0 12px 32px rgb(28 30 35 / 0.14);
--screenshot-ratio: 1280 / 800;
--container-max: 76rem;
--container-gutter: var(--space-l);
--aside-width: 14rem;
--header-height-compact: 3.75rem;
--sticky-offset: calc(var(--header-height-compact) + var(--space-l));
--measure: 44rem;
--transition-fast: 120ms ease-out;
}
@media (max-width: 40em) {
:root {
--container-gutter: 1rem;
--header-height-compact: 6rem;
--text-2xl: 1.75rem;
--text-3xl: 2.125rem;
--text-4xl: 2.5rem;
}
}
@media (prefers-color-scheme: dark) {
:root {
--accent: var(--color-brand-accent-light);
--accent-strong: var(--color-brand-accent-pale);
--accent-soft: var(--color-brand-accent-dusk);
--accent-glow: rgb(196 167 125 / 0.08);
--accent-band: linear-gradient(90deg, var(--color-graphite-600), var(--color-graphite-700));
--text: var(--color-moon);
--text-muted: var(--color-graphite-200);
--text-subtle: var(--color-graphite-400);
--surface: var(--color-graphite-900);
--surface-alt: var(--color-graphite-850);
--surface-sunken: var(--color-coal);
--border: var(--color-graphite-700);
--border-strong: var(--color-graphite-600);
--danger: #f28b82;
--success: #7cc79a;
--success-soft: #1c2e23;
--shadow-s: 0 1px 2px rgb(0 0 0 / 0.3);
--shadow-card: 0 1px 2px rgb(0 0 0 / 0.2), 0 2px 8px rgb(0 0 0 / 0.25);
--shadow-m: 0 1px 3px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.35);
--shadow-l: 0 2px 6px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.5);
}
}
}
@layer base {
@font-face {
font-family: "Inter Tight";
src: url("../fonts/inter-tight-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter Tight";
src: url("../fonts/inter-tight-italic-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tenor Sans";
src: url("../fonts/tenor-sans-latin.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
}
@layer base {
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
pre {
margin: 0;
}
ul[class],
ol[class] {
margin: 0;
padding: 0;
list-style: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
[id] {
scroll-margin-top: var(--sticky-offset);
}
[hidden] {
display: none !important;
}
}
@layer base {
body {
font-family: var(--font-body);
font-size: var(--text-m);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
color: var(--text);
background: var(--surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-heading);
font-weight: var(--weight-regular);
line-height: var(--leading-tight);
color: var(--text);
text-wrap: balance;
}
h1 {
font-size: var(--text-3xl);
}
h2 {
font-size: var(--text-2xl);
}
h3 {
font-size: var(--text-l);
}
h4 {
font-size: var(--text-m);
}
p,
li {
text-wrap: pretty;
}
a {
color: var(--accent-strong);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
color: var(--accent);
text-decoration-thickness: 2px;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
strong,
b {
font-weight: var(--weight-semibold);
}
small {
font-size: var(--text-s);
}
code,
kbd,
samp,
pre {
font-family: var(--font-mono);
font-size: 0.875em;
}
code {
padding: 0.1em 0.35em;
border-radius: var(--radius-s);
background: var(--surface-sunken);
overflow-wrap: anywhere;
}
pre code {
padding: 0;
background: none;
overflow-wrap: normal;
}
kbd {
padding: 0.05em 0.4em;
border: 1px solid var(--border-strong);
border-bottom-width: 2px;
border-radius: var(--radius-s);
background: var(--surface);
font-size: 0.8em;
}
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
hr {
margin: var(--space-xl) 0;
border: 0;
border-top: 1px solid var(--border);
}
::selection {
background: var(--accent-soft);
color: var(--text);
}
}
@layer layout {
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page__main {
flex: 1 0 auto;
}
}
@layer layout {
.container {
width: 100%;
max-width: calc(var(--container-max) + 2 * var(--container-gutter));
margin-inline: auto;
padding-inline: var(--container-gutter);
}
}
@layer layout {
.page-layout {
display: grid;
grid-template-columns: var(--aside-width) minmax(0, 1fr);
gap: var(--space-2xl);
align-items: start;
padding-block: var(--space-2xl) var(--space-3xl);
}
.page-layout--single {
grid-template-columns: minmax(0, var(--measure));
}
.page-layout__aside {
position: sticky;
top: var(--sticky-offset);
max-height: calc(100vh - var(--sticky-offset) - var(--space-l));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.page-layout__content {
min-width: 0;
}
@media (max-width: 56em) {
.page-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-l);
padding-block: var(--space-l) var(--space-2xl);
}
.page-layout__aside {
position: static;
max-height: none;
overflow: visible;
}
}
}
@layer components {
.skip-link {
position: absolute;
top: 0;
left: var(--space-s);
z-index: 100;
padding: var(--space-2xs) var(--space-s);
border-radius: var(--radius-s);
background: var(--color-ink);
color: var(--color-snow);
text-decoration: none;
transform: translateY(-120%);
}
.skip-link:focus {
transform: translateY(var(--space-2xs));
}
.skip-link:hover {
color: var(--color-snow);
}
}
@layer components {
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
}
@layer components {
.site-header {
position: relative;
background: var(--surface);
}
.site-header--sticky {
position: sticky;
top: 0;
z-index: 10;
}
.site-header::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 3px;
background-color: var(--accent);
background-image: var(--accent-band);
}
.site-header__meta {
font-size: var(--text-xs);
}
.site-header__meta-inner {
display: flex;
justify-content: flex-end;
align-items: center;
padding-top: var(--space-2xs);
}
.site-header__bar-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-l);
min-height: 4.5rem;
padding-block: 0 var(--space-xs);
}
.site-header__brand {
display: inline-flex;
flex: none;
padding-block: var(--space-2xs);
}
.site-header__brand:focus-visible {
outline-offset: 2px;
}
.site-header__logo {
width: auto;
height: 2.75rem;
}
.site-header--compact {
box-shadow: var(--shadow-m);
}
.site-header--compact::after {
display: none;
}
.site-header--compact .site-header__meta {
display: none;
}
.site-header--compact .site-header__bar-inner {
min-height: var(--header-height-compact);
padding-block: 0;
}
.site-header--compact .site-header__logo {
height: 2rem;
}
@media (max-width: 62em) {
.site-header__bar-inner {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2xs);
}
.site-header--compact .site-header__bar-inner {
justify-content: center;
}
.site-header--compact .site-header__brand {
display: none;
}
}
@media (max-width: 40em) {
.site-header__logo {
height: 2.25rem;
}
.site-header--compact .site-header__bar-inner {
min-height: 0;
padding-block: var(--space-2xs);
}
}
}
@layer components {
.meta-nav__list {
display: flex;
align-items: center;
gap: var(--space-m);
}
.meta-nav__item {
display: flex;
align-items: center;
gap: 0.4rem;
}
.meta-nav__link {
border-radius: var(--radius-s);
color: var(--text-subtle);
font-weight: var(--weight-medium);
text-decoration: none;
}
.meta-nav__link:hover {
color: var(--text);
text-decoration: none;
}
.meta-nav__link--current {
color: var(--text);
}
.meta-nav__badge {
color: var(--text-subtle);
font-size: 0.625rem;
font-weight: var(--weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
}
@layer components {
.lang-switch {
display: flex;
align-items: center;
gap: 0.15rem;
}
.lang-switch__link {
display: inline-block;
padding: 0.1rem 0.35rem;
border-radius: var(--radius-s);
color: var(--text-subtle);
font-weight: var(--weight-medium);
letter-spacing: 0.06em;
text-decoration: none;
}
.lang-switch__link:hover {
color: var(--text);
text-decoration: none;
}
.lang-switch__link--current {
color: var(--text);
font-weight: var(--weight-bold);
}
}
@layer components {
.main-nav {
display: flex;
flex: 1;
align-items: center;
gap: var(--space-s);
}
.main-nav__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3xs);
}
.main-nav__list--products {
margin-inline: auto;
}
.main-nav__link {
position: relative;
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.6rem 0.85rem;
border-radius: var(--radius-s);
color: var(--text);
font-weight: var(--weight-medium);
text-decoration: none;
}
.main-nav__link::after {
content: "";
position: absolute;
inset: auto 0.85rem -0.2rem;
height: 2px;
background: transparent;
}
.main-nav__link:hover {
background: var(--surface-alt);
color: var(--text);
}
.main-nav__link--current::after {
background: var(--accent);
}
.main-nav__icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
}
@media (max-width: 62em) {
.main-nav {
flex-wrap: wrap;
justify-content: space-between;
width: calc(100% + 1.7rem);
margin-inline: -0.85rem;
}
.main-nav__list--products {
margin-inline: 0;
}
}
@media (max-width: 40em) {
.main-nav {
gap: 0;
}
.main-nav__link {
padding: 0.5rem 0.6rem;
font-size: var(--text-s);
}
}
}
@layer components {
.site-footer {
border-top: 1px solid var(--border);
background: var(--surface-sunken);
color: var(--text-muted);
font-size: var(--text-s);
}
.site-footer__inner {
padding-block: var(--space-2xl) var(--space-l);
}
.site-footer__top {
display: grid;
grid-template-columns: 15rem minmax(0, 1fr);
gap: var(--space-2xl);
}
.site-footer__brand {
display: grid;
align-content: start;
gap: var(--space-s);
}
.site-footer__brand-link {
justify-self: start;
}
.site-footer__logo {
width: auto;
height: 7rem;
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-s);
margin-top: var(--space-xl);
padding-top: var(--space-m);
border-top: 1px solid var(--border-strong);
font-size: var(--text-xs);
}
@media (max-width: 56em) {
.site-footer__top {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-l);
}
}
}
@layer components {
.sitemap {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-l);
}
.sitemap__title {
margin-bottom: var(--space-xs);
color: var(--text);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sitemap__list {
display: grid;
gap: 0.4rem;
}
.sitemap__link {
color: var(--text-muted);
text-decoration: none;
}
.sitemap__link:hover {
color: var(--text);
text-decoration: underline;
}
.sitemap__link--current {
color: var(--text);
font-weight: var(--weight-semibold);
}
.sitemap__link--sub {
display: inline-block;
padding-left: 0.9rem;
font-size: var(--text-xs);
}
@media (max-width: 56em) {
.sitemap {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
}
@layer components {
.section-nav {
font-size: var(--text-s);
}
.section-nav__title {
margin-bottom: var(--space-xs);
color: var(--text-subtle);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.section-nav__list {
border-left: 1px solid var(--border);
}
.section-nav__link {
display: block;
margin-left: -1px;
padding: 0.4rem 0 0.4rem var(--space-s);
border-left: 2px solid transparent;
color: var(--text-muted);
line-height: var(--leading-snug);
text-decoration: none;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.section-nav__link:hover {
border-left-color: var(--border-strong);
color: var(--text);
}
.section-nav__link--active,
.section-nav__link--active:hover {
border-left-color: var(--accent);
color: var(--text);
font-weight: var(--weight-semibold);
}
.section-nav__meta {
display: block;
color: var(--text-subtle);
font-size: var(--text-xs);
font-weight: var(--weight-regular);
}
.section-nav__cta {
margin-top: var(--space-l);
}
@media (max-width: 56em) {
.section-nav {
padding: var(--space-s);
border: 1px solid var(--border);
border-radius: var(--radius-m);
background: var(--surface-alt);
}
.section-nav__list {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-s);
border-left: 0;
}
.section-nav__link {
margin-left: 0;
padding: 0.25rem 0;
border-left: 0;
}
.section-nav__meta {
display: none;
}
.section-nav__cta {
margin-top: var(--space-s);
}
}
}
@layer components {
.page-intro {
border-bottom: 1px solid var(--border);
background: radial-gradient(60rem 18rem at 85% 0%, var(--accent-glow), transparent 70%), var(--surface-alt);
}
.page-intro__inner {
padding-block: var(--space-2xl) var(--space-xl);
}
.page-intro__eyebrow {
margin-bottom: var(--space-2xs);
color: var(--accent-strong);
font-size: var(--text-s);
font-weight: var(--weight-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.page-intro__title {
font-size: var(--text-4xl);
}
.page-intro__lead {
max-width: 46rem;
margin-top: var(--space-s);
color: var(--text-muted);
font-size: var(--text-l);
line-height: var(--leading-snug);
}
.page-intro__title-icon {
display: inline-block;
width: 0.9em;
height: 0.9em;
margin-right: 0.25em;
vertical-align: -0.08em;
}
}
@layer components {
.product-hero {
border-bottom: 1px solid var(--border);
background: radial-gradient(52rem 30rem at 92% 8%, var(--accent-glow), transparent 70%), linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
}
.product-hero__inner {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: var(--space-2xl);
align-items: center;
padding-block: var(--space-2xl) var(--space-2xl);
}
.product-hero__eyebrow {
color: var(--accent-strong);
font-size: var(--text-s);
font-weight: var(--weight-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.product-hero__identity {
display: flex;
align-items: center;
gap: var(--space-m);
margin-top: var(--space-s);
}
.product-hero__icon {
flex: none;
width: 6rem;
height: 6rem;
filter: drop-shadow(0 8px 18px rgb(28 30 35 / 0.18));
}
.product-hero__title {
font-size: var(--text-4xl);
letter-spacing: 0.01em;
}
.product-hero__lead {
max-width: 34rem;
margin-top: var(--space-m);
color: var(--text-muted);
font-size: var(--text-l);
line-height: var(--leading-snug);
}
.product-hero__points {
display: grid;
gap: 0.45rem;
margin-top: var(--space-m);
}
.product-hero__point {
position: relative;
padding-left: 1.6rem;
}
.product-hero__point::before {
content: "";
position: absolute;
top: 0.7em;
left: 0;
width: 0.9rem;
height: 2px;
background: var(--accent);
}
.product-hero__cta {
margin-top: var(--space-l);
}
.product-hero__media {
align-self: center;
}
@media (max-width: 62em) {
.product-hero__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xl);
}
}
@media (max-width: 40em) {
.product-hero__icon {
width: 4rem;
height: 4rem;
}
}
}
@layer components {
.content-section {
padding-block: var(--space-xl);
border-top: 1px solid var(--border);
}
.content-section:first-child {
padding-top: 0;
border-top: 0;
}
.content-section:last-child {
padding-bottom: 0;
}
.content-section__header {
max-width: var(--measure);
margin-bottom: var(--space-l);
}
.content-section__eyebrow {
margin-bottom: var(--space-3xs);
color: var(--accent-strong);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.content-section__title {
display: flex;
align-items: center;
gap: 0.6rem;
}
.content-section__icon {
flex: none;
width: 2.5rem;
height: 2.5rem;
}
.content-section__lead {
margin-top: var(--space-xs);
color: var(--text-muted);
font-size: var(--text-l);
line-height: var(--leading-snug);
}
.content-section__subtitle {
margin-block: var(--space-l) var(--space-s);
}
.content-section__more {
margin-top: var(--space-l);
}
}
@layer components {
.prose {
max-width: var(--measure);
}
.prose > * + * {
margin-top: 1em;
}
.prose > h3 {
margin-top: 1.8em;
}
.prose ul,
.prose ol {
padding-left: 1.3em;
}
.prose li + li {
margin-top: 0.35em;
}
.prose li::marker {
color: var(--accent);
}
.prose blockquote {
padding-left: var(--space-s);
border-left: 3px solid var(--accent);
color: var(--text-muted);
font-style: italic;
}
.prose--muted {
color: var(--text-muted);
}
}
@layer components {
.button {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.65rem 1.2rem;
border: 1px solid transparent;
border-radius: var(--radius-m);
font-weight: var(--weight-semibold);
line-height: 1.2;
text-align: left;
text-decoration: none;
transition: filter var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.button:hover {
text-decoration: none;
}
.button--primary {
background-color: var(--accent);
background-image: var(--accent-button);
color: var(--on-accent);
box-shadow: var(--shadow-s), inset 0 1px 0 rgb(255 255 255 / 0.16);
text-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
}
.button--primary:hover {
color: var(--on-accent);
filter: brightness(1.1);
box-shadow: var(--shadow-m), inset 0 1px 0 rgb(255 255 255 / 0.16);
}
.button--secondary {
border-color: var(--border-strong);
background: var(--surface);
color: var(--text);
}
.button--secondary:hover {
border-color: var(--accent);
color: var(--text);
}
.button--large {
padding: 0.85rem 1.5rem 0.85rem 1.25rem;
font-size: var(--text-l);
}
.button--small {
padding: 0.4rem 0.75rem;
font-size: var(--text-s);
}
.button__icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
}
.button--small .button__icon {
width: 1rem;
height: 1rem;
}
.button__text {
display: flex;
flex-direction: column;
}
.button__meta {
margin-top: 0.15rem;
font-size: var(--text-xs);
font-weight: var(--weight-regular);
opacity: 0.88;
}
}
@layer components {
.download-cta {
display: grid;
justify-items: start;
gap: var(--space-s);
}
.download-cta__variant {
display: grid;
justify-items: start;
gap: var(--space-xs);
}
.download-cta--windows .download-cta__variant--linux,
.download-cta--linux .download-cta__variant--windows {
display: none;
}
.download-cta__alt {
font-size: var(--text-s);
}
.download-cta__note {
display: none;
max-width: 30rem;
padding: var(--space-2xs) var(--space-xs);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-m);
background: var(--surface);
color: var(--text-muted);
font-size: var(--text-s);
}
.download-cta--mac .download-cta__note--mac,
.download-cta--mobile .download-cta__note--mobile {
display: block;
}
.download-cta__fineprint {
color: var(--text-subtle);
font-size: var(--text-xs);
}
.download-cta__fineprint a {
color: inherit;
}
.download-cta--centered {
justify-items: center;
text-align: center;
}
.download-cta--centered .download-cta__variant {
justify-items: center;
}
}
@layer components {
.feature-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-s);
}
.feature-list__item {
padding: var(--space-m);
border: 1px solid var(--border);
border-radius: var(--radius-m);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.feature-list__item--wide {
grid-column: 1 / -1;
}
.feature-list__item--highlight {
background: var(--accent-soft);
}
.feature-list__title {
margin-bottom: var(--space-2xs);
font-size: var(--text-l);
}
.feature-list__text {
color: var(--text-muted);
}
.feature-list--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 62em) {
.feature-list--three {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 40em) {
.feature-list,
.feature-list--three {
grid-template-columns: minmax(0, 1fr);
}
}
}
@layer components {
.feature-catalog {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-m) var(--space-l);
}
.feature-catalog__item {
padding-top: var(--space-s);
border-top: 2px solid var(--border);
}
.feature-catalog__title {
margin-bottom: var(--space-3xs);
font-family: var(--font-body);
font-size: var(--text-m);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
}
.feature-catalog__text {
color: var(--text-muted);
}
@media (max-width: 40em) {
.feature-catalog {
grid-template-columns: minmax(0, 1fr);
}
}
}
@layer components {
.data-showcase {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
gap: var(--space-l);
align-items: start;
}
.data-showcase__points {
display: grid;
gap: var(--space-xs);
margin-top: var(--space-m);
}
.data-showcase__point {
padding-left: var(--space-s);
border-left: 2px solid var(--accent);
}
.data-showcase__point-title {
display: block;
font-weight: var(--weight-semibold);
}
@media (max-width: 62em) {
.data-showcase {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-l);
}
}
}
@layer components {
.code-block {
overflow: hidden;
border-radius: var(--radius-m);
background: var(--code-surface);
color: var(--code-text);
box-shadow: var(--shadow-m);
}
.code-block__caption {
display: flex;
justify-content: space-between;
gap: var(--space-s);
padding: 0.55rem var(--space-s);
border-bottom: 1px solid rgb(255 255 255 / 0.08);
color: var(--code-muted);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.code-block__pre {
padding: var(--space-s);
overflow-x: auto;
font-size: var(--text-xs);
line-height: 1.6;
tab-size: 2;
}
.code-block__key {
color: var(--code-key);
}
.code-block__string {
color: var(--code-string);
}
.code-block__number {
color: var(--code-number);
}
.code-block__muted {
color: var(--code-muted);
}
.code-block--command {
display: flex;
align-items: center;
gap: var(--space-s);
max-width: var(--measure);
border: 1px solid var(--border-strong);
background: var(--surface-alt);
color: var(--text);
box-shadow: none;
}
.code-block--command .code-block__pre {
flex: 1;
min-width: 0;
padding: 0.7rem var(--space-s);
font-size: var(--text-s);
}
.code-block--command .code-block__pre::before {
content: "$ ";
color: var(--text-subtle);
}
.code-block--powershell .code-block__pre::before {
content: "PS> ";
}
.code-block__copy {
flex: none;
margin-right: var(--space-2xs);
padding: 0.3rem 0.65rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-s);
background: var(--surface);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.code-block__copy:hover {
border-color: var(--accent);
}
}
@layer components {
.screenshot__link {
display: block;
overflow: hidden;
border-radius: var(--radius-l);
box-shadow: var(--shadow-l);
transition: transform var(--transition-fast);
}
.screenshot__link:hover {
transform: translateY(-2px);
}
.screenshot__image {
width: 100%;
aspect-ratio: var(--screenshot-ratio);
object-fit: cover;
object-position: top left;
background: var(--color-night);
}
.screenshot__caption {
margin-top: var(--space-xs);
color: var(--text-subtle);
font-size: var(--text-xs);
text-align: right;
}
}
@layer components {
.gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-l) var(--space-m);
}
.gallery__link {
display: block;
overflow: hidden;
border-radius: var(--radius-l);
box-shadow: var(--shadow-m);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.gallery__link:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-l);
}
.gallery__image {
width: 100%;
aspect-ratio: var(--screenshot-ratio);
object-fit: cover;
object-position: top left;
background: var(--color-night);
}
.gallery__caption {
margin-top: var(--space-xs);
color: var(--text-muted);
font-size: var(--text-s);
line-height: var(--leading-snug);
}
.gallery__file {
display: block;
margin-top: 0.2rem;
padding: 0;
background: none;
color: var(--text-subtle);
font-size: var(--text-xs);
}
@media (max-width: 62em) {
.gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 40em) {
.gallery {
grid-template-columns: minmax(0, 1fr);
}
}
}
@layer components {
.lightbox {
max-width: min(94vw, 1600px);
max-height: 94vh;
padding: 0;
border: 0;
background: transparent;
overflow: visible;
}
.lightbox::backdrop {
background: rgb(16 17 21 / 0.84);
}
.lightbox__figure {
display: grid;
gap: var(--space-xs);
}
.lightbox__stage {
position: relative;
justify-self: start;
}
.lightbox__step {
position: absolute;
top: 50%;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid rgb(255 255 255 / 0.45);
border-radius: var(--radius-s);
background: rgb(16 17 21 / 0.6);
color: #ffffff;
transform: translateY(-50%);
}
.lightbox__step:hover {
background: rgb(16 17 21 / 0.84);
}
.lightbox__step--previous {
left: var(--space-xs);
}
.lightbox__step--next {
right: var(--space-xs);
}
.lightbox--single .lightbox__step {
display: none;
}
.lightbox__icon {
width: 1.25rem;
height: 1.25rem;
}
.lightbox__image {
width: auto;
max-height: calc(94vh - 3.5rem);
border-radius: var(--radius-l);
box-shadow: var(--shadow-l);
}
.lightbox__caption {
color: #e8eaee;
font-size: var(--text-s);
}
.lightbox__close {
position: absolute;
top: -2.6rem;
right: 0;
padding: 0.3rem 0.75rem;
border: 1px solid rgb(255 255 255 / 0.45);
border-radius: var(--radius-s);
background: transparent;
color: #ffffff;
font-size: var(--text-s);
}
.lightbox__close:hover {
background: rgb(255 255 255 / 0.12);
}
}
@layer components {
.faq {
max-width: 48rem;
border: 1px solid var(--border);
border-radius: var(--radius-m);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.faq__item {
padding-inline: var(--space-m);
}
.faq__item + .faq__item {
border-top: 1px solid var(--border);
}
.faq__question {
position: relative;
padding: var(--space-s) 2.5rem var(--space-s) 0;
font-weight: var(--weight-semibold);
list-style: none;
cursor: pointer;
}
.faq__question::-webkit-details-marker {
display: none;
}
.faq__question::after {
content: "+";
position: absolute;
top: 50%;
right: 0.35rem;
color: var(--accent);
font-size: 1.5rem;
font-weight: var(--weight-regular);
line-height: 1;
transform: translateY(-50%);
transition: transform var(--transition-fast);
}
.faq__item[open] > .faq__question::after {
transform: translateY(-50%) rotate(45deg);
}
.faq__question:hover {
color: var(--accent-strong);
}
.faq__answer {
max-width: 42rem;
padding-bottom: var(--space-m);
color: var(--text-muted);
}
.faq__answer > * + * {
margin-top: 0.75em;
}
}
@layer components {
.release-list {
display: grid;
gap: var(--space-s);
}
.release {
padding: var(--space-m) var(--space-l);
border: 1px solid var(--border);
border-radius: var(--radius-m);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.release--latest {
border-color: var(--accent);
box-shadow: inset 3px 0 0 var(--accent), var(--shadow-card);
}
.release__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3xs) var(--space-m);
margin-bottom: var(--space-xs);
}
.release__title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.7rem;
font-size: var(--text-xl);
}
.release--compact {
padding-block: var(--space-s);
}
.release--compact .release__header {
margin-bottom: 0;
}
.release__link {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.7rem;
color: inherit;
text-decoration: none;
}
.release__link:hover {
color: inherit;
}
.release__link:hover .release__name {
color: var(--accent-strong);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.release__version {
padding: 0.1em 0.45em;
border-radius: var(--radius-s);
background: var(--accent-soft);
color: var(--accent-strong);
font-family: var(--font-mono);
font-size: 0.62em;
letter-spacing: 0.02em;
}
.release__badge {
padding: 0.1em 0.5em;
border: 1px solid var(--accent);
border-radius: var(--radius-s);
color: var(--accent-strong);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.release__date {
color: var(--text-subtle);
font-size: var(--text-s);
white-space: nowrap;
}
.release__notes {
padding-left: 1.2rem;
color: var(--text-muted);
list-style: square;
}
.release__notes > li + li {
margin-top: 0.3rem;
}
.release__notes > li::marker {
color: var(--accent);
}
}
@layer components {
.table-scroll {
position: relative;
max-width: 100%;
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-m);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.data-table {
width: 100%;
font-size: var(--text-s);
}
.data-table__head-cell {
padding: 0.6rem 0.9rem;
border-bottom: 1px solid var(--border-strong);
background: var(--surface-alt);
color: var(--text-muted);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: 0.07em;
text-align: left;
text-transform: uppercase;
}
.data-table__cell {
padding: 0.8rem 0.9rem;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.data-table__row:last-child > .data-table__cell {
border-bottom: 0;
}
.data-table__cell--head {
color: var(--text);
font-weight: var(--weight-semibold);
}
.data-table__cell--mono {
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.data-table__cell--muted {
color: var(--text-muted);
}
.data-table__cell--action {
text-align: right;
white-space: nowrap;
vertical-align: middle;
}
.data-table__hash {
display: flex;
align-items: center;
gap: var(--space-2xs);
}
.data-table__hash-value {
display: inline-block;
max-width: 11rem;
overflow: hidden;
font-family: var(--font-mono);
font-size: var(--text-xs);
text-overflow: ellipsis;
white-space: nowrap;
}
.data-table__copy {
flex: none;
padding: 0.15rem 0.5rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-s);
background: var(--surface);
font-size: var(--text-xs);
}
.data-table__copy:hover {
border-color: var(--accent);
}
.data-table__label {
display: block;
color: var(--text-subtle);
font-size: var(--text-xs);
}
}
@layer components {
.steps {
display: grid;
gap: var(--space-m);
max-width: var(--measure);
counter-reset: step;
}
.steps__item {
position: relative;
min-width: 0;
padding-left: 3rem;
counter-increment: step;
}
.steps__item::before {
content: counter(step);
position: absolute;
top: -0.1rem;
left: 0;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-m);
background: var(--surface);
box-shadow: var(--shadow-s);
color: var(--accent-strong);
font-family: var(--font-heading);
font-size: var(--text-l);
}
.steps__title {
display: block;
margin-bottom: 0.2rem;
font-weight: var(--weight-semibold);
}
.steps__item > * + * {
margin-top: var(--space-2xs);
}
}
@layer components {
.notice {
max-width: var(--measure);
padding: var(--space-s) var(--space-m);
border: 1px solid var(--border-strong);
border-left: 4px solid var(--accent);
border-radius: var(--radius-m);
background: var(--surface-alt);
color: var(--text-muted);
font-size: var(--text-s);
}
.notice__title {
display: block;
margin-bottom: 0.2rem;
color: var(--text);
font-weight: var(--weight-semibold);
}
.notice--success {
display: flex;
gap: var(--space-s);
align-items: flex-start;
border-color: var(--success);
background-color: var(--success-soft);
color: var(--text);
font-size: var(--text-m);
}
.notice--success .notice__title {
color: var(--success);
font-size: var(--text-l);
}
.notice__icon {
flex: none;
width: 1.75rem;
height: 1.75rem;
margin-top: 0.15rem;
color: var(--success);
}
.notice--error {
border-left-color: var(--danger);
}
.notice--spaced {
margin-bottom: var(--space-l);
}
}
@layer components {
.form {
display: grid;
gap: var(--space-m);
max-width: var(--measure);
}
.form__row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-m);
}
.form__field {
display: grid;
align-content: start;
gap: 0.35rem;
}
.form__label {
padding: 0;
font-size: var(--text-s);
font-weight: var(--weight-semibold);
}
.form__optional {
color: var(--text-subtle);
font-weight: var(--weight-regular);
}
.form__hint {
color: var(--text-subtle);
font-size: var(--text-xs);
}
.form__control {
width: 100%;
padding: 0.6rem 0.75rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-s);
background: var(--surface);
}
.form__control:hover {
border-color: var(--color-silver-500);
}
.form__control:focus-visible {
border-color: var(--accent);
outline-offset: 1px;
}
.form__control:user-invalid,
.form__control--invalid {
border-color: var(--danger);
}
.form__error {
color: var(--danger);
font-size: var(--text-xs);
}
.form__control--textarea {
min-height: 8rem;
resize: vertical;
}
.form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-m);
}
.form__trap {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.form__actions-note {
color: var(--text-subtle);
font-size: var(--text-s);
}
@media (max-width: 40em) {
.form__row {
grid-template-columns: minmax(0, 1fr);
}
}
}
@layer components {
.story {
display: grid;
grid-template-columns: minmax(0, 1fr) 7rem;
gap: var(--space-xl);
align-items: start;
}
.story__icon {
width: 7rem;
height: 7rem;
filter: drop-shadow(0 8px 18px rgb(28 30 35 / 0.16));
}
@media (max-width: 40em) {
.story {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-s);
}
.story__media {
order: -1;
}
.story__icon {
width: 4rem;
height: 4rem;
}
}
}
@layer components {
.logo-showcase {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-s);
margin-top: var(--space-l);
}
.logo-showcase__item {
display: grid;
justify-items: center;
align-content: start;
gap: var(--space-s);
padding: var(--space-l) var(--space-m) var(--space-m);
border: 1px solid var(--border);
border-radius: var(--radius-m);
background: var(--surface);
box-shadow: var(--shadow-card);
text-align: center;
}
.logo-showcase__image {
width: 6rem;
height: 6rem;
}
.logo-showcase__name {
display: block;
margin-bottom: 0.25rem;
color: var(--text);
font-family: var(--font-heading);
font-size: var(--text-l);
}
.logo-showcase__caption {
color: var(--text-muted);
font-size: var(--text-s);
}
@media (max-width: 48em) {
.logo-showcase {
grid-template-columns: minmax(0, 1fr);
}
}
}
@layer components {
.credit-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: var(--space-s);
}
.credit-list__item {
padding: var(--space-s) var(--space-m);
border: 1px solid var(--border);
border-radius: var(--radius-m);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.credit-list__link {
font-weight: var(--weight-semibold);
}
.credit-list__role {
margin-top: 0.2rem;
color: var(--text-muted);
font-size: var(--text-s);
line-height: var(--leading-snug);
}
}
@layer components {
.timeline {
display: grid;
gap: var(--space-m);
max-width: var(--measure);
padding-left: var(--space-l);
border-left: 2px solid var(--border);
}
.timeline__item {
position: relative;
}
.timeline__item::before {
content: "";
position: absolute;
top: 0.4rem;
left: calc(-1 * var(--space-l) - 7px);
width: 12px;
height: 12px;
border: 2px solid var(--accent);
border-radius: 3px;
background: var(--surface);
}
.timeline__item--future::before {
border-style: dashed;
border-color: var(--color-silver-500);
}
.timeline--roadmap .timeline__item::before {
border-style: dashed;
}
.timeline__date,
.timeline__title {
font-family: var(--font-heading);
font-size: var(--text-l);
}
.timeline__text {
color: var(--text-muted);
}
}
@layer components {
.quote {
position: relative;
max-width: var(--measure);
margin-bottom: var(--space-xl);
padding: var(--space-l) var(--space-l) var(--space-l) 5.5rem;
border: 1px solid var(--border);
border-radius: var(--radius-l);
background: linear-gradient(135deg, var(--accent-soft), var(--surface) 75%);
box-shadow: var(--shadow-card);
}
.quote::before {
content: "";
position: absolute;
top: calc(var(--space-l) + 0.35rem);
left: var(--space-m);
width: 2.5rem;
height: 1.875rem;
background: var(--accent);
mask: url("../img/ui/quote-mark.svg") no-repeat center / contain;
}
.quote__text {
color: var(--text);
font-family: var(--font-heading);
font-size: var(--text-xl);
line-height: var(--leading-snug);
}
.quote__source {
margin-top: var(--space-m);
color: var(--text-muted);
font-size: var(--text-s);
}
.quote__source::before {
content: "";
display: inline-block;
width: 2rem;
height: 1px;
margin-right: var(--space-xs);
vertical-align: middle;
background: var(--accent);
}
.quote__author {
color: var(--text);
font-weight: var(--weight-semibold);
}
.quote__context {
display: block;
margin-left: calc(2rem + var(--space-xs));
color: var(--text-subtle);
font-size: var(--text-xs);
}
.quote__work {
font-style: normal;
}
@media (max-width: 40em) {
.quote {
padding: 4rem var(--space-m) var(--space-m);
}
.quote::before {
top: var(--space-m);
width: 2rem;
height: 1.5rem;
}
.quote__text {
font-size: var(--text-l);
}
}
}
@layer themes {
.page--localsound {
--accent: var(--color-localsound-vivid);
--accent-strong: var(--color-localsound-vivid-text);
--accent-soft: #fff1e6;
--accent-glow: rgb(255 122 26 / 0.3);
--accent-band: linear-gradient(90deg, var(--color-localsound-mid), var(--color-localsound-vivid) 45%, var(--color-localsound-vivid-light));
--accent-button: linear-gradient(180deg, var(--color-localsound-vivid) 0%, var(--color-localsound-vivid-text) 100%);
}
@media (prefers-color-scheme: dark) {
.page--localsound {
--accent-strong: var(--color-localsound-vivid-light);
--accent-soft: #35251a;
--accent-glow: rgb(255 122 26 / 0.16);
}
}
}
@layer themes {
.page--localmoney {
--accent: var(--color-localmoney-vivid);
--accent-strong: var(--color-localmoney-vivid-text);
--accent-soft: #eaf2ff;
--accent-glow: rgb(60 140 255 / 0.28);
--accent-band: linear-gradient(90deg, var(--color-localmoney-mid), var(--color-localmoney-vivid) 45%, var(--color-localmoney-vivid-light));
--accent-button: linear-gradient(180deg, var(--color-localmoney-vivid) 0%, var(--color-localmoney-vivid-text) 100%);
}
@media (prefers-color-scheme: dark) {
.page--localmoney {
--accent-strong: var(--color-localmoney-vivid-light);
--accent-soft: #182538;
--accent-glow: rgb(60 140 255 / 0.16);
}
}
}