@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/inter-latin-var.woff2') format('woff2');
}
:root {
--bg: #ffffff;
--bg-soft: #f8fafc;
--line: #e2e8f0;
--line-2: #cbd5e1;
--ink: #0f172a;
--ink-2: #334155;
--muted: #64748b;
--faint: #94a3b8;
--green: #16a34a;
--green-ink: #15803d;
--green-soft: #f0fdf4;
--find: #fde68a;
--find-now: #fbbf24;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 1px 2px rgba(15, 23, 42, 0.05), 0 16px 36px -18px rgba(15, 23, 42, 0.22);
--shadow-float: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.05), 0 24px 48px -20px rgba(15, 23, 42, 0.28);
--font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
--wrap: 1320px;
--gutter: clamp(20px, 4vw, 56px);
--header: 68px;
--ease-out: cubic-bezier(0.2, 0.75, 0.2, 1);
--ease-io: cubic-bezier(0.65, 0, 0.35, 1);
color-scheme: light;
}
[data-color='orange'] { --c: #f97316; --c-ink: #c2410c; --c-soft: #fff7ed; --c-100: #ffedd5; --c-glow: rgba(249, 115, 22, 0.3); }
[data-color='indigo'] { --c: #6366f1; --c-ink: #4338ca; --c-soft: #eef2ff; --c-100: #e0e7ff; --c-glow: rgba(99, 102, 241, 0.3); }
[data-color='sky'] { --c: #0ea5e9; --c-ink: #0369a1; --c-soft: #f0f9ff; --c-100: #e0f2fe; --c-glow: rgba(14, 165, 233, 0.3); }
[data-color='amber'] { --c: #f59e0b; --c-ink: #b45309; --c-soft: #fffbeb; --c-100: #fef3c7; --c-glow: rgba(245, 158, 11, 0.32); }
[data-color='teal'] { --c: #14b8a6; --c-ink: #0f766e; --c-soft: #f0fdfa; --c-100: #ccfbf1; --c-glow: rgba(20, 184, 166, 0.32); }
[data-color='blue'] { --c: #3b82f6; --c-ink: #1d4ed8; --c-soft: #eff6ff; --c-100: #dbeafe; --c-glow: rgba(59, 130, 246, 0.32); }
[data-color='violet'] { --c: #8b5cf6; --c-ink: #6d28d9; --c-soft: #f5f3ff; --c-100: #ede9fe; --c-glow: rgba(139, 92, 246, 0.32); }
[data-color='green'] { --c: #22c55e; --c-ink: #15803d; --c-soft: #f0fdf4; --c-100: #dcfce7; --c-glow: rgba(34, 197, 94, 0.32); }
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
margin: 0;
overflow-x: clip;
background: var(--bg);
color: var(--ink-2);
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img,
svg {
display: block;
max-width: 100%;
}
svg.i {
flex: none;
}
button,
input {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
figure,
blockquote {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
p,
li,
blockquote {
text-wrap: pretty;
}
a {
color: inherit;
}
[id] {
scroll-margin-top: calc(var(--header) + 16px);
}
[hidden] {
display: none !important;
}
:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
border-radius: 6px;
}
::selection {
background: #bbf7d0;
}
.skip {
position: absolute;
left: 12px;
top: -60px;
z-index: 100;
padding: 10px 14px;
border-radius: 10px;
background: var(--ink);
color: #fff;
text-decoration: none;
}
.skip:focus {
top: 12px;
}
.h1,
.h2,
.h3,
.h4,
.h5 {
color: var(--ink);
font-weight: 700;
text-wrap: balance;
}
.h1 {
font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.25rem);
line-height: 1.02;
letter-spacing: -0.045em;
}
.h2 {
font-size: clamp(2rem, 1.35rem + 2vw, 3rem);
line-height: 1.08;
letter-spacing: -0.035em;
max-width: 20em;
}
.h2-center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.h2-rest {
color: #7f8ca1;
font-weight: 600;
}
.h2-split {
max-width: 24em;
}
.h2-split .h2-rest {
display: block;
}
.h3 {
font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2.125rem);
line-height: 1.12;
letter-spacing: -0.03em;
}
.h4 {
font-size: 1.125rem;
line-height: 1.35;
letter-spacing: -0.015em;
font-weight: 650;
}
.h5 {
font-size: 1rem;
line-height: 1.35;
letter-spacing: -0.01em;
font-weight: 650;
}
.ul {
position: relative;
isolation: isolate;
display: inline-block;
white-space: nowrap;
}
.ul::after {
content: '';
position: absolute;
z-index: -1;
left: 0.02em;
right: 0.02em;
bottom: -0.04em;
height: 0.085em;
min-height: 3px;
border-radius: 1em;
background: var(--c);
transform-origin: left center;
}
.nw {
white-space: nowrap;
}
.lede {
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
line-height: 1.6;
color: var(--muted);
}
.link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--green-ink);
font-weight: 600;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.link svg {
transition: transform 0.2s var(--ease-out);
}
.link:hover svg {
transform: translateX(3px);
}
.tile {
display: inline-grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--c-100, #f1f5f9);
color: var(--c-ink, var(--ink-2));
}
.tile-lg {
width: 46px;
height: 46px;
border-radius: 13px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid transparent;
border-radius: 999px;
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease-out);
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0);
}
.btn-lg {
height: 54px;
padding: 0 28px;
font-size: 16.5px;
}
.btn-md {
height: 46px;
padding: 0 22px;
font-size: 15px;
}
.btn-sm {
height: 40px;
padding: 0 18px;
font-size: 14.5px;
}
.btn-block {
width: 100%;
}
.btn-primary {
background: var(--ink);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px -6px rgba(15, 23, 42, 0.45);
}
.btn-primary:hover {
background: #1e293b;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 22px -8px rgba(15, 23, 42, 0.5);
}
.btn-secondary {
background: #fff;
color: var(--ink);
border-color: var(--line);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
border-color: var(--line-2);
box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.2);
}
.btn-green {
background: var(--green);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px -8px rgba(22, 163, 74, 0.6);
}
.btn-green:hover {
background: #15803d;
}
.btn-sub {
font-weight: 500;
opacity: 0.7;
}
.btn-logo {
flex: none;
width: 20px;
height: 20px;
margin-left: -4px;
}
.stores {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.stores .when-firefox,
html[data-browser='firefox'] .stores .when-chrome,
html[data-browser='firefox'] .stores .store-chrome .btn-sub {
display: none;
}
html[data-browser='firefox'] .stores .when-firefox {
display: inline;
}
.stores .when-firefox .btn-sub {
margin-left: 4px;
}
html[data-browser='firefox'] .stores .store-firefox {
order: -1;
background: var(--ink);
color: #fff;
border-color: transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px -6px rgba(15, 23, 42, 0.45);
}
html[data-browser='firefox'] .stores .store-chrome {
background: #fff;
color: var(--ink);
border-color: var(--line);
box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: no-preference) {
html.js .rise {
animation: rise 0.9s var(--ease-out) both;
animation-delay: var(--d, 0ms);
}
html.js .reveal {
opacity: 0;
translate: 0 22px;
transition: opacity 0.7s ease, translate 0.9s var(--ease-out);
transition-delay: var(--d, 0ms);
}
html.js .reveal.is-in {
opacity: 1;
translate: 0 0;
}
html.js .ul::after {
scale: 0 1;
transition: scale 0.9s var(--ease-io) 0.25s;
}
html.js .is-in .ul::after {
scale: 1 1;
}
html.js .hero .ul::after {
transition: none;
animation: draw 0.9s var(--ease-io) 0.7s both;
}
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(16px);
filter: blur(6px);
}
}
@keyframes draw {
from {
scale: 0 1;
}
to {
scale: 1 1;
}
}
.wrap {
width: 100%;
max-width: calc(var(--wrap) + var(--gutter) * 2);
margin: 0 auto;
padding: 0 var(--gutter);
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
height: var(--header);
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: saturate(1.8) blur(16px);
backdrop-filter: saturate(1.8) blur(16px);
border-bottom: 1px solid transparent;
transition: border-color 0.25s ease, background-color 0.25s ease;
}
.site-header.is-scrolled {
border-bottom-color: var(--line);
background: rgba(255, 255, 255, 0.88);
}
.header-inner {
display: flex;
align-items: center;
gap: 24px;
height: 100%;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ink);
text-decoration: none;
font-weight: 700;
letter-spacing: -0.02em;
font-size: 16.5px;
}
.brand img {
border-radius: 8px;
}
.brand-name {
white-space: nowrap;
}
.brand-light {
color: var(--muted);
font-weight: 600;
}
.nav {
display: flex;
justify-content: center;
gap: 4px;
flex: 1;
}
.nav a {
padding: 8px 12px;
border-radius: 999px;
color: var(--ink-2);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: color 0.15s ease, background-color 0.15s ease;
}
.nav a:hover {
color: var(--ink);
background: #f1f5f9;
}
.nav .nav-green {
color: var(--green-ink);
font-weight: 600;
}
.nav .nav-green:hover {
color: var(--green-ink);
background: var(--green-soft);
}
.header-cta .store-firefox,
html[data-browser='firefox'] .header-cta .store-chrome {
display: none;
}
html[data-browser='firefox'] .header-cta .store-firefox {
display: inline-flex;
}
.nav a {
white-space: nowrap;
}
@media (max-width: 1100px) {
.nav {
gap: 0;
}
.nav a {
padding: 8px 10px;
}
}
@media (max-width: 1040px) {
.nav a[href='/#privacy'],
.nav a[href='/#faq'] {
display: none;
}
}
.menu-btn,
.menu {
display: none;
}
@media (max-width: 900px) {
.nav {
display: none;
}
.header-inner {
gap: 8px;
}
.header-cta {
margin-left: auto;
}
html.js .menu-btn {
display: inline-grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
margin-right: -8px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ink);
cursor: pointer;
}
.menu-btn:hover {
background: #f1f5f9;
}
.menu-btn > span {
display: grid;
}
.menu-btn .menu-close,
.menu-btn[aria-expanded='true'] .menu-open {
display: none;
}
.menu-btn[aria-expanded='true'] .menu-close {
display: grid;
}
html.js .menu:not([hidden]) {
display: block;
position: absolute;
top: 100%;
right: 0;
left: 0;
max-height: calc(100dvh - var(--header));
overflow-y: auto;
border-bottom: 1px solid var(--line);
background: #fff;
box-shadow: 0 18px 30px -24px rgba(15, 23, 42, 0.35);
}
.menu-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 16px;
padding-top: 8px;
padding-bottom: 16px;
}
.menu-list a {
display: block;
padding: 12px 0;
color: var(--ink-2);
font-size: 16.5px;
font-weight: 500;
text-decoration: none;
}
.menu-list .menu-green {
color: var(--green-ink);
font-weight: 600;
}
}
@media (max-width: 400px) {
.site-header .brand-name {
font-size: 15px;
}
.header-cta .btn-sm {
padding: 0 13px;
font-size: 13.5px;
}
}
@media (max-width: 349px) {
.site-header .brand-name {
display: none;
}
}
@media (max-width: 480px) {
.brand-light {
display: none;
}
}
.section {
position: relative;
padding: clamp(80px, 9vw, 136px) 0;
}
.section-soft {
background: var(--bg-soft);
}
.section-green {
background: linear-gradient(180deg, #f0fdf4, #f7fdf9 60%, #ffffff);
}
.section > .wrap > .h2 {
margin-bottom: clamp(40px, 5vw, 64px);
}
.strip {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #fff;
}
@media (max-width: 999px) {
.strip {
display: none;
}
}
.strip-pills {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
padding-top: 18px;
padding-bottom: 18px;
}
.fpill {
display: inline-flex;
align-items: center;
gap: 9px;
height: 40px;
padding: 0 16px 0 6px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--ink-2);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
white-space: nowrap;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease-out);
}
.fpill:hover {
border-color: color-mix(in srgb, var(--c) 40%, var(--line));
box-shadow: 0 6px 14px -10px var(--c-glow);
transform: translateY(-1px);
}
.fpill-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--c-100);
color: var(--c-ink);
}
.site-footer {
border-top: 1px solid var(--line);
background: var(--bg-soft);
padding: 72px 0 44px;
font-size: 14.5px;
}
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) repeat(5, minmax(0, 1fr));
gap: 32px;
}
.site-footer .footer-h2-next {
margin-top: 28px;
}
.site-footer nav h2 a {
color: var(--ink);
text-decoration: none;
}
.site-footer nav h2 a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.footer-brand p {
margin: 14px 0 12px;
max-width: 32ch;
color: var(--muted);
}
.footer-mail {
color: var(--ink-2);
font-weight: 500;
}
.site-footer h2 {
margin-bottom: 14px;
color: var(--ink);
font-size: 14px;
font-weight: 650;
}
.site-footer nav li + li {
margin-top: 9px;
}
.site-footer nav a {
color: var(--muted);
text-decoration: none;
}
.site-footer nav a:hover {
color: var(--ink);
}
.footer-base {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px 24px;
margin-top: 56px;
padding-top: 24px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 13px;
}
@media (max-width: 1100px) and (min-width: 901px) {
.footer-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-brand {
grid-column: 1 / -1;
}
}
.hero {
position: relative;
padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 7vw, 104px);
overflow: clip;
}
.hero-glow {
position: absolute;
z-index: 0;
inset: -120px 0 auto;
height: 1000px;
background:
radial-gradient(32% 42% at 24% 28%, rgba(187, 247, 208, 0.55), transparent 70%),
radial-gradient(30% 40% at 76% 22%, rgba(191, 219, 254, 0.6), transparent 70%),
radial-gradient(34% 40% at 52% 62%, rgba(221, 214, 254, 0.5), transparent 70%),
radial-gradient(24% 30% at 88% 70%, rgba(254, 243, 199, 0.5), transparent 70%);
pointer-events: none;
}
.hero-copy {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.pill {
display: inline-flex;
align-items: center;
gap: 9px;
height: 36px;
padding: 0 14px 0 6px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.8);
color: var(--ink-2);
font-size: 14px;
font-weight: 550;
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pill:hover {
border-color: var(--line-2);
box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.2);
}
.pill-badge {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--green-soft);
color: var(--green-ink);
box-shadow: inset 0 0 0 1px #bbf7d0;
}
.pill-arrow {
color: var(--faint);
transition: transform 0.2s var(--ease-out);
}
.pill:hover .pill-arrow {
transform: translateX(2px);
}
.hero .h1 {
margin-top: 24px;
max-width: 14.5em;
font-size: clamp(2.5rem, 1.4rem + 3.7vw, 4.4rem);
}
.hero .h1 .ul::after {
animation-delay: var(--ud, 0.7s);
}
.hero .lede {
margin-top: 24px;
max-width: 640px;
color: #475569;
text-wrap: balance;
}
.hero .stores {
justify-content: center;
margin-top: 36px;
}
.hero-fine {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 22px;
margin-top: 18px;
color: var(--muted);
font-size: 14px;
}
.hero-fine span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hero-fine svg {
color: var(--green);
}
.proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: min(100%, 660px);
margin-top: 48px;
}
.proof-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 2px 16px;
color: inherit;
text-decoration: none;
}
.proof-item + .proof-item {
border-left: 1px solid var(--line);
}
.proof-big {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-size: 24px;
font-weight: 750;
letter-spacing: -0.03em;
line-height: 1.2;
}
.proof-stars {
display: inline-flex;
gap: 2px;
color: #f59e0b;
}
.proof-featured svg {
color: var(--green);
}
.proof-label {
color: var(--muted);
font-size: 13.5px;
}
.hs {
position: relative;
width: min(100%, 1100px);
margin-top: 48px;
text-align: left;
}
.hs-window {
position: relative;
overflow: hidden;
border-radius: 16px;
background: #fff;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 40px 80px -40px rgba(15, 23, 42, 0.35);
color: #0d0d0d;
}
.hs-bar {
position: relative;
display: flex;
align-items: center;
height: 44px;
padding: 0 14px;
border-bottom: 1px solid #eceef2;
background: #f6f7f9;
}
.hs-dots {
display: flex;
gap: 7px;
}
.hs-dots i {
width: 11px;
height: 11px;
border-radius: 50%;
background: #dfe2e7;
}
.hs-url {
position: absolute;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 340px;
height: 28px;
border: 1px solid #e6e8ec;
border-radius: 8px;
background: #fff;
color: #6b7280;
font-size: 13px;
translate: -50% 0;
}
.hs-ext {
margin-left: auto;
border-radius: 5px;
}
.hs-body {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
height: 540px;
}
.hs-side {
display: flex;
flex-direction: column;
gap: 1px;
overflow: hidden;
padding: 12px 10px;
border-right: 1px solid #ededed;
background: #f9f9f9;
font-size: 13.5px;
}
.hs-item,
.hs-folder,
.hs-chat {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
padding: 6px 10px;
border-radius: 8px;
white-space: nowrap;
}
.hs-item,
.hs-chat {
min-height: 32px;
}
.hs-chat .hs-sk {
background: #e2e3e7;
}
.hs-sk {
display: block;
flex: none;
width: var(--w);
max-width: 100%;
height: 8px;
border-radius: 4px;
background: #e4e5e9;
}
.hs-item svg,
.hs-top svg,
.hs-composer svg {
color: #9a9ca3;
}
.hs-head {
padding: 8px 10px 4px;
color: #8f8f8f;
font-size: 12px;
font-weight: 500;
}
.hs-folders,
.hs-loose {
display: flex;
flex-direction: column;
margin-top: 10px;
padding: 2px 0 6px;
border-radius: 12px;
background: var(--c-soft);
box-shadow: inset 0 0 0 1px var(--c-100);
}
.hs-folder svg {
color: var(--fc);
}
.hs-kids {
display: flex;
flex-direction: column;
padding-left: 18px;
}
.hs-chat.is-active {
background: rgba(13, 13, 13, 0.06);
}
.hs-check {
display: grid;
place-items: center;
flex: none;
width: 15px;
height: 15px;
border: 1.5px solid #c5c9d2;
border-radius: 4px;
background: #fff;
color: #fff;
}
.hs-chat.is-ticked .hs-check {
border-color: var(--c);
background: var(--c);
}
.hs-chat {
max-height: 40px;
transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.hs-chat.is-gone {
max-height: 0;
min-height: 0;
padding-block: 0;
opacity: 0;
}
.hs-chat.is-lifted {
opacity: 0.35;
}
.hs-ghost {
position: absolute;
z-index: 8;
border-radius: 8px;
background: #fff;
box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.06);
transition: translate 0.7s cubic-bezier(0.3, 0.75, 0.15, 1);
}
.hs-chat.is-new {
animation: hs-pop 0.4s var(--ease-out) both;
background: var(--c-100);
}
.hs-folder.is-hit {
animation: hs-hit 0.6s ease;
}
@keyframes hs-hit {
40% {
background: var(--c-100);
}
}
.hs-bulk {
transition: opacity 0.2s ease, translate 0.25s var(--ease-out);
}
.hs-bulk.is-off {
opacity: 0;
translate: 0 8px;
}
.hs-bulk [data-trash] {
display: grid;
place-items: center;
margin: -4px;
padding: 4px;
border-radius: 6px;
}
.hs-bulk [data-trash].is-pointed {
background: rgba(255, 255, 255, 0.25);
}
.hs-bulk {
display: flex;
align-items: center;
gap: 12px;
margin: 6px 6px 0;
padding: 8px 12px;
border-radius: 10px;
background: var(--c);
color: #fff;
font-size: 12.5px;
}
.hs-bulk b {
margin-right: auto;
font-weight: 650;
}
.hs-main {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
}
.hs-top {
display: flex;
align-items: center;
justify-content: space-between;
height: 52px;
padding: 0 18px;
font-size: 15px;
font-weight: 600;
}
.hs-top > span {
display: flex;
align-items: center;
gap: 4px;
}
.hs-share {
height: 30px;
padding: 5px 12px;
border: 1px solid #e3e3e3;
border-radius: 999px;
font-size: 13.5px;
font-weight: 500;
gap: 6px !important;
}
.hs-thread {
flex: 1;
overflow: hidden;
padding: 6px 110px 0 70px;
font-size: 14px;
}
.hs-you {
display: flex;
justify-content: flex-end;
margin-bottom: 18px;
}
.hs-you span {
padding: 15px 18px;
border-radius: 20px;
background: #f3f3f4;
}
.hs-you .hs-sk {
background: #dcdee2;
}
.hs-gpt {
display: flex;
flex-direction: column;
gap: 11px;
margin-bottom: 18px;
}
.hs-chart {
display: flex;
align-items: flex-end;
gap: 10px;
width: 220px;
height: 84px;
margin: -4px 0 14px;
padding: 14px 16px;
border: 1px solid #ececef;
border-radius: 12px;
}
.hs-chart i {
flex: 1;
height: var(--h);
border-radius: 3px 3px 0 0;
background: #e4e5e9;
}
.hs-fast {
display: flex;
align-items: center;
gap: 8px;
width: fit-content;
margin: 0 auto 18px;
padding: 5px 5px 5px 12px;
border-radius: 999px;
background: var(--c-soft);
box-shadow: inset 0 0 0 1px var(--c-100);
color: var(--c-ink);
font-size: 13px;
font-weight: 600;
}
.hs-fast b {
padding: 4px 10px;
border-radius: 999px;
background: #fff;
box-shadow: 0 0 0 1px var(--c-100);
color: var(--ink);
font-size: 12.5px;
font-weight: 600;
}
.hs-acts {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 20px;
color: #b4b6bc;
}
.hs-mark {
display: grid;
place-items: center;
padding: 3px;
border-radius: 6px;
background: var(--c-100);
color: var(--c);
}
.hs-composer {
display: flex;
align-items: center;
justify-content: space-between;
height: 52px;
margin: 0 110px 18px 70px;
padding: 0 9px 0 16px;
border: 1px solid #e3e3e3;
border-radius: 26px;
box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.08);
color: #8e8e8e;
font-size: 14.5px;
}
.hs-composer span {
display: flex;
align-items: center;
gap: 10px;
}
.hs-typed {
color: #0d0d0d;
}
.hs-composer i {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #0d0d0d;
color: #fff;
}
.hs-column {
position: absolute;
top: 50%;
right: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
translate: 0 -50%;
}
.hs-island {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 6px 16px -6px rgba(15, 23, 42, 0.2);
}
.hs-island i {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--c-soft);
color: var(--c-ink);
}
.hs-rail {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 7px;
}
.hs-rail i {
width: 10px;
height: 3px;
border-radius: 2px;
background: #d4d4d8;
}
.hs-rail i.is-you {
width: 16px;
}
.hs-rail i.is-here {
width: 20px;
background: var(--c);
}
.hs-sk {
position: relative;
}
.hs-hit {
position: absolute;
top: -3px;
left: var(--x);
width: 46px;
height: 14px;
border-radius: 3px;
background: var(--find);
opacity: 0;
transition: opacity 0.2s ease, background-color 0.2s ease;
}
.hs.is-hits .hs-hit {
opacity: 1;
}
.hs-hit.is-now {
background: var(--find-now);
}
.hs-pages {
display: grid;
}
.hs-page {
grid-area: 1 / 1;
opacity: 0;
translate: 0 28px;
pointer-events: none;
transition: opacity 0.3s ease, translate 0.4s var(--ease-out);
}
.hs-page.is-on {
opacity: 1;
translate: 0 0;
}
.hs-page.is-up {
translate: 0 -28px;
}
.hs-day {
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.hs-day span {
padding: 3px 10px;
border-radius: 999px;
background: #f3f3f4;
color: #8e8e8e;
font-size: 12px;
}
.hs-gpt.is-flash,
.hs-chart.is-flash {
animation: hs-flash 1.2s ease;
}
@keyframes hs-flash {
25% {
box-shadow: 0 0 0 8px var(--flash, rgba(59, 130, 246, 0.18));
background: var(--flash, rgba(59, 130, 246, 0.18));
}
}
.hs-chart.is-flash {
--flash: rgba(245, 158, 11, 0.2);
}
.hs-gpt {
border-radius: 6px;
}
.hs-old {
max-height: 0;
overflow: hidden;
opacity: 0.6;
transition: max-height 1.4s ease-in-out;
}
.hs-old.is-on {
max-height: 300px;
}
.hs-fast {
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.hs-switch {
display: none;
align-items: center;
gap: 7px;
padding: 4px 10px 4px 5px;
border-radius: 999px;
background: #fff;
box-shadow: 0 0 0 1px var(--c-100);
color: var(--ink);
font-size: 12.5px;
}
.hs-switch i {
position: relative;
width: 26px;
height: 15px;
border-radius: 999px;
background: #cbd5e1;
transition: background-color 0.2s ease;
}
.hs-switch i::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #fff;
transition: translate 0.2s var(--ease-out);
}
.hs-switch.is-on i {
background: #16a34a;
}
.hs-switch.is-on i::after {
translate: 11px 0;
}
.hs-fast.is-slow [data-fast-btn] {
display: none;
}
.hs-fast.is-slow .hs-switch {
display: inline-flex;
}
.hs-caret {
width: 1px;
height: 15px;
margin-left: 1px;
background: currentColor;
animation: blink 0.9s steps(1) infinite;
}
.hs-find,
.hs-export,
.hs-file,
.hs-nav {
position: absolute;
z-index: 5;
border-radius: 14px;
background: #fff;
box-shadow: 0 0 0 1px rgba(17, 18, 22, 0.08), 0 14px 32px -14px rgba(17, 18, 22, 0.3);
font-size: 13px;
opacity: 0;
translate: 0 -8px;
pointer-events: none;
transition: opacity 0.22s ease, translate 0.3s var(--ease-out);
}
.hs-find.is-on,
.hs-export.is-on,
.hs-file.is-on,
.hs-nav.is-on {
opacity: 1;
translate: 0 0;
}
.hs-find {
top: 58px;
right: 92px;
width: 290px;
padding: 10px;
}
.hs-find-head {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 8px 2px;
font-size: 12px;
font-weight: 600;
}
.hs-find-head img {
border-radius: 4px;
}
.hs-find-row {
display: flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 6px 0 10px;
border: 1px solid var(--c);
border-radius: 9px;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
color: #6b6d76;
}
.hs-find-row [data-find-q] {
color: #0d0d0d;
}
.hs-find-row b {
margin-left: auto;
padding: 2px 8px;
border-radius: 999px;
background: #f0f0f2;
color: #55575f;
font-size: 12px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.hs-find-row [data-find-next] {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 6px;
}
.hs-find-row [data-find-next].is-pointed {
background: var(--c-100);
color: var(--c-ink);
}
.hs-export {
top: 120px;
left: 50%;
width: 250px;
padding: 14px;
translate: -50% -8px;
}
.hs-export.is-on {
translate: -50% 0;
}
.hs-export b {
display: block;
margin-bottom: 10px;
font-weight: 650;
}
.hs-formats {
display: flex;
gap: 6px;
margin-bottom: 12px;
}
.hs-formats span {
flex: 1;
padding: 6px 0;
border: 1px solid #e3e3e3;
border-radius: 8px;
text-align: center;
font-size: 12px;
}
.hs-formats span.is-on {
border-color: var(--c);
background: var(--c-soft);
color: var(--c-ink);
font-weight: 600;
}
.hs-save {
display: block;
padding: 8px 0;
border-radius: 999px;
background: var(--green);
color: #fff;
text-align: center;
font-weight: 600;
}
.hs-file {
bottom: 86px;
left: 50%;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 10px;
translate: -50% 8px;
}
.hs-file.is-on {
translate: -50% 0;
}
.hs-file-badge {
padding: 8px 6px;
border-radius: 6px;
background: #ef4444;
color: #fff;
font-size: 10px;
font-weight: 700;
}
.hs-file b {
display: block;
font-weight: 650;
}
.hs-file small {
color: var(--muted);
font-size: 12px;
}
.hs-nav {
top: 60px;
right: 50px;
display: flex;
flex-direction: column;
gap: 8px;
width: 260px;
padding: 12px;
translate: 8px 0;
}
.hs-nav.is-on {
translate: 0 0;
}
.hs-nav-head {
font-weight: 650;
}
.hs-nav-filter {
display: flex;
align-items: center;
gap: 7px;
height: 32px;
padding: 0 10px;
border: 1px solid #e3e3e3;
border-radius: 8px;
color: #8e8e8e;
}
.hs-nav-filter [data-nav-q] {
color: #0d0d0d;
}
.hs-nav-filter [data-nav-q]:empty + .hs-caret {
display: none;
}
.hs-nav-list {
display: flex;
flex-direction: column;
}
.hs-nav-row,
.hs-nav-saved {
display: flex;
align-items: center;
gap: 9px;
padding: 8px;
border-radius: 8px;
transition: background-color 0.15s ease;
}
.hs-nav-row .hs-sk,
.hs-nav-saved .hs-sk {
flex: 1;
width: auto;
max-width: var(--w);
}
.hs-nav-row.is-pointed,
.hs-nav-saved.is-pointed {
background: #f3f3f4;
}
.hs-nav-row.is-hidden {
display: none;
}
.hs-nav.is-filtered .hs-hit {
opacity: 1;
}
.hs-who {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
}
.hs-who-gpt {
background: var(--c);
}
.hs-nav-saved {
display: none;
border-left: 3px solid #f59e0b;
}
.hs-nav-saved small {
color: var(--muted);
font-size: 11.5px;
}
.hs-nav.is-saved .hs-nav-filter,
.hs-nav.is-saved .hs-nav-list {
display: none;
}
.hs-nav.is-saved .hs-nav-saved {
display: flex;
}
.hs-island i.is-on {
box-shadow: 0 0 0 2px var(--c);
}
.hs-rail i {
transition: width 0.2s ease, background-color 0.2s ease;
}
.hs-mark {
transition: background-color 0.2s ease, color 0.2s ease;
}
.hs-mark:not(.is-on) {
background: transparent;
color: #b4b6bc;
}
.hs-mark:not(.is-on) svg {
fill: none;
}
.hs-mark.is-pop {
animation: hs-pop 0.4s var(--ease-out);
}
.hs-toast {
position: absolute;
bottom: 22px;
left: 50%;
z-index: 6;
padding: 9px 16px;
border-radius: 10px;
background: #0d0d0d;
color: #fff;
font-size: 13px;
font-weight: 500;
opacity: 0;
translate: -50% 8px;
pointer-events: none;
transition: opacity 0.2s ease, translate 0.25s var(--ease-out);
}
.hs-toast.is-on {
opacity: 1;
translate: -50% 0;
}
.hs-window {
transition: opacity 0.2s ease;
}
.hs-window.is-fade {
opacity: 0.35;
}
.hs-label {
position: absolute;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 13px 5px 5px;
border-radius: 999px;
background: #fff;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), 0 14px 28px -12px rgba(15, 23, 42, 0.32);
color: var(--ink);
font-size: 13.5px;
font-weight: 650;
white-space: nowrap;
}
.hs-label svg {
box-sizing: content-box;
padding: 5px;
border-radius: 50%;
background: var(--c);
color: #fff;
}
.hs-l-folders,
.hs-l-bulk {
left: -80px;
}
.hs-l-search,
.hs-l-nav {
right: -80px;
}
.hs-l-folders {
top: 133px;
}
.hs-l-bulk {
top: 348px;
}
.hs-l-search {
top: 148px;
}
.hs-l-export {
top: 257px;
right: 60px;
}
.hs-l-nav {
top: 462px;
}
.hs-l-fast {
top: 58px;
left: 655px;
translate: -50% 0;
}
.hs-l-mark {
top: 365px;
left: 432px;
}
.hs-label {
border: 0;
font: inherit;
font-size: 13.5px;
font-weight: 650;
cursor: pointer;
transition: box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.hs-label:hover,
.hs-label.is-on {
background: var(--c-soft);
box-shadow: 0 0 0 2px var(--c), 0 14px 28px -12px rgba(15, 23, 42, 0.32);
}
.hs.is-playing .hs-label:not(.is-on) {
opacity: 0.2;
}
.hs-label:focus-visible {
outline: 2px solid var(--c);
outline-offset: 3px;
}
.hs-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 18px;
color: var(--muted);
font-size: 13.5px;
}
@media (prefers-reduced-motion: no-preference) {
html.js .hs-label {
animation: hs-pop 0.45s var(--ease-out) both;
animation-delay: var(--d);
}
}
@keyframes hs-pop {
from {
opacity: 0;
scale: 0.85;
}
}
.hs-l-folders { --fd: 5s; --fo: 0s; }
.hs-l-bulk { --fd: 5.6s; --fo: 1.8s; }
.hs-l-fast { --fd: 4.6s; --fo: 0.9s; }
.hs-l-search { --fd: 5.3s; --fo: 2.4s; }
.hs-l-export { --fd: 5.9s; --fo: 3.4s; }
.hs-l-nav { --fd: 4.8s; --fo: 2.2s; }
.hs-l-mark { --fd: 5.5s; --fo: 1.4s; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
html.js .hs-label {
animation:
hs-pop 0.45s var(--ease-out) both,
hs-float var(--fd) ease-in-out infinite;
animation-delay: var(--d), calc(var(--fo) * -1);
}
.hs.is-playing .hs-label,
.hs.is-away .hs-label {
animation-play-state: running, paused;
}
}
@keyframes hs-float {
50% {
transform: translateY(-8px);
}
}
.hs-hint-tap {
display: none;
}
@media (hover: none) {
.hs-hint-click {
display: none;
}
.hs-hint-tap {
display: inline;
}
}
.hs.is-scaled {
flex: none;
width: 1100px;
transform-origin: 50% 0;
}
@media (max-width: 999px) {
.hs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.hs-frame {
flex: 1 1 100%;
min-width: 0;
margin-bottom: 14px;
}
.hs-window {
transform-origin: 0 0;
}
.hs-thread {
padding: 6px 64px 0 24px;
}
.hs-composer {
margin: 0 64px 18px 24px;
}
.hs-fast {
white-space: nowrap;
}
.hs-label {
position: static;
translate: none;
}
.hs.is-playing .hs-label:not(.is-on) {
opacity: 1;
}
.hs-hint {
flex: 1 1 100%;
margin-top: 6px;
}
}
@media (max-width: 480px) {
.hero .stores .btn {
flex: 1 1 100%;
}
.pill {
height: auto;
min-height: 36px;
padding: 6px 14px 6px 6px;
border-radius: 20px;
font-size: 13.5px;
line-height: 1.35;
text-align: left;
}
.pill > span:not(.pill-badge) {
text-wrap: balance;
}
.proof {
margin-top: 40px;
}
.proof-item {
padding: 2px 6px;
}
.proof-big {
gap: 5px;
font-size: 20px;
}
.proof-stars svg + svg {
display: none;
}
.proof-featured svg {
width: 17px;
height: 17px;
}
.proof-label {
font-size: 12.5px;
line-height: 1.35;
text-align: center;
}
}
@media (max-width: 400px) {
.proof-big {
font-size: 18px;
}
.proof-featured svg {
width: 15px;
height: 15px;
}
}
@media (max-width: 350px) {
.proof-featured svg {
display: none;
}
}
.msg {
margin: 0 0 1.35em;
color: #0d0d0d;
}
.msg-you {
display: flex;
justify-content: flex-end;
}
.msg-bubble {
max-width: 78%;
padding: 0.55em 1em;
border-radius: 1.3em;
background: #f3f3f4;
line-height: 1.5;
}
.msg-body {
border-radius: 0.4em;
}
.msg-body p {
line-height: 1.62;
}
.msg-code {
margin: 0.75em 0 0;
padding: 0.6em 0.9em 0.75em;
border: 1px solid #ececef;
border-radius: 0.75em;
background: #f8f8f9;
font: 0.8em/1.6 var(--mono);
color: #2c2e35;
white-space: pre;
overflow: hidden;
}
.msg-code-head {
display: block;
margin-bottom: 0.4em;
color: #8e9099;
font-family: var(--font);
font-size: 0.92em;
}
.msg-chart {
width: 16em;
max-width: 100%;
margin-top: 0.75em;
padding: 0.8em 0.9em 0.6em;
border: 1px solid #ececef;
border-radius: 0.75em;
}
.msg-chart svg {
width: 100%;
height: 4.5em;
fill: #9db7ee;
stroke: #d5d5db;
stroke-width: 1;
}
.msg-chart figcaption {
margin-top: 0.4em;
color: #8e9099;
font-size: 0.78em;
}
mark.m {
padding: 0 0.08em;
margin: 0 -0.08em;
border-radius: 0.2em;
background: var(--find);
color: inherit;
transition: background-color 0.2s ease;
}
mark.m.is-now {
background: var(--find-now);
}
.msg.is-flash .msg-bubble,
.msg.is-flash .msg-body {
animation: jump-flash 1.6s ease;
}
@keyframes jump-flash {
0%,
100% {
box-shadow: 0 0 0 0 rgba(34, 102, 240, 0);
}
12%,
45% {
box-shadow: 0 0 0 0.45em rgba(34, 102, 240, 0.14);
background-color: rgba(34, 102, 240, 0.07);
}
}
.sb-find {
z-index: 3;
padding: 0.7em 0.75em 0.75em;
border-radius: 0.95em;
background: #fff;
box-shadow: 0 0 0 1px rgba(17, 18, 22, 0.08), 0 0.6em 1.6em -0.5em rgba(17, 18, 22, 0.2);
}
.sb-find-head {
display: flex;
align-items: center;
gap: 0.5em;
margin: 0 0 0.55em 0.15em;
color: #0d0d0d;
font-size: 0.78em;
font-weight: 600;
}
.sb-find-head img {
width: 1.3em;
height: 1.3em;
border-radius: 0.3em;
}
.sb-find-row {
display: flex;
align-items: center;
gap: 0.35em;
height: 2.5em;
padding: 0 0.3em 0 0.65em;
border: 1px solid #cdced5;
border-radius: 0.65em;
font-size: 0.85em;
color: #6b6d76;
}
.sb-find-row > svg {
width: 1.05em;
height: 1.05em;
}
.sb-find-q {
flex: 1;
color: #0d0d0d;
}
.sb-find-count {
padding: 0.18em 0.6em;
border-radius: 1em;
background: #f0f0f2;
color: #55575f;
font-size: 0.86em;
font-weight: 500;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sb-find-btn {
display: grid;
place-items: center;
width: 1.75em;
height: 1.75em;
border-radius: 0.45em;
color: #55575f;
}
.sb-find-btn svg {
width: 1.05em;
height: 1.05em;
}
.sb-older {
display: inline-flex;
align-items: center;
gap: 0.45em;
height: 2.35em;
padding: 0 1em;
border: 1px solid #e1e1e6;
border-radius: 2em;
background: #fff;
color: #0d0d0d;
font-size: 0.9em;
font-weight: 550;
box-shadow: 0 1px 2px rgba(17, 18, 22, 0.05);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sb-older:hover {
background: #f7f7f8;
border-color: #d2d2d9;
}
.sb-older.is-busy {
color: var(--muted);
pointer-events: none;
}
.sb-older.is-busy svg {
display: none;
}
.sb-older.is-busy::before {
content: '';
width: 0.85em;
height: 0.85em;
border: 2px solid #dcdce2;
border-top-color: #0d0d0d;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.who {
display: block;
flex: none;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
}
.who-you {
background: #cbd5e1;
}
.who-gpt {
background: #8b5cf6;
}
.cursor {
position: absolute;
left: 0;
top: 0;
z-index: 30;
width: 26px;
height: 26px;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
will-change: translate;
}
.cursor.is-on {
opacity: 1;
}
.cursor svg {
width: 26px;
height: 26px;
overflow: visible;
filter: drop-shadow(0 3px 4px rgba(15, 23, 42, 0.28));
transform-origin: 3px 2px;
transition: scale 0.12s ease;
}
.cursor.is-down svg {
scale: 0.82;
}
.cursor-ring {
position: absolute;
left: -12px;
top: -13px;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--c-glow, rgba(59, 130, 246, 0.3));
opacity: 0;
pointer-events: none;
}
.cursor.is-click .cursor-ring {
animation: cursor-ring 0.55s ease-out;
}
@keyframes cursor-ring {
from {
opacity: 1;
scale: 0.2;
}
to {
opacity: 0;
scale: 1.5;
}
}
.tip {
position: absolute;
left: 0;
top: 0;
z-index: 9;
display: inline-flex;
align-items: center;
padding: 0.5em 0.85em;
border-radius: 0.75em;
background: var(--c-ink, #0f172a);
color: #fff;
font-size: 0.82em;
font-weight: 650;
line-height: 1.3;
white-space: nowrap;
box-shadow: 0 0.6em 1.4em -0.5em var(--c-glow, rgba(15, 23, 42, 0.4)), 0 0 0 3px rgba(255, 255, 255, 0.7);
opacity: 0;
scale: 0.9;
pointer-events: none;
transition: opacity 0.2s ease, scale 0.2s ease;
}
.tip.is-on {
opacity: 1;
scale: 1;
transition: opacity 0.3s ease, scale 0.45s var(--ease-out);
}
.tip::after {
content: '';
position: absolute;
width: 0.7em;
height: 0.7em;
border-radius: 0.12em;
background: inherit;
rotate: 45deg;
}
.tip[data-place='left']::after {
right: -0.3em;
top: calc(50% - 0.35em);
}
.tip[data-place='right']::after {
left: -0.3em;
top: calc(50% - 0.35em);
}
.tip[data-place='below']::after {
top: -0.3em;
left: calc(50% - 0.35em);
}
.tip[data-place='above']::after {
bottom: -0.3em;
left: calc(50% - 0.35em);
}
.tip[data-place='left'] {
transform-origin: right center;
}
.tip[data-place='right'] {
transform-origin: left center;
}
.switch {
position: relative;
flex: none;
width: 2.15em;
height: 1.25em;
border-radius: 1em;
background: #cbd5e1;
transition: background-color 0.3s ease;
}
.switch::after {
content: '';
position: absolute;
top: 0.15em;
left: 0.15em;
width: 0.95em;
height: 0.95em;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
transition: translate 0.35s var(--ease-out);
}
.switch.is-on {
background: var(--c, #22c55e);
}
.switch.is-on::after {
translate: 0.9em 0;
}
@keyframes blink {
50% {
opacity: 0;
}
}
@keyframes bm-pop {
40% {
scale: 1.55;
}
}
@keyframes bm-ring {
from {
opacity: 1;
scale: 0.6;
}
to {
opacity: 0;
scale: 1.9;
}
}
.section-show {
background: linear-gradient(180deg, #fff 0, var(--bg-soft) 240px, var(--bg-soft) calc(100% - 240px), #fff 100%);
}
.show {
scroll-margin-top: calc(var(--header) + 24px);
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
gap: clamp(32px, 4vw, 64px);
}
.show-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.show-item {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
padding: 16px 20px 16px 18px;
border: 1px solid transparent;
border-radius: 16px;
transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.show-item:hover {
background: rgba(255, 255, 255, 0.6);
}
.show-item.is-on {
border-color: color-mix(in srgb, var(--c) 24%, var(--line));
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 30px -22px rgba(15, 23, 42, 0.3);
}
.show-item::before {
content: '';
position: absolute;
top: 14px;
bottom: 14px;
left: -1px;
width: 3px;
border-radius: 3px;
background: var(--c);
opacity: 0;
transition: opacity 0.25s ease;
}
.show-item.is-on::before {
opacity: 1;
}
.show-item .tile {
margin-top: 1px;
}
.show-name {
color: var(--ink);
font-size: 17px;
font-weight: 650;
line-height: 1.35;
}
.show-btn {
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.show-btn::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
}
.show-btn:focus-visible {
outline: none;
}
.show-item:has(.show-btn:focus-visible) {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.show-short {
margin-top: 3px;
color: var(--muted);
font-size: 15px;
line-height: 1.5;
text-wrap: pretty;
}
.show-more {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s var(--ease-out);
}
.show-item.is-on .show-more {
grid-template-rows: 1fr;
}
.show-facts {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 0;
overflow: hidden;
color: var(--ink-2);
font-size: 14px;
}
.show-facts li:first-child {
margin-top: 12px;
}
.show-facts li {
display: flex;
align-items: flex-start;
gap: 8px;
}
.show-facts svg {
margin-top: 3px;
color: var(--c);
}
.show-bar {
position: absolute;
left: 20px;
right: 20px;
bottom: -1px;
height: 2px;
overflow: hidden;
border-radius: 2px;
opacity: 0;
transition: opacity 0.25s ease;
}
.show-bar i {
display: block;
height: 100%;
background: var(--c);
transform: scaleX(0);
transform-origin: left;
}
.show-item.is-running .show-bar,
.show-item.is-full .show-bar {
opacity: 1;
}
.show-item.is-running .show-bar i {
transform: scaleX(0.97);
transition: transform var(--ms, 8s) linear;
}
.show-item.is-full .show-bar i {
transform: scaleX(1);
transition: transform 0.3s ease;
}
.show.is-picked .show-bar {
display: none;
}
.show-stage {
position: sticky;
top: 96px;
min-width: 0;
}
.show-pane .demo-panel {
display: flex;
flex-direction: column;
padding-top: 22px;
padding-bottom: 22px;
}
.show-demo {
position: relative;
display: flex;
flex-direction: column;
}
.show-cap {
position: relative;
z-index: 1;
container-type: inline-size;
margin-top: 18px;
}
.show-cap-text {
display: grid;
justify-items: center;
min-height: 1.25em;
font-size: min(30px, 4.5cqi);
font-weight: 750;
line-height: 1.25;
letter-spacing: -0.03em;
color: var(--ink);
text-align: center;
white-space: nowrap;
}
.show-cap-line {
grid-area: 1 / 1;
}
.show-cap-line em {
font-style: normal;
color: var(--c-ink);
}
.show-cap-w {
display: inline-block;
animation: cap-word 0.45s var(--ease-out) both;
animation-delay: calc(var(--i) * 38ms);
}
@keyframes cap-word {
from {
opacity: 0;
transform: translateY(0.4em);
filter: blur(6px);
}
}
.show-cap-line.is-out {
animation: cap-out 0.22s ease-in both;
}
@keyframes cap-out {
to {
opacity: 0;
transform: translateY(-0.35em);
filter: blur(4px);
}
}
.show-pane .demo-panel {
overflow: clip;
}
.show-pane .ld-mood {
inset: -160px -80px;
}
.show-head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 640px;
margin: 0 auto 20px;
}
.show-head-tile {
display: grid;
place-items: center;
flex: none;
width: 42px;
height: 42px;
border-radius: 12px;
background: #fff;
color: var(--c-ink);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), 0 6px 14px -10px var(--c-glow);
}
.show-head-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.show-head-name {
color: var(--ink);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
}
.show-head-line {
overflow: hidden;
color: var(--ink-2);
font-size: 14.5px;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.show-head-count {
margin-left: auto;
white-space: nowrap;
color: var(--c-ink);
font-size: 13.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
opacity: 0.75;
}
.show-head-nav {
display: flex;
gap: 6px;
}
.show-head-btn {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
border-radius: 50%;
background: #fff;
color: var(--ink-2);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out);
}
.show-head-btn:hover {
border-color: color-mix(in srgb, var(--c) 55%, transparent);
color: var(--c-ink);
transform: translateY(-1px);
}
.show-head-btn:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.show-pane:not([hidden]) {
animation: pane-in 0.35s var(--ease-out);
}
@keyframes pane-in {
from {
opacity: 0;
transform: translateY(6px);
}
}
@media (max-width: 960px) {
.show {
grid-template-columns: minmax(0, 1fr);
}
.show-stage {
position: static;
order: -1;
scroll-margin-top: calc(var(--header) + 12px);
}
}
@media (max-width: 560px) {
.show-head {
gap: 10px;
margin-bottom: 16px;
}
.show-head-tile {
width: 38px;
height: 38px;
}
.show-head-name {
font-size: 17px;
}
.show-head-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 13.5px;
white-space: normal;
}
.show-head-count {
display: none;
}
.show-head-nav {
margin-left: auto;
}
.show-cap {
margin-top: 16px;
}
.show-cap-text {
align-items: center;
min-height: 2.5em;
font-size: 21px;
white-space: normal;
text-wrap: balance;
}
}
.show-cta .stores {
justify-content: center;
margin-top: clamp(40px, 5vw, 56px);
}
.privacy-head {
display: flex;
align-items: center;
gap: 28px;
margin-bottom: clamp(40px, 5vw, 64px);
}
.privacy-lock {
display: grid;
place-items: center;
flex: none;
width: 88px;
height: 88px;
border-radius: 24px;
background: var(--green);
color: #fff;
}
.privacy-vs {
margin-top: 14px;
}
.privacy-vs strong {
color: var(--ink);
font-weight: 650;
}
.privacy {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
}
.privacy .tile {
margin-bottom: 20px;
}
.privacy p {
margin-top: 8px;
color: var(--muted);
}
.privacy-more {
margin-top: 44px;
}
@media (max-width: 860px) {
.privacy {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
@media (max-width: 560px) {
.privacy-head {
flex-direction: column;
align-items: flex-start;
gap: 22px;
}
.privacy-lock {
width: 64px;
height: 64px;
border-radius: 18px;
}
.privacy-lock svg {
width: 30px;
height: 30px;
}
}
.reviews {
overflow: clip;
}
.reviews-glow {
position: absolute;
inset: 0;
background:
radial-gradient(30% 50% at 12% 20%, rgba(254, 243, 199, 0.7), transparent 70%),
radial-gradient(30% 50% at 88% 30%, rgba(221, 214, 254, 0.55), transparent 70%);
pointer-events: none;
}
.reviews .wrap {
position: relative;
}
.eyebrow {
margin-bottom: 14px;
color: var(--green-ink);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.rv-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
}
.section .rv-head .h2 {
max-width: 17em;
margin-bottom: 0;
}
.rv-lede {
margin-top: 16px;
color: var(--muted);
font-size: 17px;
}
.rv-arrows {
display: flex;
gap: 10px;
flex: none;
}
.rv-arrow {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 1px solid var(--line);
border-radius: 50%;
background: #fff;
color: var(--ink);
box-shadow: var(--shadow-sm);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease-out);
}
.rv-arrow:hover {
border-color: var(--line-2);
box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.3);
transform: translateY(-1px);
}
.flip {
transform: scaleX(-1);
}
.rv-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 40px;
border: 1px solid var(--line);
border-radius: 20px;
background: rgba(255, 255, 255, 0.85);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.rv-stat {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 20px 26px;
color: inherit;
text-decoration: none;
}
.rv-stat + .rv-stat {
border-left: 1px solid var(--line);
}
a.rv-stat:hover b {
color: var(--green-ink);
}
.rv-stat b {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--ink);
font-size: 17px;
font-weight: 700;
letter-spacing: -0.015em;
}
.rv-stat span {
color: var(--muted);
font-size: 14px;
}
.rv-featured svg {
color: var(--green);
}
.stars-row,
.rv-stat .stars-row {
display: inline-flex;
gap: 2px;
color: #f59e0b;
}
.rv-viewport {
--edge: max(var(--gutter), calc((100% - var(--wrap)) / 2));
position: relative;
margin-top: 28px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--edge);
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.rv-viewport::-webkit-scrollbar {
display: none;
}
.rv-viewport:focus-visible {
outline-offset: -4px;
}
.rv-track {
display: flex;
gap: 20px;
width: max-content;
padding: 12px var(--edge) 28px;
}
.rv-card {
display: flex;
flex-direction: column;
gap: 18px;
width: min(440px, 82vw);
padding: 28px 30px 30px;
border: 1px solid var(--line);
border-radius: 22px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -26px rgba(15, 23, 42, 0.25);
scroll-snap-align: start;
}
.rv-who {
display: flex;
align-items: center;
gap: 12px;
}
.rv-avatar {
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--c-100);
color: var(--c-ink);
font-size: 17px;
font-weight: 700;
}
.rv-name {
display: flex;
flex-direction: column;
gap: 2px;
}
.rv-name b {
color: var(--ink);
font-size: 16px;
}
.rv-meta {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--muted);
font-size: 13px;
}
.rv-quote {
position: relative;
padding-left: 18px;
color: var(--ink-2);
font-size: 17px;
line-height: 1.6;
}
.rv-quote::before {
content: '';
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 3px;
border-radius: 3px;
background: var(--c-100);
}
.rv-hl {
padding: 0.05em 0.2em;
margin: 0 -0.1em;
border-radius: 0.3em;
background: var(--c-100);
color: var(--ink);
font-weight: 600;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
@media (max-width: 900px) {
.rv-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rv-stat:nth-child(3) {
border-left: 0;
}
.rv-stat:nth-child(n + 3) {
border-top: 1px solid var(--line);
}
}
@media (max-width: 600px) {
.rv-arrows {
display: none;
}
}
.plans {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
.plan {
display: flex;
flex-direction: column;
padding: 34px;
border: 1px solid var(--line);
border-radius: 24px;
background: #fff;
}
.plan-pro {
border-color: #86efac;
box-shadow: 0 0 0 1px #86efac, 0 30px 60px -30px rgba(22, 163, 74, 0.35);
background: linear-gradient(170deg, #f0fdf4, #fff 40%);
}
.plans > :nth-child(2) {
--d: 100ms;
}
.plan-name {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
color: var(--ink);
font-size: 18px;
font-weight: 700;
}
.plan-badge {
padding: 4px 10px;
border-radius: 999px;
background: var(--green-soft);
color: var(--green-ink);
font-size: 12.5px;
font-weight: 650;
box-shadow: inset 0 0 0 1px #bbf7d0;
}
.plan-price {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: 18px;
}
.plan-amount {
color: var(--ink);
font-size: 52px;
font-weight: 700;
letter-spacing: -0.045em;
line-height: 1;
}
.plan-per {
display: inline-flex;
gap: 10px;
color: var(--muted);
font-size: 15px;
}
.plan-was {
color: var(--faint);
font-size: 30px;
font-weight: 650;
letter-spacing: -0.03em;
line-height: 1;
text-decoration-line: line-through;
text-decoration-color: var(--faint);
text-decoration-thickness: 2.5px;
}
.plan-lede {
margin-top: 12px;
color: var(--muted);
}
.plan-list {
display: flex;
flex-direction: column;
gap: 11px;
margin: 26px 0 30px;
padding-top: 26px;
border-top: 1px solid var(--line);
font-size: 15.5px;
}
.plan-list li {
display: flex;
gap: 10px;
align-items: flex-start;
}
.plan-list svg {
margin-top: 3px;
color: var(--green);
}
.plan-cta {
margin-top: auto;
}
.plan-cta .stores .btn {
flex: 1 1 auto;
}
.plans-free {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 10px;
margin-top: 32px;
color: var(--muted);
text-align: center;
}
.plans-free-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
background: var(--c-100);
color: var(--c-ink);
font-size: 13px;
font-weight: 700;
}
@media (max-width: 760px) {
.plans {
grid-template-columns: minmax(0, 1fr);
}
.plan {
padding: 28px 22px;
}
}
.guides {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 1040px) {
.guides {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.guides {
grid-template-columns: minmax(0, 1fr);
}
}
.guides > li {
display: flex;
}
.gd {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: 26px 24px 24px;
border: 1px solid var(--line);
border-radius: 22px;
background: linear-gradient(180deg, var(--c-soft), #fff 55%);
color: inherit;
text-decoration: none;
cursor: pointer;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}
.gd:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--c) 35%, var(--line));
box-shadow: 0 22px 40px -24px var(--c-glow);
}
.gd .tile {
margin-bottom: 8px;
}
.gd p {
color: var(--muted);
font-size: 15px;
line-height: 1.55;
}
.gd-more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 10px;
color: var(--c-ink);
font-size: 14.5px;
font-weight: 650;
}
.gd-more svg {
transition: transform 0.2s var(--ease-out);
}
.gd:hover .gd-more svg {
transform: translateX(3px);
}
.guides-all {
display: flex;
justify-content: center;
margin-top: 40px;
}
.guides-all .btn {
gap: 8px;
cursor: pointer;
}
.faq-wrap {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: 56px;
}
.faq-side {
position: sticky;
top: calc(var(--header) + 32px);
align-self: start;
}
.faq-mail {
margin-top: 18px;
color: var(--muted);
max-width: 30ch;
}
.faq-list {
border-top: 1px solid var(--line);
}
.faq {
border-bottom: 1px solid var(--line);
}
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 0;
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq-q {
color: var(--ink);
font-size: 17.5px;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.4;
}
.faq-icon {
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: #f1f5f9;
color: var(--ink-2);
transition: transform 0.3s var(--ease-out), background-color 0.2s ease;
}
.faq[open] .faq-icon {
transform: rotate(45deg);
background: var(--green-soft);
color: var(--green-ink);
}
.faq summary:hover .faq-q {
color: var(--green-ink);
}
.faq-a {
padding: 0 48px 24px 0;
color: var(--muted);
font-size: 16.5px;
}
.faq-a p + p {
margin-top: 10px;
}
@media (max-width: 860px) {
.faq-wrap {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.faq-side {
position: static;
}
}
.final {
overflow: clip;
text-align: center;
}
.final-glow {
position: absolute;
inset: 0;
background:
radial-gradient(30% 55% at 30% 60%, rgba(187, 247, 208, 0.6), transparent 70%),
radial-gradient(28% 50% at 70% 40%, rgba(191, 219, 254, 0.6), transparent 70%),
radial-gradient(24% 40% at 50% 90%, rgba(221, 214, 254, 0.5), transparent 70%);
pointer-events: none;
}
.final-inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.final-logo {
margin-bottom: 30px;
border-radius: 20px;
box-shadow: 0 20px 40px -18px rgba(30, 64, 175, 0.5);
}
.section > .wrap > .final-title {
max-width: 15em;
margin: 0 auto;
font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem);
}
.final-lede {
margin: 18px 0 36px;
color: var(--muted);
font-size: 19px;
max-width: 34em;
}
.final .stores {
justify-content: center;
}
.notfound {
min-height: 55vh;
}
.notfound-code {
color: var(--faint);
font-weight: 600;
margin-bottom: 12px;
}
#privacy,
#pricing,
#guides,
#faq,
.final {
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}
.show-guide {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 12px;
color: var(--c-ink);
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.show-guide:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.show-more-in {
min-height: 0;
overflow: hidden;
}
.show-item:not(.is-on) .show-more-in {
visibility: hidden;
transition: visibility 0s 0.35s;
}
.demo-panel {
position: relative;
padding: clamp(18px, 3.2vw, 44px);
border-radius: 28px;
border: 1px solid color-mix(in srgb, var(--c) 16%, transparent);
background:
radial-gradient(70% 80% at 15% 0%, var(--c-100), transparent 70%),
radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--c-100) 70%, transparent), transparent 70%),
var(--c-soft);
}
.demo-panel::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--c) 28%, transparent) 1px, transparent 1.3px);
background-size: 18px 18px;
-webkit-mask-image: radial-gradient(80% 80% at 50% 50%, transparent 30%, #000 100%);
mask-image: radial-gradient(80% 80% at 50% 50%, transparent 30%, #000 100%);
pointer-events: none;
}
.demo {
position: relative;
}
.app {
position: relative;
max-width: 640px;
margin: 0 auto;
overflow: hidden;
border-radius: 16px;
background: #fff;
font-size: 14px;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.04), 0 34px 64px -34px rgba(15, 23, 42, 0.35);
}
.app-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 46px;
padding: 0 18px;
border-bottom: 1px solid #f1f5f9;
font-size: 13px;
}
.app-title {
color: #0d0d0d;
font-weight: 650;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-meta {
color: var(--muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.app-meta b {
color: var(--c-ink);
font-weight: 700;
}
.app-body {
position: relative;
height: 350px;
}
.app-thread {
position: absolute;
inset: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #d5dae2 transparent;
}
.app-col {
padding: 22px 60px 8px 24px;
font-size: 13.5px;
}
.app-col-search {
padding-top: 118px;
padding-right: 24px;
}
.app-col-nav {
padding-right: 44px;
}
.is-new {
animation: arrive 0.45s var(--ease-out) both;
}
@keyframes arrive {
from {
opacity: 0;
transform: translateY(-8px);
}
}
@keyframes pop {
from {
opacity: 0;
transform: translateY(8px) scale(0.97);
}
}
@keyframes fade {
from {
opacity: 0;
}
}
.sb-older.is-pointed {
background: #f7f7f8;
border-color: #d2d2d9;
}
.older-slot {
display: flex;
justify-content: center;
margin: 2px 0 20px;
}
.older-gap {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 22px;
color: var(--faint);
font-size: 12px;
}
.older-gap::before,
.older-gap::after {
content: '';
flex: 1;
height: 1px;
background: #eef0f3;
}
.mini-island {
position: absolute;
top: 50%;
right: 10px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px;
border-radius: 14px;
background: #fff;
translate: 0 -50%;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 6px 16px -6px rgba(15, 23, 42, 0.2);
}
.mini-island-btn {
position: relative;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 0;
border-radius: 10px;
background: transparent;
color: #cbd5e1;
}
.mini-island-btn.is-live {
color: var(--c-ink);
}
.mini-island-btn.is-live:hover,
.mini-island-btn.is-pointed {
background: var(--c-100);
}
.mini-tip {
position: absolute;
top: 50%;
right: calc(100% + 8px);
padding: 5px 9px;
border-radius: 7px;
background: var(--ink);
color: #fff;
font-size: 12px;
font-weight: 550;
white-space: nowrap;
opacity: 0;
translate: 4px -50%;
transition: opacity 0.2s ease, translate 0.25s var(--ease-out);
pointer-events: none;
}
.mini-island-btn:hover .mini-tip,
.mini-island-btn.is-pointed .mini-tip {
opacity: 1;
translate: 0 -50%;
}
.mini-card {
position: absolute;
left: 50%;
bottom: 16px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 8px;
width: 260px;
padding: 14px 16px 16px;
border-radius: 14px;
background: #fff;
translate: -50% 0;
box-shadow: var(--shadow-float);
animation: pop 0.35s var(--ease-out) both;
}
.mini-card-title {
color: var(--ink);
font-size: 13px;
font-weight: 650;
}
.mini-card-count {
color: var(--muted);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.mini-card-count b {
color: var(--ink);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.mini-card .bar > span {
width: 0;
transition: width 0.16s linear;
}
.mini-done {
position: absolute;
left: 50%;
bottom: 18px;
z-index: 5;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px 10px 10px;
border-radius: 999px;
background: #fff;
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
translate: -50% 0;
box-shadow: var(--shadow-float);
animation: pop 0.35s var(--ease-out) both;
}
.mini-done svg {
box-sizing: content-box;
padding: 4px;
border-radius: 50%;
background: var(--green);
color: #fff;
}
.la-wait {
display: grid;
place-items: center;
height: 44px;
}
.la-wait i {
width: 18px;
height: 18px;
border: 2px solid #d5dae2;
border-top-color: #6b7280;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
.la-sbar {
position: absolute;
top: 8px;
right: 5px;
bottom: 8px;
z-index: 2;
width: 7px;
border-radius: 7px;
background: #eef0f3;
pointer-events: none;
}
.la-sbar i {
position: absolute;
top: 0;
left: 0;
right: 0;
border-radius: 7px;
background: #b6bdc8;
transition: height 0.35s var(--ease-out), background-color 0.2s ease, box-shadow 0.2s ease;
}
.la-sbar.is-hint i {
animation: la-hint 0.7s ease 2;
}
.la-sbar.is-held i {
background: var(--c);
}
@keyframes la-hint {
50% {
background: var(--c);
box-shadow: 0 0 0 4px var(--c-100);
}
}
.demo[data-demo='load-all'] .mini-island {
right: 20px;
}
.sb-find-live {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: min(340px, calc(100% - 24px));
font-size: 15px;
}
.sb-find-input {
flex: 1;
min-width: 0;
height: 100%;
border: 0;
outline: 0;
background: transparent;
color: #0d0d0d;
font-size: 14px;
}
.sb-find-input::placeholder {
color: var(--faint);
}
.sb-find-live .sb-find-row {
height: 40px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sb-find-live .sb-find-row:focus-within,
.sb-find-live .sb-find-row.is-pointed {
border-color: var(--c);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
}
.sb-find-live .sb-find-btn {
width: 30px;
height: 30px;
border: 0;
background: transparent;
}
.sb-find-live .sb-find-btn:hover,
.sb-find-live .sb-find-btn.is-pointed {
background: var(--c-100);
color: var(--c-ink);
}
.sb-find-live .is-miss .sb-find-count {
background: #fef2f2;
color: #b91c1c;
}
.br-find {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
display: flex;
align-items: center;
gap: 12px;
width: min(290px, calc(100% - 24px));
height: 44px;
padding: 0 12px 0 14px;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 0 1px rgba(17, 18, 22, 0.1), 0 8px 22px -10px rgba(17, 18, 22, 0.3);
color: #202124;
font: 13.5px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
opacity: 0;
translate: 0 -8px;
pointer-events: none;
transition: opacity 0.25s ease, translate 0.3s var(--ease-out);
}
.br-find-q {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
white-space: nowrap;
}
.br-caret {
width: 1px;
height: 16px;
margin-left: 1px;
background: #202124;
animation: blink 0.9s steps(1) infinite;
}
.br-find-count {
color: #5f6368;
font-variant-numeric: tabular-nums;
}
.br-find-btns {
display: flex;
align-items: center;
gap: 10px;
color: #5f6368;
}
.br-find-btns i {
width: 1px;
height: 20px;
background: #dadce0;
}
.sb-find-live {
transition: opacity 0.25s ease, translate 0.3s var(--ease-out);
}
.demo[data-phase='browser'] .br-find {
opacity: 1;
translate: 0 0;
}
.demo[data-phase='browser'] .sb-find-live {
opacity: 0;
translate: 0 -8px;
pointer-events: none;
}
mark.m.m-off {
background: transparent;
}
@media (pointer: coarse) {
.sb-find-input {
font-size: 16px;
}
}
.nav-zone {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
padding-right: 8px;
pointer-events: none;
}
.nav-rail {
flex: none;
width: 34px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
padding: 12px 7px;
border: 0;
border-radius: 10px;
background: transparent;
pointer-events: auto;
transition: background-color 0.25s ease;
}
.nav-rail:hover,
.nav-rail.is-pointed,
.nav-zone.is-open .nav-rail {
background: var(--c-soft);
}
.nav-rail i {
display: block;
width: 14px;
height: 2px;
border-radius: 1px;
background: #d5dae2;
transition: background-color 0.3s ease, width 0.3s var(--ease-out);
}
.nav-rail i.is-you {
width: 9px;
}
.nav-rail i.is-here {
width: 19px;
background: var(--c);
}
.nav-panel {
display: flex;
flex-direction: column;
gap: 8px;
width: 262px;
height: calc(100% - 28px);
padding: 12px 10px 8px;
border-radius: 14px;
background: #fff;
box-shadow: var(--shadow-float);
opacity: 0;
visibility: hidden;
translate: 14px 0;
scale: 0.97;
transform-origin: right center;
pointer-events: auto;
transition: opacity 0.25s ease, translate 0.4s var(--ease-out), scale 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.nav-zone.is-open .nav-panel {
opacity: 1;
visibility: visible;
translate: 0 0;
scale: 1;
transition: opacity 0.25s ease, translate 0.4s var(--ease-out), scale 0.4s var(--ease-out), visibility 0s;
}
.nav-panel-head {
display: flex;
align-items: center;
gap: 8px;
padding: 0 4px;
color: var(--ink);
font-size: 13px;
font-weight: 650;
}
.nav-panel-head .tile {
width: 26px;
height: 26px;
border-radius: 8px;
}
.nav-filter {
display: flex;
align-items: center;
gap: 7px;
flex: none;
height: 32px;
margin: 0 2px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: 9px;
color: var(--faint);
cursor: text;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nav-filter:focus-within,
.nav-filter.is-pointed,
.nav-filter.is-typing {
border-color: var(--c);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent);
}
.nav-filter input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--ink);
font-size: 12.5px;
font-weight: 550;
}
.nav-filter input::placeholder {
color: var(--faint);
font-weight: 400;
}
.nav-chips {
display: flex;
gap: 5px;
padding: 0 2px;
}
.nav-chip {
padding: 3px 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--ink-2);
font-size: 11.5px;
font-weight: 600;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.nav-chip:hover,
.nav-chip.is-pointed {
border-color: var(--c);
}
.nav-chip.is-on {
background: var(--c);
border-color: var(--c);
color: #fff;
}
.nav-none {
padding: 14px 8px;
color: var(--faint);
font-size: 12.5px;
text-align: center;
}
.nav-list {
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #d5dae2 transparent;
}
.nav-day {
position: sticky;
top: 0;
z-index: 1;
display: block;
padding: 6px 7px 3px;
background: #fff;
color: var(--faint);
font-size: 11px;
font-weight: 650;
}
.nav-row {
display: grid;
grid-template-columns: 7px minmax(0, 1fr);
align-items: start;
gap: 9px;
width: 100%;
padding: 7px 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--ink-2);
font-size: 12.5px;
line-height: 1.4;
text-align: left;
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-row:hover,
.nav-row.is-pointed {
background: #f4f5f8;
}
.nav-row.is-here {
background: var(--c-100);
color: var(--c-ink);
}
.nav-row .who {
width: 7px;
height: 7px;
margin-top: 5px;
}
.nav-text mark {
padding: 0 1px;
border-radius: 3px;
background: color-mix(in srgb, var(--c) 22%, #fff);
color: var(--c-ink);
font-weight: 650;
}
.nav-count {
margin: -2px 6px 0;
color: var(--c-ink);
font-size: 11.5px;
font-weight: 650;
}
.nav-count[hidden] {
display: none;
}
[data-demo='navigator'] .msg.is-flash .msg-bubble,
[data-demo='navigator'] .msg.is-flash .msg-body,
[data-demo='bookmarks'] .msg.is-flash .msg-bubble,
[data-demo='bookmarks'] .msg.is-flash .msg-body {
animation: nav-land 1.9s ease;
}
@keyframes nav-land {
0%,
100% {
box-shadow: 0 0 0 0 transparent;
}
10%,
70% {
box-shadow: 0 0 0 2px var(--c), 0 0 0 7px color-mix(in srgb, var(--c) 16%, transparent);
background-color: color-mix(in srgb, var(--c) 9%, #fff);
}
}
.nav-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.ex-layer {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
background: rgba(15, 23, 42, 0.16);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
animation: fade 0.25s ease both;
}
.ex-modal {
display: flex;
flex-direction: column;
gap: 14px;
width: min(330px, calc(100% - 32px));
padding: 18px;
border-radius: 18px;
background: #fff;
box-shadow: var(--shadow-float);
animation: pop 0.35s var(--ease-out) both;
}
.ex-title {
display: flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-size: 15px;
font-weight: 700;
}
.ex-title svg {
color: var(--c-ink);
}
.ex-formats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.ex-format {
height: 40px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
color: var(--ink-2);
font-size: 13px;
font-weight: 600;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ex-format:hover,
.ex-format.is-pointed {
border-color: var(--line-2);
}
.ex-format.is-on {
border-color: var(--c);
background: var(--c-soft);
color: var(--c-ink);
box-shadow: 0 0 0 1px var(--c);
}
.ex-go {
height: 44px;
border: 0;
border-radius: 999px;
background: var(--green);
color: #fff;
font-size: 14px;
font-weight: 650;
box-shadow: 0 8px 18px -10px rgba(22, 163, 74, 0.7);
transition: background-color 0.2s ease;
}
.ex-go:hover,
.ex-go.is-pointed {
background: #15803d;
}
@media (max-width: 600px) {
.app-body {
height: 330px;
}
.app-col {
padding: 18px 52px 8px 18px;
font-size: 13px;
}
.nav-panel {
width: 212px;
}
}
.app-body-short {
height: 200px;
}
.ld-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
flex: none;
padding: 5px 6px 5px 12px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--ink-2);
font-size: 12.5px;
font-weight: 650;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ld-toggle img {
margin-left: -6px;
border-radius: 5px;
}
[data-demo='loading'] .switch.is-on {
background: var(--green);
}
[data-demo='loading'] .ld-toggle[aria-pressed='true'] {
border-color: #86efac;
}
.ld-mode {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 11px 4px 9px;
border-radius: 999px;
background: #fee2e2;
color: #b91c1c;
font-size: 12.5px;
font-weight: 700;
transition: background-color 0.4s ease, color 0.4s ease;
}
.ld-mode i {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
[data-phase='unloading'] .ld-mode,
[data-phase='fast'] .ld-mode {
background: #dcfce7;
color: var(--green-ink);
}
.ld-toggle:hover,
.ld-toggle.is-pointed {
border-color: var(--c);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent);
}
.ld-mood {
position: absolute;
inset: calc(-1 * clamp(18px, 3.2vw, 44px));
border-radius: 28px;
pointer-events: none;
}
.ld-mood i {
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0;
transition: opacity 0.8s ease;
}
.ld-mood-lag {
background:
radial-gradient(70% 80% at 12% 0%, rgba(251, 146, 60, 0.38), transparent 70%),
radial-gradient(60% 70% at 100% 100%, rgba(248, 113, 113, 0.32), transparent 70%),
#fff4ec;
}
.ld-mood-fast {
background:
radial-gradient(70% 80% at 12% 0%, rgba(74, 222, 128, 0.36), transparent 70%),
radial-gradient(60% 70% at 100% 100%, rgba(52, 211, 153, 0.3), transparent 70%),
#f0fdf4;
}
[data-mood='lag'] > .ld-mood .ld-mood-lag,
[data-mood='fast'] > .ld-mood .ld-mood-fast {
opacity: 1;
}
[data-demo='loading'] .app {
transition: box-shadow 0.7s ease;
}
[data-demo='loading'] .app::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
transition: background-color 0.7s ease;
}
[data-mood='lag'] .app {
box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.5), 0 0 0 8px rgba(239, 68, 68, 0.1), 0 34px 64px -30px rgba(220, 38, 38, 0.45);
}
[data-mood='lag'] .app::after {
background-color: rgba(249, 115, 22, 0.045);
}
[data-mood='fast'] .app {
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.55), 0 0 0 8px rgba(34, 197, 94, 0.12), 0 34px 70px -28px rgba(22, 163, 74, 0.5);
}
[data-mood='fast'] .app::after {
background-color: rgba(34, 197, 94, 0.03);
}
[data-mood='fast'] .app.is-flash {
animation: ld-flash 1.1s ease-out;
}
@keyframes ld-flash {
from {
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.9), 0 0 0 28px rgba(34, 197, 94, 0), 0 0 60px 18px rgba(34, 197, 94, 0.45);
}
}
.ld-meter {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px 12px;
padding: 11px 16px 13px;
border-bottom: 1px solid #fed7aa;
background: linear-gradient(90deg, #fff1e6, #fef2f2);
color: #b91c1c;
transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}
.ld-bar {
grid-column: 2;
height: 7px;
overflow: hidden;
border-radius: 7px;
background: rgba(220, 38, 38, 0.12);
transition: background-color 0.5s ease;
}
.ld-bar i {
display: block;
height: 100%;
border-radius: inherit;
}
.ld-meter.is-light .ld-bar {
background: rgba(22, 163, 74, 0.14);
}
.ld-meter-icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 11px;
background: #fee2e2;
color: #dc2626;
transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}
.ld-meter-icon svg {
grid-area: 1 / 1;
}
.ld-meter-icon svg:last-child,
.ld-meter.is-light .ld-meter-icon svg:first-child {
display: none;
}
.ld-meter.is-light .ld-meter-icon svg:last-child {
display: block;
}
.ld-meter-text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.ld-meter-text b {
font-size: 13.5px;
font-weight: 750;
letter-spacing: -0.01em;
}
.ld-meter-text span {
color: #9a3412;
font-size: 12.5px;
font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
.ld-meter:not(.is-light) .ld-meter-icon {
animation: ld-warn 1.4s ease-in-out infinite;
}
}
@keyframes ld-warn {
50% {
box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.16);
}
}
.ld-meter.is-light {
border-bottom-color: #bbf7d0;
background: linear-gradient(90deg, #ecfdf3, #f0fdf4);
color: var(--green-ink);
}
.ld-meter.is-light .ld-meter-icon {
background: var(--green);
color: #fff;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), 0 6px 16px -4px rgba(34, 197, 94, 0.6);
}
.ld-meter.is-light .ld-meter-text span {
color: #166534;
}
.ld-stat {
position: absolute;
z-index: 4;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 18px 11px 11px;
border: 1px solid #fecaca;
border-radius: 16px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 36px -18px rgba(220, 38, 38, 0.5);
opacity: 0;
scale: 0.85;
pointer-events: none;
transition: opacity 0.3s ease, scale 0.4s var(--ease-out), border-color 0.5s ease, box-shadow 0.5s ease;
}
.ld-stat.is-on {
opacity: 1;
scale: 1;
}
.ld-stat-mem {
left: -34px;
top: 46%;
}
.ld-stat-ui {
right: -34px;
bottom: 78px;
}
.ld-stat-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: #fee2e2;
color: #dc2626;
transition: background-color 0.5s ease, color 0.5s ease;
}
.ld-stat-text {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.2;
}
.ld-stat-text small {
color: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ld-stat-text b {
color: #dc2626;
font-size: 19px;
font-weight: 800;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: color 0.5s ease;
}
.ld-stat-text em {
display: none;
margin-left: 4px;
color: var(--green);
font-size: 13px;
font-style: normal;
font-weight: 700;
}
[data-phase='fast'] .ld-stat {
border-color: #bbf7d0;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 36px -18px rgba(22, 163, 74, 0.5);
}
[data-phase='fast'] .ld-stat-icon {
background: #dcfce7;
color: var(--green);
}
[data-phase='fast'] .ld-stat-text b {
color: var(--green-ink);
}
[data-phase='fast'] .ld-stat-text em {
display: inline;
}
.ld-stat.is-pop {
animation: ld-pop 0.5s var(--ease-out);
}
.ld-stat.is-hit {
animation: ld-jolt 0.45s ease-out;
}
@keyframes ld-pop {
0% {
opacity: 0;
scale: 0.8;
}
60% {
opacity: 1;
scale: 1.04;
}
}
@keyframes ld-jolt {
25% {
translate: -2px 0;
}
50% {
translate: 2px 0;
}
75% {
translate: -1px 0;
}
}
.ld-wait {
display: none;
flex: none;
width: 15px;
height: 15px;
border: 2px solid #fed7aa;
border-top-color: #ea580c;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
.ld-composer.is-waiting .ld-wait {
display: block;
}
.ld-composer.is-waiting {
border-color: #fdba74;
}
.ld-composer {
position: relative;
display: flex;
align-items: center;
gap: 10px;
height: 50px;
margin: 8px 16px 16px;
padding: 0 8px 0 18px;
border: 1px solid #e3e3e7;
border-radius: 26px;
background: #fff;
box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.1);
cursor: text;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ld-composer:focus-within,
.ld-composer.is-pointed {
border-color: var(--c);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
}
.ld-input {
position: absolute;
inset: 0;
width: 100%;
padding: 0 56px 0 18px;
border: 0;
border-radius: inherit;
outline: 0;
background: transparent;
color: transparent;
caret-color: transparent;
font-size: 14px;
}
.ld-input::selection {
background: transparent;
}
.ld-mirror {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
overflow: hidden;
color: #0d0d0d;
font-size: 14px;
white-space: pre;
pointer-events: none;
}
.ld-caret {
display: none;
flex: none;
width: 1.5px;
height: 18px;
margin: 0 1px;
background: #0d0d0d;
animation: blink 0.9s steps(1) infinite;
}
.ld-composer:focus-within .ld-caret,
.ld-composer.is-typing .ld-caret {
display: block;
}
.ld-ph {
color: var(--faint);
}
.ld-send {
position: relative;
z-index: 1;
padding: 0;
border: 0;
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ink);
color: #fff;
}
@media (pointer: coarse) {
.ld-input,
.ld-mirror {
font-size: 16px;
}
}
.day-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 4px 0 18px;
color: var(--faint);
font-size: 0.82em;
font-weight: 650;
}
.day-divider::before,
.day-divider::after {
content: '';
flex: 1;
height: 1px;
background: #eef0f3;
}
.chat-start {
display: flex;
align-items: center;
gap: 6px;
width: max-content;
margin: 2px auto 20px;
padding: 6px 12px;
border-radius: 999px;
background: var(--c-100);
color: var(--c-ink);
font-size: 12px;
font-weight: 650;
}
.file-out {
position: absolute;
left: 50%;
bottom: 18px;
z-index: 5;
display: flex;
align-items: center;
gap: 14px;
min-width: 280px;
padding: 12px 14px 12px 14px;
border-radius: 18px;
background: #fff;
translate: -50% 0;
box-shadow: var(--shadow-float);
}
.file-out.is-new {
animation: file-in 0.55s var(--ease-out) both;
}
@keyframes file-in {
from {
opacity: 0;
transform: translateY(18px) scale(0.95);
}
}
.file-thumb {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
flex: none;
width: 44px;
height: 56px;
padding: 18px 7px 6px;
border-radius: 4px 11px 4px 4px;
background: #fff;
box-shadow: 0 0 0 1px var(--line), 0 6px 12px -6px rgba(15, 23, 42, 0.3);
}
.file-thumb b {
position: absolute;
top: 6px;
left: -7px;
padding: 1px 5px;
border-radius: 4px;
background: #ef4444;
color: #fff;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.02em;
}
.file-out[data-kind='md'] .file-thumb b {
background: var(--ink);
}
.file-out[data-kind='html'] .file-thumb b {
background: #f97316;
}
.file-out[data-kind='txt'] .file-thumb b {
background: #64748b;
}
.file-out[data-kind='json'] .file-thumb b {
background: #8b5cf6;
}
.file-thumb i {
display: block;
height: 3px;
border-radius: 2px;
background: #e2e8f0;
}
.file-thumb i:first-of-type {
width: 70%;
background: #cbd5e1;
}
.file-meta {
display: flex;
flex-direction: column;
min-width: 0;
color: var(--muted);
font-size: 12.5px;
}
.file-meta b {
overflow: hidden;
color: var(--ink);
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-ok {
display: grid;
place-items: center;
flex: none;
width: 26px;
height: 26px;
margin-left: auto;
border-radius: 50%;
background: var(--green);
color: #fff;
}
.app-thread [data-old] {
transition: opacity 0.35s ease;
}
.app-thread.is-fading [data-old] {
opacity: 0;
}
.app-thread.is-light [data-old]:not(.is-back) {
display: none;
}
.older-slot {
flex-direction: column;
align-items: center;
gap: 8px;
}
.older-note {
color: var(--faint);
font-size: 12px;
font-weight: 600;
}
html.js .demo .app-thread:not(.is-engaged),
html.js .demo .nav-list:not(.is-engaged),
html.js .demo [data-scroll]:not(.is-engaged) {
overflow-y: hidden;
}
.demo .app-thread,
.demo .nav-list {
scrollbar-gutter: stable;
}
.bm-thread {
right: 222px;
}
.bm-thread .app-col {
padding-right: 20px;
}
.bm-acts {
display: flex;
align-items: center;
gap: 10px;
margin: -12px 0 20px;
color: #a1a3ab;
}
.bm-acts > svg {
width: 15px;
height: 15px;
}
.bm-btn {
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-left: -6px;
border: 0;
border-radius: 8px;
background: transparent;
color: #8e9099;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.bm-btn:hover,
.bm-btn.is-pointed {
background: #f3f3f4;
color: #3a3c42;
}
.bm-btn.is-on {
color: #f5b301;
}
.bm-btn.is-on svg {
fill: currentColor;
}
.bm-btn.is-pop svg {
animation: bm-pop 0.5s var(--ease-out);
}
.bm-panel {
position: absolute;
top: 12px;
right: 12px;
bottom: 12px;
display: flex;
flex-direction: column;
width: 200px;
padding: 12px 10px 10px;
border-radius: 14px;
background: #fff;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 10px 24px -14px rgba(15, 23, 42, 0.3);
}
.bm-head {
display: flex;
align-items: center;
gap: 7px;
padding: 0 4px 8px;
border-bottom: 1px solid #f1f1f3;
color: var(--ink);
font-size: 13px;
font-weight: 700;
}
.bm-head svg {
color: #f5b301;
fill: currentColor;
}
.bm-list {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 0;
margin-top: 6px;
overflow: hidden;
}
.bm-row {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
padding: 8px 8px 8px 10px;
border: 0;
border-left: 2px solid #f5b301;
border-radius: 4px 8px 8px 4px;
background: transparent;
text-align: left;
cursor: pointer;
transition: background-color 0.15s ease;
}
.bm-row[hidden] {
display: none;
}
.bm-row:hover,
.bm-row.is-pointed {
background: #fffbeb;
}
.bm-row.is-new {
animation: pop 0.4s var(--ease-out) both;
}
.bm-meta {
display: flex;
gap: 6px;
color: var(--faint);
font-size: 11px;
}
.bm-meta b {
color: #5d5f68;
font-weight: 650;
}
.bm-text {
display: -webkit-box;
overflow: hidden;
color: var(--ink);
font-size: 12.5px;
line-height: 1.4;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.bm-empty {
margin: 10px 4px;
color: var(--muted);
font-size: 12.5px;
}
.bm-foot {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 4px 0;
border-top: 1px solid #f1f1f3;
color: var(--muted);
font-size: 11.5px;
}
.app-fold {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
height: 396px;
}
.fd-side {
position: relative;
display: flex;
flex-direction: column;
min-height: 0;
padding: 12px 8px 10px;
border-right: 1px solid #eef0f3;
background: #f9f9f9;
font-size: 13.5px;
user-select: none;
-webkit-user-select: none;
}
.fd-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px 6px;
color: #8e9099;
font-size: 12.5px;
}
.fd-tools {
display: flex;
gap: 6px;
margin-bottom: 6px;
}
.fd-search {
flex: 1;
display: flex;
align-items: center;
gap: 7px;
height: 32px;
padding: 0 10px;
border-radius: 8px;
background: #efeff1;
color: #8e9099;
font-size: 12.5px;
}
.fd-new {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 0;
border-radius: 8px;
background: transparent;
color: #5d5f68;
cursor: pointer;
}
.fd-new:hover,
.fd-new.is-pointed {
background: #ececee;
}
.fd-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
}
.fd-frow,
.fd-chat {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
height: 30px;
padding: 0 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: #0d0d0d;
font: inherit;
text-align: left;
white-space: nowrap;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.fd-frow {
cursor: pointer;
}
.fd-frow svg {
flex: none;
color: var(--fc);
}
.fd-folder.is-open > .fd-frow svg {
fill: color-mix(in srgb, var(--fc) 22%, transparent);
}
.fd-frow:hover,
.fd-frow.is-pointed,
.fd-chat:hover,
.fd-chat.is-pointed {
background: #ececee;
}
.fd-folder.is-drop > .fd-frow {
background: color-mix(in srgb, var(--fc) 13%, #fff);
box-shadow: inset 0 0 0 1.5px var(--fc);
}
.fd-folder.is-flash > .fd-frow {
animation: fd-flash 0.8s ease;
}
@keyframes fd-flash {
30% {
background: color-mix(in srgb, var(--fc) 18%, #fff);
}
}
.fd-fname,
.fd-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.fd-fname input {
width: 100%;
height: 24px;
padding: 0 6px;
border: 1px solid #3b82f6;
border-radius: 6px;
outline: none;
font: inherit;
}
.fd-folder {
position: relative;
}
.fd-fmore {
position: absolute;
top: 3px;
right: 4px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: #6b6b74;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.fd-folder:has(> .fd-frow:hover) > .fd-fmore,
.fd-folder:has(> .fd-frow.is-pointed) > .fd-fmore,
.fd-fmore:hover,
.fd-fmore.is-pointed,
.fd-fmore[aria-expanded='true'] {
opacity: 1;
}
.fd-fmore:hover,
.fd-fmore.is-pointed,
.fd-fmore[aria-expanded='true'] {
background: #e3e3e6;
}
.fd-fmenu {
position: absolute;
z-index: 6;
display: flex;
flex-direction: column;
width: 168px;
padding: 5px;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 12px 28px -12px rgba(15, 23, 42, 0.35);
animation: fd-menu-in 0.16s ease-out;
}
.fd-fmenu[hidden] {
display: none;
}
.fd-fmenu button {
display: flex;
align-items: center;
gap: 8px;
height: 30px;
padding: 0 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: #0d0d0d;
font: inherit;
text-align: left;
cursor: pointer;
}
.fd-fmenu button:hover,
.fd-fmenu button.is-pointed {
background: #f3f3f4;
}
.fd-fmenu svg {
color: var(--fc);
}
@keyframes fd-menu-in {
from {
opacity: 0;
transform: translateY(-4px);
}
}
.fd-kids {
margin-left: 15px;
padding-left: 6px;
border-left: 1px solid #e6e6ea;
}
.fd-folder:not(.is-open) > .fd-kids {
display: none;
}
.fd-kids:empty::after {
content: 'Drag chats here';
display: block;
padding: 4px 8px 6px;
color: #a1a3ab;
font-size: 12px;
}
.fd-date {
padding: 10px 8px 4px;
color: #8e9099;
font-size: 12px;
}
.fd-chat {
cursor: grab;
}
.fd-chat.is-active {
background: #ececee;
}
.fd-chat.is-lifted {
opacity: 0.35;
}
.fd-chat.is-sel {
background: #e7e7ea;
}
.fd-chat.is-moved {
animation: pop 0.4s var(--ease-out) both;
}
.fd-chat[hidden] {
display: none;
}
.fd-bubble,
.fd-check {
flex: none;
display: grid;
place-items: center;
width: 16px;
height: 16px;
}
.fd-bubble {
color: #b4b6bd;
}
.fd-check {
padding: 0;
border: 1.5px solid #b4b6bd;
border-radius: 4px;
background: #fff;
color: transparent;
cursor: pointer;
display: none;
}
.fd-chat:hover .fd-check,
.fd-chat.is-pointed .fd-check,
.fd-side.is-select .fd-check {
display: grid;
}
.fd-chat:hover .fd-bubble,
.fd-chat.is-pointed .fd-bubble,
.fd-side.is-select .fd-bubble {
display: none;
}
.fd-chat.is-sel .fd-check {
border-color: #0d0d0d;
background: #0d0d0d;
color: #fff;
}
.fd-bulk {
position: absolute;
left: 8px;
right: 8px;
bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 5px 5px 12px;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 10px 24px -10px rgba(15, 23, 42, 0.35);
animation: pop 0.3s var(--ease-out) both;
}
.fd-bulk[hidden] {
display: none;
}
.fd-bulk-n {
font-weight: 600;
}
.fd-bulk-acts {
display: flex;
gap: 2px;
}
.fd-bulk-acts button {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border: 0;
border-radius: 8px;
background: transparent;
color: #3a3c42;
cursor: pointer;
}
.fd-bulk-acts button:hover,
.fd-bulk-acts button.is-pointed {
background: #f1f1f3;
}
.fd-menu {
position: absolute;
left: 0;
bottom: calc(100% + 6px);
display: flex;
flex-direction: column;
min-width: 150px;
padding: 5px;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 12px 28px -12px rgba(15, 23, 42, 0.35);
}
.fd-menu[hidden] {
display: none;
}
.fd-menu button {
display: flex;
align-items: center;
gap: 8px;
height: 30px;
padding: 0 8px;
border: 0;
border-radius: 8px;
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
}
.fd-menu button:hover {
background: #f3f3f4;
}
.fd-menu svg {
color: var(--fc);
}
.fd-main {
display: flex;
flex-direction: column;
min-width: 0;
}
.fd-chatview {
flex: 1;
overflow: hidden;
padding: 18px 22px;
font-size: 12.5px;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px);
mask-image: linear-gradient(to bottom, transparent, #000 30px);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.fd-ghost {
position: absolute;
z-index: 6;
left: 0;
top: 0;
display: flex;
align-items: center;
gap: 7px;
height: 30px;
padding: 0 12px 0 9px;
border-radius: 8px;
background: #fff;
color: #0d0d0d;
font-size: 13.5px;
white-space: nowrap;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1), 0 10px 22px -8px rgba(15, 23, 42, 0.35);
rotate: -2deg;
opacity: 0;
pointer-events: none;
}
.fd-ghost svg {
color: #8e9099;
}
.fd-ghost.is-on {
opacity: 1;
}
.fd-ghost.is-glide {
transition: translate 0.8s cubic-bezier(0.3, 0.75, 0.15, 1);
}
.fd-toast {
position: absolute;
z-index: 7;
top: 12px;
right: 12px;
display: flex;
align-items: center;
gap: 12px;
max-width: 300px;
padding: 10px 12px 10px 14px;
border-radius: 12px;
background: #212121;
color: #fff;
font-size: 13px;
box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
animation: pop 0.3s var(--ease-out) both;
}
.fd-toast[hidden] {
display: none;
}
.fd-toast button {
border: 0;
background: transparent;
color: #93c5fd;
font: inherit;
font-weight: 650;
cursor: pointer;
}
.ex-side {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
gap: 2px;
width: 172px;
padding: 12px 8px;
border-right: 1px solid #eef0f3;
background: #f9f9f9;
font-size: 13px;
}
.ex-side-head {
padding: 0 8px 6px;
color: #8e9099;
font-size: 12px;
}
.ex-chat {
display: flex;
align-items: center;
gap: 8px;
height: 30px;
padding: 0 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: #0d0d0d;
font: inherit;
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.ex-chat:hover,
.ex-chat.is-pointed {
background: #ececee;
}
.ex-chat.is-active {
background: #ececee;
}
.ex-chat-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.ex-check {
flex: none;
display: grid;
place-items: center;
width: 16px;
height: 16px;
border: 1.5px solid #b4b6bd;
border-radius: 4px;
background: #fff;
color: transparent;
}
.ex-chat[aria-pressed='true'] {
background: #e7e7ea;
}
.ex-chat[aria-pressed='true'] .ex-check {
border-color: #0d0d0d;
background: #0d0d0d;
color: #fff;
}
.ex-bulk {
position: absolute;
left: 8px;
right: 8px;
bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 5px 5px 5px 10px;
white-space: nowrap;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 10px 24px -10px rgba(15, 23, 42, 0.35);
font-size: 12.5px;
animation: pop 0.3s var(--ease-out) both;
}
.ex-bulk[hidden] {
display: none;
}
.ex-bulk-go {
display: inline-flex;
align-items: center;
gap: 5px;
height: 28px;
padding: 0 10px;
border: 0;
border-radius: 8px;
background: var(--green);
color: #fff;
font: inherit;
font-weight: 650;
cursor: pointer;
}
.ex-bulk-go:hover,
.ex-bulk-go.is-pointed {
background: #15803d;
}
.ex-thread {
left: 172px;
}
.ex-thread .app-col {
padding-left: 20px;
}
@media (max-width: 600px) {
.bm-thread {
right: 0;
bottom: 128px;
}
.bm-panel {
top: auto;
left: 12px;
width: auto;
height: 116px;
}
.bm-foot {
display: none;
}
.app-fold {
grid-template-columns: minmax(0, 1fr);
}
.fd-main {
display: none;
}
.ex-side {
width: 132px;
}
.ex-thread {
left: 132px;
}
.ld-mode {
gap: 6px;
padding: 3px 8px 3px 7px;
font-size: 11px;
white-space: nowrap;
}
.ld-toggle {
gap: 6px;
padding: 3px 4px 3px 9px;
font-size: 11px;
white-space: nowrap;
}
[data-demo='loading'] .app-head {
gap: 8px;
padding: 0 12px;
}
.ld-toggle img {
display: none;
}
.ld-stat {
gap: 9px;
padding: 8px 12px 8px 8px;
border-radius: 13px;
}
.ld-stat-icon {
width: 32px;
height: 32px;
border-radius: 10px;
}
.ld-stat-icon svg {
width: 17px;
height: 17px;
}
.ld-stat-text small {
font-size: 9.5px;
}
.ld-stat-text b {
font-size: 15px;
}
.ld-stat-mem {
left: -10px;
}
.ld-stat-ui {
right: -10px;
}
}
@media (max-width: 380px) {
.ld-toggle img {
display: block;
}
.ld-toggle > span:not(.switch) {
display: none;
}
}
@media (max-width: 420px) {
.ex-side {
width: 118px;
}
.ex-thread {
left: 118px;
}
}
.file-out[data-kind='zip'] .file-thumb b {
background: #b45309;
}
.fd-dialog {
position: absolute;
z-index: 8;
inset: 0;
display: grid;
place-items: center;
background: rgba(15, 23, 42, 0.18);
animation: fade 0.2s ease both;
}
.fd-dialog[hidden] {
display: none;
}
.fd-dialog-card {
display: flex;
flex-direction: column;
gap: 8px;
width: min(310px, calc(100% - 32px));
padding: 18px 18px 14px;
border-radius: 16px;
background: #fff;
box-shadow: var(--shadow-float);
animation: pop 0.3s var(--ease-out) both;
}
.fd-dialog-card b {
color: var(--ink);
font-size: 15.5px;
}
.fd-dialog-card > span {
color: var(--muted);
font-size: 13.5px;
line-height: 1.45;
}
.fd-dialog-acts {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 6px;
}
.fd-dialog-acts button {
height: 34px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: #f1f1f3;
color: var(--ink);
font: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
}
.fd-dialog-acts .fd-dialog-del {
background: #ef4444;
color: #fff;
}
.fd-dialog-acts .fd-dialog-del:hover,
.fd-dialog-acts .fd-dialog-del.is-pointed {
background: #dc2626;
}
.fd-bulk-acts [data-act='delete']:hover,
.fd-bulk-acts [data-act='delete'].is-pointed {
background: #fee2e2;
color: #dc2626;
}
.fd-side.is-select .fd-scroll {
padding-bottom: 48px;
}
.nav a[aria-current='page'] {
background: var(--green-soft);
}
.cl-hero {
position: relative;
padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 8vw, 120px);
overflow: clip;
}
.cl-glow {
inset: -120px 0 0;
height: auto;
-webkit-mask-image: linear-gradient(#000 70%, transparent);
mask-image: linear-gradient(#000 70%, transparent);
background:
radial-gradient(30% 44% at 20% 30%, rgba(254, 243, 199, 0.8), transparent 70%),
radial-gradient(30% 42% at 78% 30%, rgba(253, 230, 138, 0.45), transparent 70%),
radial-gradient(30% 40% at 56% 76%, rgba(187, 247, 208, 0.45), transparent 70%),
radial-gradient(24% 30% at 92% 80%, rgba(191, 219, 254, 0.45), transparent 70%);
}
.cl-hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: center;
gap: clamp(40px, 6vw, 96px);
}
.cl-hero .h1 {
margin-top: 22px;
max-width: 10.5em;
font-size: clamp(2.6rem, 1.3rem + 3.9vw, 4.75rem);
}
.cl-hero .lede {
margin-top: 20px;
max-width: 34em;
}
.cl-pill {
cursor: default;
}
.cl-pill-badge {
background: #fef3c7;
color: #b45309;
box-shadow: inset 0 0 0 1px #fde68a;
}
.cl-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.cl-fine {
justify-content: flex-start;
}
.cl-fine svg {
color: #d97706;
}
@property --spin {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@keyframes cap-spin {
to {
--spin: 360deg;
}
}
.lic-wrap {
position: relative;
width: min(100%, 430px);
margin: 0 auto;
}
.lic-back {
position: absolute;
inset: 22px -16px -14px 18px;
border-radius: 30px;
background: linear-gradient(140deg, #fef3c7, #fde68a);
rotate: 4deg;
box-shadow: 0 30px 60px -30px rgba(180, 83, 9, 0.45);
}
.lic {
position: relative;
padding: 28px 28px 24px;
border: 2px solid transparent;
border-radius: 30px;
background:
linear-gradient(#fff, #fff) padding-box,
conic-gradient(from var(--spin), #f59e0b, #fef3c7 28%, #b45309 50%, #fef3c7 74%, #f59e0b) border-box;
box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.12), 0 44px 80px -34px rgba(180, 83, 9, 0.5), var(--shadow-float);
rotate: -2deg;
text-align: left;
}
.lic-head {
display: flex;
align-items: center;
gap: 12px;
}
.lic-head img {
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.lic-name {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
line-height: 1.25;
}
.lic-name b {
color: var(--ink);
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
}
.lic-name span {
color: var(--muted);
font-size: 14px;
}
.lic-badge {
padding: 5px 11px;
border-radius: 999px;
background: linear-gradient(180deg, #fbbf24, #f59e0b);
color: #451a03;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 14px -6px rgba(217, 119, 6, 0.7);
}
.lic-price {
display: flex;
align-items: center;
gap: 16px;
margin-top: 22px;
}
.lic-now {
color: var(--ink);
font-size: 84px;
font-weight: 800;
letter-spacing: -0.06em;
line-height: 0.9;
}
.lic-was {
display: flex;
flex-direction: column;
gap: 2px;
color: var(--muted);
font-size: 15px;
line-height: 1.3;
}
.lic-was s {
color: var(--faint);
font-size: 22px;
font-weight: 650;
text-decoration-color: #ef4444;
text-decoration-thickness: 2px;
}
.lic-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--line);
color: var(--ink-2);
font-size: 14.5px;
font-weight: 550;
line-height: 1.35;
}
.lic-list li {
display: flex;
gap: 8px;
}
.lic-list svg {
margin-top: 1px;
color: #d97706;
}
.lic-key {
position: relative;
display: flex;
align-items: center;
gap: 10px;
margin-top: 22px;
padding: 12px 14px;
border: 1.5px dashed #fcd34d;
border-radius: 14px;
background: #fffbeb;
color: #b45309;
overflow: hidden;
}
.lic-key-dots {
flex: 1;
color: #92400e;
font-family: var(--mono);
font-size: 15px;
letter-spacing: 0.06em;
}
.lic-key-tag {
padding: 3px 9px;
border-radius: 999px;
background: var(--green-soft);
color: var(--green-ink);
font-size: 12.5px;
font-weight: 650;
white-space: nowrap;
box-shadow: inset 0 0 0 1px #bbf7d0;
}
.lic-key::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
translate: -100% 0;
pointer-events: none;
}
.lic-spark {
position: absolute;
color: #f59e0b;
translate: -50% -50%;
line-height: 0;
pointer-events: none;
}
.lic-spark svg {
width: 1em;
height: 1em;
stroke-width: 0;
}
@media (prefers-reduced-motion: no-preference) {
html.js .cl-hero .ul::after {
transition: none;
animation: draw 0.9s var(--ease-io) 0.6s both;
}
.lic {
animation: cap-spin 4.5s linear infinite;
}
.lic-wrap {
animation: lic-float 7s ease-in-out infinite;
}
.lic-key::after {
animation: lic-sheen 4.5s ease-in-out 1.2s infinite;
}
.lic-spark {
animation: lic-twinkle 3.2s ease-in-out infinite;
}
}
@keyframes lic-float {
50% {
translate: 0 -10px;
}
}
@keyframes lic-sheen {
0% {
translate: -100% 0;
}
40%,
100% {
translate: 100% 0;
}
}
@keyframes lic-twinkle {
0%,
100% {
opacity: 0.15;
scale: 0.45;
rotate: 0deg;
}
50% {
opacity: 1;
scale: 1;
rotate: 45deg;
}
}
@media (max-width: 979px) {
.cl-hero-inner {
grid-template-columns: minmax(0, 1fr);
text-align: center;
}
.cl-hero-copy {
display: flex;
flex-direction: column;
align-items: center;
}
.cl-hero .h1 {
margin-left: auto;
margin-right: auto;
}
.cl-ctas,
.cl-fine {
justify-content: center;
}
.cl-hero-art {
width: 100%;
padding: 0 12px;
}
}
@media (max-width: 480px) {
.cl-ctas .btn {
flex: 1 1 100%;
}
.lic {
padding: 22px 20px 20px;
}
.lic-now {
font-size: 68px;
}
.lic-key-tag {
display: none;
}
.lic-list {
grid-template-columns: minmax(0, 1fr);
}
}
.cl-steps {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 28px);
}
.cl-step {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 26px;
background: #fff;
box-shadow: var(--shadow-md);
overflow: hidden;
transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.cl-step.is-now {
border-color: #fcd34d;
box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.12), 0 24px 48px -24px rgba(180, 83, 9, 0.35);
}
.cl-art {
display: grid;
place-items: center;
height: 268px;
padding: 24px;
background:
radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.07) 1px, transparent 0) 0 0 / 18px 18px,
radial-gradient(70% 70% at 50% 40%, #fffbeb, var(--bg-soft) 70%);
border-bottom: 1px solid var(--line);
}
.cl-step-copy {
padding: 22px 26px 28px;
}
.cl-num {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fef3c7;
color: #b45309;
font-size: 14px;
font-weight: 750;
box-shadow: inset 0 0 0 1px #fde68a;
}
.cl-step-copy .h4 {
margin-top: 14px;
font-size: 1.25rem;
}
.cl-step-copy p {
margin-top: 8px;
color: var(--muted);
font-size: 15.5px;
line-height: 1.55;
}
.cl-step-copy p b {
color: var(--ink-2);
font-weight: 650;
}
.cl-card {
width: 100%;
max-width: 300px;
padding: 16px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
color: var(--ink-2);
font-size: 13px;
line-height: 1.45;
box-shadow: var(--shadow-float);
}
.cl-post-head,
.cl-mail-head {
display: flex;
align-items: center;
gap: 10px;
}
.cl-av {
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(140deg, #60a5fa, #8b5cf6);
color: #fff;
font-size: 14px;
font-weight: 700;
}
.cl-who {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
line-height: 1.25;
}
.cl-who b {
color: var(--ink);
font-weight: 650;
}
.cl-who span {
color: var(--faint);
font-size: 12px;
}
.cl-post-text {
margin: 10px 0 14px;
color: var(--ink);
}
.cl-url {
color: #2563eb;
}
.cl-post-foot {
display: flex;
align-items: center;
gap: 8px;
min-height: 30px;
}
.cl-post-icons {
display: flex;
gap: 12px;
flex: 1;
color: var(--faint);
}
.cl-btn,
.cl-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 30px;
padding: 0 13px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 650;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease, scale 0.2s var(--ease-out), box-shadow 0.2s ease;
}
.cl-btn.is-pointed {
scale: 1.04;
}
.cl-btn-dark {
background: var(--ink);
color: #fff;
}
.cl-btn-soft {
background: #f1f5f9;
color: var(--ink);
}
.cl-btn-gold {
background: linear-gradient(180deg, #fbbf24, #f59e0b);
color: #451a03;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 14px -6px rgba(217, 119, 6, 0.7);
}
.cl-btn-green {
background: var(--green);
color: #fff;
box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.7);
}
.cl-chip {
padding: 0 4px;
color: var(--green-ink);
}
.cl-post [data-cl-posted],
.cl-post [data-cl-copylink],
.cl-post:not([data-state='draft']) [data-cl-postbtn] {
display: none;
}
.cl-post:not([data-state='draft']) [data-cl-posted],
.cl-post:not([data-state='draft']) [data-cl-copylink] {
display: inline-flex;
}
.cl-post[data-state='copied'] [data-cl-copylink] {
background: var(--green-soft);
color: var(--green-ink);
}
.cl-ext {
display: flex;
flex-direction: column;
gap: 10px;
background: linear-gradient(180deg, #fffbeb, #fff 60%);
border-color: #fde68a;
}
.cl-ext-head {
display: flex;
align-items: center;
gap: 7px;
color: #b45309;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cl-ext-head img {
border-radius: 5px;
}
.cl-ext-title {
color: var(--ink);
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.3;
}
.cl-ext-title b {
color: #d97706;
}
.cl-field {
display: flex;
align-items: center;
height: 36px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
color: var(--ink);
overflow: hidden;
white-space: nowrap;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cl-field.is-focus {
border-color: #f59e0b;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.cl-ph {
color: var(--faint);
}
.cl-val,
.cl-ext[data-state='empty'] .cl-field-mail {
display: none;
}
.cl-ext:not([data-state='empty']) .cl-ph {
display: none;
}
.cl-ext:not([data-state='empty']) .cl-val {
display: inline;
}
.cl-ext:not([data-state='empty']) .cl-field-mail {
animation: cl-in 0.35s var(--ease-out);
}
.cl-ext[data-state='sending'] [data-cl-claim] {
opacity: 0.7;
}
.cl-ok {
display: none;
align-items: center;
justify-content: center;
gap: 7px;
height: 36px;
border-radius: 10px;
background: var(--green-soft);
color: var(--green-ink);
font-weight: 650;
box-shadow: inset 0 0 0 1px #bbf7d0;
}
.cl-ext[data-state='sent'] [data-cl-claim] {
display: none;
}
.cl-ext[data-state='sent'] .cl-ok {
display: flex;
animation: cl-in 0.4s var(--ease-out);
}
.cl-mail {
min-height: 186px;
display: grid;
}
.cl-wait {
display: none;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--muted);
font-weight: 600;
}
.cl-spin {
width: 16px;
height: 16px;
border: 2px solid #fde68a;
border-top-color: #d97706;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.cl-mail[data-state='wait'] .cl-wait {
display: flex;
}
.cl-mail[data-state='wait'] .cl-mail-body {
display: none;
}
.cl-mail[data-state='mail'] .cl-mail-body {
animation: cl-in 0.45s var(--ease-out);
}
.cl-mail-head img {
border-radius: 8px;
}
.cl-time {
align-self: flex-start;
color: var(--faint);
font-size: 12px;
}
.cl-mail-text {
margin: 12px 0 14px;
color: var(--ink-2);
}
.cl-pro {
display: none;
align-items: center;
gap: 8px;
height: 34px;
color: var(--ink);
font-weight: 650;
}
.cl-pro svg {
color: #f59e0b;
stroke-width: 0;
}
.cl-pro-badge {
padding: 4px 10px;
border-radius: 999px;
background: linear-gradient(180deg, #fbbf24, #f59e0b);
color: #451a03;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
}
.cl-mail[data-state='on'] [data-cl-activate] {
display: none;
}
.cl-mail[data-state='on'] .cl-pro {
display: flex;
animation: cl-pop 0.5s var(--ease-out);
}
@keyframes cl-in {
from {
opacity: 0;
translate: 0 6px;
}
}
@keyframes cl-pop {
0% {
opacity: 0;
scale: 0.7;
}
60% {
opacity: 1;
scale: 1.06;
}
}
@media (max-width: 899px) {
.cl-steps {
grid-template-columns: minmax(0, 1fr);
max-width: 520px;
margin: 0 auto;
}
}
.unl-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.unl {
display: flex;
flex-direction: column;
padding: 22px 20px 20px;
border: 1px solid var(--line);
border-radius: 22px;
background: #fff;
box-shadow: var(--shadow-sm);
}
.unl .h5 {
margin-top: 16px;
}
.unl-free {
display: flex;
flex-direction: column;
gap: 1px;
margin-top: 12px;
color: var(--faint);
font-size: 13.5px;
}
.unl-free span {
font-size: 12px;
font-weight: 600;
}
.unl-free s,
.unl-free em {
color: var(--muted);
font-style: normal;
}
.unl-free s {
text-decoration-color: rgba(239, 68, 68, 0.7);
}
.unl-pro {
display: flex;
gap: 7px;
margin-top: auto;
padding-top: 14px;
color: var(--ink);
font-size: 15px;
font-weight: 650;
line-height: 1.35;
}
.unl-pro svg {
margin-top: 2px;
color: var(--green);
}
@media (max-width: 720px) {
.unl-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 440px) {
.unl-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.cl-posts-inner {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
align-items: center;
gap: clamp(40px, 6vw, 88px);
}
.section .cl-posts-side .h2 {
margin-bottom: 0;
}
.cl-posts-lede {
margin-top: 18px;
color: var(--muted);
font-size: 17px;
line-height: 1.6;
}
.cl-places-label {
margin-top: 28px;
color: var(--ink);
font-size: 14px;
font-weight: 650;
}
.cl-places {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.cl-places li {
padding: 6px 13px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--ink-2);
font-size: 14px;
font-weight: 500;
}
.cl-composer {
padding: 10px;
border: 1px solid var(--line);
border-radius: 28px;
background: var(--bg-soft);
box-shadow: var(--shadow-float);
}
.cl-tabs {
display: flex;
gap: 4px;
padding: 4px;
border-radius: 999px;
background: #eef2f7;
overflow-x: auto;
scrollbar-width: none;
}
.cl-tab {
flex: 1;
height: 36px;
padding: 0 14px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.cl-tab:hover {
color: var(--ink);
}
.cl-tab[aria-selected='true'] {
background: #fff;
color: var(--ink);
box-shadow: var(--shadow-sm), 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.cl-postbox {
margin-top: 10px;
padding: 22px 24px 18px;
border: 1px solid var(--line);
border-radius: 20px;
background: #fff;
}
.cl-posttext {
min-height: 11.5em;
margin-top: 14px;
color: var(--ink);
font-size: 16.5px;
line-height: 1.55;
white-space: pre-line;
overflow-wrap: anywhere;
}
.cl-postbox-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.cl-chars {
color: var(--faint);
font-size: 13.5px;
}
.cl-composer .is-copied {
background: var(--green);
}
.cl-after {
margin: 14px 0 6px;
color: var(--muted);
font-size: 14.5px;
text-align: center;
}
@media (max-width: 899px) {
.cl-posts-inner {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 480px) {
.cl-postbox {
padding: 18px 16px 14px;
}
.cl-posttext {
font-size: 15.5px;
}
}
.cl-why-card {
max-width: 780px;
margin: 0 auto;
padding: clamp(32px, 5vw, 56px);
border: 1px solid var(--line);
border-radius: 30px;
background: #fff;
box-shadow: var(--shadow-md);
text-align: center;
}
.cl-why-card img {
margin: 0 auto;
border-radius: 14px;
}
.cl-why-card .h3 {
margin-top: 20px;
}
.cl-why-card blockquote {
margin-top: 16px;
color: var(--ink-2);
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
line-height: 1.55;
}
.cl-why-card figcaption {
margin-top: 18px;
color: var(--muted);
font-size: 14.5px;
}
.cl-final-alt {
margin-top: 18px;
}
.page-top {
padding-top: clamp(40px, 5vw, 72px);
}
.crumbs {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
color: var(--muted);
font-size: 14px;
}
.crumbs a {
color: var(--muted);
text-decoration: none;
}
.crumbs a:hover {
color: var(--ink);
}
.crumbs svg {
color: var(--faint);
}
.page-title {
max-width: 22em;
}
.doc-wrap {
max-width: calc(760px + var(--gutter) * 2);
}
.doc-date {
margin-top: 12px;
color: var(--muted);
font-size: 15px;
}
.doc-intro {
margin-top: 28px;
color: var(--ink-2);
font-size: 19px;
line-height: 1.6;
}
.doc {
margin-top: 8px;
color: var(--ink-2);
font-size: 16.5px;
line-height: 1.7;
}
.doc h2 {
margin: 44px 0 12px;
color: var(--ink);
font-size: 22px;
letter-spacing: -0.02em;
}
.doc p {
margin-top: 12px;
}
.doc ul {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 14px;
padding-left: 22px;
list-style: disc;
}
.doc li::marker {
color: var(--faint);
}
.doc strong {
color: var(--ink);
}
.doc code {
padding: 1px 6px;
border-radius: 6px;
background: var(--bg-soft);
box-shadow: inset 0 0 0 1px var(--line);
font: 0.9em var(--mono);
}
.art-top {
overflow: clip;
}
.art-glow {
position: absolute;
inset: -200px 0 auto;
height: 600px;
background: radial-gradient(40% 50% at 30% 30%, var(--c-soft), transparent 70%);
pointer-events: none;
}
.art-wrap {
position: relative;
max-width: calc(880px + var(--gutter) * 2);
}
.art-tile {
margin-bottom: 20px;
}
.art-answer {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 44em;
margin: 24px 0 32px;
color: var(--ink-2);
font-size: 18.5px;
line-height: 1.65;
}
.art-answer strong {
color: var(--ink);
}
.art-h2 {
margin-bottom: 28px;
}
.art-points {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 40px;
counter-reset: pt;
}
.art-points li {
counter-increment: pt;
}
.art-points h3 {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
letter-spacing: -0.015em;
}
.art-points h3::before {
content: counter(pt);
display: grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--c-100);
color: var(--c-ink);
font-size: 14px;
font-weight: 700;
}
.art-points p {
margin-top: 8px;
padding-left: 40px;
color: var(--muted);
line-height: 1.6;
}
.art-how {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 56px;
align-items: start;
}
.art-steps {
display: flex;
flex-direction: column;
gap: 18px;
counter-reset: st;
}
.art-steps li {
position: relative;
padding-left: 48px;
color: var(--ink-2);
font-size: 17px;
line-height: 1.55;
counter-increment: st;
}
.art-steps li::before {
content: counter(st);
position: absolute;
top: -2px;
left: 0;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--c);
color: #fff;
font-size: 15px;
font-weight: 700;
}
.art-steps strong {
color: var(--ink);
}
.art-facts {
padding: 24px;
border-radius: 20px;
background: linear-gradient(180deg, var(--c-soft), #fff 70%);
box-shadow: inset 0 0 0 1px var(--line);
}
.art-facts-title {
margin-bottom: 14px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-ink);
}
.art-facts ul {
display: flex;
flex-direction: column;
gap: 12px;
}
.art-facts li {
display: flex;
gap: 10px;
color: var(--ink-2);
font-size: 15px;
line-height: 1.5;
}
.art-facts svg {
flex: none;
margin-top: 4px;
color: var(--c);
}
.art-related {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.art-related a {
display: flex;
align-items: center;
gap: 12px;
height: 100%;
padding: 18px;
border-radius: 16px;
background: #fff;
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink);
font-weight: 600;
line-height: 1.35;
text-decoration: none;
transition: box-shadow 0.2s ease;
}
.art-related a:hover {
box-shadow: inset 0 0 0 1px var(--c), 0 12px 28px -18px var(--c-glow);
}
.art-related .art-arrow {
flex: none;
margin-left: auto;
color: var(--c-ink);
}
@media (max-width: 860px) {
.art-points,
.art-how,
.art-related {
grid-template-columns: minmax(0, 1fr);
}
}
.status-head {
display: flex;
align-items: center;
gap: 20px;
--s: var(--green);
}
.status-head[data-status='degraded'],
.status-list [data-status='degraded'] {
--s: #d97706;
}
.status-head[data-status='incident'],
.status-list [data-status='incident'] {
--s: #dc2626;
}
.status-dot {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--s);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--s) 15%, transparent);
}
.status-sub {
margin-top: 8px;
color: var(--muted);
font-size: 17px;
}
.status-h {
margin: 48px 0 14px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.status-list {
border-radius: 18px;
box-shadow: inset 0 0 0 1px var(--line);
}
.status-list li {
--s: var(--green);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px 22px;
}
.status-list li + li {
border-top: 1px solid var(--line);
}
.status-list b {
display: block;
font-weight: 650;
}
.status-list span {
color: var(--muted);
font-size: 14.5px;
}
.status-list .status-pill {
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
padding: 5px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--s) 10%, #fff);
color: color-mix(in srgb, var(--s) 75%, #000);
font-size: 13.5px;
font-weight: 600;
}
.status-pill i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--s);
}
.status-incident,
.status-past li {
padding: 20px 22px;
border-radius: 18px;
box-shadow: inset 0 0 0 1px var(--line);
}
.status-badge {
display: inline-block;
margin-bottom: 8px;
padding: 3px 10px;
border-radius: 999px;
background: #fef3c7;
color: #92400e;
font-size: 13px;
font-weight: 600;
}
.status-when,
.status-past small {
color: var(--muted);
font-size: 14px;
}
.status-incident ul {
margin-top: 12px;
color: var(--ink-2);
}
.status-past {
display: flex;
flex-direction: column;
gap: 10px;
}
.status-past li {
display: flex;
flex-direction: column;
gap: 4px;
}
.status-foot {
margin-top: 36px;
color: var(--muted);
}
.pc {
overflow: clip;
}
.pc-glow {
position: absolute;
inset: -200px 0 auto;
height: 700px;
background: radial-gradient(40% 50% at 50% 35%, #dcfce7, transparent 70%);
pointer-events: none;
}
.pc-wrap {
position: relative;
max-width: calc(720px + var(--gutter) * 2);
}
html.js .pc[data-purchase='success']:not(.is-read) [data-missing] {
display: none;
}
.pc-hero {
margin-bottom: 36px;
text-align: center;
}
.pc-hero .page-title {
margin: 0 auto;
}
.pc-mark {
display: inline-grid;
place-items: center;
width: 68px;
height: 68px;
margin-bottom: 22px;
border-radius: 22px;
background: var(--green);
color: #fff;
}
.pc-mark-warn {
background: #fff;
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
}
.pc-lede {
margin-top: 12px;
color: var(--muted);
font-size: 19px;
}
.pc-card {
margin-top: 16px;
padding: 26px;
border-radius: 22px;
background: #fff;
box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
color: var(--ink-2);
line-height: 1.6;
}
.pc-card > * + * {
margin-top: 14px;
}
.pc-card-main {
box-shadow: inset 0 0 0 2px var(--green), 0 24px 48px -28px rgba(22, 163, 74, 0.45);
}
.pc-card-quiet {
background: var(--bg-soft);
box-shadow: inset 0 0 0 1px var(--line);
}
.pc-h {
display: flex;
align-items: center;
gap: 10px;
color: var(--ink);
font-size: 19px;
letter-spacing: -0.015em;
}
.pc-h svg {
color: var(--green);
}
.pc-steps {
display: flex;
flex-direction: column;
gap: 10px;
}
.pc-steps li {
display: flex;
gap: 12px;
}
.pc-n {
display: grid;
place-items: center;
flex: none;
width: 26px;
height: 26px;
margin-top: 1px;
border-radius: 50%;
background: var(--green-soft);
box-shadow: inset 0 0 0 1px #bbf7d0;
color: var(--green-ink);
font-size: 13px;
font-weight: 700;
}
.pc-key {
display: flex;
align-items: center;
gap: 10px;
}
.pc-key code {
flex: 1;
min-width: 0;
padding: 13px 16px;
border-radius: 12px;
background: var(--bg-soft);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink);
font: 15px/1.4 var(--mono);
overflow-wrap: anywhere;
user-select: all;
}
.pc-key .btn {
gap: 6px;
}
.pc-note {
display: flex;
gap: 8px;
color: var(--muted);
font-size: 15px;
}
.pc-note svg {
flex: none;
margin-top: 4px;
}
.pc-shot {
display: block;
width: 100%;
height: auto;
border-radius: 14px;
box-shadow: inset 0 0 0 1px var(--line);
}
.pc-small {
color: var(--muted);
font-size: 13.5px;
line-height: 1.6;
}
.pc-help {
margin-top: 24px;
color: var(--muted);
text-align: center;
}
.pc-two {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.pc-two .pc-card {
margin-top: 0;
}
.pc-ref {
font: 14px var(--mono);
color: var(--ink);
}
.pc .btn svg {
margin-left: 2px;
}
@media (max-width: 720px) {
.pc-two {
grid-template-columns: minmax(0, 1fr);
}
}
.consent {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 60;
display: flex;
align-items: center;
gap: 18px;
width: min(520px, calc(100% - 40px));
padding: 16px 16px 16px 20px;
border-radius: 18px;
background: #fff;
box-shadow: var(--shadow-float);
color: var(--ink-2);
font-size: 14.5px;
line-height: 1.5;
opacity: 0;
translate: 0 16px;
transition: opacity 0.35s ease, translate 0.45s var(--ease-out);
}
.consent.is-on {
opacity: 1;
translate: 0 0;
}
.consent[hidden] {
display: none;
}
.consent-acts {
display: flex;
flex-direction: column;
gap: 6px;
flex: none;
}
.consent-acts .btn {
justify-content: center;
}
.consent-no {
border: 0;
background: none;
color: var(--muted);
font: inherit;
font-size: 13.5px;
cursor: pointer;
}
.consent-no:hover {
color: var(--ink);
}
.footer-cookies {
border: 0;
padding: 0;
background: none;
color: var(--muted);
font: inherit;
cursor: pointer;
}
.footer-cookies:hover {
color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
.consent {
transition: none;
}
}
.art-date {
margin-top: 12px;
color: var(--muted);
font-size: 14px;
}
.art-prose {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 46em;
color: var(--ink-2);
font-size: 17px;
line-height: 1.7;
}
.art-prose strong {
color: var(--ink);
}
.art-list {
display: flex;
flex-direction: column;
gap: 14px;
padding-left: 1.2em;
list-style: disc;
}
.art-list li::marker {
color: var(--c);
}
.art-prose code,
.art-steps code {
padding: 1px 5px;
border-radius: 5px;
background: #f1f5f9;
font-family: var(--mono);
font-size: 0.88em;
}
.art-how-solo {
grid-template-columns: minmax(0, 1fr);
}
.art-table-wrap {
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
background: #fff;
}
.art-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
line-height: 1.5;
}
.art-table th,
.art-table td {
padding: 14px 18px;
text-align: left;
vertical-align: top;
}
.art-table thead th {
background: var(--c-soft);
color: var(--ink);
font-size: 14px;
font-weight: 650;
}
.art-table tbody tr + tr,
.art-table tbody tr:first-child {
border-top: 1px solid var(--line);
}
.art-table tbody th {
width: 26%;
color: var(--ink);
font-weight: 600;
}
.art-table td {
color: var(--ink-2);
}
.art-intro + .art-table-wrap,
.art-prose + .art-table-wrap {
margin-top: 20px;
}
.art-note {
max-width: 46em;
margin-top: 16px;
color: var(--muted);
font-size: 14.5px;
line-height: 1.6;
}
.art-callout {
display: flex;
gap: 16px;
max-width: 46em;
padding: 22px 24px;
border-radius: 20px;
background: var(--c-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
}
.art-callout-warn {
background: #fffbeb;
box-shadow: inset 0 0 0 1px #fde68a;
}
.art-callout-icon {
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
border-radius: 11px;
background: #fff;
color: var(--c-ink);
}
.art-callout-warn .art-callout-icon {
color: #b45309;
}
.art-callout-title {
margin-bottom: 6px;
color: var(--ink);
font-size: 17px;
font-weight: 650;
}
.art-callout p {
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.65;
}
.art-demo {
max-width: 680px;
margin: 0 auto;
}
.art-all {
margin-top: 24px;
}
.art-all .link {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hub-lede {
max-width: 42em;
margin-top: 18px;
color: var(--ink-2);
font-size: 18px;
line-height: 1.65;
}
.hub-h2 {
margin-bottom: 4px;
}
.hub-guides {
margin-top: 24px;
}
@media (min-width: 1041px) {
.hub-guides {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.art-table thead {
display: none;
}
.art-table,
.art-table tbody,
.art-table tr,
.art-table th,
.art-table td {
display: block;
width: 100%;
}
.art-table tbody th {
width: 100%;
padding: 16px 18px 4px;
font-size: 15.5px;
}
.art-table td {
padding: 4px 18px;
}
.art-table td:last-child {
padding-bottom: 16px;
}
.art-table td[data-label]:not([data-label=''])::before {
content: attr(data-label) ': ';
color: var(--muted);
font-weight: 600;
}
.art-prose {
font-size: 16px;
}
.art-callout {
padding: 18px;
}
}
.section.art-top > .wrap > .page-title,
.section.hub-top > .wrap > .page-title {
margin-bottom: 0;
}
.art-top .art-date + .art-answer {
margin-top: 22px;
}
.art-answer .link,
.art-prose .link,
.art-points .link,
.art-steps .link,
.art-note .link,
.art-callout .link,
.art-table .link {
display: inline;
}
.art-sec-callout {
padding-block: clamp(36px, 4.5vw, 56px);
}
@media (max-width: 560px) {
.consent {
right: 10px;
bottom: 10px;
left: 10px;
gap: 12px;
width: auto;
padding: 10px 12px 10px 14px;
border-radius: 16px;
font-size: 12.5px;
line-height: 1.45;
}
.consent-acts {
gap: 4px;
}
}
@media (max-width: 900px) {
.site-footer nav a,
.footer-cookies,
.crumbs a {
display: inline-block;
padding: 9px 0;
margin: -9px 0;
}
}
.notfound-links {
display: flex;
flex-direction: column;
gap: 10px;
margin: 8px 0 32px;
font-size: 16px;
}
.tool {
padding: clamp(18px, 2.5vw, 28px);
border: 1px solid var(--line);
border-radius: 24px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -28px rgba(15, 23, 42, 0.25);
}
.tool-noscript {
margin-top: 14px;
color: var(--muted);
}
.xv-drop {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 36px 20px;
border: 1.5px dashed color-mix(in srgb, var(--c) 45%, var(--line));
border-radius: 18px;
background: var(--c-soft);
color: var(--ink-2);
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.xv-drop strong {
color: var(--ink);
font-size: 17px;
}
.xv-drop span:last-child {
color: var(--muted);
font-size: 14.5px;
}
.xv-drop.is-over,
.xv-drop:hover {
border-color: var(--c);
background: var(--c-100);
}
.xv-drop:focus-within {
outline: 2px solid var(--c);
outline-offset: 3px;
}
.xv-drop input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.xv-status {
margin-top: 12px;
color: var(--muted);
font-size: 14px;
text-align: center;
}
.xv-status.is-bad {
color: #b91c1c;
}
.xv-app {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 0;
height: 680px;
margin-top: 18px;
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
}
.xv-app[hidden] {
display: none;
}
.xv-side {
display: flex;
flex-direction: column;
min-height: 0;
padding: 14px;
border-right: 1px solid var(--line);
background: var(--bg-soft);
}
.xv-q {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
color: var(--ink);
font: inherit;
font-size: 14.5px;
}
.xv-q:focus {
outline: 2px solid var(--c);
outline-offset: 1px;
}
.xv-count {
margin: 10px 4px 6px;
color: var(--muted);
font-size: 13px;
}
.xv-list {
flex: 1;
min-height: 0;
overflow-y: auto;
margin: 0 -6px;
padding: 0 6px;
}
.xv-item {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: 10px;
background: none;
color: var(--ink-2);
font: inherit;
text-align: left;
cursor: pointer;
}
.xv-item:hover {
background: #fff;
}
.xv-item.is-on {
background: #fff;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, var(--line));
}
.xv-item-title {
overflow: hidden;
color: var(--ink);
font-size: 14.5px;
font-weight: 550;
text-overflow: ellipsis;
white-space: nowrap;
}
.xv-item-date {
color: var(--muted);
font-size: 12.5px;
}
.xv-more {
padding: 10px;
color: var(--muted);
font-size: 13px;
}
.xv-all {
margin-top: 12px;
justify-content: center;
}
.xv-chat {
min-height: 0;
overflow-y: auto;
padding: 22px clamp(18px, 3vw, 34px) 34px;
}
.xv-head {
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.xv-title {
color: var(--ink);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
}
.xv-meta {
margin-top: 4px;
color: var(--muted);
font-size: 13.5px;
}
.xv-acts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.xv-msg {
margin-top: 22px;
}
.xv-who {
margin-bottom: 6px;
color: var(--muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.xv-user .xv-body {
padding: 12px 16px;
border-radius: 16px;
background: #f4f4f5;
}
.xv-empty {
margin-top: 22px;
color: var(--muted);
}
.tp {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
}
.tp-in {
display: flex;
flex-direction: column;
gap: 8px;
}
.tp-label {
color: var(--ink);
font-size: 14px;
font-weight: 650;
}
.tp-label span {
color: var(--muted);
font-weight: 500;
}
.tp-title,
.tp-text {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
color: var(--ink);
font: inherit;
font-size: 15px;
}
.tp-title + .tp-label {
margin-top: 6px;
}
.tp-text {
flex: 1;
min-height: 420px;
font-family: var(--mono);
font-size: 13.5px;
line-height: 1.55;
resize: vertical;
}
.tp-title:focus,
.tp-text:focus {
outline: 2px solid var(--c);
outline-offset: 1px;
}
.tp-out {
min-width: 0;
}
.tp-paper {
height: 100%;
min-height: 420px;
max-height: 640px;
overflow-y: auto;
padding: 26px 28px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
}
.tp-empty {
color: var(--faint);
}
.tp-acts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
grid-column: 1 / -1;
}
.tp-note {
color: var(--green-ink);
font-size: 14px;
}
.xv-body,
.tp-paper,
.print-sheet {
color: var(--ink);
font-size: 15.5px;
line-height: 1.65;
overflow-wrap: anywhere;
}
:is(.xv-body, .tp-paper, .print-sheet) > * + * {
margin-top: 12px;
}
:is(.xv-body, .tp-paper, .print-sheet) :is(h1, h2, h3, h4, h5, h6) {
color: var(--ink);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.3;
}
:is(.xv-body, .tp-paper, .print-sheet) h1 { font-size: 24px; }
:is(.xv-body, .tp-paper, .print-sheet) h2 { font-size: 20px; }
:is(.xv-body, .tp-paper, .print-sheet) h3 { font-size: 17px; }
:is(.xv-body, .tp-paper, .print-sheet) :is(h4, h5, h6) { font-size: 15.5px; }
:is(.xv-body, .tp-paper, .print-sheet) :is(ul, ol) {
padding-left: 1.4em;
}
:is(.xv-body, .tp-paper, .print-sheet) ul {
list-style: disc;
}
:is(.xv-body, .tp-paper, .print-sheet) ol {
list-style: decimal;
}
:is(.xv-body, .tp-paper, .print-sheet) li + li {
margin-top: 4px;
}
:is(.xv-body, .tp-paper, .print-sheet) pre {
overflow-x: auto;
padding: 14px 16px;
border-radius: 10px;
background: #f1f5f9;
font-size: 13.5px;
line-height: 1.55;
}
:is(.xv-body, .tp-paper, .print-sheet) code {
font-family: var(--mono);
font-size: 0.9em;
}
:is(.xv-body, .tp-paper, .print-sheet) :not(pre) > code {
padding: 1px 5px;
border-radius: 5px;
background: #f1f5f9;
}
:is(.xv-body, .tp-paper, .print-sheet) table {
border-collapse: collapse;
font-size: 14.5px;
}
:is(.xv-body, .tp-paper, .print-sheet) :is(th, td) {
padding: 6px 10px;
border: 1px solid var(--line);
text-align: left;
}
:is(.xv-body, .tp-paper, .print-sheet) th {
background: var(--bg-soft);
}
:is(.xv-body, .tp-paper, .print-sheet) blockquote {
padding-left: 14px;
border-left: 3px solid var(--line);
color: var(--ink-2);
}
:is(.xv-body, .tp-paper, .print-sheet) a {
color: var(--green-ink);
}
:is(.xv-body, .tp-paper, .print-sheet) hr {
border: 0;
border-top: 1px solid var(--line);
}
@media (max-width: 760px) {
.xv-app {
grid-template-columns: minmax(0, 1fr);
height: auto;
}
.xv-side {
border-right: 0;
border-bottom: 1px solid var(--line);
}
.xv-list {
max-height: 300px;
}
.xv-chat {
max-height: 640px;
}
.tp {
grid-template-columns: minmax(0, 1fr);
}
.tp-text,
.tp-paper {
min-height: 260px;
}
}
.print-sheet {
display: none;
}
@media print {
html.is-printing-sheet body > :not(.print-sheet) {
display: none !important;
}
html.is-printing-sheet .print-sheet {
display: block;
font-size: 11pt;
}
.print-sheet .xv-msg {
break-inside: auto;
}
.print-sheet pre {
white-space: pre-wrap;
break-inside: avoid;
}
}
.art-top-tool {
padding-bottom: 8px;
}
.art-top-tool .art-answer {
margin-bottom: 0;
}
.art-sec-tool {
padding-top: 32px;
}
.art-sec-tool.section-soft {
background: none;
}
.tool-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
margin-top: 24px;
padding: 18px 22px;
border-radius: 18px;
background: var(--c-soft);
}
.tool-cta p {
max-width: 34em;
color: var(--ink-2);
font-size: 15.5px;
}
.xv-drop.is-open {
flex-direction: row;
justify-content: center;
padding: 12px 16px;
}
.xv-drop.is-open .tile,
.xv-drop.is-open span:last-child {
display: none;
}
.xv-drop.is-open strong {
font-size: 15px;
}
.xv-drop.is-open strong::after {
content: ' (open another)';
color: var(--muted);
font-weight: 500;
}
.post-body {
display: flex;
flex-direction: column;
gap: 18px;
color: var(--ink-2);
font-size: 17px;
line-height: 1.7;
}
.post-body > p,
.post-body > ul,
.post-body > ol,
.post-body > h3,
.post-body > h4 {
max-width: 46em;
}
.post-body strong {
color: var(--ink);
}
.post-body .link {
display: inline;
}
.post-body code {
padding: 1px 5px;
border-radius: 5px;
background: #f1f5f9;
font-family: var(--mono);
font-size: 0.88em;
}
.post-h3 {
margin-top: 10px;
color: var(--ink);
font-size: 19px;
font-weight: 650;
line-height: 1.4;
}
.post-h4 {
color: var(--ink);
font-size: 17px;
font-weight: 650;
}
.post-ol {
list-style: decimal;
}
.post-ol li::marker {
color: var(--c-ink);
font-weight: 650;
}
.post-code {
max-width: 100%;
overflow-x: auto;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
font: 14px/1.6 var(--mono);
}
.post-code code {
padding: 0;
background: none;
}
.post-fig img {
width: 100%;
height: auto;
border: 1px solid var(--line);
border-radius: 18px;
}
.post-hr {
width: 100%;
border: 0;
border-top: 1px solid var(--line);
}
.post-callout > div {
display: flex;
flex-direction: column;
gap: 10px;
}
.post-callout .art-callout-title {
margin-bottom: 0;
}
.post-install .stores {
margin: 0;
}
.post-more-h {
margin-top: 48px;
}
.art-related + .post-more-h {
margin-top: 48px;
}
.gd-date {
color: var(--muted);
font-size: 13.5px;
font-weight: 550;
}
.about-logo {
display: block;
margin-bottom: 22px;
border-radius: 16px;
}
.about-nums {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.about-nums li {
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
}
.about-nums strong {
color: var(--ink);
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
}
.about-nums span {
color: var(--muted);
font-size: 14.5px;
line-height: 1.5;
}
.about-nums .link {
display: inline;
}
.press {
display: flex;
flex-direction: column;
margin-top: 24px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
}
.press > div {
display: grid;
grid-template-columns: 11em minmax(0, 1fr);
gap: 16px;
padding: 16px 20px;
}
.press > div + div {
border-top: 1px solid var(--line);
}
.press dt {
color: var(--ink);
font-size: 14.5px;
font-weight: 650;
}
.press dd {
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.6;
}
.press .link {
display: inline;
}
.rel-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.rel {
display: grid;
grid-template-columns: 9.5em minmax(0, 1fr);
gap: 24px;
padding: 24px;
border: 1px solid var(--line);
border-radius: 20px;
background: #fff;
scroll-margin-top: 90px;
}
.rel-side {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.rel-v {
padding: 3px 10px;
border-radius: 999px;
background: var(--c-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
color: var(--c-ink);
font: 600 14px/1.5 var(--mono);
}
.rel-date {
color: var(--muted);
font-size: 14px;
}
.rel-title {
margin-bottom: 12px;
color: var(--ink);
font-size: 19px;
font-weight: 650;
line-height: 1.35;
}
.rel .art-list {
gap: 8px;
color: var(--ink-2);
font-size: 16px;
line-height: 1.6;
}
@media (max-width: 900px) {
.about-nums {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.post-body {
font-size: 16px;
}
.press > div,
.rel {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.rel {
padding: 20px;
}
.rel-side {
flex-direction: row;
align-items: center;
gap: 12px;
}
}