.route-flow__section{scroll-margin-top:80px;position:relative}.route-flow__section:first-child{min-height:max(360px,76svh - 92px);padding-bottom:calc(var(--grid-size) * 3)}@property --route-preview-fade{syntax:"<number>";inherits:false;initial-value:0}.route-flow__section:not(:first-child){-webkit-mask-image:linear-gradient(to bottom, #000, rgb(0 0 0/calc(1 - var(--route-preview-fade) * .8)) 200px, rgb(0 0 0/calc(1 - var(--route-preview-fade))) 420px);mask-image:linear-gradient(to bottom, #000, rgb(0 0 0/calc(1 - var(--route-preview-fade) * .8)) 200px, rgb(0 0 0/calc(1 - var(--route-preview-fade))) 420px);transition:--route-preview-fade .3s ease-out}.route-flow__section[data-preview=true]:not(:focus-within){--route-preview-fade:1}.nav:not([data-home]) .nav__name-slot{visibility:hidden}@media (max-width:480px){.route-flow__section:first-child{min-height:max(340px,74svh - 80px)}}.root:has(.route-flow)>.nav-shell{z-index:10;position:sticky;top:0}.route-flow__section+.route-flow__section+.route-flow__section{margin-top:clamp(144px,24svh,264px)}.route-flow__section:last-child{min-height:calc(100svh - 144px)}
:root{--animation-font-size:32px;--pinyin-gap:1ch}.name-evolution__item--root{font-size:var(--animation-font-size);flex-direction:column;align-items:flex-end;margin:0 auto;padding-right:12px;display:flex;position:relative}.select-none{-webkit-user-select:none;user-select:none}.origin-name{width:calc(var(--seal-column-width) + 3ch);height:38px;font-size:var(--name-label-font-size);white-space:nowrap;cursor:pointer;color:#000;font-weight:300;line-height:38px;position:absolute;top:0;left:0}.origin-name__part{transition:opacity var(--chars-animation-duration) ease, transform var(--chars-animation-duration) ease, color var(--chars-animation-duration) ease;position:absolute;top:0}.origin-name__given{display:flex;left:0}.origin-name__given>span{text-align:center;width:1ch}.origin-name__c,.origin-name__z{left:calc(3ch + var(--pinyin-gap))}.origin-name__hi{left:calc(4ch + var(--pinyin-gap))}.origin-name--split .origin-name__c,.origin-name--split .origin-name__z,.origin-name--split .origin-name__hi{transform:translateX(calc(var(--seal-column-width) - 3ch - var(--pinyin-gap)))}.origin-name--unified .origin-name__z,.origin-name--split .origin-name__c{opacity:0}.origin-name--chi-highlight .origin-name__c,.origin-name--chi-highlight .origin-name__hi{color:var(--hover-text-color)}.name-evolution__item--root .huozhi-chars .pinyin{display:none}.name-transition{transition:all var(--chars-animation-duration) ease}
@property --seal-merge-shift{syntax:"<length>";inherits:true;initial-value:0}:root{--chars-animation-duration:.4s;--hover-text-color:#f98f78;--name-label-font-size:20px;--seal-color:#c8102e;--seal-glyph-size:48px;--seal-column-width:74px;--seal-glyph-gap:32px;--seal-merge-shift:0px;--seal-merge-drop:2px}.huozhi-chars{-webkit-touch-callout:none;-webkit-user-select:none;touch-action:manipulation;position:absolute;right:0}.huozhi-chars .character{text-align:center;flex-direction:column;align-items:center;padding:8px;display:inline-flex;position:relative}.huozhi-chars>.character{width:var(--seal-column-width);color:#000;transition:color var(--chars-animation-duration) ease}.huozhi-chars .pinyin{transition:opacity var(--chars-animation-duration) ease;font-size:var(--name-label-font-size);margin:32px 0 8px;font-weight:300;line-height:38px;position:relative;left:-4px}.huozhi-glyph{flex:0 0 var(--seal-glyph-size);width:var(--seal-glyph-size);height:var(--seal-glyph-size);transition:transform var(--chars-animation-duration) ease;display:block;position:relative}.huozhi-glyph>.huozhi-svg{width:var(--seal-glyph-size);height:var(--seal-glyph-size);margin:0;display:block}.huozhi-chars--split .pinyin{opacity:1}.huozhi-chars--split .character:hover{color:var(--hover-text-color)}.huozhi-chars--unified .pinyin{opacity:0}.huozhi-chars--unified .character:first-child .huozhi-glyph{transform:translate(var(--seal-merge-shift), var(--seal-merge-drop))}.huozhi-chars--unified .character:nth-child(2) .huozhi-glyph{transform:translate(calc(var(--seal-glyph-gap) - var(--seal-column-width) + var(--seal-merge-shift)), var(--seal-merge-drop))}.huozhi-chars--unified,.huozhi-chars--unified .character{color:var(--seal-color)}.huozhi-chars--initial-seal.huozhi-chars--unified{transform-origin:calc(var(--seal-column-width) / 2 + var(--seal-glyph-gap) / 2 + var(--seal-merge-shift)) calc(100% - var(--seal-glyph-size) * .75);animation:.2s 80ms both seal-stamp}.huozhi-chars .seal-frame{bottom:calc(var(--seal-glyph-size) / -6);width:calc(var(--seal-glyph-size) * 80 / 48);height:calc(var(--seal-glyph-size) * 88 / 48);transform:translateX(calc(-50% + var(--seal-glyph-gap) / 2 + var(--seal-merge-shift)));pointer-events:none;position:absolute;left:50%}@keyframes seal-stamp{0%{visibility:hidden;animation-timing-function:cubic-bezier(.55,0,1,.45);transform:translateY(-8px)scale(1.12)}1%{visibility:visible;animation-timing-function:cubic-bezier(.55,0,1,.45);transform:translateY(-8px)scale(1.12)}55%{animation-timing-function:ease-out;transform:translateY(1px)scale(1.02,.96)}78%{animation-timing-function:ease-in-out;transform:translateY(-.5px)scale(.995,1.01)}to{visibility:visible;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.huozhi-chars--initial-seal.huozhi-chars--unified{animation-delay:0s}}
.page-top{height:calc(58px + var(--grid-size));flex-shrink:0}.page-top__stamp{--seal-glyph-size:36px;--seal-column-width:56px;--seal-glyph-gap:24px;--seal-merge-shift:calc(3ch + var(--pinyin-gap) - var(--seal-glyph-gap) / 2);--about-column-inset:calc((var(--seal-column-width) - 3ch) / 2);width:calc(var(--seal-column-width) * 2 - var(--about-column-inset));height:58px;font:500 .85rem var(--font-mono);line-height:normal}.nav[data-home] .page-link__anchor[aria-current=page]{color:#0000}.nav__name-slot .origin-name:hover{color:var(--theme-color)}.nav[data-home]:has(.nav__name-slot:empty) .page-link__anchor[aria-current=page]{color:var(--nav-active-color)}
.about .section>p:first-child{margin-top:0}.about p,.philosophy-list li,.page-top__stamp{cursor:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 8 8,auto}.ink-text{--ink-x:-999px;--ink-y:50%;--ink-color:#f98f78;--ink-base-color:#222;--ink-core-size:.75em;--ink-fade-size:1.15em;background-image:radial-gradient(circle at var(--ink-x) var(--ink-y), var(--ink-color) 0, var(--ink-color) var(--ink-core-size), var(--ink-base-color) var(--ink-fade-size));color:#0000;-webkit-text-fill-color:transparent;background-position:0 0;background-size:100% 100%;-webkit-background-clip:text;background-clip:text}.philosophy-list .ink-text{display:inline-block}.philosophy-list{margin:calc(var(--grid-size) / 2) 0 0;padding:0;list-style:none}.philosophy-list.raindrop-list li{margin-left:0}.philosophy-list.raindrop-list li:before{left:0}.raindrop-list li{padding-left:calc(var(--grid-size) * .8);margin:0;margin-left:calc(var(--grid-size) * -.8);position:relative}.raindrop-list li:before{content:"";left:calc(var(--grid-size) * .15);border:1px solid;border-radius:50% 50% 50% 0;width:.42em;height:.42em;position:absolute;top:.72em;transform:translateY(-50%)rotate(-45deg);box-shadow:inset 0 0 0 2px #fff}.raindrop-list li:hover:before{box-shadow:none;background-color:currentColor;animation:.22s ease-out both about-raindrop}@keyframes about-raindrop{0%{background-color:#0000;transform:translateY(-50%)rotate(-45deg)scale(1);box-shadow:inset 0 0 0 2px #fff}55%{box-shadow:none;background-color:currentColor;transform:translateY(calc(.2em - 50%))rotate(-45deg)scale(.92)}to{box-shadow:none;background-color:currentColor;transform:translateY(-50%)rotate(-45deg)scale(1)}}
.project-link-container{margin-bottom:var(--grid-size);filter:grayscale();transition:filter .3s;display:block}.project-link-container--animating{filter:grayscale(0%)}.project-link-container:has(.vaso-demo){filter:none;z-index:10;position:relative}.expandable-project-content:has(.vaso-demo){will-change:auto;overflow:visible}.project-link-text{display:block}.project-link-text .section__item,.project-link-text .section__item small{transition:none}.project-link-text:hover .section__item{transition:all .15s ease-out}.project-link-text:hover .section__item small{transition:transform .2s}.project-link-text:active{filter:grayscale(0%);transition:filter .3s}.project-link-text:active .section__item{transition:all .15s ease-out}.project-link-text:active .section__item small{transition:transform .2s}.expandable-project-link .section__item:active{-webkit-user-select:none;user-select:none}.expandable-project-content{--project-demo-width:460px;opacity:1;will-change:max-height, opacity;max-height:1000px;transition:max-height .3s cubic-bezier(.33,1,.68,1),opacity .15s .15s;position:relative;overflow:hidden}.project-link-container .expandable-project-content>.project-demo-center{pointer-events:none;width:1px;height:1px;position:absolute;top:50%;left:50%}.expandable-project-content-collapsing{opacity:0;will-change:max-height, opacity;max-height:0;transition:max-height .3s cubic-bezier(.33,1,.68,1),opacity .15s .15s}.code-block,.shell-block{font-family:var(--font-mono);-webkit-user-select:none;user-select:none;margin-left:calc(var(--grid-size) / 3);min-width:0;width:min(100%, var(--project-demo-width));max-width:var(--project-demo-width);box-sizing:border-box;margin-right:auto;line-height:1.6;position:relative;overflow:auto hidden}.code-block{background-color:var(--code-background);margin-top:4px;padding:8px 32px}@media (max-width:768px){.code-block{padding:8px 16px}.shell-block{padding:12px}}.code-block:active,.code-block-animating{-webkit-user-select:none;user-select:none}.code-block-colored{opacity:.75;filter:grayscale()}.code-block-colored.code-block-hovered{opacity:1;filter:grayscale(0%);transition:opacity .3s,filter .7s}.code-line{font-family:var(--font-mono);will-change:transform, opacity;white-space:pre;min-height:1.6em;font-size:.7rem;position:relative}.code-line-encoded{color:#8996a3;width:100%;display:block;position:absolute;top:0;left:0}.code-line-hidden{opacity:0;visibility:hidden}.code-line-visible{opacity:1;visibility:visible;animation:.2s ease-out slideUpLine}.code-line-gray{color:#8996a3;transition:opacity .6s ease-out;display:block}.code-line-gray-hidden{opacity:0;pointer-events:none}.code-line-colored{opacity:0;width:100%;transition:opacity .4s;display:block;position:absolute;top:0;left:0}.code-line-colored-visible{opacity:1}.code-text-gray{color:#8996a3;transition:color .4s}.code-block-colored .code-text-gray{color:var(--sh-identifier)}.code-cursor{color:var(--sh-keyword);margin-left:2px;animation:1s infinite blink;display:inline-block}@keyframes slideUpLine{0%{transform:translateY(8px)}to{transform:translateY(0)}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes fadeInColor{0%{opacity:.2;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.codice-live-demo{margin-top:8px;margin-left:calc(var(--grid-size) / 3);width:min(100%, var(--project-demo-width));max-width:var(--project-demo-width);background-color:var(--code-background);box-shadow:none;-webkit-user-select:none;user-select:none;border-radius:4px;flex-direction:row;align-items:stretch;gap:0;margin-right:auto;padding:4px 10px;display:flex;position:relative;overflow:hidden}.codice-code-block{font-family:var(--font-mono);color:#111827;box-shadow:none;background:0 0;border-right:1px solid #a9b5c54d;flex-direction:column;flex:1.2;padding:4px 4px 8px;font-size:.6rem;line-height:1.5;transition:transform .26s cubic-bezier(.16,1,.3,1),box-shadow .26s cubic-bezier(.16,1,.3,1),border-color .2s,background-color .2s;display:flex;position:relative;transform:translateY(0)}.codice-code-line{white-space:pre;font-family:var(--font-mono);align-items:baseline;display:flex}.codice-code-header{color:#6b7280;justify-content:flex-start;align-items:center;margin-bottom:4px;font-size:.65rem;display:flex}.codice-code-filename{color:#9ca3af}.codice-code-body{margin-top:2px}.codice-code-lineno{text-align:right;color:#6b7280;-webkit-user-select:none;user-select:none;width:2ch;margin-left:-6px;margin-right:6px}.codice-code-text{color:#111827}.codice-code-text [class*=--keyword]{color:#7f8288!important;font-weight:700!important}.codice-code-text [class*=sh__]:not([class*=--keyword]){color:#111827!important}.codice-code-block:hover{box-shadow:none;transform:translateY(0)}.codice-preview{box-shadow:none;background:0 0;border:none;border-radius:0;flex-direction:column;flex:1;padding:4px 4px 8px;display:flex}.codice-preview-header{font-family:var(--font-mono);color:#9ca3af;margin-bottom:4px;font-size:.65rem}.codice-preview-body{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.codice-preview-svg{transform-origin:50%;width:100%;max-width:120px;height:auto;transition:transform .22s cubic-bezier(.16,1,.3,1);display:block}.codice-live-demo--hovered .codice-preview-svg{transform:translateY(-2px)scale(1.03)}.codice-dot{filter:grayscale();transition:filter .3s}.codice-live-demo--hovered .codice-dot-1{filter:grayscale(0%);animation:1.2s ease-in-out infinite codice-bounce-1}.codice-live-demo--hovered .codice-dot-2{filter:grayscale(0%);animation:1.4s ease-in-out infinite codice-bounce-2}.codice-live-demo--hovered .codice-dot-3{filter:grayscale(0%);animation:1.1s ease-in-out infinite codice-bounce-3}.codice-live-demo--hovered .codice-dot-4{filter:grayscale(0%);animation:1.3s ease-in-out infinite codice-bounce-4}.codice-live-demo--hovered .codice-dot-5{filter:grayscale(0%);animation:1.5s ease-in-out infinite codice-bounce-5}.codice-code-bars{align-items:center;gap:2px;margin-right:8px;display:flex}.codice-code-bar{background:#d1d5db;border-radius:999px;width:6px;height:6px}@keyframes codice-bounce-1{0%,to{transform:translateY(0)}50%{transform:translateY(-25px)}}@keyframes codice-bounce-2{0%,to{transform:translateY(0)}50%{transform:translateY(-40px)}}@keyframes codice-bounce-3{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes codice-bounce-4{0%,to{transform:translateY(0)}50%{transform:translateY(-35px)}}@keyframes codice-bounce-5{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@media (max-width:768px){.codice-live-demo{margin-left:0}}.shell-block{cursor:inherit;color:#1e1e1e;background-color:#fff;border:1px solid #e5e7eb;border-radius:6px;margin-top:12px;padding:12px;font-size:.7rem}.shell-comment{color:#8996a3}.shell-block:active{-webkit-user-select:none;user-select:none}.shell-content{white-space:pre}.shell-line{white-space:pre;min-height:1.6em}.shell-prompt{color:#0060aa99;width:15ch;font-weight:700;display:inline-block}.shell-line-indent{width:15ch;font-weight:700;display:inline-block}.shell-ready .shell-line{color:#1e1e1e}.respinner-live-demo{margin-top:10px;margin-left:calc(var(--grid-size) / 3);width:min(100%, var(--project-demo-width));max-width:var(--project-demo-width);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;min-height:80px;margin-right:auto;padding:16px;display:flex}.respinner-live-demo:not(.respinner-live-demo--hovered){opacity:.4}.respinner-spinners{filter:grayscale();justify-content:center;align-items:center;gap:32px;transition:filter .3s;display:flex;transform:translate(-8px)}.respinner-live-demo--hovered .respinner-spinners{filter:grayscale(0%)}.respinner-spinner{flex-shrink:0;justify-content:center;align-items:center;display:flex}.respinner-spinner svg{width:100%;height:100%;display:block}.respinner-spinner svg,.respinner-spinner svg *{animation-play-state:paused}.respinner-live-demo--hovered .respinner-spinner svg,.respinner-live-demo--hovered .respinner-spinner svg *{animation-play-state:running}@keyframes respinner-dot-bounce{0%,80%,to{opacity:.5;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}@keyframes respinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes respinner-wave{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@media (max-width:768px){.respinner-live-demo{margin-left:0}.respinner-spinners{gap:24px}}
body.vaso-dragging,body.vaso-dragging *{-webkit-user-select:none;user-select:none}.vaso-demo{width:min(100%, var(--project-demo-width,460px));max-width:var(--project-demo-width,460px);height:112px;margin:0;margin-left:calc(var(--grid-size) / 3);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin-right:auto;display:flex;position:relative}.vaso-demo__base{text-align:center;background:#fff2a6;border-radius:12px;width:40px;height:16px;font-size:12px;line-height:16px;transition:all .5s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vaso-demo--active .vaso-demo__base{background:#fff4b5}.vaso-demo__glass{cursor:grab;touch-action:none;background:0 0;border-radius:50%;width:84px;height:84px;transition:all .6s cubic-bezier(.33,1,.68,1);position:absolute;top:50%;left:calc(50% - 42px);overflow:hidden;transform:translateY(-50%);box-shadow:0 5px 15px #4d473729}.vaso-demo__glass>*{width:100%;height:100%;display:block}.vaso-demo--active .vaso-demo__glass{transform:translate(16px,-50%)}.vaso-demo__glass--floating{top:var(--vaso-glass-y);left:var(--vaso-glass-x);z-index:10000;transition:transform .16s cubic-bezier(.2,.7,.3,1);position:fixed;transform:none}.vaso-demo__glass:active{cursor:grabbing}.vaso-demo__glass--floating[data-drop-zone]{transform:scale(.5)}.vaso-demo__glass--floating[data-dismissing]{pointer-events:none;animation:.18s ease-out forwards vaso-glass-dismiss}@keyframes vaso-glass-dismiss{0%{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(0)}}
.devjar-preview-head{color:#555;width:80px;max-width:100%;height:auto;margin:0;display:block}.devjar-pixels:not(.devjar-pixels--0){opacity:0;transition:opacity .1s step-end}.codice-live-demo--hovered .devjar-pixels{opacity:1}.codice-live-demo--hovered .devjar-pixels--2{transition-delay:80ms}.codice-live-demo--hovered .devjar-pixels--3{transition-delay:.16s}.codice-live-demo--hovered .devjar-pixels--4{transition-delay:.24s}
.langsagne-live-demo{--langsagne-row-height:1.12rem;margin-top:8px;margin-left:calc(var(--grid-size) / 3);width:min(100%, var(--project-demo-width,460px));max-width:var(--project-demo-width,460px);background:var(--code-background);font-family:var(--font-mono);-webkit-user-select:none;user-select:none;border-radius:4px;grid-template-columns:1fr 1fr;gap:2px;margin-right:auto;padding:8px;display:grid}.langsagne-pane{min-width:0}.langsagne-pane--right{border-left:1px solid #9ca3af59;padding-left:4px}.langsagne-pane-title{color:#9ca3af;margin-bottom:4px;font-size:.62rem}.langsagne-pane-body{will-change:transform;flex-direction:column;gap:0;transition:transform .22s cubic-bezier(.16,1,.3,1);display:flex}.langsagne-pane-viewport{height:calc(var(--langsagne-row-height) * 5);position:relative;overflow:hidden}.langsagne-line{white-space:pre;height:var(--langsagne-row-height);color:#6b7280;opacity:.66;align-items:baseline;gap:6px;font-size:.68rem;line-height:1.05;transition:opacity .15s,color .15s;display:flex;transform:translateY(0)}.langsagne-line--active{color:#111827;opacity:1}.langsagne-line-no{text-align:right;color:#9ca3af;width:2ch}.langsagne-line-text{min-width:0}.langsagne-line-text [class*=--keyword]{color:#7f8288!important;font-weight:inherit!important}.langsagne-line-text [class*=sh__]:not([class*=--keyword]){color:currentColor!important}@media (max-width:768px){.langsagne-live-demo{margin-left:0}}
.hover-list{position:relative}.hover-list__highlight{--hover-list-height:0px;--hover-list-y:0px;top:0;right:calc(var(--radius-width) / -2);left:calc(var(--radius-width) / -2);height:var(--hover-list-height);border-radius:calc(var(--radius-width) / 2);opacity:0;pointer-events:none;transform:translate3d(0, var(--hover-list-y), 0);will-change:transform;background-color:#0000000d;transition:opacity 60ms ease-out,transform 45ms cubic-bezier(.22,1,.36,1);position:absolute}.hover-list__highlight--visible{opacity:1}.hover-list li{z-index:1;position:relative}
