@layer components{:has(>.design-details-panel){padding-bottom:var(--detail-bottom-clearance,240px)}.design-details-panel{--detail-card-surface:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.design-details-panel{--detail-card-surface:color-mix(in oklch, var(--foreground) 4%, var(--background))}}.design-details-panel{bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;--smooth-shadow-color:var(--tw-shadow-color,black);width:min(480px,100vw - 32px);max-height:max(144px,min(360px,100svh - 128px));box-shadow:0 25px 50px 0 var(--smooth-shadow-color), 0 12px 24px 0 var(--smooth-shadow-color), 0 6px 12px 0 var(--smooth-shadow-color), 0 3px 6px 0 var(--smooth-shadow-color), 0 1.5px 3px 0 var(--smooth-shadow-color), 0 0 0 var(--smooth-ring-width,1px) var(--smooth-ring-color);grid-template-rows:minmax(0,1fr) 2px 48px;gap:8px;padding:16px;display:grid;position:fixed;left:50%}@supports (color:color-mix(in lab, red, red)){.design-details-panel{box-shadow:0 25px 50px 0 color-mix(in srgb, var(--smooth-shadow-color) 5%, transparent), 0 12px 24px 0 color-mix(in srgb, var(--smooth-shadow-color) 4%, transparent), 0 6px 12px 0 color-mix(in srgb, var(--smooth-shadow-color) 3%, transparent), 0 3px 6px 0 color-mix(in srgb, var(--smooth-shadow-color) 2%, transparent), 0 1.5px 3px 0 color-mix(in srgb, var(--smooth-shadow-color) 2%, transparent), 0 0 0 var(--smooth-ring-width,1px) var(--smooth-ring-color)}}.design-details-panel{border-radius:var(--radius-lg);background:var(--detail-card-surface);color:var(--foreground);font-size:var(--type-small);line-height:var(--type-small-leading);transform:translate(-50%)}.design-details-panel .design-details-close{position:absolute;top:8px;right:8px}.design-details-panel .design-details-note{min-height:0;padding-right:40px;overflow-y:auto}.design-details-panel .design-details-track{background:var(--input);border-radius:999px;display:block;position:relative;overflow:hidden}.design-details-panel .design-details-progress{background:var(--foreground);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.design-details-panel .design-details-footer{justify-content:space-between;align-items:center;gap:8px;min-width:0;margin-right:-8px;display:flex}.design-details-panel .design-details-controls{flex-shrink:0;align-items:center;display:flex}.design-details-panel .design-details-caption{min-width:0;color:var(--muted-foreground);font-size:var(--type-small);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.design-details-title{color:var(--foreground);font-weight:var(--weight-emphasis);margin-bottom:.5rem}.design-details-ink{--detail-ink:var(--muted-foreground);--detail-highlight:#fba58138}@supports (color:color-mix(in lab, red, red)){.design-details-ink{--detail-highlight:color-mix(in oklch, var(--color-orange-400) 22%, transparent)}}.design-details-ink{z-index:45;pointer-events:none;width:100%;height:100%;position:fixed;inset:0;overflow:hidden}@media (max-height:30rem){.design-details-panel{max-height:max(128px,min(360px,100svh - 128px));padding-block:8px}}@media (prefers-reduced-motion:no-preference){.design-details-explanation{animation:detail-note-in var(--panel-duration) var(--control-ease)}.design-details-trace{stroke-dasharray:1;animation:detail-draw .4s var(--expo-out) both}}@media (prefers-reduced-motion:no-preference) and (min-width:72rem){.design-details-trace{animation-delay:.24s}}@media (prefers-reduced-motion:reduce){.design-details-close{transition:none}}}@keyframes detail-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes detail-note-in{0%{opacity:0}to{opacity:1}}
@layer components{.footer-note{gap:16px;display:grid}.footer-quote{border-radius:var(--radius-sm);min-height:48px;font-size:var(--type-body);font-weight:var(--weight-body);line-height:var(--type-body-leading);color:var(--foreground);transition:color var(--control-duration) var(--control-ease), var(--focus-transition);justify-self:start;align-items:center;display:flex}.footer-quote>q>span{display:inline-block}.footer-quote[data-reveal]>q>span,.footer-quote[data-reveal]>q:before,.footer-quote[data-reveal]>q:after{animation:quote-word-in .64s var(--expo-out) both;animation-delay:calc(var(--word) * min(56ms, .56s / var(--words)));animation-play-state:paused}.footer-quote[data-reveal]>q:before{animation-delay:0s;display:inline-block}.footer-quote[data-reveal]>q:after{animation-delay:calc((var(--words) - 1) * min(56ms, .56s / var(--words)));display:inline-block}.footer-quote[data-reveal=shown]>q>span,.footer-quote[data-reveal=shown]>q:before,.footer-quote[data-reveal=shown]>q:after{animation-play-state:running}@keyframes quote-word-in{0%{opacity:0;filter:blur(6px);transform:translateY(6px)}}@media (hover:hover) and (pointer:fine){.footer-quote:hover{color:var(--link)}}.footer-quote:focus-visible{outline:var(--focus-width) solid var(--ring);outline-offset:var(--focus-offset)}.footer-note-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;display:flex}@media (prefers-reduced-motion:reduce){.footer-quote{transition:none}}}
@layer components{.hover-list{--focus-row-bleed:16px;--focus-row-radius:var(--radius-md)}.hover-list,.hover-list>ul{position:relative}.hover-list-highlight{top:0;inset-inline:calc(var(--focus-row-bleed) * -1);height:var(--highlight-height,0px);translate:0 var(--highlight-y,0px);border-radius:var(--focus-row-radius);background:color-mix(in oklch, var(--foreground) 4%, transparent);opacity:0;pointer-events:none;transition:opacity var(--micro-duration) var(--control-ease), scale var(--micro-duration) var(--control-ease);position:absolute}.hover-list[data-active] .hover-list-highlight{transition:opacity var(--micro-duration) var(--control-ease), scale var(--micro-duration) var(--control-ease), translate var(--control-duration) var(--control-ease), height var(--control-duration) var(--control-ease)}@media (hover:hover) and (pointer:fine){.hover-list[data-active] .hover-list-highlight{opacity:1}}.hover-list[data-active]:has(:focus-visible) .hover-list-highlight{opacity:1}.hover-list:has(a:active) .hover-list-highlight{scale:.985}@media (prefers-reduced-motion:reduce){.hover-list-highlight,.hover-list[data-active] .hover-list-highlight{transition:opacity .2s var(--control-ease)}.hover-list:has(a:active) .hover-list-highlight{scale:none}}}
.TYW02q_halo{pointer-events:none;opacity:0;transform-origin:50% 65%;position:absolute;inset:0}.TYW02q_haloMark{background:var(--brand-orange);position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@layer components{.work-preview{width:64px;height:48px;color:var(--muted-foreground);pointer-events:none;flex:0 0 64px;justify-content:center;align-items:center;display:flex;position:relative}.preview-glass-lines,.preview-glass-lens-lines{background:repeating-linear-gradient(currentColor 0 1px,#0000 1px 6px);height:24px;position:absolute;inset-inline:8px}.preview-glass-lines{opacity:.3;top:14px}.preview-glass-lens{background:var(--background);width:24px;height:24px;box-shadow:inset 0 0 0 1px color-mix(in oklch, currentColor 32%, transparent), inset 0 1px 1px color-mix(in oklch, var(--foreground) 16%, transparent);border-radius:50%;position:absolute;top:12px;left:20px;overflow:hidden}.preview-glass-lens-lines{top:2px;opacity:.8;transform-origin:50% 10px;inset-inline:-8px;transform:scaleY(1.5)}.work-cat-position{width:32px;height:32px;transition:transform .3s var(--expo-out);display:block;transform:translate(-6px)}.work-cat{width:32px;height:32px;image-rendering:pixelated;background:url(/work/oneko.gif) -96px -96px/256px 128px no-repeat;display:block}.dark .work-cat{filter:invert()}@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){a:hover>.work-preview .work-cat-position{transform:translate(6px)}a:hover>.work-preview .work-cat{animation:.48s step-end cat-two-steps}a:hover>.work-preview .preview-glass-lens{animation-play-state:running}}@media (prefers-reduced-motion:no-preference){a:focus-visible>.work-preview .work-cat-position{transform:translate(6px)}a:focus-visible>.work-preview .work-cat{animation:.48s step-end cat-two-steps}.preview-glass-lens{animation:preview-glass-lens var(--preview-cycle) var(--preview-spring) infinite paused, preview-glass-stretch var(--preview-cycle) var(--expo-out) infinite paused}.work-preview[data-in-view] .preview-glass-lens,a:focus-visible>.work-preview .preview-glass-lens{animation-play-state:running}}@media (prefers-reduced-motion:reduce){.work-cat-position{transition:none}}}@keyframes cat-two-steps{0%,50%{background-position:-96px 0}25%,75%{background-position:-96px -32px}to{background-position:-96px -96px}}@keyframes preview-glass-lens{0%{transform:translate(-8px)}40%{transform:translate(8px)}50%{transform:translate(8px)}90%,to{transform:translate(-8px)}}@keyframes preview-glass-stretch{0%{scale:1}6%{scale:1.16 .92}30%{scale:1}50%{scale:1}56%{scale:1.16 .92}80%,to{scale:1}}
@layer components{.home-main{padding-block:1.5rem 3rem}.home-bio{flex-direction:column;gap:1.5rem;display:flex}.home-section{grid-template-columns:8rem minmax(0,1fr);align-items:baseline;column-gap:1.5rem;display:grid}.home-section-content{min-width:0}.home-section-title{font-size:var(--type-body);font-weight:var(--weight-secondary);color:var(--muted-foreground);margin-bottom:0;padding-block:16px}.home-section-content .home-link{padding-block:0}@media (max-width:30rem){.home-section{grid-template-columns:1fr}.home-section-title{padding-bottom:.5rem}}.home-work-link{border-radius:var(--radius-md);min-height:48px;transition:color var(--control-duration) var(--control-ease), var(--focus-transition);justify-content:space-between;align-items:center;gap:1.5rem;padding-block:16px;display:flex}.work-with-preview{gap:1rem}.work-copy{min-width:0}.home-work-title,.home-work-title .shared-title{color:var(--link);font-weight:var(--weight-title)}@media (hover:hover) and (pointer:fine){.home-work-link:hover{color:var(--link)}}}.home-footer{margin-inline:calc(var(--viewport-padding) * -1);grid-column:1/-1}.home-footer-navigation{width:min(var(--page-column), calc(100% - var(--viewport-padding) * 2));margin-inline:auto;padding-block:24px}