.click-spark{min-height:100vh;position:relative}.click-spark__canvas{z-index:200;pointer-events:none;-webkit-user-select:none;user-select:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.click-spark__canvas{display:none}}
.shuffle{white-space:nowrap;vertical-align:baseline;align-items:baseline;display:inline-flex}.shuffle__visual{display:inline-flex}.shuffle__character{vertical-align:-.04em;height:1em;line-height:1;display:inline-block;overflow:hidden}.shuffle__strip{will-change:transform;flex-direction:column;display:flex}.shuffle__glyph{text-align:center;flex:0 0 1em;height:1em;line-height:1;display:block}@media (prefers-reduced-motion:reduce){.shuffle__strip{will-change:auto}}
.hwid-showcase{z-index:10;color:#141413;background:#f0eee6;border-top:1px solid #1414131a;padding-block:clamp(4rem,8vw,7rem);position:relative}.hwid-showcase__grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:clamp(1rem,2vw,1.75rem);display:grid}.hwid-feature{isolation:isolate;background:radial-gradient(circle at 8% 4%,#ffffffe0,#0000 32%),linear-gradient(145deg,#d9dee1 0%,#c7ced2 48%,#b5bec4 100%);border:1px solid #535e6638;border-radius:24px;flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:0 32px 80px #3d464c24}.hwid-feature--lf21{background:radial-gradient(circle at 92% 4%,#ffffffb8,#0000 34%),linear-gradient(145deg,#ccd3d7 0%,#b9c2c8 48%,#a8b3ba 100%)}.hwid-feature:before{z-index:-1;content:"";pointer-events:none;background:linear-gradient(115deg,#ffffff57,#0000 36%),repeating-linear-gradient(90deg,#0000 0 79px,#ffffff1a 79px 80px);position:absolute;inset:0}.hwid-feature__visual{margin:auto 0 0;padding:0 clamp(.75rem,1.5vw,1.25rem) clamp(.75rem,1.5vw,1.25rem)}.hwid-feature__image{border:1px solid #ffffff52;border-radius:14px;width:100%;height:auto;display:block;box-shadow:0 30px 70px #2c343a4d,inset 0 1px #ffffff6b}.hwid-feature__glass{z-index:1;-webkit-backdrop-filter:blur(28px)saturate(145%);backdrop-filter:blur(28px)saturate(145%);background:linear-gradient(135deg,#ffffff8a,#ffffff2e),#d2dadf75;border:1px solid #ffffff8a;border-radius:18px;flex:1;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);gap:clamp(1.1rem,2vw,1.6rem);margin:clamp(.75rem,2vw,1.5rem);padding:clamp(1.25rem,2.25vw,1.8rem);display:grid;position:relative;box-shadow:inset 0 1px #ffffffb8,0 24px 64px #2b343a38}.hwid-feature__eyebrow{color:#1414138f;font-family:var(--font-anthropic-mono), monospace;letter-spacing:.08em;justify-content:space-between;align-items:center;gap:1rem;font-size:.68rem;display:flex}.hwid-feature__eyebrow strong{color:#46535b;font-weight:600}.hwid-feature__identity h2{font-family:var(--font-anthropic-sans), Arial, sans-serif;letter-spacing:-.045em;margin:1.15rem 0 0;font-size:clamp(2rem,3vw,2.9rem);font-weight:700;line-height:.98}.hwid-feature__type{color:#14141394;font-family:var(--font-anthropic-sans), Arial, sans-serif;margin:.8rem 0 0;font-size:.78rem;line-height:1.45}.hwid-feature__details>p{color:#141413c2;max-width:42rem;margin:0;font-size:clamp(.96rem,1.25vw,1.08rem);line-height:1.65}.hwid-feature__details ul{grid-template-columns:repeat(3,minmax(0,1fr));margin:1.25rem 0 0;padding:0;list-style:none;display:grid}.hwid-feature__details li{font-family:var(--font-anthropic-sans), Arial, sans-serif;border-top:1px solid #1414132e;gap:.3rem;padding-top:.7rem;font-size:.8rem;font-weight:600;display:grid}.hwid-feature__details li+li{margin-left:.8rem}.hwid-feature__details li span{color:#1414136b;font-family:var(--font-anthropic-mono), monospace;font-size:.62rem;font-weight:400}.hwid-feature__download{flex-direction:column;align-self:end;align-items:flex-start;gap:.7rem;display:flex}.hwid-feature__download>a{color:#f7f9fa;min-height:2.9rem;font-family:var(--font-anthropic-sans), Arial, sans-serif;background:#283238;border-radius:12px;justify-content:center;align-items:center;gap:.65rem;padding:.8rem 1.05rem;font-size:.78rem;font-weight:650;text-decoration:none;transition:background-color .16s,transform .16s;display:inline-flex}.hwid-feature__download>a:hover{background:#3c484f}.hwid-feature__download a:active{transform:translateY(1px)}.hwid-feature__secondary-actions{align-items:center;gap:.5rem;display:flex}.hwid-feature__download .hwid-feature__github{color:#283238;min-height:2.9rem;font-family:var(--font-anthropic-sans), Arial, sans-serif;border:1px solid #1414132e;border-radius:12px;justify-content:center;align-items:center;gap:.65rem;padding:.8rem .85rem;font-size:.78rem;font-weight:650;text-decoration:none;transition:background-color .16s,transform .16s;display:inline-flex}.hwid-feature__download .hwid-feature__github:hover{background:#ffffff47}.hwid-feature__download .hwid-feature__tutorial{color:#283238;border:1px solid #1414132e;border-radius:12px;justify-content:center;align-items:center;width:2.9rem;min-width:2.9rem;height:2.9rem;text-decoration:none;transition:background-color .16s,transform .16s;display:inline-flex}.hwid-feature__download .hwid-feature__tutorial:hover{background:#ffffff47}.lf21-tutorial-menu{position:relative}.lf21-tutorial-menu summary{cursor:pointer;color:#283238;min-height:2.9rem;font-family:var(--font-anthropic-sans), Arial, sans-serif;border:1px solid #1414132e;border-radius:12px;justify-content:center;align-items:center;gap:.55rem;padding:.8rem .9rem;font-size:.78rem;font-weight:650;list-style:none;transition:background-color .16s,transform .16s;display:inline-flex}.lf21-tutorial-menu summary::-webkit-details-marker{display:none}.lf21-tutorial-menu summary:hover{background:#ffffff47}.lf21-tutorial-menu summary:active{transform:translateY(1px)}.lf21-tutorial-menu__chevron{transition:transform .16s}.lf21-tutorial-menu[open] .lf21-tutorial-menu__chevron{transform:rotate(180deg)}.lf21-tutorial-menu__panel{z-index:20;-webkit-backdrop-filter:blur(18px)saturate(140%);backdrop-filter:blur(18px)saturate(140%);transform-origin:0 0;background:#eef1f2f5;border:1px solid #14141324;border-radius:12px;width:min(17rem,100vw - 3rem);padding:.4rem;display:grid;position:absolute;top:calc(100% + .55rem);left:0;overflow:hidden;box-shadow:0 18px 45px #2b343a3d}.lf21-tutorial-menu[open] .lf21-tutorial-menu__panel{animation:.24s cubic-bezier(.22,1,.36,1) both lf21-tutorial-menu-open}.lf21-tutorial-menu__panel a{color:#283238;min-height:2.8rem;font-family:var(--font-anthropic-sans), Arial, sans-serif;border-radius:8px;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem .75rem;font-size:.78rem;font-weight:600;text-decoration:none;display:flex}.lf21-tutorial-menu__panel a:hover{background:#28323814}@keyframes lf21-tutorial-menu-open{0%{opacity:0;filter:blur(5px);transform:translateY(-10px)scale(.98)}to{opacity:1;filter:none;transform:translateY(0)scale(1)}}@supports (animation-timeline:view()){.hwid-feature{animation:1ms linear both hwid-feature-reveal;animation-timeline:view();animation-range:entry cover 34%}}@keyframes hwid-feature-reveal{0%{opacity:0;filter:blur(12px)saturate(.72);transform:translateY(64px)scale(.98)}to{opacity:1;filter:none;transform:none}}@media (max-width:1080px){.hwid-showcase__grid{grid-template-columns:minmax(0,1fr)}}@media (max-width:700px){.hwid-feature{border-radius:18px}.hwid-feature__visual{padding:0 .7rem .7rem}.hwid-feature__image{border-radius:11px}.hwid-feature__glass{border-radius:14px;grid-template-columns:1fr;gap:1.5rem;margin:.7rem;padding:1.25rem}.hwid-feature__download{flex-direction:column;grid-column:auto;align-items:stretch}.hwid-feature__download>a{width:100%}.hwid-feature__download .hwid-feature__tutorial{width:2.9rem}.lf21-tutorial-menu summary{width:100%}.lf21-tutorial-menu__panel{left:auto;right:0}}@media (prefers-reduced-motion:reduce){.hwid-feature{opacity:1;filter:none;animation:none;transform:none}.hwid-feature__download>a,.hwid-feature__download .hwid-feature__github,.hwid-feature__download .hwid-feature__tutorial,.lf21-tutorial-menu summary,.lf21-tutorial-menu__chevron{transition:none}.lf21-tutorial-menu[open] .lf21-tutorial-menu__panel{animation:none}}@media (prefers-reduced-transparency:reduce){.hwid-feature__glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:#e3e7e9}.lf21-tutorial-menu__panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:#eef1f2}}
.decay-card{isolation:isolate;width:100%;min-height:580px;transform-style:preserve-3d;will-change:transform;background:#dedbd0;border-radius:16px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #14141314}.decay-card__media{z-index:-2;opacity:.24;will-change:transform;width:114%;height:114%;display:block;position:absolute;inset:-7%}.decay-card__veil{z-index:-1;background:#f0eee6d6;position:absolute;inset:0}.decay-card__content{z-index:1;flex-direction:column;align-items:flex-start;min-height:580px;padding:clamp(24px,3vw,38px);display:flex;position:relative}@media (max-width:991px){.decay-card,.decay-card__content{min-height:0}}@media (prefers-reduced-motion:reduce){.decay-card,.decay-card__media{will-change:auto;transform:none}}
.chroma-surface,.chroma-host{--chroma-x:50%;--chroma-y:50%;--chroma-radius:240px;--chroma-border:#c6613f;isolation:isolate;position:relative}.chroma-surface{transition:box-shadow .24s;overflow:hidden}.chroma-surface__content{z-index:1;height:100%;position:relative}.chroma-highlight,.chroma-overlay,.chroma-fade{pointer-events:none;position:absolute;inset:0}.chroma-highlight{z-index:2;background:radial-gradient(circle calc(var(--chroma-radius) * .58) at var(--chroma-x) var(--chroma-y), #ffffff3d, transparent 72%);opacity:0;transition:opacity .26s}.chroma-overlay,.chroma-fade{z-index:3;-webkit-backdrop-filter:grayscale(.82)saturate(.72)brightness(.96);backdrop-filter:grayscale(.82)saturate(.72)brightness(.96);background:#14141300}.chroma-overlay{-webkit-mask-image:radial-gradient(circle var(--chroma-radius) at var(--chroma-x) var(--chroma-y), transparent 0%, transparent 18%, #0000001f 34%, #00000052 54%, #0000009e 76%, #000 100%);-webkit-mask-image:radial-gradient(circle var(--chroma-radius) at var(--chroma-x) var(--chroma-y), transparent 0%, transparent 18%, #0000001f 34%, #00000052 54%, #0000009e 76%, #000 100%);mask-image:radial-gradient(circle var(--chroma-radius) at var(--chroma-x) var(--chroma-y), transparent 0%, transparent 18%, #0000001f 34%, #00000052 54%, #0000009e 76%, #000 100%)}.chroma-fade{z-index:4;opacity:1;-webkit-mask-image:radial-gradient(circle var(--chroma-radius) at var(--chroma-x) var(--chroma-y), #000 0%, #000 18%, #000000e0 34%, #000000ad 54%, #00000061 76%, transparent 100%);-webkit-mask-image:radial-gradient(circle var(--chroma-radius) at var(--chroma-x) var(--chroma-y), #000 0%, #000 18%, #000000e0 34%, #000000ad 54%, #00000061 76%, transparent 100%);mask-image:radial-gradient(circle var(--chroma-radius) at var(--chroma-x) var(--chroma-y), #000 0%, #000 18%, #000000e0 34%, #000000ad 54%, #00000061 76%, transparent 100%)}.chroma-surface:hover .chroma-highlight,.chroma-host:hover .chroma-highlight{opacity:1}.chroma-surface:hover{box-shadow:inset 0 0 0 1px var(--chroma-border)}@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.chroma-highlight,.chroma-overlay,.chroma-fade{display:none}}
.project-shot{transform-origin:50% 20%}@supports (animation-timeline:view()){.project-shot{animation-name:project-shot-reveal;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry cover 34%}.project-shot--compass{animation-range:entry 8% cover 42%}}@keyframes project-shot-reveal{0%{opacity:0;filter:blur(14px)saturate(.55)brightness(1.08);transform:translateY(88px)scale(.965)}to{opacity:1;filter:blur()saturate()brightness();transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.project-shot{opacity:1;filter:none;animation:none;transform:none}}
.work-card{transition:background-color .18s,transform .22s}.work-tutorial-menu{position:relative}.work-tutorial-menu summary{cursor:pointer;border:1px solid #14141326;border-radius:8px;align-items:center;gap:.5rem;min-height:2.75rem;padding:.65rem .85rem;font-size:.75rem;font-weight:500;list-style:none;transition:background-color .16s,transform .16s;display:inline-flex}.work-tutorial-menu summary::-webkit-details-marker{display:none}.work-tutorial-menu summary:hover{background:#1414130d}.work-tutorial-menu summary:active{transform:translateY(1px)}.work-tutorial-menu__chevron{transition:transform .16s}.work-tutorial-menu[open] .work-tutorial-menu__chevron{transform:rotate(180deg)}.work-tutorial-menu__panel{z-index:30;transform-origin:0 0;background:#f0eee6;border:1px solid #14141324;border-radius:10px;width:min(16rem,100vw - 3rem);padding:.35rem;display:grid;position:absolute;top:calc(100% + .5rem);left:0;overflow:hidden;box-shadow:0 16px 36px #14141329}.work-tutorial-menu[open] .work-tutorial-menu__panel{animation:.24s cubic-bezier(.22,1,.36,1) both work-tutorial-menu-open}.work-tutorial-menu__panel a{color:#141413;border-radius:7px;justify-content:space-between;align-items:center;gap:1rem;min-height:2.75rem;padding:.7rem .75rem;font-size:.75rem;font-weight:500;text-decoration:none;display:flex}.work-tutorial-menu__panel a:hover{background:#1414130f}@keyframes work-tutorial-menu-open{0%{opacity:0;filter:blur(5px);transform:translateY(-10px)scale(.98)}to{opacity:1;filter:none;transform:translateY(0)scale(1)}}@media (min-width:768px){.works-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.works-grid>.work-card{grid-column:span 2}.works-grid>.work-card:last-child:nth-child(odd){grid-column:2/span 2}}@media (hover:hover) and (pointer:fine){.work-card{cursor:pointer}.work-card:hover{background:#ded3c3;transform:translateY(-3px)}}.work-hover-preview{--preview-x:12px;--preview-y:12px;z-index:190;width:220px;height:auto;box-shadow:none;opacity:0;pointer-events:none;transform:translate3d(var(--preview-x), var(--preview-y), 0) scale(.92);transform-origin:50%;will-change:transform, opacity;background:0 0;border:0;border-radius:0;padding:0;transition:opacity .16s,transform .2s cubic-bezier(.2,.8,.2,1);position:fixed;top:0;left:0;overflow:visible}.work-hover-preview[data-visible=true]{opacity:1;transform:translate3d(var(--preview-x), var(--preview-y), 0) scale(1)}.work-hover-preview__image{transform-origin:50% 85%;will-change:transform;background:0 0;border:1px solid #14141329;border-radius:8px;transition:filter .26s,transform .36s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0;overflow:hidden;box-shadow:0 18px 42px #1414132e}.work-hover-preview__image[data-position=front]{z-index:2;filter:brightness();transform:translate(0,0)rotate(-1deg)scale(1)}.work-hover-preview__image[data-position=back]{z-index:1;filter:brightness(.92);transform:translate(14px,12px)rotate(3deg)scale(.965)}.work-preview-backdrop{display:none}@media (any-hover:none){.work-card{cursor:pointer}.work-preview-backdrop{z-index:180;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;background:#1414133d;border:0;transition:opacity .18s;display:block;position:fixed;inset:0}.work-preview-backdrop[data-visible=true]{opacity:1;pointer-events:auto}.work-hover-preview{cursor:pointer;pointer-events:none;touch-action:auto;-webkit-user-select:none;user-select:none;width:min(64vw,220px);top:50%;left:50%;transform:translate(-50%,-50%)scale(.94)}.work-hover-preview img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.work-hover-preview[data-mobile=true][data-visible=true]{pointer-events:auto;touch-action:pan-y pinch-zoom;transform:translate(-50%,-50%)scale(1)}}@media (prefers-reduced-motion:reduce){.work-tutorial-menu summary,.work-tutorial-menu__chevron{transition:none}.work-tutorial-menu[open] .work-tutorial-menu__panel{animation:none}}