:root{color-scheme:light;--bg:#f8f8f1;--ink:#283b30;--muted:#667165;--line:#314a3024;--glass:#ffffffcf;--card:#e9e9df;--accent:#40583c;--button-ink:#fffef7;--about:#e7ebdf;--shadow:#23321c17}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:115px}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;-webkit-font-smoothing:antialiased}body[data-theme=dark]{color-scheme:dark;--bg:#080808;--ink:#eeeeee;--muted:#bcbcbc;--line:#383838;--glass:#181818df;--card:#202020;--accent:#e4e4e4;--button-ink:#181818;--about:#121212;--shadow:#0004}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button,a{transition:background .2s,color .2s,box-shadow .2s}a:focus-visible,button:focus-visible{outline:3px solid #bd8a49;outline-offset:6px}button{border:0}svg{width:22px;height:22px}button[hidden]{display:none}.glass{background:var(--glass);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border:1px solid var(--line);box-shadow:0 8px 35px var(--shadow)}.nav{max-width:1320px;width:calc(100% - 64px);margin:24px auto 0;border-radius:50px;position:relative;z-index:5;padding:12px 20px 12px 13px;display:flex;justify-content:space-between;align-items:center}.brand{display:inline-flex;align-items:center;gap:9px;font-size:23px;font-weight:650;letter-spacing:-1.2px}.brand img{object-fit:contain;border-radius:0;width:36px;height:36px}.brand-dot{width:6px;height:6px;background:#b2bf90;border-radius:50%;align-self:flex-start;margin:8px 0 0 -4px}nav{display:flex;align-items:center;gap:30px;font-size:13px}nav a:hover,.text-link:hover{color:var(--muted)}.icon-button{width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;background:transparent}.icon-button:hover{background:var(--line)}.hero{max-width:1360px;min-height:750px;min-height:min(790px,calc(100svh - 110px));padding:95px 50px 100px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;gap:25px}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:650;color:var(--muted)}h1{font-size:clamp(48px,5.1vw,78px);letter-spacing:-.065em;line-height:1.3;font-weight:500;margin:28px 0 38px}.primary{display:inline-flex;gap:32px;align-items:center;padding:19px 25px;border-radius:40px;background:var(--accent);color:var(--button-ink);font-size:14px}.primary:hover{box-shadow:0 6px 25px var(--shadow)}.primary span{font-size:20px}.hero-gallery{position:relative;height:535px;margin-top:-15px}.hero-work{display:block;position:absolute;overflow:hidden;border:7px solid var(--glass);border-bottom-width:31px;box-shadow:0 18px 45px var(--shadow);border-radius:7px;background:var(--card);width:55%;height:70%;transition:transform .3s}.hero-work img{width:100%;height:100%;object-fit:cover;object-position:top}.hero-work:nth-child(1){left:0;top:42px;transform:rotate(-10deg)}.hero-work:nth-child(2){right:0;top:0;transform:rotate(9deg);width:48%;height:61%}.hero-work:nth-child(3){right:7%;bottom:0;transform:rotate(-3deg);height:53%;width:53%}.hero-work:hover{transform:rotate(0);z-index:3}.hero-work span{position:absolute;bottom:-25px;left:6px;right:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px}.scroll-link{position:absolute;bottom:28px;left:50px;font-size:11px;color:var(--muted);display:flex;gap:13px;align-items:center}.scroll-link span{font-size:24px}.discover{max-width:1360px;margin:auto;padding:90px 50px 100px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:45px}h2{font-weight:500;letter-spacing:-.045em;font-size:clamp(30px,3.3vw,48px);line-height:1.4;margin:20px 0 0}.section-label{font-size:12px;color:var(--muted);padding-bottom:8px;white-space:nowrap}.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:38px 24px}.work-card{grid-column:span 4;min-width:0}.work-card:nth-child(5n+1),.work-card:nth-child(5n+2){grid-column:span 6}@media(min-width:721px){.work-card:nth-child(5n+1):last-child{grid-column:span 12}.work-card:nth-child(5n+3):last-child{grid-column:span 12}.work-card:nth-child(5n+3):nth-last-child(2),.work-card:nth-child(5n+4):last-child{grid-column:span 6}}.cover{display:block;overflow:hidden;border-radius:15px;background:var(--card);aspect-ratio:4/5;position:relative}.work-card:nth-child(5n+1) .cover,.work-card:nth-child(5n+2) .cover{aspect-ratio:1.25}.cover img{width:100%;height:100%;object-fit:cover;object-position:top;transition:filter .25s}.cover:hover img{filter:brightness(.92)}.cover .view{position:absolute;right:15px;bottom:15px;background:#f9faf0e6;color:#283b30;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;font-size:22px}.work-title{font-weight:500;font-size:15px;margin:15px 0 6px;letter-spacing:0}.author{font-size:11px;color:var(--muted)}#feed-status{font-size:14px;color:var(--muted);min-height:20px}#feed-status:empty{display:none}.more-wrap{text-align:center;margin-top:50px}.more{border-radius:40px;padding:16px 28px;font-size:13px}.more span{margin-left:28px}.more:hover{background:var(--card)}.more:disabled{opacity:.55;cursor:wait}.about{position:relative;overflow:hidden;text-align:center;background:var(--about);padding:110px 24px 120px}.about h2{font-size:clamp(33px,4.2vw,58px);position:relative;z-index:1;margin-top:28px}.about p{font-size:14px;line-height:2;color:var(--muted);margin:28px 0}.text-link{display:inline-block;border-bottom:1px solid var(--line);padding:9px 0;font-size:13px}.text-link span{margin-left:24px}.orbit{position:absolute;width:760px;height:380px;left:50%;top:100px;transform:translateX(-50%) rotate(-18deg);border:1px solid var(--line);border-radius:50%;pointer-events:none}footer{max-width:1320px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:40px 32px;gap:20px}footer .brand{font-size:20px}footer>span,footer>a:last-child{font-size:11px;color:var(--muted)}.skip{position:fixed;top:-80px;left:20px;z-index:30;background:var(--bg);padding:15px}.skip:focus{top:10px}.placeholder{background:var(--card);border-radius:15px}.hero-placeholder{position:absolute;width:52%;height:65%;top:10%;left:0;transform:rotate(-10deg)}.hero-placeholder:nth-child(2){left:48%;top:0;transform:rotate(9deg)}.hero-placeholder:nth-child(3){left:40%;top:45%;height:50%;transform:rotate(-3deg)}.cover-fallback{height:100%;display:grid;place-items:center;padding:35px;font:500 28px/1.5 -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--about);color:var(--ink)}dialog{width:min(1100px,calc(100% - 32px));height:calc(100svh - 48px);max-height:100svh;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink)}dialog::backdrop{background:#101910b3;backdrop-filter:blur(12px)}.viewer-bar{height:68px;display:flex;align-items:center;gap:18px;padding:10px 15px 10px 24px}.viewer-bar h2{font-size:16px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}.viewer-bar a{font-size:12px;white-space:nowrap}iframe{display:block;width:100%;height:calc(100% - 68px);border:0;background:#f5f3ec}body:has(dialog[open]){overflow:hidden}
@media(min-width:1600px){.hero{min-height:800px}}@media(max-width:900px){.hero{padding:70px 35px 90px;min-height:640px;gap:15px}.hero-gallery{height:420px}h1{font-size:clamp(36px,5vw,49px)}.discover{padding:70px 32px}.scroll-link{left:35px}.work-grid{gap:28px 18px}.nav{width:calc(100% - 40px)}}@media(max-width:720px){.nav{width:calc(100% - 28px);margin-top:14px;padding:8px 9px}.brand{font-size:20px;gap:6px}.brand img{width:32px;height:32px}nav{gap:17px;font-size:11px}nav .icon-button{width:34px;height:34px}nav a[href$="#about"]{display:none}.hero{display:flex;flex-direction:column;align-items:stretch;gap:25px;min-height:0;padding:55px 26px 75px}.hero-copy{text-align:center}.eyebrow{font-size:9px}h1{font-size:clamp(36px,10vw,50px);margin:21px 0 25px}.primary{font-size:13px;padding:15px 23px}.hero-gallery{height:405px;width:100%;max-width:410px;align-self:center;margin-top:13px}.hero-work{border-width:5px;border-bottom-width:28px}.scroll-link{left:50%;transform:translateX(-50%);bottom:16px;white-space:nowrap}.discover{padding:58px 20px 65px}.section-heading{align-items:start;flex-direction:column;gap:12px;margin-bottom:28px}.section-heading h2{font-size:32px;margin-top:14px}.section-label{padding:0}.work-grid{gap:24px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}.work-card,.work-card:nth-child(n){grid-column:span 1}.work-card:nth-child(5n+1),.work-card:nth-child(5n+2):last-child,.work-card:nth-child(5n+4):last-child{grid-column:span 2}.work-card:nth-child(5n+1){grid-column:span 2}.work-card .cover,.work-card:nth-child(5n+1) .cover,.work-card:nth-child(5n+2) .cover{aspect-ratio:3/4}.work-card:nth-child(5n+1) .cover{aspect-ratio:1.15}.work-title{font-size:13px;line-height:1.5;margin-top:10px}.cover{border-radius:11px}.about{padding:75px 22px 85px}.about h2{font-size:33px}.about p{font-size:12px}footer{padding:28px 22px;flex-wrap:wrap}footer>span{order:3;width:100%}dialog{width:100%;height:100svh;max-width:100%;border-radius:0;max-height:100svh}.viewer-bar{padding-left:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* The complete 2 + 3 desktop / 1 + 2 + 2 mobile cycles preserve feed order. */
h1{font-weight:550;letter-spacing:-.055em;min-height:2.6em}
h1>span{display:block;white-space:nowrap}







#hero-title,.hero-gallery{opacity:1;transition:opacity .24s ease}
.hero.is-changing #hero-title,.hero.is-changing .hero-gallery{opacity:0}

@media(max-width:720px){.hero-gallery{margin-top:0}h1{font-size:clamp(32px,8vw,50px)}}

@media(max-width:720px){.work-card:nth-child(5n+2):last-child .cover,.work-card:nth-child(5n+4):last-child .cover{aspect-ratio:1.15}}



/* Keep the canvas corner strokes crisp at small logo sizes in both themes. */
.brand-mark{position:relative;display:inline-block;flex:none;width:36px;height:36px}
.brand .brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.brand-frame{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;opacity:.72;pointer-events:none}
footer .brand-mark{width:30px;height:30px}
@media(max-width:720px){.brand-mark{width:32px;height:32px}}

/* Match the App's neutral dark surfaces and its separate mint / amber ambient lights. */
body{position:relative;isolation:isolate}
.home-ambient{position:absolute;inset:0 0 auto;height:560px;overflow:hidden;pointer-events:none;z-index:-1;--glow-mint:#7ca38a80;--glow-amber:#d5ad7080}
.home-ambient span{position:absolute;top:-190px;left:-110px;width:680px;height:680px;background:radial-gradient(circle,var(--glow-mint) 0%,transparent 68%);animation:ambient-drift 40s ease-in-out infinite alternate;will-change:transform}
.home-ambient span+span{left:auto;right:-90px;top:-130px;background:radial-gradient(circle,var(--glow-amber) 0%,transparent 68%);animation-direction:alternate-reverse}
body[data-theme=dark] .home-ambient{--glow-mint:#6c957b90;--glow-amber:#9f774a78}
body[data-theme=dark] .brand-dot{background:#bdbdbd}
body[data-theme=dark] .cover .view{background:#eeeeeee6;color:#181818}
.discovery-page .discover{border-top:0;padding-top:65px;min-height:70svh}
.discovery-page h1{font-size:clamp(32px,4vw,48px);min-height:0;margin:0;letter-spacing:-.04em}
.more{display:inline-block}
@keyframes ambient-drift{from{transform:translate(-23px,-12px)}to{transform:translate(23px,12px)}}
@media(max-width:720px){.home-ambient{height:430px}.home-ambient span{width:400px;height:400px;left:-100px;top:-55px}.home-ambient span+span{right:-110px;top:20px}.discovery-page .discover{padding-top:45px}}

.work-title{display:flex;align-items:flex-start;gap:6px;line-height:1.5}
.work-type{display:inline-flex;align-items:center;justify-content:center;flex:none;width:14px;height:1.5em;color:var(--muted)}
.work-type svg{display:block;width:14px;height:14px}
.work-title-text{min-width:0;overflow-wrap:anywhere}

/* Contain the header margin so the ambient layer starts at the viewport edge. */
body{display:flow-root;min-height:100svh}



.content-section{max-width:1360px;margin:0 auto;padding:95px 50px;border-top:1px solid var(--line)}
.format-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.format-card{min-width:0}
.format-visual{position:relative;height:260px;border-radius:18px;overflow:hidden;background:var(--about)}
.format-kind{display:flex;align-items:center;gap:8px;margin-top:22px}
.format-kind .work-type{height:22px;width:19px;color:var(--ink)}
.format-kind .work-type svg{width:19px;height:19px}
.format-kind h3{font-size:18px;line-height:1.4;font-weight:550;margin:0}
.format-card p{color:var(--muted);font-size:13px;line-height:1.8;margin:10px 0 0}
.format-card:hover .format-visual{box-shadow:0 8px 30px var(--shadow)}
.format-collage img{position:absolute;width:64%;height:66%;object-fit:cover;border:6px solid #faf8f0;box-shadow:0 8px 20px #0002}
.format-collage img:first-child{left:5%;top:11%;transform:rotate(-11deg)}
.format-collage img+img{right:1%;bottom:7%;transform:rotate(10deg);width:57%;height:57%}
.format-video img{width:100%;height:100%;object-fit:cover;filter:brightness(.75)}
.format-video>svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:55px;height:55px;color:#fff}
.format-audio{display:flex;align-items:center;justify-content:center;background:#ded5e2;color:#69516d}
.sound-wave{display:flex;align-items:center;gap:5px;position:relative;z-index:1}
.sound-wave i{height:25px;width:3px;background:currentColor;border-radius:3px}
.sound-wave i:nth-child(4n+1){height:44px}.sound-wave i:nth-child(4n+2){height:66px}.sound-wave i:nth-child(5n+3){height:92px}
.sound-orbit{position:absolute;width:200px;height:200px;border:1px solid currentColor;opacity:.2;border-radius:50%}
.format-interactive{background:#e8dfc7;display:grid;place-items:center;color:#6f5438}
.little-tiles{display:grid;grid-template-columns:repeat(3,44px);gap:7px;transform:rotate(-9deg)}
.little-tiles i{height:44px;border:1px solid #78634044;border-radius:8px;background:#f8f5ea}
.little-tiles i:nth-child(2n){background:#d4c3a0}.little-tiles i:nth-child(4n){background:#b4bca0}
.format-interactive>svg{position:absolute;width:40px;height:40px;right:22%;bottom:19%;fill:#fffaf1}
.free-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px}
.free-art{height:350px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.free-art strong{font-size:190px;line-height:1;font-weight:500;letter-spacing:-.08em;padding-right:.08em}
.free-art>span{font-size:12px;letter-spacing:.12em;margin-top:20px;color:var(--muted)}
.credit-ring{position:absolute;width:320px;height:240px;border:1px solid var(--line);border-radius:50%;transform:rotate(-24deg);pointer-events:none}
.credit-dots{display:flex;gap:7px;margin-top:20px}.credit-dots i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.free-copy h2{margin:0}.free-copy p{font-size:14px;line-height:2;color:var(--muted);margin:24px 0}
.free-copy p+p{font-size:12px}
.making{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.making h2{margin:0;font-size:clamp(28px,3vw,42px)}
.making-steps{list-style:none;padding:0;margin:0}
.making-steps li{display:flex;gap:25px;padding:25px 0;border-bottom:1px solid var(--line)}
.making-steps li:first-child{padding-top:0}.making-steps li:last-child{border:0;padding-bottom:0}
.step-number{font-size:11px;color:var(--muted);padding-top:5px;letter-spacing:.1em}
.making-steps h3{font-size:17px;font-weight:500;margin:0;line-height:1.6}
.making-steps p{font-size:13px;color:var(--muted);line-height:1.8;margin:8px 0 0}
body[data-theme=dark] .format-audio{background:#29232e;color:#b4a5be}
body[data-theme=dark] .format-interactive{background:#2c2820;color:#e1cfac}
body[data-theme=dark] .little-tiles i{background:#484130;border-color:#c4b59044}
body[data-theme=dark] .little-tiles i:nth-child(2n){background:#675f4b}
body[data-theme=dark] .little-tiles i:nth-child(4n){background:#52604d}
@media(max-width:1000px){.format-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 22px}.format-visual{height:280px}.free-section,.making{gap:40px}}
@media(max-width:720px){.content-section{padding:60px 20px}.format-grid{gap:28px 15px}.format-visual{height:190px;border-radius:13px}.format-kind{margin-top:15px}.format-kind h3{font-size:16px}.format-card p{font-size:12px}.sound-wave{gap:4px}.sound-wave i{width:2px}.little-tiles{grid-template-columns:repeat(3,34px);gap:5px}.little-tiles i{height:34px}.free-section,.making{grid-template-columns:1fr;gap:35px}.free-art{height:270px}.free-art strong{font-size:150px}.credit-ring{width:270px;height:210px}.free-copy h2{font-size:32px}.free-copy p{font-size:13px}.making h2{font-size:29px}.making-steps li{gap:18px}.making-steps h3{font-size:16px}.format-interactive>svg{width:30px;height:30px;right:12%;bottom:19%}}

:root{--free-ink:#a34a31;--free-tint:#bd704b24;--free-line:#b76b474a}
body[data-theme=dark]{--free-ink:#ffb699;--free-tint:#e99a7420;--free-line:#d997704d}
.free-emphasis{color:var(--free-ink);background:linear-gradient(transparent 68%,var(--free-tint) 68%);padding:0 .03em .04em;border-radius:3px}
.free-art strong,.free-inline{color:var(--free-ink)}
.free-inline{font-weight:600}
.credit-ring{border-color:var(--free-line)}
.credit-dots i{background:var(--free-ink)}


nav a[href$="#free"]{color:var(--free-ink)}
html[lang=en] h1{font-size:clamp(34px,4.7vw,68px);letter-spacing:-.055em}
html[lang=en] h2{letter-spacing:-.04em}
html[lang=en] .free-copy h2{font-size:clamp(32px,3.5vw,48px)}
html[lang=en] .format-kind h3{font-size:17px}
html[lang=en] .about h2{font-size:clamp(30px,3.9vw,54px)}
html[lang=en] .discovery-page h1{font-size:clamp(32px,4vw,48px);min-height:0}
@media(max-width:900px){html[lang=en] h1{font-size:clamp(30px,4.5vw,43px)}}
@media(max-width:720px){html[lang=en] h1{font-size:clamp(32px,8vw,50px)}html[lang=en] .format-kind h3{font-size:15px}html[lang=en] .about h2{font-size:30px}}

.language-button{min-width:42px;height:36px;padding:0 9px;border:1px solid var(--line);border-radius:22px;background:transparent;font-size:12px;font-weight:550}
.language-button:hover{background:var(--line)}
@media(max-width:720px){nav{gap:7px}.language-button{min-width:31px;height:34px;padding:0 6px;font-size:11px}}

.type-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.type-filter{min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:24px;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.type-filter[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.type-filter:hover{border-color:var(--ink)}
.type-filter:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:720px){.type-filters{gap:6px;margin-bottom:22px}.type-filter{padding:9px 12px;font-size:13px}}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:12px;color:var(--muted)}.footer-links a{padding:10px 0}.footer-links a:hover{text-decoration:underline;text-underline-offset:4px}footer{flex-wrap:wrap}.legal-page{max-width:820px;margin:76px auto 90px;padding:0 28px}.legal-page h1{font-size:clamp(32px,5vw,46px);margin:0 0 20px;letter-spacing:-.035em}.legal-page .legal-date{color:var(--muted);font-size:14px;margin-bottom:44px}.legal-page h2{font-size:21px;letter-spacing:0;margin:34px 0 14px}.legal-page p{font-size:16px;line-height:1.9;overflow-wrap:anywhere;margin:0}.legal-page [hidden]{display:none}@media(max-width:720px){.legal-page{margin:48px auto 64px;padding:0 24px}.legal-page h2{font-size:20px}.footer-links{justify-content:center}}