/* APELINE / V7 — A single painting becomes a wall of work.
   Optical zoom, not a collage of generated graphics. Every tile is a real token. */
[data-zoom-stage]{--camera-scale:3.25;--world-tile:220px;--world-gap:20px;position:relative;isolation:isolate}
.zoom-universe{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.zoom-universe::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.05),transparent 18%,transparent 82%,rgba(0,0,0,.06));}
.universe-world{position:absolute;left:50%;top:50%;width:max-content;display:grid;grid-template-columns:repeat(9,var(--world-tile));grid-auto-rows:var(--world-tile);gap:var(--world-gap);transform-origin:50% 50%;transform:translate(-50%,-50%) scale(var(--camera-scale));transition:transform 1150ms cubic-bezier(.19,1,.22,1);will-change:transform;pointer-events:none}
.universe-world.is-dragging{transition:none}
.universe-cell{position:relative;display:block;width:var(--world-tile);height:var(--world-tile);min-height:0;min-width:0;padding:0;border:1px solid rgba(224,223,209,.16);background:#000;overflow:hidden;box-sizing:border-box;pointer-events:auto;touch-action:pan-y}
button.universe-cell{appearance:none;cursor:zoom-in}
.universe-cell img{width:100%!important;height:100%!important;max-width:none!important;display:block!important;aspect-ratio:1!important;object-fit:contain!important;image-rendering:pixelated!important;filter:none!important;transform:none!important;transition:none!important;user-select:none;-webkit-user-drag:none;pointer-events:none}
.universe-cell::after{content:"";position:absolute;inset:0;border:1px solid transparent;pointer-events:none;transition:border-color .25s ease}
@media(hover:hover){.universe-cell:hover::after{border-color:rgba(255,255,255,.86)}.universe-cell:hover .universe-id{opacity:1}}
.universe-cell:focus-visible{outline:3px solid #fff;outline-offset:0;z-index:2}
.universe-id{position:absolute;top:8px;left:8px;color:#dddcd5;background:rgba(0,0,0,.77);padding:4px 5px;font:9px/1 'Courier New',monospace;letter-spacing:.13em;opacity:0;transition:opacity .3s;pointer-events:none}
.universe-cell[data-center]{border-color:rgba(255,255,255,.4)}
/* The existing artwork shell becomes the one privileged central specimen. */
[data-zoom-stage] .universe-cell .stage-art,[data-zoom-stage] .universe-cell .focus-frame{width:100%!important;height:100%!important;min-width:0!important;max-width:none!important;aspect-ratio:1!important;position:relative!important;inset:auto!important;margin:0!important;display:block!important;z-index:1!important;will-change:auto!important;transform:none!important;transition:none!important;background:#000}
[data-zoom-stage] .universe-cell .stage-art img,[data-zoom-stage] .universe-cell .focus-frame img{width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:1!important;object-fit:contain!important;image-rendering:pixelated!important;filter:none!important;transform:none!important}
/* Incoming featured-image transitions remain constrained to their source tile. */
[data-zoom-stage] .universe-cell .piece-incoming,[data-zoom-stage] .universe-cell .focus-incoming{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;z-index:4!important;pointer-events:none}
[data-zoom-stage] .world-status{position:absolute;bottom:69px;left:50%;transform:translateX(-50%);z-index:4;min-width:130px;padding:8px 12px;color:#a9a9a0;white-space:nowrap;letter-spacing:.14em;text-align:center;font:10px/1.5 'Courier New',monospace;pointer-events:none;background:rgba(8,8,8,.76);border:1px solid rgba(255,255,255,.1);transition:color .3s,border-color .3s}
[data-zoom-stage].is-distant .world-status{color:#f1f0eb;border-color:rgba(255,255,255,.38)}
[data-zoom-stage] .zoom-distance-caption{display:none!important}
[data-zoom-stage] .stage-badge,[data-zoom-stage] .stage-count,[data-zoom-stage] .stage-controls,[data-zoom-stage] .top-left,[data-zoom-stage] .top-right,[data-zoom-stage] .focus-nav{z-index:6!important}
/* Keep panels themselves above the world and keep side slider usable on touch. */
[data-zoom-stage] canvas{z-index:0!important}
.universe-world button:active{cursor:grabbing}
@media(max-width:700px){
 [data-zoom-stage] .world-status{font-size:9px;bottom:72px;letter-spacing:.07em;padding:6px 9px}
 .universe-id{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.universe-world,.universe-id{transition:none!important}}