.observation{background:var(--color-bg);touch-action:pan-y;grid-template-columns:repeat(2,minmax(0,1fr));min-height:100svh;display:grid;overflow-x:clip}.observation__painting-panel,.observation__photo-panel{min-width:0;height:100svh;position:relative;overflow:hidden}.observation__painting-panel{background:var(--color-bg);transition:background-color .4s}.observation__photo-panel{clip-path:inset(100% 0 0)}.observation__photo-panel--ready{animation:.85s cubic-bezier(.22,1,.36,1) both observation-photo-reveal}.observation__painting-panel--color{background:var(--observation-color)}.observation__painting-wrap{z-index:1;aspect-ratio:1;width:67.5%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.observation__painting{clip-path:inset(0 0 100%);width:100%;height:100%;display:block}.observation__info{z-index:2;width:1.5rem;height:1.5rem;color:var(--color-ink);cursor:pointer;opacity:0;background:0 0;border:1px solid;border-radius:50%;place-items:center;margin:0;padding:0;transition:border-color .3s;animation:.56s cubic-bezier(.22,1,.36,1) .42s both observation-detail-from-top;display:grid;position:absolute;top:1.25rem;left:1.25rem}.observation__info svg{width:100%;height:100%;display:block}.observation__swoosh-trace,.observation__swoosh-draw{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.observation__swoosh-trace{transition:opacity .3s}.observation__swoosh-draw{stroke-dasharray:1;stroke-dashoffset:-1px;transition:stroke-dashoffset .9s cubic-bezier(.45,0,.2,1)}@media (hover:hover) and (pointer:fine){.observation__info:hover .observation__swoosh-trace{opacity:.14}.observation__info:hover .observation__swoosh-draw{stroke-dashoffset:0}.observation__info:hover{border-color:#0000}}.observation__info:focus-visible .observation__swoosh-trace{opacity:.14}.observation__info:focus-visible .observation__swoosh-draw{stroke-dashoffset:0}.observation__info:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px;border-color:#0000}.observation__painting--ready{animation:.8s cubic-bezier(.22,1,.36,1) 60ms both observation-painting-reveal}.observation__painting--ready img{transform-origin:50%;animation:.9s cubic-bezier(.22,1,.36,1) 60ms both observation-painting-drift}.observation__painting img,.observation__photo-panel img{object-fit:cover;width:100%;height:100%;display:block}.observation__meta{z-index:2;letter-spacing:-.02em;grid-template-columns:1fr 1.5rem 1fr;align-items:center;gap:1rem;font-size:.8125rem;line-height:1;display:grid;position:absolute;top:87.15%;left:16.25%;right:16.25%}.observation__meta h1,.observation__meta time{font:inherit;color:var(--color-ink);white-space:nowrap;margin:0;transition:color .4s}.observation__painting-panel--color .observation__meta h1,.observation__painting-panel--color .observation__meta time{color:var(--observation-on-color)}.observation__meta h1{font-weight:400;animation:.56s cubic-bezier(.22,1,.36,1) .42s backwards observation-detail-from-top}.observation__meta time{justify-self:end;animation:.56s cubic-bezier(.22,1,.36,1) .54s backwards observation-detail-from-top}.observation__color{--dot-split-ease:cubic-bezier(.22, 1, .36, 1);--dot-split-duration:.36s;background:var(--observation-color);width:1.5rem;height:1.5rem;color:var(--color-ink);cursor:pointer;transition:background-color var(--dot-split-duration) var(--dot-split-ease);border:0;border-radius:50%;margin:0;padding:0;animation:.56s cubic-bezier(.22,1,.36,1) .48s both observation-detail-from-top;display:block;position:relative;overflow:visible}.observation__color:before,.observation__color:after{content:"";background:var(--observation-color);pointer-events:none;transition:transform var(--dot-split-duration) var(--dot-split-ease), background-color var(--dot-split-duration) var(--dot-split-ease);border-radius:50%;position:absolute;inset:0}.observation__color:hover,.observation__color:focus-visible{background:0 0}.observation__color:hover:before,.observation__color:focus-visible:before{background:#fff;transform:translate(-28%)scale(.42)}.observation__color:hover:after,.observation__color:focus-visible:after{background:#fff;transform:translate(28%)scale(.42)}.observation__color:focus-visible{outline-offset:3px;outline:2px solid}.observation__photo-panel img{position:absolute;inset:0}.observation__photo-panel--ready img{transform-origin:50%;animation:.95s cubic-bezier(.22,1,.36,1) both observation-photo-drift}.observation__timeline{z-index:7;opacity:0;width:min(42rem,50vw - 3rem);transition:opacity .22s,transform .22s;position:fixed;top:calc(87.15svh + 2.75rem);left:25%;transform:translate(-50%,.5rem)}.observation__timeline--open{opacity:1;transform:translate(-50%)}.observation__timeline[hidden]{display:none}.observation__timeline-inner{backdrop-filter:blur(.75rem);background:#ffffffeb;border-radius:999px;height:3.5rem;display:flex;overflow:hidden;box-shadow:0 .25rem 1.25rem #1818171a}.observation__timeline-home{flex:0 0 3.5rem;place-items:center;display:grid;position:relative}.observation__timeline-home:after{content:"";background:#1818171f;width:1px;height:1rem;position:absolute;top:50%;right:0;transform:translateY(-50%)}.observation__timeline-home svg{width:1rem;height:1rem;display:block}.observation__timeline-home-dot{fill:currentColor;transition:fill .18s}@media (hover:hover) and (pointer:fine){.observation__timeline-home:hover .observation__timeline-home-dot{fill:var(--home-dot-color)}}.observation__timeline-home:focus-visible .observation__timeline-home-dot{fill:var(--home-dot-color)}.observation__timeline-days{scrollbar-width:none;flex:1;gap:.125rem;margin:0;padding:0 .5rem;scroll-padding-inline:50%;list-style:none;display:flex;overflow-x:auto}.observation__timeline-days::-webkit-scrollbar{display:none}.observation__timeline-days li{flex:none;display:flex}.observation__timeline-day{place-items:center;width:2rem;height:3.5rem;display:grid}.observation__timeline-dot{width:1.25rem;height:1.25rem;color:var(--color-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;place-items:center;font-size:.75rem;line-height:1;transition:color .16s;display:grid;position:relative}.observation__timeline-dot:before{content:"";background:var(--timeline-color);opacity:0;border-radius:50%;width:.875rem;height:.875rem;transition:opacity .16s,transform .16s,background-color .16s;position:absolute;transform:scale(.85)}.observation__timeline-day--subscribe .observation__timeline-dot:before{opacity:1;border:1px solid var(--color-ink);background:0 0;transform:scale(1)}.observation__timeline-day[aria-current=page] .observation__timeline-dot,.observation__timeline-day:focus-visible .observation__timeline-dot{color:#0000}.observation__timeline-day[aria-current=page] .observation__timeline-dot:before,.observation__timeline-day:focus-visible .observation__timeline-dot:before{opacity:1;transform:scale(1.12)}.observation__timeline-day--subscribe:focus-visible .observation__timeline-dot:before{background:var(--color-ink);transform:scale(1)}@media (hover:hover) and (pointer:fine){.observation__timeline-day:hover .observation__timeline-dot{color:#0000}.observation__timeline-day:hover .observation__timeline-dot:before{opacity:1;transform:scale(1)}.observation__timeline-day[aria-current=page]:hover .observation__timeline-dot:before{transform:scale(1.12)}.observation__timeline-day--subscribe:hover .observation__timeline-dot:before{background:var(--color-ink);transform:scale(1)}}.observation__timeline-home:focus-visible,.observation__timeline-day:focus-visible{outline:2px solid var(--color-ink);outline-offset:-4px}.observation__navigation{z-index:5;pointer-events:none;position:fixed;inset:50% 0 auto}.observation__arrow{width:5.75rem;height:5.75rem;color:var(--color-ink);pointer-events:auto;backdrop-filter:blur(2px);background:#ffffff03;border:0;border-radius:50%;padding:0;transition:opacity .18s,transform .18s;display:block;position:absolute;transform:translateY(-50%)}.observation__arrow--on-photo{color:#fff}.observation__arrow--previous{left:1.25rem}.observation__arrow--next{right:1.25rem}.observation__arrow svg{width:5.75rem;height:5.75rem;display:block}.observation__arrow--previous svg{transform:rotate(180deg)}.observation__arrow:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}@media (width>=721px) and (hover:hover){.observation__arrow{opacity:0;pointer-events:none;transform:translateY(-50%)scale(.85)}.observation:has(.observation__painting-panel:hover) .observation__arrow--previous,.observation:has(.observation__photo-panel:hover) .observation__arrow--next,.observation__arrow:hover,.observation__arrow:focus-visible{opacity:1;pointer-events:auto;transform:translateY(-50%)scale(1)}.observation__arrow:hover{transform:translateY(-50%)scale(1.06)}}.observation__hint{z-index:6;color:#fff;letter-spacing:-.01em;opacity:0;backdrop-filter:blur(.5rem);background:#1818178f;border-radius:999px;margin:0;padding:.75rem 1.125rem;font-size:.75rem;line-height:1;transition:opacity .3s,transform .3s;position:fixed;top:50%;left:50%;transform:translate(-50%,calc(.375rem - 50%))}.observation__hint--visible{opacity:1;transform:translate(-50%,-50%)}.observation__hint[hidden]{display:none}.observation__hint kbd{font:inherit}.observation__overlay{display:none}.observation__overlay--open,html.observation-overlay-pending .observation__overlay{--overlay-pad-y:4rem;--overlay-pad-x:2.5rem;z-index:20;background:var(--color-bg);display:block;position:fixed;inset:0;overflow-y:auto}.observation__overlay--open{animation:.45s cubic-bezier(.22,1,.36,1) both observation-overlay-in}.observation__overlay--instant,html.observation-overlay-pending .observation__overlay{animation:none}.observation__overlay-content{min-height:100%;padding:clamp(7rem, 15vh, 10rem) max(var(--overlay-pad-x), calc((100vw - 52rem) / 2)) var(--overlay-pad-y)}.observation__overlay-text{max-width:36rem;margin:0 auto;animation:.7s cubic-bezier(.22,1,.36,1) .1s both observation-overlay-content-in}.observation__overlay-emotion{font-family:var(--font-serif);letter-spacing:-.02em;margin:0 0 1.5rem;font-size:clamp(1.375rem,2vw,1.75rem);font-style:italic;font-weight:400;line-height:1.15}.observation__overlay-dialogue{letter-spacing:-.02em;margin:0;font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.6}.observation__overlay-close{z-index:1;top:var(--overlay-pad-y);right:var(--overlay-pad-x);font:inherit;color:var(--color-ink);cursor:pointer;background:0 0;border:0;margin:0;padding:.625rem 1rem;font-size:.875rem;line-height:1;display:block;position:fixed}.observation__overlay-close:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}html.observation-overlay-pending,html.observation-overlay-pending body,body.observation-overlay-open{overflow:hidden}html.observation-overlay-pending body{visibility:hidden}html.observation-overlay-pending .observation__overlay{visibility:visible}@keyframes observation-photo-reveal{0%{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}@keyframes observation-photo-drift{0%{transform:translateY(3%)scale(1.06)}to{transform:translateY(0)scale(1)}}@keyframes observation-painting-reveal{0%{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}}@keyframes observation-painting-drift{0%{transform:translateY(-3%)scale(1.06)}to{transform:translateY(0)scale(1)}}@keyframes observation-detail-from-top{0%{opacity:0;transform:translateY(-1.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes observation-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes observation-overlay-content-in{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}@keyframes observation-overlay-close-blink{0%,to{opacity:1}45%{opacity:.14}}@media (hover:hover) and (pointer:fine){.observation__overlay-close:hover{animation:.7s cubic-bezier(.45,0,.2,1) observation-overlay-close-blink}}@media (prefers-reduced-motion:reduce){.observation__painting-panel,.observation__photo-panel,.observation__photo-panel img,.observation__painting,.observation__painting img,.observation__meta h1,.observation__meta time,.observation__color,.observation__color:before,.observation__color:after,.observation__info,.observation__overlay--open,html.observation-overlay-pending .observation__overlay,.observation__overlay-text{animation:none}.observation__painting,.observation__photo-panel{clip-path:inset(0)}.observation__painting-panel,.observation__meta h1,.observation__meta time,.observation__color,.observation__color:before,.observation__color:after{transition:none}.observation__info{opacity:1}.observation__info,.observation__swoosh-trace,.observation__swoosh-draw{transition:none}.observation__swoosh-trace{opacity:1}.observation__swoosh-draw{display:none}.observation__arrow,.observation__hint,.observation__timeline,.observation__timeline-dot,.observation__timeline-dot:before,.observation__overlay-close:hover{transition:none;animation:none}}@media (width<=720px){.observation{display:block}.observation__painting-panel,.observation__photo-panel{aspect-ratio:800/1004;width:100%;height:auto}.observation__painting-wrap{width:75%}.observation__meta{left:12.5%;right:12.5%}.observation__arrow--previous{left:.75rem}.observation__arrow--next{right:.75rem}.observation__timeline{width:calc(100vw - 2rem);top:auto;bottom:1rem;left:50%}.observation__overlay--open,html.observation-overlay-pending .observation__overlay{--overlay-pad-y:2rem;--overlay-pad-x:1.25rem}}