/* One motion vocabulary, carried by real navigation and its selected content. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:380ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation:page-out 160ms ease-out both}
::view-transition-new(root){animation:page-in 280ms ease-out both}
::view-transition-image-pair(focus-title),::view-transition-image-pair(focus-image){isolation:isolate}
::view-transition-old(focus-title),::view-transition-old(focus-image){mix-blend-mode:normal;animation:page-out 200ms ease-out both}
::view-transition-new(focus-title),::view-transition-new(focus-image){mix-blend-mode:normal;animation:page-in 320ms ease-out both}
::view-transition-group(site-header){animation-duration:240ms}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}}
.site-header{view-transition-name:site-header}
.inner-page .brand{gap:12px}
.inner-page .brand .brand-mark{width:23px;height:23px;stroke:var(--section-accent);stroke-width:1}
.section-name{display:flex;align-items:baseline;gap:24px}
.section-en{font:400 12px/1.5 SiteDisplay,var(--font);color:var(--muted)}
.project-media{min-width:0;position:relative}
.project-media-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;font-size:12px;line-height:1.6;color:var(--muted)}
.project-open{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;color:var(--section-accent);transition:background-color 260ms ease,border-color 260ms ease,color 260ms ease}
.project-open svg{width:16px;height:16px;transition:transform 380ms var(--ease)}
.project-media .project-visual{position:relative}
.project-media .project-visual::after{content:'';position:absolute;inset:0;border:1px solid transparent;pointer-events:none;transition:border-color 260ms ease}
.project .project-copy h2,.note-index-row h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;text-decoration-color:transparent}
.inner-page .project-copy h2,.inner-page .note-index-row h2{transition:color 220ms ease,text-decoration-color 300ms ease}
.project:is(:hover,:focus-visible) .project-visual::after{border-color:var(--section-accent)}
.project:is(:hover,:focus-visible) .project-open{background:var(--section-accent);border-color:var(--section-accent);color:#fff}
.project:is(:hover,:focus-visible) .project-open svg{transform:rotate(45deg)}
.inner-page .project:is(:hover,:focus-visible) h2,.inner-page .note-index-row:is(:hover,:focus-visible) h2{color:var(--section-accent);text-decoration-color:currentColor}
.project:active .project-open svg{transform:rotate(45deg) translateX(2px);transition-duration:100ms}
.inner-page .project:focus-visible .case-link svg,.inner-page .note-index-row:focus-visible .note-foot svg{transform:translate(3px,-3px)}
.note-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.note-meta time{color:var(--muted);font:400 11px/1.6 SiteDisplay,var(--font);font-variant-numeric:tabular-nums}
.inner-page .note-index-row{position:relative}
.note-index-row::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--section-accent);transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--ease)}
.note-index-row:is(:hover,:focus-visible)::after{transform:scaleX(1)}
.note-index-row:active h2{opacity:.72;transition-duration:100ms}
.inner-page .note-lead{background:var(--section-surface);background-image:radial-gradient(ellipse at 95% 8%,rgba(101,83,166,.055),transparent 65%)}
.inner-page .page-exits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-block:40px 48px}
.inner-page .page-exits a{--exit-accent:var(--accent);position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px 20px;padding:0 0 20px;border-bottom:1px solid var(--line);font-size:28px}
.inner-page .page-exits a[href="toolbox.html"]{--exit-accent:#167f75}
.inner-page .page-exits a[href="profile.html"]{--exit-accent:#a6533e}
.exit-label{display:flex;align-items:baseline;gap:16px}
.exit-label small{font:400 11px/1.5 SiteDisplay,var(--font);color:var(--muted)}
.exit-description{grid-column:1/-1;font:400 12px/1.8 var(--font);color:var(--muted)}
.inner-page .page-exits a::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--exit-accent);transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--ease)}
.inner-page .page-exits a:is(:hover,:focus-visible){text-decoration:none;color:var(--exit-accent)}
.inner-page .page-exits a:is(:hover,:focus-visible)::after{transform:scaleX(1)}
.inner-page .page-exits a:is(:hover,:focus-visible) svg{transform:translateX(4px)}
@media(max-width:1050px){
 .inner-page .page-exits{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}
@media(max-width:760px){
 .site-header{view-transition-name:none}
 .section-name{gap:20px}
 .inner-page .brand .brand-mark{width:20px;height:20px}
 .project-media-caption{padding-top:8px}
 .inner-page .page-exits{grid-template-columns:1fr;padding-block:24px 32px}
 .inner-page .page-exits a{font-size:24px;gap:12px}
 .exit-label{flex-direction:column;gap:4px}
 .exit-description{font-size:11px}
}
@media(hover:none){
 .project .project-open svg,.project:active .project-open svg{transform:none}
}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .project-open svg,.project:is(:hover,:focus-visible,:active) .project-open svg,.inner-page .project:focus-visible .case-link svg,.inner-page .note-index-row:focus-visible .note-foot svg,.inner-page .page-exits a:is(:hover,:focus-visible) svg{transform:none}
 .note-index-row::after,.inner-page .page-exits a::after{transition:none}
}