@font-face{font-family:'HeiPunct';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/hei.1c65a6ad57.woff2') format('woff2');unicode-range:U+00B7,U+2014,U+2026,U+2E80-2EFF,U+3000-303F,U+FF01-FF60,U+FFE0-FFE6;}
@font-face{font-family:'Quo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/quo.3bcba40cd9.woff2') format('woff2');unicode-range:U+2018-201D;}
@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:'HeiWide';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/hei-wide.60b91b0326.woff2') format('woff2-variations'),url('/assets/hei-wide.60b91b0326.woff2') format('woff2');}
@font-face{font-family:'Yuan';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/yuan.e787c65d12.woff2') format('woff2-variations'),url('/assets/yuan.e787c65d12.woff2') format('woff2');}
@font-face{font-family:'Hei';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/hei.1c65a6ad57.woff2') format('woff2-variations'),url('/assets/hei.1c65a6ad57.woff2') format('woff2');}
@font-face{font-family:'Display';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/display.b481035678.woff2') format('woff2-variations'),url('/assets/display.b481035678.woff2') format('woff2');}
@font-face{font-family:'Pixel';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/pixel.8aa8b7bade.woff2') format('woff2-variations'),url('/assets/pixel.8aa8b7bade.woff2') format('woff2');}
@font-face{font-family:'Quote';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/quote.e46322f8bb.woff2') format('woff2-variations'),url('/assets/quote.e46322f8bb.woff2') format('woff2');}
:root {
color-scheme: light;
--canvas: #fbf9fa;
--surface: #ffffff;
--surface-sunk: #f1edef;
--ink: #262029;
--ink-2: #6c6472;
--ink-3: #756f7a;
--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, .7);
--edge-hi: rgba(255, 255, 255, .95);
--edge-mid: rgba(0, 0, 0, .03);
--edge-lo: rgba(0, 0, 0, .05);
--sh-lift: 0 2px 6px -2px rgba(70, 50, 85, .09),
0 14px 30px -14px rgba(70, 50, 85, .14);
--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"]):has(body.dark-ok) {
color-scheme: dark;
--canvas: #16121c;
--surface: #211b2a;
--surface-sunk: #1a1522;
--ink: #f2eef6;
--ink-2: #a79fb2;
--ink-3: #8d8398;
--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);
--edge-hi: rgba(255, 255, 255, .22);
--edge-mid: rgba(255, 255, 255, .12);
--edge-lo: rgba(255, 255, 255, .05);
--sh-lift: 0 2px 8px -2px rgba(0, 0, 0, .5),
0 16px 34px -14px rgba(0, 0, 0, .6);
--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"]:has(body.dark-ok) {
color-scheme: dark;
--canvas: #16121c;
--surface: #211b2a;
--surface-sunk: #1a1522;
--ink: #f2eef6;
--ink-2: #a79fb2;
--ink-3: #8d8398;
--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);
--edge-hi: rgba(255, 255, 255, .22);
--edge-mid: rgba(255, 255, 255, .12);
--edge-lo: rgba(255, 255, 255, .05);
--sh-lift: 0 2px 8px -2px rgba(0, 0, 0, .5),
0 16px 34px -14px rgba(0, 0, 0, .6);
--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: "Quo", "HeiPunct", "Hei", "HeiWide", -apple-system, BlinkMacSystemFont,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
--font-mono: "Mono", "Hei", "HeiWide", ui-monospace, SFMono-Regular, "SF Mono",
"JetBrains Mono", Menlo, Consolas, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", monospace;
--font-display: "Quo", "Yuan", "Hei", "HeiWide", -apple-system, "PingFang SC", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
--font-pixel: "Pixel", "Mono", ui-monospace, monospace;
--font-head: "Quo", "Display", "Yuan", "Hei", "HeiWide", -apple-system, sans-serif;
--font-quote: "Quote", "Hei", "HeiWide", Georgia, "Songti SC", serif;
--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-h1: -.012em;
--tr-body: -.003em;
--tr-caps: .06em;
--lh-title: 1.16;
--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-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-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;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
-webkit-tap-highlight-color: transparent;
}
:where(body) {
-webkit-user-select: none;
user-select: none;
}
:where(article, .prose, pre, code, input, textarea, [contenteditable]) {
-webkit-user-select: text;
user-select: text;
}
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;
}
:where(code, kbd, samp, pre) {
font-family: var(--font-mono);
}
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 {
font-feature-settings: "palt" 0;
}
@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; }
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; }
}
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) { animation: vt-out 260ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 440ms var(--ease-out) 40ms both; }
:root[data-vt="in"]::view-transition-old(root) { animation-name: vt-out-fwd; }
:root[data-vt="in"]::view-transition-new(root) { animation-name: vt-in-fwd; }
:root[data-vt="out"]::view-transition-old(root) { animation-name: vt-out-back; }
:root[data-vt="out"]::view-transition-new(root) { animation-name: vt-in-back; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes vt-out-fwd { to { opacity: 0; transform: translate3d(-14px, 0, 0); } }
@keyframes vt-in-fwd { from { opacity: 0; transform: translate3d(20px, 0, 0); } }
@keyframes vt-out-back { to { opacity: 0; transform: translate3d(14px, 0, 0); } }
@keyframes vt-in-back { from { opacity: 0; transform: translate3d(-20px, 0, 0); } }
.brand svg, .nlogo svg, .mark svg { view-transition-name: mark; }
::view-transition-group(mark) {
animation-duration: 560ms;
animation-timing-function: cubic-bezier(.22,1,.36,1);
}
::view-transition-old(mark), ::view-transition-new(mark) {
animation-duration: 560ms;
animation-timing-function: cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
animation: none !important;
}
}
.sfoot {
position: relative; z-index: 1;
display: grid; justify-items: center; gap: .5rem;
margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
padding: 0 1.25rem clamp(1.5rem, 3vw, 2rem);
text-align: center; font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-2);
}
.sfoot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.35rem;
font-size: var(--fs-sm); }
.sfoot a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease-out); }
.sfoot a:hover { color: var(--accent); }
.sfoot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sfoot p { margin: 0; }
.sfoot-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem 1.1rem;
font-variant-numeric: tabular-nums; }
.sfoot-meta a { color: var(--ink-2); border-bottom: 1px solid color-mix(in srgb, var(--ink-2) 35%, transparent); }
.sfoot-meta a:hover { border-color: currentColor; }
@media (pointer: coarse) { .sfoot-links a { padding: .45rem .25rem; } }
.sfoot-note { border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
color: var(--accent); transition: color .2s var(--ease-out); }
.sfoot-note:hover { color: var(--ink); }
.sfoot-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sfoot-form { width: min(100%, 30rem); display: grid; gap: .5rem; margin: .4rem 0 .6rem;
text-align: left; animation: sfootIn .35s var(--ease-out) both; }
.sfoot-form[hidden] { display: none; }
@keyframes sfootIn { from { opacity: 0; transform: translateY(-4px); } }
.sfoot-form textarea, .sfoot-form input {
font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--surface);
border: 1px solid var(--hairline); outline: none; min-width: 0;
transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.sfoot-form textarea { border-radius: 16px; padding: .7rem .9rem; resize: vertical; min-height: 5.5rem;
line-height: 1.7; -webkit-user-select: text; user-select: text; }
.sfoot-form textarea:focus, .sfoot-form input:focus {
border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); box-shadow: 0 0 0 3px var(--accent-wash); }
.sfoot-form textarea::placeholder, .sfoot-form input::placeholder { color: var(--ink-3); }
.sfoot-form-row { display: flex; gap: .5rem; }
.sfoot-form-row input { flex: 1; height: 2.4rem; border-radius: 999px; padding: 0 .95rem; }
.sfoot-form-row button { height: 2.4rem; padding: 0 1.25rem; border: 0; border-radius: 999px; cursor: pointer;
font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--canvas); background: var(--ink);
box-shadow: 0 8px 18px -10px rgba(38, 32, 41, .55); }
.sfoot-form-row button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sfoot-form-row button[disabled] { opacity: .5; }
.sfoot-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sfoot-form-msg { margin: 0; min-height: 1.2em; text-align: center; font-size: var(--fs-xs); color: var(--ink-2); }
.sfoot-form-msg.err { color: #c0392b; }
.sfoot-form.done textarea, .sfoot-form.done .sfoot-form-row { display: none; }
.sfoot-form.done .sfoot-form-msg { font-size: var(--fs-sm); color: var(--ink); }
html { scrollbar-gutter: stable; }
.wrap {
width: min(100% - var(--pad) * 2, var(--wide));
margin-inline: auto;
}
.ambient {
position: fixed;
inset: -20vh -10vw;
z-index: -1;
pointer-events: none;
background:
radial-gradient(46vw 40vh at 18% 8%, var(--amb-1) 0%, var(--amb-1-0) 62%),
radial-gradient(52vw 44vh at 86% 22%, var(--amb-2) 0%, var(--amb-2-0) 66%);
animation: drift 96s var(--ease-in-out) infinite;
will-change: transform;
}
@keyframes drift {
0% { transform: translate3d(-2.6%, -1.8%, 0); }
28% { transform: translate3d(1.4%, 2.2%, 0); }
55% { transform: translate3d(3.2%, -1.2%, 0); }
78% { transform: translate3d(-0.8%, 2.6%, 0); }
100% { transform: translate3d(-2.6%, -1.8%, 0); }
}
#petals {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
will-change: transform;
contain: layout paint style;
}
body:not(.portal) #petals { opacity: .5; }
@media (prefers-reduced-motion: reduce) { #petals { display: none; } }
body::after {
content: "";
position: fixed; inset: 0 0 auto 0; height: 46vh; z-index: -1;
pointer-events: none;
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 5%, transparent) 0%,
color-mix(in srgb, var(--accent) 0%, transparent) 100%);
}
.topbar {
position: sticky;
top: 0;
z-index: 100;
isolation: isolate;
}
.topbar::before {
content: "";
position: absolute;
inset: 0;
background: var(--glass);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--glass-edge);
box-shadow: inset 0 1px 0 var(--specular);
opacity: 0;
z-index: -1;
}
@supports (animation-timeline: scroll()) {
.topbar::before {
animation: solidify linear both;
animation-timeline: scroll(root block);
animation-range: 0 96px;
}
}
@supports not (animation-timeline: scroll()) {
.topbar::before { opacity: 1; }
}
@keyframes solidify { to { opacity: 1; } }
.topbar-inner {
width: min(100% - var(--pad) * 2, var(--wide));
margin-inline: auto;
height: 3.5rem;
display: flex;
align-items: center;
gap: clamp(.75rem, 2.5vw, 2rem);
}
.brand { display: flex; align-items: center; padding: .35rem 0; color: var(--ink);
transition: opacity var(--t-fast) var(--ease-out); }
.brand svg { height: 15px; width: auto; display: block; overflow: visible; }
.brand svg path { fill: none; stroke: currentColor; stroke-width: 26; }
.topbar-inner .sl { font-size: var(--fs-xs); color: var(--ink-2); text-decoration: none;
padding-inline-start: .55rem;
border-inline-start: 1px solid var(--hairline); line-height: 1.2; }
.topbar-inner .sl:hover { color: var(--ink); }
.bgrp { display: flex; align-items: center; gap: .55rem; }
.brand:hover { opacity: .62; }
.tools { display: flex; align-items: center; gap: .3rem; }
main { display: block; }
.reading {
width: min(100% - var(--pad) * 2, var(--col));
margin-inline: auto;
}
.article-shell {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-content: center;
padding-inline: var(--pad);
}
.article-shell > * { min-width: 0; }
@media (min-width: 62rem) {
.article-shell > * { grid-column: main; }
.article-shell {
grid-template-columns:
[rail-start] minmax(0, var(--margin-col))
[rail-end main-start] var(--col)
[main-end note-start] 0 [note-end];
column-gap: var(--gap-col);
max-width: calc(var(--col) + var(--margin-col) + var(--gap-col)
+ var(--pad) * 2);
margin-inline: auto;
}
.article-shell > .rail { grid-column: rail; }
}
@media (min-width: 74.5rem) {
.article-shell {
grid-template-columns:
[rail-start] minmax(0, 1fr)
[rail-end main-start] var(--col)
[main-end note-start] minmax(0, 1fr) [note-end];
max-width: calc(var(--col) + (var(--margin-col) + var(--gap-col)) * 2);
}
}
.siteft {
margin-top: clamp(5rem, 12vw, 9rem);
padding: 0 0 clamp(2rem, 5vw, 3rem);
font-size: var(--fs-sm);
color: var(--ink-2);
}
.siteft-card {
display: grid; gap: .9rem 2rem; align-items: center;
grid-template-columns: auto 1fr;
padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
border-radius: var(--r-lg);
background:
radial-gradient(60% 140% at 0% 0%, color-mix(in srgb, #d1739b 9%, transparent), transparent 70%),
radial-gradient(50% 140% at 100% 100%, color-mix(in srgb, #5aa9c4 9%, transparent), transparent 70%),
var(--surface);
box-shadow: var(--sh-1), inset 0 1px 0 var(--specular);
}
.siteft-mark { display: block; width: 3.4rem; line-height: 0; }
.siteft-mark svg { width: 100%; height: auto; overflow: visible; }
.siteft-desc { margin: 0; color: var(--ink-2); }
.siteft-links, .siteft-feed {
grid-column: 1 / -1; margin: 0;
display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
}
.siteft-feed { color: var(--ink-2); gap: .35rem 1rem; }
.siteft-links a, .siteft-feed a {
color: var(--ink); text-decoration: none;
transition: color var(--t-fast) var(--ease-out);
}
.siteft-links a:hover, .siteft-feed a:hover { color: var(--accent); }
@media (min-width: 44rem) {
.siteft-card { grid-template-columns: auto 1fr auto; }
.siteft-links { grid-column: auto; justify-content: flex-end; }
.siteft-feed { grid-column: 2 / -1; justify-content: flex-end; }
}
.siteft-base {
margin: 1.1rem 0 0; padding-inline: .25rem;
font-size: var(--fs-xs); color: var(--ink-2);
}
.topbar-inner { width: 100%; height: 3.625rem; padding: 0 clamp(1rem, 3vw, 2.5rem);
box-sizing: border-box; }
.findbtn { position: relative; display: flex; align-items: center; gap: .5rem;
width: clamp(9rem, 26vw, 17rem); height: 2.1rem; padding: 0 .5rem 0 .6rem;
font: inherit; font-size: var(--fs-sm); color: var(--ink-2); cursor: text; text-align: left;
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), background 200ms var(--ease-out); }
.findbtn:hover { border-color: var(--hairline-strong); background: var(--surface); }
.findbtn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
stroke-width: 2.49; stroke-linecap: round; stroke-linejoin: round; }
.findbtn span { flex: 1; }
.findbtn kbd { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; color: var(--ink-2);
padding: .05rem .32rem; border: 1px solid var(--hairline); border-radius: 5px; }
@media (max-width: 34rem) { .findbtn { width: auto; } .findbtn span, .findbtn kbd { display: none; } }
.findbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prose {
--flow: 1.5em;
font-size: var(--fs-body);
line-height: var(--lh-cjk);
color: var(--ink);
}
.prose > * + * { margin-top: var(--flow); }
.prose > h2 { margin-top: 2.6em; margin-bottom: .05em; font-size: var(--fs-h2);
font-family: var(--font-display); letter-spacing: -.004em; font-weight: 400; }
.prose > h3 { margin-top: 2.1em; margin-bottom: .05em; font-size: var(--fs-h3);
font-family: var(--font-display); letter-spacing: -.002em; font-weight: 400; }
.prose > h4 { margin-top: 1.8em; margin-bottom: .05em; font-size: var(--fs-h4); font-weight: 620; color: var(--ink-2); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose.numbered { counter-reset: sec; }
.prose.numbered > h2 { counter-increment: sec; }
.prose.numbered > h2::before {
content: counter(sec, decimal-leading-zero);
display: block;
margin-bottom: .5em;
font-family: var(--font-pixel);
font-size: .68rem;
font-weight: 400;
letter-spacing: .08em;
line-height: 1;
color: var(--accent);
opacity: .8;
font-variant-numeric: tabular-nums;
}
.hlink {
margin-inline-start: .4em;
color: var(--ink-3);
font-weight: 400;
opacity: 0;
transition: opacity var(--t-fast) var(--ease-out);
}
h2:hover > .hlink, h3:hover > .hlink, h4:hover > .hlink,
.hlink:focus-visible { opacity: 1; }
.prose a:not(.hlink):not(.sn-toggle):not(.endnote-back) {
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: .28em;
transition: text-decoration-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
}
.prose a:not(.hlink):not(.sn-toggle):not(.endnote-back):hover {
color: var(--accent);
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
}
.prose a.ext::after {
content: "↗";
font-size: .72em;
margin-inline-start: .18em;
color: var(--ink-3);
vertical-align: .12em;
}
.prose ul, .prose ol { padding-inline-start: 1.35em; margin-block: 0; }
.prose li { margin-block: .38em; }
.prose li::marker { color: var(--ink-3); }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin-top: .38em; }
.prose ul.contains-task-list { list-style: none; padding-inline-start: .2em; }
.prose .task-list-item { display: flex; align-items: baseline; gap: .55em; }
.prose .task-list-item-checkbox { accent-color: var(--accent); translate: 0 .12em; }
.prose dl { margin: 0; }
.prose dt { font-weight: 620; margin-top: 1.1em; }
.prose dd {
margin: .3em 0 0;
padding-inline-start: 1em;
border-inline-start: 1px solid var(--hairline);
color: var(--ink-2);
}
.prose blockquote {
margin: 2em 0;
padding-inline-start: 1.35em;
border-inline-start: 2px solid var(--hairline-strong);
color: var(--ink-2);
}
.prose blockquote > * + * { margin-top: .9em; }
.callout {
position: relative;
margin: 1.9em 0;
padding: 1.1em 1.25em;
border-radius: var(--r-md);
border: 1px solid var(--hairline);
background: var(--surface);
box-shadow: inset 0 1px 0 var(--specular);
font-size: var(--fs-sm);
}
.callout > * + * { margin-top: .7em; }
.callout-title {
font-weight: 620;
font-size: var(--fs-xs);
letter-spacing: .02em;
color: var(--ink-3);
}
.callout-note, .callout-warn, .callout-tip { padding-inline-start: 1.85em; }
.callout-note::before,
.callout-warn::before,
.callout-tip::before {
content: "";
position: absolute;
inset-block: .8em;
inset-inline-start: .62em;
width: 3px;
border-radius: var(--r-pill);
background: var(--cl-mark);
}
.callout-note { --cl-mark: var(--accent); }
.callout-warn { --cl-mark: #d97706; }
.callout-tip { --cl-mark: #059669; }
.callout-aside { background: var(--surface-sunk); border-style: dashed; }
.callout-pull {
border: 0; background: none; padding: 0;
font-size: var(--fs-lead);
line-height: 1.5;
letter-spacing: -.015em;
color: var(--ink);
text-align: center;
margin-block: 2.6em;
}
.prose code {
font-family: var(--font-mono);
font-size: .875em;
font-variant-ligatures: none;
}
.prose :not(pre) > code {
margin-inline: .18em;
padding: .14em .38em;
border-radius: var(--r-xs);
background: var(--surface-sunk);
border: 1px solid var(--hairline);
white-space: nowrap;
}
figure.code {
margin: 2em 0;
border: 1px solid var(--hairline);
border-radius: var(--r-md);
background: var(--surface-sunk);
box-shadow: var(--sh-1), inset 0 1px 0 var(--specular);
overflow: hidden;
}
@supports (corner-shape: squircle) {
figure.code, .callout { corner-shape: squircle; }
}
.code-head {
display: flex;
align-items: center;
gap: 1rem;
padding: .55rem .95rem;
border-bottom: 1px solid var(--hairline);
background: color-mix(in srgb, var(--surface) 60%, transparent);
font-size: var(--fs-2xs);
letter-spacing: var(--tr-caps);
color: var(--ink-3);
}
.code-title { font-weight: 580; color: var(--ink-2); letter-spacing: 0; }
.code-lang { margin-inline-start: auto; text-transform: uppercase; }
figure.code pre {
margin: 0;
padding: 1rem 1.1rem;
overflow-x: auto;
font-size: .875rem;
line-height: 1.72;
tab-size: 2;
}
figure.code pre code {
background: none; border: 0; padding: 0; margin: 0;
white-space: pre;
font-size: inherit;
}
figure.fig { margin: 2.4em 0; }
figure.fig img {
width: 100%;
border-radius: var(--r-md);
background: var(--surface-sunk);
box-shadow: var(--sh-1);
}
figure.fig figcaption,
.prose figcaption:not(.code-head) {
margin-top: .8em;
font-size: var(--fs-xs);
line-height: 1.65;
color: var(--ink-3);
text-align: center;
text-wrap: pretty;
}
@media (min-width: 74.5rem) {
.prose figure.fig.wide {
width: calc(var(--col) + var(--margin-col) + var(--gap-col));
}
}
@property --tw-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tw-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.prose .table-wrap {
overflow-x: auto;
overscroll-behavior-x: contain;
margin: 2em 0;
mask-image:
linear-gradient(to right, transparent 0, #000 var(--tw-l)),
linear-gradient(to left, transparent 0, #000 var(--tw-r));
mask-composite: intersect;
animation: tbl-edge linear both;
animation-timeline: scroll(self inline);
}
@keyframes tbl-edge {
0% { --tw-l: 0px; --tw-r: 2.5rem; }
6% { --tw-l: 2.5rem; }
94% { --tw-r: 2.5rem; }
100% { --tw-r: 0px; }
}
.prose .table-wrap:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-xs);
}
.prose .table-wrap > table { margin: 0; }
.prose table {
width: 100%;
min-width: 32rem;
border-collapse: collapse;
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums lining-nums;
}
.prose th, .prose td {
padding: .62em .9em;
text-align: left;
border-bottom: 1px solid var(--hairline);
vertical-align: top;
}
.prose thead th {
font-weight: 600;
font-size: var(--fs-xs);
letter-spacing: .02em;
color: var(--ink-3);
border-bottom: 1px solid var(--hairline-strong);
white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.sn-check { position: absolute; opacity: 0; width: 0; height: 0; }
.sn-toggle {
font-size: .72em;
font-weight: 620;
vertical-align: super;
line-height: 0;
color: var(--accent);
margin-inline: .12em;
cursor: pointer;
font-variant-numeric: lining-nums;
}
.sn-toggle:hover { text-decoration: underline; }
.sn-toggle:hover,
.sn-toggle:has(~ .sidenote:hover) {
color: var(--accent);
border-radius: 2px;
background: var(--accent-wash);
box-shadow: 0 0 0 .2em var(--accent-wash);
}
.sidenote {
display: block;
font-size: var(--fs-xs);
line-height: 1.7;
color: var(--ink-2);
text-align: start;
letter-spacing: 0;
}
.sidenote .sn-p { display: block; }
.sidenote .sn-p + .sn-p { margin-top: .6em; }
.sn-num {
font-weight: 620;
color: var(--accent);
margin-inline-end: .35em;
font-variant-numeric: lining-nums;
}
@media (max-width: 74.499rem) {
.sidenote {
position: relative;
max-height: 0;
overflow: hidden;
opacity: 0;
margin: 0;
padding-inline-start: .95em;
transition: max-height var(--t-slow) var(--ease-out),
opacity var(--t-base) var(--ease-out),
margin var(--t-slow) var(--ease-out);
}
.sidenote::before {
content: "";
position: absolute;
inset-block: .3em;
inset-inline-start: 0;
width: 3px;
border-radius: var(--r-pill);
background: var(--accent);
}
.sn-check:checked + .sidenote {
max-height: 40em;
opacity: 1;
margin: 1em 0;
}
}
@media (min-width: 74.5rem) {
.sidenote {
float: right;
clear: right;
width: var(--margin-col);
margin-inline-end: calc(-1 * (var(--margin-col) + var(--gap-col)));
margin-block: .3em 1.4em;
}
.sn-toggle:not(.endnote-ref) { cursor: default; }
.sidenote {
border-radius: var(--r-xs);
transition: background var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out);
}
.sn-toggle:hover + .sn-check + .sidenote,
.sidenote:hover {
background: var(--accent-wash);
box-shadow: 0 0 0 .6rem var(--accent-wash);
}
.sn-toggle:hover + .sn-check + .sidenote .sn-num,
.sidenote:hover .sn-num { color: var(--accent); }
}
.endnotes {
margin-top: 4rem;
padding-top: 1.5rem;
border-top: 1px solid var(--hairline);
font-size: var(--fs-sm);
color: var(--ink-2);
}
.endnotes ol { padding-inline-start: 1.2em; }
.endnote { margin-bottom: 1em; }
.endnote-back { margin-inline-start: .4em; color: var(--accent); }
.rail { position: relative; }
.toc {
font-size: var(--fs-xs);
line-height: 1.5;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.rail .toc {
position: sticky;
top: 5.5rem;
max-height: calc(100vh - 8rem);
display: flex;
flex-direction: column;
padding: .9rem .85rem 1rem;
border-radius: var(--r-md);
background: linear-gradient(180deg,
color-mix(in srgb, var(--surface) 88%, transparent),
color-mix(in srgb, var(--surface) 66%, transparent));
-webkit-backdrop-filter: blur(14px) saturate(150%);
backdrop-filter: blur(14px) saturate(150%);
box-shadow: var(--sh-lift), inset 0 1px 0 var(--specular);
contain: layout paint;
}
.rail .toc::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: linear-gradient(160deg,
var(--edge-hi), var(--edge-mid) 46%, var(--edge-lo));
-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;
}
@supports (corner-shape: squircle) {
.rail .toc { corner-shape: squircle; }
.rail .toc::before { corner-shape: inherit; }
}
.toc h2 {
font-size: var(--fs-2xs);
letter-spacing: .02em;
color: var(--ink-3);
font-weight: 580;
margin-bottom: .85rem;
}
.rail .toc h2 {
display: flex;
align-items: baseline;
gap: .5rem;
margin: 0 .15rem .7rem;
padding-bottom: .62rem;
border-bottom: 1px solid var(--hairline);
}
.toc-count {
margin-inline-start: auto;
font-family: var(--font-pixel);
font-size: .68rem;
letter-spacing: .02em;
text-transform: none;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc ol ol { padding-inline-start: .85rem; }
.toc li { margin-bottom: .1rem; }
.toc > ol {
position: relative;
counter-reset: toc;
}
.rail .toc > ol {
overflow-y: auto;
min-height: 0;
padding-inline-end: .3rem;
}
.toc > ol::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 2px;
border-radius: 1px;
background: var(--hairline);
}
.toc a {
display: block;
color: var(--ink-3);
transition: color var(--t-fast) var(--ease-out),
background var(--t-fast) var(--ease-out);
text-wrap: pretty;
}
.toc a:hover { color: var(--ink); background: var(--accent-wash); }
.toc a.active { color: var(--ink); font-weight: 560; }
.toc > ol a {
position: relative;
z-index: 1;
border-inline-start: 0;
border-radius: var(--r-xs);
padding: .34rem .5rem .34rem 2.3rem;
}
.toc > ol > li { counter-increment: toc; }
.toc > ol > li > a::before {
content: counter(toc, decimal-leading-zero);
position: absolute;
inset-inline-start: .72rem;
top: .44rem;
font-family: var(--font-pixel);
font-size: .62rem;
letter-spacing: .01em;
color: var(--ink-3);
opacity: .7;
font-variant-numeric: tabular-nums;
transition: color var(--t-fast) var(--ease-out),
opacity var(--t-fast) var(--ease-out);
}
.toc > ol > li > a.active::before { color: var(--accent); opacity: 1; }
.rail .toc a:hover { background: none; }
.tocmark {
position: absolute;
left: 0; top: 0;
width: 0; height: 0;
z-index: 0;
border-radius: var(--r-xs);
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 13%, transparent),
color-mix(in srgb, var(--accent) 6%, transparent));
box-shadow: inset 0 1px 0 var(--specular);
opacity: 0;
pointer-events: none;
transition: opacity 160ms var(--ease-out);
}
.tocmark::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 2px;
border-radius: 1px;
background: var(--accent);
}
.tocmark::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: linear-gradient(160deg,
var(--specular),
color-mix(in srgb, var(--accent) 24%, transparent));
-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;
}
.tocmark.on { opacity: 1; }
.tocmark.ready {
transition: transform 320ms var(--ease-spring),
width 320ms var(--ease-spring),
height 320ms var(--ease-spring),
opacity 160ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.tocmark { transition: opacity 120ms linear; }
.tocmark.ready { transition: opacity 120ms linear; }
}
@media (max-width: 61.999rem) {
.rail { display: none; }
}
.toc-inline {
margin: 2rem 0;
border: 1px solid var(--hairline);
border-radius: var(--r-md);
background: var(--surface);
overflow: hidden;
}
.toc-inline summary {
padding: .8rem 1.05rem;
font-size: var(--fs-sm);
font-weight: 560;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: .5rem;
}
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary svg {
margin-inline-start: auto;
width: 1.05rem; height: 1.05rem; flex: none;
fill: none; stroke: var(--ink-3); stroke-width: 1.93;
stroke-linecap: round; stroke-linejoin: round;
transition: rotate var(--t-base) var(--ease-snap),
stroke var(--t-fast) var(--ease-out);
}
.toc-inline summary:hover svg { stroke: var(--ink-2); }
.toc-inline[open] summary svg { rotate: 180deg; }
.toc-inline .toc { position: static; max-height: none; padding: 0 1.05rem 1rem; }
.toc-inline .toc h2 { display: none; }
@media (min-width: 62rem) { .toc-inline { display: none; } }
.math-block { overflow-x: auto; margin: 1.8em 0; text-align: center; }
.readbar {
position: fixed; top: 0; left: 0; height: 2px; z-index: 200;
width: 100%; transform-origin: 0 50%; transform: scaleX(0);
background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #d1739b));
}
@supports (animation-timeline: scroll()) {
.readbar { animation: readGrow linear both;
animation-timeline: scroll(root block); }
}
@supports not (animation-timeline: scroll()) { .readbar { display: none; } }
@keyframes readGrow { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .readbar { display: none; } }
.prose.numbered > h2::before { content: none; display: none; }
.toc > ol > li > a::before, .toc > ol > li::before { content: none !important; display: none !important; }
.prose :not(pre) > code { border: 0; padding: .1em .34em;
background: color-mix(in srgb, var(--accent) 8%, var(--surface-sunk)); }
.toc > ol > li > a { padding-left: .9rem !important; }
.prose .tabs { margin: 2em 0; }
.prose .tab-bar {
display: inline-flex; flex-wrap: nowrap; gap: 3px; max-width: 100%;
overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
padding: 4px; margin-bottom: 1rem; border-radius: var(--r-pill);
background: var(--surface-sunk);
box-shadow: inset 0 1px 2px rgba(40, 28, 52, .08);
}
.prose .tab-bar::-webkit-scrollbar { display: none; }
.prose .tab {
position: relative; display: inline-flex; align-items: center; flex: none;
height: 2.15rem; padding: 0 .95rem; border-radius: var(--r-pill);
font-size: var(--fs-sm); line-height: 1; white-space: nowrap;
color: var(--ink-2); cursor: pointer; -webkit-user-select: none; user-select: none;
transition: color .2s var(--ease-out), background-color .25s var(--ease-out),
box-shadow .25s var(--ease-out);
}
.prose .tab input {
position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer;
-webkit-appearance: none; appearance: none; border-radius: inherit;
}
.prose .tab:hover { color: var(--ink); }
.prose .tab:has(input:checked) {
color: var(--ink); background: var(--surface);
box-shadow: 0 1px 2px rgba(40, 28, 52, .08), 0 4px 12px -6px rgba(40, 28, 52, .22),
inset 0 1px 0 var(--specular);
}
.prose .tab:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.prose .tab-panel > figure.fig:first-of-type,
.prose .tab-panel > :nth-child(2) { margin-top: 0; }
.prose .tab-panel > :last-child { margin-bottom: 0; }
@supports selector(:has(*)) {
.prose .tabs > .tab-panel { display: none; }
.prose .tabs > .tab-panel > .tab-label { display: none; }
.tabs:has(> .tab-bar > .tab:nth-child(1) > input:checked) > .tab-panel:nth-child(2),
.tabs:has(> .tab-bar > .tab:nth-child(2) > input:checked) > .tab-panel:nth-child(3),
.tabs:has(> .tab-bar > .tab:nth-child(3) > input:checked) > .tab-panel:nth-child(4),
.tabs:has(> .tab-bar > .tab:nth-child(4) > input:checked) > .tab-panel:nth-child(5),
.tabs:has(> .tab-bar > .tab:nth-child(5) > input:checked) > .tab-panel:nth-child(6),
.tabs:has(> .tab-bar > .tab:nth-child(6) > input:checked) > .tab-panel:nth-child(7),
.tabs:has(> .tab-bar > .tab:nth-child(7) > input:checked) > .tab-panel:nth-child(8),
.tabs:has(> .tab-bar > .tab:nth-child(8) > input:checked) > .tab-panel:nth-child(9),
.tabs:has(> .tab-bar > .tab:nth-child(9) > input:checked) > .tab-panel:nth-child(10),
.tabs:has(> .tab-bar > .tab:nth-child(10) > input:checked) > .tab-panel:nth-child(11),
.tabs:has(> .tab-bar > .tab:nth-child(11) > input:checked) > .tab-panel:nth-child(12),
.tabs:has(> .tab-bar > .tab:nth-child(12) > input:checked) > .tab-panel:nth-child(13) { display: block; }
}
.prose .tab-label { font-weight: 620; color: var(--ink); margin: 1.2em 0 .5em; }
.entries {
--rail: 2.25rem;
--rx: .6rem;
position: relative;
padding-left: var(--rail);
}
.entries::before {
content: ""; position: absolute; z-index: 0;
left: calc(var(--rx) - 1.5px); top: -1.1rem; bottom: .9rem; width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, #d1739b, #9a6fd0 34%, #5b52c4 68%, #5aa9c4);
opacity: .85;
}
.entry {
display: grid;
grid-template-columns: 4.5rem 1fr auto;
gap: 0 clamp(.75rem, 2.5vw, 1.75rem);
align-items: baseline;
padding: clamp(1.05rem, 2.4vw, 1.5rem) .35rem;
position: relative;
--pad: clamp(1.05rem, 2.4vw, 1.5rem);
}
.entry::after {
content: ""; position: absolute; z-index: 2;
left: calc(var(--rx) - var(--rail) - 6.5px);
top: calc(var(--pad) + .8rem - 6.5px);
width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box;
background: var(--canvas);
border: 2.5px solid color-mix(in srgb, var(--accent) 80%, #d1739b);
transition: background var(--t-fast) var(--ease-out), scale 260ms var(--ease-spring);
}
.entry:hover::after, .entry:focus-visible::after {
background: var(--accent); scale: 1.15;
}
.entry::before {
content: "";
position: absolute;
inset: 0 -.9rem;
border-radius: var(--r-sm);
background: var(--accent-wash);
opacity: 0;
z-index: 0;
transition: opacity var(--t-base) var(--ease-out);
}
.entry > * { position: relative; z-index: 1; }
.entry:hover::before { opacity: 1; }
.entries.glide .entry::before { display: none; }
.plate {
position: absolute;
top: 0; left: 0; width: 0; height: 0;
z-index: 0;
border-radius: var(--r-md);
background:
radial-gradient(28rem 15rem at var(--lx, 50%) var(--ly, 50%),
color-mix(in srgb, var(--accent) 10%, transparent),
transparent 70%),
var(--accent-wash);
box-shadow:
inset 0 1px 0 var(--specular),
calc(var(--tx, 0) * -7px)
calc(7px + var(--ty, 0) * -3px)
20px -14px rgba(38, 28, 60, .38);
opacity: 0;
pointer-events: none;
transition: opacity 170ms var(--ease-out);
}
.plate::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: linear-gradient(158deg,
var(--specular),
color-mix(in srgb, var(--accent) 12%, transparent) 52%,
color-mix(in srgb, var(--accent) 30%, transparent));
-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;
}
.plate.ready {
transition: transform 340ms var(--ease-spring),
width 340ms var(--ease-spring),
height 340ms var(--ease-spring),
opacity 170ms var(--ease-out);
}
.plate.on { opacity: 1; }
.entry-date {
font-size: var(--fs-xs);
color: var(--ink-3);
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: .01em;
white-space: nowrap;
}
.entry-body { min-width: 0; }
.entry-title {
font-size: 1.15rem;
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -.004em;
line-height: 1.4;
text-wrap: pretty;
transition: color var(--t-fast) var(--ease-out);
}
.entry:hover .entry-title { color: var(--accent); }
.entry-dek {
margin-top: .38rem;
font-size: var(--fs-sm);
line-height: 1.62;
color: var(--ink-2);
text-wrap: pretty;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.entry-min {
font-size: var(--fs-xs);
color: var(--ink-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 34rem) {
.entry { grid-template-columns: 1fr; gap: .35rem; }
.entry-min { display: none; }
.entry::after { top: calc(var(--pad) + .45rem - 6.5px); }
.entries { --rail: 1.75rem; --rx: .45rem; }
}
.band-more {
margin-top: 2rem;
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: var(--fs-sm);
color: var(--ink-2);
transition: color var(--t-fast) var(--ease-out);
}
.band-more::after { content: "→"; transition: translate var(--t-base) var(--ease-snap); }
.band-more:hover { color: var(--ink); }
.band-more:hover::after { translate: .3rem 0; }
.iconbtn {
display: inline-grid;
place-items: center;
width: 2.1rem; height: 2.1rem;
border-radius: var(--r-pill);
color: var(--ink-2);
transition: background var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out),
scale var(--t-base) var(--ease-snap);
}
.iconbtn:hover { background: var(--accent-wash); color: var(--ink); }
.iconbtn:active { scale: .92; }
.iconbtn svg { width: 1.05rem; height: 1.05rem; fill: none;
stroke: currentColor; stroke-width: 1.93;
stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ico { grid-area: 1 / 1; transition:
opacity var(--t-base) var(--ease-out), rotate var(--t-slow) var(--ease-spring); }
.theme-toggle .ico-auto,
.theme-toggle .ico-sun,
.theme-toggle .ico-moon { opacity: 0; rotate: -35deg; }
:root[data-theme="light"] .theme-toggle .ico-sun,
:root[data-theme="dark"] .theme-toggle .ico-moon,
:root:not([data-theme]) .theme-toggle .ico-auto { opacity: 1; rotate: 0deg; }
.chip {
display: inline-block;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-2xs);
letter-spacing: .01em;
padding: .22em .62em;
border-radius: var(--r-pill);
border: 1px solid var(--hairline);
color: var(--ink-2);
background: var(--surface);
transition: border-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
}
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.crumb { color: var(--ink-3); }
.crumb:hover { color: var(--accent); }
.post-head {
position: relative;
isolation: isolate;
padding-block: clamp(3rem, 8vw, 5.5rem) clamp(1.75rem, 4vw, 2.75rem);
margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
.post-head::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 clamp(-2.4rem, -3vw, -1rem) 0;
border-radius: var(--r-lg) var(--r-lg) 0 0;
background:
radial-gradient(115% 82% at 10% 0%,
color-mix(in srgb, var(--accent) 8%, transparent), transparent 64%),
linear-gradient(180deg,
color-mix(in srgb, var(--surface) 62%, transparent),
transparent 86%);
pointer-events: none;
}
.post-head::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg,
var(--accent) 0, var(--accent) 2.2rem,
var(--hairline-strong) 2.2rem, var(--hairline) 46%, transparent);
}
.post-eyebrow {
display: flex; flex-wrap: wrap; align-items: center;
gap: .5rem .9rem;
font-size: var(--fs-xs);
color: var(--ink-2);
margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
font-variant-numeric: tabular-nums lining-nums;
}
.post-title {
font-size: var(--fs-h1);
font-family: var(--font-display);
line-height: var(--lh-title);
letter-spacing: -.006em;
font-weight: 400;
text-wrap: balance;
font-variation-settings: "opsz" 30;
}
.post-dek {
margin-top: 1rem;
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--ink-2);
text-wrap: pretty;
}
.post-meta {
margin-top: clamp(1.25rem, 3vw, 1.75rem);
display: flex; flex-wrap: wrap; align-items: center;
gap: .45rem 1.1rem;
font-size: var(--fs-xs);
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.post-meta:has(.pm) {
align-items: stretch;
gap: .6rem 0;
}
.post-head .post-meta { margin-top: clamp(1.4rem, 3vw, 1.9rem); }
.pm {
display: flex;
flex-direction: column;
gap: .2rem;
padding-inline: 1.15rem;
border-inline-start: 1px solid var(--hairline);
}
.pm:first-child { padding-inline-start: 0; border-inline-start: 0; }
.pm-n {
font-family: var(--font-display);
font-size: 1.16rem;
line-height: 1;
font-weight: 400;
letter-spacing: -.01em;
color: var(--ink-2);
font-variant-numeric: tabular-nums lining-nums;
}
.pm-u {
font-size: var(--fs-2xs);
letter-spacing: var(--tr-caps);
color: var(--ink-3);
}
.pager {
margin-top: clamp(3.5rem, 8vw, 5.5rem);
display: grid;
grid-template-columns: 1fr 1fr;
gap: .8rem;
}
.pager-item {
position: relative;
display: block;
padding: clamp(1.15rem, 3vw, 1.55rem) clamp(1.05rem, 3vw, 1.45rem);
border: 1px solid transparent;
border-radius: var(--r-md);
background: linear-gradient(180deg,
color-mix(in srgb, var(--surface) 88%, transparent),
color-mix(in srgb, var(--surface) 66%, transparent));
-webkit-backdrop-filter: blur(12px) saturate(145%);
backdrop-filter: blur(12px) saturate(145%);
box-shadow: var(--sh-lift), inset 0 1px 0 var(--specular);
transition: transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
@supports (corner-shape: squircle) {
.pager-item { corner-shape: squircle; }
.pager-item::after { corner-shape: inherit; }
}
.pager-item::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: linear-gradient(158deg,
var(--edge-hi), var(--edge-mid) 48%, var(--edge-lo));
-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;
}
a.pager-item:hover {
transform: translateY(-2px);
box-shadow: var(--sh-3), inset 0 1px 0 var(--specular);
}
.pager-item.next { text-align: right; }
.pager-label {
display: flex;
align-items: center;
gap: .38rem;
font-size: var(--fs-2xs);
letter-spacing: .02em;
color: var(--ink-3);
margin-bottom: .6rem;
}
.pager-item.next .pager-label { flex-direction: row-reverse; }
.pager-label svg {
width: 1.05rem; height: 1.05rem; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.93;
stroke-linecap: round; stroke-linejoin: round;
transition: translate var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out);
}
.pager-item.prev .pager-label svg { rotate: 90deg; }
.pager-item.next .pager-label svg { rotate: -90deg; }
a.pager-item:hover .pager-label svg { color: var(--accent); }
a.pager-item.prev:hover .pager-label svg { translate: -3px; }
a.pager-item.next:hover .pager-label svg { translate: 3px; }
.pager-title {
display: block;
font-size: 1.02rem;
font-family: var(--font-display);
font-weight: 400;
line-height: 1.45;
letter-spacing: -.012em;
text-wrap: pretty;
transition: color var(--t-fast) var(--ease-out);
}
a.pager-item:hover .pager-title { color: var(--accent); }
.pager-item.empty {
pointer-events: none;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
border-style: dashed;
border-color: var(--hairline);
}
.pager-item.empty::after { display: none; }
.pager-item.empty .pager-title { color: var(--ink-3); }
@media (max-width: 34rem) {
.pager { grid-template-columns: 1fr; }
.pager-item.next { text-align: left; }
.pager-item.next .pager-label { flex-direction: row; }
}
.year-group + .year-group { margin-top: clamp(2.5rem, 6vw, 4rem); }
.tag-head a {
display: inline-flex;
align-items: baseline;
gap: .55em;
color: inherit;
transition: color var(--t-fast) var(--ease-out);
}
.tag-head a:hover { color: var(--accent); }
.tag-head .tag-n {
letter-spacing: 0;
font-size: var(--fs-sm);
color: var(--ink-2);
font-weight: 400;
font-variant-numeric: tabular-nums lining-nums;
}
.tag-head a:hover .tag-n { color: inherit; }
.year-head {
position: sticky;
top: 3.5rem;
z-index: 5;
padding: .8rem 0 .7rem 2.25rem;
margin: 0;
background: linear-gradient(var(--canvas) 72%, transparent);
font-family: var(--font-display);
font-size: 1.3rem;
letter-spacing: -.01em;
color: var(--ink);
font-weight: 500;
font-variant-numeric: lining-nums;
}
.year-head::before {
content: ""; position: absolute; left: calc(.6rem - 6px); top: 50%;
width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
background: linear-gradient(135deg, #d1739b, #9a6fd0);
box-shadow: 0 0 0 4px var(--canvas);
}
@media (max-width: 34rem) {
.year-head { padding-left: 1.75rem; }
.year-head::before { left: calc(.45rem - 6px); }
}
.list-name {
margin: 0; font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem); letter-spacing: -.02em;
line-height: 1.2;
}
.list-sum { margin: .55rem 0 0; color: var(--ink-2); font-size: var(--fs-sm); }
.list-head .list-title + .list-sum { margin-top: .5rem; }
.tagcloud { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.tagcloud a {
--h: #d1739b;
display: inline-flex; align-items: baseline; gap: .45em;
padding: .45rem .95rem; border-radius: 999px;
color: var(--ink); text-decoration: none; font-size: var(--fs-sm);
background: color-mix(in srgb, var(--h) 12%, var(--surface));
box-shadow: var(--sh-1), inset 0 1px 0 var(--specular);
transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.tagcloud a:nth-child(4n+2) { --h: #9a6fd0; }
.tagcloud a:nth-child(4n+3) { --h: #5b52c4; }
.tagcloud a:nth-child(4n+4) { --h: #5aa9c4; }
.tagcloud a b { font-weight: 500; font-size: var(--fs-xs);
color: color-mix(in srgb, var(--h) 35%, var(--ink)); font-variant-numeric: tabular-nums; }
.tagcloud a:hover { background: color-mix(in srgb, var(--h) 22%, var(--surface));
box-shadow: var(--sh-2), inset 0 1px 0 var(--specular); }
dialog.search {
width: min(100% - 2rem, 42rem);
max-height: min(70vh, 34rem);
margin: 12vh auto auto;
padding: 0;
border: 1px solid var(--hairline-strong);
border-radius: var(--r-lg);
background: var(--glass);
-webkit-backdrop-filter: saturate(180%) blur(30px);
backdrop-filter: saturate(180%) blur(30px);
box-shadow: var(--sh-3), inset 0 1px 0 var(--specular);
color: var(--ink);
overflow: hidden;
flex-direction: column;
}
dialog.search[open] { display: flex; }
dialog.search:not([open]) { display: none; }
@supports (corner-shape: squircle) { dialog.search { corner-shape: squircle; } }
dialog.search::backdrop {
background: rgba(0, 0, 0, .28);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: no-preference) {
dialog.search[open] { animation: dlg-in var(--t-base) var(--ease-snap); }
dialog.search[open]::backdrop { animation: fade-in var(--t-base) var(--ease-out); }
}
@keyframes dlg-in {
from { opacity: 0; transform: translateY(-10px) scale(.985); }
to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
.search-field {
display: flex; align-items: center; gap: .7rem;
padding: .9rem 1.1rem;
border-bottom: 1px solid var(--hairline);
}
.search-field svg { width: 1.05rem; height: 1.05rem; flex: none;
fill: none; stroke: var(--ink-3); stroke-width: 1.93;
stroke-linecap: round; stroke-linejoin: round; }
.search-field input {
flex: 1; min-width: 0;
border: 0; background: none; outline: none;
font-size: 1.05rem; letter-spacing: -.01em;
}
.search-field input::placeholder { color: var(--ink-3); }
.search-hint {
font-size: var(--fs-2xs); color: var(--ink-3);
border: 1px solid var(--hairline); border-radius: var(--r-xs);
padding: .1rem .35rem;
}
.search-results { overflow-y: auto; overscroll-behavior: contain; padding: .4rem; }
.search-results:empty { display: none; }
.sr-item {
display: block; padding: .7rem .8rem; border-radius: var(--r-sm);
transition: background var(--t-fast) var(--ease-out);
}
.sr-item:hover, .sr-item.sel { background: var(--accent-wash); }
.sr-title { font-size: var(--fs-sm); font-weight: 560; letter-spacing: -.01em; }
.sr-snip {
margin-top: .2rem; font-size: var(--fs-xs); color: var(--ink-2);
line-height: 1.55;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.sr-snip mark { background: var(--accent-wash); color: var(--accent); border-radius: 2px; }
.search-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-3);
font-size: var(--fs-sm); }
.code-copy {
margin-inline-start: auto;
font-size: var(--fs-2xs);
letter-spacing: .01em;
color: var(--ink-3);
padding: .16rem .5rem;
border-radius: var(--r-xs);
border: 1px solid transparent;
transition: color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
background var(--t-fast) var(--ease-out);
}
.code-head .code-lang + .code-copy { margin-inline-start: .6rem; }
.code-copy:hover { color: var(--ink); border-color: var(--hairline); background: var(--surface); }
.code-copy.ok { color: var(--syn-add); border-color: transparent; }
.list-head {
padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 2.5vw, 1.5rem);
}
.list-head .post-meta { margin-top: 0; }
.list-title {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 400;
line-height: var(--lh-title);
letter-spacing: -.004em;
font-variation-settings: "opsz" 24;
}
.list-head .post-eyebrow { margin-bottom: .5rem; }
.list-head .list-title + .post-meta { margin-top: .75rem; }
.post-head::after { display: none; }
.post-len { color: var(--ink-2); font-size: var(--fs-sm); }
.post-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.post-head { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pager-item.empty { visibility: hidden; border: 0; background: none; box-shadow: none; }
:root {
--syn-comment: #8a8a95;
--syn-keyword: #a4308f;
--syn-string: #b8332b;
--syn-number: #2f34c4;
--syn-func: #2c6f78;
--syn-type: #4b2fa8;
--syn-builtin: #146b96;
--syn-punct: var(--ink-2);
--syn-err: #c0392b;
--syn-add: #0a7c46;
--syn-del: #b3261e;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--syn-comment: #7f8c98;
--syn-keyword: #ff7ab2;
--syn-string: #ff8170;
--syn-number: #d9c97c;
--syn-func: #78c2b3;
--syn-type: #dabaff;
--syn-builtin: #6bb8d6;
--syn-err: #ff6b5e;
--syn-add: #56d364;
--syn-del: #f85149;
}
}
:root[data-theme="dark"] {
--syn-comment: #7f8c98;
--syn-keyword: #ff7ab2;
--syn-string: #ff8170;
--syn-number: #d9c97c;
--syn-func: #78c2b3;
--syn-type: #dabaff;
--syn-builtin: #6bb8d6;
--syn-err: #ff6b5e;
--syn-add: #56d364;
--syn-del: #f85149;
}
.t-c, .t-c1, .t-cm, .t-cs, .t-cd { color: var(--syn-comment); font-style: italic; }
.t-cp, .t-cpf { color: var(--syn-comment); }
.t-k, .t-kd, .t-kn, .t-kp, .t-kr, .t-kc, .t-ow { color: var(--syn-keyword); }
.t-kt { color: var(--syn-type); }
.t-s, .t-s1, .t-s2, .t-sb, .t-sc, .t-sd, .t-sh, .t-sx, .t-sr, .t-ss, .t-dl,
.t-sa { color: var(--syn-string); }
.t-se, .t-si { color: var(--syn-builtin); }
.t-m, .t-mb, .t-mf, .t-mh, .t-mi, .t-mo, .t-il { color: var(--syn-number); }
.t-nf, .t-fm { color: var(--syn-func); }
.t-nc, .t-nn, .t-ne { color: var(--syn-type); }
.t-nb, .t-bp, .t-no, .t-nv, .t-vc, .t-vg, .t-vi, .t-vm { color: var(--syn-builtin); }
.t-na, .t-nl, .t-nt { color: var(--syn-func); }
.t-nd { color: var(--syn-keyword); }
.t-nx, .t-n, .t-py { color: inherit; }
.t-o, .t-p { color: var(--syn-punct); }
.t-err { color: var(--syn-err); }
.t-w { color: inherit; }
.t-ge { font-style: italic; }
.t-gs { font-weight: 620; }
.t-gh, .t-gu { color: var(--syn-func); font-weight: 620; }
.t-gi { color: var(--syn-add); }
.t-gd { color: var(--syn-del); }
.t-gp { color: var(--syn-comment); user-select: none; }
@media print {
:root {
--canvas: #fff; --surface: #fff; --surface-sunk: #fafafa;
--ink: #111; --ink-2: #444; --ink-3: #666;
--hairline: #ddd; --hairline-strong: #bbb; --accent: #000;
--grain-opacity: 0;
}
@page {
margin: 20mm 18mm 22mm;
size: A4;
}
body { background: #fff; font-size: 10.5pt; line-height: 1.62; }
body::before, .ambient { display: none !important; }
#petals,
.topbar, .siteft, .pager, .toc, .toc-inline, .cue,
.tools, .band-more, .search, .skip-link { display: none !important; }
.article-shell { display: block; max-width: none; padding: 0; }
.reading { width: auto; }
.post-head::before, .post-head::after { display: none; }
.post-head { border-bottom: .5pt solid #bbb; padding-top: 0; }
.post-meta .pm { border-inline-start: .5pt solid #ccc; }
.prose.numbered > h2::before { color: #888; }
.post-title { font-size: 22pt; letter-spacing: -.02em; }
.post-dek { font-size: 12pt; }
h1, h2, h3, h4 { break-after: avoid-page; break-inside: avoid; }
figure, table, .callout, blockquote { break-inside: avoid; }
p { orphans: 3; widows: 3; }
.sidenote {
float: none; width: auto; margin: .6em 0 .6em 1.2em;
font-size: 9pt; color: #444;
border-left: .5pt solid #bbb; padding-left: .8em;
max-height: none; opacity: 1;
}
.prose a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 8.5pt; color: #666; word-break: break-all;
}
.prose a:not(.hlink):not(.sn-toggle):not(.endnote-back) {
text-decoration: none; border-bottom: .5pt solid #999; }
.prose a.ext::after { content: " (" attr(href) ")"; }
figure.code { box-shadow: none; background: #fafafa; border: .5pt solid #ddd; }
figure.code pre { font-size: 8.5pt; white-space: pre-wrap; word-break: break-all; }
}
.flist-page { --col: 50rem; }
.flist {
position: relative; display: grid; gap: clamp(1.4rem, 3vw, 2.1rem);
padding: .6rem 0 1rem; --k: 1;
}
@media (max-width: 34rem) { .flist { --k: .3; } }
.fthread { position: absolute; inset: 0; width: 100%; height: 100%;
overflow: visible; pointer-events: none; z-index: 0; }
.fpath { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.flist.drawn .fpath { animation: fdraw 1.8s cubic-bezier(.45, .05, .25, 1) .15s both; }
@keyframes fdraw { from { stroke-dashoffset: var(--len, 4000); } to { stroke-dashoffset: 0; } }
.fr {
--c: var(--accent);
position: relative; z-index: 1;
display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center;
gap: 1.1rem; margin-inline-start: calc(var(--x, 0rem) * var(--k));
padding: .55rem .9rem .55rem .55rem; border-radius: 22px;
color: inherit; text-decoration: none;
transition: background-color .35s var(--ease-out);
}
.fr::before {
content: ""; position: absolute; left: calc(.55rem + 1.75rem - 1px); top: -1.6rem;
height: 1.6rem; width: 2px; border-radius: 2px;
background: linear-gradient(transparent, var(--c));
opacity: .6;
}
.flist.drawn .fr::before, .fr:first-of-type::before { display: none; }
a.fr:hover, a.fr:focus-visible {
background: radial-gradient(120% 140% at 1.75rem 50%,
color-mix(in srgb, var(--c) 13%, transparent), transparent 70%);
}
a.fr:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.fdot {
position: relative; width: 3.5rem; height: 3.5rem; border-radius: 50%;
display: grid; place-items: center; overflow: visible;
background: color-mix(in srgb, var(--c) 18%, var(--surface));
box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--c),
0 10px 22px -10px color-mix(in srgb, var(--c) 70%, transparent);
}
.fdot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.fdot b { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem;
color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
@property --ring { syntax: "<number>"; inherits: false; initial-value: 0; }
.fdot::after {
content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
background: conic-gradient(from 0deg, var(--c) calc(var(--ring) * 1turn), transparent 0);
-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
opacity: 0; transition: --ring .7s cubic-bezier(.45, .05, .25, 1), opacity .25s var(--ease-out);
}
a.fr:hover .fdot::after, a.fr:focus-visible .fdot::after { --ring: 1; opacity: .9; }
.fbody { display: grid; gap: .2rem; min-width: 0; }
.fname {
display: flex; align-items: baseline; gap: .6rem; min-width: 0;
font-family: var(--font-display); font-weight: 500; font-size: 1.12rem;
line-height: 1.35; color: var(--ink);
}
.fname i { font-style: normal; font-family: var(--font-sans); font-size: var(--fs-xs);
color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdesc { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.fplus {
border: 0; cursor: pointer; padding: 0; color: var(--ink-2);
background: transparent;
box-shadow: none;
background-image: radial-gradient(closest-side, var(--surface) 96%, transparent 100%);
}
.fplus::before {
content: ""; position: absolute; inset: -2px; border-radius: 50%;
border: 2px dashed color-mix(in srgb, var(--ink) 28%, transparent);
transition: border-color .25s var(--ease-out), rotate .6s var(--ease-out);
}
.fplus svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor;
stroke-width: 1.8; stroke-linecap: round; transition: rotate .35s var(--ease-out); }
.fplus:hover, .fjoin-t:hover { color: var(--accent); }
.fplus:hover::before { border-color: var(--accent); }
.fplus[aria-expanded="true"] svg { rotate: 45deg; }
.fplus:focus-visible, .fjoin-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.fjoin-t { border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
color: var(--ink-2); transition: color .2s var(--ease-out); }
.fjoin { padding-block: .55rem; }
.fapply {
display: grid; gap: 1.1rem; margin: .4rem 0 3rem;
animation: fopen .45s var(--ease-out) both;
}
.fapply[hidden] { display: none; }
@keyframes fopen { from { opacity: 0; transform: translateY(-6px); } }
.fcard {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center;
padding: 1.1rem 1.25rem; border-radius: 22px;
background:
radial-gradient(60% 120% at 0% 0%, rgba(209, 115, 155, .12), transparent 70%),
radial-gradient(60% 120% at 100% 100%, rgba(90, 169, 196, .12), transparent 70%),
var(--surface);
box-shadow: 0 0 0 1px var(--hairline), 0 14px 32px -20px rgba(70, 50, 85, .35),
inset 0 1px 0 var(--specular);
}
.fcard-ava { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover;
box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.fcard dl { margin: 0; display: grid; gap: .15rem; min-width: 0; }
.fcard dl > div { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .6rem;
align-items: baseline; }
.fcard dt { font-size: var(--fs-xs); color: var(--ink-3); }
.fcard dd { margin: 0; min-width: 0; }
.fcard dd button {
max-width: 100%; border: 0; background: none; padding: .15rem .45rem; margin-inline-start: -.45rem;
border-radius: 8px; cursor: copy; font: inherit; font-size: var(--fs-sm); color: var(--ink);
text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
-webkit-user-select: text; user-select: text;
}
.fcard dd button:hover { background: var(--accent-wash); }
.fcard dd button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fcard dd button.ok { color: var(--accent); }
.fform {
display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .8rem;
padding: 1.1rem 1.25rem 1.2rem; border-radius: 22px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
box-shadow: 0 0 0 1px var(--hairline);
}
.fform label { display: grid; gap: .3rem; min-width: 0; }
.fform label.wide { grid-column: 1 / -1; }
.fform label span { font-size: var(--fs-xs); color: var(--ink-2); }
.fform input {
height: 2.5rem; padding: 0 .9rem; border-radius: 999px; min-width: 0;
border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
font: inherit; font-size: var(--fs-sm);
transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.fform input::placeholder { color: var(--ink-3); }
.fform input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
box-shadow: 0 0 0 3px var(--accent-wash); }
.fform input[aria-invalid="true"] { border-color: #c0392b; }
.fform-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; margin-top: .2rem; }
.fform-msg { margin-inline-end: auto; font-size: var(--fs-sm); color: var(--ink-2); }
.fform-msg.err { color: #c0392b; }
.fsend {
height: 2.5rem; padding: 0 1.4rem; border: 0; border-radius: 999px; cursor: pointer;
font: inherit; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em;
color: var(--canvas); background: var(--ink);
box-shadow: 0 8px 20px -10px rgba(38, 32, 41, .55);
transition: box-shadow .2s var(--ease-out), opacity .2s;
}
.fsend:hover { box-shadow: 0 12px 26px -10px rgba(38, 32, 41, .6); }
.fsend:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fsend[disabled] { opacity: .5; pointer-events: none; }
.fform.done .fsend { display: none; }
.fform.done input { opacity: .6; }
@media (max-width: 34rem) {
.fform { grid-template-columns: 1fr; }
.fform label.wide { grid-column: auto; }
.fcard { grid-template-columns: 1fr; }
.fname { flex-wrap: wrap; row-gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
.flist.drawn .fpath { animation: none; }
.fdot::after { transition: opacity .2s; }
.fapply { animation: none; }
}
@property --lit { syntax: "<number>"; inherits: false; initial-value: 0; }
body.portal {
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
--r2: 14px; --r3: 20px; --rp: 999px;
--hold: min(100%, 46rem);
--t-micro: .75rem; --t-small: .875rem; --t-body: 1rem;
--t-lead: 1.125rem;
--p-ink: #2e2736;
--p-ink2: #6c6472;
--p-ink3: #736b7c;
--p-acc: #5b52c4;
--p-rose: #d1739b;
--p-sky: #5aa9c4;
--e1: 0 1px 2px rgba(70, 50, 85, .05),
0 2px 8px -3px rgba(70, 50, 85, .07);
--e2: 0 2px 4px rgba(70, 50, 85, .05),
0 12px 28px -12px rgba(70, 50, 85, .18);
--spring: linear(0, .0483, .1613, .3021, .4468, .5809, .6969, .7919, .8662, .9217, .9613, .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, .9999, .9997, .9996, .9996, .9997, 1);
--glide: cubic-bezier(.22, .61, .36, 1);
--font-round: var(--font-display);
color: var(--p-ink);
background: #fbf5f9;
overflow-x: hidden;
}
body.portal::before { opacity: .036; }
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden;
will-change: transform;
contain: layout paint style; }
.stage {
background:
radial-gradient(22.63vw 22.63vw at 42% calc(19vw - 12vh),
rgba(255, 208, 228, .78) 0 28%, rgba(255, 208, 228, 0) 68%),
radial-gradient(28.28vw 28.28vw at 83% calc(112vh - 10vw),
rgba(255, 227, 196, .78) 0 30%, rgba(255, 227, 196, 0) 70%),
radial-gradient(38.18vw 38.18vw at 35% calc(112vh - 5vw),
rgba(191, 230, 244, .78) 0 32%, rgba(191, 230, 244, 0) 71%),
radial-gradient(32.53vw 32.53vw at 96% calc(22vw - 12vh),
rgba(210, 202, 255, .78) 0 30%, rgba(210, 202, 255, 0) 70%),
radial-gradient(36.77vw 36.77vw at 5% calc(14vw - 12vh),
rgba(255, 200, 220, .78) 0 32%, rgba(255, 200, 220, 0) 71%),
linear-gradient(158deg, #fff2f5 0%, #fdf3ff 32%, #f2f7ff 66%, #fff7f0 100%);
}
.veil { position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); }
.photo { position: absolute; inset: 0; background-size: cover;
background-position: center; opacity: 0; }
.portal #petals { position: fixed; inset: 0; z-index: 0; pointer-events: none;
will-change: transform;
contain: layout paint style;
}
.glass { position: relative; isolation: isolate;
background: linear-gradient(158deg, rgba(255,255,255,.66), rgba(255,255,255,.40));
-webkit-backdrop-filter: blur(18px) saturate(165%);
backdrop-filter: blur(18px) saturate(165%);
box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,.85); }
.glass::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
padding: 1px; pointer-events: none;
background: linear-gradient(158deg, rgba(255,255,255,.98), rgba(255,255,255,.32) 42%, rgba(150,120,165,.24));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; }
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 40;
display: flex; align-items: center; isolation: isolate;
padding: var(--s5) clamp(var(--s5), 4vw, var(--s7)); }
.top::before {
content: ""; position: absolute; inset: 0 0 -18px 0; z-index: -1;
opacity: var(--scrim, 0);
background: linear-gradient(180deg, rgba(255, 255, 255, .58),
rgba(255, 255, 255, .3) 54%, rgba(255, 255, 255, 0));
-webkit-backdrop-filter: saturate(150%) blur(14px);
backdrop-filter: saturate(150%) blur(14px);
-webkit-mask: linear-gradient(180deg, #000 56%, transparent);
mask: linear-gradient(180deg, #000 56%, transparent);
}
@supports (animation-timeline: scroll()) {
.top::before { animation: solidify linear both;
animation-timeline: scroll(root block); animation-range: 0 96px; }
}
.top .mark { display: block; width: clamp(56px, 5.6vw, 74px);
opacity: 0; pointer-events: none; }
.top .mark svg { display: block; width: 100%; height: auto; overflow: visible; }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.top .mark { animation: markIn linear both;
animation-timeline: scroll(root block);
animation-range: 26svh 66svh; }
}
}
@supports not (animation-timeline: scroll()) {
.top .mark { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
.top .mark { opacity: 1; pointer-events: auto; }
}
@keyframes markIn { to { opacity: 1; pointer-events: auto; } }
.top .acts { margin-left: auto; display: flex; gap: var(--s1); }
.ib { position: relative; width: 40px; height: 40px; border-radius: var(--rp);
display: grid; place-items: center; color: var(--p-ink2); text-decoration: none;
transition: color .22s var(--glide); }
.ib::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
background: rgba(255,255,255,.7); box-shadow: var(--e1);
opacity: 0; transform: scale(.7);
transition: opacity .28s var(--glide), transform .5s var(--spring); }
.ib:hover { color: var(--p-acc); }
.ib:hover::before { opacity: 1; transform: scale(1); }
.ib svg { position: relative; width: 20px; height: 20px; fill: none;
stroke: currentColor; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round; }
.hero { position: relative; z-index: 1; min-height: 100svh;
display: grid; place-items: center; text-align: center;
padding: var(--s10) var(--s5) var(--s9); }
.hero-in { max-width: 34rem; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.hero-in { animation: heroOut linear both;
animation-timeline: view(); animation-range: exit 0% exit 78%; }
}
}
@keyframes heroOut { to { opacity: 0; transform: translateY(-40px) scale(.97) } }
.ava { position: relative; width: 128px; height: 128px; margin: 0 auto var(--s6);
border-radius: 50%; display: grid; place-items: center; }
.ava::before { content: ""; position: absolute; inset: -4px; border-radius: 50%;
background: conic-gradient(from 0deg, var(--p-rose), var(--p-acc), var(--p-sky), var(--p-rose));
animation: spin 14s linear infinite; }
.ava::after { content: ""; position: absolute; inset: -20px; border-radius: 50%;
background: conic-gradient(from 0deg, var(--p-rose), var(--p-acc), var(--p-sky), var(--p-rose));
filter: blur(22px); opacity: .34; animation: spin 14s linear infinite; }
.ava .halo { position: absolute; inset: -24px; border-radius: 50%;
border: 1px dashed rgba(91,82,196,.24); animation: spin 40s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg) } }
.ava img { position: relative; width: 120px; height: 120px; border-radius: 50%;
object-fit: cover; border: 4px solid #fff; box-shadow: var(--e2);
transition: transform .7s var(--spring); }
.ava:hover img { transform: scale(1.05); }
.logo { width: min(68vw, 20rem); margin-inline: auto; }
.logo svg { display: block; width: 100%; height: auto; overflow: visible; }
#logoPath { stroke-dasharray: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
#logoPath { animation: draw 2.1s cubic-bezier(.32, .66, .24, 1) .25s backwards; }
}
@keyframes draw {
from { stroke-dasharray: 1; stroke-dashoffset: 1; }
98% { stroke-dasharray: 1; stroke-dashoffset: 0; }
to { stroke-dasharray: none; stroke-dashoffset: 0; }
}
.typed { margin: var(--s4) 0 0; font-size: calc(var(--t-lead) * 1.08);
color: color-mix(in srgb, var(--p-ink) 78%, transparent);
min-height: 1.9em; font-family: var(--font-quote); font-weight: 400;
letter-spacing: .004em; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px;
vertical-align: -.14em; background: var(--p-acc); border-radius: 1px;
animation: blink 1.06s steps(1) infinite; }
.caret.done { animation: none; opacity: 0; transition: opacity .7s var(--glide); }
@keyframes blink { 50% { opacity: 0 } }
.links { margin-top: var(--s6); display: flex; gap: var(--s2); justify-content: center; }
.lk { width: 44px; height: 44px; border-radius: var(--rp); display: grid;
place-items: center; color: var(--p-ink2); text-decoration: none;
will-change: transform;
transition: color .22s var(--glide), box-shadow .35s var(--glide); }
.lk:hover { color: var(--p-acc); box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.9); }
.lk svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
stroke-width: 1.58; stroke-linecap: round; stroke-linejoin: round; }
.cue { position: absolute; left: 50%; bottom: var(--s6); translate: -50% 0;
padding: var(--s2) var(--s3); text-decoration: none;
display: grid; justify-items: center; }
.cue i { display: block; width: 1px; height: 40px;
background: linear-gradient(var(--p-ink3), transparent);
animation: fall 2s var(--glide) infinite; }
@keyframes fall {
0% { transform: scaleY(.15); transform-origin: top; opacity: 0 }
45% { transform: scaleY(1); opacity: 1 }
100% { transform: scaleY(1); transform-origin: bottom; opacity: 0 } }
@supports (animation-timeline: scroll()) {
.cue { animation: cueOut linear both;
animation-timeline: scroll(root block);
animation-range: 0 22svh; }
@media (prefers-reduced-motion: reduce) { .cue { animation-name: cueFade } }
}
@keyframes cueOut { to { opacity: 0; translate: -50% 14px; pointer-events: none } }
@keyframes cueFade { to { opacity: 0; pointer-events: none } }
.below { position: relative; z-index: 1; padding: var(--s9) var(--s5) var(--s3); }
.hold { width: var(--hold); margin-inline: auto; }
@media (min-width: 72rem) { body.portal { --hold: min(100%, 56rem); } }
.group + .group { margin-top: var(--s8); }
.ghead {
display: flex; align-items: baseline; gap: var(--s4);
margin: 0 0 var(--s4); padding: 0 var(--s1);
font-size: inherit; font-weight: inherit;
position: relative;
}
.glabel {
font-family: var(--font-round); font-size: var(--t-lead); font-weight: 500;
letter-spacing: .04em; color: var(--p-ink);
}
.gmore {
margin-inline-start: auto; font-size: var(--t-small);
color: var(--p-ink3); text-decoration: none;
display: inline-flex; align-items: center; gap: var(--s1);
transition: color .2s var(--glide), gap .4s var(--spring);
}
.gmore:hover { color: var(--p-acc); gap: var(--s2); }
.card, .tile {
position: relative;
background-color: var(--pane, rgba(255, 255, 255, .8));
background-image: radial-gradient(42% 170% at var(--mx, 50%) var(--my, 0%),
rgba(255, 255, 255, calc(var(--lit) * .82)), rgba(255, 255, 255, 0) 68%);
box-shadow: 0 0 0 1px rgba(70, 50, 85, .11),
inset 0 1px 0 rgba(255, 255, 255, .9),
0 1px 2px rgba(70, 50, 85, .06),
0 10px 24px -14px rgba(70, 50, 85, .36);
transition: background-color .3s var(--glide), transform .5s var(--spring),
box-shadow .35s var(--glide), --lit .45s var(--glide);
}
.card::before, .tile::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
padding: 1px; pointer-events: none;
background: radial-gradient(34% 150% at var(--mx, 50%) var(--my, 0%),
rgba(255, 255, 255, calc(var(--lit) * .95)), rgba(255, 255, 255, 0) 72%),
linear-gradient(158deg, rgba(255, 255, 255, .96),
rgba(255, 255, 255, .34) 44%, rgba(150, 120, 165, .2));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .9; transition: opacity .35s var(--glide);
}
.card:hover, .tile:hover, .card:focus-visible, .tile:focus-visible {
--lit: 1; transform: translateY(-3px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
0 2px 4px rgba(70, 50, 85, .05),
calc(var(--tx, 0) * -10px)
calc(16px + var(--ty, 0) * -5px)
32px -16px rgba(70, 50, 85, .4);
}
.card:hover, .tile:hover {
transition: background-color .3s var(--glide), transform .12s linear,
box-shadow .12s linear, --lit .45s var(--glide);
}
.card:hover::before, .tile:hover::before,
.card:focus-visible::before, .tile:focus-visible::before { opacity: 1; }
.card:active, .tile:active { transform: translateY(-1px) scale(.996);
transition: transform 110ms var(--glide); }
@media (prefers-reduced-motion: reduce) {
.card, .tile, .card:hover, .tile:hover { transform: none }
}
.cards { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
.card.feat {
display: flex; flex-direction: column; gap: var(--s2);
padding: var(--s6) var(--s5) var(--s5); margin-bottom: var(--s2);
border-radius: var(--r3);
}
.feat .fk { font-size: var(--t-small); color: var(--p-acc); }
.feat .ct { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
font-weight: 500; letter-spacing: -.022em; line-height: 1.28;
text-wrap: balance; }
.feat .cs { -webkit-line-clamp: 3; font-size: var(--t-body); line-height: 1.75; }
.feat .fm { margin-top: var(--s2); display: flex; gap: var(--s4);
font-size: var(--t-small); color: var(--p-ink2);
font-variant-numeric: tabular-nums; }
.card {
position: relative;
display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s4);
align-items: baseline;
padding: var(--s4); border-radius: var(--r2);
text-decoration: none; color: inherit;
}
.card:hover, .card:focus-visible { --pane: rgba(255, 255, 255, .92); }
.cbody { display: block; min-width: 0; }
.ct { display: block; font-family: var(--font-round); font-weight: 400;
font-size: var(--t-body); letter-spacing: -.006em; line-height: 1.45; }
.cs { margin-top: var(--s2); font-size: var(--t-small); line-height: 1.6;
color: var(--p-ink2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; }
.cm { font-family: var(--font-round); font-size: var(--t-small);
color: var(--p-ink2); font-variant-numeric: tabular-nums lining-nums;
letter-spacing: .01em; }
.cm i { display: block; margin-top: 1px; font-style: normal;
font-size: var(--t-micro); color: var(--p-ink3); }
.tiles { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 40rem) {
.tiles { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
}
.tile {
--a: color-mix(in oklab, var(--p-rose) calc(100% - var(--i, 0) * 50%), var(--p-acc));
--b: color-mix(in oklab, var(--p-acc) calc(100% - var(--i, 0) * 45%), var(--p-sky));
display: flex; flex-direction: column; gap: var(--s1);
padding: var(--s5) var(--s4) var(--s4);
border-radius: var(--r3); text-decoration: none; color: inherit;
min-height: 8.75rem; overflow: hidden;
background-color: color-mix(in srgb, var(--a) 9%, var(--pane, rgba(255, 255, 255, .8)));
}
.tile > * { position: relative; }
.tile:hover, .tile:focus-visible {
--pane: rgba(255, 255, 255, .92);
}
.tt { display: block; font-family: var(--font-round); font-weight: 500;
font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem);
letter-spacing: -.02em; line-height: 1.2; color: var(--p-ink); }
.td { display: block; font-size: var(--t-small); color: var(--p-ink2); text-wrap: pretty; }
.ti { margin-top: auto; padding-top: var(--s3);
display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px;
height: calc(var(--s3) + 2 * 1.6rem + 6px); overflow: hidden; }
@media (max-width: 39.99rem) {
.tile { min-height: 0; }
.ti { height: auto; }
}
.ti i { font-style: normal; font-size: var(--t-micro); line-height: 1.6rem;
height: 1.6rem; padding: 0 .6rem; border-radius: var(--rp); white-space: nowrap;
color: color-mix(in oklab, var(--a) 55%, var(--p-ink));
background: color-mix(in srgb, var(--a) 11%, rgba(255, 255, 255, .6)); }
.tile[data-ext]::after {
content: "↗"; position: absolute; top: var(--s3); right: var(--s3);
font-size: var(--t-micro); color: var(--p-ink3);
transition: color .2s var(--glide), translate .4s var(--spring);
}
.tile[data-ext]:hover::after { color: var(--p-acc); translate: 1px -1px; }
.foot { position: relative; z-index: 1; padding: 0 var(--s5) var(--s8);
text-align: center; color: var(--p-ink3); font-size: var(--t-micro); line-height: 2.1; }
.foot::before {
content: ""; display: block; height: 1px; width: var(--hold);
margin: 0 auto var(--s7);
background: linear-gradient(90deg, transparent,
color-mix(in srgb, var(--p-ink) 26%, transparent) 24%,
color-mix(in srgb, var(--p-ink) 26%, transparent) 76%, transparent);
}
.foot a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent;
transition: color .2s, border-color .2s; }
.foot a:hover { color: var(--p-acc); border-color: currentColor; }
.foot .row { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }
.js .rise { opacity: 0; transform: translateY(18px); }
.js .rise.in { opacity: 1; transform: none;
transition: opacity .7s var(--glide), transform .85s var(--spring); }
@media (prefers-reduced-motion: reduce) {
.rise { opacity: 1; transform: none }
.ava::before, .ava::after, .ava .halo, .cue i { animation: none !important }
.portal #petals { display: none }
}
@media (max-width: 34rem) {
.hero { padding-top: var(--s9) }
.ava { width: 104px; height: 104px }
.ava img { width: 96px; height: 96px }
}
@property --u { syntax: "<percentage>"; inherits: false; initial-value: 120%; }
@property --ring { syntax: "<number>"; inherits: false; initial-value: 0; }
.js .below .rise { opacity: 1; transform: none; }
.ava::before, .ava::after, .ava .halo { animation: none; }
.typed .caret {
-webkit-mask: linear-gradient(90deg, #000 calc(var(--u) - 22%), transparent var(--u));
mask: linear-gradient(90deg, #000 calc(var(--u) - 22%), transparent var(--u));
}
.typed { position: relative; }
.typed .caret { display: none !important; }
.typed .caret {
position: absolute; left: 0; right: 0; bottom: -.4rem; width: auto; height: 2px; margin: 0;
border-radius: 2px; vertical-align: 0; opacity: .85; animation: none;
background: linear-gradient(90deg, var(--p-rose), var(--p-acc), var(--p-sky));
}
.js .typed .caret { --u: 0%; }
.js #tw { opacity: 0; filter: blur(3px); }
.typed.on #tw { opacity: 1; filter: none; transition: opacity 1s var(--glide), filter 1s var(--glide); }
.typed.on .caret { --u: 122%; transition: --u 1.6s cubic-bezier(.45, .05, .25, 1) .2s; }
.lk { position: relative; }
.lk::after {
content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
background: conic-gradient(from -90deg,
var(--p-rose), var(--p-acc) calc(var(--ring) * .5turn),
var(--p-sky) calc(var(--ring) * 1turn), transparent calc(var(--ring) * 1turn + 50deg));
-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
opacity: 0;
transition: --ring .8s cubic-bezier(.45, .05, .25, 1), opacity .3s var(--glide);
}
.lk:hover::after, .lk:focus-visible::after { --ring: 1; opacity: .9; }
.card:hover, .tile:hover, .card:focus-visible, .tile:focus-visible { transform: none; }
.card:active, .tile:active { transform: none; }
.card:hover, .tile:hover {
box-shadow: 0 0 0 1px rgba(70, 50, 85, .14), inset 0 1px 0 rgba(255, 255, 255, .95),
0 1px 2px rgba(70, 50, 85, .06), 0 12px 28px -16px rgba(70, 50, 85, .4);
}
@media (prefers-reduced-motion: reduce) {
.typed .caret { --u: 122%; transition: none; }
}
.tnav { display: none; }
@media (min-width: 52rem) {
.tnav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.2rem); }
.tnav a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
font-size: 16px; color: var(--p-ink2); transition: color .2s var(--glide); }
.tnav a:hover { color: var(--p-acc); }
.tnav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round; }
.ib.only-m { display: none; }
}
@media (min-width: 52rem) {
.top { padding-inline: clamp(2rem, 4vw, 4.5rem); }
.tnav svg { stroke: url(#tnavg); stroke-width: 1.7; }
.tnav a { color: var(--p-ink); }
}
@media (min-width: 52rem) {
.top { padding-top: clamp(1.25rem, 2.6vw, 2rem); padding-bottom: clamp(1.25rem, 2.6vw, 2rem); }
.tnav, .top .acts { position: relative; padding: .35rem .45rem; border-radius: var(--rp);
background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .22));
-webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 26px -16px rgba(70, 50, 85, .45); }
.tnav::before, .top .acts::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(160deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .45) 45%,
rgba(150, 120, 165, .5));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; }
.tnav { gap: .2rem; }
.tnav a { padding: .55rem 1rem; border-radius: var(--rp); transition: background .25s var(--glide), color .2s var(--glide); }
.tnav a:hover { background: rgba(255, 255, 255, .35); }
.top .acts { gap: .15rem; }
.ib { width: 42px; height: 42px; }
.ib::before { background: rgba(255, 255, 255, .35); box-shadow: none; }
.ib svg { width: 20px; height: 20px; }
}
@media (min-width: 52rem) {
.tnav a { font-family: var(--font-quote); font-size: 17px; letter-spacing: .005em;
color: color-mix(in srgb, var(--p-ink) 82%, transparent); padding: .5rem 1.05rem; }
.tnav a:hover { color: var(--p-ink); }
}
@media (min-width: 52rem) {
.top .mark { position: absolute; left: clamp(2rem, 4vw, 4.5rem); width: 84px; }
.tnav { --shift: 108px; }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.tnav { animation: navShift linear both; animation-timeline: scroll(root block);
animation-range: 26svh 66svh; }
}
}
@supports not (animation-timeline: scroll()) { .tnav { translate: var(--shift) 0; } }
@media (prefers-reduced-motion: reduce) { .tnav { translate: var(--shift) 0; } }
.ava { margin-bottom: var(--s7); }
.logo { width: min(68vw, 22rem); }
.typed { margin-top: var(--s6); }
}
@keyframes navShift { to { translate: var(--shift) 0; } }
.tnav a:focus-visible, .ib:focus-visible { outline: 2px solid var(--p-acc); outline-offset: 3px; border-radius: 999px; }