@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/46a9e2f250689b4a-s.03ez25a9g3i0n.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/76b70a1dbe058eb5-s.3i9rha7jpxn0q.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/2fb76073e23fd9e4-s.2o7ko1d-5m1xu.woff2)format("woff2");unicode-range:U+1F??}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/6131cbbf5549afa2-s.1ee5w62fj497l.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/45462fd7b7c12654-s.1way2z9fj6cig.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/ba63f6a0e436df8e-s.0szrwpqb9mkwe.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/07c7676b89ed2778-s.p.45535valc9rzk.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter Fallback;src:local(Arial);ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.0%;size-adjust:107.12%}.LINzvG_className{font-family:Inter,Inter Fallback;font-style:normal}.LINzvG_variable{--font-inter:"Inter", "Inter Fallback"}
@font-face{font-family:Caveat;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/a925085458ef6d49-s.04zcam1iel9wu.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Caveat;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/089759a55bd8cb5e-s.034_md61ci_hx.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Caveat;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/909022845d45f745-s.2-gvzunjwzw93.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Caveat;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/901ab3db5ace4563-s.3r6si8l984dsl.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Caveat Fallback;src:local(Arial);ascent-override:124.77%;descent-override:38.99%;line-gap-override:0.0%;size-adjust:76.94%}.gLjpEG_className{font-family:Caveat,Caveat Fallback;font-style:normal;font-weight:500}.gLjpEG_variable{--font-hand:"Caveat", "Caveat Fallback"}
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--font-weight-medium:500;--tracking-tight:-.025em;--leading-relaxed:1.625;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", var(--font-inter), system-ui, sans-serif;--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-auto{margin-inline:auto}.mt-1{margin-top:var(--spacing)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-9{margin-top:calc(var(--spacing) * 9)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-11{margin-top:calc(var(--spacing) * 11)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-14{margin-top:calc(var(--spacing) * 14)}.mt-16{margin-top:calc(var(--spacing) * 16)}.-ml-2{margin-left:calc(var(--spacing) * -2)}.ml-2{margin-left:calc(var(--spacing) * 2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-7{height:calc(var(--spacing) * 7)}.h-auto{height:auto}.min-h-dvh{min-height:100dvh}.w-1\/2{width:50%}.w-\[13\.5rem\]{width:13.5rem}.w-\[clamp\(84px\,9vw\,112px\)\]{width:clamp(84px,9vw,112px)}.w-\[clamp\(88px\,9vw\,112px\)\]{width:clamp(88px,9vw,112px)}.w-\[min\(78vw\,720px\)\]{width:min(78vw,720px)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.max-w-\[26rem\]{max-width:26rem}.max-w-\[38rem\]{max-width:38rem}.max-w-\[46rem\]{max-width:46rem}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.gap-x-5{column-gap:calc(var(--spacing) * 5)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-x-10{column-gap:calc(var(--spacing) * 10)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.gap-y-3{row-gap:calc(var(--spacing) * 3)}.gap-y-8{row-gap:calc(var(--spacing) * 8)}.overflow-hidden{overflow:hidden}.overflow-x-clip{overflow-x:clip}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.object-cover{object-fit:cover}.px-5{padding-inline:calc(var(--spacing) * 5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-28{padding-block:calc(var(--spacing) * 28)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-28{padding-top:calc(var(--spacing) * 28)}.pt-32{padding-top:calc(var(--spacing) * 32)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pb-20{padding-bottom:calc(var(--spacing) * 20)}.pb-28{padding-bottom:calc(var(--spacing) * 28)}.pb-\[0\.12em\]{padding-bottom:.12em}.text-left{text-align:left}.font-sans{font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", var(--font-inter), system-ui, sans-serif}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[1\.0625rem\]{font-size:1.0625rem}.text-\[clamp\(1\.5rem\,2\.6vw\,2rem\)\]{font-size:clamp(1.5rem,2.6vw,2rem)}.text-\[clamp\(1\.75rem\,3\.4vw\,2\.25rem\)\]{font-size:clamp(1.75rem,3.4vw,2.25rem)}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.text-accent-red{color:var(--accent-red)}.text-ink{color:var(--ink)}.text-muted{color:var(--ink-muted)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.\!ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (hover:hover){.group-hover\:text-ink:is(:where(.group):hover *){color:var(--ink)}}@media (min-width:48rem){.md\:flex{display:flex}.md\:inline{display:inline}.md\:h-8{height:calc(var(--spacing) * 8)}.md\:gap-5{gap:calc(var(--spacing) * 5)}.md\:gap-8{gap:calc(var(--spacing) * 8)}.md\:px-8{padding-inline:calc(var(--spacing) * 8)}.md\:pt-\[16vh\]{padding-top:16vh}.md\:pb-28{padding-bottom:calc(var(--spacing) * 28)}}}:root{--paper:#f2f7f1;--ink:#141412;--ink-muted:#5f695f;--accent-red:#e5391f;--highlight:#ffe14a;--accent-blue:#1f4fd1;--paper-shade:#c9d1c7;--paper-fold:#dde3da;--paper-edge:#eff2ec;--note:#fbf8f0;--note-rule:#6297c747;--note-margin:#e5391f59;--surface:#fff;--figure-ink:var(--ink)}html[data-theme=dark]{--paper:#1a201c;--ink:#ece7df;--ink-muted:#a0a89e;--accent-red:#ff5b3d;--highlight:#ffd60a4d;--accent-blue:#7b97ff;--paper-shade:#101511;--paper-fold:#283029;--paper-edge:#212821;--note:#22201c;--note-rule:#7ba3d629;--note-margin:#ff5b3d61;--surface:#2a302b;--figure-ink:#c4baa9;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}*,:before,:after{letter-spacing:-.03em}::selection{background:var(--accent-red);color:var(--paper)}body:not(:has(#sanity)) :is(img,video){-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}html[data-preloader=active]{overflow:hidden}.preloader{z-index:100;pointer-events:none;filter:drop-shadow(-4px -4px 10px #1414121f);position:fixed;inset:0}.preloader-page{background:var(--paper);place-items:center;display:grid;position:absolute;inset:0}.preloader-mask{aspect-ratio:1;clip-path:inset(-60% -30% 0);width:clamp(110px,16vw,170px);margin-bottom:-2.5%}.preloader-mascot{transform-origin:50% 100%;width:100%;height:100%;display:block;transform:translateY(110%)}.preloader-signature{width:100%;height:auto;color:var(--ink);overflow:visible}.preloader-signature path{visibility:hidden}.preloader-flap-shadow{filter:drop-shadow(-10px -10px 18px #14141238);position:absolute;inset:0}.preloader-flap{clip-path:polygon(0 0,0 0,0 0);position:absolute;inset:0}:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .065 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}html[data-theme=dark]{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.preloader-page{background-image:var(--grain);background-size:240px 240px}body:not(:has(#sanity)){background-image:var(--grain);background-size:240px 240px}body:has(#sanity) *{letter-spacing:normal}body:has(#sanity) :before{letter-spacing:normal}body:has(#sanity) :after{letter-spacing:normal}html[data-theme=dark] .client-logo:not(.client-logo--mono){filter:invert()}html[data-theme=dark] .client-logo--mono{filter:grayscale()contrast(1.2)brightness(1.6)}.theme-toggle{align-items:center;gap:.35rem;display:inline-flex}.theme-toggle-icon{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:.95rem;height:.95rem;transition:rotate .5s cubic-bezier(.3,1.4,.5,1)}.theme-toggle:hover .theme-toggle-icon{rotate:-20deg}::view-transition-old(root){mix-blend-mode:normal;animation:none}::view-transition-new(root){mix-blend-mode:normal;animation:none}::view-transition-new(root){will-change:clip-path}html.theme-switching *,html.theme-switching :before,html.theme-switching :after{transition:none!important}html:not([data-revealed]) .reveal{opacity:0}html[data-revealed] .reveal{animation:blur-in 1.1s cubic-bezier(.2, .7, .2, 1) calc(var(--i,0) * .13s) both}@keyframes blur-in{0%{opacity:0;filter:blur(10px);translate:0 6px}}.about-copy{font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.45}.inline-doodle{vertical-align:-.3em;width:1.35em;height:1.35em;margin-inline:.06em;display:inline-block}.inline-doodle svg{width:100%;height:100%;overflow:visible}.inline-doodle g{transform-box:fill-box;transform-origin:50%;transition:rotate .6s cubic-bezier(.2,.8,.2,1),translate .45s cubic-bezier(.2,.8,.2,1)}.doodle-accent{fill:var(--accent-red)}@supports (color:color-mix(in lab, red, red)){.doodle-accent{fill:color-mix(in srgb, var(--accent-red) 85%, transparent)}}.doodle-accent{stroke:currentColor}.doodle-accent-stroke{stroke:var(--accent-red)}.inline-doodle:hover .doodle-spin{rotate:90deg}.inline-doodle:hover .doodle-lift{translate:0 -2px}.inline-doodle:hover .doodle-flame{animation:.18s ease-in-out infinite alternate doodle-flicker}@keyframes doodle-flicker{to{scale:1 1.35}}.doodle-flame{transform-box:fill-box;transform-origin:top}.doodle-screen{fill:var(--accent-blue)}@supports (color:color-mix(in lab, red, red)){.doodle-screen{fill:color-mix(in srgb, var(--accent-blue) 80%, transparent)}}.inline-doodle:hover .doodle-screen{animation:.5s step-end infinite doodle-channel}@keyframes doodle-channel{33%{fill:color-mix(in srgb, var(--accent-red) 85%, transparent)}66%{fill:color-mix(in srgb, var(--ink) 15%, transparent)}}.inline-doodle:hover .doodle-tv{rotate:-6deg}.inline-doodle:hover .doodle-curl{rotate:-14deg}.hero-bio{text-wrap:pretty;font-size:1rem;line-height:1.65}@media (max-width:767px) and (prefers-reduced-motion:no-preference){.hero-bio:not([data-inking]) .hero-word{opacity:.2}}.hero-bio p+p{margin-top:1em}.hero-bio-link{text-decoration:underline;text-decoration-thickness:1px;-webkit-text-decoration-color:var(--ink);-webkit-text-decoration-color:var(--ink);-webkit-text-decoration-color:var(--ink);text-decoration-color:var(--ink)}@supports (color:color-mix(in lab, red, red)){.hero-bio-link{-webkit-text-decoration-color:color-mix(in srgb, var(--ink) 35%, transparent);-webkit-text-decoration-color:color-mix(in srgb, var(--ink) 35%, transparent);-webkit-text-decoration-color:color-mix(in srgb, var(--ink) 35%, transparent);text-decoration-color:color-mix(in srgb, var(--ink) 35%, transparent)}}.hero-bio-link{text-underline-offset:4px;transition:text-decoration-color .25s,color .25s}.hero-bio-link:hover{-webkit-text-decoration-color:var(--accent-red);-webkit-text-decoration-color:var(--accent-red);-webkit-text-decoration-color:var(--accent-red);text-decoration-color:var(--accent-red)}.header-signature:not([data-drawn]) path{visibility:hidden}.photo-stack{aspect-ratio:4/5;cursor:pointer;position:relative}.photo-stack-print{rotate:var(--lean);border-radius:.375rem;transition:rotate .6s cubic-bezier(.2,.8,.2,1),translate .6s cubic-bezier(.2,.8,.2,1),scale .6s cubic-bezier(.2,.8,.2,1),opacity .45s;position:absolute;inset:0;overflow:hidden;box-shadow:0 1px 2px #14141214,0 8px 24px -8px #14141240}.photo-stack-print img{object-fit:cover;filter:grayscale();width:100%;height:100%;transition:filter .5s}.photo-stack-print[data-place="1"]{translate:-5px 4px;scale:.96}.photo-stack-print[data-place="2"]{translate:4px 7px;scale:.92}.photo-stack-print[data-place="3"]{opacity:0;scale:.9}.photo-stack:hover .photo-stack-print[data-place="0"]{rotate:0deg;scale:1.03}.photo-stack:hover .photo-stack-print[data-place="0"] img{filter:grayscale(0)}.photo-stack-print[data-leaving]{opacity:0;transition-duration:.46s;transition-timing-function:cubic-bezier(.4,0,.7,.2);translate:40% -18%;rotate:14deg}.kind-stack{margin-right:.5rem;transition:height .6s cubic-bezier(.25,.8,.25,1);position:relative}.kind-note{background:var(--surface);rotate:var(--lean);flex-direction:column;padding:1.6rem 1.75rem 1.5rem;transition:rotate .5s cubic-bezier(.2,.8,.2,1),translate .5s cubic-bezier(.2,.8,.2,1),opacity .4s;display:flex;position:absolute;inset:0;box-shadow:0 1px 1px #1414120d,0 14px 28px -16px #14141252}.kind-note[data-place="1"]{translate:6px 8px}.kind-note[data-place="2"]{translate:-4px 14px}.kind-note[data-place="3"],.kind-note[data-place="1"]>*,.kind-note[data-place="2"]>*{opacity:0}.kind-note[data-place="0"]{cursor:pointer;touch-action:pan-y;position:relative}.kind-note[data-dragging]{transition:none}.kind-note[data-place="0"]:hover{rotate:0deg}.kind-note[data-leaving]{opacity:0;transition-duration:.42s;transition-timing-function:cubic-bezier(.4,0,.7,.2)}.kind-note[data-leaving=right]{translate:75% -5%;rotate:10deg}.kind-note[data-leaving=left]{translate:-75% -5%;rotate:-10deg}.kind-note>*{transition:opacity .35s .1s}.kind-note-label{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);font-size:.75rem}.kind-note-quote{text-wrap:pretty;margin-top:1rem;font-size:1.0625rem;line-height:1.6}.kind-note-quote:before{content:"“"}.kind-note-quote:after{content:"”"}.kind-note-from{margin-top:auto;padding-top:1.4rem}.kind-note-label{padding-right:5.5rem}.kind-note-prints{display:flex;position:absolute;top:-1.5rem;right:1.25rem}.kind-note-print{background:var(--note);width:3.6rem;rotate:var(--tilt);padding:.22rem .22rem .75rem;transition:rotate .4s cubic-bezier(.2,.8,.2,1);display:block;box-shadow:0 1px 1px #14141214,0 6px 14px -6px #14141259}.kind-note-print+.kind-note-print{margin-left:-.9rem}.kind-note-print img{aspect-ratio:1;object-fit:cover;filter:grayscale()contrast(1.05);width:100%;display:block}.kind-note[data-place="0"]:hover .kind-note-print{rotate:0deg}.kind-note-sign{font-family:var(--font-hand), cursive;color:var(--accent-blue);font-size:1.5rem;line-height:1.1;display:block}.kind-note.kind-note--form{cursor:auto;--lean:-.8deg;position:relative;inset:auto}.kind-note.kind-note--form:hover{rotate:var(--lean)}.kind-note--form[data-sent]{rotate:1.5deg}.kind-form-quote,.kind-form-input{resize:none;width:100%;color:inherit;background:0 0;border:0;border-bottom:1px dashed #0000;outline:none;transition:border-color .2s;display:block}.kind-form-quote{field-sizing:content;min-height:6.5em}.kind-form-quote:focus,.kind-form-input:focus,.kind-form-input:hover:not(:disabled){border-bottom-color:var(--ink)}@supports (color:color-mix(in lab, red, red)){.kind-form-quote:focus,.kind-form-input:focus,.kind-form-input:hover:not(:disabled){border-bottom-color:color-mix(in srgb, var(--ink) 25%, transparent)}}.kind-form-quote::placeholder,.kind-form-input::placeholder{color:var(--ink-muted)}@supports (color:color-mix(in lab, red, red)){.kind-form-quote::placeholder,.kind-form-input::placeholder{color:color-mix(in srgb, var(--ink-muted) 75%, transparent)}}input.kind-note-sign,input.kind-note-sign::placeholder{color:var(--accent-blue)}@supports (color:color-mix(in lab, red, red)){input.kind-note-sign::placeholder{color:color-mix(in srgb, var(--accent-blue) 45%, transparent)}}.kind-form-photo{cursor:pointer}.kind-form-photo .kind-note-print{aspect-ratio:auto}.kind-form-photo .kind-note-print img{filter:grayscale()contrast(1.05)}.kind-form-photo:hover .kind-note-print,.kind-form-photo:focus-within .kind-note-print{rotate:0deg}.kind-form-photo:focus-within{outline:2px solid var(--accent-blue);outline-offset:4px;border-radius:2px}.kind-form-photo-empty{aspect-ratio:1;border:1px dashed var(--ink);place-items:center;padding:.25rem;display:grid}@supports (color:color-mix(in lab, red, red)){.kind-form-photo-empty{border:1px dashed color-mix(in srgb, var(--ink) 30%, transparent)}}.kind-form-photo-empty{font-family:var(--font-hand), cursive;text-align:center;color:var(--ink-muted);font-size:.95rem;line-height:1}.kind-form-field{border:0;border-bottom:1px dashed var(--ink);background:0 0;width:100%;margin-top:.5rem;padding:.6rem 0;display:block}@supports (color:color-mix(in lab, red, red)){.kind-form-field{border-bottom:1px dashed color-mix(in srgb, var(--ink) 30%, transparent)}}.kind-form-field{outline:none;font-size:1rem;transition:border-color .2s}.kind-form-field:focus{border-bottom-color:var(--ink)}.kind-form-check{width:1rem;height:1rem;accent-color:var(--ink);flex:none;margin-top:.15rem}.kind-sent-pile{position:relative}.kind-sent-under{background:var(--surface);animation:kind-under-in .7s cubic-bezier(.2, .8, .2, 1) calc(.25s + var(--n) * 80ms) both;position:absolute;inset:0;box-shadow:0 1px 1px #1414120d,0 14px 28px -16px #14141252}.kind-sent-under:first-child{translate:6px 8px;rotate:2.6deg}.kind-sent-under:nth-child(2){translate:-4px 14px;rotate:-3.4deg}@keyframes kind-under-in{0%{opacity:0;translate:0 48px;rotate:0deg}}.kind-sent-note{z-index:1;animation:.9s cubic-bezier(.3,.7,.2,1) both kind-drop}@keyframes kind-drop{0%{translate:0;rotate:-.8deg;scale:1}35%{translate:0 -22px;rotate:-3deg;scale:1.03;box-shadow:0 2px 2px #1414120d,0 34px 44px -20px #14141259}to{translate:0;rotate:-1.2deg;scale:1}}.kind-stamp{border:2px solid var(--accent-red);box-shadow:inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--accent-red);color:var(--accent-red);opacity:.85;pointer-events:none;-webkit-mask-composite:source-in;-webkit-mask-composite:source-in;-webkit-mask-source-type:auto,auto;-webkit-mask-composite:source-in;-webkit-mask-source-type:auto,auto;border-radius:.4rem;flex-direction:column;align-items:center;padding:.35rem .75rem .4rem;animation:.32s cubic-bezier(.3,0,.3,1.4) .95s both kind-stamp;display:flex;position:absolute;bottom:1.3rem;right:1.4rem;rotate:-9deg;-webkit-mask-image:radial-gradient(circle at 30% 40%,#000 55%,#000000bf 56%),linear-gradient(#000,#000);mask-image:radial-gradient(circle at 30% 40%,#000 55%,#000000bf 56%),linear-gradient(#000,#000);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:7px 7px,auto;mask-size:7px 7px,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:border-box,border-box;mask-clip:border-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.kind-stamp-word{letter-spacing:.18em;text-transform:uppercase;font-size:1.05rem;font-weight:700;line-height:1.2}.kind-stamp-date{letter-spacing:.12em;text-transform:uppercase;font-size:.62rem}@keyframes kind-stamp{0%{opacity:0;rotate:-2deg;scale:2.2}70%{opacity:.9;scale:.94}}.kind-sent-count{position:absolute;inset:-2.9rem 0 auto}@media (max-width:640px){.kind-sent-note{padding-bottom:4.6rem}.kind-stamp{bottom:1rem}}.kind-sent-count,.kind-sent-thanks{animation:.8s cubic-bezier(.2,.7,.2,1) both blur-in}.kind-sent-count{animation-delay:1.15s}.kind-sent-thanks{animation-delay:1.3s}.paper-note{--rule:24px;padding:calc(var(--rule) * .5) 1.1rem calc(var(--rule) * .5) 2.4rem;line-height:var(--rule);background:linear-gradient(to right, transparent 1.7rem, var(--note-margin) 1.7rem, var(--note-margin) calc(1.7rem + 1px), transparent calc(1.7rem + 1px)), repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), var(--note-rule) calc(var(--rule) - 1px) var(--rule)), var(--note);background-position:0 0, 0 calc(var(--rule) * .5), 0 0;transition:rotate .4s cubic-bezier(.2,.8,.2,1);position:relative;box-shadow:0 1px 1px #1414120f,0 10px 24px -12px #1414124d}.paper-note:hover{rotate:0deg!important}.paper-note--holes{padding-top:calc(var(--rule) * 1.5);background-position:0 0, 0 calc(var(--rule) * 1.5), 0 0}.paper-note>:not(.paper-note-pin,.paper-note-holes){min-height:var(--rule);line-height:var(--rule)}.paper-note-pin{width:26px;position:absolute;top:-13px;right:-6px;overflow:visible;scale:-1 1}.paper-note-holes{justify-content:space-between;display:flex;position:absolute;inset:7px 12px auto}.paper-note-holes span{background:var(--paper);border-radius:999px;width:9px;height:9px;box-shadow:inset 0 1px 1px #1414122e}.button-ink{background:var(--ink);color:var(--paper);border-radius:999px;align-items:center;gap:.5rem;padding:.7rem 1.1rem;transition:transform .2s cubic-bezier(.2,.8,.2,1);display:inline-flex}.button-ink:hover{transform:translateY(-1px)}.button-ink:active{transform:scale(.97)}.chat-button{will-change:translate}.chat-arrow{display:inline-grid;overflow:hidden}.chat-arrow>span{grid-area:1/1;transition:translate .4s cubic-bezier(.6,0,.2,1)}.chat-arrow>span:last-child{translate:-120%}.chat-button:hover .chat-arrow>span:first-child{translate:120%}.chat-button:hover .chat-arrow>span:last-child{translate:0}.status-dot{background:var(--accent-red);width:7px;height:7px;box-shadow:0 0 0 0 var(--accent-red);border-radius:999px}@supports (color:color-mix(in lab, red, red)){.status-dot{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-red) 45%, transparent)}}.status-dot{animation:2.4s ease-out infinite status-pulse}@keyframes status-pulse{70%,to{box-shadow:0 0 0 7px #0000}}.link-underline{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s}.link-underline:hover{background-size:100% 1px}.hello-word{animation:.55s cubic-bezier(.2,.8,.2,1) both hello-in;display:inline-block}.hello-language{animation:.55s both fade-in}@keyframes hello-in{0%{opacity:0;filter:blur(4px);transform:translateY(65%)}}@keyframes fade-in{0%{opacity:0}}.dizzy-cloud{z-index:5;pointer-events:none;transform-origin:0 100%;width:150px;animation:2.6s cubic-bezier(.3,1.4,.5,1) both dizzy-pop;position:absolute;bottom:58%;left:58%}.dizzy-cloud svg{filter:drop-shadow(0 6px 10px #1414121f);overflow:visible}.dizzy-bubble{animation:.2s both fade-in}.dizzy-text{font-family:var(--font-hand), cursive;letter-spacing:0;fill:var(--accent-red);stroke:none;font-size:30px}@keyframes dizzy-pop{0%{opacity:0;scale:.3}12%{opacity:1;scale:1.06}18%{scale:1}82%{opacity:1;translate:0}to{opacity:0;translate:0 -10px}}html.has-custom-cursor:where([data-cursor-visible]):not(:where(:has(.playground-studies dialog[open], .case-viewer[open]))),html.has-custom-cursor:where([data-cursor-visible]):not(:where(:has(.playground-studies dialog[open], .case-viewer[open]))) *{cursor:none!important}.cursor-layer{pointer-events:none;background:0 0;border:0;width:100%;height:100%;margin:0;padding:0;position:fixed;inset:0;overflow:visible}@supports not selector(:popover-open){html.has-custom-cursor dialog,html.has-custom-cursor dialog *{cursor:auto!important}}.cursor-dot,.cursor-ring{z-index:300;pointer-events:none;opacity:0;transition:opacity .2s;position:fixed;top:0;left:0}html[data-cursor-visible] .cursor-dot,html[data-cursor-visible] .cursor-ring{opacity:1}.cursor-dot{background:var(--ink);width:6px;height:6px;box-shadow:0 0 0 1.5px var(--paper);border-radius:999px;margin:-3px 0 0 -3px}.cursor-ring{--size:32px;width:var(--size);height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);border:1px solid var(--ink);place-items:center;display:grid}@supports (color:color-mix(in lab, red, red)){.cursor-ring{border:1px solid color-mix(in srgb, var(--ink) 35%, transparent)}}.cursor-ring{box-shadow:0 0 0 1px var(--paper);border-radius:999px}@supports (color:color-mix(in lab, red, red)){.cursor-ring{box-shadow:0 0 0 1px color-mix(in srgb, var(--paper) 40%, transparent)}}.cursor-ring{transition:opacity .2s,width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),margin .3s cubic-bezier(.2,.8,.2,1),background-color .3s,border-color .3s,scale .15s}.cursor-ring[data-state=link]{--size:52px;background:var(--ink)}@supports (color:color-mix(in lab, red, red)){.cursor-ring[data-state=link]{background:color-mix(in srgb, var(--ink) 6%, transparent)}}.cursor-ring[data-state=link]{border-color:#0000}.cursor-ring[data-state=label]{--size:76px;background:var(--ink);border-color:var(--ink)}.cursor-ring[data-pressed]{scale:.85}.cursor-label{color:var(--paper);white-space:nowrap;opacity:0;font-size:11px;font-weight:500;transition:opacity .2s}.cursor-ring[data-state=label] .cursor-label{opacity:1}html:has(.cursor-ring[data-state=label]) .cursor-dot{opacity:0}.header-shell{z-index:50;color:#fff;mix-blend-mode:difference;transition:translate .35s cubic-bezier(.2,.8,.2,1);position:fixed;inset:0 0 auto}.header-shell .text-ink{color:#fff}.header-shell .text-muted{color:#ffffff8c}.header-shell[data-hidden]{translate:0 -100%}.projects{--card-w:min(calc(100vw - 48px), 1040px, calc((100dvh - 9rem) * 1.5));--gutter:calc((100vw - var(--card-w)) / 2);--stick:max(1rem, calc(50svh - (var(--card-w) * 2 / 3 + 3.5rem) / 2));scroll-margin-top:var(--stick)}.projects:after{content:"";height:var(--travel,0px);display:block}.projects-sticky{top:var(--stick);position:sticky}.projects-rail{padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-user-select:none;user-select:none;gap:8px;display:flex;overflow-x:auto}.projects-rail::-webkit-scrollbar{display:none}.projects-card{flex:0 0 var(--card-w)}.projects-card:last-child{margin-right:var(--gutter)}.projects-thumb{aspect-ratio:3/2;background:var(--ink);border-radius:16px;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.projects-thumb{background:color-mix(in srgb, var(--ink) 5%, transparent)}}.projects-link{display:block}.cover-slides,.cover-slides img{width:100%;height:100%;position:absolute;inset:0}.cover-slides img{object-fit:cover;opacity:0;will-change:opacity;transition:scale .7s cubic-bezier(.2,.8,.2,1)}.cover-slides img[data-on]{opacity:1}.projects-link:hover .cover-slides img{scale:1.03}.projects-thumb img{transition:scale .7s cubic-bezier(.2,.8,.2,1)}.projects-link:hover .projects-thumb img{scale:1.03}.projects-meta{padding-left:max(0px, calc((var(--card-w) - 38rem) / 2));margin-top:.75rem}@media (max-width:767px){.projects{--card-w:min(82vw, calc((100svh - 9rem) * 1.5));--gutter:20px}}@media (max-width:767px) and (prefers-reduced-motion:reduce){.projects-sticky{position:static}.projects-rail{scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter)}.projects-card{scroll-snap-align:start}}.clients-grid{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.dashed-grid-lines{pointer-events:none;position:absolute;inset:0 auto auto 0;overflow:visible}.dashed-grid-lines line{stroke:var(--ink)}@supports (color:color-mix(in lab, red, red)){.dashed-grid-lines line{stroke:color-mix(in srgb, var(--ink) 16%, transparent)}}.dashed-grid-lines line{stroke-width:1px;stroke-dasharray:5 5}.dashed-grid-lines circle{fill:var(--ink-muted);opacity:.7}@media (min-width:640px){.clients-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.clients-grid .clients-cta{grid-column:span var(--rest-3)}}@media (min-width:768px){.clients-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.clients-grid .clients-cta{grid-column:span var(--rest-4)}}.clients-cell{aspect-ratio:5/4;justify-content:center;align-items:center;display:flex;position:relative}.client-logo{opacity:.4;transition:opacity .3s}.clients-cell:hover .client-logo{opacity:1}.clients-cta{grid-column:span var(--rest-2);aspect-ratio:auto;justify-content:flex-start;padding-inline:1.5rem}.client-logo--mono{filter:grayscale()contrast(1.2)}.section-progress{z-index:40;--row-h:16px;display:none;position:fixed;top:50%;right:1.25rem;transform:translateY(-50%)}@media (min-width:1024px){.section-progress{display:block}}.section-progress ol{flex-direction:column;align-items:flex-end;display:flex}.section-progress [data-tick]{height:var(--row-h);padding:5px 0 5px 12px;display:block}.section-progress svg{width:14px;height:6px;transition:width .45s cubic-bezier(.2,.8,.2,1);display:block;overflow:visible}.section-progress [data-state=read] svg{width:18px}.section-progress [data-state=current] svg{width:30px}.section-progress [data-tick]:hover svg,.section-progress [data-tick]:focus-visible svg{width:24px}.section-progress [data-state=current]:hover svg{width:30px}.section-progress path{fill:none;stroke-width:2.25px;stroke-linecap:round;vector-effect:non-scaling-stroke}.tick-base{stroke:var(--ink)}@supports (color:color-mix(in lab, red, red)){.tick-base{stroke:color-mix(in srgb, var(--ink) 16%, transparent)}}.tick-ink{stroke:var(--ink-muted);stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke .3s}[data-state=read] .tick-ink{stroke-dashoffset:0}[data-state=current] .tick-ink{stroke:var(--accent-red);stroke-dashoffset:calc(1 - var(--read,0))}.section-progress-label{top:calc(var(--row) * var(--row-h) + var(--row-h) / 2);background:var(--ink);height:1.75rem;color:var(--paper);white-space:nowrap;pointer-events:none;opacity:0;border-radius:999px;align-items:center;padding:0 .8rem;font-size:.75rem;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;right:calc(100% + .5rem);transform:translate(6px,-50%)}.section-progress-label:after{content:"";border:5px solid #0000;border-left-color:var(--ink);position:absolute;top:50%;left:calc(100% - 1px);transform:translateY(-50%)}.section-progress[data-show] .section-progress-label{opacity:1;transform:translateY(-50%)}.section-progress-text{gap:.5em;animation:.45s cubic-bezier(.2,.8,.2,1) both hello-in;display:inline-flex}.section-progress-number{color:var(--accent-red);font-variant-numeric:tabular-nums}.footer-social{color:var(--ink-muted);gap:.3em;transition:color .2s;display:inline-flex}.footer-social span{transition:translate .3s cubic-bezier(.2,.8,.2,1)}.footer-social:hover{color:var(--ink)}.footer-social:hover span{translate:2px -2px}.footer-puppy-tail,.footer-puppy-head{transform-box:fill-box}.footer-puppy-tail{transform-origin:0 100%}.footer-puppy-head{transform-origin:50% 90%;transition:rotate .5s cubic-bezier(.3,1.6,.5,1)}.footer-puppy-wag{opacity:0;transition:opacity .2s}.footer-puppy:hover .footer-puppy-tail{animation:.22s ease-in-out infinite alternate puppy-wag}.footer-puppy:hover .footer-puppy-wag{opacity:1}.footer-puppy:hover .footer-puppy-head{rotate:-9deg}@keyframes puppy-wag{0%{rotate:-10deg}to{rotate:14deg}}.footer-steam{stroke-dasharray:26 14;animation:1.6s linear infinite steam-rise}@keyframes steam-rise{to{stroke-dashoffset:40px}}.project-page{font-size:.90625rem;line-height:1.5rem}.project-page,.project-page *{letter-spacing:-.012em}.project-layout{display:grid}.project-column{grid-area:1/1;width:min(100%,38rem);min-width:0;margin-inline:auto}.project-section{scroll-margin-top:6rem}.project-section+.project-section,.project-gallery+.project-section{margin-top:4rem}.project-back{color:var(--ink-muted);font-size:.8125rem}.project-title{margin-top:1.5rem;font-weight:500}.project-summary{text-wrap:pretty;margin-top:.25rem}.project-details{margin-top:1.5rem}.project-details>div{grid-template-columns:5rem 1fr;gap:.75rem;display:grid}.project-details dt{color:var(--ink-muted)}.project-details-links{flex-wrap:wrap;gap:0 1rem;display:flex}.project-live-link{background:linear-gradient(var(--accent-red), var(--accent-red)) 0 100% / 0 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;font-weight:500}@supports (color:color-mix(in lab, red, red)){.project-live-link{background:linear-gradient(var(--accent-red), var(--accent-red)) 0 100% / 0 1.5px no-repeat, linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent)) 0 100% / 100% 1px no-repeat}}.project-live-link{transition:background-size .45s cubic-bezier(.2,.8,.2,1)}.project-live-link:hover{background-size:100% 1.5px,100% 1px}.project-cover{aspect-ratio:3/2;background:var(--ink);border-radius:12px;margin-top:2.5rem;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.project-cover{background:color-mix(in srgb, var(--ink) 5%, transparent)}}.highlight{color:inherit;background:linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 60% / 0 82%;border-radius:.2em;margin-inline:-.15em;padding-inline:.15em;transition:background-size 1s cubic-bezier(.65,0,.35,1) .15s}.highlight[data-drawn]{background-size:100% 82%}.project-details .highlight{transition-delay:1.1s}.project-body>*{margin-top:1rem}.project-body>:first-child{margin-top:0}.project-h2,.project-h3{font-weight:500}.project-h3{margin-top:2rem}.project-body>.project-h2+*{margin-top:.5rem}.project-list{padding-left:1.25rem;list-style:outside}.project-list li+li{margin-top:.25rem}.project-link{text-decoration:underline;-webkit-text-decoration-color:var(--ink);-webkit-text-decoration-color:var(--ink);-webkit-text-decoration-color:var(--ink);text-decoration-color:var(--ink)}@supports (color:color-mix(in lab, red, red)){.project-link{-webkit-text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent);-webkit-text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent);-webkit-text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent);text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent)}}.project-link{text-underline-offset:3px;transition:text-decoration-color .2s}.project-link:hover{-webkit-text-decoration-color:var(--accent-red);-webkit-text-decoration-color:var(--accent-red);-webkit-text-decoration-color:var(--accent-red);text-decoration-color:var(--accent-red)}.project-quote{border-left:1.5px solid var(--accent-red);padding-left:1rem}.project-gallery>*+*,.project-section+.project-gallery{margin-top:1rem}.project-body>.project-figure,.project-body>.project-figure+p,.project-body>.project-figure+ul{margin-top:1.5rem}.project-figure img{border-radius:12px;width:100%;height:auto}.project-figure figcaption{color:var(--ink-muted);margin-top:.5rem;font-size:.8125rem;line-height:1.25rem}.project-feedback{margin-top:2rem}.project-feedback-quote{font-family:var(--font-hand), cursive;letter-spacing:0;font-size:1.35rem;line-height:24px}.project-links a{align-items:baseline;gap:.75rem;padding:.25rem 0;display:flex}.project-links a>:first-child{flex:none;width:5rem;font-weight:500}.project-links-where{color:var(--ink-muted);transition:color .2s}.project-links-arrow{transition:translate .3s cubic-bezier(.2,.8,.2,1),color .2s}.project-links a:hover .project-links-where{color:var(--ink)}.project-links a:hover .project-links-arrow{color:var(--accent-red);translate:2px -2px}.project-next{width:min(100%,38rem);margin:6rem auto 0}.project-next-link{display:block}.project-next-label{color:var(--ink-muted)}.project-next-title{font-weight:500}.project-next-thumb{aspect-ratio:3;border-radius:12px;margin-top:1rem;position:relative;overflow:hidden}.project-next-thumb img{transition:scale .7s cubic-bezier(.2,.8,.2,1)}.project-next-link:hover .project-next-thumb img{scale:1.03}.project-contents{bottom:calc(1rem + env(safe-area-inset-bottom));z-index:30;grid-area:1/1;place-self:end center;max-width:100%;font-size:.8125rem;line-height:1.25rem;position:sticky}.project-contents path{fill:none;stroke-width:2px;stroke-linecap:round;vector-effect:non-scaling-stroke}.project-contents svg{width:14px;height:6px;display:block;overflow:visible}.project-contents-heading{display:none}.project-contents-pill{background:var(--ink);max-width:100%;min-height:2.25rem;color:var(--paper);border-radius:999px;align-items:center;gap:.5rem;margin-inline:auto;padding:0 .9rem;display:flex}.project-contents-pill .tick-base{stroke:var(--paper)}@supports (color:color-mix(in lab, red, red)){.project-contents-pill .tick-base{stroke:color-mix(in srgb, var(--paper) 25%, transparent)}}.project-contents-current{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.project-contents ol{background:var(--paper);border:1px solid var(--ink);border-radius:14px;width:min(100vw - 2.5rem,19rem);padding:.5rem;display:none;position:absolute;bottom:calc(100% + .5rem);left:50%}@supports (color:color-mix(in lab, red, red)){.project-contents ol{border:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}}.project-contents ol{translate:-50%}.project-contents[data-open] ol{display:block}.project-contents [data-tick]{color:var(--ink-muted);align-items:baseline;gap:.6rem;padding:.35rem .5rem;transition:color .2s;display:flex}.project-contents [data-tick] svg{flex:none;translate:0 -2px}.project-contents [data-tick]:hover,.project-contents [data-tick]:focus-visible,.project-contents [data-tick][data-state=current]{color:var(--ink)}@media (min-width:1120px){.project-layout{grid-template-columns:1fr min(100%,38rem) 1fr}.project-column{grid-column:2;width:100%}.project-contents{grid-area:1/1;place-self:start end;width:12.5rem;margin-right:2.5rem;transition:opacity .3s;top:7rem;bottom:auto}.project-contents[data-past]{opacity:0;pointer-events:none}.project-contents-pill{display:none}.project-contents-heading{color:var(--ink-muted);margin-bottom:.5rem;font-size:.6875rem;display:block}.project-contents ol{background:0 0;border:0;border-radius:0;width:auto;padding:0;display:block;position:static;translate:none}.project-contents [data-tick]{padding:.2rem 0}.project-contents [data-tick] svg{width:8px;transition:width .45s cubic-bezier(.2,.8,.2,1)}.project-contents [data-tick] span{margin-left:10px;transition:margin-left .45s cubic-bezier(.2,.8,.2,1)}.project-contents [data-tick][data-state=read] svg{width:12px}.project-contents [data-tick][data-state=read] span{margin-left:6px}.project-contents [data-tick][data-state=current] svg{width:18px}.project-contents [data-tick][data-state=current] span{margin-left:0}}.contact-sheet{--rule:32px;background:linear-gradient(to right, transparent 2.1rem, var(--note-margin) 2.1rem, var(--note-margin) calc(2.1rem + 1px), transparent calc(2.1rem + 1px)), repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), var(--note-rule) calc(var(--rule) - 1px) var(--rule)), var(--note);background-position:0 0,0 2.25rem,0 0;border-radius:6px;min-height:22rem;margin-top:2rem;padding:3.25rem 1.25rem 1.5rem 3rem;position:relative;rotate:-.6deg;box-shadow:0 1px 1px #1414120f,0 18px 40px -22px #14141259}.contact-sheet .paper-note-holes{inset:12px 20px auto}.contact-thread{flex-direction:column;gap:.9rem;display:flex}.contact-group{align-items:flex-end;gap:.6rem;display:flex}.contact-group--mine{transform-origin:100% 100%;justify-content:flex-end;animation:.45s cubic-bezier(.3,1.4,.5,1) both bubble-in}.contact-stack{flex-direction:column;align-items:flex-start;gap:.35rem;min-width:0;display:flex}.contact-line{transform-origin:0 100%;align-items:center;gap:.5rem;animation:.45s cubic-bezier(.3,1.4,.5,1) both bubble-in;display:flex}@keyframes bubble-in{0%{opacity:0;translate:0 6px;scale:.85}}.contact-avatar{background:var(--paper);width:2.5rem;height:2.5rem;box-shadow:inset 0 0 0 1px var(--ink);border-radius:999px;flex:none;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.contact-avatar{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent)}}.contact-avatar svg{width:116%;height:116%;margin:-4% 0 0 -9%}.contact-bubble{background:var(--surface);border-radius:18px;max-width:26rem;padding:.6rem .95rem;font-size:.9375rem;line-height:1.4;box-shadow:0 1px 1px #1414120f,0 4px 10px -6px #14141240}.contact-stack>.contact-line:last-child .contact-bubble{border-bottom-left-radius:6px}.contact-bubble--mine{background:var(--ink);color:var(--paper);white-space:pre-line;border-radius:18px 18px 6px}.contact-mail-link{text-decoration:underline;-webkit-text-decoration-color:var(--ink);-webkit-text-decoration-color:var(--ink);-webkit-text-decoration-color:var(--ink);text-decoration-color:var(--ink);font-weight:500}@supports (color:color-mix(in lab, red, red)){.contact-mail-link{-webkit-text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent);-webkit-text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent);-webkit-text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent);text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent)}}.contact-mail-link{text-underline-offset:3px;transition:text-decoration-color .2s}.contact-mail-link:hover{-webkit-text-decoration-color:var(--accent-red);-webkit-text-decoration-color:var(--accent-red);-webkit-text-decoration-color:var(--accent-red);text-decoration-color:var(--accent-red)}.contact-invite{gap:.6rem;display:grid}.contact-invite-card{background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink);border-radius:14px;align-items:center;gap:.8rem;padding:.6rem;display:flex}@supports (color:color-mix(in lab, red, red)){.contact-invite-card{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent)}}.contact-invite-card{transition:box-shadow .2s}.contact-invite-card:hover{box-shadow:inset 0 0 0 1px var(--ink)}@supports (color:color-mix(in lab, red, red)){.contact-invite-card:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent)}}.contact-invite-cal{background:var(--surface);text-align:center;border-radius:8px;flex:none;width:2.75rem;line-height:1;display:grid;overflow:hidden;box-shadow:0 1px 1px #14141214}.contact-invite-cal span:first-child{background:var(--accent-red);color:#fff;letter-spacing:.08em;padding:.2rem 0;font-size:.5625rem;font-weight:600}.contact-invite-cal span:last-child{padding:.3rem 0 .35rem;font-size:1.125rem;font-weight:600}.contact-invite-text{flex:1;gap:.1rem;min-width:0;display:grid}.contact-invite-title{font-weight:500}.contact-invite-meta{color:var(--ink-muted);font-size:.8125rem}.contact-invite-button{flex:none;padding:.5rem .9rem;font-size:.8125rem}@media (max-width:479px){.contact-invite-card{flex-wrap:wrap}.contact-invite-button{justify-content:center;width:100%}}.contact-icon-button{background:var(--surface);border-radius:999px;flex:none;place-items:center;width:2.25rem;height:2.25rem;transition:scale .2s;display:grid;box-shadow:0 1px 1px #1414120f,0 4px 10px -6px #14141240}.contact-icon-button:hover{scale:1.08}.contact-icon-button svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:1.05rem}.contact-icon-button[data-copied]{color:var(--accent-red)}.contact-typing{gap:.3rem;padding:.85rem 1rem;display:inline-flex}.contact-typing span{background:var(--ink-muted);border-radius:999px;width:6px;height:6px;animation:1s ease-in-out infinite typing-dot}.contact-typing span:nth-child(2){animation-delay:.15s}.contact-typing span:nth-child(3){animation-delay:.3s}@keyframes typing-dot{0%,60%,to{opacity:.45;translate:0}30%{opacity:1;translate:0 -4px}}.contact-compose{transform-origin:100% 0;flex-direction:column;align-items:flex-end;gap:.75rem;margin-top:1.25rem;animation:.45s cubic-bezier(.3,1.4,.5,1) both bubble-in;display:flex;position:relative}.contact-slip{--slip-rule:1.75rem;background:repeating-linear-gradient(to bottom, transparent 0 calc(var(--slip-rule) - 1px), var(--note-rule) calc(var(--slip-rule) - 1px) var(--slip-rule)), var(--surface);perspective:520px;background-position:0 .35rem;width:min(100%,22rem);padding:.35rem .9rem .5rem;transition:rotate .3s;position:relative;rotate:1.2deg;box-shadow:0 1px 1px #14141214,0 10px 20px -12px #14141259}.contact-slip:focus-within{rotate:0deg}.contact-slip textarea,.contact-slip-text{resize:none;width:100%;font-family:var(--font-hand), cursive;font-size:1.35rem;line-height:var(--slip-rule);letter-spacing:0;color:var(--ink);background:0 0;border:0;outline:0;margin:0;display:block}.contact-slip textarea::placeholder,.contact-from input::placeholder{color:var(--ink-muted);opacity:.7}.contact-from,.contact-slip-from{height:var(--slip-rule);font-size:.8125rem;line-height:var(--slip-rule);color:var(--ink-muted);align-items:baseline;gap:.4rem;margin:0;display:flex}.contact-from input{min-width:0;font:inherit;color:var(--ink);background:0 0;border:0;outline:0;flex:1}.contact-trap{opacity:0;width:1px;height:1px;position:absolute;left:-9999px}.contact-send{padding:.55rem .95rem;font-size:.875rem}.contact-send:disabled{opacity:.35;cursor:not-allowed}.contact-send-plane{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linejoin:round;width:1rem}.contact-slip[data-folding]{box-shadow:none;background:0 0;animation:.25s cubic-bezier(.5,0,.75,0) .55s both slip-to-plane;rotate:0deg}.contact-slip[data-folding]>textarea,.contact-slip[data-folding]>.contact-from{visibility:hidden}.contact-compose[data-phase=folding] .contact-send{opacity:0;transition:opacity .2s}.contact-fold-half{height:50%;position:absolute;inset-inline:0;overflow:hidden}.contact-fold-bottom{top:50%;box-shadow:0 1px 1px #14141214}.contact-fold-bottom:after{content:"";opacity:0;background:linear-gradient(#14141259,#1414120d);animation:.55s ease-in both fold-shadow;position:absolute;inset:0}@keyframes fold-shadow{60%{opacity:1}to{opacity:.3}}.contact-fold-top{background:linear-gradient(to top, var(--paper-fold), var(--surface) 70%);transform-origin:50% 100%;animation:.55s cubic-bezier(.55,0,.35,1) both fold-down;top:0;box-shadow:0 2px 6px -2px #14141240}.contact-slip-face{background:repeating-linear-gradient(to bottom, transparent 0 calc(var(--slip-rule) - 1px), var(--note-rule) calc(var(--slip-rule) - 1px) var(--slip-rule)), var(--surface);background-position:0 .35rem;height:200%;padding:.35rem .9rem .5rem;position:absolute;inset:0 0 auto}.contact-fold-bottom .contact-slip-face{top:-100%}.contact-fold-top .contact-slip-face{animation:.55s step-end both fold-face}.contact-slip-text{white-space:pre-line;max-height:calc(var(--slip-rule) * 3);overflow:hidden}@keyframes fold-down{to{transform:rotateX(-180deg)}}@keyframes fold-face{50%,to{opacity:0}}@keyframes slip-to-plane{0%{clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%)}to{clip-path:polygon(4% 80%,100% 52%,66% 100%,52% 86%,34% 90%);opacity:0;rotate:-12deg;scale:.4}}.contact-plane{opacity:0;pointer-events:none;width:5rem;stroke:var(--ink);stroke-width:1.3px;stroke-linejoin:round;filter:drop-shadow(0 6px 6px #1414122e);margin-top:-2.5rem;animation:1.15s cubic-bezier(.4,0,.6,1) .6s both plane-fly;position:absolute;right:calc(min(100%,22rem)/2 - 2.5rem)}@keyframes plane-fly{0%{opacity:0;translate:0;rotate:8deg;scale:.45}14%{opacity:1;rotate:0deg;scale:1}32%{translate:-36px 22px;rotate:-4deg}70%{opacity:1;translate:200px -150px;rotate:-18deg;scale:.9}to{opacity:0;translate:460px -360px;rotate:-24deg;scale:.7}}.contact-again{color:var(--ink-muted);margin:1rem 0 0 auto;font-size:.8125rem;display:block}.contact-list{margin-top:2.5rem}.contact-list>div{border-bottom:1px dashed var(--ink);justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1rem 0;display:flex}@supports (color:color-mix(in lab, red, red)){.contact-list>div{border-bottom:1px dashed color-mix(in srgb, var(--ink) 16%, transparent)}}.contact-list>div{font-size:.9375rem}.contact-list dt{color:var(--ink-muted)}@media (max-width:639px){.contact-sheet{background-position:0 0,0 2.25rem,0 0;background-image:linear-gradient(to right, transparent 1rem, var(--note-margin) 1rem, var(--note-margin) calc(1rem + 1px), transparent calc(1rem + 1px)), repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), var(--note-rule) calc(var(--rule) - 1px) var(--rule));padding:3rem .9rem 1.25rem 1.6rem}.contact-list>div{flex-direction:column;gap:.25rem}}.playground-hero{width:min(100% - 2.5rem,72rem);margin:0 auto;padding-top:clamp(11rem,26vh,16rem);position:relative}.playground-wordmark{z-index:2;letter-spacing:-.065em;margin-bottom:-.035em;font-size:clamp(4.25rem,15vw,12.5rem);font-weight:600;line-height:.82;position:relative}.playground-d{display:inline-block;position:relative}.playground-perch{--panic:0;letter-spacing:0;cursor:pointer;width:.5em;position:absolute;bottom:.748em;right:-.13em}.playground-perch[data-poked="0"] .playground-teeter>*,.playground-perch[data-poked="1"] .playground-teeter>*{animation:.3s ease-out poke-jolt}.playground-perch[data-poked="1"] .playground-teeter>*{animation-name:poke-jolt-b}@keyframes poke-jolt{30%{translate:.03em -.04em}}@keyframes poke-jolt-b{30%{translate:-.03em -.04em}}.playground-tumbler{z-index:3;cursor:grab;touch-action:none;will-change:transform;position:absolute;top:0;left:0}.playground-tumbler[data-dragging]{cursor:grabbing}.playground-tumbler .playground-blades{animation-duration:.9s}.playground-teeter{transform-origin:55% 87%;animation:teeter calc(3.4s - var(--panic) * 2s) cubic-bezier(.45, 0, .55, 1) infinite;display:block;position:relative}@keyframes teeter{0%,to{translate:0;rotate:10deg}38%{rotate:calc(24deg + var(--panic) * 10deg);translate:.02em}46%{rotate:calc(20deg + var(--panic) * 8deg);translate:.01em -.06em}62%{translate:0 -.02em;rotate:6deg}}.playground-propeller{width:58%;position:absolute;top:17%;left:53%;overflow:visible;translate:-50% -94%}.playground-blades{transform-box:fill-box;transform-origin:50%;animation:.32s linear infinite propeller}.playground-perch:hover .playground-blades{animation-duration:.14s}@keyframes propeller{0%{scale:1}25%{scale:.08 1}50%{scale:-1 1}75%{scale:.08 1}to{scale:1}}.playground-grid{--gap:12px;justify-content:center;gap:var(--gap);flex-wrap:wrap;width:min(100% - 2.5rem,72rem);margin:0 auto;display:flex}@media (min-width:1024px){.playground-grid,.playground-hero{width:min(100% - 4rem,72rem)}}.playground-tile{--share:var(--wide-share);--count:var(--wide-count);flex:0 0 calc(var(--share) * (100% - (var(--count) - 1) * var(--gap)) - .1px);min-width:0}@media (max-width:639px){.playground-tile{--share:var(--phone-share);--count:var(--phone-count)}}.playground-tile button{width:100%;aspect-ratio:var(--ratio);background:var(--ink);border-radius:12px;display:block;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.playground-tile button{background:color-mix(in srgb, var(--ink) 5%, transparent)}}.playground-tile button{transition:translate .4s cubic-bezier(.2,.8,.2,1),rotate .4s cubic-bezier(.2,.8,.2,1)}.playground-tile button:hover,.playground-tile button:focus-visible{translate:0 -4px;rotate:var(--lean)}.playground-tile img,.playground-tile video{object-fit:cover;width:100%;height:100%;display:block}.playground-lightbox{background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:1.5rem;display:none}.playground-lightbox[open]{animation:.25s both fade-in;display:flex}.playground-lightbox::backdrop{background:var(--paper)}@supports (color:color-mix(in lab, red, red)){.playground-lightbox::backdrop{background:color-mix(in srgb, var(--paper) 92%, transparent)}}.playground-lightbox::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.playground-lightbox-image{object-fit:contain;border-radius:12px;width:auto;max-width:min(100%,72rem);height:auto;max-height:calc(100dvh - 7rem);box-shadow:0 24px 60px -24px #14141280}.playground-lightbox-loop{width:min(100%, 72rem, calc((100dvh - 7rem) * var(--ratio)));aspect-ratio:var(--ratio);border-radius:12px;position:relative;overflow:hidden;box-shadow:0 24px 60px -24px #14141280}.playground-lightbox-bar{color:var(--ink);gap:1.5rem;font-size:.8125rem;display:flex}.experience-list li{border-bottom:1px dashed var(--ink);grid-template-columns:minmax(0,1fr) minmax(0,1fr) 9.5rem;align-items:baseline;gap:1rem;padding:1rem 0;display:grid}@supports (color:color-mix(in lab, red, red)){.experience-list li{border-bottom:1px dashed color-mix(in srgb, var(--ink) 16%, transparent)}}.experience-list li{font-size:.9375rem}.experience-list li:first-child{border-top:1px dashed var(--ink)}@supports (color:color-mix(in lab, red, red)){.experience-list li:first-child{border-top:1px dashed color-mix(in srgb, var(--ink) 16%, transparent)}}.experience-company{font-weight:500}.experience-role,.experience-time{color:var(--ink-muted)}.experience-time{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}@media (max-width:639px){.experience-list li{grid-template-columns:1fr auto;gap:.15rem 1rem}.experience-role{grid-row:2}}.dial{touch-action:pan-y pinch-zoom;flex-direction:column;align-items:center;margin-top:1rem;display:flex}.dial-print{width:min(100%, max(15rem, calc(100svh - var(--stage) - var(--around))));aspect-ratio:1;background:var(--ink);border-radius:12px;display:block;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.dial-print{background:color-mix(in srgb, var(--ink) 5%, transparent)}}.dial-print{transition:translate .4s cubic-bezier(.2,.8,.2,1),rotate .4s cubic-bezier(.2,.8,.2,1)}.dial-print:hover,.dial-print:focus-visible{translate:0 -4px;rotate:-.8deg}.dial-print img{opacity:0;will-change:opacity}.dial-print img[data-on]{opacity:1}.dial-print video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.dial-section{--d:min(135vw, 40rem);--stage:calc(var(--d) * .38);--around:13rem;--hole:calc(var(--d) * .1925);--ring:calc(var(--d) * .38);scroll-margin-top:-3rem;overflow-x:clip}@media (min-width:768px){.dial-section{--d:min(40rem, 62svh)}}.dial-stage{width:100vw;height:var(--stage);-webkit-user-select:none;user-select:none;flex:none;margin-top:1rem;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(#000 68%,#0000 98%);mask-image:linear-gradient(#000 68%,#0000 98%)}.dial-body{width:var(--d);height:var(--d);margin-left:calc(var(--d) / -2);cursor:grab;border-radius:50%;position:absolute;top:.75rem;left:50%;box-shadow:0 1px 2px #1414124d,0 24px 44px -18px #14141299}.dial-body:active{cursor:grabbing}.dial-layer{pointer-events:none}.dial-wheel{transform:rotate(var(--angle,0deg));will-change:transform;border-radius:50%;outline:none;position:absolute;inset:0;overflow:hidden}.dial-wheel:focus-visible{box-shadow:0 0 0 2px var(--accent-red)}.dial-hole{width:var(--hole);height:var(--hole);margin:calc(var(--hole) / -2);transform:rotate(calc(var(--i) * var(--step))) translateY(calc(var(--ring) * -1));position:absolute;top:50%;left:50%}.dial-hole-face{transform:rotate(calc((var(--angle) + var(--i) * var(--step)) * -1));position:absolute;inset:0}.dial-hole-window{background:#1c1712;border-radius:50%;position:absolute;inset:9.5%;overflow:hidden}.dial-hole-window:after{content:"";background:#18100657;border-radius:50%;position:absolute;inset:0;box-shadow:inset 2px 6px 12px #140c04a6}.dial-hole[data-on] .dial-hole-window:after{background:0 0}.dial-fade{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;position:absolute;inset:62% 0 0;-webkit-mask-image:linear-gradient(#0000,#000 40%);mask-image:linear-gradient(#0000,#000 40%)}.dial-cta{text-align:center;flex-direction:column;align-items:center;margin-top:.5rem;display:flex;position:relative}.dial-cta p{text-wrap:balance;opacity:.4;max-width:24rem;margin-top:.75rem;font-size:.8125rem;line-height:1.4}.not-found{flex-direction:column;justify-content:center;min-height:100svh;padding-block:4.5rem;display:flex}.not-found-copy{text-align:center}.not-found-copy h1{letter-spacing:-.03em;font-size:clamp(1.75rem,4vw,2.25rem);font-weight:500;line-height:1.1}.not-found-copy p{text-wrap:balance;max-width:26rem;color:var(--ink-muted);margin:.5rem auto 0;font-size:.9375rem;line-height:1.4}.not-found-print{--led:#ffb02e;aspect-ratio:auto;background:#15110c;justify-content:center;align-items:center;width:100%;height:clamp(7rem,24svh,19rem);display:flex;box-shadow:inset 0 2px 10px #000000b3,inset 0 0 0 1px #ffffff0d}.not-found-display{gap:7%;height:min(66%,32vw);display:flex;transform:skew(-6deg)}.not-found-display svg{width:auto;height:100%;overflow:visible}.not-found-display polygon{fill:#ffb02e12}.not-found-display svg[data-on] polygon[data-lit]{fill:var(--led);filter:drop-shadow(0 0 5px #ffb02ea6);animation:.28s step-end both led-on}@keyframes led-on{0%,50%{opacity:.35}25%,75%{opacity:1}}.not-found-digit{font-size:calc(var(--hole) * .34);color:#f4efe6;place-items:center;font-weight:500;display:grid}.not-found-links{color:var(--ink-muted);gap:1.25rem;margin-top:.875rem;font-size:.8125rem;display:flex}@media (prefers-reduced-motion:reduce){.not-found-display svg[data-on] polygon[data-lit],.hello-word,.hello-language,.status-dot,.inline-doodle:hover .doodle-flame,.inline-doodle:hover .doodle-screen,.section-progress-text,.contact-line,.contact-group--mine,.playground-blades,.playground-teeter,.contact-compose,.contact-typing span,.footer-steam,.footer-puppy:hover .footer-puppy-tail,html[data-revealed] .reveal,.kind-sent-under,.kind-sent-note,.kind-stamp,.kind-sent-count,.kind-sent-thanks{animation:none}.photo-stack-print,.paper-note,.kind-note,.kind-note>*,.inline-doodle g,.section-progress svg,.section-progress-label,.project-contents [data-tick] svg,.project-contents [data-tick] span,.project-links-arrow,.highlight,.projects-thumb img,.dial-print,.project-next-thumb img,.chat-arrow>span,.button-ink,.link-underline{transition:none}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

/* The introduction and its navigation are readable at first paint. */
#intro .reveal,
html:has(#intro) .header-shell .reveal {
  opacity: 1;
  animation: none;
}

@media (max-width: 767px) {
  .header-shell {
    mix-blend-mode: normal;
    background: var(--paper);
    color: var(--ink);
  }
  .header-shell .text-ink { color: var(--ink); }
  .header-shell .text-muted { color: var(--ink-muted); }
}

@media (max-width: 27rem) {
  header:has(a[download]) {
    padding-inline: clamp(.65rem, 3vw, .95rem);
    gap: .45rem;
  }
  header:has(a[download]) > div, header:has(a[download]) nav { gap: .5rem; }
  header:has(a[download]) nav { white-space: nowrap; }
  header:has(a[download]) .header-signature { width: clamp(4.4rem, 45vw - 4.3rem, 7.4rem); height: auto; }
}

/* Keep the supplied avatar crisp in both SVG illustrations and the photo album. */
image[href="/assets/soren-avatar.png"], img[src="/assets/soren-avatar.png"] {
  image-rendering: pixelated;
}
.photo-stack-print img[src="/assets/soren-avatar.png"] {
  object-fit: contain;
  background: var(--paper);
}
[data-theme="dark"] image[href="/assets/soren-avatar.png"] {
  filter: drop-shadow(0 0 1px rgb(239 237 231 / 45%));
}

/* Shared contact illustration */
.cradle-rest { display:block; width:100%; height:auto; min-height:min(55vw,195px); }
.pencil-cradle[data-interactive] > .cradle-rest { display:none; }
.motion-stage { position:relative; isolation:isolate; width:100%; aspect-ratio:620/322; min-height:min(55vw,195px); }
.motion-drawing,.motion-marks,.motion-tokens { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.motion-tool { position:absolute; left:0; top:0; pointer-events:auto; touch-action:none; display:block; padding:0; background:none; border:0; color:var(--figure-ink); user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; will-change:transform; }
.motion-tool svg { width:100%; height:100%; display:block; overflow:visible; pointer-events:none; }
.motion-tool:focus-visible,.motion-controls button:focus-visible { outline:2px dashed var(--accent-blue); outline-offset:3px; }
.motion-tool.dragging { z-index:1; }
.motion-controls { margin:6px auto 0; display:flex; align-items:center; justify-content:center; gap:clamp(8px,2vw,22px); color:var(--ink-muted); font:inherit; font-size:12px; }
.motion-controls button { position:relative; min-height:44px; padding:0 2px; font:inherit; white-space:nowrap; }
.motion-controls button[aria-current],.motion-controls button:hover { color:var(--ink); }
.motion-controls button[aria-current]::after { content:''; position:absolute; height:3px; background:var(--accent-blue); left:0; right:0; bottom:7px; border-radius:60% 40% 65% 24%; transform:rotate(-2deg); }

@media(max-width:400px) {
  .motion-controls { gap:9px; }
}

/* Work history uses the same column width and paper rules as the contact list. */
.experience-list li {
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(1rem, 3vw, 2rem);
  padding-block: 1.25rem;
}
.experience-list .experience-time {
  color: var(--ink-muted);
  font-size: .8125rem;
  text-align: left;
}
.experience-list .experience-company {
  font-size: 1rem;
  line-height: 1.5;
}
.experience-list .experience-role {
  margin-top: .2rem;
  line-height: 1.5;
}
.experience-summary {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.7;
  text-wrap: pretty;
}
@media (max-width: 36rem) {
  .experience-list li { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; }
}

/* The scanned stationery has separate sizing for its border, postmark and writing lines. */
#contact > div:has(> .contact-sheet) { container-type: inline-size; }
.contact-sheet {
  --sender: 2.2rem;
  --gutter: .75rem;
  --airmail-border: clamp(8px, 2.1cqw, 13px);
  --page-inset: clamp(1.3rem, 6cqw, 2.5rem);
  --stationery: #fbf7ed;
  --wash: rgb(251 247 237 / 93%);
  --edge: #584f3b36;
  --action: #374f6b;
  --post-red: #a44840;
  isolation: isolate;
  margin-top: calc(1.6rem + 2cqw);
  padding: calc(var(--airmail-border) + .85rem) var(--page-inset) var(--page-inset);
  background: var(--grain) 0 0 / 185px 185px,
    linear-gradient(var(--wash) 25%, var(--stationery) 67%),
    var(--stationery) url("/assets/airmail-paper.webp") center / cover;
  border-radius: 3px;
  box-shadow: 0 1px 2px #352a1d2b, 0 12px 22px -15px #352a1d55;
  rotate: -1.5deg;
}
.contact-sheet > .paper-note-holes { display: none; }
.contact-sheet::before, .contact-sheet::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.contact-sheet::before {
  inset: 0;
  border: var(--airmail-border) solid transparent;
  border-image: url("/assets/airmail.webp") 35 round;
  opacity: .83;
}
.contact-sheet::after {
  top: calc(var(--airmail-border) + .6rem);
  right: var(--page-inset);
  width: clamp(5.65rem, 24cqw, 8.8rem);
  aspect-ratio: 344 / 198;
  /* Crop the cancellation and stamp from the upper right of the scan. */
  background: url("/assets/airmail.webp") 93.2% 4.6% / 321.8% auto no-repeat;
  clip-path: polygon(0 28%, 34% 21%, 40% 0, 68% 0, 70% 23%, 99% 24%,
    100% 100%, 56% 100%, 56% 65%, 39% 62%, 36% 55%, 0 67%);
  filter: grayscale(.75) contrast(1.4);
  mix-blend-mode: multiply;
  opacity: .78;
}
.contact-sheet .contact-thread::before {
  content: "";
  display: block;
  width: clamp(5.6rem, 20cqw, 7rem);
  height: clamp(3rem, 13.8cqw, 4.8rem);
  background: currentColor;
  mask: url("/assets/soren-zhang-signature.svg") left center / contain no-repeat;
}
.contact-sheet .contact-group:not(.contact-group--mine) {
  column-gap: var(--gutter);
}
.contact-sheet .contact-line { max-width: 100%; }
.contact-sheet .contact-avatar {
  width: var(--sender); height: var(--sender);
  box-shadow: none; background: transparent;
}
.contact-stack .contact-bubble { min-width: 0; overflow-wrap: anywhere; }
.contact-sheet .wechat-card {
  --wechat-ink: #355b49;
  display: grid;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .35rem .5rem;
}
.wechat-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .4rem;
}
.wechat-mark {
  width: 1.15rem; height: 1.15rem;
  background: var(--wechat-ink);
  mask: url("/assets/wechat-mark.svg") center / contain no-repeat;
}
.wechat-handle { color: var(--wechat-ink); font-weight: 500; user-select: all; }
@media (pointer: coarse) {
  .wechat-copy { width: 2.75rem; height: 2.75rem; }
}
.wechat-copy:focus-visible { outline: 2px solid var(--wechat-ink); outline-offset: 2px; }
.wechat-hint { grid-column: 1 / -1; font-size: .8125rem; }
html[data-theme="dark"] .contact-sheet :is(.contact-bubble, .contact-icon-button, .contact-slip, .contact-plane, .contact-send) {
  --surface: #2c2a26;
  --paper: #171614;
  --ink-muted: #968f83;
}
html[data-theme="dark"] .wechat-card {
  --wechat-ink: var(--ink);
}
.contact-slip:focus-within:not([data-folding]) {
  outline: 2px solid var(--action); outline-offset: 2px;
}
.contact-compose[data-phase="folding"] { --paper-fold: #e6e0d5; }
html[data-theme="dark"] .contact-compose[data-phase="folding"] { --paper-fold: #2b2925; }
.contact-slip-face {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--slip-rule);
}
.contact-slip-face .contact-slip-text { white-space: pre-wrap; overflow-wrap: break-word; min-height: 0; }
.contact-fold-address { flex: 1; min-width: 0; overflow: hidden; white-space: pre; color: var(--ink); }
html:not([data-theme="dark"]) .contact-sheet .contact-send:not(:disabled) { background: var(--action); color: var(--surface); }
html[data-theme="dark"] .contact-sheet {
  --stationery: #302c27;
  --wash: rgb(40 36 31 / 97%);
  --action: #b8cde6;
  --edge: #d5c9ae42;
}
html[data-theme="dark"] .contact-sheet::before {
  filter: brightness(.77) saturate(.82);
  opacity: .78;
}
html[data-theme="dark"] .contact-sheet::after {
  filter: grayscale(1) contrast(1.4) invert(1);
  mix-blend-mode: screen;
}

@media (max-width: 42rem) {
  .contact-sheet { margin-inline: .875rem; }
}
@container (max-width: 27rem) {
  .contact-sheet { --sender: 1.85rem; --gutter: .5rem; }
  .contact-sheet .contact-compose { margin-inline-start: .75rem; }
}
@container (max-width: 19rem) {
  .contact-sheet .wechat-card { column-gap: .25rem; }
  .wechat-message { padding-inline: .5rem; }
  .wechat-handle { font-size: .8125rem; }
}

#testimonials .kind-note[aria-hidden="true"] {
  pointer-events: none;
  overflow: hidden;
}
.credential-heading {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
}
.credential-list {
  display: grid;
  gap: .9rem 1.5rem;
  margin-top: .9rem;
}
.credential-list > div {
  padding-top: .65rem;
}
.credential-list dt { font-weight: 500; line-height: 1.5; }
.credential-list dd { margin-top: .2rem; font-size: .875rem; line-height: 1.5; color: var(--ink-muted); }
@media (min-width: 40rem) {
  .credential-list:has(> div:nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A taped card for the current employer in the introduction. */
#intro > div { container-type: inline-size; }
#intro .reveal:has(> .employer-note) {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: clamp(.75rem, calc(100cqi - 25rem), 96px);
}
#intro .status-dot { flex: none; }
@container (max-width: 27rem) {
  #intro .reveal:has(> .employer-note) {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: .75rem;
  }
}
@container (max-width: 20rem) {
  #intro .reveal:has(> .employer-note) {
    grid-template-columns: 1fr;
    row-gap: 1.35rem;
  }
  #intro .employer-note { margin-inline-start: .15rem; }
}
.employer-note {
  --card-stock: #fafbf6;
  --card-inset: var(--paper);
  --card-label: #4c6352;
  --card-type: #233a2e;
  --tape-color: #528563;
  --tape-brightness: .76;
  --tape-space: 1.4375rem;
  --tape-overhang: 1.1875rem;
  --paper-edge: .28rem;
  --text-inset: .5625rem;
  position: relative;
  isolation: isolate;
  width: min(10.5rem, 100%);
  margin: var(--tape-overhang) .45rem 0 2px;
  padding: calc(var(--tape-space) + var(--text-inset)) .9rem
    calc(var(--paper-edge) + var(--text-inset));
  overflow-wrap: anywhere;
  border: 1px solid rgb(64 66 43 / 13%);
  border-radius: .8rem;
  background: var(--card-stock);
  color: var(--card-type);
  box-shadow: 0 1px 2px rgb(44 42 27 / 8%), 1px 6px 12px -5px rgb(44 42 27 / 21%);
  translate: 0 -16px;
  rotate: -2.5deg;
}
.employer-note:hover { rotate: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  .employer-note { transition: rotate .4s cubic-bezier(.2,.8,.2,1); }
}
.employer-note::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--tape-space) var(--paper-edge) var(--paper-edge);
  border-radius: .52rem;
  background: var(--card-inset) var(--grain) 0 0 / 240px 240px;
}
.employer-note::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  top: calc(0px - var(--tape-overhang));
  width: calc((var(--tape-overhang) + var(--tape-space)) * 80 / 136);
  aspect-ratio: 80 / 136;
  /* Straighten the tilt already in the scan so the strip follows the card. */
  rotate: -8deg;
  background: var(--tape-color) url("/assets/employer-tape.webp") center / 100% 100% no-repeat;
  background-blend-mode: luminosity;
  filter: brightness(var(--tape-brightness));
  clip-path: polygon(24% 2.4%, 29% 1%, 37% 2.8%, 45% 3.5%, 55% 6%, 60% 8.3%,
    70% 9%, 82% 7.2%, 90% 8%, 99% 11.8%, 96% 28%, 94% 39%, 89% 50%,
    88% 57%, 81% 98%, 63% 99%, 52% 98.5%, 38% 97%, 29% 97.4%, 20% 95%,
    14% 95.3%, 3% 92%, 7% 65%, 8% 60%, 12% 54%);
}
.employer-note > p:first-child {
  color: var(--card-label);
  font-weight: 500;
  line-height: 1.2;
}
.employer-note > p + p {
  margin-top: .1875rem;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -.025em;
}
html[data-theme="dark"] .employer-note {
  --card-stock: #44574b;
  --card-inset: #2a3b31;
  --card-label: #b8cfbb;
  --card-type: #f0f5ea;
}

/* Playground: the front print swings out on edge and slips behind its neighbour. */
.playground-stack { overflow-x: clip; }
.stack-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem .5rem;
  margin: 1.45rem auto .5rem;
  padding-top: 1rem;
  isolation: isolate;
}
.stack-pack {
  grid-area: 1 / 1 / 2 / -1;
  position: relative; width: min(calc(100% - 1rem), max(18rem, 70svh)); aspect-ratio: 1;
  margin: auto; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.stack-card {
  --x: 0%; --y: 0%; --angle: 0deg; --scale: 1;
  display: block; position: absolute; inset: 0; z-index: 5;
  background: var(--surface); border-radius: clamp(6px, 1vw, 12px); overflow: hidden;
  box-shadow: 0 1px 3px #151e1b20, 0 9px 16px -9px #151e1b56;
  transform: perspective(700px) translate(var(--x),var(--y)) rotateZ(var(--angle)) scale(var(--scale));
  -webkit-user-drag: none;
}
.stack-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px #1528201a;
}
.stack-card:not([data-slot="0"]) { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .stack-card[data-slot="0"][data-tilt] {
    transform: perspective(700px) rotateX(calc(-8deg * var(--tilt-y, 0))) rotateY(calc(11deg * var(--tilt-x, 0)));
    transition: transform 120ms ease-out;
  }
  .stack-card:not([data-slot="4"])::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 33% 25% at 48% 46%, rgb(255 254 248 / 36%), rgb(255 255 255 / 12%) 52%, transparent),
      radial-gradient(ellipse 53% 47% at 48% 46%, transparent 45%, rgb(16 26 30 / 11%));
    transform: translate(calc(20% * var(--tilt-x, 0)), calc(20% * var(--tilt-y, 0)));
    opacity: var(--light-strength, 0);
    transition: transform 120ms ease-out, opacity 160ms ease-out;
  }
}
.stack-card[data-slot="1"] { --x: 5.2%; --y: .6%; --angle: 4deg; --scale: .94; z-index: 4; }
.stack-card[data-slot="2"] { --x: -6.4%; --y: 1.7%; --angle: -5deg; --scale: .88; z-index: 3; }
.stack-card[data-slot="3"] { --x: 9%; --y: 2.8%; --angle: 7deg; --scale: .84; z-index: 1; }
.stack-card[data-slot="4"] { --scale: .81; visibility: hidden; z-index: 0; }
.stack-card img, .stack-card video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.stack-arrow {
  height: 44px; width: 44px;
  display: grid; place-items: center; cursor: pointer; border-radius: 50%; color: var(--ink);
  visibility: hidden;
}
.stack-stage[data-ready] .stack-arrow { visibility: visible; }
.stack-arrow[data-step="-1"] { grid-area: 2 / 1; justify-self: end; }
.stack-arrow[data-step="1"] { grid-area: 2 / 3; justify-self: start; }
@media (min-width: 52rem) {
  .stack-stage { width: min(100%, max(18rem, 70svh)); }
  .stack-pack { width: 100%; }
  .stack-arrow[data-step="-1"] { grid-area: 1 / 1; justify-self: start; translate: calc(-100% - 2rem) 0; }
  .stack-arrow[data-step="1"] { grid-area: 1 / 3; justify-self: end; translate: calc(100% + 2rem) 0; }
}
.stack-arrow svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.stack-arrow:hover { background: color-mix(in srgb,var(--ink) 5%, transparent); }
.stack-arrow:focus-visible, .stack-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.stack-counter { grid-area: 2 / 2; text-align: center; color: var(--ink-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.playground-stack .dial-cta { margin-top: 1.1rem; }

/* The studies share the 4:3 frame of the original compositions. */
.playground-stack .stack-pack { aspect-ratio: 4 / 3; }
.study-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .875rem;
}
.study-grid a { display: block; color: var(--ink); text-decoration: none; }
.study-grid li { position: relative; }
.study-grid .study-demo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: 12px; pointer-events: none; opacity: 0;
  transition: opacity 160ms ease-out;
}
.study-grid .study-demo-ready { opacity: 1; }
.study-grid img {
  display: block;
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  border-radius: 12px;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .study-grid img, .study-grid .study-demo { transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity 160ms ease-out; }
  .study-grid a:is(:hover,:focus-visible) img, .study-grid a:is(:hover,:focus-visible) + .study-demo {
    transform: translateY(-3px) rotate(var(--lean));
  }
}
.study-display {
  width: min(100%, 72rem, calc((100dvh - 9rem) * 4 / 3));
  aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: 12px;
  box-shadow: 0 24px 60px -24px #14141280;
}
.study-display iframe { width: 100%; height: 100%; display: block; border: 0; }
/* The embedded studies own pointer input while the lightbox is open. */
html:has(.playground-studies dialog[open]) .cursor-layer,
html:not([data-cursor-visible]) .cursor-layer { visibility: hidden; }
.playground-studies dialog[open] { cursor: auto; }
.playground-studies dialog[open] button { cursor: pointer; }
.study-details { color: var(--ink); }
.study-details .playground-lightbox-bar {
  align-items: center;
  white-space: nowrap;
  font-size: .8125rem;
  line-height: 1.5;
}
.study-details button, .study-details [data-position] {
  min-height: 44px;
  font: inherit;
}
.study-details [data-position] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6ch;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 780px) { .study-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px) {
  .study-grid { grid-template-columns: 1fr; }
  .playground-studies dialog { padding-inline: .75rem; }
  .study-details .playground-lightbox-bar { gap: 1rem; }
}

.study-display { background-size: cover; background-position: center; }
.study-display iframe { opacity: 0; }
.study-display iframe.study-ready { opacity: 1; }
.study-zoom { display: none; }

.project-cover:has(> img[src^="/assets/case-studies/"]) { aspect-ratio: 16 / 9; }
.product-case .project-cover:has(> img) { aspect-ratio: 3 / 2; }
.product-case { --plate-tint: #8798bc; }
.product-case[data-product="axiom"] { --plate-tint: #ad9985; }
[data-product="axiom"] :is(.project-cover, .case-compare-frames .case-panel-open) {
  aspect-ratio: 3 / 2;
}
[data-product="axiom"] .case-compare-frames .case-panel-open {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 16% 0%, #f5f5f4, transparent 60%),
    linear-gradient(127deg, #e7e7e5, #f0f0ef 55%, #d9d9d7);
}
[data-product="axiom"] .case-compare-frames .case-panel-open img {
  width: 61.8034%;
  height: auto;
  border-radius: 0;
  filter: drop-shadow(0 1px 2px #18191822) drop-shadow(0 .8cqi 1.3cqi #18191820);
}
.product-case[data-product="galt"] { --plate-tint: #a8a8a2; }
.product-illustration { container-type: inline-size; margin-block: 1.4rem; }
.case-compare {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.case-compare-options {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto .85rem;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
}
.case-compare-options label { position: relative; cursor: pointer; }
.case-compare-options span {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding-inline: .9rem;
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: .8125rem;
  line-height: 1.3;
}
/* Align the Axiom state switch with the centered window in each illustration. */
[data-product="axiom"] .case-compare-options {
  width: 61.8034%;
}
[data-product="axiom"] .case-compare-options label {
  flex: 1 1 0;
  min-width: 0;
}
[data-product="axiom"] .case-compare-options span {
  height: 100%;
  padding-inline: clamp(.25rem, 1cqi, .75rem);
  text-align: center;
}
.case-compare-options input:checked + span {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 3px #0002;
}
.case-compare-options input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.case-compare .product-panel { display: none; }
.case-compare:has(label:nth-child(1) input:checked) .product-panel:nth-child(1),
.case-compare:has(label:nth-child(2) input:checked) .product-panel:nth-child(2),
.case-compare:has(label:nth-child(3) input:checked) .product-panel:nth-child(3) { display: block; }
.case-compare-frames .case-panel-open,
.case-compare-frames .case-panel-open img { border-radius: 12px; }
.case-compare-frames .case-panel-open img { box-shadow: none; }
@media (pointer: coarse) { .case-compare-options span { min-height: 44px; } }
.product-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  padding: 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--plate-tint) 18%, var(--paper));
}
.product-panel { min-width: 0; }
.product-panel > figcaption {
  margin: 0 0 .5rem;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 550;
  line-height: 1.4;
}
.case-panel-open img, .panel-example {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
  box-shadow: 0 1px 2px #29322714, 0 4px 10px -6px #29322736;
}
.panel-example {
  padding: .85rem 1rem;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-line;
}
.product-panels[data-layout="three"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-panels[data-layout="strips"] { grid-template-columns: minmax(0, 1fr); }
.product-panels[data-layout="strips"] .product-panel {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
}
.product-panels[data-layout="strips"] figcaption { margin: 0; }
.product-panels[data-layout="strips"] .case-panel-open { max-width: 21rem; }
.illustration-caption {
  margin-top: .6rem;
  color: var(--ink-muted);
  font-size: .8125rem;
  line-height: 1.55;
}
@container (max-width: 32rem) {
  .product-panels { padding: .75rem; gap: .8rem; }
  .product-panels:not([data-layout="compact"]) { grid-template-columns: minmax(0, 1fr); }
  .product-panel > figcaption { margin-bottom: .35rem; }
  [data-product="ip-timezone"] .case-compare-frames .case-panel-open img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
  }
}
/* The first slide repeats the cover. Paint only one image at the rounded edge. */
.projects-thumb .cover-slides > img:first-child,
.projects-thumb:has(.cover-slides > img[data-on]:not(:first-child)) > img {
  opacity: 0;
}

:root { --galt-art-radius: 12px; }
[data-product="galt"] :is(.project-cover, .project-figure img),
.projects-thumb:has(img[src*="/case-studies/galt/"]),
.project-next-thumb:has(img[src*="/case-studies/galt/"]),
.cv-stage img[src*="/case-studies/galt/"] {
  border-radius: var(--galt-art-radius);
}
.projects-thumb:has(img[src*="/case-studies/galt/"]),
.project-next-thumb:has(img[src*="/case-studies/galt/"]) {
  aspect-ratio: 3 / 2;
}
[data-product="galt"] .project-cover img,
:is(.projects-thumb, .project-next-thumb) img[src*="/case-studies/galt/"] {
  object-fit: contain !important;
}
.projects-link:hover .projects-thumb:has(img[src*="/case-studies/galt/"]) img,
.project-next-link:hover .project-next-thumb:has(img[src*="/case-studies/galt/"]) img {
  scale: 1;
}
.product-film { margin-block: 1rem; }
.product-film summary {
  width: fit-content;
  padding-block: .4rem;
  font-size: .875rem;
  cursor: pointer;
}
.product-film video {
  width: min(100%, 27rem);
  height: auto;
  margin: .6rem auto 0;
  border-radius: 9px;
}
.featured-film video {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 14px;
}
@media (prefers-reduced-motion: no-preference) {
  .study-display iframe { transition: opacity 170ms ease-out; }
}
@media (max-width: 600px), (max-height: 480px) {
  .study-zoom { display: inline-block; }
  .study-display[data-enlarged] { overflow: auto; overscroll-behavior: contain; height: min(64dvh, 36rem); }
  .study-display[data-enlarged] iframe { width: max(100%, 58rem); height: auto; aspect-ratio: 4 / 3; }
  .playground-studies .playground-lightbox-bar { gap: clamp(.55rem, 3vw, 1rem); }
}

.full-case .project-contents ol {
  max-height: calc(100dvh - 9rem);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.case-cover-caption {
  margin-top: .5rem;
  color: var(--ink-muted);
  font-size: .8125rem;
  line-height: 1.25rem;
}
.case-page-number {
  margin-inline-end: .75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

indie-product-dock {
  display: block;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  max-width: 100%;
}
.indie-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}
.indie-art {
  --indie-art-shadow: drop-shadow(0 16px 15px rgb(76 75 80 / 11%));
  position: relative;
  width: min(175px, 42vw);
  aspect-ratio: 1;
  perspective: 350px;
}
.indie-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  filter: var(--indie-art-shadow);
}
.indie-art img[data-leaving] { z-index: 2; opacity: 0; pointer-events: none; }
.indie-burst { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.indie-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #54d7ef;
  opacity: 0;
}
.indie-burst i:nth-child(3n + 1) { width: 4px; height: 4px; }
.indie-burst i:nth-child(4n + 2) { background: #428cec; }
.indie-burst i:nth-child(4n + 3) { background: #a28cec; }
.indie-burst i:nth-child(4n) { background: #fff; }
.indie-preview figcaption {
  max-width: 100%;
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: .8125rem;
  line-height: 1.25rem;
}
.indie-name {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}
.indie-description:not(:empty) {
  display: block;
  margin: 4px auto 0;
  overflow-x: auto;
  text-align: start;
  white-space: nowrap;
}
a.indie-name {
  text-decoration: underline;
  text-underline-offset: .2em;
}
.indie-tray {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 36px auto 0;
  padding: 10px 14px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: linear-gradient(145deg, rgb(255 255 255 / 62%), rgb(222 226 222 / 42%));
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 24px;
  box-shadow: 0 10px 28px rgb(41 48 41 / 9%), 0 2px 6px rgb(41 48 41 / 5%), inset 0 1px rgb(255 255 255 / 88%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
}
.indie-tray::-webkit-scrollbar { display: none; }
.indie-option {
  position: relative;
  flex: 0 0 70px;
  padding: 4px 4px 12px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.indie-option img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 14%));
}
.indie-option[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
}
.indie-option:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
html[data-theme="dark"] .indie-tray {
  background: linear-gradient(145deg, rgb(69 77 71 / 70%), rgb(43 49 45 / 65%));
  border-color: rgb(211 226 212 / 22%);
  box-shadow: 0 10px 28px rgb(0 0 0 / 24%), 0 2px 6px rgb(0 0 0 / 15%), inset 0 1px rgb(240 249 240 / 13%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .indie-option img { transition: transform .2s ease; }
  .indie-option:hover img { transform: translateY(-5px) scale(1.06); }
}
@media (max-width: 700px) {
  .indie-tray { gap: 3px; margin-top: 24px; padding: 8px 9px 7px; border-radius: 20px; }
  .indie-option { flex-basis: clamp(44px, 12vw, 59px); padding: 3px 3px 10px; }
}

/* 文章型案例的可选章节分组；普通案例继续使用原有标题和间距。 */
.project-group-heading {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.5;
}
.project-group-heading > span:last-child { min-width: 0; }
.project-group-number {
  flex-shrink: 0;
  color: var(--accent-blue);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.project-subheading { font-size: 1rem; font-weight: 500; line-height: 1.6; }
.project-body > .project-group-heading + .project-subheading { margin-top: 1.5rem; }
.project-body > .project-subheading + * { margin-top: .5rem; }
.project-section + .project-group-start { margin-top: 6rem; }
.project-section + .project-group-continuation { margin-top: 4rem; }
:is(.project-group-start, .project-group-continuation) > .project-figure {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
@media (max-width: 639px) {
  .project-group-heading { gap: .5rem; }
  .project-section + .project-group-start { margin-top: 4.5rem; }
  .project-section + .project-group-continuation { margin-top: 3rem; }
}