:root {
--ground: #F5F4F0;
--surface: #ECEBE6;
--sheet-paper: #F2F0E9;
--floating-fill: #F5F4F0;
--ink: #151515;
--ink-2: #5F5E59;
--ink-3: #A3A29C;
--hairline: rgba(21, 21, 21, .08);
--silk-blue: #428FF5;
--silk-cream: #F2F0E6;
--silk-pale-gold: #FAEDB8;
--silk-gold: #FAB84D;
--halo-sky: #BFD3F5;
--halo-sand: #EFE2BE;
--halo-lilac: #C9B7EA;
--halo-white: #FBFAF6;
--grain: .03;
--halo-opacity: .9;
--shadow-artwork-alpha: .14;
--shadow-artwork: 0 12px 16px rgba(0, 0, 0, var(--shadow-artwork-alpha));
--shadow-pill: 0 10px 13px rgba(0, 0, 0, .14);
--shadow-circle: 0 6px 9px rgba(0, 0, 0, .08);
--shadow-floating: 0 10px 15px rgba(0, 0, 0, .10);
--shadow-lift: 0 22px 30px rgba(0, 0, 0, .16);
--hairline-strong: rgba(21, 21, 21, .16);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--warm-filter: sepia(.42) saturate(1.4) hue-rotate(-12deg) brightness(1.05) contrast(1.03);
--serif: ui-serif, "New York", Georgia, serif;
--sans: -apple-system, "SF Pro Text", system-ui, sans-serif;
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
:root {
--ground: #111113;
--surface: #1C1C20;
--floating-fill: #1C1C20;
--ink: #F3F2EE;
--ink-2: #A09F98;
--ink-3: #5E5D58;
--hairline: rgba(255, 255, 255, .10);
--grain: .05;
--halo-opacity: .5;
--shadow-artwork-alpha: .45;
--shadow-pill: 0 10px 13px rgba(0, 0, 0, .40);
--shadow-circle: 0 6px 9px rgba(0, 0, 0, .30);
--shadow-floating: 0 10px 15px rgba(0, 0, 0, .30);
--shadow-lift: 0 22px 30px rgba(0, 0, 0, .5);
--hairline-strong: rgba(255, 255, 255, .18);
}
}
[lang="ja"] {
--serif: ui-serif, "New York", "Hiragino Mincho ProN", "Noto Serif CJK JP", Georgia, serif;
--sans: -apple-system, "SF Pro Text", "Hiragino Sans", "Noto Sans CJK JP", system-ui, sans-serif;
}
[lang="zh-Hans"] {
--serif: ui-serif, "New York", "Songti SC", "Noto Serif CJK SC", Georgia, serif;
--sans: -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}
[lang="zh-Hant"] {
--serif: ui-serif, "New York", "Songti TC", "Noto Serif CJK TC", Georgia, serif;
--sans: -apple-system, "SF Pro Text", "PingFang TC", "Noto Sans CJK TC", system-ui, sans-serif;
}
[lang="en"] {
--serif: ui-serif, "New York", Georgia, serif;
--sans: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
[lang] { font-family: var(--sans); }
*, *::before, *::after { box-sizing: border-box; }
html {
background: var(--ground);
color: var(--ink);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
::selection { background: var(--silk-pale-gold); color: #151515; }
body {
margin: 0;
background: var(--ground);
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 50;
pointer-events: none;
opacity: var(--grain);
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
:lang(ja) { line-break: strict; }
h1, h2, h3, p, figure, hgroup { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { margin: 0; padding: 0; }
b, strong { font-weight: 500; }
img { display: block; max-width: 100%; }
picture { display: contents; }
p, li { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
a:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
}
main:focus { outline: none; }
main { overflow-wrap: break-word; }
:is(h1, h2, h3, .name, .toc a, .hero-lead, .closing-lead, .encore-title):lang(ja),
:is(h1, h2, h3, .name, .toc a, .hero-lead, .closing-lead, .encore-title):lang(zh) {
word-break: keep-all;
overflow-wrap: break-word;
}
.label {
font-size: 11px;
line-height: 1.6;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-2);
}
.wrap {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
.vh {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip {
position: absolute;
top: -100px;
left: 16px;
z-index: 60;
padding: 10px 18px;
border-radius: 999px;
background: var(--ink);
color: var(--ground);
font-size: 15px;
}
.skip:focus { top: 14px; }
.top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 72px;
}
.wordmark {
display: flex;
align-items: center;
min-height: 44px;
}
.wordmark img {
width: auto;
height: 17px;
}
.top-nav {
display: flex;
align-items: center;
gap: 28px;
font-size: 15px;
color: var(--ink-2);
}
.top-nav > a,
.lang summary {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.top-nav a[aria-current="page"] { color: var(--ink); }
.lang { position: relative; }
.lang summary {
gap: 7px;
cursor: pointer;
list-style: none;
white-space: nowrap;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover {
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
.lang summary::after {
content: "";
width: 6px;
height: 6px;
margin-top: -4px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
}
.lang[open] summary { color: var(--ink); }
.lang[open] summary::after {
margin-top: 3px;
transform: rotate(-135deg);
}
.lang ul {
position: absolute;
top: calc(100% + 2px);
right: -18px;
z-index: 20;
min-width: 172px;
padding: 8px 0;
list-style: none;
border-radius: 12px;
background: var(--floating-fill);
box-shadow: var(--shadow-floating), inset 0 0 0 1px var(--hairline);
}
.lang li a {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 22px 9px 18px;
white-space: nowrap;
}
.lang li a::before {
content: "";
flex: none;
width: 4px;
height: 4px;
border-radius: 50%;
}
.lang li a[aria-current] { color: var(--ink); }
.lang li a[aria-current]::before { background: currentColor; }
.badge {
display: inline-block;
vertical-align: top;
border-radius: 9px;
}
.badge img {
width: auto;
height: 52px;
}
h2 {
margin: 8px 0 20px;
font-family: var(--serif);
font-size: 40px;
line-height: 1.15;
letter-spacing: -.01em;
text-wrap: balance;
}
.more {
font-size: 13px;
color: var(--ink-2);
}
.more a::after {
content: "→";
content: "→" / "";
display: inline-block;
margin-left: .4em;
}
@property --cut { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --hr { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --amb1 { syntax: "<color>"; inherits: true; initial-value: #BFD3F5; }
@property --amb2 { syntax: "<color>"; inherits: true; initial-value: #F3D9A8; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes line-up {
from { clip-path: inset(0 0 100% 0); transform: translateY(.32em); }
to { clip-path: inset(0 0 -12% 0); transform: none; }
}
.home-page { overflow-x: clip; }
.spectrum,
.story { margin-inline: calc(50% - 50vw); }
.home-page .top { position: relative; z-index: 40; animation: fade-in .7s ease .05s backwards; }
@supports (animation-timeline: scroll()) {
.home-page .top { position: sticky; top: 0; }
.home-page .top::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 calc(50% - 50vw);
background: color-mix(in srgb, var(--ground) 78%, transparent);
-webkit-backdrop-filter: saturate(1.3) blur(18px);
backdrop-filter: saturate(1.3) blur(18px);
box-shadow: 0 1px 0 var(--hairline);
opacity: 0;
animation: frost linear both;
animation-timeline: scroll(root);
animation-range: 0 160px;
}
}
@keyframes frost { to { opacity: 1; } }
.hero { padding-top: clamp(12px, 3.4vw, 48px); }
.hero h1 {
margin: 0;
font-family: var(--serif);
font-size: clamp(46px, 6.8vw, 100px);
line-height: 1.04;
letter-spacing: -.025em;
text-wrap: balance;
animation: line-up 1.15s var(--ease-out) .12s backwards;
}
.hero h1:lang(zh),
.hero h1:lang(ja) { letter-spacing: .01em; }
html[lang="ja"] .hero h1 { font-size: clamp(40px, 5.4vw, 80px); }
.hero-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 22px 48px;
margin-top: clamp(18px, 2.2vw, 30px);
}
.hero-lead,
.hero-row .hero-meta { animation: fade-up .9s var(--ease-out) .38s backwards; }
.hero-lead {
max-width: 27em;
text-wrap: balance;
overflow-wrap: anywhere;
font-size: clamp(17px, 1.35vw, 20px);
line-height: 1.6;
color: var(--ink-2);
}
.get {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 18px;
}
.hero-meta {
font-size: 13px;
color: var(--ink-2);
}
.spectrum {
--h: clamp(360px, min(40vw, 100svh - 330px), 600px);
--open: calc(var(--h) * .75);
position: relative;
isolation: isolate;
margin-top: clamp(36px, 4.4vw, 64px);
padding: 0 clamp(20px, 3.6vw, 56px);
}
.spectrum::before {
content: "";
position: absolute;
z-index: -1;
inset: 4% 8% 18%;
background:
radial-gradient(closest-side at 22% 40%, var(--halo-sky), transparent 72%),
radial-gradient(closest-side at 48% 70%, var(--silk-pale-gold), transparent 70%),
radial-gradient(closest-side at 70% 35%, var(--halo-lilac), transparent 70%),
radial-gradient(closest-side at 86% 70%, var(--halo-sand), transparent 72%);
filter: blur(48px);
opacity: calc(var(--halo-opacity) * .8);
animation: fade-in 1.6s ease .6s backwards;
}
.band {
display: flex;
gap: clamp(6px, .6vw, 10px);
max-width: 1720px;
margin: 0 auto;
}
.slice {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
cursor: pointer;
transition: flex .9s var(--ease-out);
-webkit-tap-highlight-color: transparent;
}
.slice:has(:checked) { flex: 0 0 var(--open); cursor: default; }
.slice:nth-child(2) { --i: 1; }
.slice:nth-child(3) { --i: 2; }
.slice:nth-child(4) { --i: 3; }
.slice:nth-child(5) { --i: 4; }
.slice:nth-child(6) { --i: 5; }
.slice:nth-child(7) { --i: 6; }
.slice:nth-child(8) { --i: 7; }
.slice:nth-child(9) { --i: 8; }
.slice:nth-child(10) { --i: 9; }
.frame {
position: relative;
height: var(--h);
overflow: hidden;
border-radius: 4px;
background: var(--sheet-paper);
box-shadow: var(--shadow-artwork);
transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
animation: print 1.05s var(--ease-out) calc(.42s + var(--i, 0) * 55ms) backwards;
}
@keyframes print {
from { clip-path: inset(100% 0 0 0 round 4px); transform: translateY(56px); box-shadow: 0 0 0 transparent; }
to { clip-path: inset(0 round 4px); transform: none; }
}
.s-golden-hour { animation: unfold 1s var(--ease-out) 1.05s backwards; }
@keyframes unfold { from { flex: 1 1 0; } }
.slice:not(:has(:checked)):hover .frame { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.slice:has(:focus-visible) .frame { outline: 2px solid var(--ink); outline-offset: 3px; }
.frame .art,
.cmp .filt {
position: absolute;
inset: 0;
}
.frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--x, 50%) var(--y, 50%);
transition: object-position .9s var(--ease-out);
}
.cmp {
position: absolute;
inset: 0;
display: none;
transition: --cut .8s var(--ease-out);
}
.slice:has(:checked) .cmp { display: block; animation: sweep 1.25s var(--ease-out) .25s backwards; }
.slice.s-golden-hour:has(:checked) .cmp { animation-delay: 1.85s; }
@keyframes sweep { from { --cut: 0%; } to { --cut: 50%; } }
.cmp .filt { clip-path: inset(0 var(--cut) 0 0); }
.cmp .filt img { filter: var(--warm-filter); transition: filter .4s ease; }
.cmp .seam {
position: absolute;
top: 0;
bottom: 0;
left: calc(100% - var(--cut));
width: 2px;
margin-left: -1px;
background: linear-gradient(#FAEDB8, #FFFFFF 40%, #BFD3F5);
box-shadow: 0 0 10px rgba(255, 246, 226, .8), 0 0 0 .5px rgba(0, 0, 0, .08);
}
.cmp .chip {
position: absolute;
bottom: 14px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
letter-spacing: .02em;
white-space: nowrap;
color: #F3F2EE;
background: rgba(21, 21, 21, .64);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: opacity .3s ease;
}
.cmp .chip.l { left: 14px; }
.cmp .chip.r { right: 14px; }
.cmp .zone {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
width: 36%;
}
.cmp .zone.l { left: 0; }
.cmp .zone.r { right: 0; }
@media (hover: hover) {
.cmp:has(.zone.l:hover) { --cut: 0%; }
.cmp:has(.zone.r:hover) { --cut: 100%; }
.cmp:has(.zone.l:hover) .chip.r,
.cmp:has(.zone.r:hover) .chip.l { opacity: 0; }
.slice:has(.capsule:hover) .cmp { --cut: 0%; }
.slice:has(.capsule:hover) .cmp .filt img { filter: none; }
.slice:has(.capsule:hover) .cmp .chip { opacity: 0; }
}
.capsule {
position: absolute;
z-index: 3;
top: 14px;
left: 50%;
display: none;
align-items: center;
gap: 8px;
height: 38px;
padding: 3px 12px 3px 3px;
border-radius: 999px;
font-size: 12px;
letter-spacing: .02em;
white-space: nowrap;
color: #F3F2EE;
background: rgba(21, 21, 21, .82);
box-shadow: 0 6px 12px rgba(0, 0, 0, .18);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0;
translate: -50% -8px;
transition: opacity .4s ease .25s, translate .6s var(--ease-out) .25s;
cursor: help;
}
.capsule img {
width: 46px;
height: 32px;
border-radius: 999px;
}
.slice:has(:checked) .capsule { display: inline-flex; opacity: 1; translate: -50% 0; }
@starting-style {
.slice:has(:checked) .capsule { opacity: 0; translate: -50% -8px; }
}
.s-golden-hour .capsule { animation: fade-in .6s ease 2.4s backwards; }
.lab {
position: relative;
min-height: 74px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--hairline-strong);
animation: fade-up .8s var(--ease-out) calc(.75s + var(--i, 0) * 55ms) backwards;
}
.lab::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 1px;
height: 9px;
background: var(--ink-2);
}
.lab .name {
display: block;
font-size: 13px;
line-height: 1.35;
color: var(--ink-2);
overflow-wrap: anywhere;
}
.lab .cap {
display: block;
max-height: 0;
overflow: hidden;
font-size: 13px;
line-height: 1.45;
color: var(--ink-2);
opacity: 0;
transition: opacity .4s ease .3s;
}
.slice:has(:checked) .lab::before { height: 14px; background: var(--ink); }
.slice:has(:checked) .name { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.slice:has(:checked) .cap { max-height: none; margin-top: 2px; opacity: 1; }
.s-clear { --x: 50%; --y: 40%; }
.s-morning-mist { --x: 68%; --y: 62%; }
.s-golden-hour { --x: 52%; --y: 34%; }
.s-blue-hour { --x: 30%; --y: 16%; }
.s-epic { --x: 66%; --y: 30%; }
.s-plein-air { --x: 50%; --y: 34%; }
.s-stillness { --x: 40%; --y: 78%; }
.s-fieldnote { --x: 30%; --y: 74%; }
.s-silkscreen { --x: 44%; --y: 72%; }
.s-papercraft { --x: 40%; --y: 78%; }
.legend {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 12px 40px;
max-width: 1720px;
margin: 22px auto 0;
animation: fade-up .9s var(--ease-out) 2.2s backwards;
}
.legend p { max-width: 44em; color: var(--ink-2); }
.legend b { color: var(--ink); }
.legend .hint { font-size: 13px; }
@media (hover: none) { .legend .hint { display: none; } }
.story {
--pw: clamp(260px, min(26vw, (100svh - 150px) * .46), 372px);
--gap: clamp(56px, 8vw, 136px);
--capw: min(500px, 100vw - 48px - var(--gap) - var(--pw));
position: relative;
margin-top: clamp(96px, 12vw, 176px);
overflow-x: clip;
}
.pin { position: relative; }
.story-grid {
display: grid;
grid-template-columns: var(--capw) auto;
justify-content: center;
align-items: center;
gap: 48px var(--gap);
padding: 0 24px;
}
.caps { position: relative; padding-left: 30px; }
.caps ol { display: grid; gap: 36px; list-style: none; }
.ruler {
position: absolute;
top: 8px;
bottom: 8px;
left: 0;
width: 1px;
background: var(--hairline-strong);
}
.ruler::after {
content: "";
position: absolute;
inset: 0;
background: var(--ink);
transform-origin: top;
}
.step h3 {
margin: 0;
font-family: var(--serif);
font-size: clamp(32px, 3.3vw, 50px);
line-height: 1.1;
letter-spacing: -.01em;
}
.step p {
max-width: 24em;
margin-top: 14px;
font-size: clamp(16px, 1.25vw, 19px);
color: var(--ink-2);
}
.stage { position: relative; isolation: isolate; justify-self: center; }
.stage::before {
content: "";
position: absolute;
z-index: -1;
inset: -14% -46%;
background:
radial-gradient(closest-side at 32% 38%, var(--amb1), transparent 70%),
radial-gradient(closest-side at 68% 62%, var(--amb2), transparent 70%);
filter: blur(56px);
opacity: var(--halo-opacity);
}
.phone {
width: var(--pw);
aspect-ratio: 402 / 874;
padding: calc(var(--pw) * .028);
border-radius: calc(var(--pw) * .16);
background: #1A1A1C;
box-shadow:
inset 0 0 0 1.5px #3A3A3E,
inset 0 0 0 3px #0E0E10,
0 34px 56px rgba(0, 0, 0, .22),
0 8px 14px rgba(0, 0, 0, .12);
}
.screen {
--g: #F5F4F0;
--s: #ECEBE6;
--k: #151515;
--k2: #5F5E59;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: calc(var(--pw) * .134);
background: var(--g);
color: var(--k);
container-type: inline-size;
}
.screen > * { position: absolute; }
.screen img { width: 100%; height: 100%; object-fit: cover; }
.close { top: 14cqw; left: 5cqw; z-index: 3; width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--s); }
.close::before,
.close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 4.2cqw;
height: .45cqw;
border-radius: 1px;
background: var(--k);
}
.close::before { transform: translate(-50%, -50%) rotate(45deg); }
.close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.source {
top: 13.4cqw;
left: 37cqw;
z-index: 3;
width: 26cqw;
height: 12cqw;
overflow: hidden;
border-radius: 99px;
box-shadow: 0 0 0 .5cqw var(--g), 0 1.6cqw 3cqw rgba(0, 0, 0, .18);
}
.pager { top: 34cqw; left: 0; width: 100%; height: 120cqw; overflow: hidden; }
.track { display: flex; gap: 4cqw; padding-left: 13cqw; }
.card { flex: none; width: 74cqw; }
.card .sheet {
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 1cqw;
background: #F2F0E9;
box-shadow: 0 2.4cqw 3.6cqw rgba(0, 0, 0, .16);
}
.nm {
margin-top: 4.4cqw;
font-family: var(--serif);
font-size: 5.4cqw;
line-height: 1.2;
text-align: center;
}
.nm .lt {
display: block;
margin-top: .8cqw;
font-family: var(--sans);
font-size: 2.6cqw;
letter-spacing: .14em;
color: var(--k2);
}
.orbwrap {
top: 168cqw;
right: 0;
left: 0;
display: grid;
justify-items: center;
gap: 2cqw;
font-size: 3.2cqw;
color: var(--k2);
}
.orb {
position: relative;
width: 19cqw;
height: 19cqw;
overflow: hidden;
border-radius: 50%;
background:
radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 34%),
radial-gradient(circle at 50% 62%, #F6F4EE, #E4E1D8 78%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .8),
inset 0 -2.6cqw 5cqw rgba(37, 64, 110, .16),
0 2.6cqw 5cqw rgba(0, 0, 0, .14);
}
.orb::before {
content: "";
position: absolute;
inset: 22% 6% 30% 6%;
border-radius: 50%;
background: conic-gradient(from 160deg, #428FF5, #BFD3F5, #F2F0E6, #FAEDB8, #FAB84D, #F2F0E6, #428FF5);
transform: rotate(-18deg);
filter: blur(1cqw);
-webkit-mask: radial-gradient(closest-side, transparent 58%, #000 62%, #000 86%, transparent 92%);
mask: radial-gradient(closest-side, transparent 58%, #000 62%, #000 86%, transparent 92%);
}
.ripple {
top: 168cqw;
left: 40.5cqw;
z-index: 4;
width: 19cqw;
height: 19cqw;
border-radius: 50%;
box-shadow: 0 0 0 .6cqw rgba(250, 184, 77, .6);
opacity: 0;
}
.silk {
inset: -20%;
z-index: 4;
background:
radial-gradient(closest-side at 20% 30%, #428FF5, transparent 70%),
radial-gradient(closest-side at 75% 25%, #FAEDB8, transparent 70%),
radial-gradient(closest-side at 70% 75%, #FAB84D, transparent 65%),
radial-gradient(closest-side at 25% 80%, #BFD3F5, transparent 70%),
#F2F0E6;
filter: blur(6cqw) saturate(.85);
opacity: 0;
}
.status {
top: 14cqw;
left: 50%;
z-index: 6;
display: flex;
align-items: center;
gap: 1.8cqw;
height: 7.6cqw;
padding: 0 3.6cqw 0 3cqw;
border-radius: 99px;
font-size: 3.2cqw;
font-weight: 500;
letter-spacing: .04em;
white-space: nowrap;
background: var(--g);
box-shadow: 0 1.6cqw 3cqw rgba(0, 0, 0, .1);
translate: -50% 0;
opacity: 0;
}
.status::before { content: ""; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--k); }
.work { top: 36cqw; left: 13cqw; z-index: 5; width: 74cqw; }
.work .sheet {
position: relative;
aspect-ratio: 3 / 4;
border-radius: 1cqw;
box-shadow: 0 3cqw 5cqw rgba(0, 0, 0, .2);
}
.paper { position: absolute; inset: 0; overflow: hidden; border-radius: 1cqw; background: #F2F0E9; }
.paper .photo { position: absolute; top: 0; left: 0; width: 100%; height: 50%; }
.paper .developed { position: absolute; inset: 0; }
.dev {
position: absolute;
top: 100%;
right: -2%;
left: -2%;
height: 3cqw;
margin-top: -1.5cqw;
background: linear-gradient(90deg, transparent, #FAEDB8 20%, #FFF6E2 50%, #BFD3F5 80%, transparent);
filter: blur(.6cqw);
opacity: 0;
}
.edge {
position: absolute;
inset: -1.6cqw;
padding: 1.1cqw;
border-radius: 2.2cqw;
background: conic-gradient(from 0deg, #FAB84D, #F6DA97 calc(var(--p) * 45%), #428FF5 calc(var(--p) * 100%), transparent 0);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
}
.actions { top: 176cqw; right: 0; left: 0; z-index: 6; display: flex; justify-content: center; gap: 3cqw; }
.save {
display: grid;
place-items: center;
height: 13cqw;
padding: 0 9cqw;
border-radius: 99px;
font-size: 4cqw;
font-weight: 600;
color: var(--k);
background: var(--s);
box-shadow: 0 2.4cqw 3.2cqw rgba(0, 0, 0, .1);
}
.share {
display: grid;
place-items: center;
width: 13cqw;
height: 13cqw;
border-radius: 50%;
color: var(--k);
background: var(--s);
box-shadow: 0 2.4cqw 3.2cqw rgba(0, 0, 0, .1);
}
.share svg { width: 5.6cqw; height: 5.6cqw; }
.ui,
.ripple { opacity: 0; }
.liftbox { display: none; }
.liftbox {
--k: 1.3;
--sw: 58px;
--wg: 10px;
--W: calc(var(--pw) * .6986 * var(--k));
--dx: calc((var(--capw) + var(--gap)) / 2);
--dy: calc(var(--pw) * -.2535 - 36px);
position: absolute;
z-index: 5;
top: calc(50% + 72px - var(--W) * 2 / 3);
left: calc(50% - var(--W) / 2);
width: var(--W);
aspect-ratio: 3 / 4;
isolation: isolate;
}
.liftbox::before {
content: "";
position: absolute;
z-index: -1;
inset: -22% -34%;
border-radius: 50%;
background: conic-gradient(from var(--hr), #BFD3F5, #EFE2BE 18%, #FBFAF6 32%, #C9DAF5 50%, #EAD9B0 68%, #FBFAF6 84%, #BFD3F5);
filter: blur(46px);
opacity: 0;
}
.lift {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 4px;
background: #F2F0E9;
box-shadow: 0 34px 48px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .5);
}
.lift img,
.sl img { width: 100%; height: 100%; object-fit: cover; }
.glint {
position: absolute;
inset: -10% -60%;
background: linear-gradient(100deg, transparent 38%, rgba(255, 250, 236, .8) 50%, transparent 62%);
mix-blend-mode: soft-light;
transform: translateX(-70%);
opacity: 0;
}
.wing { position: absolute; top: 0; bottom: 0; display: flex; gap: var(--wg); }
.wing.l { right: calc(100% + var(--wg)); flex-direction: row-reverse; }
.wing.r { left: calc(100% + var(--wg)); }
.sl {
--j: 0;
width: var(--sw);
height: 100%;
overflow: hidden;
border-radius: 4px;
background: var(--sheet-paper);
box-shadow: var(--shadow-artwork);
opacity: 0;
}
.sl img { object-position: var(--o, 50%) 50%; }
.sl:nth-child(2) { --j: 1; }
.sl:nth-child(3) { --j: 2; }
.sl:nth-child(4) { --j: 3; }
.sl:nth-child(5) { --j: 4; }
.w-morning-mist { --o: 66%; }
.w-golden-hour { --o: 52%; }
.w-blue-hour { --o: 30%; }
.w-epic { --o: 62%; }
.w-stillness { --o: 40%; }
.w-fieldnote { --o: 30%; }
.w-silkscreen { --o: 44%; }
.w-wash { --o: 40%; }
.encore-title {
position: absolute;
bottom: calc(100% + 40px);
left: 50%;
width: max-content;
max-width: calc(100vw - 48px);
font-family: var(--serif);
font-size: clamp(32px, 3.6vw, 56px);
line-height: 1.12;
letter-spacing: -.015em;
text-align: center;
text-wrap: balance;
translate: -50% 0;
opacity: 0;
}
.encore-title:lang(zh),
.encore-title:lang(ja) { letter-spacing: .01em; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.story { height: 420svh; view-timeline: --story block; }
.pin {
position: sticky;
top: 0;
display: grid;
align-items: center;
height: 100svh;
padding-top: 72px;
overflow: clip;
}
.caps { height: clamp(260px, 30svh, 340px); }
.step { position: absolute; top: 0; right: 0; left: 30px; }
.liftbox { display: block; }
.actions { display: none; }
:where(.story .pin *),
.ruler::after,
.stage::before,
.liftbox::before {
animation-duration: auto;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: --story;
animation-range: contain 0% contain 100%;
}
.ruler::after { animation-name: s-ruler; }
.stage::before { animation-name: s-amb; }
.c1 { animation-name: s-c1; }
.c2 { animation-name: s-c2; }
.caps { animation-name: s-caps, s-capsout; animation-range: entry 45% entry 100%, contain 46% contain 50%; }
.phone { animation-name: s-phone; animation-range: entry 35% entry 100%; }
.recede { animation-name: s-recede; animation-range: contain 50% contain 58%; }
.track { animation-name: s-page; }
.ui { animation-name: s-ui; }
.orbwrap .orb { animation-name: s-press; }
.ripple { animation-name: s-ripple; }
.silk { animation-name: s-silk; }
.status { animation-name: s-status; }
.work { animation-name: s-work; }
.edge { animation-name: s-edge; }
.paper .developed { animation-name: s-art; }
.dev { animation-name: s-dev; }
.liftbox { animation-name: s-liftbox; animation-range: contain 50% contain 60%; }
.liftbox::before { animation-name: s-halo; animation-range: contain 51% contain 100%; }
.lift { animation-name: s-liftshow; animation-range: contain 49.8% contain 50.2%; }
.glint { animation-name: s-glint; animation-range: contain 55% contain 62%; }
.sl { animation-name: s-sl; animation-range: contain calc(57% + var(--j) * 2.5%) contain calc(65% + var(--j) * 2.5%); }
.encore-title { animation-name: s-etitle; animation-range: contain 70% contain 82%; }
}
}
@keyframes s-ruler { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes s-phone { from { opacity: 0; transform: translateY(14%) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes s-caps { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes s-capsout { to { opacity: 0; transform: translateY(-24px); } }
@keyframes s-c1 { 0%, 23% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-28px); } }
@keyframes s-c2 { 0%, 26% { opacity: 0; transform: translateY(28px); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes s-page {
0%, 4% { transform: translateX(0); animation-timing-function: cubic-bezier(.62, 0, .3, 1); }
11%, 15% { transform: translateX(-78cqw); animation-timing-function: cubic-bezier(.62, 0, .3, 1); }
22%, 100% { transform: translateX(-156cqw); }
}
@keyframes s-amb {
0%, 4% { --amb1: #BFD3F5; --amb2: #F3D9A8; }
11%, 15% { --amb1: #F6C27A; --amb2: #F0A86A; }
22%, 28% { --amb1: #F0B79A; --amb2: #A7D2D8; }
33%, 44% { --amb1: #8FB4F0; --amb2: #FAEDB8; }
52%, 100% { --amb1: #F3C9A6; --amb2: #FAEDB8; }
}
@keyframes s-ui { 0%, 29% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes s-press { 0%, 27% { transform: scale(1); } 28% { transform: scale(.86); } 29.2% { transform: scale(1.05); } 30.5%, 100% { transform: scale(1); } }
@keyframes s-ripple { 0%, 27.5% { opacity: 0; transform: scale(.9); } 28% { opacity: .9; transform: scale(1); } 32%, 100% { opacity: 0; transform: scale(2); } }
@keyframes s-silk {
0%, 29% { opacity: 0; transform: rotate(-8deg) scale(1.08); }
33%, 44% { opacity: 1; }
50%, 100% { opacity: 0; transform: rotate(12deg) scale(1.26); }
}
@keyframes s-status { 0%, 32% { opacity: 0; } 34%, 43% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes s-work {
0%, 29% { opacity: 0; transform: translateY(-30cqw) scale(.3); }
33% { opacity: 1; transform: none; }
39% { transform: translateY(-1.2cqw) rotate(-.8deg); }
44% { transform: none; }
50%, 100% { opacity: 1; transform: scale(1.03); }
}
@keyframes s-edge { 0%, 33% { --p: 0; opacity: 1; } 44% { --p: 1; opacity: 1; } 46%, 100% { --p: 1; opacity: 0; } }
@keyframes s-art { 0%, 44% { clip-path: inset(0 0 100% 0); } 50%, 100% { clip-path: inset(0); } }
@keyframes s-dev { 0%, 44% { top: 0; opacity: 0; } 45% { opacity: 1; } 50% { top: 100%; opacity: 1; } 52%, 100% { top: 100%; opacity: 0; } }
@keyframes s-recede { from { transform: none; opacity: 1; filter: none; } to { transform: scale(.86); opacity: 0; filter: blur(6px); } }
@keyframes s-liftshow { from { opacity: 0; } to { opacity: 1; } }
@keyframes s-liftbox {
0% { transform: translate(var(--dx), var(--dy)) scale(calc(1.03 / var(--k))); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
100% { transform: none; }
}
@keyframes s-halo {
0% { opacity: 0; --hr: 0deg; transform: scale(.6); }
18% { opacity: .95; transform: scale(1); }
100% { opacity: .7; --hr: 220deg; transform: scale(1.06); }
}
@keyframes s-glint { 0% { transform: translateX(-70%); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }
@keyframes s-sl {
from { opacity: 0; clip-path: inset(100% 0 0 0 round 4px); transform: translateY(48px); }
to { opacity: 1; clip-path: inset(0 round 4px); transform: none; }
}
@keyframes s-etitle {
from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(.3em); }
to { opacity: 1; clip-path: inset(0 0 -15% 0); transform: none; }
}
.closing {
position: relative;
isolation: isolate;
display: grid;
justify-items: center;
gap: 22px;
padding: clamp(96px, 12vw, 168px) 0 24px;
text-align: center;
}
.closing::before {
content: "";
position: absolute;
z-index: -1;
top: 8%;
left: 50%;
width: min(560px, 90vw);
height: 300px;
background:
radial-gradient(closest-side at 38% 50%, var(--halo-sky), transparent 70%),
radial-gradient(closest-side at 64% 50%, var(--silk-pale-gold), transparent 70%);
filter: blur(44px);
opacity: calc(var(--halo-opacity) * .7);
translate: -50% 0;
}
.app-icon {
width: 104px;
height: 104px;
border-radius: 23px;
box-shadow: var(--shadow-artwork);
}
.closing-lead {
max-width: 22em;
font-family: var(--serif);
font-size: clamp(26px, 2.8vw, 40px);
line-height: 1.3;
letter-spacing: -.01em;
text-wrap: balance;
}
.closing .hero-meta { margin-top: -8px; }
@media (prefers-color-scheme: dark) {
.screen { --g: #111113; --s: #1C1C20; --k: #F3F2EE; --k2: #A09F98; }
.silk { filter: blur(6cqw) saturate(.8) brightness(.78); }
.orb {
background:
radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 34%),
radial-gradient(circle at 50% 62%, #2A2A30, #1D1D22 78%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .16),
inset 0 -2.6cqw 5cqw rgba(143, 180, 240, .14),
0 2.6cqw 5cqw rgba(0, 0, 0, .4);
}
.liftbox::before { background: conic-gradient(from var(--hr), #8FB4F0, #E9CF8A 32%, #C9B7EA 64%, #8FB4F0); }
::selection { background: #6A4D1E; color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
.home-page *,
.home-page *::before,
.home-page *::after {
animation-delay: 0s !important;
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
.foot { padding: 56px 0 40px; }
.foot .row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 8px 24px;
}
.foot .row + .row { margin-top: 14px; }
.fm img {
width: auto;
height: 13px;
}
.foot ul {
display: flex;
flex-wrap: wrap;
gap: 0 24px;
list-style: none;
font-size: 15px;
color: var(--ink-2);
}
.foot li a {
display: inline-block;
padding: 4px 0;
}
.foot a[aria-current="page"] { color: var(--ink); }
.copyright {
font-size: 13px;
color: var(--ink-2);
}
.foot .foot-langs {
column-gap: 18px;
margin-top: 18px;
font-size: 13px;
}
.trademark {
max-width: 60em;
margin-top: 22px;
font-size: 12px;
line-height: 1.5;
color: var(--ink-2);
}
.doc {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
column-gap: 64px;
padding: 40px 0 96px;
}
.doc-head,
.doc-body {
grid-column: 2;
max-width: 36em;
}
.doc h1,
.support h1,
.notfound h1 {
margin: 8px 0;
font-family: var(--serif);
font-size: 44px;
line-height: 1.15;
letter-spacing: -.01em;
text-wrap: balance;
}
.updated {
margin-bottom: 40px;
font-size: 15px;
color: var(--ink-2);
}
.toc {
grid-column: 1;
grid-row: 1 / span 2;
align-self: start;
position: sticky;
top: 32px;
font-size: 13px;
line-height: 2;
color: var(--ink-2);
}
.toc .label { margin-bottom: 8px; }
.toc ol { list-style: none; }
.toc a {
display: flex;
gap: .5em;
padding: 1px 0;
line-height: 1.6;
}
.toc li + li { margin-top: 5px; }
.toc .n {
flex: none;
min-width: 1.4em;
font-variant-numeric: tabular-nums;
}
.doc-body h2 {
margin: 48px 0 12px;
font-size: 26px;
line-height: 1.3;
scroll-margin-top: 24px;
}
.doc-body > h2:first-child { margin-top: 0; }
.doc-body h2 em {
margin-right: 7px;
font-style: normal;
color: var(--ink-2);
}
.doc-body h3 {
margin: 28px 0 8px;
font-size: 17px;
font-weight: 500;
line-height: 1.5;
scroll-margin-top: 24px;
}
.doc-body h3 em {
margin-right: 5px;
font-style: normal;
font-weight: 400;
color: var(--ink-2);
}
.doc-body p { margin: 0 0 16px; }
.doc-body ul,
.doc-body ol {
margin: 0 0 16px;
padding-left: 1.2em;
}
.doc-body li { margin: 6px 0; }
.doc-body li::marker { color: var(--ink-2); }
.doc-body a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
text-decoration-color: rgba(21, 21, 21, .3);
text-decoration-color: color-mix(in oklab, currentColor 32%, transparent);
}
.doc-body a:hover { text-decoration-color: currentColor; }
.table {
margin: 20px 0 28px;
overflow-x: auto;
}
.table:focus-visible { outline-offset: 6px; }
.table table {
width: 100%;
min-width: 32em;
border-collapse: collapse;
font-size: 15px;
line-height: 1.5;
}
.table th {
padding: 0 20px 8px 0;
font-size: 11px;
font-weight: 400;
letter-spacing: .08em;
text-align: left;
text-transform: uppercase;
vertical-align: bottom;
color: var(--ink-2);
}
.table td {
padding: 10px 20px 10px 0;
vertical-align: top;
}
.table td:first-child { color: var(--ink-2); }
.table th:last-child,
.table td:last-child { padding-right: 0; }
@media (max-width: 560px) {
.table { overflow-x: visible; }
.table table { min-width: 0; }
.table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.table tr { display: block; padding: 12px 0; border-top: 1px solid var(--hairline); }
.table tr:first-child { border-top: 0; padding-top: 0; }
.table td { display: block; padding: 0; }
.table td + td { margin-top: 4px; }
}
mark.pending {
padding: .05em .2em;
border-radius: 3px;
background: var(--silk-pale-gold);
color: #151515;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.dev-banner {
padding: 10px 20px;
background: var(--silk-pale-gold);
color: #151515;
font-size: 13px;
line-height: 1.5;
text-align: center;
}
.support {
max-width: 40em;
padding: 40px 0 96px;
}
.support-lead {
margin-top: 17px;
color: var(--ink-2);
}
.mail-line { margin: 25px 0 74px; }
.mail {
display: inline-block;
font-family: var(--serif);
font-size: 32px;
line-height: 1.35;
letter-spacing: -.01em;
overflow-wrap: anywhere;
border-bottom: 1px solid rgba(21, 21, 21, .25);
border-bottom-color: color-mix(in oklab, var(--ink) 25%, transparent);
}
.mail:hover {
text-decoration: none;
border-bottom-color: var(--ink);
}
.faq h2 {
margin: 30px 0 0;
font-family: var(--sans);
font-size: 17px;
font-weight: 500;
line-height: 1.6;
letter-spacing: normal;
text-wrap: pretty;
}
.faq h2:first-child { margin-top: 0; }
.faq p {
margin-top: 6px;
color: var(--ink-2);
}
.notfound {
max-width: 40em;
padding: 40px 0 120px;
}
.notfound-text {
margin-top: 12px;
color: var(--ink-2);
}
.notfound .more {
margin-top: 32px;
font-size: 15px;
}
@media (max-width: 860px) {
.hero-row { align-items: flex-start; }
.spectrum { --open: auto; }
.band { flex-direction: column; gap: 6px; }
.slice,
.slice:has(:checked) {
flex: none;
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
column-gap: 12px;
}
.frame { grid-row: 1; grid-column: 2; height: 54px; transition: height .8s var(--ease-out); }
.slice:has(:checked) .frame { height: calc((100vw - 2 * clamp(20px, 3.6vw, 56px) - 94px) * 4 / 3); }
.slice:not(:has(:checked)):hover .frame { transform: none; }
.lab {
grid-row: 1;
grid-column: 1;
min-height: 0;
margin: 0;
padding: 0 12px 0 0;
border-top: 0;
border-right: 1px solid var(--hairline-strong);
text-align: right;
}
.lab::before { top: 0; right: -1px; left: auto; width: 9px; height: 1px; }
.slice:has(:checked) .lab::before { width: 14px; height: 1px; }
.slice:has(:checked) .name { font-size: 17px; }
.lab .cap { font-size: 12px; }
.capsule { top: 10px; }
.capsule img { width: 36px; height: 26px; }
.cmp .chip { bottom: 10px; padding: 3px 8px; font-size: 11px; }
.cmp .chip.l { left: 10px; }
.cmp .chip.r { right: 10px; }
.legend { margin-top: 18px; }
.story { --pw: min(70vw, 300px); }
.story-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; }
.caps { width: 100%; }
.step h3 { font-size: 30px; }
.step p { margin-top: 8px; font-size: 15px; }
.doc {
grid-template-columns: minmax(0, 1fr);
padding: 24px 0 72px;
}
.doc-head,
.doc-body,
.toc { grid-column: 1; }
.toc {
grid-row: auto;
position: static;
margin-bottom: 40px;
}
}
@media (max-width: 860px) {
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.pin { align-items: start; padding-top: 92px; }
.caps { height: 150px; }
.story { --pw: min(64vw, (100svh - 290px) * .46); }
.liftbox {
--k: 1;
--sw: 30px;
--wg: 6px;
--dx: 0px;
--dy: calc(250px + var(--pw) * .8335 - 50svh - 30px);
top: calc(50% + 30px - var(--W) * 2 / 3);
}
.sl:nth-child(n+3) { display: none; }
.encore-title { bottom: calc(100% + 22px); font-size: 26px; }
}
}
}
@media print {
:root {
--ground: #FFFFFF;
--surface: #F2F2F2;
--ink: #151515;
--ink-2: #5F5E59;
--ink-3: #A3A29C;
--grain: 0;
}
body::after,
.skip,
.top-nav,
.toc,
.dev-banner,
.spectrum,
.story { display: none; }
.doc { display: block; padding: 0; }
.table { overflow: visible; }
.table table { min-width: 0; }
h2, h3 { break-after: avoid; }
}
@media (max-width: 480px) {
.wrap { padding: 0 20px; }
.top-nav { gap: 20px; }
.wordmark img { height: 14px; }
.badge img { height: 46px; }
}