.cs-sheet{background:var(--color-soft-white);box-shadow:var(--shadow-soft), 0 1px 0 #2423200a;border-radius:.25rem;padding:1rem;position:relative;rotate:-.4deg}@media (min-width:40rem){.cs-sheet{padding:1.5rem}}@media (min-width:64rem){.cs-sheet{padding:2.5rem;rotate:-.6deg}}.cs-grid{row-gap:2.75rem;display:grid}@media (min-width:48rem){.cs-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.25rem}}@media (min-width:64rem){.cs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.cs-frame{background:var(--color-camera-ground);transition:translate .5s var(--ease-expo), box-shadow .5s var(--ease-expo);padding:1.4rem .6rem;display:block;position:relative}a.cs-frame:hover{z-index:2;translate:0 -.35rem;box-shadow:0 18px 40px #24232040}a.cs-frame:focus-visible{z-index:2;outline:2px solid var(--color-terracotta);outline-offset:3px}.cs-edge{font-family:var(--font-mono);letter-spacing:.14em;color:#f7f3ec73;white-space:nowrap;justify-content:space-between;font-size:.55rem;line-height:1;display:flex;position:absolute;inset-inline:.75rem}.cs-edge-top{top:.45rem}.cs-edge-bottom{bottom:.45rem}.cs-edge-bottom span:first-child{transition:color .3s}a.cs-frame:hover .cs-edge-bottom span:first-child{color:var(--color-date-stamp)}.cs-img{aspect-ratio:3/2;color:var(--foreground);background:radial-gradient(circle at var(--fx,30%) var(--fy,30%), #ffffff1f, transparent 45%), linear-gradient(135deg, #424a4c, #2c302f 55%, var(--color-camera-ground));border-radius:.125rem;flex-direction:column;justify-content:space-between;gap:1rem;padding:1.25rem;transition:filter .4s;display:flex;position:relative}a.cs-frame:hover .cs-img{filter:brightness(1.15)}.cs-img:after{content:"";border-radius:inherit;background:var(--color-soft-white);opacity:0;pointer-events:none;position:absolute;inset:0}.cs-arrow{transition:translate .3s var(--ease-expo)}a.cs-frame:hover .cs-arrow{translate:.3rem}.cs-pencil{z-index:3;pointer-events:none;width:calc(100% + 2.2rem);height:calc(100% + 1.8rem);position:absolute;inset:-.9rem -1.1rem;overflow:visible}.cs-pencil path{fill:none;stroke:var(--color-shutter);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1600;stroke-dashoffset:0;opacity:.92}.cs-note{z-index:3;color:var(--color-shutter);white-space:nowrap;pointer-events:none;font-size:.875rem;font-weight:700;line-height:1.25rem;position:absolute;top:-2.4rem;right:.25rem;rotate:-3deg}.cs-root[data-phase=waiting] .cs-sheet{opacity:0;transform:translateY(2.5rem)rotate(-2.5deg)}.cs-root[data-phase=seen] .cs-sheet{transition:opacity .8s ease, transform 1.2s var(--ease-expo)}.cs-root[data-phase=waiting] .cs-img:after{opacity:1}.cs-root[data-phase=seen] .cs-img:after{transition:opacity 1.8s ease calc(.45s + var(--i,0) * .14s)}.cs-root[data-phase=waiting] .cs-edge{opacity:0}.cs-root[data-phase=seen] .cs-edge{transition:opacity .6s ease calc(.3s + var(--i,0) * .14s)}.cs-root[data-phase=waiting] .cs-pencil path{stroke-dashoffset:1600px}.cs-root[data-phase=waiting] .cs-note,.cs-root[data-phase=waiting] .cs-legend{opacity:0}.cs-root[data-phase=seen] .cs-pencil path{animation:.9s ease-in-out 1.9s both cs-draw}.cs-root[data-phase=seen] .cs-note,.cs-root[data-phase=seen] .cs-legend{animation:cs-note .5s var(--ease-expo) 2.6s both}@keyframes cs-draw{0%{stroke-dashoffset:1600px}to{stroke-dashoffset:0}}@keyframes cs-note{0%{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}