.frame{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h);padding:0 var(--gutter);font-size:var(--portfolio-text-size);line-height:1.4;color:var(--ink);view-transition-name:frame}.frame:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--paper) 10%,color-mix(in srgb,var(--paper) 92%,transparent) 68%,transparent)}.frame-main,.frame-side{display:flex;gap:5px;align-items:baseline}.frame-side{gap:18px}.frame a:hover,.frame button:hover{text-decoration:line-through}.frame-name{white-space:nowrap}.info-panel{position:fixed;inset:var(--header-h) 0 0;width:100%;height:calc(100dvh - var(--header-h));max-width:none;max-height:none;margin:0;padding:0 var(--gutter);border:0;overflow-y:auto;background:rgba(255,255,255,.93);color:var(--ink);opacity:0;-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);transition:opacity .22s ease,display .42s allow-discrete,overlay .42s allow-discrete,-webkit-clip-path .42s var(--ease-out);transition:opacity .22s ease,clip-path .42s var(--ease-out),display .42s allow-discrete,overlay .42s allow-discrete;transition:opacity .22s ease,clip-path .42s var(--ease-out),display .42s allow-discrete,overlay .42s allow-discrete,-webkit-clip-path .42s var(--ease-out)}.info-panel:popover-open{opacity:1;-webkit-clip-path:inset(0);clip-path:inset(0)}@starting-style{.info-panel:popover-open{opacity:0;-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0)}}.info-panel::-webkit-backdrop{background:transparent;pointer-events:none}.info-panel::backdrop{background:transparent;pointer-events:none}.info-content{width:min(475px,100%);padding:44px 0 70px;font-size:var(--portfolio-text-size);line-height:1.45}.info-content p+p{margin-top:22px}.info-links,.info-pages{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:28px}.info-close{position:absolute;top:20px;right:var(--gutter);font-size:var(--portfolio-text-size);line-height:1.45}.info-close:hover{text-decoration:line-through}html:has(.info-panel:popover-open) .frame:before{background:var(--paper)}.frame button[aria-expanded=true],.info-content a:hover,.info-content button:hover{text-decoration:line-through}@media (prefers-reduced-motion:reduce){.info-panel{transition:none}}@media (max-width:599px){.frame{font-size:14px;gap:8px}.frame-main{gap:4px}.frame-side{gap:10px}.frame-side a:first-child:not(:last-child){display:none}.info-content{padding-top:58px}}@media (max-width:370px){.frame{font-size:12px}}