work-plane{display:block}work-plane .grid{gap:var(--plane-gap-sm);margin-inline:calc(50% - 50vw + var(--spacing) * 5);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@media (width>=640px){work-plane .grid{gap:var(--plane-gap);margin-inline:calc(50% - 50vw + var(--spacing) * 8);grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=960px){work-plane .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}work-plane .cell,work-plane .tile .inner{border-radius:var(--radius-media);background:var(--surface);display:block;position:relative;overflow:hidden}work-plane .cell:after,work-plane .tile .inner:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ring);pointer-events:none;position:absolute;inset:0}work-plane .cell img,work-plane .tile img{aspect-ratio:4/3;object-fit:cover;-webkit-user-drag:none;width:100%;height:100%;display:block}work-plane .stage,work-plane:is([data-mode=canvas],[data-pending]) .grid{display:none}work-plane:is([data-mode=canvas],[data-pending]) .stage{--plane-pull:calc(var(--spacing) * 12);width:100vw;margin-inline:calc(50% - 50vw);margin-top:calc(-1 * var(--plane-pull));height:calc(100dvh - var(--plane-top,calc(var(--plane-start,0px) - var(--plane-pull))));min-height:var(--plane-min-h);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;cursor:grab;display:block;position:relative;overflow:hidden}@media (width>=960px){work-plane:is([data-mode=canvas],[data-pending]) .stage{--plane-pull:calc(var(--spacing) * 16)}}work-plane .stage[data-dragging]{cursor:grabbing}work-plane .stage[data-undocked]{touch-action:pan-y}work-plane .stage:focus-visible{outline-offset:calc(var(--spacing) * -1);border-radius:var(--radius-media)}work-plane .tiles{perspective:var(--plane-perspective);position:absolute;inset:0}work-plane .tile{width:var(--plane-tile);aspect-ratio:4/3;will-change:transform;backface-visibility:hidden;-webkit-user-drag:none;position:absolute;top:0;left:0}work-plane .tile .inner{width:100%;height:100%;transition:transform var(--dur-base) var(--ease-out)}work-plane .probe{visibility:hidden;pointer-events:none;width:var(--plane-tile);height:var(--plane-gap);position:absolute}@media (width<=639.98px){work-plane .tile{width:var(--plane-tile-sm)}work-plane .probe{width:var(--plane-tile-sm);height:var(--plane-gap-sm)}}work-plane .edge{pointer-events:none;position:absolute}work-plane .edge[data-side=top]{--dir:to bottom;height:var(--plane-edge);inset:0 0 auto}work-plane .edge[data-side=bottom]{--dir:to top;height:var(--plane-edge);inset:auto 0 0}work-plane .edge[data-side=left]{--dir:to right;width:var(--plane-edge-x);inset:0 auto 0 0}work-plane .edge[data-side=right]{--dir:to left;width:var(--plane-edge-x);inset:0 0 0 auto}work-plane .edge i{position:absolute;inset:0}work-plane .edge i:first-child{backdrop-filter:blur(var(--plane-blur-1));-webkit-mask-image:linear-gradient(var(--dir), #000 0%, #000 50%, transparent 100%);mask-image:linear-gradient(var(--dir), #000 0%, #000 50%, transparent 100%)}work-plane .edge i:nth-child(2){backdrop-filter:blur(var(--plane-blur-2));-webkit-mask-image:linear-gradient(var(--dir), #000 0%, #000 25%, transparent 66%);mask-image:linear-gradient(var(--dir), #000 0%, #000 25%, transparent 66%)}work-plane .edge i:nth-child(3){backdrop-filter:blur(var(--plane-blur-3));-webkit-mask-image:linear-gradient(var(--dir), #000 0%, transparent 40%);mask-image:linear-gradient(var(--dir), #000 0%, transparent 40%)}work-plane .edge:after{content:"";background:linear-gradient(var(--dir), var(--bg) 0%, transparent 100%);position:absolute;inset:0}work-plane .stage[data-lite] .edge i{display:none}work-plane .caption,work-plane .drag{pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-out);position:absolute}work-plane .caption{left:calc(var(--spacing) * 5);bottom:var(--size-switch-gap);line-height:var(--size-switch-h)}@media (width>=640px){work-plane .caption{left:calc(var(--spacing) * 8)}}work-plane .drag{margin:var(--plane-cursor-offset) 0 0 var(--plane-cursor-offset);padding-inline:calc(var(--spacing) * 2);border-radius:var(--radius-pill);background:var(--fg);color:var(--bg);will-change:transform;top:0;left:0}@media (hover:hover) and (pointer:fine){work-plane .caption[data-show],work-plane .drag[data-show]{opacity:1}work-plane .stage:not([data-dragging]) .tile:hover .inner{transform:scale(var(--plane-hover-scale))}}.lightbox{--lb-pad:calc(var(--spacing) * 5);--lb-gap:calc(var(--spacing) * 3);width:100%;max-width:none;height:100%;max-height:none;padding:var(--lb-pad);color:var(--fg);background:0 0;border:0;margin:0;position:fixed;inset:0;overflow:hidden}@media (width>=640px){.lightbox{--lb-pad:calc(var(--spacing) * 8)}}.lightbox[open]{place-items:center;display:grid}.lightbox::backdrop{background:color-mix(in srgb, var(--bg) var(--opacity-backdrop), transparent)}.lb-body{width:min(var(--size-lightbox), 100%, (100dvh - 2 * var(--lb-pad) - var(--lb-gap) - var(--text-base--line-height)) * 4 / 3)}.lb-frame{border-radius:var(--radius-media);background:var(--surface);position:relative;overflow:hidden}.lb-frame:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ring);pointer-events:none;position:absolute;inset:0}.lb-frame img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;display:block}.lb-bar{justify-content:space-between;align-items:baseline;gap:var(--lb-gap) calc(var(--spacing) * 4);margin-top:var(--lb-gap);flex-wrap:wrap;display:flex}.lb-controls{gap:calc(var(--spacing) * 4);display:flex}html:has(.lightbox[open]){overflow:hidden}html:active-view-transition-type(lightbox)::view-transition-group(lightbox){animation-duration:var(--dur-slide);animation-timing-function:var(--ease-snap)}html:active-view-transition-type(lightbox)::view-transition-old(root),html:active-view-transition-type(lightbox)::view-transition-new(root){animation-duration:var(--dur-base);animation-timing-function:var(--ease-out)}html{overscroll-behavior:none}body{padding-bottom:calc(var(--size-switch-h) + var(--size-switch-gap));overflow-x:clip}body:has(.view-switch input[value=list]:checked) .view-canvas,body:not(:has(.view-switch input[value=list]:checked)) .view-list{display:none}.view-switch{z-index:30;left:50%;bottom:var(--size-switch-gap);gap:var(--spacing);height:var(--size-switch-h);min-inline-size:0;padding:var(--spacing);border-radius:var(--radius-pill);background:var(--bg);box-shadow:inset 0 0 0 1px var(--ring), var(--shadow-preview);border:0;margin:0;display:flex;position:fixed;translate:-50%}.view-switch label{padding-inline:calc(var(--spacing) * 3);border-radius:var(--radius-pill);color:var(--fg-2);transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);align-items:center;display:flex;position:relative}.view-switch input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.view-switch label:has(:checked){background:var(--fg);color:var(--bg)}.view-switch label:has(:focus-visible){outline:2px solid var(--fg);outline-offset:3px}@media (hover:hover) and (pointer:fine){.view-switch label:not(:has(:checked)):hover{color:var(--fg)}}