/* ntgl.me: the one stylesheet of every page (docs/site.md, D78). White/black and one action colour, as the app: blue in light, orange in dark (D9, D17); Geist (D11). The layers, from weakest to strongest: tokens the variables: colours, spacing, type, motion. Change a value here, never in a rule. base the elements themselves. components what repeats: the header, the controls, the menu, buttons, the badge, the marquee, the footer. pages what belongs to one page only: .home, .doc (Privacy, Terms, Support), .invite (r.php, j.php), .public (p.php: a profile, a public set). utilities the helpers, in markup: spacing (m-, p-, gap-), text, colour, display, with md: and lg: variants. Written by scripts/web/utilities.py from the spacing scale below; don't edit them by hand. A utility wins over a component, whatever their selectors, because its layer comes later. */ @layer tokens, base, components, pages, utilities; @font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url(/fonts/Geist.woff2) format("woff2"); } @font-face { font-family: "Geist Serif"; font-weight: 400; font-display: swap; src: url(/fonts/GeistSerif-Regular.woff2) format("woff2"); } @font-face { font-family: "Geist Mono"; font-weight: 100 900; font-display: swap; src: url(/fonts/GeistMono.woff2) format("woff2"); } /* ─── tokens ─────────────────────────────────────────────────────────────────────────────────────────────────── */ @layer tokens { :root { /* Colour */ --bg: #FFFFFF; --ink: #000000; --soft: #6B6B6B; --line: #E5E5E5; --tint: #F2F2F2; --faint: #A3A3A3; /* the app's third grey: only Neo's light pixels (SpriteColors) */ /* The app's sheets (section 4): its own colours and shadow (NtgldKit/Design: Canvas, Sheet, Rule, Placeholder, the system's secondary label; SheetShadow, D64). */ --app-canvas: #F2F2F2; --app-sheet: #FFFFFF; --app-rule: #E6E6E6; --app-hole: #ECECEC; --app-meta: rgba(60,60,67,.6); --app-shadow: 0 8px 16px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.05); --accent: #0224F7; --on-accent: #FFFFFF; /* The logo is the app icon of the other appearance: black in light, white in dark (AppIcon: icon-dark, icon-light). */ --logo-bg: #000000; --logo-tangle: #FFFFFF; --logo-thread: #FF7000; /* Apple's badge: the black one in light, the white one in dark. */ --badge-bg: #000000; --badge-line: #A6A6A6; --badge-ink: #FFFFFF; color-scheme: light; /* Spacing: one scale, on a 4 px grid. The utilities (m-5 = 20 px) are made from it. */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px; --gutter: var(--space-4); --grid-gap: var(--space-6); /* between the columns of .grid-12 */ --section: 140px; /* the room between two sections (Rayo's padding-default) */ /* Type */ --font-sans: Geist, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --font-serif: "Geist Serif", Georgia, serif; --text-sm: 15px; --text-base: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 36px; --text-lead: clamp(24px, 6.4vw, 44px); /* the hero's subtitle */ --text-display: 16vw; /* the hero's title */ --text-menu: clamp(40px, 11vw, 96px); --text-h2: 44px; --text-h3: 36px; --text-h6: 22px; /* section titles, card titles, list titles */ --text-large: 24px; /* a paragraph that leads (Rayo's t-large) */ --text-marquee: 60px; /* the words that pass between sections */ --text-stat: 70px; /* the big numbers */ --leading-tight: 0.9; --leading-snug: 1.2; --leading-normal: 1.5; --tracking-display: -0.055em; --tracking-tight: -0.02em; /* Size, shape, motion */ --control: 48px; --badge-height: 56px; --logo: 48px; --radius-full: 999px; --radius-m: 16px; --radius-l: 38px; --ease: cubic-bezier(.2, .7, .2, 1); --fast: .3s; --medium: .4s; --header-top: var(--space-6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --ink: #FFFFFF; --soft: #9A9A9A; --line: #262626; --tint: #1A1A1A; --faint: #5C5C5C; --app-canvas: #000000; --app-sheet: #161616; --app-rule: #262626; --app-hole: #222222; --app-meta: rgba(235,235,245,.6); --app-shadow: 0 8px 16px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.22); --accent: #FF7000; --on-accent: #000000; --logo-bg: #FFFFFF; --logo-tangle: #000000; --logo-thread: #0224F7; --badge-bg: #FFFFFF; --badge-line: #000000; --badge-ink: #000000; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #000000; --ink: #FFFFFF; --soft: #9A9A9A; --line: #262626; --tint: #1A1A1A; --faint: #5C5C5C; --app-canvas: #000000; --app-sheet: #161616; --app-rule: #262626; --app-hole: #222222; --app-meta: rgba(235,235,245,.6); --app-shadow: 0 8px 16px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.22); --accent: #FF7000; --on-accent: #000000; --logo-bg: #FFFFFF; --logo-tangle: #000000; --logo-thread: #0224F7; --badge-bg: #FFFFFF; --badge-line: #000000; --badge-ink: #000000; color-scheme: dark; } @media (min-width: 768px) { :root { --gutter: var(--space-12); --control: 56px; --badge-height: 64px; --logo: 56px; --header-top: var(--space-10); --section: 160px; --grid-gap: var(--space-8); --text-h2: 70px; --text-h3: 50px; --text-marquee: 120px; --radius-m: 26px; --radius-l: 50px; } } @media (min-width: 992px) { :root { --text-display: 11.9vw; } /* two lines, the width of the page */ } @media (min-width: 1200px) { :root { --text-h6: 30px; --text-stat: 90px; --text-large: 28px; } } @media (min-width: 1600px) { :root { --gutter: 72px; --section: 200px; --text-stat: 120px; --text-large: 30px; } } } /* ─── base ───────────────────────────────────────────────────────────────────────────────────────────────────── */ @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--text-base)/var(--leading-normal) var(--font-sans); overflow-x: hidden; } a { color: inherit; } img, video, svg { display: block; } img { max-width: 100%; height: auto; } /* the size in the HTML keeps the place; the width comes from the page */ button { font: inherit; color: inherit; } code, kbd { font-family: var(--font-mono); font-size: 0.92em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } } /* ─── components ─────────────────────────────────────────────────────────────────────────────────────────────── */ @layer components { .icon { width: 24px; height: 24px; flex: none; } /* The header: the logo, which leaves as soon as the page scrolls (Rayo's .mxd-header.is-hidden). */ .site-header { position: absolute; top: 0; left: var(--gutter); padding-top: var(--header-top); z-index: 20; transition: opacity var(--medium) var(--ease), transform var(--medium) var(--ease); } .site-header.is-hidden { opacity: 0; transform: scaleY(1.2); pointer-events: none; } .logo, .logo svg { display: block; width: var(--logo); height: var(--logo); } /* What stays at the top: Download (on the home page, only once the hero's badge is out of sight) and the menu. */ .controls { position: fixed; top: var(--header-top); right: var(--gutter); display: flex; gap: var(--space-3); z-index: 40; } .round { display: inline-flex; align-items: center; justify-content: center; width: var(--control); height: var(--control); border-radius: 50%; border: 0; padding: 0; cursor: pointer; } .menu-button { background: var(--ink); color: var(--bg); transition: transform var(--fast) var(--ease); } .menu-button:hover { transform: scale(1.05); } .menu-button__close, .menu-open .menu-button__open { display: none; } .menu-open .menu-button__close { display: block; } /* It floats over everything, cards in the action colour too: a ring of the page's colour and a soft shadow keep it apart. */ .controls__download { box-shadow: 0 0 0 2px var(--bg), 0 10px 24px rgba(0, 0, 0, .22); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); } .controls__download.is-away { opacity: 0; transform: translateY(-8px) scale(.96); pointer-events: none; } .menu-open .controls__download { opacity: 0; pointer-events: none; } .btn { display: inline-flex; align-items: center; gap: var(--space-3); height: var(--control); padding: 0 var(--space-6); border-radius: var(--radius-full); border: 0; font: 600 var(--text-base)/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; background: var(--accent); color: var(--on-accent); transition: transform var(--fast) var(--ease); } .btn:hover { transform: scale(1.04); } .btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } /* Apple's badge, at least 40 pt high as Apple asks. */ .store { display: block; flex: none; transition: transform var(--fast) var(--ease); } .store:hover { transform: scale(1.04); } .store svg { height: var(--badge-height); width: auto; aspect-ratio: 496 / 172; } /* Google Play's badge (scripts/web/sprite.py), as high as Apple's, as Google asks; first on an Android. */ .store--play svg { aspect-ratio: 238.96 / 70.87; } :root[data-os="android"] .store--play { order: -1; } /* What differs by phone (data-os on , web/partials/head.html): data-only="ios", "android" or "other" (a computer, or no JavaScript) shows only there; data-for="ios" or "android" hides only on the other phone. */ :root:not([data-os="ios"]) [data-only="ios"], :root:not([data-os="android"]) [data-only="android"], :root[data-os] [data-only="other"], :root[data-os="android"] [data-for="ios"], :root[data-os="ios"] [data-for="android"] { display: none; } /* The menu: the other pages and the theme. */ .menu { position: fixed; inset: 0; z-index: 30; background: var(--bg); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-30) var(--gutter) var(--space-10); opacity: 0; visibility: hidden; transition: opacity var(--fast) var(--ease), visibility 0s linear var(--fast); } .menu-open .menu { opacity: 1; visibility: visible; transition: opacity var(--fast) var(--ease); } body.menu-open { overflow: hidden; } .menu__pages { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-12); } .menu__pages a { font: 600 var(--text-menu)/1.05 var(--font-sans); letter-spacing: -0.04em; text-decoration: none; } .menu__pages a:hover, .menu__pages a[aria-current="page"] { color: var(--accent); } .menu__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; color: var(--soft); font-size: var(--text-sm); } .menu__foot a { color: var(--soft); text-decoration: none; } .theme { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-full); background: var(--tint); } .theme button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-full); cursor: pointer; background: transparent; color: var(--soft); font-weight: 500; font-size: var(--text-sm); } .theme button[aria-pressed="true"] { background: var(--bg); color: var(--ink); } /* The marquee (Rayo's hero 03): to the right, faster while the page scrolls (site.js). */ .marquee { overflow-x: clip; overflow-y: visible; } .marquee__track { display: flex; align-items: center; width: max-content; will-change: transform; } /* The things are cut out (transparent) and all as tall: the height is the same, the width is each one's own. */ .marquee__item { flex: none; margin-right: var(--space-12); } .marquee__item img { height: 72vw; width: auto; } @media (min-width: 768px) { .marquee__item { margin-right: var(--space-16); } .marquee__item img { height: 40vw; } } @media (min-width: 1200px) { .marquee__item img { height: 25vw; } } @media (min-width: 1600px) { .marquee__item img { height: 23vw; } } /* Rayo's mxd-move, mxd-rotate-slow and mxd-pulse-small: each thing lives a little while it passes. */ .motion-move { animation: move 6s ease-in-out infinite alternate; } .motion-rotate { animation: rotate 40s linear infinite; } .motion-pulse { animation: pulse 3s ease-in-out infinite alternate; } @keyframes move { from { transform: translate3d(0, -4%, 0) rotate(-3deg); } to { transform: translate3d(0, 4%, 0) rotate(3deg); } } @keyframes rotate { to { transform: rotate(360deg); } } @keyframes pulse { from { transform: scale(.94); } to { transform: scale(1.04); } } /* The big title and the line that goes with it, in white with difference: black on the page, inverted over pictures. */ .headline { mix-blend-mode: difference; color: #FFFFFF; pointer-events: none; } .headline__title { margin: 0; font: 600 var(--text-display)/var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-display); } .headline__title span { display: block; } .headline__lead { margin: 0; font: 500 var(--text-lead)/var(--leading-snug) var(--font-sans); letter-spacing: var(--tracking-tight); max-width: 16em; } /* ── Sections (after Rayo's software home; docs/site.md) ── */ .section-title { margin: 0; font: 600 var(--text-h2)/1.1 var(--font-sans); letter-spacing: -0.03em; } .lead { margin: 0; font: 500 var(--text-large)/1.3 var(--font-sans); letter-spacing: var(--tracking-tight); } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--soft); font-size: var(--text-sm); } .eyebrow--caps { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } .icon--flip { transform: scaleX(-1); } /* A row of cards that scrolls sideways and stops at each, with arrows under it (after babyapp.pro's Features gallery): a square picture with round corners, and the words under it, the key ones in ink. */ .gallery { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .gallery::-webkit-scrollbar { display: none; } .gallery:focus-visible { outline-offset: -2px; } .gcard { flex: none; width: min(76vw, 300px); margin: 0; scroll-snap-align: start; } .gcard__media { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-m); background: var(--tint); } .gcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .gcard__text { margin-top: 18px; padding-right: var(--space-2); color: var(--soft); font-size: var(--text-base); line-height: 1.5; } .gcard__text b { color: var(--ink); font-weight: 600; } .gallery__arrows { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); } .gallery__arrow { width: 44px; height: 44px; background: var(--tint); color: var(--ink); transition: opacity var(--fast) ease; } .gallery__arrow:disabled { opacity: .35; cursor: default; } @media (min-width: 900px) { .gcard { width: 300px; } .gallery { gap: 36px; } } /* Coming in as the page reaches them (site.js adds .is-in): Rayo's anim-uni-in-up. */ .js .anim-in { opacity: 0; transform: translateY(50px); transition: opacity 1.2s cubic-bezier(.25,.46,.45,.94), transform 1.2s cubic-bezier(.25,.46,.45,.94); } .js .anim-in.is-in { opacity: 1; transform: none; } /* A title that lights up letter by letter with the scroll (Rayo's RevealText); site.js sets each letter's opacity. */ .reveal .char { opacity: .2; } /* The rolling letters of a button (Rayo's btn-anim): site.js doubles the caption, letter by letter. */ .btn-roll { display: block; height: 1.25em; line-height: 1.25; overflow: hidden; } .btn-roll__line { display: block; white-space: nowrap; } .btn-roll__letter { display: inline-block; transition: transform .5s cubic-bezier(.76,0,.024,1); transition-delay: calc(var(--i, 0) * 30ms); } .btn:hover .btn-roll__letter, .store:hover .btn-roll__letter { transform: translateY(-100%); } .tag { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px currentColor; font-size: 14px; line-height: 1; white-space: nowrap; } .tag--fill { background: var(--bg); color: var(--ink); box-shadow: none; } .tag--accent { background: var(--accent); color: var(--on-accent); box-shadow: none; } /* The words that pass between sections (Rayo's MarqueeSlider): the same marquee, in big muted text. */ .marquee--words .marquee__item { width: auto; margin-right: 0; display: flex; align-items: center; } .marquee__word { margin: 0 var(--space-4) 0 0; font: 400 var(--text-marquee)/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--line); white-space: nowrap; } /* The words are decoration (muted on purpose, aria-hidden): drawn from data-word, so they aren't text a contrast check reads (D116). */ .marquee__word::before { content: attr(data-word); } .marquee__star { width: calc(var(--text-marquee) * .68); height: calc(var(--text-marquee) * .68); margin-right: var(--space-4); color: var(--line); } @media (min-width: 1200px) { .marquee__word, .marquee__star { margin-right: var(--space-8); } } /* A list of rows between lines (Rayo's approach and capabilities lists); the others dim while one is pointed at. */ .rows { border-top: 2px solid var(--ink); } .rows > * { border-bottom: 2px solid var(--ink); } @media (min-width: 1200px) and (hover: hover) and (prefers-reduced-motion: no-preference) { .rows > * { transition: opacity var(--fast) ease; } .rows:hover > *:not(:hover) { opacity: .2; } } /* A column that stays while the other scrolls (Rayo's pinned projects). */ @media (min-width: 1200px) { .sticky-top { position: sticky; top: 0; padding-top: var(--space-24); } } /* Section 4: the app's Things, as close as a page can draw it (Sorin, 2026-11-12). On top, how to search (.pile__modes); the words of that way on one line that scrolls, faded at an edge with more past it (.pile__ground); the line; the things, as the app's sheets (.sheet: PaperSheet, SheetGrid), in columns of at least 170 px, 14 apart and 18 between rows, each in the shortest column (site.js). A word shows only the things that have it. The card is the app's canvas: #F2F2F2, black in dark (with an edge, on the black page). */ .pile { --pad: var(--space-6); isolation: isolate; border-radius: var(--radius-l); background: var(--app-canvas); overflow: hidden; box-shadow: inset 0 0 0 1px var(--app-rule); } .pile__modes { display: flex; gap: var(--space-1); width: max-content; max-width: calc(100% - 2 * var(--pad)); margin: var(--pad) var(--pad) 0; padding: var(--space-1); border-radius: var(--radius-full); background: var(--app-sheet); overflow-x: auto; scrollbar-width: none; } .pile__modes button { flex: none; height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--soft); font: 500 var(--text-sm)/1 var(--font-sans); cursor: pointer; transition: background-color var(--fast) ease, color var(--fast) ease; } .pile__modes button:hover { color: var(--ink); } .pile__modes button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } /* The words: one line, the ones that find the most first; past an edge with more, they fade (.has-more, .has-less). */ .pile__ground { margin-top: var(--space-4); } .pile__chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px var(--pad); scroll-padding-inline: var(--pad); --fade-l: 0px; --fade-r: 0px; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); } .pile__chips::-webkit-scrollbar, .pile__modes::-webkit-scrollbar { display: none; } .pile__chips.has-less { --fade-l: 48px; } .pile__chips.has-more { --fade-r: 64px; } .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--space-4) 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: var(--app-sheet); color: var(--ink); box-shadow: inset 0 0 0 1px var(--app-rule); font-size: var(--text-sm); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color var(--fast) ease, color var(--fast) ease; } .chip .icon { width: 18px; height: 18px; } .chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; } .chip[hidden] { display: none; } /* What a chip begins with: a colour's dot (the picture's colour, content, D41), a type's icon (ItemSubtype.icon). */ .chip__dot { width: 14px; height: 14px; margin: 0 2px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .dot--red { background: #D8262E; } .dot--yellow { background: #F4C430; } .dot--pink { background: #F3A6C8; } .dot--green { background: #6FA05A; } .dot--brown { background: #9A6440; } .dot--white { background: #FFFFFF; } .dot--gray { background: #9C9C9C; } .dot--blue { background: #5E9BD6; } .dot--orange { background: #F08A2C; } .pile__caption { margin: 0; padding: var(--space-5) var(--pad) 0; font-size: var(--text-lg); line-height: 1.4; color: var(--soft); min-height: calc(2.8em + var(--space-5)); } .pile__caption b { color: var(--ink); font-weight: 600; } .js .pile__caption:not([hidden]) { animation: pile-line .35s var(--ease) both; } @keyframes pile-line { from { opacity: 0; transform: translateY(6px); } } /* The things: the window of a phone or a tablet, faded at its bottom. Without JavaScript, in columns of CSS. */ .pile__things { position: relative; height: 720px; margin: var(--space-6) var(--pad) 0; overflow: hidden; columns: 170px; column-gap: 14px; } .pile__things::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 50; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--app-canvas)); } .js .pile__things { columns: auto; } .js .pile__things .sheet { position: absolute; left: 0; top: 0; margin: 0; transform: translate3d(var(--x, 0), calc(var(--y, 0) + var(--rise, 0px)), 0) scale(var(--scale, 1)); opacity: var(--alpha, 1); transition: transform .5s var(--ease), opacity .3s ease-out; } .js .pile:not(.is-in) .sheet { --rise: 24px; --alpha: 0; } .js .pile__things .sheet.is-out { --scale: .94; --alpha: 0; pointer-events: none; visibility: hidden; transition: transform .5s var(--ease), opacity .25s ease-out, visibility 0s .3s; } /* A thing as the app draws it (PaperSheet): the site or the kind (Geist Mono 12, the secondary label), the title (Geist Medium 15, at most three lines), then the picture to the sheet's edges at its own proportions (0.4 to 3), with the type's badge in its corner (TypeBadge: the icon, 24 px, with 4 px of paper around it, and a product's price); a note's words at the bottom of a square (NoteExcerpt: Geist Serif 22, 12 px in, clear of the badge). A squircle of 12, its rule and the two shadows of D64. */ .sheet { width: 100%; margin: 0 0 18px; break-inside: avoid; border-radius: 12px; overflow: hidden; background: var(--app-sheet); box-shadow: var(--app-shadow), inset 0 0 0 1px var(--app-rule); color: var(--ink); } .sheet__head { padding: 10px; } .sheet__label { margin: 0; font: 400 12px/1.3 var(--font-mono); color: var(--app-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sheet__title { margin: 3px 0 0; font: 500 15px/1.3 var(--font-sans); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sheet__picture { position: relative; background: var(--app-hole); } .sheet__picture img { display: block; width: 100%; height: 100%; object-fit: cover; } .sheet__badge { position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--app-sheet); color: var(--ink); font: 400 12px/1 var(--font-mono); } .sheet__badge .icon { width: 24px; height: 24px; } .sheet__badge span:not(.sr-only) { padding-right: 4px; } .sheet__picture--note { aspect-ratio: 1; display: flex; align-items: flex-end; } .sheet__picture--note p { margin: 0; padding: 40px 12px 12px; font: 400 22px/1.25 var(--font-serif); overflow-wrap: anywhere; } /* A cut-out, photographed on a ground that fits it. */ .sheet__picture--cut img { object-fit: contain; padding: 8% 10%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.22)); } .paper--sofa { background: radial-gradient(circle at 50% 28%, #F6EDDF, #DCC6A4); } /* the cat, on the sofa */ .paper--meadow { background: linear-gradient(#B9DBF3, #E4F1F9 66%, #A6CB89 66%, #8DB872); } /* the dog, jumping in a field */ .paper--blush { background: radial-gradient(circle at 50% 28%, #FCF0EC, #EBCBC4); } /* the shoe, in a shop window */ .paper--wood { background: linear-gradient(160deg, #D6B38A, #A97C4E); } /* the book, on a desk */ .paper--tile { background: radial-gradient(circle at 50% 35%, #F0F6FB, #C5DAEA); } /* the egg, on a breakfast plate */ .paper--lilac { background: radial-gradient(circle at 50% 28%, #F3EDFC, #D2C3EF); } /* the unicorn, in a child's room */ .paper--clay { background: radial-gradient(circle at 50% 28%, #F6DCCB, #DEA584); } /* the leaves, by a terracotta wall */ .paper--night { background: radial-gradient(circle at 50% 28%, #514880, #1C182E); } /* Daft Punk, on stage */ .paper--steel { background: radial-gradient(circle at 50% 28%, #F4F6F8, #CBD3DB); } /* the suitcase, at the airport */ @media (min-width: 768px) { .pile { --pad: var(--space-8); } } /* Cards of different sizes (Rayo's services bento): the colours are the app's, the pictures are content. */ /* No min-height in % here: Safari sizes it against the grid row after the pictures load, and the card grows past its content. In a row on a computer the cards stretch to the same height anyway, as grid items do. */ .bento { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--space-8); border-radius: var(--radius-l); overflow: hidden; background: var(--tint); color: var(--ink); } .bento--accent { background: var(--accent); color: var(--on-accent); } .bento--ink { background: var(--ink); color: var(--bg); } .bento__title { position: relative; z-index: 1; margin: 0; font: 600 var(--text-h3)/1.1 var(--font-sans); letter-spacing: -0.02em; } .bento__text { position: relative; z-index: 1; margin: 0; max-width: 28em; } .bento__image { width: 70%; max-width: 360px; height: auto; margin: 0 auto; } @media (min-width: 768px) { .bento { min-height: 420px; padding: var(--space-10); } } @media (min-width: 1200px) { /* The thing whole, inside the card, at the right (a box it fits in, not a width: tall and wide things alike); under the title until 1440 px, where the cards are wide enough for both side by side. */ .bento__image { position: absolute; right: var(--space-8); top: var(--space-24); width: 36%; height: 34%; margin: 0; object-fit: contain; object-position: right top; } .bento__image.motion-rotate { object-position: center; } /* turns around its own middle */ .bento--wide .bento__image { right: var(--space-12); top: var(--space-10); width: 30%; height: calc(100% - 2 * var(--space-10)); } .bento--wide .bento__text { max-width: 50%; } } @media (min-width: 1440px) { .bento:not(.bento--wide) .bento__image { top: var(--space-8); height: 42%; } } @media (min-width: 1600px) { .bento { min-height: 520px; } } /* Questions that open (Rayo's accordion): one open at a time. */ .faq__q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-8) 0; border: 0; background: none; cursor: pointer; text-align: left; font: 600 var(--text-h6)/1.2 var(--font-sans); color: var(--ink); } .faq__q .icon { transition: transform var(--fast) var(--ease); } .faq__q[aria-expanded="true"] .icon { transform: rotate(135deg); } /* Closed only with site.js, which opens them: without it, every answer shows (D116). */ .faq__a { overflow: hidden; transition: height var(--fast) ease; } .js .faq__a { height: 0; } .faq__a p { margin: 0; padding-bottom: var(--space-8); max-width: 40em; color: var(--soft); font-size: var(--text-lg); } /* The last call (Rayo's promo): a dark card that opens as it comes (site.js scrubs its scale and corners). */ .promo { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24) var(--space-8) var(--space-30); border-radius: var(--radius-l); overflow: hidden; background: var(--ink); color: var(--bg); --badge-bg: var(--bg); --badge-line: var(--ink); --badge-ink: var(--ink); } .promo__title { position: relative; z-index: 1; margin: 0; font: 600 var(--text-h2)/1.05 var(--font-sans); letter-spacing: -0.03em; max-width: 9em; } .promo__qr { display: none; } .promo__images { display: none; } @media (min-width: 768px) { .promo { padding: var(--space-30) var(--space-12) 140px; } } @media (min-width: 1200px) { .promo { padding-left: var(--space-16); padding-right: var(--space-16); } .promo__qr { display: flex; align-items: center; gap: var(--space-4); color: color-mix(in srgb, var(--bg) 60%, transparent); font-size: var(--text-sm); } .promo__qr img { width: 96px; height: 96px; border-radius: 12px; } .promo__images { display: block; position: absolute; right: 0; top: 0; width: 46%; height: 100%; } .promo__image { position: absolute; } .promo__image--1 { width: 300px; right: var(--space-24); bottom: var(--space-16); } .promo__image--2 { width: 220px; left: 0; top: var(--space-16); } } /* On a phone the cards take the whole width, square: more room, and they part by their colours (the bento's alternate; cards of one colour keep a strip of page between them). The row of section 2 keeps its round corners. */ @media (max-width: 767px) { .pile, .bento, .promo { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; } .pile { --pad: var(--gutter); } .pile__things { height: clamp(460px, calc(100svh - 200px), 640px); margin-left: 16px; margin-right: 16px; } .pile__modes { width: auto; } .pile__modes button { flex: 1 1 auto; padding: 0 var(--space-2); } .bento { padding: var(--space-10) var(--gutter); } .promo { padding-left: var(--gutter); padding-right: var(--gutter); } } /* The footer (Sorin, 2026-11-12): quiet, its one job the download. The line and the badge (not on a page whose content already has the badge: the home page, /start, the public pages), then a row: the name, the pages, who makes it. On every page. */ .site-footer { margin-top: var(--space-24); padding-bottom: var(--space-8); } .site-footer__get { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-10) 0; border-top: 1px solid var(--line); } main:has(.store) ~ .site-footer .site-footer__get { display: none; } /* the page has just shown the badge */ .site-footer__line { margin: 0; font: 600 var(--text-xl)/1.2 var(--font-sans); letter-spacing: -0.01em; } .site-footer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); color: var(--soft); font-size: var(--text-sm); } .site-footer__name { color: var(--ink); font-weight: 600; text-decoration: none; } .site-footer__pages { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); } .site-footer__pages a { color: var(--soft); text-decoration: none; } .site-footer__pages a:hover, .site-footer__pages a[aria-current="page"] { color: var(--ink); } .site-footer__by { margin: 0; } @media (min-width: 768px) { .site-footer__by { margin-left: auto; } } /* A form (ntgl.me/contact; a report from a public page, D126): the fields, a line when something's wrong, and a field only scripts fill. */ .form__error { margin: var(--space-6) 0 0; color: var(--accent); font-weight: 600; } .form .field { display: block; margin: var(--space-8) 0 0; padding: 0; border: 0; } .form .field > span, .form legend { display: block; margin-bottom: var(--space-2); padding: 0; font-weight: 600; } .form input:not([type="radio"]), .form select, .form textarea { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--ink); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; } .form textarea { resize: vertical; } .form .choice { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; } .form .choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); } .form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } } /* ─── pages ──────────────────────────────────────────────────────────────────────────────────────────────────── */ @layer pages { /* Home: the hero fills the first screen; the marquee sits behind the title. */ .home-hero { position: relative; padding-top: calc(var(--header-top) + var(--control)); } .home-hero__stage { position: relative; height: calc(100svh - var(--header-top) - var(--control) - 150px); min-height: 500px; } .home-hero__stage .marquee { position: absolute; left: 0; top: 34%; transform: translateY(-50%); width: 100%; } .home-hero__stage .headline { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter); } @media (min-width: 768px) { .home-hero__stage { height: calc(100svh - var(--header-top) - var(--control) - 140px); min-height: 640px; } } @media (min-width: 992px) { .home-hero__stage .marquee { top: 40%; } } .home-rest { min-height: 100vh; } /* until the next sections exist: room to scroll */ /* Privacy, Terms, Support: reading pages. */ .doc { max-width: 720px; margin: 0 auto; padding: calc(var(--header-top) + var(--control) + var(--space-12)) var(--gutter) var(--space-16); } .doc h1 { font-size: var(--text-2xl); line-height: 1.15; font-weight: 600; letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-2); } .doc h2 { font-size: var(--text-lg); line-height: 1.3; font-weight: 600; margin: var(--space-10) 0 var(--space-2); } .doc h3 { font-size: var(--text-base); font-weight: 600; margin: var(--space-6) 0 var(--space-1); } .doc p, .doc ul { margin: 0 0 14px; } .doc ul { padding-left: 22px; } .doc li { margin: var(--space-1) 0; } .doc a { color: var(--accent); } .doc .meta { color: var(--soft); font-family: var(--font-mono); font-size: 14px; margin-bottom: 28px; } .doc .short { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: var(--space-4) 0; margin: 0 0 var(--space-2); } .doc .lede { font-size: var(--text-lg); color: var(--soft); max-width: 34em; } /* r.php: a friend's invite (D72). */ .invite .code { font: 500 clamp(44px, 15vw, 96px)/1 var(--font-mono); letter-spacing: 0.08em; margin: 0 0 var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); word-break: break-all; user-select: all; -webkit-user-select: all; } .invite [hidden] { display: none; } /* j.php: an invite to a shared set (D84). The set's folder (D18), its name large, as the person wrote it. */ .set-invite__set { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) 0; margin: 0 0 var(--space-6); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); } .set-invite__icon { flex: none; width: 48px; height: 48px; margin-top: .1em; color: var(--ink); } .invite .set-invite__name { margin: 0; font: 600 clamp(36px, 9vw, 64px)/1.05 var(--font-sans); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; transition: color var(--fast) var(--ease); } .set-invite[aria-busy] .set-invite__name { color: var(--soft); } .set-invite--gone .set-invite__icon { color: var(--soft); } .set-invite a.btn { color: var(--on-accent); } /* a button, not one of .doc's links */ /* 404.html: the site's own "not here" (D116), with Neo, who arrives as a glitch (D14: slices that jump a pixel or two and a brief duplicate in the action colour), then rests (IdleRest, the keyframes below, from scripts/web/neo.py). One of Neo's pixels is --neo-px; he's drawn on whole pixels (crispEdges). With Reduce Motion (base), no animation: Neo stands, the ghost stays hidden. */ .lost, .start { --neo-px: 4px; } /* start.html: Neo greets the person who just saved the page (D81 §5) */ .lost a.btn { color: var(--on-accent); } /* a button, not one of .doc's links */ .neo { position: relative; width: calc(40 * var(--neo-px)); height: calc(46 * var(--neo-px)); margin: 0 0 var(--space-8); margin-left: calc(-4 * var(--neo-px)); } /* his drawing starts 4 pixels in: the cape lines up with the text */ .neo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .neo-i { fill: var(--ink); } .neo-m { fill: var(--soft); } .neo-f { fill: var(--faint); } .neo-a { fill: var(--accent); } .neo__ghost { opacity: 0; animation: neo-ghost .7s .15s steps(1, end) both; } .neo__ghost path { fill: var(--accent); } .neo__body { animation: neo-in .7s .15s steps(1, end) both; } @keyframes neo-in { 0% { opacity: 0; } 12% { opacity: 1; transform: translateX(calc(3 * var(--neo-px))); clip-path: inset(0 0 58% 0); } 22% { transform: translateX(calc(-2 * var(--neo-px))); clip-path: inset(36% 0 18% 0); } 32% { opacity: 0; } 42% { opacity: 1; transform: translateX(var(--neo-px)); clip-path: inset(0 0 30% 0); } 56% { transform: none; clip-path: inset(0 0 0 0); } 70% { transform: translateX(calc(-1 * var(--neo-px))); clip-path: inset(48% 0 0 0); } 80%, 100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } } @keyframes neo-ghost { 0%, 12% { opacity: 0; } 22% { opacity: 1; transform: translateX(calc(2 * var(--neo-px))); clip-path: inset(0 0 50% 0); } 32% { opacity: 1; transform: translateX(calc(-1 * var(--neo-px))); clip-path: inset(20% 0 0 0); } 42% { opacity: 0; } 62% { opacity: 1; transform: translateX(calc(2 * var(--neo-px))); clip-path: inset(55% 0 10% 0); } 72%, 100% { opacity: 0; transform: none; } } /* neo:begin (scripts/web/neo.py): IdleRest, 176 frames at 20 a second, 14 of them different */ .neo__strip { animation: neo-rest 8.8s steps(1, end) infinite; } @keyframes neo-rest { 0% { transform: translateX(0px); } 1.7% { transform: translateX(-40px); } 3.41% { transform: translateX(-80px); } 5.11% { transform: translateX(-120px); } 6.82% { transform: translateX(0px); } 8.52% { transform: translateX(-160px); } 10.23% { transform: translateX(-200px); } 11.93% { transform: translateX(-240px); } 13.64% { transform: translateX(0px); } 15.34% { transform: translateX(-40px); } 17.05% { transform: translateX(-80px); } 18.75% { transform: translateX(-120px); } 20.45% { transform: translateX(0px); } 22.16% { transform: translateX(-160px); } 23.86% { transform: translateX(-200px); } 25.57% { transform: translateX(-240px); } 27.27% { transform: translateX(0px); } 28.98% { transform: translateX(-40px); } 30.68% { transform: translateX(-80px); } 32.39% { transform: translateX(-120px); } 34.09% { transform: translateX(0px); } 35.8% { transform: translateX(-160px); } 37.5% { transform: translateX(-200px); } 39.2% { transform: translateX(-240px); } 40.91% { transform: translateX(0px); } 42.61% { transform: translateX(-40px); } 44.32% { transform: translateX(-80px); } 46.02% { transform: translateX(-120px); } 47.73% { transform: translateX(0px); } 49.43% { transform: translateX(-160px); } 51.14% { transform: translateX(-200px); } 52.84% { transform: translateX(-240px); } 54.55% { transform: translateX(0px); } 56.25% { transform: translateX(-40px); } 57.95% { transform: translateX(-80px); } 59.66% { transform: translateX(-120px); } 61.36% { transform: translateX(0px); } 63.07% { transform: translateX(-160px); } 64.77% { transform: translateX(-200px); } 66.48% { transform: translateX(-240px); } 68.18% { transform: translateX(0px); } 69.89% { transform: translateX(-40px); } 71.59% { transform: translateX(-80px); } 73.3% { transform: translateX(-120px); } 75% { transform: translateX(0px); } 76.7% { transform: translateX(-160px); } 78.41% { transform: translateX(-200px); } 80.11% { transform: translateX(-240px); } 81.82% { transform: translateX(0px); } 84.09% { transform: translateX(-280px); } 86.36% { transform: translateX(-320px); } 88.64% { transform: translateX(-360px); } 90.91% { transform: translateX(-400px); } 93.18% { transform: translateX(-440px); } 95.45% { transform: translateX(-480px); } 97.73% { transform: translateX(-520px); } 100% { transform: translateX(-520px); } } /* neo:end */ @media (min-width: 768px) { .lost, .start { --neo-px: 5px; } } /* start.html: the share guide's films (scripts/web/films.py), each as tall as a phone's screen can show whole; on a computer side by side, with their names; on a phone only its own, without one. The play button shows while a film stands (not yet in sight, Reduce Motion, or Low Power Mode), with JavaScript only: without, the video's own controls. */ .films { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-6) 0 var(--space-2); } .film { margin: 0; } .film__frame { position: relative; width: min(260px, calc((100svh - 160px) * 540 / 1174), calc(100vw - 2 * var(--gutter))); } .film video { width: 100%; height: auto; /* its proportions: the width and height in start.html */ border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--line); background: var(--tint); cursor: pointer; } .film figcaption { margin-top: var(--space-2); color: var(--soft); font-family: var(--font-mono); font-size: 14px; } :root[data-os] .film figcaption { display: none; } .film__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--accent); color: var(--on-accent); } .film__play[hidden], .film.is-playing .film__play { display: none; } /* p.php: a profile and a public set (D126). The set's folder in its colour (D23, the only place it shows), its name large, as the person wrote it; the things as cards, two to a row on a phone, more as the window grows (D121). */ .public { max-width: 1200px; margin: 0 auto; padding: calc(var(--header-top) + var(--control) + var(--space-12)) var(--gutter) var(--space-16); } .public [hidden] { display: none; } .public .meta { color: var(--soft); font-family: var(--font-mono); font-size: 14px; margin: 0 0 var(--space-4); } .public .meta a, .public .lede a { color: inherit; } .public .lede { font-size: var(--text-lg); color: var(--soft); max-width: 34em; margin: var(--space-4) 0 0; } .public a.btn { color: var(--on-accent); } .public-head { max-width: 760px; } .public-head__name { margin: 0; font: 600 clamp(36px, 10vw, 80px)/1.05 var(--font-sans); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; } .public-set { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); } .public-set__folder { flex: none; width: 48px; height: 48px; margin-top: .1em; color: var(--ink); } .public-set__name { margin: 0; font: 600 clamp(36px, 9vw, 64px)/1.05 var(--font-sans); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; } .public-invite { max-width: 760px; margin: var(--space-10) 0 0; padding: var(--space-6) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); } .public-invite__line { margin: 0; font-size: var(--text-lg); line-height: 1.4; } .public-invite__code { font-family: var(--font-mono); letter-spacing: .08em; color: var(--ink); user-select: all; -webkit-user-select: all; } .things { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); } @media (min-width: 768px) { .things { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--space-6); } } @media (min-width: 1200px) { .things { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .thing { min-width: 0; } .thing__picture { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--tint); } .thing__picture img { width: 100%; height: 100%; object-fit: cover; } a.thing__picture img { transition: transform var(--medium) var(--ease); } a.thing__picture:hover img { transform: scale(1.03); } .thing__none { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--soft); } .thing__title { margin: var(--space-3) 0 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .thing__domain { margin: var(--space-1) 0 0; font: 14px/1.4 var(--font-mono); color: var(--soft); } .thing__domain a { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; color: inherit; text-decoration: none; } .thing__domain a:hover { color: var(--ink); } .thing__domain .icon { width: 16px; height: 16px; } /* A profile's sets: each a stack of its first pictures (D23), the newest on top. */ .sets { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-10) var(--space-8); } .set-card { display: block; color: inherit; text-decoration: none; } .set-card__stack { position: relative; display: block; aspect-ratio: 4 / 3; } .set-card__stack img, .set-card__blank { position: absolute; top: 6%; left: 14%; width: 72%; height: 88%; object-fit: cover; border-radius: 12px; background: var(--tint); box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgba(0, 0, 0, .12); transition: transform var(--medium) var(--ease); } .set-card__stack img:nth-child(1) { transform: rotate(-7deg) translateX(-8%); } .set-card__stack img:nth-child(2) { transform: rotate(6deg) translateX(8%); } .set-card__stack img:last-child { transform: none; } .set-card:hover .set-card__stack img:last-child { transform: translateY(-4px); } .set-card__name { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-lg); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; } .set-card__count { display: block; margin-top: 2px; color: var(--soft); font: 14px/1.4 var(--font-mono); } .public-empty { margin-top: var(--space-12); } .public-foot { margin: var(--space-16) 0 0; font-size: var(--text-sm); } .public-foot a { color: var(--soft); } /* A report from a public page: the same reasons as in the app (D87). */ .public-report { max-width: 720px; } .public-report h1 { margin: 0; font-size: var(--text-2xl); line-height: 1.15; font-weight: 600; letter-spacing: var(--tracking-tight); } } /* ─── utilities ──────────────────────────────────────────────────────────────────────────────────────────────── */ /* utilities:begin (scripts/web/utilities.py) */ @layer utilities { .m-0 { margin: var(--space-0); } .m-1 { margin: var(--space-1); } .m-2 { margin: var(--space-2); } .m-3 { margin: var(--space-3); } .m-4 { margin: var(--space-4); } .m-5 { margin: var(--space-5); } .m-6 { margin: var(--space-6); } .m-8 { margin: var(--space-8); } .m-10 { margin: var(--space-10); } .m-12 { margin: var(--space-12); } .m-16 { margin: var(--space-16); } .m-20 { margin: var(--space-20); } .m-24 { margin: var(--space-24); } .m-30 { margin: var(--space-30); } .mt-0 { margin-top: var(--space-0); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); } .mt-12 { margin-top: var(--space-12); } .mt-16 { margin-top: var(--space-16); } .mt-20 { margin-top: var(--space-20); } .mt-24 { margin-top: var(--space-24); } .mt-30 { margin-top: var(--space-30); } .mr-0 { margin-right: var(--space-0); } .mr-1 { margin-right: var(--space-1); } .mr-2 { margin-right: var(--space-2); } .mr-3 { margin-right: var(--space-3); } .mr-4 { margin-right: var(--space-4); } .mr-5 { margin-right: var(--space-5); } .mr-6 { margin-right: var(--space-6); } .mr-8 { margin-right: var(--space-8); } .mr-10 { margin-right: var(--space-10); } .mr-12 { margin-right: var(--space-12); } .mr-16 { margin-right: var(--space-16); } .mr-20 { margin-right: var(--space-20); } .mr-24 { margin-right: var(--space-24); } .mr-30 { margin-right: var(--space-30); } .mb-0 { margin-bottom: var(--space-0); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-10 { margin-bottom: var(--space-10); } .mb-12 { margin-bottom: var(--space-12); } .mb-16 { margin-bottom: var(--space-16); } .mb-20 { margin-bottom: var(--space-20); } .mb-24 { margin-bottom: var(--space-24); } .mb-30 { margin-bottom: var(--space-30); } .ml-0 { margin-left: var(--space-0); } .ml-1 { margin-left: var(--space-1); } .ml-2 { margin-left: var(--space-2); } .ml-3 { margin-left: var(--space-3); } .ml-4 { margin-left: var(--space-4); } .ml-5 { margin-left: var(--space-5); } .ml-6 { margin-left: var(--space-6); } .ml-8 { margin-left: var(--space-8); } .ml-10 { margin-left: var(--space-10); } .ml-12 { margin-left: var(--space-12); } .ml-16 { margin-left: var(--space-16); } .ml-20 { margin-left: var(--space-20); } .ml-24 { margin-left: var(--space-24); } .ml-30 { margin-left: var(--space-30); } .mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); } .mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); } .mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); } .mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); } .mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); } .mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); } .mx-24 { margin-left: var(--space-24); margin-right: var(--space-24); } .mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); } .my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); } .my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); } .my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); } .my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } .my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); } .my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); } .my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); } .my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); } .p-0 { padding: var(--space-0); } .p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } .p-10 { padding: var(--space-10); } .p-12 { padding: var(--space-12); } .p-16 { padding: var(--space-16); } .p-20 { padding: var(--space-20); } .p-24 { padding: var(--space-24); } .p-30 { padding: var(--space-30); } .pt-0 { padding-top: var(--space-0); } .pt-1 { padding-top: var(--space-1); } .pt-2 { padding-top: var(--space-2); } .pt-3 { padding-top: var(--space-3); } .pt-4 { padding-top: var(--space-4); } .pt-5 { padding-top: var(--space-5); } .pt-6 { padding-top: var(--space-6); } .pt-8 { padding-top: var(--space-8); } .pt-10 { padding-top: var(--space-10); } .pt-12 { padding-top: var(--space-12); } .pt-16 { padding-top: var(--space-16); } .pt-20 { padding-top: var(--space-20); } .pt-24 { padding-top: var(--space-24); } .pt-30 { padding-top: var(--space-30); } .pr-0 { padding-right: var(--space-0); } .pr-1 { padding-right: var(--space-1); } .pr-2 { padding-right: var(--space-2); } .pr-3 { padding-right: var(--space-3); } .pr-4 { padding-right: var(--space-4); } .pr-5 { padding-right: var(--space-5); } .pr-6 { padding-right: var(--space-6); } .pr-8 { padding-right: var(--space-8); } .pr-10 { padding-right: var(--space-10); } .pr-12 { padding-right: var(--space-12); } .pr-16 { padding-right: var(--space-16); } .pr-20 { padding-right: var(--space-20); } .pr-24 { padding-right: var(--space-24); } .pr-30 { padding-right: var(--space-30); } .pb-0 { padding-bottom: var(--space-0); } .pb-1 { padding-bottom: var(--space-1); } .pb-2 { padding-bottom: var(--space-2); } .pb-3 { padding-bottom: var(--space-3); } .pb-4 { padding-bottom: var(--space-4); } .pb-5 { padding-bottom: var(--space-5); } .pb-6 { padding-bottom: var(--space-6); } .pb-8 { padding-bottom: var(--space-8); } .pb-10 { padding-bottom: var(--space-10); } .pb-12 { padding-bottom: var(--space-12); } .pb-16 { padding-bottom: var(--space-16); } .pb-20 { padding-bottom: var(--space-20); } .pb-24 { padding-bottom: var(--space-24); } .pb-30 { padding-bottom: var(--space-30); } .pl-0 { padding-left: var(--space-0); } .pl-1 { padding-left: var(--space-1); } .pl-2 { padding-left: var(--space-2); } .pl-3 { padding-left: var(--space-3); } .pl-4 { padding-left: var(--space-4); } .pl-5 { padding-left: var(--space-5); } .pl-6 { padding-left: var(--space-6); } .pl-8 { padding-left: var(--space-8); } .pl-10 { padding-left: var(--space-10); } .pl-12 { padding-left: var(--space-12); } .pl-16 { padding-left: var(--space-16); } .pl-20 { padding-left: var(--space-20); } .pl-24 { padding-left: var(--space-24); } .pl-30 { padding-left: var(--space-30); } .px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .px-1 { padding-left: var(--space-1); padding-right: var(--space-1); } .px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .px-5 { padding-left: var(--space-5); padding-right: var(--space-5); } .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } .px-12 { padding-left: var(--space-12); padding-right: var(--space-12); } .px-16 { padding-left: var(--space-16); padding-right: var(--space-16); } .px-20 { padding-left: var(--space-20); padding-right: var(--space-20); } .px-24 { padding-left: var(--space-24); padding-right: var(--space-24); } .px-30 { padding-left: var(--space-30); padding-right: var(--space-30); } .py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); } .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); } .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } .py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); } .py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } .py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); } .py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); } .gap-0 { gap: var(--space-0); } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .gap-10 { gap: var(--space-10); } .gap-12 { gap: var(--space-12); } .gap-16 { gap: var(--space-16); } .gap-20 { gap: var(--space-20); } .gap-24 { gap: var(--space-24); } .gap-30 { gap: var(--space-30); } .mx-auto { margin-left: auto; margin-right: auto; } .m-auto { margin: auto; } .px-gutter { padding-left: var(--gutter); padding-right: var(--gutter); } .mx-gutter { margin-left: var(--gutter); margin-right: var(--gutter); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .font-regular { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .text-left { text-align: left; } .text-center { text-align: center; } .text-ink { color: var(--ink); } .text-soft { color: var(--soft); } .text-accent { color: var(--accent); } .text-on-accent { color: var(--on-accent); } .bg-base { background-color: var(--bg); } .bg-tint { background-color: var(--tint); } .bg-ink { background-color: var(--ink); } .bg-accent { background-color: var(--accent); } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .hidden { display: none; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .relative { position: relative; } .z-1 { z-index: 1; } .list-none { list-style: none; padding-left: 0; } .max-w-prose { max-width: 26em; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .w-full { width: 100%; } .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-5 { grid-column: span 5 / span 5; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-7 { grid-column: span 7 / span 7; } .col-span-8 { grid-column: span 8 / span 8; } .col-span-9 { grid-column: span 9 / span 9; } .col-span-10 { grid-column: span 10 / span 10; } .col-span-11 { grid-column: span 11 / span 11; } .col-span-12 { grid-column: span 12 / span 12; } .col-start-1 { grid-column-start: 1; } .col-start-2 { grid-column-start: 2; } .col-start-3 { grid-column-start: 3; } .col-start-4 { grid-column-start: 4; } .col-start-5 { grid-column-start: 5; } .col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; } .col-start-9 { grid-column-start: 9; } .col-start-10 { grid-column-start: 10; } .col-start-11 { grid-column-start: 11; } .col-start-12 { grid-column-start: 12; } .pt-section { padding-top: var(--section); } .pb-section { padding-bottom: var(--section); } .py-section { padding-top: var(--section); padding-bottom: var(--section); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (min-width: 768px) { .md\:m-0 { margin: var(--space-0); } .md\:m-1 { margin: var(--space-1); } .md\:m-2 { margin: var(--space-2); } .md\:m-3 { margin: var(--space-3); } .md\:m-4 { margin: var(--space-4); } .md\:m-5 { margin: var(--space-5); } .md\:m-6 { margin: var(--space-6); } .md\:m-8 { margin: var(--space-8); } .md\:m-10 { margin: var(--space-10); } .md\:m-12 { margin: var(--space-12); } .md\:m-16 { margin: var(--space-16); } .md\:m-20 { margin: var(--space-20); } .md\:m-24 { margin: var(--space-24); } .md\:m-30 { margin: var(--space-30); } .md\:mt-0 { margin-top: var(--space-0); } .md\:mt-1 { margin-top: var(--space-1); } .md\:mt-2 { margin-top: var(--space-2); } .md\:mt-3 { margin-top: var(--space-3); } .md\:mt-4 { margin-top: var(--space-4); } .md\:mt-5 { margin-top: var(--space-5); } .md\:mt-6 { margin-top: var(--space-6); } .md\:mt-8 { margin-top: var(--space-8); } .md\:mt-10 { margin-top: var(--space-10); } .md\:mt-12 { margin-top: var(--space-12); } .md\:mt-16 { margin-top: var(--space-16); } .md\:mt-20 { margin-top: var(--space-20); } .md\:mt-24 { margin-top: var(--space-24); } .md\:mt-30 { margin-top: var(--space-30); } .md\:mr-0 { margin-right: var(--space-0); } .md\:mr-1 { margin-right: var(--space-1); } .md\:mr-2 { margin-right: var(--space-2); } .md\:mr-3 { margin-right: var(--space-3); } .md\:mr-4 { margin-right: var(--space-4); } .md\:mr-5 { margin-right: var(--space-5); } .md\:mr-6 { margin-right: var(--space-6); } .md\:mr-8 { margin-right: var(--space-8); } .md\:mr-10 { margin-right: var(--space-10); } .md\:mr-12 { margin-right: var(--space-12); } .md\:mr-16 { margin-right: var(--space-16); } .md\:mr-20 { margin-right: var(--space-20); } .md\:mr-24 { margin-right: var(--space-24); } .md\:mr-30 { margin-right: var(--space-30); } .md\:mb-0 { margin-bottom: var(--space-0); } .md\:mb-1 { margin-bottom: var(--space-1); } .md\:mb-2 { margin-bottom: var(--space-2); } .md\:mb-3 { margin-bottom: var(--space-3); } .md\:mb-4 { margin-bottom: var(--space-4); } .md\:mb-5 { margin-bottom: var(--space-5); } .md\:mb-6 { margin-bottom: var(--space-6); } .md\:mb-8 { margin-bottom: var(--space-8); } .md\:mb-10 { margin-bottom: var(--space-10); } .md\:mb-12 { margin-bottom: var(--space-12); } .md\:mb-16 { margin-bottom: var(--space-16); } .md\:mb-20 { margin-bottom: var(--space-20); } .md\:mb-24 { margin-bottom: var(--space-24); } .md\:mb-30 { margin-bottom: var(--space-30); } .md\:ml-0 { margin-left: var(--space-0); } .md\:ml-1 { margin-left: var(--space-1); } .md\:ml-2 { margin-left: var(--space-2); } .md\:ml-3 { margin-left: var(--space-3); } .md\:ml-4 { margin-left: var(--space-4); } .md\:ml-5 { margin-left: var(--space-5); } .md\:ml-6 { margin-left: var(--space-6); } .md\:ml-8 { margin-left: var(--space-8); } .md\:ml-10 { margin-left: var(--space-10); } .md\:ml-12 { margin-left: var(--space-12); } .md\:ml-16 { margin-left: var(--space-16); } .md\:ml-20 { margin-left: var(--space-20); } .md\:ml-24 { margin-left: var(--space-24); } .md\:ml-30 { margin-left: var(--space-30); } .md\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .md\:mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); } .md\:mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .md\:mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); } .md\:mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .md\:mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); } .md\:mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .md\:mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .md\:mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); } .md\:mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .md\:mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); } .md\:mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); } .md\:mx-24 { margin-left: var(--space-24); margin-right: var(--space-24); } .md\:mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); } .md\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .md\:my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); } .md\:my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .md\:my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); } .md\:my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .md\:my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); } .md\:my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .md\:my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .md\:my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .md\:my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } .md\:my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); } .md\:my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); } .md\:my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); } .md\:my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); } .md\:p-0 { padding: var(--space-0); } .md\:p-1 { padding: var(--space-1); } .md\:p-2 { padding: var(--space-2); } .md\:p-3 { padding: var(--space-3); } .md\:p-4 { padding: var(--space-4); } .md\:p-5 { padding: var(--space-5); } .md\:p-6 { padding: var(--space-6); } .md\:p-8 { padding: var(--space-8); } .md\:p-10 { padding: var(--space-10); } .md\:p-12 { padding: var(--space-12); } .md\:p-16 { padding: var(--space-16); } .md\:p-20 { padding: var(--space-20); } .md\:p-24 { padding: var(--space-24); } .md\:p-30 { padding: var(--space-30); } .md\:pt-0 { padding-top: var(--space-0); } .md\:pt-1 { padding-top: var(--space-1); } .md\:pt-2 { padding-top: var(--space-2); } .md\:pt-3 { padding-top: var(--space-3); } .md\:pt-4 { padding-top: var(--space-4); } .md\:pt-5 { padding-top: var(--space-5); } .md\:pt-6 { padding-top: var(--space-6); } .md\:pt-8 { padding-top: var(--space-8); } .md\:pt-10 { padding-top: var(--space-10); } .md\:pt-12 { padding-top: var(--space-12); } .md\:pt-16 { padding-top: var(--space-16); } .md\:pt-20 { padding-top: var(--space-20); } .md\:pt-24 { padding-top: var(--space-24); } .md\:pt-30 { padding-top: var(--space-30); } .md\:pr-0 { padding-right: var(--space-0); } .md\:pr-1 { padding-right: var(--space-1); } .md\:pr-2 { padding-right: var(--space-2); } .md\:pr-3 { padding-right: var(--space-3); } .md\:pr-4 { padding-right: var(--space-4); } .md\:pr-5 { padding-right: var(--space-5); } .md\:pr-6 { padding-right: var(--space-6); } .md\:pr-8 { padding-right: var(--space-8); } .md\:pr-10 { padding-right: var(--space-10); } .md\:pr-12 { padding-right: var(--space-12); } .md\:pr-16 { padding-right: var(--space-16); } .md\:pr-20 { padding-right: var(--space-20); } .md\:pr-24 { padding-right: var(--space-24); } .md\:pr-30 { padding-right: var(--space-30); } .md\:pb-0 { padding-bottom: var(--space-0); } .md\:pb-1 { padding-bottom: var(--space-1); } .md\:pb-2 { padding-bottom: var(--space-2); } .md\:pb-3 { padding-bottom: var(--space-3); } .md\:pb-4 { padding-bottom: var(--space-4); } .md\:pb-5 { padding-bottom: var(--space-5); } .md\:pb-6 { padding-bottom: var(--space-6); } .md\:pb-8 { padding-bottom: var(--space-8); } .md\:pb-10 { padding-bottom: var(--space-10); } .md\:pb-12 { padding-bottom: var(--space-12); } .md\:pb-16 { padding-bottom: var(--space-16); } .md\:pb-20 { padding-bottom: var(--space-20); } .md\:pb-24 { padding-bottom: var(--space-24); } .md\:pb-30 { padding-bottom: var(--space-30); } .md\:pl-0 { padding-left: var(--space-0); } .md\:pl-1 { padding-left: var(--space-1); } .md\:pl-2 { padding-left: var(--space-2); } .md\:pl-3 { padding-left: var(--space-3); } .md\:pl-4 { padding-left: var(--space-4); } .md\:pl-5 { padding-left: var(--space-5); } .md\:pl-6 { padding-left: var(--space-6); } .md\:pl-8 { padding-left: var(--space-8); } .md\:pl-10 { padding-left: var(--space-10); } .md\:pl-12 { padding-left: var(--space-12); } .md\:pl-16 { padding-left: var(--space-16); } .md\:pl-20 { padding-left: var(--space-20); } .md\:pl-24 { padding-left: var(--space-24); } .md\:pl-30 { padding-left: var(--space-30); } .md\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .md\:px-1 { padding-left: var(--space-1); padding-right: var(--space-1); } .md\:px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .md\:px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .md\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .md\:px-5 { padding-left: var(--space-5); padding-right: var(--space-5); } .md\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .md\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .md\:px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } .md\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); } .md\:px-16 { padding-left: var(--space-16); padding-right: var(--space-16); } .md\:px-20 { padding-left: var(--space-20); padding-right: var(--space-20); } .md\:px-24 { padding-left: var(--space-24); padding-right: var(--space-24); } .md\:px-30 { padding-left: var(--space-30); padding-right: var(--space-30); } .md\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .md\:py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); } .md\:py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .md\:py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .md\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .md\:py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); } .md\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .md\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .md\:py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .md\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } .md\:py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); } .md\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } .md\:py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); } .md\:py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); } .md\:gap-0 { gap: var(--space-0); } .md\:gap-1 { gap: var(--space-1); } .md\:gap-2 { gap: var(--space-2); } .md\:gap-3 { gap: var(--space-3); } .md\:gap-4 { gap: var(--space-4); } .md\:gap-5 { gap: var(--space-5); } .md\:gap-6 { gap: var(--space-6); } .md\:gap-8 { gap: var(--space-8); } .md\:gap-10 { gap: var(--space-10); } .md\:gap-12 { gap: var(--space-12); } .md\:gap-16 { gap: var(--space-16); } .md\:gap-20 { gap: var(--space-20); } .md\:gap-24 { gap: var(--space-24); } .md\:gap-30 { gap: var(--space-30); } .md\:mx-auto { margin-left: auto; margin-right: auto; } .md\:m-auto { margin: auto; } .md\:px-gutter { padding-left: var(--gutter); padding-right: var(--gutter); } .md\:mx-gutter { margin-left: var(--gutter); margin-right: var(--gutter); } .md\:text-sm { font-size: var(--text-sm); } .md\:text-base { font-size: var(--text-base); } .md\:text-lg { font-size: var(--text-lg); } .md\:text-xl { font-size: var(--text-xl); } .md\:text-2xl { font-size: var(--text-2xl); } .md\:font-regular { font-weight: 400; } .md\:font-medium { font-weight: 500; } .md\:font-semibold { font-weight: 600; } .md\:text-left { text-align: left; } .md\:text-center { text-align: center; } .md\:text-ink { color: var(--ink); } .md\:text-soft { color: var(--soft); } .md\:text-accent { color: var(--accent); } .md\:text-on-accent { color: var(--on-accent); } .md\:bg-base { background-color: var(--bg); } .md\:bg-tint { background-color: var(--tint); } .md\:bg-ink { background-color: var(--ink); } .md\:bg-accent { background-color: var(--accent); } .md\:block { display: block; } .md\:inline-block { display: inline-block; } .md\:flex { display: flex; } .md\:inline-flex { display: inline-flex; } .md\:grid { display: grid; } .md\:hidden { display: none; } .md\:flex-col { flex-direction: column; } .md\:flex-row { flex-direction: row; } .md\:flex-wrap { flex-wrap: wrap; } .md\:flex-1 { flex: 1 1 0%; } .md\:relative { position: relative; } .md\:z-1 { z-index: 1; } .md\:list-none { list-style: none; padding-left: 0; } .md\:max-w-prose { max-width: 26em; } .md\:items-start { align-items: flex-start; } .md\:items-center { align-items: center; } .md\:items-end { align-items: flex-end; } .md\:justify-start { justify-content: flex-start; } .md\:justify-center { justify-content: center; } .md\:justify-between { justify-content: space-between; } .md\:justify-end { justify-content: flex-end; } .md\:w-full { width: 100%; } .md\:grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); } .md\:col-span-1 { grid-column: span 1 / span 1; } .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:col-span-3 { grid-column: span 3 / span 3; } .md\:col-span-4 { grid-column: span 4 / span 4; } .md\:col-span-5 { grid-column: span 5 / span 5; } .md\:col-span-6 { grid-column: span 6 / span 6; } .md\:col-span-7 { grid-column: span 7 / span 7; } .md\:col-span-8 { grid-column: span 8 / span 8; } .md\:col-span-9 { grid-column: span 9 / span 9; } .md\:col-span-10 { grid-column: span 10 / span 10; } .md\:col-span-11 { grid-column: span 11 / span 11; } .md\:col-span-12 { grid-column: span 12 / span 12; } .md\:col-start-1 { grid-column-start: 1; } .md\:col-start-2 { grid-column-start: 2; } .md\:col-start-3 { grid-column-start: 3; } .md\:col-start-4 { grid-column-start: 4; } .md\:col-start-5 { grid-column-start: 5; } .md\:col-start-6 { grid-column-start: 6; } .md\:col-start-7 { grid-column-start: 7; } .md\:col-start-8 { grid-column-start: 8; } .md\:col-start-9 { grid-column-start: 9; } .md\:col-start-10 { grid-column-start: 10; } .md\:col-start-11 { grid-column-start: 11; } .md\:col-start-12 { grid-column-start: 12; } .md\:pt-section { padding-top: var(--section); } .md\:pb-section { padding-bottom: var(--section); } .md\:py-section { padding-top: var(--section); padding-bottom: var(--section); } } @media (min-width: 992px) { .lg\:m-0 { margin: var(--space-0); } .lg\:m-1 { margin: var(--space-1); } .lg\:m-2 { margin: var(--space-2); } .lg\:m-3 { margin: var(--space-3); } .lg\:m-4 { margin: var(--space-4); } .lg\:m-5 { margin: var(--space-5); } .lg\:m-6 { margin: var(--space-6); } .lg\:m-8 { margin: var(--space-8); } .lg\:m-10 { margin: var(--space-10); } .lg\:m-12 { margin: var(--space-12); } .lg\:m-16 { margin: var(--space-16); } .lg\:m-20 { margin: var(--space-20); } .lg\:m-24 { margin: var(--space-24); } .lg\:m-30 { margin: var(--space-30); } .lg\:mt-0 { margin-top: var(--space-0); } .lg\:mt-1 { margin-top: var(--space-1); } .lg\:mt-2 { margin-top: var(--space-2); } .lg\:mt-3 { margin-top: var(--space-3); } .lg\:mt-4 { margin-top: var(--space-4); } .lg\:mt-5 { margin-top: var(--space-5); } .lg\:mt-6 { margin-top: var(--space-6); } .lg\:mt-8 { margin-top: var(--space-8); } .lg\:mt-10 { margin-top: var(--space-10); } .lg\:mt-12 { margin-top: var(--space-12); } .lg\:mt-16 { margin-top: var(--space-16); } .lg\:mt-20 { margin-top: var(--space-20); } .lg\:mt-24 { margin-top: var(--space-24); } .lg\:mt-30 { margin-top: var(--space-30); } .lg\:mr-0 { margin-right: var(--space-0); } .lg\:mr-1 { margin-right: var(--space-1); } .lg\:mr-2 { margin-right: var(--space-2); } .lg\:mr-3 { margin-right: var(--space-3); } .lg\:mr-4 { margin-right: var(--space-4); } .lg\:mr-5 { margin-right: var(--space-5); } .lg\:mr-6 { margin-right: var(--space-6); } .lg\:mr-8 { margin-right: var(--space-8); } .lg\:mr-10 { margin-right: var(--space-10); } .lg\:mr-12 { margin-right: var(--space-12); } .lg\:mr-16 { margin-right: var(--space-16); } .lg\:mr-20 { margin-right: var(--space-20); } .lg\:mr-24 { margin-right: var(--space-24); } .lg\:mr-30 { margin-right: var(--space-30); } .lg\:mb-0 { margin-bottom: var(--space-0); } .lg\:mb-1 { margin-bottom: var(--space-1); } .lg\:mb-2 { margin-bottom: var(--space-2); } .lg\:mb-3 { margin-bottom: var(--space-3); } .lg\:mb-4 { margin-bottom: var(--space-4); } .lg\:mb-5 { margin-bottom: var(--space-5); } .lg\:mb-6 { margin-bottom: var(--space-6); } .lg\:mb-8 { margin-bottom: var(--space-8); } .lg\:mb-10 { margin-bottom: var(--space-10); } .lg\:mb-12 { margin-bottom: var(--space-12); } .lg\:mb-16 { margin-bottom: var(--space-16); } .lg\:mb-20 { margin-bottom: var(--space-20); } .lg\:mb-24 { margin-bottom: var(--space-24); } .lg\:mb-30 { margin-bottom: var(--space-30); } .lg\:ml-0 { margin-left: var(--space-0); } .lg\:ml-1 { margin-left: var(--space-1); } .lg\:ml-2 { margin-left: var(--space-2); } .lg\:ml-3 { margin-left: var(--space-3); } .lg\:ml-4 { margin-left: var(--space-4); } .lg\:ml-5 { margin-left: var(--space-5); } .lg\:ml-6 { margin-left: var(--space-6); } .lg\:ml-8 { margin-left: var(--space-8); } .lg\:ml-10 { margin-left: var(--space-10); } .lg\:ml-12 { margin-left: var(--space-12); } .lg\:ml-16 { margin-left: var(--space-16); } .lg\:ml-20 { margin-left: var(--space-20); } .lg\:ml-24 { margin-left: var(--space-24); } .lg\:ml-30 { margin-left: var(--space-30); } .lg\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .lg\:mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); } .lg\:mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .lg\:mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); } .lg\:mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .lg\:mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); } .lg\:mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .lg\:mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .lg\:mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); } .lg\:mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .lg\:mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); } .lg\:mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); } .lg\:mx-24 { margin-left: var(--space-24); margin-right: var(--space-24); } .lg\:mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); } .lg\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .lg\:my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); } .lg\:my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .lg\:my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); } .lg\:my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .lg\:my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); } .lg\:my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .lg\:my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .lg\:my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .lg\:my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } .lg\:my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); } .lg\:my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); } .lg\:my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); } .lg\:my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); } .lg\:p-0 { padding: var(--space-0); } .lg\:p-1 { padding: var(--space-1); } .lg\:p-2 { padding: var(--space-2); } .lg\:p-3 { padding: var(--space-3); } .lg\:p-4 { padding: var(--space-4); } .lg\:p-5 { padding: var(--space-5); } .lg\:p-6 { padding: var(--space-6); } .lg\:p-8 { padding: var(--space-8); } .lg\:p-10 { padding: var(--space-10); } .lg\:p-12 { padding: var(--space-12); } .lg\:p-16 { padding: var(--space-16); } .lg\:p-20 { padding: var(--space-20); } .lg\:p-24 { padding: var(--space-24); } .lg\:p-30 { padding: var(--space-30); } .lg\:pt-0 { padding-top: var(--space-0); } .lg\:pt-1 { padding-top: var(--space-1); } .lg\:pt-2 { padding-top: var(--space-2); } .lg\:pt-3 { padding-top: var(--space-3); } .lg\:pt-4 { padding-top: var(--space-4); } .lg\:pt-5 { padding-top: var(--space-5); } .lg\:pt-6 { padding-top: var(--space-6); } .lg\:pt-8 { padding-top: var(--space-8); } .lg\:pt-10 { padding-top: var(--space-10); } .lg\:pt-12 { padding-top: var(--space-12); } .lg\:pt-16 { padding-top: var(--space-16); } .lg\:pt-20 { padding-top: var(--space-20); } .lg\:pt-24 { padding-top: var(--space-24); } .lg\:pt-30 { padding-top: var(--space-30); } .lg\:pr-0 { padding-right: var(--space-0); } .lg\:pr-1 { padding-right: var(--space-1); } .lg\:pr-2 { padding-right: var(--space-2); } .lg\:pr-3 { padding-right: var(--space-3); } .lg\:pr-4 { padding-right: var(--space-4); } .lg\:pr-5 { padding-right: var(--space-5); } .lg\:pr-6 { padding-right: var(--space-6); } .lg\:pr-8 { padding-right: var(--space-8); } .lg\:pr-10 { padding-right: var(--space-10); } .lg\:pr-12 { padding-right: var(--space-12); } .lg\:pr-16 { padding-right: var(--space-16); } .lg\:pr-20 { padding-right: var(--space-20); } .lg\:pr-24 { padding-right: var(--space-24); } .lg\:pr-30 { padding-right: var(--space-30); } .lg\:pb-0 { padding-bottom: var(--space-0); } .lg\:pb-1 { padding-bottom: var(--space-1); } .lg\:pb-2 { padding-bottom: var(--space-2); } .lg\:pb-3 { padding-bottom: var(--space-3); } .lg\:pb-4 { padding-bottom: var(--space-4); } .lg\:pb-5 { padding-bottom: var(--space-5); } .lg\:pb-6 { padding-bottom: var(--space-6); } .lg\:pb-8 { padding-bottom: var(--space-8); } .lg\:pb-10 { padding-bottom: var(--space-10); } .lg\:pb-12 { padding-bottom: var(--space-12); } .lg\:pb-16 { padding-bottom: var(--space-16); } .lg\:pb-20 { padding-bottom: var(--space-20); } .lg\:pb-24 { padding-bottom: var(--space-24); } .lg\:pb-30 { padding-bottom: var(--space-30); } .lg\:pl-0 { padding-left: var(--space-0); } .lg\:pl-1 { padding-left: var(--space-1); } .lg\:pl-2 { padding-left: var(--space-2); } .lg\:pl-3 { padding-left: var(--space-3); } .lg\:pl-4 { padding-left: var(--space-4); } .lg\:pl-5 { padding-left: var(--space-5); } .lg\:pl-6 { padding-left: var(--space-6); } .lg\:pl-8 { padding-left: var(--space-8); } .lg\:pl-10 { padding-left: var(--space-10); } .lg\:pl-12 { padding-left: var(--space-12); } .lg\:pl-16 { padding-left: var(--space-16); } .lg\:pl-20 { padding-left: var(--space-20); } .lg\:pl-24 { padding-left: var(--space-24); } .lg\:pl-30 { padding-left: var(--space-30); } .lg\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .lg\:px-1 { padding-left: var(--space-1); padding-right: var(--space-1); } .lg\:px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .lg\:px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .lg\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .lg\:px-5 { padding-left: var(--space-5); padding-right: var(--space-5); } .lg\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .lg\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .lg\:px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } .lg\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); } .lg\:px-16 { padding-left: var(--space-16); padding-right: var(--space-16); } .lg\:px-20 { padding-left: var(--space-20); padding-right: var(--space-20); } .lg\:px-24 { padding-left: var(--space-24); padding-right: var(--space-24); } .lg\:px-30 { padding-left: var(--space-30); padding-right: var(--space-30); } .lg\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .lg\:py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); } .lg\:py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .lg\:py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .lg\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .lg\:py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); } .lg\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .lg\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .lg\:py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .lg\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } .lg\:py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); } .lg\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } .lg\:py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); } .lg\:py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); } .lg\:gap-0 { gap: var(--space-0); } .lg\:gap-1 { gap: var(--space-1); } .lg\:gap-2 { gap: var(--space-2); } .lg\:gap-3 { gap: var(--space-3); } .lg\:gap-4 { gap: var(--space-4); } .lg\:gap-5 { gap: var(--space-5); } .lg\:gap-6 { gap: var(--space-6); } .lg\:gap-8 { gap: var(--space-8); } .lg\:gap-10 { gap: var(--space-10); } .lg\:gap-12 { gap: var(--space-12); } .lg\:gap-16 { gap: var(--space-16); } .lg\:gap-20 { gap: var(--space-20); } .lg\:gap-24 { gap: var(--space-24); } .lg\:gap-30 { gap: var(--space-30); } .lg\:mx-auto { margin-left: auto; margin-right: auto; } .lg\:m-auto { margin: auto; } .lg\:px-gutter { padding-left: var(--gutter); padding-right: var(--gutter); } .lg\:mx-gutter { margin-left: var(--gutter); margin-right: var(--gutter); } .lg\:text-sm { font-size: var(--text-sm); } .lg\:text-base { font-size: var(--text-base); } .lg\:text-lg { font-size: var(--text-lg); } .lg\:text-xl { font-size: var(--text-xl); } .lg\:text-2xl { font-size: var(--text-2xl); } .lg\:font-regular { font-weight: 400; } .lg\:font-medium { font-weight: 500; } .lg\:font-semibold { font-weight: 600; } .lg\:text-left { text-align: left; } .lg\:text-center { text-align: center; } .lg\:text-ink { color: var(--ink); } .lg\:text-soft { color: var(--soft); } .lg\:text-accent { color: var(--accent); } .lg\:text-on-accent { color: var(--on-accent); } .lg\:bg-base { background-color: var(--bg); } .lg\:bg-tint { background-color: var(--tint); } .lg\:bg-ink { background-color: var(--ink); } .lg\:bg-accent { background-color: var(--accent); } .lg\:block { display: block; } .lg\:inline-block { display: inline-block; } .lg\:flex { display: flex; } .lg\:inline-flex { display: inline-flex; } .lg\:grid { display: grid; } .lg\:hidden { display: none; } .lg\:flex-col { flex-direction: column; } .lg\:flex-row { flex-direction: row; } .lg\:flex-wrap { flex-wrap: wrap; } .lg\:flex-1 { flex: 1 1 0%; } .lg\:relative { position: relative; } .lg\:z-1 { z-index: 1; } .lg\:list-none { list-style: none; padding-left: 0; } .lg\:max-w-prose { max-width: 26em; } .lg\:items-start { align-items: flex-start; } .lg\:items-center { align-items: center; } .lg\:items-end { align-items: flex-end; } .lg\:justify-start { justify-content: flex-start; } .lg\:justify-center { justify-content: center; } .lg\:justify-between { justify-content: space-between; } .lg\:justify-end { justify-content: flex-end; } .lg\:w-full { width: 100%; } .lg\:grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); } .lg\:col-span-1 { grid-column: span 1 / span 1; } .lg\:col-span-2 { grid-column: span 2 / span 2; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-4 { grid-column: span 4 / span 4; } .lg\:col-span-5 { grid-column: span 5 / span 5; } .lg\:col-span-6 { grid-column: span 6 / span 6; } .lg\:col-span-7 { grid-column: span 7 / span 7; } .lg\:col-span-8 { grid-column: span 8 / span 8; } .lg\:col-span-9 { grid-column: span 9 / span 9; } .lg\:col-span-10 { grid-column: span 10 / span 10; } .lg\:col-span-11 { grid-column: span 11 / span 11; } .lg\:col-span-12 { grid-column: span 12 / span 12; } .lg\:col-start-1 { grid-column-start: 1; } .lg\:col-start-2 { grid-column-start: 2; } .lg\:col-start-3 { grid-column-start: 3; } .lg\:col-start-4 { grid-column-start: 4; } .lg\:col-start-5 { grid-column-start: 5; } .lg\:col-start-6 { grid-column-start: 6; } .lg\:col-start-7 { grid-column-start: 7; } .lg\:col-start-8 { grid-column-start: 8; } .lg\:col-start-9 { grid-column-start: 9; } .lg\:col-start-10 { grid-column-start: 10; } .lg\:col-start-11 { grid-column-start: 11; } .lg\:col-start-12 { grid-column-start: 12; } .lg\:pt-section { padding-top: var(--section); } .lg\:pb-section { padding-bottom: var(--section); } .lg\:py-section { padding-top: var(--section); padding-bottom: var(--section); } } @media (min-width: 1200px) { .xl\:m-0 { margin: var(--space-0); } .xl\:m-1 { margin: var(--space-1); } .xl\:m-2 { margin: var(--space-2); } .xl\:m-3 { margin: var(--space-3); } .xl\:m-4 { margin: var(--space-4); } .xl\:m-5 { margin: var(--space-5); } .xl\:m-6 { margin: var(--space-6); } .xl\:m-8 { margin: var(--space-8); } .xl\:m-10 { margin: var(--space-10); } .xl\:m-12 { margin: var(--space-12); } .xl\:m-16 { margin: var(--space-16); } .xl\:m-20 { margin: var(--space-20); } .xl\:m-24 { margin: var(--space-24); } .xl\:m-30 { margin: var(--space-30); } .xl\:mt-0 { margin-top: var(--space-0); } .xl\:mt-1 { margin-top: var(--space-1); } .xl\:mt-2 { margin-top: var(--space-2); } .xl\:mt-3 { margin-top: var(--space-3); } .xl\:mt-4 { margin-top: var(--space-4); } .xl\:mt-5 { margin-top: var(--space-5); } .xl\:mt-6 { margin-top: var(--space-6); } .xl\:mt-8 { margin-top: var(--space-8); } .xl\:mt-10 { margin-top: var(--space-10); } .xl\:mt-12 { margin-top: var(--space-12); } .xl\:mt-16 { margin-top: var(--space-16); } .xl\:mt-20 { margin-top: var(--space-20); } .xl\:mt-24 { margin-top: var(--space-24); } .xl\:mt-30 { margin-top: var(--space-30); } .xl\:mr-0 { margin-right: var(--space-0); } .xl\:mr-1 { margin-right: var(--space-1); } .xl\:mr-2 { margin-right: var(--space-2); } .xl\:mr-3 { margin-right: var(--space-3); } .xl\:mr-4 { margin-right: var(--space-4); } .xl\:mr-5 { margin-right: var(--space-5); } .xl\:mr-6 { margin-right: var(--space-6); } .xl\:mr-8 { margin-right: var(--space-8); } .xl\:mr-10 { margin-right: var(--space-10); } .xl\:mr-12 { margin-right: var(--space-12); } .xl\:mr-16 { margin-right: var(--space-16); } .xl\:mr-20 { margin-right: var(--space-20); } .xl\:mr-24 { margin-right: var(--space-24); } .xl\:mr-30 { margin-right: var(--space-30); } .xl\:mb-0 { margin-bottom: var(--space-0); } .xl\:mb-1 { margin-bottom: var(--space-1); } .xl\:mb-2 { margin-bottom: var(--space-2); } .xl\:mb-3 { margin-bottom: var(--space-3); } .xl\:mb-4 { margin-bottom: var(--space-4); } .xl\:mb-5 { margin-bottom: var(--space-5); } .xl\:mb-6 { margin-bottom: var(--space-6); } .xl\:mb-8 { margin-bottom: var(--space-8); } .xl\:mb-10 { margin-bottom: var(--space-10); } .xl\:mb-12 { margin-bottom: var(--space-12); } .xl\:mb-16 { margin-bottom: var(--space-16); } .xl\:mb-20 { margin-bottom: var(--space-20); } .xl\:mb-24 { margin-bottom: var(--space-24); } .xl\:mb-30 { margin-bottom: var(--space-30); } .xl\:ml-0 { margin-left: var(--space-0); } .xl\:ml-1 { margin-left: var(--space-1); } .xl\:ml-2 { margin-left: var(--space-2); } .xl\:ml-3 { margin-left: var(--space-3); } .xl\:ml-4 { margin-left: var(--space-4); } .xl\:ml-5 { margin-left: var(--space-5); } .xl\:ml-6 { margin-left: var(--space-6); } .xl\:ml-8 { margin-left: var(--space-8); } .xl\:ml-10 { margin-left: var(--space-10); } .xl\:ml-12 { margin-left: var(--space-12); } .xl\:ml-16 { margin-left: var(--space-16); } .xl\:ml-20 { margin-left: var(--space-20); } .xl\:ml-24 { margin-left: var(--space-24); } .xl\:ml-30 { margin-left: var(--space-30); } .xl\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); } .xl\:mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); } .xl\:mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .xl\:mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); } .xl\:mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } .xl\:mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); } .xl\:mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } .xl\:mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .xl\:mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); } .xl\:mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); } .xl\:mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); } .xl\:mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); } .xl\:mx-24 { margin-left: var(--space-24); margin-right: var(--space-24); } .xl\:mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); } .xl\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); } .xl\:my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); } .xl\:my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .xl\:my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); } .xl\:my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .xl\:my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); } .xl\:my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } .xl\:my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .xl\:my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); } .xl\:my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); } .xl\:my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); } .xl\:my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); } .xl\:my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); } .xl\:my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); } .xl\:p-0 { padding: var(--space-0); } .xl\:p-1 { padding: var(--space-1); } .xl\:p-2 { padding: var(--space-2); } .xl\:p-3 { padding: var(--space-3); } .xl\:p-4 { padding: var(--space-4); } .xl\:p-5 { padding: var(--space-5); } .xl\:p-6 { padding: var(--space-6); } .xl\:p-8 { padding: var(--space-8); } .xl\:p-10 { padding: var(--space-10); } .xl\:p-12 { padding: var(--space-12); } .xl\:p-16 { padding: var(--space-16); } .xl\:p-20 { padding: var(--space-20); } .xl\:p-24 { padding: var(--space-24); } .xl\:p-30 { padding: var(--space-30); } .xl\:pt-0 { padding-top: var(--space-0); } .xl\:pt-1 { padding-top: var(--space-1); } .xl\:pt-2 { padding-top: var(--space-2); } .xl\:pt-3 { padding-top: var(--space-3); } .xl\:pt-4 { padding-top: var(--space-4); } .xl\:pt-5 { padding-top: var(--space-5); } .xl\:pt-6 { padding-top: var(--space-6); } .xl\:pt-8 { padding-top: var(--space-8); } .xl\:pt-10 { padding-top: var(--space-10); } .xl\:pt-12 { padding-top: var(--space-12); } .xl\:pt-16 { padding-top: var(--space-16); } .xl\:pt-20 { padding-top: var(--space-20); } .xl\:pt-24 { padding-top: var(--space-24); } .xl\:pt-30 { padding-top: var(--space-30); } .xl\:pr-0 { padding-right: var(--space-0); } .xl\:pr-1 { padding-right: var(--space-1); } .xl\:pr-2 { padding-right: var(--space-2); } .xl\:pr-3 { padding-right: var(--space-3); } .xl\:pr-4 { padding-right: var(--space-4); } .xl\:pr-5 { padding-right: var(--space-5); } .xl\:pr-6 { padding-right: var(--space-6); } .xl\:pr-8 { padding-right: var(--space-8); } .xl\:pr-10 { padding-right: var(--space-10); } .xl\:pr-12 { padding-right: var(--space-12); } .xl\:pr-16 { padding-right: var(--space-16); } .xl\:pr-20 { padding-right: var(--space-20); } .xl\:pr-24 { padding-right: var(--space-24); } .xl\:pr-30 { padding-right: var(--space-30); } .xl\:pb-0 { padding-bottom: var(--space-0); } .xl\:pb-1 { padding-bottom: var(--space-1); } .xl\:pb-2 { padding-bottom: var(--space-2); } .xl\:pb-3 { padding-bottom: var(--space-3); } .xl\:pb-4 { padding-bottom: var(--space-4); } .xl\:pb-5 { padding-bottom: var(--space-5); } .xl\:pb-6 { padding-bottom: var(--space-6); } .xl\:pb-8 { padding-bottom: var(--space-8); } .xl\:pb-10 { padding-bottom: var(--space-10); } .xl\:pb-12 { padding-bottom: var(--space-12); } .xl\:pb-16 { padding-bottom: var(--space-16); } .xl\:pb-20 { padding-bottom: var(--space-20); } .xl\:pb-24 { padding-bottom: var(--space-24); } .xl\:pb-30 { padding-bottom: var(--space-30); } .xl\:pl-0 { padding-left: var(--space-0); } .xl\:pl-1 { padding-left: var(--space-1); } .xl\:pl-2 { padding-left: var(--space-2); } .xl\:pl-3 { padding-left: var(--space-3); } .xl\:pl-4 { padding-left: var(--space-4); } .xl\:pl-5 { padding-left: var(--space-5); } .xl\:pl-6 { padding-left: var(--space-6); } .xl\:pl-8 { padding-left: var(--space-8); } .xl\:pl-10 { padding-left: var(--space-10); } .xl\:pl-12 { padding-left: var(--space-12); } .xl\:pl-16 { padding-left: var(--space-16); } .xl\:pl-20 { padding-left: var(--space-20); } .xl\:pl-24 { padding-left: var(--space-24); } .xl\:pl-30 { padding-left: var(--space-30); } .xl\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .xl\:px-1 { padding-left: var(--space-1); padding-right: var(--space-1); } .xl\:px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .xl\:px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .xl\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .xl\:px-5 { padding-left: var(--space-5); padding-right: var(--space-5); } .xl\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .xl\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .xl\:px-10 { padding-left: var(--space-10); padding-right: var(--space-10); } .xl\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); } .xl\:px-16 { padding-left: var(--space-16); padding-right: var(--space-16); } .xl\:px-20 { padding-left: var(--space-20); padding-right: var(--space-20); } .xl\:px-24 { padding-left: var(--space-24); padding-right: var(--space-24); } .xl\:px-30 { padding-left: var(--space-30); padding-right: var(--space-30); } .xl\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .xl\:py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); } .xl\:py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .xl\:py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .xl\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .xl\:py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); } .xl\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .xl\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .xl\:py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .xl\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); } .xl\:py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); } .xl\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); } .xl\:py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); } .xl\:py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); } .xl\:gap-0 { gap: var(--space-0); } .xl\:gap-1 { gap: var(--space-1); } .xl\:gap-2 { gap: var(--space-2); } .xl\:gap-3 { gap: var(--space-3); } .xl\:gap-4 { gap: var(--space-4); } .xl\:gap-5 { gap: var(--space-5); } .xl\:gap-6 { gap: var(--space-6); } .xl\:gap-8 { gap: var(--space-8); } .xl\:gap-10 { gap: var(--space-10); } .xl\:gap-12 { gap: var(--space-12); } .xl\:gap-16 { gap: var(--space-16); } .xl\:gap-20 { gap: var(--space-20); } .xl\:gap-24 { gap: var(--space-24); } .xl\:gap-30 { gap: var(--space-30); } .xl\:mx-auto { margin-left: auto; margin-right: auto; } .xl\:m-auto { margin: auto; } .xl\:px-gutter { padding-left: var(--gutter); padding-right: var(--gutter); } .xl\:mx-gutter { margin-left: var(--gutter); margin-right: var(--gutter); } .xl\:text-sm { font-size: var(--text-sm); } .xl\:text-base { font-size: var(--text-base); } .xl\:text-lg { font-size: var(--text-lg); } .xl\:text-xl { font-size: var(--text-xl); } .xl\:text-2xl { font-size: var(--text-2xl); } .xl\:font-regular { font-weight: 400; } .xl\:font-medium { font-weight: 500; } .xl\:font-semibold { font-weight: 600; } .xl\:text-left { text-align: left; } .xl\:text-center { text-align: center; } .xl\:text-ink { color: var(--ink); } .xl\:text-soft { color: var(--soft); } .xl\:text-accent { color: var(--accent); } .xl\:text-on-accent { color: var(--on-accent); } .xl\:bg-base { background-color: var(--bg); } .xl\:bg-tint { background-color: var(--tint); } .xl\:bg-ink { background-color: var(--ink); } .xl\:bg-accent { background-color: var(--accent); } .xl\:block { display: block; } .xl\:inline-block { display: inline-block; } .xl\:flex { display: flex; } .xl\:inline-flex { display: inline-flex; } .xl\:grid { display: grid; } .xl\:hidden { display: none; } .xl\:flex-col { flex-direction: column; } .xl\:flex-row { flex-direction: row; } .xl\:flex-wrap { flex-wrap: wrap; } .xl\:flex-1 { flex: 1 1 0%; } .xl\:relative { position: relative; } .xl\:z-1 { z-index: 1; } .xl\:list-none { list-style: none; padding-left: 0; } .xl\:max-w-prose { max-width: 26em; } .xl\:items-start { align-items: flex-start; } .xl\:items-center { align-items: center; } .xl\:items-end { align-items: flex-end; } .xl\:justify-start { justify-content: flex-start; } .xl\:justify-center { justify-content: center; } .xl\:justify-between { justify-content: space-between; } .xl\:justify-end { justify-content: flex-end; } .xl\:w-full { width: 100%; } .xl\:grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); } .xl\:col-span-1 { grid-column: span 1 / span 1; } .xl\:col-span-2 { grid-column: span 2 / span 2; } .xl\:col-span-3 { grid-column: span 3 / span 3; } .xl\:col-span-4 { grid-column: span 4 / span 4; } .xl\:col-span-5 { grid-column: span 5 / span 5; } .xl\:col-span-6 { grid-column: span 6 / span 6; } .xl\:col-span-7 { grid-column: span 7 / span 7; } .xl\:col-span-8 { grid-column: span 8 / span 8; } .xl\:col-span-9 { grid-column: span 9 / span 9; } .xl\:col-span-10 { grid-column: span 10 / span 10; } .xl\:col-span-11 { grid-column: span 11 / span 11; } .xl\:col-span-12 { grid-column: span 12 / span 12; } .xl\:col-start-1 { grid-column-start: 1; } .xl\:col-start-2 { grid-column-start: 2; } .xl\:col-start-3 { grid-column-start: 3; } .xl\:col-start-4 { grid-column-start: 4; } .xl\:col-start-5 { grid-column-start: 5; } .xl\:col-start-6 { grid-column-start: 6; } .xl\:col-start-7 { grid-column-start: 7; } .xl\:col-start-8 { grid-column-start: 8; } .xl\:col-start-9 { grid-column-start: 9; } .xl\:col-start-10 { grid-column-start: 10; } .xl\:col-start-11 { grid-column-start: 11; } .xl\:col-start-12 { grid-column-start: 12; } .xl\:pt-section { padding-top: var(--section); } .xl\:pb-section { padding-bottom: var(--section); } .xl\:py-section { padding-top: var(--section); padding-bottom: var(--section); } } } /* utilities:end */