.personal-app-visual.app-showcase{height:520px;perspective:1100px;touch-action:pan-y;isolation:isolate;background:radial-gradient(ellipse at 50% 38%,#fffaf0 0%,#fff1cf 70%)}
.personal-zest .app-showcase{background:radial-gradient(ellipse at 50% 38%,#464044 0%,#262a30 72%)}
.app-showcase::before{content:'';position:absolute;inset:65% 9% 8%;border-radius:50%;background:#68543525;filter:blur(24px);transform:scaleY(.35)}
/* Keep the ZEST backdrop free of a blurred glow behind moving 3D layers. */
.personal-zest .app-showcase::before{content:none}
.app-showcase .showcase-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--camera-x,4deg)) rotateY(var(--camera-y,0deg)) translateY(var(--camera-lift,0px));transition:transform .15s linear;pointer-events:none}
.app-showcase img.showcase-screen{position:absolute;inset:auto;top:9%;left:50%;width:47%;height:79%;padding:0;object-fit:contain;background:#fff1cf;border-radius:16px;outline:1px solid #ffffff50;box-shadow:0 30px 48px -18px #16151a80;transform-origin:center;transition:transform 1.15s cubic-bezier(.22,.75,.16,1),opacity .7s,filter .8s;backface-visibility:hidden;will-change:transform;pointer-events:none}
.app-showcase img[data-position="0"]{transform:translate3d(-50%,0,75px) rotateY(-3deg) rotateZ(-2deg);opacity:1;filter:none;z-index:3}
.app-showcase img[data-position="1"]{transform:translate3d(10%,7%,-120px) rotateY(-32deg) rotateZ(8deg);opacity:.78;filter:brightness(.86);z-index:1}
.app-showcase img[data-position="2"]{transform:translate3d(-110%,3%,-120px) rotateY(32deg) rotateZ(-9deg);opacity:.78;filter:brightness(.86);z-index:1}
.app-showcase-hint{position:absolute;left:22px;bottom:18px;font:500 10px/1.3 sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#746b58;z-index:5;pointer-events:none}
.personal-zest .app-showcase-hint{color:#e6ddd1}
.showcase-controls{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 20px;border-bottom:1px solid #20212315;background:#fff1cf}
.personal-zest .showcase-controls{background:#262a30;color:#fff}
.showcase-controls button{cursor:pointer;background:transparent;color:inherit;border:1px solid currentColor;border-radius:50%;width:34px;height:34px;font:18px/1 sans-serif;opacity:.6;display:grid;place-items:center;padding:0}
.showcase-controls .showcase-dot{position:relative;width:36px;height:34px;border:0;font-size:0;opacity:1}
.showcase-dot::before,.showcase-dot::after{content:'';position:absolute;left:0;right:0;top:calc(50% - 1.5px);height:3px;border-radius:20px;background:currentColor}
.showcase-dot::before{opacity:.2}
.showcase-dot::after{transform:scaleX(0);transform-origin:left;transition:transform 70ms linear}
.showcase-controls .showcase-dot[aria-pressed="true"]{opacity:1}
.showcase-dot.is-complete::after{transform:scaleX(1)}
.showcase-dot[aria-pressed="true"]::after{transform:scaleX(var(--slide-progress,0))}
.showcase-controls button:focus-visible{outline:3px solid #007d94;outline-offset:4px;opacity:1}
.showcase-controls button:hover{opacity:1}
@media(max-width:900px) and (min-width:601px){.personal-app-visual.app-showcase{height:430px}.app-showcase img.showcase-screen{width:53%;height:76%;top:10%}}
@media(max-width:600px){.personal-app-visual.app-showcase{height:460px}.app-showcase img.showcase-screen{width:50%;height:79%}}
@media(prefers-reduced-motion:reduce){.app-showcase .showcase-scene{transform:none;transition:none}.app-showcase img.showcase-screen{transition:none;will-change:auto}}
.motion-paused .app-showcase .showcase-scene{transform:none;transition:none}

.personal-zest .app-showcase img.showcase-screen{background:#262a30}
.motion-paused .app-showcase img.showcase-screen{transition:none}

@media(prefers-reduced-motion:reduce){.showcase-dot::after{transition:none}}

.project-art.app-showcase{display:block!important;border-radius:18px 18px 0 0;transform:none!important;filter:none!important}
.project>.showcase-controls{border-radius:0 0 18px 18px}
.studio-puzzle-demo{margin-top:40px;border-top:1px solid #20212325;border-bottom:1px solid #20212325}
.studio-puzzle-demo>summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:24px 0;list-style:none;font-size:18px}
.studio-puzzle-demo>summary::-webkit-details-marker{display:none}
.studio-puzzle-demo>summary span{font-size:25px;transition:transform .3s}
.studio-puzzle-demo[open]>summary span{transform:rotate(45deg)}
.studio-puzzle-stage{max-width:620px;margin:0 auto 30px}

.work .showcase-frame{min-width:0;border-radius:24px;overflow:hidden}
.work .showcase-frame>.app-showcase{height:clamp(520px,48vw,740px);border-radius:0}
.work .showcase-frame>.showcase-controls{border-radius:0}
.work .studio-puzzle-stage{display:block}
@media(max-width:650px){.work .showcase-frame>.app-showcase{height:460px}}

/* Touch targets retain a stable size on every surface. */
.showcase-controls button{min-width:44px;min-height:44px}

/* Drive Moments: app screens in front of the dimmed racing-red brand image. */
.personal-drive .app-showcase{background:linear-gradient(#01020580,#010205b3),url("drivemoments/assets/redline.webp") 65% 50%/cover #010205}
.personal-drive .app-showcase::before{content:none}
.personal-drive .app-showcase-hint{color:#f3d6da}
.personal-drive .showcase-controls{background:#010205;color:#fff}
.personal-drive .app-showcase img.showcase-screen{background:#000}
.app-showcase img[data-position="hidden"]{transform:translate3d(-50%,4%,-260px) scale(.9);opacity:0;z-index:0;pointer-events:none}
/* Homepage app cards: every screen sits in an iPhone-sized frame. */
.project .app-showcase img.showcase-screen,.landing-showcase .app-showcase img.showcase-screen,.personal-app-card .app-showcase img.showcase-screen{top:9%;height:80%;width:auto;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border:clamp(2px,.25vw,4px) solid var(--phone-frame,#3a3c41);border-radius:clamp(26px,2.9vw,44px);outline:0;box-shadow:0 26px 48px -22px #00000070}
.personal-zest{--phone-frame:#41464e}.personal-klar{--phone-frame:#ecdcb8}.personal-drive{--phone-frame:#2c2d31}
.personal-klar .app-showcase img.showcase-screen{box-shadow:0 26px 44px -24px #6b552c55}
:is(.project,.landing-showcase,.personal-app-card) .showcase-controls{gap:7px}:is(.project,.landing-showcase,.personal-app-card) .showcase-controls button{flex-shrink:0}:is(.project,.landing-showcase,.personal-app-card) .showcase-controls .showcase-dot{width:26px;min-width:0;flex:0 1 26px}

/* App names in each app's own wordmark style (from the app design tokens). */
.personal-klar .project-info h3,.personal-klar .personal-app-body h3,.hero-device--klarjahr .hero-device-label strong{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:-.07em;text-transform:lowercase}
.personal-klar .project-info h3::after,.personal-klar .personal-app-body h3::after,.hero-device--klarjahr .hero-device-label strong::after{content:".";color:#f8730b}
.personal-zest .project-info h3,.personal-zest .personal-app-body h3,.hero-device--zest .hero-device-label strong{font-family:ui-serif,"New York",Georgia,serif;font-weight:600;letter-spacing:-.03em}
.personal-drive .project-info h3,.personal-drive .personal-app-body h3,.hero-device--drive .hero-device-label strong{font-family:"DM Sans",system-ui,sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8em}
.personal-drive .project-info h3,.personal-drive .personal-app-body h3{font-size:clamp(22px,2.2vw,30px)}

/* App names link to their landing page but keep the heading look. */
.title-link{color:inherit;text-decoration:none;font:inherit;letter-spacing:inherit}
.title-link:hover{color:inherit;text-decoration:none}
.title-link:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}