@font-face {
font-family: "Instrument Serif";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "Instrument Serif";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/dm-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}
:root {
color-scheme: light;
--paper: #f6efe6;
--paper-deep: #efe5d8;
--paper-white: #fffdf9;
--ink: #1b1813;
--ink-soft: #4a443b;
--ink-mute: #655e54;
--line: rgba(27, 24, 19, 0.12);
--line-strong: rgba(27, 24, 19, 0.22);
--blue: #2f5bff;
--pink: #f0529c;
--orange: #ff5a36;
--yellow: #ffd95a;
--blue-text: #2448d6;
--pink-text: #d92c80;
--orange-text: #d93d1a;
--g1: #4f7bff;
--g2: #ff7ab6;
--g3: #ffa14a;
--g4: #ffd95a;
--g5: #9ad7ff;
--pass: #1f8f5a;
--pass-bg: #dff5e4;
--pass-text: #116b32;
--fail: #c8341f;
--fail-bg: #fde4de;
--fail-text: #9e2614;
--ink-bg: #15120e;
--ink-paper: #f6efe6;
--ink-mute-light: rgba(246, 239, 230, 0.72);
--ink-line: rgba(246, 239, 230, 0.14);
--ink-card: rgba(246, 239, 230, 0.06);
--serif: "Instrument Serif", Georgia, "Times New Roman", serif;
--sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--fs-display-xl: clamp(44px, 7.2vw, 96px);
--fs-display-lg: clamp(34px, 4.8vw, 60px);
--fs-display-md: clamp(28px, 3.2vw, 40px);
--fs-lede: clamp(17px, 1.4vw, 20px);
--fs-body: 17px;
--fs-small: 14px;
--fs-micro: 12.5px;
--fs-code: 13.5px;
--lh-display: 0.98;
--lh-body: 1.55;
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s5: 24px;
--s6: 32px;
--s7: 48px;
--s8: 64px;
--s9: 96px;
--s10: 128px;
--radius: 18px;
--radius-sm: 12px;
--radius-pill: 999px;
--card: rgba(255, 255, 255, 0.86);
--card-shadow: 0 24px 60px rgba(30, 20, 10, 0.12);
--card-shadow-sm: 0 10px 30px rgba(30, 20, 10, 0.07);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--t-fast: 160ms;
--t-base: 260ms;
--t-reveal: 520ms;
--wrap: 1180px;
--wrap-narrow: 760px;
--gutter: 16px;
--nav-h: 64px;
}
@media (min-width: 760px) {
:root {
--gutter: 28px;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--nav-h) + 8px);
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: repeating-linear-gradient(-58deg, rgba(27, 24, 19, 0.04) 0 1px, transparent 1px 11px);
}
img,
video,
svg {
max-width: 100%;
display: block;
}
h1,
h2,
h3,
h4 {
margin: 0;
font-weight: 400;
}
p {
margin: 0 0 1em;
}
a {
color: inherit;
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
}
code,
kbd {
font-family: var(--mono);
font-size: 0.84em;
background: rgba(27, 24, 19, 0.06);
padding: 0.12em 0.42em;
border-radius: 6px;
overflow-wrap: anywhere;
}
pre {
margin: 0;
}
pre code {
background: none;
padding: 0;
font-size: var(--fs-code);
line-height: 1.6;
overflow-wrap: normal;
}
button {
font: inherit;
color: inherit;
}
:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 3px;
border-radius: 4px;
}
::selection {
background: rgba(255, 217, 90, 0.7);
}
[hidden] {
display: none !important;
}
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.skip {
position: absolute;
left: 16px;
top: -60px;
background: var(--ink);
color: #fff;
padding: 10px 14px;
border-radius: 10px;
z-index: 200;
}
.skip:focus {
top: 12px;
}
.wrap {
width: min(100% - var(--gutter) * 2, var(--wrap));
margin-inline: auto;
}
.wrap--narrow {
max-width: var(--wrap-narrow);
}
.section {
position: relative;
padding: clamp(64px, 9vw, 120px) 0;
scroll-margin-top: var(--nav-h);
}
.section--tight {
padding: clamp(40px, 6vw, 72px) 0;
}
.section--deep {
background: var(--paper-deep);
}
.section--rule {
border-top: 1px solid var(--line);
}
.section__head {
max-width: 820px;
margin-bottom: clamp(32px, 5vw, 56px);
}
.section__head--center {
margin-inline: auto;
text-align: center;
}
.section__head--split {
max-width: none;
display: grid;
gap: 16px 48px;
align-items: end;
}
@media (min-width: 900px) {
.section__head--split {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
.section__head--split .lede {
margin-bottom: 0.6em;
}
}
.section__foot {
margin-top: clamp(28px, 4vw, 44px);
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
align-items: center;
}
.display {
font-family: var(--serif);
font-weight: 400;
letter-spacing: -0.01em;
line-height: var(--lh-display);
margin: 0 0 0.42em;
text-wrap: balance;
}
.display--xl {
font-size: var(--fs-display-xl);
letter-spacing: -0.02em;
}
.display--lg {
font-size: var(--fs-display-lg);
line-height: 1.02;
}
.display--md {
font-size: var(--fs-display-md);
line-height: 1.05;
}
.display--light {
color: var(--ink-paper);
}
.accent {
font-style: italic;
}
.accent--pink {
color: var(--pink-text);
}
.accent--blue {
color: var(--blue-text);
}
.accent--orange {
color: var(--orange-text);
}
.accent--yellow {
color: var(--yellow);
}
.display .w {
display: inline-block;
white-space: pre;
}
.eyebrow {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 18px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
}
.eyebrow::before {
content: "";
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pink);
box-shadow: 0 0 0 4px rgba(240, 82, 156, 0.18);
}
.eyebrow--light {
color: var(--ink-mute-light);
}
.eyebrow--light::before {
background: var(--yellow);
box-shadow: 0 0 0 4px rgba(255, 217, 90, 0.18);
}
.eyebrow .sep {
opacity: 0.5;
}
.folio {
font: 500 12.5px/1 var(--mono);
color: var(--ink-mute);
letter-spacing: 0.02em;
}
.lede {
font-size: var(--fs-lede);
color: var(--ink-soft);
margin: 0 0 28px;
max-width: 62ch;
}
.lede--light {
color: rgba(246, 239, 230, 0.86);
}
.body {
max-width: 68ch;
color: var(--ink-soft);
}
.small {
font-size: var(--fs-small);
}
.micro,
.caption {
font-size: var(--fs-micro);
color: var(--ink-mute);
line-height: 1.5;
}
.caption {
margin: 12px 0 0;
}
.prose {
max-width: 68ch;
color: var(--ink-soft);
}
.prose h2 {
font-family: var(--serif);
font-size: var(--fs-display-md);
line-height: 1.05;
color: var(--ink);
margin: 1.6em 0 0.5em;
}
.prose h3 {
font-family: var(--sans);
font-weight: 600;
font-size: 18px;
color: var(--ink);
margin: 1.6em 0 0.4em;
}
.prose ul,
.prose ol {
padding-left: 1.2em;
}
.prose li {
margin: 0.35em 0;
}
.prose a {
color: var(--ink);
}
.num {
font-family: var(--serif);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1;
}
[data-reveal] .w {
opacity: 0;
transform: translateY(0.25em) scale(0.9);
}
[data-reveal].is-in .w {
animation: word-in var(--t-reveal) var(--ease-spring) forwards;
animation-delay: calc(var(--i) * 60ms);
}
[data-reveal].is-in .w--accent {
animation-delay: calc(var(--i) * 60ms + 60ms);
}
@keyframes word-in {
0% {
opacity: 0;
transform: translateY(0.25em) scale(0.9);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes pop-in {
from {
opacity: 0;
transform: scale(0.96) translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes drift {
0% {
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
transform: translate3d(-4%, 3%, 0) rotate(8deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font: 500 16px/1.1 var(--sans);
padding: 14px 22px;
border-radius: var(--radius-pill);
text-decoration: none;
border: 1.5px solid transparent;
cursor: pointer;
min-height: 48px;
text-align: center;
transition:
transform var(--t-base) var(--ease-out),
background var(--t-fast),
color var(--t-fast),
border-color var(--t-fast);
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0);
}
.btn--ink {
background: var(--ink);
color: #fff;
}
.btn--ink:hover {
background: #000;
}
.btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--line-strong);
}
.btn--ghost:hover {
background: rgba(27, 24, 19, 0.05);
border-color: rgba(27, 24, 19, 0.4);
}
.btn--light {
background: var(--ink-paper);
color: var(--ink);
}
.btn--light:hover {
background: #fff;
}
.btn--ghost-light {
background: transparent;
color: var(--ink-paper);
border-color: rgba(246, 239, 230, 0.35);
}
.btn--ghost-light:hover {
background: rgba(246, 239, 230, 0.08);
}
.btn--sm {
padding: 10px 16px;
font-size: 14.5px;
min-height: 44px;
}
.btn--lg {
padding: 18px 28px;
font-size: 17px;
min-height: 56px;
}
.btn--block {
width: 100%;
}
.btn .arrow {
transition: transform var(--t-base) var(--ease-out);
}
.btn:hover .arrow {
transform: translateX(3px);
}
.link {
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--line-strong);
text-underline-offset: 0.25em;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
}
.link:hover {
text-decoration-color: currentColor;
}
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
font: 600 11px/1 var(--sans);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 9px;
border-radius: var(--radius-pill);
white-space: nowrap;
vertical-align: middle;
}
.badge--soon {
background: var(--yellow);
color: var(--ink);
}
.badge--real {
background: rgba(27, 24, 19, 0.07);
color: var(--ink-soft);
}
.badge--pass {
background: var(--pass-bg);
color: var(--pass-text);
}
.badge--fail {
background: var(--fail-bg);
color: var(--fail-text);
}
.badge--new {
background: var(--blue);
color: #fff;
}
.badge--mcp {
background: rgba(47, 91, 255, 0.1);
color: var(--blue-text);
}
.badge--ink {
background: var(--ink);
color: var(--ink-paper);
}
.badge--outline {
border: 1px solid var(--line-strong);
color: var(--ink-soft);
}
.section--ink .badge--real {
background: rgba(246, 239, 230, 0.12);
color: var(--ink-paper);
}
.section--ink .badge--mcp {
background: rgba(154, 215, 255, 0.14);
color: #bfe3ff;
}
.nav {
position: sticky;
top: 0;
z-index: 60;
background: rgba(246, 239, 230, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.nav__inner {
display: flex;
align-items: center;
gap: 16px;
height: var(--nav-h);
}
.wordmark {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-family: var(--serif);
font-size: 26px;
letter-spacing: -0.02em;
line-height: 1;
margin-right: auto;
min-height: 44px;
}
.wordmark em {
font-style: italic;
color: var(--pink-text);
}
.wordmark__mark {
width: 22px;
height: 22px;
border-radius: 7px;
flex: none;
background:
radial-gradient(circle at 30% 30%, var(--g4), transparent 60%),
radial-gradient(circle at 70% 70%, var(--g2), transparent 60%),
linear-gradient(135deg, var(--g1), var(--g5));
}
.nav__links {
display: none;
align-items: center;
gap: 4px;
font-size: 15px;
font-weight: 500;
}
.nav__links a {
text-decoration: none;
color: var(--ink-soft);
padding: 10px 11px;
border-radius: 10px;
}
.nav__links a:hover {
color: var(--ink);
background: rgba(27, 24, 19, 0.05);
}
.nav__links a[aria-current="page"] {
color: var(--ink);
box-shadow: inset 0 -2px 0 var(--pink);
border-radius: 0;
}
.nav__login {
display: none;
align-items: center;
gap: 6px;
font-size: 15px;
font-weight: 500;
color: var(--ink-soft);
text-decoration: none;
padding: 10px 6px;
}
.nav__login .badge {
font-size: 10.5px;
padding: 3px 6px;
}
.nav__cta {
display: none;
}
.nav__burger {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border: 1.5px solid var(--line-strong);
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.nav__burger span,
.nav__burger span::before,
.nav__burger span::after {
display: block;
width: 16px;
height: 1.5px;
background: var(--ink);
position: relative;
transition: transform var(--t-base) var(--ease-out);
}
.nav__burger span::before,
.nav__burger span::after {
content: "";
position: absolute;
left: 0;
}
.nav__burger span::before {
top: -5px;
}
.nav__burger span::after {
top: 5px;
}
.nav__burger[aria-expanded="true"] span {
background: transparent;
}
.nav__burger[aria-expanded="true"] span::before {
transform: translateY(5px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span::after {
transform: translateY(-5px) rotate(-45deg);
}
.nav__menu {
border-top: 1px solid var(--line);
padding: 8px 0 20px;
}
.nav__menu ul {
list-style: none;
margin: 0 0 16px;
padding: 0;
}
.nav__menu li a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
font-family: var(--serif);
font-size: 28px;
letter-spacing: -0.01em;
text-decoration: none;
border-bottom: 1px solid var(--line);
}
.nav__menu-cta {
display: grid;
gap: 10px;
}
@media (min-width: 1040px) {
.nav__links,
.nav__login {
display: flex;
}
.nav__cta {
display: inline-flex;
}
.nav__burger,
.nav__menu {
display: none !important;
}
.wordmark {
margin-right: 12px;
}
.nav__links {
margin-right: auto;
}
}
@media (min-width: 560px) and (max-width: 1039px) {
.nav__cta {
display: inline-flex;
}
}
.crumbs {
font-size: 13.5px;
color: var(--ink-mute);
margin: 0 0 22px;
}
.crumbs ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
}
.crumbs li + li::before {
content: "/";
margin-right: 8px;
opacity: 0.6;
}
.crumbs a {
color: var(--ink-soft);
}
.sheet {
border: 0;
padding: 0;
margin: auto auto 0;
width: 100%;
max-width: 100%;
max-height: 92vh;
background: var(--paper);
color: var(--ink);
border-radius: 24px 24px 0 0;
box-shadow: 0 -20px 60px rgba(20, 14, 6, 0.25);
overflow: auto;
}
.sheet::backdrop {
background: rgba(21, 18, 14, 0.45);
backdrop-filter: blur(3px);
}
.sheet[open] {
animation: sheet-up var(--t-reveal) var(--ease-out);
}
@keyframes sheet-up {
from {
transform: translateY(40px);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
@media (min-width: 760px) {
.sheet {
margin: auto;
width: min(100% - 48px, 880px);
border-radius: 24px;
}
}
.sheet__inner {
padding: 28px 16px 24px;
}
@media (min-width: 760px) {
.sheet__inner {
padding: 40px 40px 32px;
}
}
.sheet__head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 22px;
}
.sheet__title {
font-family: var(--serif);
font-size: var(--fs-display-md);
line-height: 1.04;
}
.sheet__close {
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--line-strong);
background: transparent;
cursor: pointer;
font-size: 22px;
line-height: 1;
}
.sheet__cards {
display: grid;
gap: 14px;
}
@media (min-width: 760px) {
.sheet__cards {
grid-template-columns: 1fr 1fr;
}
}
.choice {
border-radius: var(--radius);
padding: 22px;
display: flex;
flex-direction: column;
gap: 12px;
border: 1px solid var(--line);
background: var(--paper-white);
}
.choice--ink {
background: var(--ink-bg);
color: var(--ink-paper);
border-color: transparent;
}
.choice__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.choice h3 {
font-family: var(--serif);
font-size: 30px;
line-height: 1;
}
.choice p {
margin: 0;
font-size: 15px;
color: var(--ink-soft);
}
.choice--ink p {
color: var(--ink-mute-light);
}
.choice ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 14.5px;
display: grid;
gap: 6px;
}
.choice li {
padding-left: 18px;
position: relative;
}
.choice li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pink);
}
.choice--ink li::before {
background: var(--yellow);
}
.choice .btn {
margin-top: auto;
}
.sheet__note {
margin: 18px 0 0;
font-size: 13px;
color: var(--ink-mute);
}
.cmd {
display: flex;
align-items: stretch;
gap: 0;
border-radius: var(--radius-sm);
background: var(--ink-bg);
color: var(--ink-paper);
overflow: hidden;
min-width: 0;
}
.cmd pre {
flex: 1;
min-width: 0;
padding: 12px 14px;
overflow-x: auto;
}
.cmd code {
color: var(--ink-paper);
font-size: 12.5px;
white-space: pre;
}
.cmd button,
.copy {
flex: none;
border: 0;
border-left: 1px solid var(--ink-line);
background: rgba(246, 239, 230, 0.06);
color: var(--ink-paper);
font: 500 13px var(--sans);
padding: 0 14px;
min-width: 64px;
min-height: 44px;
cursor: pointer;
}
.cmd button:hover {
background: rgba(246, 239, 230, 0.14);
}
.card {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--card-shadow);
}
.card--solid {
background: var(--paper-white);
border: 1px solid var(--line);
box-shadow: var(--card-shadow-sm);
}
.card--ink {
background: var(--ink-card);
border: 1px solid var(--ink-line);
box-shadow: none;
}
.card--dashed {
background: transparent;
border: 1.5px dashed var(--line-strong);
box-shadow: none;
}
.print {
margin: 0;
background: var(--paper-white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--card-shadow);
padding: 12px 12px 0;
break-inside: avoid;
position: relative;
}
.print__frame {
position: relative;
border-radius: 8px;
overflow: hidden;
background: var(--paper-deep);
}
.print__frame[data-aspect="4:5"] {
aspect-ratio: 4 / 5;
}
.print__frame[data-aspect="9:16"] {
aspect-ratio: 9 / 16;
}
.print__frame[data-aspect="1:1"] {
aspect-ratio: 1 / 1;
}
.print__frame[data-aspect="16:9"] {
aspect-ratio: 16 / 9;
}
.print__frame video,
.print__frame img {
width: 100%;
height: 100%;
object-fit: cover;
}
.print__cap {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 10px 2px 12px;
flex-wrap: wrap;
}
.print__title {
font-family: var(--serif);
font-size: 20px;
line-height: 1.1;
}
.print__meta {
font-size: 12.5px;
color: var(--ink-mute);
}
.print__ctl {
position: absolute;
right: 8px;
bottom: 8px;
display: flex;
gap: 6px;
}
.ctl {
display: inline-flex;
align-items: center;
gap: 6px;
border: 0;
border-radius: var(--radius-pill);
padding: 0 12px;
min-height: 34px;
min-width: 34px;
background: rgba(21, 18, 14, 0.78);
color: #fff;
font: 500 12.5px var(--sans);
cursor: pointer;
backdrop-filter: blur(6px);
}
.ctl:hover {
background: rgba(21, 18, 14, 0.92);
}
.ctl__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pink);
}
.ctl[aria-pressed="true"] .ctl__dot {
background: #7cff9a;
}
.flip {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: 3400% 100%; 
background-position: 0 0;
image-rendering: auto;
}
.flip.is-playing {
animation: flip 8.8s steps(33) infinite;
}
@keyframes flip {
to {
background-position: 100% 0;
}
}
.slot {
display: grid;
place-items: center;
text-align: center;
padding: 28px 18px;
border: 1.5px dashed var(--line-strong);
border-radius: var(--radius);
min-height: 260px;
text-decoration: none;
break-inside: avoid;
background: rgba(255, 253, 249, 0.4);
transition: background var(--t-fast);
}
.slot:hover {
background: rgba(255, 253, 249, 0.85);
}
.slot__title {
font-family: var(--serif);
font-size: 28px;
line-height: 1.05;
display: block;
margin: 8px 0 6px;
}
.phone {
position: relative;
border-radius: 28px;
overflow: hidden;
background: #fff;
box-shadow:
0 0 0 10px rgba(255, 253, 249, 0.9),
0 0 0 11px var(--line),
var(--card-shadow);
aspect-ratio: 4 / 5;
transition: aspect-ratio var(--t-reveal) var(--ease-out);
}
.phone video {
width: 100%;
height: 100%;
object-fit: cover;
}
.rail {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rail li {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 12.5px/1 var(--sans);
padding: 7px 10px 7px 8px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
color: var(--ink-mute);
background: none;
transition:
background var(--t-base),
color var(--t-base),
border-color var(--t-base);
}
.rail li::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
border: 1.5px solid currentColor;
box-sizing: border-box;
}
.rail li[data-state="active"] {
color: var(--ink);
border-color: var(--ink);
background: #fff;
}
.rail li[data-state="active"]::before {
border-color: var(--pink);
background: var(--pink);
animation: pulse 0.9s ease-in-out infinite;
}
.rail li[data-state="done"] {
color: #fff;
border-color: var(--ink);
background: var(--ink);
}
.rail li[data-state="done"]::before {
border-color: #7cff9a;
background: #7cff9a;
}
.rail li[data-state="fail"] {
color: #fff;
background: var(--fail);
border-color: var(--fail);
}
@keyframes pulse {
50% {
transform: scale(1.5);
opacity: 0.6;
}
}
.tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.tabs [role="tab"],
.pills button {
font: 500 14.5px var(--sans);
padding: 9px 15px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--line-strong);
background: transparent;
color: var(--ink-soft);
cursor: pointer;
min-height: 44px;
}
.tabs [role="tab"] span {
color: var(--ink-mute);
font-weight: 400;
margin-left: 4px;
}
.tabs [role="tab"][aria-selected="true"],
.pills button[aria-pressed="true"] {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.tabs [role="tab"][aria-selected="true"] span {
color: rgba(255, 255, 255, 0.72);
}
.tabs--small [role="tab"] {
font-size: 13px;
padding: 6px 12px;
min-height: 36px;
}
.pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.pills__label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-mute);
margin-right: 6px;
}
.code {
background: #0f0d0a;
border-radius: var(--radius);
border: 1px solid var(--ink-line);
overflow: hidden;
min-width: 0;
color: var(--ink-paper);
}
.code .tabs {
padding: 10px;
border-bottom: 1px solid var(--ink-line);
flex-wrap: nowrap;
overflow-x: auto;
}
.code .tabs [role="tab"] {
color: var(--ink-mute-light);
border-color: transparent;
font-size: 14px;
min-height: 40px;
padding: 8px 14px;
}
.code .tabs [role="tab"][aria-selected="true"] {
background: rgba(246, 239, 230, 0.12);
color: #fff;
}
.code__panel {
padding: 20px 22px;
overflow-x: auto;
}
.code__panel code {
color: #efe9df;
background: none;
}
.code__panel .c {
color: #a59c8d;
}
.qa {
padding: 22px;
}
.qa__title {
font: 500 14px var(--mono);
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.qa__list {
list-style: none;
margin: 0 0 12px;
padding: 0;
font-size: 14px;
color: var(--ink-soft);
}
.qa__list li {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 7px 0;
border-top: 1px solid var(--line);
}
.qa__list li:first-child {
border-top: 0;
}
.qa__list code {
font-size: 12px;
}
.tick,
.cross {
flex: none;
width: 16px;
height: 16px;
margin-top: 3px;
border-radius: 50%;
background: var(--pass);
position: relative;
}
.tick::after {
content: "";
position: absolute;
left: 5px;
top: 2px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.cross {
background: var(--fail);
}
.cross::before,
.cross::after {
content: "";
position: absolute;
left: 7px;
top: 3px;
width: 2px;
height: 10px;
background: #fff;
transform: rotate(45deg);
}
.cross::after {
transform: rotate(-45deg);
}
.qa__note {
font-size: 13px;
color: var(--ink-mute);
margin: 0;
}
.faq details {
border-top: 1px solid var(--line);
}
.faq details:last-child {
border-bottom: 1px solid var(--line);
}
.faq summary {
cursor: pointer;
font-family: var(--serif);
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.2;
letter-spacing: -0.01em;
padding: 18px 48px 18px 0;
list-style: none;
position: relative;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "+";
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
font-family: var(--sans);
font-size: 26px;
font-weight: 400;
color: var(--ink-mute);
transition: transform var(--t-base) var(--ease-out);
}
.faq details[open] summary::after {
transform: translateY(-50%) rotate(45deg);
}
.faq summary .badge {
margin-left: 8px;
position: relative;
top: -3px;
}
.faq__a {
padding: 0 0 20px;
color: var(--ink-soft);
max-width: 66ch;
}
.faq__a p:last-child {
margin-bottom: 0;
}
.input {
font: 400 16px var(--sans);
padding: 13px 16px;
min-height: 52px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--line-strong);
background: #fff;
color: var(--ink);
width: 100%;
min-width: 0;
}
.input::placeholder {
color: #776f64;
}
.input:focus-visible {
outline-offset: 1px;
}
.input[data-touched]:invalid {
border-color: var(--orange-text);
}
textarea.input {
border-radius: var(--radius-sm);
min-height: 96px;
resize: vertical;
}
select.input {
border-radius: var(--radius-sm);
}
.form-row {
display: grid;
gap: 10px;
}
@media (min-width: 760px) {
.form-row--3 {
grid-template-columns: 1fr 1fr auto;
}
.form-row--2 {
grid-template-columns: 1fr auto;
}
}
.form-status {
min-height: 1.5em;
margin: 12px 0 0;
font-size: 15px;
}
.label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-mute);
display: block;
margin-bottom: 6px;
}
.table-wrap {
overflow-x: auto;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--paper-white);
-webkit-overflow-scrolling: touch;
}
.table {
border-collapse: collapse;
width: 100%;
font-size: 14.5px;
min-width: 720px;
}
.table th,
.table td {
text-align: left;
vertical-align: top;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.table thead th {
font-family: var(--serif);
font-weight: 400;
font-size: 20px;
line-height: 1.1;
background: var(--paper-white);
}
.table tbody th {
font-weight: 600;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-mute);
position: sticky;
left: 0;
background: inherit;
min-width: 130px;
}
.table tbody tr:nth-child(even) {
background: var(--paper-deep);
}
.table tbody tr:nth-child(odd) {
background: var(--paper-white);
}
.table tbody tr:last-child th,
.table tbody tr:last-child td {
border-bottom: 0;
}
.table .us {
background: rgba(255, 217, 90, 0.18);
color: var(--ink);
font-weight: 500;
}
.table thead .us {
background: var(--yellow);
}
.table .group th {
background: var(--ink);
color: var(--ink-paper);
font-size: 12px;
padding: 8px 16px;
}
.table .group td {
background: var(--ink);
}
.toast {
position: fixed;
left: 50%;
bottom: 24px;
z-index: 300;
transform: translate(-50%, 20px);
background: var(--ink);
color: #fff;
padding: 12px 18px;
border-radius: var(--radius-pill);
font-size: 14.5px;
opacity: 0;
pointer-events: none;
transition:
opacity var(--t-base),
transform var(--t-base) var(--ease-out);
max-width: calc(100% - 32px);
}
.toast.is-on {
opacity: 1;
transform: translate(-50%, 0);
}
.facts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--line);
}
.facts li {
padding: 14px 12px 0 0;
font-size: 14px;
color: var(--ink-soft);
line-height: 1.3;
}
.facts strong {
display: block;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(34px, 3.6vw, 48px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 4px;
}
@media (min-width: 640px) {
.facts {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.wash {
position: absolute;
pointer-events: none;
width: 70vw;
max-width: 900px;
aspect-ratio: 1;
background:
radial-gradient(circle at 40% 40%, rgba(255, 217, 90, 0.55), transparent 55%),
radial-gradient(circle at 70% 60%, rgba(255, 122, 182, 0.45), transparent 55%),
radial-gradient(circle at 60% 30%, rgba(79, 123, 255, 0.4), transparent 60%);
filter: blur(40px);
opacity: 0.6;
animation: drift 48s ease-in-out infinite;
}
.footer {
border-top: 1px solid var(--line);
padding: 56px 0 32px;
font-size: 14.5px;
color: var(--ink-soft);
}
.footer__top {
display: grid;
gap: 32px;
}
@media (min-width: 900px) {
.footer__top {
grid-template-columns: 1.3fr repeat(4, 1fr);
}
}
.footer__brand p {
margin: 14px 0 0;
max-width: 34ch;
color: var(--ink-mute);
}
.footer__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 16px;
}
@media (min-width: 900px) {
.footer__cols {
display: contents;
}
}
.footer h2 {
font: 600 12.5px var(--sans);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 10px;
}
.footer ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer li a,
.footer li > span {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
text-decoration: none;
color: var(--ink-soft);
}
.footer li > span {
color: var(--ink-mute);
flex-wrap: wrap;
padding: 4px 0;
}
.footer li a:hover {
color: var(--ink);
text-decoration: underline;
}
.footer li .badge {
font-size: 9.5px;
padding: 3px 6px;
}
.footer__legal {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
font-size: 13px;
color: var(--ink-mute);
}
.footer__legal p {
margin: 0;
}
.table-hint {
margin: 0 0 8px;
text-align: right;
}
@media (min-width: 760px) {
.table-hint {
display: none;
}
}
.page-head {
position: relative;
padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 72px);
overflow: hidden;
}
.page-head .wash {
right: -20%;
top: -60%;
opacity: 0.45;
}
.page-head__inner {
position: relative;
max-width: 900px;
}
.page-head .display--xl {
font-size: clamp(42px, 6.4vw, 84px);
}
.page-head__cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero {
position: relative;
padding: clamp(28px, 6vw, 72px) 0 clamp(48px, 6vw, 80px);
overflow: hidden;
}
.hero__wash {
right: -18%;
top: -24%;
}
.hero__grid {
position: relative;
display: grid;
gap: 40px;
align-items: center;
}
@media (min-width: 960px) {
.hero__grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 56px;
min-height: calc(100vh - var(--nav-h) - 120px);
}
}
@media (max-width: 959px) {
.hero__grid {
gap: 0;
}
.hero__copy {
display: contents;
}
.hero__copy > .eyebrow { order: 1; }
.hero__copy > h1 { order: 2; }
.hero__copy > .lede { order: 3; }
.hero__grid > .hero__media { order: 4; margin: 4px 0 32px; }
.hero__copy > .gen { order: 5; }
.hero__copy > .hero__links { order: 6; }
.hero__copy > * { min-width: 0; max-width: 100%; }
}
.hero h1 {
margin-bottom: 0.32em;
}
.hero .lede {
margin-bottom: 24px;
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 22px 0 30px;
}
.hero__links {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
margin: 20px 0 0;
}
.hero__links a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--line-strong);
text-underline-offset: 3px;
}
.hero__links a:hover {
text-decoration-color: currentColor;
}
@media (max-width: 599px) {
.hero .eyebrow > span:first-child,
.hero .eyebrow > .sep,
.hero__links .sep {
display: none;
}
}
.hero__media {
margin: 0;
justify-self: center;
width: 100%;
display: grid;
justify-items: center;
}
.hero__media .phone {
width: min(100% - 22px, 400px);
}
.hero__media .phone[data-aspect="9:16"] {
width: min(100% - 22px, 300px);
aspect-ratio: 9 / 16;
}
.hero__media .phone[data-aspect="1:1"] {
width: min(100% - 22px, 430px);
aspect-ratio: 1;
}
.hero__media .phone[data-aspect="16:9"] {
width: calc(100% - 22px);
aspect-ratio: 16 / 9;
}
@media (max-width: 959px) {
.hero__media .phone {
width: min(100% - 22px, 320px);
}
.hero__media .phone[data-aspect="9:16"] {
width: min(100% - 22px, 250px);
}
.hero__media .phone[data-aspect="1:1"] {
width: min(100% - 22px, 340px);
}
}
.hero__aspects {
margin-top: 26px;
justify-content: center;
}
.hero__media .caption {
text-align: center;
max-width: 44ch;
}
.phone__ctl {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 5;
display: flex;
gap: 6px;
}
.phone__skip {
position: absolute;
right: 12px;
top: 12px;
z-index: 6;
}
.gen {
max-width: 600px;
}
.gen__bar {
display: flex;
gap: 6px;
padding: 6px;
border-radius: var(--radius-pill);
background: #fff;
border: 1.5px solid var(--line-strong);
box-shadow: var(--card-shadow-sm);
}
.gen__bar:focus-within {
border-color: var(--ink);
}
.gen__input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font: 400 16px var(--sans);
padding: 0 4px 0 14px;
color: var(--ink);
min-height: 48px;
}
.gen__input:focus-visible {
outline: none;
}
.gen__go {
flex: none;
min-height: 48px;
padding: 12px 20px;
}
.gen__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-top: 14px;
}
.gen__try {
border: 0;
background: none;
padding: 0;
cursor: pointer;
font-size: 14.5px;
color: var(--ink-soft);
}
.gen__note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin: 0 0 10px;
}
.gen__status {
margin: 12px 0 0;
}
.gen__status:empty {
margin: 0;
}
.gen__status strong {
color: var(--ink);
font-weight: 500;
}
.gen__after {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.gen-stage {
position: absolute;
inset: 0;
z-index: 4;
background: var(--paper);
overflow: hidden;
display: grid;
align-content: center;
padding: 7%;
font-size: clamp(11px, 1vw, 13px);
}
.gen-stage::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(-58deg, rgba(27, 24, 19, 0.05) 0 1px, transparent 1px 10px);
}
.gen-stage > * {
position: relative;
}
.gen-stage[data-step="storyboard"] {
align-content: start;
}
.g-label {
font: 500 11px/1 var(--mono);
color: var(--ink-mute);
margin: 0 0 10px;
display: flex;
justify-content: space-between;
gap: 8px;
}
.g-page {
background: #fff;
border-radius: 12px;
box-shadow: var(--card-shadow-sm);
overflow: hidden;
animation: pop-in 0.45s var(--ease-out) both;
}
.g-page__bar {
display: flex;
align-items: center;
gap: 5px;
padding: 8px 10px;
border-bottom: 1px solid var(--line);
font: 11px var(--mono);
color: var(--ink-mute);
white-space: nowrap;
overflow: hidden;
}
.g-page__bar i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--line-strong);
flex: none;
}
.g-page__bar span {
margin-left: 6px;
overflow: hidden;
text-overflow: ellipsis;
}
.g-page__body {
padding: 14px 12px;
display: grid;
gap: 7px;
filter: blur(0.6px);
}
.g-page__body b {
display: block;
height: 7px;
border-radius: 4px;
background: rgba(27, 24, 19, 0.1);
}
.g-page__body b:nth-child(1) {
width: 55%;
height: 12px;
background: rgba(27, 24, 19, 0.2);
}
.g-page__body b:nth-child(3) {
width: 80%;
}
.g-page__body b:nth-child(5) {
width: 68%;
}
.g-quotes {
display: grid;
gap: 7px;
margin-top: 12px;
}
.g-quote {
background: #fff;
border-radius: 10px;
padding: 8px 10px;
box-shadow: 0 6px 18px rgba(30, 20, 10, 0.1);
border-left: 3px solid var(--blue);
animation: pop-in 0.4s var(--ease-spring) both;
line-height: 1.35;
}
.g-quote small {
display: block;
font: 10px var(--mono);
color: var(--ink-mute);
margin-top: 3px;
}
.g-brand {
display: grid;
gap: 12px;
justify-items: center;
text-align: center;
}
.g-swatches {
display: flex;
gap: 8px;
}
.g-swatches i {
width: 38px;
height: 38px;
border-radius: 50%;
box-shadow: 0 6px 14px rgba(30, 20, 10, 0.15);
animation: pop-in 0.4s var(--ease-spring) both;
}
.g-chip {
font: 500 11px var(--mono);
background: var(--ink);
color: #fff;
padding: 5px 9px;
border-radius: 6px;
}
.g-logo {
font-family: var(--serif);
font-size: 2.2em;
line-height: 1;
}
.g-logo em {
color: var(--blue-text);
}
.g-film {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 4px;
}
.g-film li {
display: grid;
grid-template-columns: 2.6em 1fr;
gap: 6px;
align-items: baseline;
background: #fff;
border-radius: 7px;
padding: 4px 8px;
box-shadow: 0 3px 10px rgba(30, 20, 10, 0.06);
animation: pop-in 0.25s var(--ease-out) both;
white-space: nowrap;
overflow: hidden;
}
.g-film li span {
overflow: hidden;
text-overflow: ellipsis;
}
.g-film li code {
font-size: 10px;
padding: 0;
background: none;
color: var(--ink-mute);
}
.g-film li em {
font-style: normal;
color: var(--ink-mute);
font-size: 10px;
font-family: var(--mono);
margin-right: 4px;
}
.g-film li.is-bad {
background: var(--fail-bg);
color: var(--fail-text);
}
.g-stills {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.g-stills img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 5px;
animation: pop-in 0.3s var(--ease-spring) both;
}
.g-render {
display: grid;
gap: 10px;
}
.g-render img {
border-radius: 10px;
box-shadow: var(--card-shadow-sm);
width: 70%;
margin-inline: auto;
}
.g-bar {
height: 6px;
border-radius: 3px;
background: rgba(27, 24, 19, 0.1);
overflow: hidden;
}
.g-bar i {
display: block;
height: 100%;
width: 0;
background: var(--ink);
transition: width linear;
}
.g-qa {
background: #fff;
border-radius: 12px;
padding: 12px;
box-shadow: var(--card-shadow-sm);
}
.g-qa ul {
list-style: none;
margin: 0;
padding: 0;
}
.g-qa li {
display: flex;
gap: 8px;
padding: 4px 0;
border-top: 1px solid var(--line);
animation: pop-in 0.25s var(--ease-out) both;
}
.g-qa li:first-child {
border-top: 0;
}
.g-qa .tick {
width: 14px;
height: 14px;
margin-top: 1px;
}
.g-qa .tick::after {
left: 4px;
top: 1px;
}
.wall {
columns: 2;
column-gap: 12px;
}
.wall > * {
margin-bottom: 12px;
display: block;
}
@media (min-width: 760px) {
.wall {
columns: 3;
column-gap: 20px;
}
.wall > * {
margin-bottom: 20px;
}
}
.wall--home .wall__col {
display: contents;
}
.wall--home .wall__col > * {
margin-bottom: 12px;
break-inside: avoid;
}
@media (max-width: 759px) {
.wall--home .slot {
display: none;
}
}
@media (min-width: 760px) {
.wall--home {
columns: auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
.wall--home .wall__col {
display: flex;
flex-direction: column;
gap: 20px;
}
.wall--home .wall__col > * {
margin: 0;
}
.wall--home .slot {
flex: 1;
}
}
.wall--full {
columns: 1;
}
@media (min-width: 560px) {
.wall--full {
columns: 2;
}
}
@media (min-width: 1000px) {
.wall--full {
columns: 3;
}
}
@media (max-width: 559px) {
.wall .print {
padding: 7px 7px 0;
}
.wall .print__title {
font-size: 17px;
}
.wall .print__meta {
font-size: 12.5px;
}
.wall .slot {
min-height: 200px;
padding: 18px 10px;
}
.wall .slot__title {
font-size: 22px;
}
}
.wall__empty {
padding: 40px 20px;
text-align: center;
border: 1.5px dashed var(--line-strong);
border-radius: var(--radius);
color: var(--ink-soft);
}
.filters {
display: grid;
gap: 12px;
margin-bottom: 28px;
}
@media (min-width: 900px) {
.filters {
display: flex;
gap: 28px;
}
}
.style-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(250px, 78%);
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px 4px 18px;
margin: 0 -4px;
-webkit-overflow-scrolling: touch;
}
.style-row > * {
scroll-snap-align: start;
}
@media (min-width: 760px) {
.style-row {
grid-auto-flow: row;
grid-template-columns: repeat(2, 1fr);
overflow: visible;
}
}
@media (min-width: 1100px) {
.style-row {
grid-template-columns: repeat(4, 1fr);
}
}
.style-card {
display: flex;
flex-direction: column;
padding: 12px 12px 20px;
border-radius: var(--radius);
background: var(--paper-white);
border: 1px solid var(--line);
box-shadow: var(--card-shadow-sm);
}
.style-card__frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 10px;
overflow: hidden;
background: var(--paper-deep);
margin-bottom: 16px;
}
.style-card__frame img,
.style-card__frame video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.style-card__frame video {
opacity: 0;
transition: opacity var(--t-base);
}
.style-card__frame.is-playing video {
opacity: 1;
}
.style-card__body {
padding: 0 6px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.style-card h3 {
font-family: var(--serif);
font-size: 30px;
line-height: 1;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.style-card h3.sans {
font-family: var(--sans);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
font-size: 24px;
}
.style-card p {
margin: 0;
font-size: 15px;
color: var(--ink-soft);
}
.style-card .spec {
font: 12px/1.5 var(--mono);
color: var(--ink-mute);
}
.style-card .btn {
margin-top: auto;
align-self: start;
}
.style-card--soon {
background: rgba(255, 253, 249, 0.5);
border-style: dashed;
box-shadow: none;
}
@media (min-width: 900px) {
.grid-2 > .style-card--soon .style-card__frame {
aspect-ratio: 16 / 10;
}
}
.concept {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 16px;
text-align: left;
}
.concept--mono {
background: #14161a;
color: #d8f5c6;
font: 500 15px/1.35 var(--mono);
}
.concept--mono .cursor {
display: inline-block;
width: 0.55em;
height: 1.05em;
background: #d8f5c6;
vertical-align: text-bottom;
animation: blink 1s steps(1) infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
.concept--brand {
background:
repeating-linear-gradient(45deg, rgba(27, 24, 19, 0.05) 0 8px, transparent 8px 16px),
var(--paper-deep);
color: var(--ink-soft);
text-align: center;
font-family: var(--serif);
font-size: 26px;
line-height: 1.1;
}
.concept__tag {
position: absolute;
left: 10px;
top: 10px;
font: 600 10px/1 var(--sans);
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.9);
color: var(--ink);
padding: 5px 7px;
border-radius: 5px;
}
.strip-words {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
font-family: var(--serif);
font-size: clamp(26px, 3.4vw, 44px);
line-height: 1.1;
margin: 0 0 clamp(28px, 4vw, 48px);
padding: 0;
list-style: none;
}
.strip-words li + li::before {
content: "→";
font-family: var(--sans);
font-size: 0.6em;
color: var(--ink-mute);
margin-right: 14px;
position: relative;
top: -0.1em;
}
.strip-words li:nth-child(even) {
font-style: italic;
}
.stages {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 14px;
}
@media (min-width: 720px) {
.stages {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1040px) {
.stages {
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
}
.stage {
background: var(--card);
border-radius: var(--radius);
padding: 20px 22px 20px;
box-shadow: var(--card-shadow-sm);
display: flex;
flex-direction: column;
gap: 8px;
}
.stage__vis {
height: 112px;
border-radius: 10px;
background: var(--paper-deep);
margin-bottom: 8px;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
padding: 10px;
}
.stage__head {
display: flex;
align-items: baseline;
gap: 12px;
}
.stage__n {
font-family: var(--serif);
font-size: 28px;
font-style: italic;
color: var(--pink-text);
line-height: 1;
}
.stage h3 {
font-family: var(--serif);
font-size: 30px;
letter-spacing: -0.01em;
line-height: 1;
}
.stage p {
margin: 0;
font-size: 15px;
color: var(--ink-soft);
flex: 1;
}
.stage__out {
font-size: 12px;
color: var(--ink-mute);
background: rgba(27, 24, 19, 0.05);
padding: 6px 9px;
border-radius: 8px;
margin-top: 6px;
align-self: start;
}
.vis-quote {
background: #fff;
border-radius: 8px;
padding: 8px 10px;
font-size: 12.5px;
line-height: 1.35;
border-left: 3px solid var(--blue);
width: 100%;
}
.vis-quote small {
display: block;
font: 10px var(--mono);
color: var(--ink-mute);
margin-top: 4px;
}
.vis-swatches {
display: flex;
gap: 6px;
}
.vis-swatches i {
width: 30px;
height: 30px;
border-radius: 50%;
}
.vis-json {
font: 11px/1.45 var(--mono);
color: var(--ink-soft);
white-space: pre;
justify-self: start;
align-self: start;
}
.vis-json b {
color: var(--blue-text);
font-weight: 500;
}
.vis-stills {
display: flex;
gap: 6px;
height: 100%;
}
.vis-stills img {
height: 100%;
width: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 6px;
}
.vis-aspects {
display: flex;
align-items: flex-end;
gap: 6px;
height: 100%;
}
.vis-aspects i {
display: block;
background: linear-gradient(160deg, var(--g5), var(--g1) 60%, var(--g2));
border-radius: 4px;
height: 70px;
}
.vis-aspects i:nth-child(1) {
aspect-ratio: 4 / 5;
}
.vis-aspects i:nth-child(2) {
aspect-ratio: 9 / 16;
height: 86px;
}
.vis-aspects i:nth-child(3) {
aspect-ratio: 1;
height: 60px;
}
.vis-aspects i:nth-child(4) {
aspect-ratio: 16 / 9;
height: 44px;
}
.vis-sheet {
position: absolute;
inset: 0;
background-size: 200% auto;
background-position: 10% 0;
}
.receipt {
display: grid;
gap: 18px;
align-items: stretch;
position: relative;
}
@media (min-width: 900px) {
.receipt {
grid-template-columns: 1fr 64px 1fr;
gap: 0;
}
}
.receipt__pane {
padding: 22px;
border-radius: var(--radius);
background: var(--paper-white);
border: 1px solid var(--line);
box-shadow: var(--card-shadow-sm);
min-width: 0;
}
.receipt__label {
font: 500 12px var(--mono);
color: var(--ink-mute);
margin: 0 0 12px;
display: flex;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.receipt__page {
font-size: 15px;
color: var(--ink-soft);
line-height: 1.6;
}
.receipt__page p {
margin: 0 0 0.7em;
}
@media (min-width: 900px) {
.receipt__page::after {
content: "";
display: block;
height: 132px;
margin-top: 22px;
background:
linear-gradient(to right, var(--paper-white) 0 100%) right 0 top 66px / 34% 10px no-repeat,
linear-gradient(to right, var(--paper-white) 0 100%) right 0 top 110px / 52% 10px no-repeat,
repeating-linear-gradient(to bottom, var(--line) 0 10px, transparent 10px 22px);
border-radius: 2px;
opacity: 0.9;
}
}
.receipt mark {
background: rgba(255, 217, 90, 0.7);
color: var(--ink);
padding: 0.05em 0.15em;
border-radius: 3px;
}
.receipt__link {
display: grid;
place-items: center;
color: var(--ink-mute);
}
.receipt__link svg {
width: 64px;
height: 24px;
}
@media (max-width: 899px) {
.receipt__link svg {
transform: rotate(90deg);
}
}
.receipt__scene {
aspect-ratio: 4 / 5;
max-width: 300px;
margin: 0 auto 14px;
border-radius: 10px;
overflow: hidden;
}
.receipt__scene img {
width: 100%;
height: 100%;
object-fit: cover;
}
.receipt__json {
font: 12px/1.55 var(--mono);
color: var(--ink-soft);
background: rgba(27, 24, 19, 0.04);
border-radius: 8px;
padding: 10px 12px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.grounded__qa {
display: grid;
gap: 18px;
margin-top: 28px;
align-items: start;
}
@media (min-width: 900px) {
.grounded__qa {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
}
.checklist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.checklist li {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 16px;
}
.checklist .tick {
margin-top: 4px;
}
.pg {
display: grid;
gap: 18px;
align-items: start;
}
@media (min-width: 1040px) {
.pg {
grid-template-columns: 300px minmax(0, 1fr) 300px;
}
}
.pg__controls {
padding: 20px;
display: grid;
gap: 16px;
}
.field {
display: grid;
gap: 7px;
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.field > label,
.field legend {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-mute);
display: flex;
justify-content: space-between;
padding: 0;
margin-bottom: 7px;
}
.field__count {
font-family: var(--mono);
text-transform: none;
letter-spacing: 0;
}
.field__count.is-max {
color: var(--orange-text);
}
.field input[type="text"],
.field select,
.field textarea {
font: 400 16px var(--sans);
padding: 11px 13px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--line-strong);
background: #fff;
color: var(--ink);
width: 100%;
min-height: 46px;
}
.field input[readonly],
.field textarea[readonly] {
background: rgba(255, 255, 255, 0.6);
color: var(--ink-soft);
}
.seg {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.seg label {
font: 500 14px var(--sans);
color: var(--ink-soft);
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-pill);
padding: 8px 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
position: relative;
}
.seg label:has(input:checked) {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.seg label:has(input:focus-visible) {
outline: 3px solid var(--blue);
outline-offset: 2px;
}
.seg input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.field--row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
}
.check {
font-size: 14px;
color: var(--ink-soft);
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
min-height: 44px;
}
.check input {
width: 18px;
height: 18px;
accent-color: var(--ink);
}
.pg__stage {
display: grid;
place-items: center;
min-height: 440px;
gap: 14px;
}
.pg__note {
text-align: center;
margin: 0;
}
.pg__json {
padding: 16px;
min-width: 0;
}
.pg__json-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin: 0 0 10px;
}
.pg__json-title {
font: 500 12px var(--mono);
color: var(--ink-mute);
margin: 0;
}
.pg__json pre {
font: 12px/1.55 var(--mono);
white-space: pre-wrap;
word-break: break-word;
color: var(--ink-soft);
max-height: 360px;
overflow: auto;
}
.pg__json .micro {
margin: 10px 0 0;
}
.pg__quad {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
align-items: end;
width: 100%;
}
@media (min-width: 760px) {
.pg__quad {
grid-template-columns: 0.8fr 0.55fr 0.8fr 1.3fr;
}
}
.pg__quad figure {
margin: 0;
display: grid;
gap: 6px;
justify-items: center;
}
.pg__quad figcaption {
font: 500 11px var(--mono);
color: var(--ink-mute);
}
.pg__quad .scene {
max-width: none;
border-radius: 10px;
box-shadow: var(--card-shadow-sm);
}
.scene {
position: relative;
overflow: hidden;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
background: var(--paper);
width: 100%;
max-width: 400px;
aspect-ratio: 4 / 5;
--safe-t: 8%;
--safe-r: 7%;
--safe-b: 10%;
--safe-l: 7%;
--accent: var(--blue-text);
--u: 4px;
transition: max-width 0.4s var(--ease-out);
isolation: isolate;
container-type: inline-size;
}
.scene[data-aspect="9:16"] {
max-width: 300px;
aspect-ratio: 9 / 16;
--safe-t: 14%;
--safe-b: 20%;
}
.scene[data-aspect="1:1"] {
max-width: 420px;
aspect-ratio: 1;
--safe-t: 8%;
--safe-r: 8%;
--safe-b: 8%;
--safe-l: 8%;
}
.scene[data-aspect="16:9"] {
max-width: 100%;
aspect-ratio: 16 / 9;
--safe-r: 6%;
--safe-l: 6%;
}
.scene::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(-58deg, rgba(27, 24, 19, 0.05) 0 1px, transparent 1px 10px);
z-index: 0;
}
.scene__grain {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
transition: opacity 0.5s var(--ease-out);
background:
radial-gradient(60% 55% at 28% 30%, var(--g4) 0%, transparent 70%),
radial-gradient(55% 60% at 72% 25%, var(--g2) 0%, transparent 70%),
radial-gradient(70% 70% at 40% 75%, var(--g1) 0%, transparent 70%),
radial-gradient(60% 60% at 85% 80%, var(--g3) 0%, transparent 70%),
linear-gradient(160deg, var(--g5), var(--g1));
}
.scene__grain::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.22;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0.9 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.scene[data-bg="gradient"] .scene__grain,
.scene[data-bg="corner"] .scene__grain {
opacity: 1;
}
.scene[data-bg="corner"] .scene__grain {
-webkit-mask-image: radial-gradient(85% 85% at 100% 0%, #000 45%, transparent 72%);
mask-image: radial-gradient(85% 85% at 100% 0%, #000 45%, transparent 72%);
}
.scene__blocks {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.scene__blocks i {
position: absolute;
display: block;
}
.scene[data-style="punch-sans"] .scene__grain {
opacity: 0 !important;
}
.scene[data-style="punch-sans"][data-bg="gradient"] .scene__blocks,
.scene[data-style="punch-sans"][data-bg="corner"] .scene__blocks {
opacity: 1;
}
.scene[data-style="punch-sans"][data-bg="gradient"] .scene__blocks i:nth-child(1) {
inset: 0 0 45% 0;
background: var(--g4);
}
.scene[data-style="punch-sans"][data-bg="gradient"] .scene__blocks i:nth-child(2) {
inset: 55% 0 0 0;
background: var(--g5);
}
.scene[data-style="punch-sans"][data-bg="gradient"] .scene__blocks i:nth-child(3) {
inset: 0 0 0 0;
background: transparent;
}
.scene[data-style="punch-sans"][data-bg="corner"] .scene__blocks i:nth-child(1) {
top: 0;
right: 0;
width: 42%;
height: 26%;
background: var(--g2);
}
.scene[data-style="punch-sans"][data-bg="corner"] .scene__blocks i:nth-child(2) {
top: 0;
right: 21%;
width: 21%;
height: 26%;
background: var(--g1);
}
.scene__safe {
position: absolute;
z-index: 6;
top: var(--safe-t);
right: var(--safe-r);
bottom: var(--safe-b);
left: var(--safe-l);
border: 1.5px dashed rgba(47, 91, 255, 0.7);
border-radius: 6px;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.scene.show-safe .scene__safe {
opacity: 1;
}
.scene__box {
position: absolute;
z-index: 3;
top: var(--safe-t);
right: var(--safe-r);
bottom: var(--safe-b);
left: var(--safe-l);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5cqw;
text-align: center;
}
.scene__text {
margin: 0;
font-family: var(--serif);
letter-spacing: -0.02em;
line-height: 1.04;
color: var(--ink);
width: 100%;
text-wrap: balance;
}
.scene[data-style="punch-sans"] .scene__text {
font-family: var(--sans);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.95;
}
.scene[data-type]:not([data-type="headline"]) .scene__text {
flex: none;
}
.scene[data-bg="gradient"][data-style="kinetic-serif"] .scene__text {
color: #fff;
}
.scene__text .w {
display: inline-block;
white-space: pre;
opacity: 0;
transform: translateY(0.25em) scale(0.86);
animation: word-in-scene var(--dur, 0.47s) var(--ease-spring) forwards;
animation-delay: calc(var(--i) * var(--stagger, 133ms));
}
.scene__text .w--accent {
font-style: italic;
color: var(--accent);
animation-delay: calc(var(--i) * var(--stagger, 133ms) + var(--lag, 100ms));
}
.scene[data-style="punch-sans"] .scene__text .w--accent {
font-style: normal;
}
.scene[data-bg="gradient"][data-style="kinetic-serif"] .scene__text .w--accent {
color: #fff6c2;
}
@keyframes word-in-scene {
0% {
opacity: 0;
transform: translateY(0.25em) scale(var(--from, 0.86));
}
60% {
opacity: 1;
transform: translateY(-0.03em) scale(1.05);
}
100% {
opacity: 1;
transform: none;
}
}
.scene .pop {
opacity: 0;
animation: pop-in 0.45s var(--ease-spring) forwards;
animation-delay: var(--d, 0.4s);
}
.scene.no-anim .w,
.scene.no-anim .pop {
animation: none;
opacity: 1;
transform: none;
}
.s-bubble {
max-width: 82%;
padding: 2.6cqw 3.6cqw;
border-radius: 4cqw;
font: 400 3.6cqw/1.3 var(--sans);
text-align: left;
box-shadow: 0 1.5cqw 4cqw rgba(30, 20, 10, 0.12);
}
.s-bubble small {
display: block;
font-size: 2.6cqw;
opacity: 0.7;
margin-bottom: 0.6cqw;
}
.s-bubble--in {
align-self: flex-start;
background: #fff;
color: var(--ink);
}
.s-bubble--out {
align-self: flex-end;
background: var(--blue);
color: #fff;
}
.scene[data-style="punch-sans"] .s-bubble {
border-radius: 1.6cqw;
box-shadow: none;
}
.s-chat {
width: 100%;
display: flex;
flex-direction: column;
gap: 2.6cqw;
}
.s-card {
width: 90%;
background: rgba(255, 255, 255, 0.9);
border-radius: 3cqw;
padding: 3.2cqw 3.6cqw;
text-align: left;
box-shadow: 0 2cqw 6cqw rgba(30, 20, 10, 0.12);
font: 400 3.3cqw/1.35 var(--sans);
color: var(--ink);
}
.scene[data-style="punch-sans"] .s-card {
background: #fff;
border-radius: 1.2cqw;
box-shadow: none;
}
.scene[data-aspect="16:9"]:is([data-type="chat_reply"], [data-type="checklist_stack"], [data-type="stats_block_typing"]) .scene__box {
flex-direction: row;
gap: 4cqw;
text-align: left;
}
.scene[data-aspect="16:9"]:is([data-type="chat_reply"], [data-type="checklist_stack"], [data-type="stats_block_typing"]) .scene__text {
flex: 0 0 44%;
width: 44%;
}
.scene[data-aspect="16:9"] .s-chat,
.scene[data-aspect="16:9"] .s-card {
flex: 1 1 0;
min-width: 0;
}
.scene[data-aspect="16:9"] .s-chat { gap: 1.6cqw; }
.scene[data-aspect="16:9"] .s-bubble { padding: 1.5cqw 2.1cqw; border-radius: 2.2cqw; font-size: 2.1cqw; }
.scene[data-aspect="16:9"] .s-bubble small { font-size: 1.5cqw; margin-bottom: 0.3cqw; }
.scene[data-aspect="16:9"] .s-card { padding: 2cqw 2.2cqw; border-radius: 1.8cqw; font-size: 2cqw; }
.scene[data-aspect="16:9"] .s-card small { font-size: 1.5cqw; margin-bottom: 0.8cqw; }
.scene[data-aspect="16:9"] .s-row { gap: 1.4cqw; padding: 0.9cqw 0; }
.scene[data-aspect="16:9"] .s-row i { width: 1.9cqw; height: 1.9cqw; }
.scene[data-aspect="16:9"] .s-row b { font-size: 1.3cqw; padding: 0.4cqw 1cqw; }
.s-card small {
display: block;
font: 600 2.4cqw var(--sans);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 1.4cqw;
}
.s-row {
display: flex;
align-items: center;
gap: 2.4cqw;
padding: 1.6cqw 0;
border-top: 1px solid var(--line);
}
.s-row:first-of-type {
border-top: 0;
}
.s-row i {
flex: none;
width: 3.2cqw;
height: 3.2cqw;
border-radius: 50%;
background: var(--pass);
}
.s-row b {
margin-left: auto;
font: 600 2.2cqw var(--sans);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pass-text);
background: var(--pass-bg);
border-radius: 99px;
padding: 0.6cqw 1.6cqw;
}
.s-stat::before {
content: "• ";
color: var(--accent);
}
.s-cta {
display: inline-flex;
align-items: center;
gap: 2cqw;
background: var(--ink);
color: #fff;
font: 500 4cqw var(--sans);
padding: 3cqw 6cqw;
border-radius: 99px;
}
.scene[data-style="punch-sans"] .s-cta {
border-radius: 1.4cqw;
font-weight: 700;
text-transform: uppercase;
}
.s-url {
font: 400 2.8cqw var(--sans);
color: var(--ink-mute);
}
.s-logo {
font-family: var(--serif);
font-size: 5cqw;
}
.scene[data-style="punch-sans"] .s-logo {
font-family: var(--sans);
font-weight: 700;
}
.section--ink {
background: var(--ink-bg);
color: var(--ink-paper);
}
.section--ink::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(-58deg, rgba(246, 239, 230, 0.04) 0 1px, transparent 1px 11px);
}
.section--ink > * {
position: relative;
}
.section--ink .lede,
.section--ink .body {
color: rgba(246, 239, 230, 0.82);
}
.section--ink code {
background: rgba(246, 239, 230, 0.1);
}
.section--ink pre code,
.code pre code,
.cmd pre code {
background: none;
padding: 0;
}
.section--ink .micro,
.section--ink .caption {
color: var(--ink-mute-light);
}
.section--ink a:not(.btn) {
color: var(--ink-paper);
}
.section--ink .accent--yellow {
color: var(--yellow);
}
.dev {
display: grid;
gap: 32px;
align-items: start;
}
@media (min-width: 1000px) {
.dev {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
}
}
.dev__list {
margin: 0 0 28px;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
font-size: 15px;
color: rgba(246, 239, 230, 0.82);
}
.dev__list li {
padding-left: 18px;
position: relative;
}
.dev__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--yellow);
}
.clients {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0 0 28px;
padding: 0;
}
.clients li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--ink-line);
border-radius: var(--radius-pill);
font-size: 14px;
}
.dev__right {
display: grid;
gap: 16px;
min-width: 0;
}
.chat {
background: #0f0d0a;
border: 1px solid var(--ink-line);
border-radius: var(--radius);
overflow: hidden;
}
.chat__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--ink-line);
font: 500 12.5px var(--mono);
color: var(--ink-mute-light);
}
.chat__head .ctl {
background: rgba(246, 239, 230, 0.1);
}
.chat__log {
list-style: none;
margin: 0;
padding: 16px;
display: grid;
gap: 10px;
min-height: 340px;
align-content: start;
font-size: 14px;
}
.msg {
max-width: 92%;
animation: pop-in 0.3s var(--ease-out) both;
}
.msg--user {
justify-self: end;
background: rgba(246, 239, 230, 0.12);
border-radius: 14px 14px 4px 14px;
padding: 9px 13px;
}
.msg--assistant {
color: rgba(246, 239, 230, 0.9);
padding: 2px 0;
}
.msg--tool {
font: 12.5px/1.5 var(--mono);
color: #bfe3ff;
border-left: 2px solid rgba(154, 215, 255, 0.5);
padding: 4px 10px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.msg--progress {
font: 12.5px var(--mono);
color: var(--ink-mute-light);
}
.msg--progress .bar {
display: flex;
gap: 4px;
margin-top: 6px;
flex-wrap: wrap;
}
.msg--progress .bar span {
padding: 3px 7px;
border-radius: 5px;
background: rgba(246, 239, 230, 0.08);
}
.msg--progress .bar span.done {
background: rgba(124, 255, 154, 0.16);
color: #9dffb5;
}
.msg--result {
background: rgba(124, 255, 154, 0.08);
border: 1px solid rgba(124, 255, 154, 0.25);
border-radius: 12px;
padding: 10px 13px;
font-size: 14px;
}
.msg--result code {
color: #9dffb5;
}
.caret::after {
content: "▍";
animation: blink 0.9s steps(1) infinite;
margin-left: 1px;
}
.compare-note {
margin-top: 14px;
}
.cats {
margin-bottom: 24px;
}
.tpl-grid {
display: grid;
gap: 16px;
}
@media (min-width: 760px) {
.tpl-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.tpl-grid {
grid-template-columns: 1.4fr 1fr 1fr;
}
.tpl-grid--full {
grid-template-columns: repeat(3, 1fr);
}
}
.tpl {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px;
border-radius: var(--radius);
background: var(--paper-white);
border: 1px solid var(--line);
box-shadow: var(--card-shadow-sm);
min-width: 0;
}
.tpl--real {
grid-row: span 2;
}
.tpl--soon {
background: rgba(255, 253, 249, 0.45);
border-style: dashed;
box-shadow: none;
}
.tpl__top {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.tpl h3 {
font-family: var(--serif);
font-size: 28px;
line-height: 1.05;
}
.tpl p {
margin: 0;
font-size: 15px;
color: var(--ink-soft);
}
.tpl__preview {
display: grid;
gap: 14px;
}
@media (min-width: 520px) {
.tpl__preview {
grid-template-columns: 0.8fr 1fr;
align-items: start;
}
}
.tpl__still {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: var(--card-shadow-sm);
}
.tpl__still img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tpl__form {
display: grid;
gap: 10px;
}
.tpl__form .field > label {
margin-bottom: 0;
}
.tpl__form input[type="text"] {
min-height: 40px;
padding: 8px 11px;
font-size: 14.5px;
}
.tpl__soon-vis {
height: 120px;
border-radius: 10px;
background: var(--paper-deep);
display: grid;
place-items: center;
color: var(--ink-mute);
font-family: var(--serif);
font-size: 22px;
font-style: italic;
position: relative;
overflow: hidden;
}
.tpl .cmd {
margin-top: auto;
}
.plans-mini {
display: grid;
gap: 14px;
}
@media (min-width: 900px) {
.plans-mini {
grid-template-columns: repeat(3, 1fr);
}
}
.tier {
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px;
border-radius: var(--radius);
background: var(--paper-white);
border: 1px solid var(--line);
box-shadow: var(--card-shadow-sm);
min-width: 0;
position: relative;
}
.tier--self {
background: var(--paper-white);
border: 2px solid var(--ink);
}
.tier--highlight {
border: 1.5px dashed var(--ink-mute);
}
.tier__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tier h3 {
font-family: var(--serif);
font-size: 30px;
line-height: 1;
}
.tier__price {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
min-height: 52px;
}
.tier__price .num {
font-size: 48px;
}
.tier__price span {
font-size: 14px;
color: var(--ink-mute);
}
.tier__aud {
font-size: 14.5px;
color: var(--ink-soft);
margin: 0;
}
.tier__meter {
font-size: 14px;
padding: 8px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin: 0;
}
.tier__meter strong {
font-weight: 600;
}
.tier ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 7px;
font-size: 14.5px;
color: var(--ink-soft);
}
.tier li {
padding-left: 20px;
position: relative;
}
.tier li::before {
content: "";
position: absolute;
left: 2px;
top: 0.45em;
width: 9px;
height: 5px;
border: solid var(--ink);
border-width: 0 0 1.5px 1.5px;
transform: rotate(-45deg);
}
.tier .btn {
margin-top: auto;
}
.tier__flag {
position: absolute;
top: -12px;
left: 20px;
}
.tier__flag.badge--outline {
background: var(--paper);
}
.tiers {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(268px, 82%);
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 16px 4px 20px;
margin: 0 -4px;
}
.tiers > * {
scroll-snap-align: start;
}
@media (min-width: 760px) {
.tiers {
grid-auto-columns: minmax(268px, 44%);
}
}
@media (min-width: 1180px) {
.tiers {
grid-auto-flow: row;
grid-template-columns: repeat(6, minmax(0, 1fr));
overflow: visible;
gap: 12px;
}
.tiers .tier {
padding: 18px;
}
.tiers .tier h3 {
font-size: 26px;
}
.tiers .tier__price .num {
font-size: 40px;
}
}
.indicative {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--ink-mute);
}
.indicative::before {
content: "*";
font-family: var(--serif);
font-size: 18px;
line-height: 0.6;
color: var(--pink-text);
}
.period {
display: inline-flex;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-pill);
padding: 3px;
background: var(--paper-white);
}
.period button {
border: 0;
background: transparent;
border-radius: var(--radius-pill);
padding: 8px 16px;
min-height: 40px;
cursor: pointer;
font: 500 14.5px var(--sans);
color: var(--ink-soft);
}
.period button[aria-pressed="true"] {
background: var(--ink);
color: #fff;
}
.pricing-bar {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
align-items: center;
margin-bottom: 8px;
}
.est {
display: grid;
gap: 18px;
}
@media (min-width: 960px) {
.est {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 28px;
}
}
.est__controls {
padding: 24px;
display: grid;
gap: 22px;
}
.range {
display: grid;
gap: 8px;
}
.range__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}
.range__head label {
font-weight: 500;
}
.range output {
font-family: var(--serif);
font-size: 34px;
line-height: 1;
min-width: 2ch;
text-align: right;
}
.range input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 44px;
background: transparent;
cursor: pointer;
}
.range input[type="range"]::-webkit-slider-runnable-track {
height: 2px;
background: var(--ink);
}
.range input[type="range"]::-moz-range-track {
height: 2px;
background: var(--ink);
}
.range input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--paper-white);
border: 2px solid var(--ink);
margin-top: -11px;
box-shadow: 0 3px 10px rgba(30, 20, 10, 0.2);
}
.range input[type="range"]::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--paper-white);
border: 2px solid var(--ink);
}
.range__scale {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--ink-mute);
}
.est__out {
padding: 24px;
display: grid;
gap: 16px;
align-content: start;
background: var(--ink-bg);
color: var(--ink-paper);
border-radius: var(--radius);
}
.est__out .num {
font-size: clamp(56px, 7vw, 84px);
}
.est__row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-top: 1px solid var(--ink-line);
font-size: 15px;
}
.est__row span:first-child {
color: var(--ink-mute-light);
}
.est__tier {
font-family: var(--serif);
font-size: 34px;
line-height: 1;
}
.est__out .micro {
color: var(--ink-mute-light);
margin: 0;
}
.receipts {
display: grid;
gap: 14px;
}
@media (min-width: 900px) {
.receipts {
grid-template-columns: repeat(3, 1fr);
}
}
.receipt-card {
padding: 20px 22px;
background: var(--paper-white);
border: 1px solid var(--line);
border-radius: 6px;
font: 13.5px/1.6 var(--mono);
color: var(--ink-soft);
position: relative;
-webkit-mask:
radial-gradient(6px at 50% 0, transparent 98%, #000) 50% 0 / 16px 51% repeat-x,
radial-gradient(6px at 50% 100%, transparent 98%, #000) 50% 100% / 16px 51% repeat-x;
mask:
radial-gradient(6px at 50% 0, transparent 98%, #000) 50% 0 / 16px 51% repeat-x,
radial-gradient(6px at 50% 100%, transparent 98%, #000) 50% 100% / 16px 51% repeat-x;
}
.receipt-card h3 {
font: 600 12px var(--sans);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 6px 0 12px;
}
.receipt-card .line {
display: flex;
justify-content: space-between;
gap: 10px;
border-bottom: 1px dashed var(--line-strong);
padding: 4px 0;
}
.receipt-card .total {
display: flex;
justify-content: space-between;
padding-top: 8px;
font-weight: 600;
color: var(--ink);
}
.proof {
display: grid;
gap: 24px;
align-items: center;
}
@media (min-width: 900px) {
.proof {
grid-template-columns: 0.9fr 1.1fr;
gap: 56px;
}
}
.proof__quote {
font-family: var(--serif);
font-size: clamp(26px, 3vw, 36px);
line-height: 1.15;
margin: 0;
}
.proof__quote footer {
font: 400 14px var(--sans);
color: var(--ink-mute);
margin-top: 14px;
}
.access {
position: relative;
overflow: hidden;
padding: clamp(72px, 10vw, 140px) 0;
background: linear-gradient(160deg, #3f62e8, #5d6ff0 45%, #7f95f5);
color: #fff;
scroll-margin-top: var(--nav-h);
}
.access__wash {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(45% 50% at 20% 30%, rgba(255, 217, 90, 0.75), transparent 65%),
radial-gradient(50% 55% at 80% 20%, rgba(255, 122, 182, 0.7), transparent 65%),
radial-gradient(60% 60% at 60% 90%, rgba(255, 161, 74, 0.65), transparent 65%);
filter: blur(30px);
opacity: 0.7;
}
.access__wash::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.18;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0.9 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.access__inner {
position: relative;
text-align: center;
display: grid;
justify-items: center;
}
.access .display {
color: #fff;
text-shadow: 0 2px 30px rgba(30, 30, 90, 0.25);
}
.access .accent--yellow {
color: #fff3b0;
}
.access .lede {
color: #fff;
max-width: 54ch;
}
.access form {
width: min(100%, 720px);
}
.access .input {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.95);
}
.access .form-status {
color: #fff;
}
.access .form-status a {
color: #fff;
}
.access__alt {
margin-top: 28px;
width: min(100%, 720px);
text-align: left;
}
.access__alt p {
margin: 0 0 8px;
font-size: 14.5px;
text-align: center;
}
.access__alt .cmd {
background: rgba(21, 18, 14, 0.82);
}
.grid-2 {
display: grid;
gap: 18px;
}
@media (min-width: 900px) {
.grid-2 {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
}
.grid-3 {
display: grid;
gap: 16px;
}
@media (min-width: 900px) {
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
.panel {
padding: 24px;
}
.panel h3 {
font-family: var(--serif);
font-size: 28px;
line-height: 1.05;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.panel p {
color: var(--ink-soft);
font-size: 15.5px;
}
.panel p:last-child {
margin-bottom: 0;
}
.section--ink .panel p {
color: rgba(246, 239, 230, 0.8);
}
.steps {
list-style: none;
margin: 0;
padding: 0;
counter-reset: step;
display: grid;
gap: 18px;
}
.steps > li {
counter-increment: step;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 4px 16px;
}
.steps > li::before {
content: counter(step, decimal-leading-zero);
font-family: var(--serif);
font-style: italic;
font-size: 30px;
color: var(--pink-text);
line-height: 1;
grid-row: span 3;
}
.steps h3 {
font-family: var(--serif);
font-size: 28px;
line-height: 1.1;
margin-bottom: 6px;
}
.steps p {
margin: 0 0 10px;
color: var(--ink-soft);
}
.scenes {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
.scenes {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1000px) {
.scenes {
grid-template-columns: repeat(5, 1fr);
}
}
.scenes li {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--card-shadow-sm);
}
.scenes img {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.scenes span {
display: block;
font: 500 12px var(--mono);
color: var(--ink-mute);
padding: 8px 10px;
}
.changelog {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 40px;
}
.changelog > li {
display: grid;
gap: 8px 40px;
}
@media (min-width: 800px) {
.changelog > li {
grid-template-columns: 200px minmax(0, 1fr);
}
}
.changelog time {
font: 500 13px var(--mono);
color: var(--ink-mute);
}
.changelog h2 {
font-family: var(--serif);
font-size: 40px;
line-height: 1;
}
.not-found {
min-height: 70vh;
display: grid;
align-items: center;
}
.not-found .num {
font-size: clamp(120px, 22vw, 260px);
color: var(--yellow);
font-style: italic;
}
.notice {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-radius: var(--radius-sm);
background: rgba(255, 217, 90, 0.25);
border: 1px solid rgba(201, 160, 20, 0.35);
font-size: 15px;
color: var(--ink-soft);
margin-bottom: 24px;
}
.notice .badge {
flex: none;
margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition: none !important; 
}
[data-reveal] .w,
.scene__text .w,
.scene .pop {
opacity: 1 !important;
transform: none !important;
}
.wash {
animation: none !important;
}
}
.specs {
margin: 0 0 24px;
border-top: 1px solid var(--line);
}
.specs div {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.specs dt {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-mute);
padding-top: 2px;
}
.specs dd {
margin: 0;
font-size: 15px;
color: var(--ink-soft);
}
.steps > li > * {
grid-column: 2;
}
.grid-2 > *,
.grid-3 > * {
min-width: 0;
}
.access__inner {
grid-template-columns: minmax(0, 1fr);
}
.access__inner > *,
.dev > *,
.hero__grid > *,
.est > *,
.pg > * {
min-width: 0;
max-width: 100%;
}
@media (max-width: 639px) {
pre code,
.cmd code {
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 12px;
}
}
@media (max-width: 599px) {
.stages .stage__vis,
.tpl--soon .tpl__soon-vis {
display: none;
}
.stage {
padding: 16px 18px;
}
}