/* Original app section, retaining the dimensional application preview. */
#app .workspace-panel{overflow:visible}
#app .workspace-image{padding:35px 12px 12px;border:1px solid #68786255;border-radius:10px;background:#191b19;box-shadow:5px 5px 0 #232b22,6px 6px 0 #53614c55,0 24px 32px -20px #0009;transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);transform-origin:left center;overflow:hidden;flex-direction:row;transition:transform .4s ease,border-color .3s}
#app .workspace-image::before{content:'CLIPPSI';position:absolute;top:11px;left:14px;font-size:10px;line-height:1;font-weight:650;letter-spacing:.06em;color:#aab6a5}
#app .workspace-image::after{content:'\2014  \25a1  \00d7';position:absolute;right:14px;top:10px;font-size:10px;line-height:1;color:#778471;white-space:pre;letter-spacing:5px}
#app .workspace-image img{object-fit:contain;width:100%;height:100%;max-height:none;border-radius:3px}
#app .workspace-image:hover{border-color:#a3be8f88;transform:perspective(1200px) rotateY(-3deg) rotateX(1deg)}
#app .workspace-image .image-open{top:40px;right:12px;backdrop-filter:none}
@media(max-width:760px){
 #app .workspace-image{padding:30px 8px 8px;transform:perspective(1200px) rotateY(-3deg) rotateX(1deg)}
 #app .workspace-image::before{font-size:8px;left:10px;top:10px}
 #app .workspace-image::after{font-size:9px;right:8px;top:8px;letter-spacing:2px}
 #app .workspace-image .image-open{top:35px;right:8px}
}
@media(prefers-reduced-motion:reduce){#app .workspace-image,#app .workspace-image:hover{transform:none;transition:none}}
.journey-reduced #app .workspace-image,.journey-reduced #app .workspace-image:hover{transform:none;transition:none}

/* Keep small UI labels free of an extra filtered compositing pass. */
#app .workspace-image img,#app .workspace-image:hover img{filter:none;transition:none;image-rendering:auto}

/* A contained reflection follows the pointer while the original 3D frame stays intact. */
#app .workspace-image .preview-light,#app .workspace-image .preview-light-edge{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:2;transition:opacity .28s ease}
#app .workspace-image .preview-light{background:radial-gradient(ellipse 230px 190px at var(--preview-light-x,50%) var(--preview-light-y,45%),#ddffd414 0%,#c1ee9f18 24%,#b4ee9209 56%,transparent 100%)}
#app .workspace-image .preview-light-edge{display:none}
@supports(mask-composite:exclude){
 #app .workspace-image .preview-light-edge{display:block;padding:1px;background:radial-gradient(ellipse 230px 190px at var(--preview-light-x,50%) var(--preview-light-y,45%),#e6ffd3 0%,#c1ee9fb3 28%,#c1ee9f22 65%,transparent 100%);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
}
#app .workspace-image .image-open{z-index:3;transition:color .22s,border-color .22s,background .22s}
#app .workspace-tabs button{transition:color .2s,border-color .2s,text-shadow .2s}
#app .workspace-image:focus-visible{border-color:#c1ee9f}
#app .workspace-image:focus-visible .preview-light{opacity:.7}
@media(hover:hover) and (pointer:fine){
 #app .workspace-image.has-cursor-light .preview-light,#app .workspace-image.has-cursor-light .preview-light-edge{opacity:1}
 #app .workspace-image.has-cursor-light .image-open{border-color:#9dbb8680;background:#1b241a;color:#ecf8e3}
 #app .workspace-tabs button:hover{color:#dfffcb;border-color:#b8e695;text-shadow:0 0 16px #c1ee9f55}
}
@media(prefers-reduced-motion:reduce){
 #app .workspace-image .preview-light,#app .workspace-image .preview-light-edge,#app .workspace-image .image-open,#app .workspace-tabs button{transition:none}
}
.journey-reduced #app .workspace-image .preview-light,.journey-reduced #app .workspace-image .preview-light-edge,.journey-reduced #app .workspace-image .image-open,.journey-reduced #app .workspace-tabs button{transition:none}