*,*:after,*:before{box-sizing:border-box}:root{--color-canvas: #F5F2EB;--color-canvas-warm: #EDE8DF;--color-ink: #1C1C1C;--color-ink-soft: #4A4A4A;--color-ink-muted: #8A8A8A;--color-lavender: #D4C4E8;--color-lavender-deep: #A890D3;--color-peach: #E8D4C4;--color-peach-deep: #D4A890;--color-sage: #C4E8D4;--color-sage-deep: #90D4A8;--color-butter: #E8E4C4;--color-text: var(--color-ink);--color-text-soft: var(--color-ink-soft);--color-text-muted: var(--color-ink-muted);--color-bg: var(--color-canvas);--color-link: var(--color-ink);--color-link-hover: var(--color-ink-soft);--color-accent: var(--color-lavender);--color-accent-deep: var(--color-lavender-deep);--page-padding: 2rem;--section-padding: 4rem;font-family:Outfit,sans-serif;font-size:14px;line-height:1.5;font-weight:400}body{margin:0;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;overflow-x:hidden;overscroll-behavior:none;min-height:100vh}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-smooth iframe{pointer-events:none}.demo-1,.demo-2{--color-accent: var(--color-peach);--color-accent-deep: var(--color-peach-deep)}.demo-3{--color-accent: var(--color-sage);--color-accent-deep: var(--color-sage-deep)}a{text-decoration:none;color:var(--color-link);outline:none;cursor:pointer;transition:opacity .3s ease}a:hover{opacity:.6}a:focus{outline:none}a:focus-visible{outline:1.5px solid var(--color-ink);outline-offset:3px}.frame{font-weight:500;padding:2.5rem var(--page-padding) 0;display:flex;justify-content:space-between;align-items:center;z-index:1000;position:fixed;top:0;left:0;width:100%;pointer-events:none;background:var(--color-canvas)}.frame a,.frame button{pointer-events:auto}.frame__title{font-size:.75rem;margin:0;font-family:Outfit,sans-serif;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted)}.frame__demos{display:flex;flex-wrap:wrap;gap:1.5rem}.frame__demos a,.frame__demos span{font-family:Outfit,sans-serif;font-size:.8rem;font-weight:500;letter-spacing:.02em}.frame__demos a{opacity:.4}.frame__demos a:hover{opacity:.7}.frame__demos span.active{opacity:1;color:var(--color-ink)}@media screen and (min-width:53em){.frame{padding:var(--page-padding)}}.footer{position:fixed;bottom:0;left:0;width:100%;padding:var(--page-padding);display:flex;justify-content:space-between;align-items:center;z-index:1000;pointer-events:none}.footer a{pointer-events:auto}.footer__tags{display:flex;gap:1rem}.footer__tags span{font-size:.85rem;font-weight:500;letter-spacing:.02em;color:var(--color-text-muted);text-transform:lowercase}.footer__author{font-size:.85rem;font-weight:500;letter-spacing:.02em;color:var(--color-text-muted);transition:color .3s ease}.footer__author:hover{color:var(--color-ink);opacity:1}.content{padding:0;max-width:100%;margin:0 auto;overflow-x:hidden}@media screen and (max-width:768px){.content{padding:0 var(--page-padding);width:100%}}.section{width:100%;height:100vh;position:relative;display:flex;flex-direction:column;gap:2rem;justify-content:center;align-items:center}.section h1{font-size:clamp(2.5rem,7vw,5rem);text-align:center;word-break:break-word;font-weight:400;line-height:1.1;font-family:"Instrument Serif",serif;font-style:italic;color:var(--color-ink);max-width:14ch}.section h1 .highlight{display:block;color:var(--color-accent-deep)}.section p{text-align:center;font-weight:400;color:var(--color-text-muted);font-family:Outfit,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem}.scroll-indicator{position:absolute;bottom:3rem;left:50%;transform:translate(-50%);color:var(--color-ink-muted);animation:bounce 2s ease-in-out infinite}.scroll-indicator svg{display:block}@keyframes bounce{0%,to{transform:translate(-50%) translateY(0);opacity:.6}50%{transform:translate(-50%) translateY(8px);opacity:1}}@media screen and (max-width:768px){:root{--page-padding: 1.25rem}.frame{padding:1.25rem var(--page-padding) 0}.frame__title{font-size:.7rem}.frame__demos{gap:.75rem}.frame__demos a,.frame__demos span{font-size:.75rem}.footer{padding:1rem var(--page-padding)}.footer__tags{gap:.5rem}.footer__tags span,.footer__author{font-size:.7rem}.section{height:100svh;padding-top:4rem;padding-bottom:3rem}.section h1{font-size:clamp(1.6rem,7vw,2.5rem);padding:0 1rem;max-width:14ch}}@media screen and (max-width:425px){:root{--page-padding: 1rem}.frame__title{font-size:.6rem;letter-spacing:.1em}.frame__demos a,.frame__demos span{font-size:.7rem}.section h1{font-size:clamp(1.4rem,6.5vw,2rem);max-width:16ch}.footer__tags span,.footer__author{font-size:.65rem}}.cylinder__title{display:none}.cylinder__wrapper{width:100%;height:100svh;position:relative;perspective:1000px;perspective-origin:50% 50%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 1.5rem;box-sizing:border-box;background:var(--color-canvas)}.cylinder__text__wrapper{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center;text-align:center}.cylinder__text__item{font-size:clamp(1.5rem,4vw,3.2rem);font-family:"Instrument Serif",serif;font-weight:400;text-transform:none;letter-spacing:-.01em;position:absolute;top:50%;left:50%;width:100%;padding:0 2rem;backface-visibility:hidden;color:var(--color-ink);transition:opacity .3s ease}.cylinder__text__item:nth-child(odd){color:var(--color-peach-deep)}.cylinder__text__item:nth-child(3n){color:var(--color-ink-soft)}.cylinder__text__item:nth-child(4n){color:var(--color-peach)}@media screen and (max-width:768px){.cylinder__text__item{font-size:clamp(.95rem,4vw,1.5rem);padding:0 .75rem}}.circle__wrapper{width:100%;height:100vh;position:relative;background:var(--color-canvas)}.circle__wrapper ul{list-style:none;padding:0;margin:0}.circle__text__wrapper__left{position:absolute;width:100vw;height:100%;left:30%;transform:translate(-100%)}.circle__text__wrapper__right{position:absolute;width:100vw;height:100%;left:70%;text-align:right}.circle__text__left__item,.circle__text__right__item{position:absolute;font-family:"Instrument Serif",serif;font-weight:400;font-style:italic;font-size:clamp(.9rem,2vw,1.8rem);top:0;left:0;transform:translate(-50%,-50%);width:16rem;will-change:transform;backface-visibility:hidden}.circle__text__left__item{color:var(--color-peach-deep)}.circle__text__left__item:nth-child(odd){color:var(--color-ink-soft)}.circle__text__right__item{color:var(--color-ink)}.circle__text__right__item:nth-child(odd){color:var(--color-peach-deep)}@media screen and (max-width:768px){.circle__text__wrapper__left{left:12%}.circle__text__wrapper__right{left:88%}.circle__text__left__item,.circle__text__right__item{width:18rem;font-size:clamp(1.3rem,5vw,2rem)}}@media screen and (max-width:425px){.circle__text__wrapper__left{left:8%}.circle__text__wrapper__right{left:92%}.circle__text__left__item,.circle__text__right__item{width:14rem;font-size:clamp(1.1rem,4.5vw,1.6rem)}}.tube__wrapper{width:100%;height:100svh;position:relative;perspective:1000px;overflow:hidden;background:var(--color-canvas)}.tube__wrapper ul,.tube__wrapper ul li{list-style:none;padding:0;margin:0}.tube__text__wrapper{width:100%;height:100%;position:relative;font-size:clamp(2.5rem,12vw,8rem);text-align:center;font-weight:400;transform-style:preserve-3d;transform-origin:center center}.tube__text__item{position:absolute;top:50%;width:100%;font-family:"Instrument Serif",serif;font-style:italic;letter-spacing:-.02em;text-transform:uppercase}.tube__text__item:nth-child(1){color:var(--color-ink)}.tube__text__item:nth-child(2){color:var(--color-sage-deep)}.tube__text__item:nth-child(3){color:var(--color-ink-soft)}.tube__text__item:nth-child(4){color:var(--color-sage)}.tube__text__item:nth-child(5){color:var(--color-ink-muted)}.tube__text__item:nth-child(6){color:var(--color-ink)}.tube__text__item:nth-child(7){color:var(--color-sage-deep)}.tube__text__item:nth-child(8){color:var(--color-ink-soft)}.tube__text__item:nth-child(9){color:var(--color-sage)}.tube__text__item:nth-child(10){color:var(--color-ink-muted)}
