@font-face{font-family:'HanPunct';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/han.04d2d7495b.woff2') format('woff2');unicode-range:U+00B7,U+2014,U+2018-201D,U+2026,U+2E80-2EFF,U+3000-303F,U+FF01-FF60,U+FFE0-FFE6;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/inter.aa6122a667.woff2') format('woff2-variations'),url('/assets/inter.aa6122a667.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/inter-italic.38b5bb56e3.woff2') format('woff2-variations'),url('/assets/inter-italic.38b5bb56e3.woff2') format('woff2');}
@font-face{font-family:'Han';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/han.04d2d7495b.woff2') format('woff2-variations'),url('/assets/han.04d2d7495b.woff2') format('woff2');}
@font-face{font-family:'Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/mono.0ae7bdf66c.woff2') format('woff2-variations'),url('/assets/mono.0ae7bdf66c.woff2') format('woff2');}
@font-face{font-family:'Glow';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/glow-light.e6dbe9e025.woff2') format('woff2-variations'),url('/assets/glow-light.e6dbe9e025.woff2') format('woff2');}
@font-face{font-family:'Glow';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/glow.223d8cbded.woff2') format('woff2-variations'),url('/assets/glow.223d8cbded.woff2') format('woff2');}
:root {
color-scheme: light;
--canvas: #fbf9fa;
--canvas-2: #f4f0f2;
--surface: #ffffff;
--surface-sunk: #f1edef;
--ink: #262029;
--ink-2: #6c6472;
--ink-3: #968e9c;
--hairline: rgba(0, 0, 0, .10);
--hairline-strong: rgba(0, 0, 0, .17);
--accent: #5b52c4;
--accent-ink: #ffffff;
--accent-wash: rgba(91, 82, 196, .09);
--glass: rgba(251, 249, 250, .72);
--glass-edge: rgba(0, 0, 0, .08);
--specular: rgba(255, 255, 255, 0);
--sh-1: 0 1px 2px rgba(70, 50, 85, .05),
0 1px 1px rgba(70, 50, 85, .04);
--sh-2: 0 2px 6px -2px rgba(70, 50, 85, .06),
0 10px 24px -8px rgba(70, 50, 85, .10);
--sh-3: 0 4px 12px -4px rgba(70, 50, 85, .07),
0 24px 56px -20px rgba(70, 50, 85, .18);
--amb-1: rgba(150, 90, 200, .026);
--amb-1-0: rgba(150, 90, 200, 0);
--amb-2: rgba(220, 130, 170, .020);
--amb-2-0: rgba(220, 130, 170, 0);
--grain-opacity: .032;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--canvas: #16121c;
--canvas-2: #1e1926;
--surface: #211b2a;
--surface-sunk: #1a1522;
--ink: #f2eef6;
--ink-2: #a79fb2;
--ink-3: #7f7689;
--hairline: rgba(255, 255, 255, .11);
--hairline-strong: rgba(255, 255, 255, .20);
--accent: #a99cf0;
--accent-ink: #140f1e;
--accent-wash: rgba(169, 156, 240, .14);
--glass: rgba(22, 18, 28, .68);
--glass-edge: rgba(255, 255, 255, .10);
--specular: rgba(255, 255, 255, .07);
--sh-1: 0 1px 2px rgba(0, 0, 0, .40);
--sh-2: 0 2px 8px -2px rgba(0, 0, 0, .50),
0 12px 28px -10px rgba(0, 0, 0, .55);
--sh-3: 0 6px 16px -6px rgba(0, 0, 0, .55),
0 28px 64px -22px rgba(0, 0, 0, .70);
--amb-1: rgba(150, 110, 240, .13);
--amb-1-0: rgba(150, 110, 240, 0);
--amb-2: rgba(240, 140, 190, .09);
--amb-2-0: rgba(240, 140, 190, 0);
--grain-opacity: .05;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--canvas: #16121c;
--canvas-2: #1e1926;
--surface: #211b2a;
--surface-sunk: #1a1522;
--ink: #f2eef6;
--ink-2: #a79fb2;
--ink-3: #7f7689;
--hairline: rgba(255, 255, 255, .11);
--hairline-strong: rgba(255, 255, 255, .20);
--accent: #a99cf0;
--accent-ink: #140f1e;
--accent-wash: rgba(169, 156, 240, .14);
--glass: rgba(22, 18, 28, .68);
--glass-edge: rgba(255, 255, 255, .10);
--specular: rgba(255, 255, 255, .07);
--sh-1: 0 1px 2px rgba(0, 0, 0, .40);
--sh-2: 0 2px 8px -2px rgba(0, 0, 0, .50),
0 12px 28px -10px rgba(0, 0, 0, .55);
--sh-3: 0 6px 16px -6px rgba(0, 0, 0, .55),
0 28px 64px -22px rgba(0, 0, 0, .70);
--amb-1: rgba(150, 110, 240, .13);
--amb-1-0: rgba(150, 110, 240, 0);
--amb-2: rgba(240, 140, 190, .09);
--amb-2-0: rgba(240, 140, 190, 0);
--grain-opacity: .05;
}
:root {
--font-sans: "HanPunct", "Inter", "Han", -apple-system, BlinkMacSystemFont,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Segoe UI", Roboto, sans-serif;
--font-mono: "Mono", ui-monospace, SFMono-Regular, "SF Mono",
"JetBrains Mono", Menlo, Consolas, monospace;
--font-display: "Glow", "Inter", "Han", -apple-system, "PingFang SC", sans-serif;
--fs-display: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem);
--fs-h1: clamp(1.85rem, 1.35rem + 2.1vw, 2.9rem);
--fs-h2: clamp(1.42rem, 1.24rem + .8vw, 1.85rem);
--fs-h3: clamp(1.22rem, 1.13rem + .42vw, 1.5rem);
--fs-h4: clamp(1.06rem, 1.02rem + .2vw, 1.2rem);
--fs-lead: clamp(1.12rem, 1.04rem + .38vw, 1.4rem);
--fs-body: 1.0625rem;
--fs-sm: .9375rem;
--fs-xs: .8125rem;
--fs-2xs: .75rem;
--tr-display: -.014em;
--tr-h1: -.012em;
--tr-h2: -.010em;
--tr-h3: -.008em;
--tr-body: -.003em;
--tr-caps: .06em;
--lh-display: 1.04;
--lh-title: 1.16;
--lh-body: 1.75;
--lh-cjk: 1.85;
--col: 40rem;
--margin-col: 14.5rem;
--gap-col: 2.75rem;
--pad: clamp(1.15rem, 4vw, 2.5rem);
--wide: 76rem;
--r-xs: 6px; --r-sm: 10px; --r-md: 14px;
--r-lg: 20px; --r-xl: 32px; --r-pill: 999px;
--ease-spring: linear(0, 0.0441, 0.1474, 0.2772, 0.4119, 0.5387, 0.6505, 0.7444, 0.8203, 0.8794, 0.9239, 0.9562, 0.9787, 0.9937, 1.0029, 1.0082, 1.0106, 1.0111, 1.0105, 1.0093, 1.0079, 1.0064, 1.005, 1.0038, 1.0028, 1.0019, 1.0013, 1.0008, 1.0005, 1.0002, 1.0001, 1, 1);
--ease-soft: linear(0, 0.0217, 0.075, 0.1464, 0.2265, 0.3088, 0.3893, 0.4653, 0.5355, 0.599, 0.6557, 0.7059, 0.7498, 0.7879, 0.8208, 0.849, 0.8732, 0.8937, 0.9111, 0.9258, 0.9382, 0.9486, 0.9573, 0.9646, 0.9707, 0.9757, 0.98, 0.9835, 0.9864, 0.9888, 0.9908, 0.9924, 1);
--ease-snap: linear(0, 0.0483, 0.1613, 0.3021, 0.4468, 0.5809, 0.6969, 0.7919, 0.8662, 0.9217, 0.9613, 0.9879, 1.0047, 1.0141, 1.0184, 1.0192, 1.018, 1.0157, 1.013, 1.0102, 1.0077, 1.0055, 1.0038, 1.0024, 1.0014, 1.0006, 1.0002, 0.9999, 0.9997, 0.9996, 0.9996, 0.9997, 1);
--ease-out: cubic-bezier(.22, .61, .36, 1);
--ease-in-out: cubic-bezier(.65, .05, .36, 1);
--t-fast: 160ms;
--t-base: 260ms;
--t-slow: 480ms;
--t-spring: 770ms;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
}
body {
margin: 0;
background: var(--canvas);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-cjk);
letter-spacing: var(--tr-body);
font-optical-sizing: auto;
font-synthesis-weight: none;
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
min-height: 100vh;
}
body { line-break: strict; word-break: normal; overflow-wrap: break-word; }
@supports (text-spacing-trim: trim-start) {
body { text-spacing-trim: trim-start; }
}
.cover-title, .post-title, .feature-title {
font-feature-settings: "palt" 1;
}
@supports (hanging-punctuation: first) {
p, li, dd, blockquote { hanging-punctuation: first allow-end last; }
}
.ws {
display: inline;
font-style: normal;
margin-inline: .0575em;
}
em { font-style: italic; }
em.cjk {
font-style: normal;
font-weight: inherit;
text-emphasis: filled dot;
text-emphasis-position: under right;
-webkit-text-emphasis: filled dot;
-webkit-text-emphasis-position: under right;
}
@supports not (text-emphasis: filled dot) {
em.cjk { font-weight: 640; }
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: 620;
line-height: var(--lh-title);
text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a {
color: inherit;
text-decoration: none;
text-underline-offset: .22em;
text-decoration-thickness: from-font;
}
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
button, input, select, textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
hr {
border: 0;
height: 1px;
background: var(--hairline);
margin: 3rem 0;
}
::selection { background: var(--accent-wash); color: var(--ink); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; }
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: var(--grain-opacity);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
.visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; top: .75rem; left: .75rem;
z-index: 10000;
padding: .6rem 1rem;
background: var(--surface);
border: 1px solid var(--hairline-strong);
border-radius: var(--r-sm);
box-shadow: var(--sh-2);
transform: translateY(-160%);
transition: transform var(--t-base) var(--ease-snap);
}
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.ambient { display: none; }
}
:root {
--nav-pad: .9rem;
--nav-r: 16px;
--nav-r-in: 11px;
--ico-s: 2.6rem;
--rail-w: 8.5rem;
--top-h: 3.6rem;
}
body.nav {
background: var(--canvas);
min-height: 100svh;
}
body.nav::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background:
radial-gradient(58rem 40rem at 12% -8%, var(--amb-1), var(--amb-1-0) 70%),
radial-gradient(52rem 38rem at 92% 4%, var(--amb-2), var(--amb-2-0) 72%);
transform: translateZ(0);
}
.ntop {
position: sticky;
top: 0;
z-index: 40;
height: var(--top-h);
display: flex;
align-items: center;
gap: .9rem;
padding: 0 clamp(1rem, 3vw, 2.5rem);
background: var(--glass);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color 300ms var(--ease-out);
}
@supports (animation-timeline: scroll()) {
.ntop {
animation: topline linear both;
animation-timeline: scroll();
animation-range: 0 6rem;
}
@keyframes topline { to { border-bottom-color: var(--glass-edge); } }
}
.nlogo { display: flex; align-items: center; gap: .55rem; color: var(--ink); }
.nlogo svg { height: 15px; width: auto; display: block; }
.nlogo svg path { fill: none; stroke: currentColor; stroke-width: 26; }
.nlogo .sl {
font-size: var(--fs-xs);
color: var(--ink-3);
letter-spacing: var(--tr-caps);
padding-inline-start: .55rem;
border-inline-start: 1px solid var(--hairline);
}
.ntop .sp { margin-inline-start: auto; }
.find {
position: relative;
display: flex;
align-items: center;
width: clamp(9rem, 26vw, 17rem);
}
.find svg {
position: absolute;
inset-inline-start: .6rem;
width: 14px;
height: 14px;
color: var(--ink-3);
pointer-events: none;
}
.find input {
width: 100%;
height: 2.1rem;
padding: 0 2.1rem 0 2rem;
font: inherit;
font-size: var(--fs-sm);
color: var(--ink);
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: 1px solid var(--hairline);
border-radius: var(--r-pill);
transition: border-color 200ms var(--ease-out),
box-shadow 200ms var(--ease-out),
background 200ms var(--ease-out);
}
.find input::placeholder { color: var(--ink-3); }
.find input:focus {
outline: none;
background: var(--surface);
border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
box-shadow: 0 0 0 3px var(--accent-wash);
}
.find kbd {
position: absolute;
inset-inline-end: .5rem;
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.4;
color: var(--ink-3);
padding: .05rem .32rem;
border: 1px solid var(--hairline);
border-radius: 5px;
pointer-events: none;
transition: opacity 160ms var(--ease-out);
}
.find input:focus ~ kbd, .find input:not(:placeholder-shown) ~ kbd { opacity: 0; }
.nwrap {
max-width: 80rem;
margin: 0 auto;
padding: 2.2rem clamp(1rem, 3vw, 2.5rem) 6rem;
display: grid;
grid-template-columns: var(--rail-w) minmax(0, 1fr);
gap: clamp(1.4rem, 3vw, 3rem);
align-items: start;
}
.rail {
position: sticky;
top: calc(var(--top-h) + 1.4rem);
display: grid;
gap: 1px;
}
.rail a {
display: flex;
align-items: center;
gap: .5rem;
padding: .4rem .65rem;
border-radius: var(--r-sm);
font-size: var(--fs-sm);
color: var(--ink-3);
text-decoration: none;
border: 1px solid transparent;
transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.rail a:hover { color: var(--ink-2); background: var(--accent-wash); }
.rail a.on {
color: var(--ink);
background: var(--surface);
border-color: var(--hairline);
box-shadow: var(--sh-1), inset 0 1px 0 var(--specular);
}
.rail a .rc {
margin-inline-start: auto;
font-size: var(--fs-2xs);
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
html { scroll-padding-top: calc(var(--top-h) + .9rem); }
.grp { scroll-margin-top: 0; }
.grp + .grp { margin-top: 2.6rem; }
.ghead {
display: flex;
align-items: baseline;
gap: .6rem;
margin: 0 0 .85rem;
padding-inline-start: 2px;
}
.ghead h2 {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h3);
letter-spacing: var(--tr-h3);
color: var(--ink);
}
.ghead .n {
font-size: var(--fs-2xs);
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.cards {
display: grid;
gap: .55rem;
grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr));
}
.cell { min-width: 0; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.cell {
animation: nrise linear both;
animation-timeline: view();
animation-range: entry 0% cover calc(13% + var(--i, 0) * 1.5%);
}
@keyframes nrise {
from { opacity: 0; translate: 0 16px; scale: .98; }
}
}
}
.card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .6rem;
padding: var(--nav-pad);
border-radius: var(--nav-r);
background: var(--surface);
border: 1px solid var(--hairline);
box-shadow: var(--sh-1), inset 0 1px 0 var(--specular);
text-decoration: none;
color: inherit;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
transition:
translate 420ms var(--ease-spring),
box-shadow 300ms var(--ease-out),
border-color 300ms var(--ease-out);
}
.card > * { position: relative; z-index: 1; }
.card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(7.5rem 6.5rem at 2rem 1.9rem,
var(--c, var(--accent)), transparent 74%);
opacity: 0;
pointer-events: none;
transition: opacity 420ms var(--ease-out);
}
.card:hover, .card:focus-visible {
translate: 0 -3px;
box-shadow: var(--sh-2), inset 0 1px 0 var(--specular);
border-color: color-mix(in srgb, var(--c, var(--accent)) 38%, var(--hairline));
}
.card:hover::after, .card:focus-visible::after { opacity: .12; }
.card:active { translate: 0 -1px; scale: .992; }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheen {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
opacity: 0;
}
.sheen::before {
content: "";
position: absolute;
top: -60%;
bottom: -60%;
width: 36%;
left: -50%;
transform: skewX(-15deg);
background: linear-gradient(100deg, transparent,
rgba(255, 255, 255, .5), transparent);
}
@media (prefers-color-scheme: dark) {
.sheen::before {
background: linear-gradient(100deg, transparent,
rgba(255, 255, 255, .13), transparent);
}
}
@media (prefers-reduced-motion: no-preference) {
.card:hover .sheen { opacity: 1; }
.card:hover .sheen::before { animation: nsweep 820ms var(--ease-out); }
@keyframes nsweep { to { left: 118%; } }
}
.ico {
position: relative;
flex: none;
width: var(--ico-s);
height: var(--ico-s);
border-radius: var(--nav-r-in);
display: grid;
place-items: center;
background: color-mix(in srgb, var(--c) 12%, var(--surface-sunk));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, var(--hairline));
overflow: hidden;
transition: background 320ms var(--ease-out);
}
.card:hover .ico { background: color-mix(in srgb, var(--c) 20%, var(--surface-sunk)); }
.ico img {
width: 1.55rem;
height: 1.55rem;
object-fit: contain;
display: block;
}
.ico.mono {
color: color-mix(in srgb, var(--c) 72%, var(--ink));
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 400;
line-height: 1;
}
.tx { min-width: 0; width: 100%; display: grid; gap: 2px; }
.tx .n {
font-size: .9rem;
font-weight: 580;
letter-spacing: -.006em;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tx .d {
font-size: .72rem;
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cell[hidden], .grp[hidden] { display: none; }
.nempty {
padding: 4rem 0;
text-align: center;
color: var(--ink-3);
font-size: var(--fs-sm);
}
.nempty[hidden] { display: none; }
.card.pick {
border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline));
box-shadow: var(--sh-2), 0 0 0 3px var(--accent-wash);
translate: 0 -2px;
}
.nfoot {
grid-column: 1 / -1;
margin-top: 3.4rem;
padding-top: 1.2rem;
border-top: 1px solid var(--hairline);
display: flex;
gap: 1rem;
align-items: center;
font-size: var(--fs-2xs);
color: var(--ink-3);
}
.nfoot a { color: var(--ink-3); text-decoration: none; }
.nfoot a:hover { color: var(--accent); }
.nfoot .sp { margin-inline-start: auto; }
@media (max-width: 54rem) {
.nwrap {
grid-template-columns: 1fr;
padding-top: 0;
gap: 0;
}
.rail {
position: sticky;
top: var(--top-h);
z-index: 30;
display: flex;
gap: .35rem;
overflow-x: auto;
scrollbar-width: none;
padding: .6rem 0;
margin: 0 calc(-1 * clamp(1rem, 3vw, 2.5rem)) 1.2rem;
padding-inline: clamp(1rem, 3vw, 2.5rem);
background: var(--glass);
-webkit-backdrop-filter: saturate(180%) blur(18px);
backdrop-filter: saturate(180%) blur(18px);
}
.rail::-webkit-scrollbar { display: none; }
.rail a { flex: none; padding: .32rem .7rem; border-radius: var(--r-pill); }
.rail a .rc { display: none; }
.cards { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .45rem; }
.card { padding: .75rem; gap: .5rem; }
:root { --ico-s: 2.3rem; }
.grp + .grp { margin-top: 2rem; }
}
@media (max-width: 26rem) {
.cards { grid-template-columns: repeat(3, 1fr); }
.find { width: 8rem; }
}
@media (prefers-reduced-motion: reduce) {
.card, .cell { transition: none; animation: none; }
html { scroll-behavior: auto; }
}
.cards { perspective: 900px; }
.card { --lx: 50%; --ly: 50%; }
.lit {
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
padding: 1px;
pointer-events: none;
opacity: 0;
background: radial-gradient(18.5rem circle at var(--lx) var(--ly),
color-mix(in srgb, var(--c) 78%, #fff), transparent 66%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
transition: opacity 340ms var(--ease-out);
}
.card.near .lit { opacity: 1; }
.card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
background: radial-gradient(15rem circle at var(--lx) var(--ly),
color-mix(in srgb, var(--c) 45%, #fff), transparent 60%);
transition: opacity 340ms var(--ease-out);
}
.card.near::before { opacity: .15; }
.card.tilt {
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform 120ms linear;
}
.card:not(.tilt) { transition: translate 420ms var(--ease-spring),
box-shadow 300ms var(--ease-out),
border-color 300ms var(--ease-out),
transform 520ms var(--ease-spring); }
.card.tilt .ico { transform: translateZ(14px); }
.ico { transition: transform 300ms var(--ease-out), background 320ms var(--ease-out); }
body.nav::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: var(--tint, #8a8296);
opacity: .14;
-webkit-mask: radial-gradient(76rem 46rem at 50% -12%, #000, transparent 66%);
mask: radial-gradient(76rem 46rem at 50% -12%, #000, transparent 66%);
transition: background-color 1100ms var(--ease-out);
transform: translateZ(0);
will-change: background-color;
}
@media (prefers-color-scheme: dark) {
body.nav::after { opacity: .20; }
}
@media (prefers-reduced-motion: no-preference) {
.cell.first {
animation: assemble 720ms var(--ease-spring) backwards;
animation-timeline: auto;
animation-delay: var(--d, 0ms);
}
@keyframes assemble {
from { opacity: 0; translate: 0 26px; scale: .92; filter: blur(7px); }
52% { filter: blur(0); }
to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}
.cell.first .lit {
animation: landflash 1000ms var(--ease-out) backwards;
animation-delay: var(--d, 0ms);
}
@keyframes landflash {
0% { opacity: 0; }
22% { opacity: .9; }
100% { opacity: 0; }
}
}
@media (prefers-reduced-motion: reduce) {
.lit, .card.tilt { display: none; transform: none; }
}