.detail-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(2,8,14,.65);opacity:0;pointer-events:none;transition:opacity .28s ease}
.showcase-frame:hover .detail-overlay,.showcase-frame:focus-within .detail-overlay{opacity:1}
.detail-overlay button{pointer-events:auto;border:1px solid #b4e5ef88;border-radius:40px;background:#101e28b8;color:#e8faff;padding:14px 25px;font-size:13px;letter-spacing:2px;cursor:pointer;transition:background .2s}
.detail-overlay button:hover{background:#285365}.detail-overlay button:focus-visible{outline:2px solid #9eeaff;outline-offset:5px}
.case-scene[data-category="5"] .detail-overlay{inset:6.16438356% 5% auto;height:auto;aspect-ratio:9/16;border-radius:19px}
.showcase-frame.is-playing .detail-overlay{display:none}
.detail-overlay .detail-play{font-size:11px;padding:9px 18px;letter-spacing:1px;background:transparent}
.case-detail-dialog{width:min(740px,92vw);max-height:85svh;padding:clamp(24px,5vw,54px);overscroll-behavior:contain}
.case-detail-dialog .detail-eyebrow{font-size:10px;letter-spacing:3px;color:#80bbcd;margin:0 0 23px}
.case-detail-dialog h3{font-size:clamp(23px,4vw,36px);font-weight:400;margin:30px 0 16px;line-height:1.4}
.case-detail-dialog .detail-note{font-size:11px;color:#8aa1af;border-top:1px solid #ffffff20;padding-top:22px}
.case-detail-dialog dl{display:grid;gap:14px;margin:28px 0}.case-detail-dialog dt{font-size:10px;letter-spacing:2px;color:#80bbcd}.case-detail-dialog dd{margin:0 0 14px;font-size:15px;line-height:1.8}
@media(hover:none),(pointer:coarse){.detail-overlay{opacity:1;background:linear-gradient(transparent 35%,#02080ea6);justify-content:flex-end;padding-bottom:18px}.detail-overlay button{padding:10px 17px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.detail-overlay{transition:none}}

/* Case carousel */
.case-detail-dialog{width:min(1180px,94vw);max-height:92svh;padding:clamp(22px,4vw,48px);background:#09131c;overflow:auto}
.detail-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px}.detail-top .detail-eyebrow{margin:0}
.detail-project{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,55px);align-items:center}
.detail-placeholder{min-height:350px;aspect-ratio:1.15;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #ffffff20;background:radial-gradient(ellipse at 50% 65%,hsl(var(--placeholder-hue) 55% 22% / .6),transparent 65%),linear-gradient(140deg,#142330,#060c12);transition:background .4s}
.detail-placeholder:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:40px 40px}
.placeholder-orbit{position:absolute;width:65%;aspect-ratio:1;border:1px solid hsl(var(--placeholder-hue) 65% 70% / .4);border-radius:50%;transform:rotate(-30deg) scaleY(.65);box-shadow:0 0 55px #72d8f510,inset 0 0 40px #72d8f510}
.detail-placeholder span,.detail-placeholder small,.detail-placeholder strong{position:relative}.detail-placeholder span{font-size:10px;letter-spacing:4px;color:#9ebbc7}.detail-placeholder strong{font-weight:200;font-size:clamp(80px,11vw,150px);line-height:1.25;color:#bcdae7}.detail-placeholder small{position:absolute;bottom:25px;font-size:8px;letter-spacing:3px;color:#668390}
.detail-copy{min-width:0}.case-detail-dialog h2{font-size:clamp(24px,3vw,42px);line-height:1.45}.case-detail-dialog h3{font-size:clamp(18px,2vw,25px);color:#bbd6e4;margin:20px 0}.case-detail-dialog .detail-note{margin-top:28px}.detail-letter{display:inline-block;animation:detail-letter-in .65s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--letter-delay);white-space:pre-wrap}
@keyframes detail-letter-in{from{opacity:0;transform:translateY(25px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.detail-controls{display:flex;align-items:center;justify-content:flex-end;gap:22px;border-top:1px solid #ffffff15;margin-top:32px;padding-top:24px}.detail-controls>button{width:42px;height:42px;border-radius:50%;font-size:18px}.detail-controls>button:hover{background:#294653}.detail-controls>span{font-size:11px;letter-spacing:3px;color:#b5cbd6;min-width:64px}
#detail-dots{display:flex;gap:5px;margin-right:auto}#detail-dots button{width:32px;height:32px;border:0;position:relative}#detail-dots button:after{content:'';position:absolute;left:5px;right:5px;top:15px;height:2px;background:#3c5360}#detail-dots button[aria-current=true]:after{background:#a4ebff}
@media(max-width:700px){.detail-project{grid-template-columns:1fr;gap:24px}.detail-placeholder{min-height:180px;aspect-ratio:1.8;max-height:28svh}.detail-placeholder strong{font-size:80px}.detail-top{margin-bottom:22px}.detail-controls{gap:12px}.case-detail-dialog .detail-note{margin-top:18px}.case-detail-dialog h3{margin:10px 0}.case-detail-dialog p{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.detail-letter{animation:none}.detail-placeholder{transition:none}}

/* Full-screen stacked case stream */
body.details-open{overflow:hidden}
.case-detail-dialog{position:fixed;inset:0;z-index:100;width:100%;height:100svh;max-height:none;margin:0;border:0;border-radius:0;padding:28px 5vw;color:#203329;background:#e1e6d8;overflow:hidden;transform:translateY(105%);transition:transform .85s cubic-bezier(.22,1,.36,1),background .8s;isolation:isolate;touch-action:pan-x}
.case-detail-dialog:before{content:'';position:absolute;inset:0;background:#b6c5a5;z-index:-1;transform:translateY(-20%);transition:transform 1s cubic-bezier(.22,1,.36,1);pointer-events:none}.case-detail-dialog.is-open{transform:translateY(0)}.case-detail-dialog.is-open:before{transform:translateY(-101%)}
.case-detail-dialog button{color:inherit;cursor:pointer;background:transparent;border:1px solid #263f3540}
.detail-top{height:50px;margin:0 0 25px}.case-detail-dialog .detail-eyebrow{color:#506654}.detail-top #detail-close{width:auto;height:auto;padding:12px 18px;border-radius:30px;font-size:12px}
#detail-carousel{position:relative;height:calc(100% - 75px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.detail-project{position:relative;z-index:2;flex:1;min-height:0;grid-template-columns:1.25fr 1fr;padding:3vh 0 5vh;will-change:transform}
.detail-project.detail-outgoing{position:absolute;inset:0 0 72px;z-index:1;pointer-events:none}.detail-outgoing .detail-letter{animation:none}
.detail-placeholder{height:100%;max-height:65svh;min-height:0;aspect-ratio:auto;border:0;background:radial-gradient(ellipse at 50% 60%,hsl(var(--placeholder-hue) 24% 53%),transparent 65%),linear-gradient(145deg,#849b82,#304c48);box-shadow:0 25px 55px #253d321a}
.detail-placeholder strong{font-size:clamp(110px,17vw,240px);color:#dce9d4;font-weight:200}.detail-placeholder small,.detail-placeholder span{color:#dae5d2}.placeholder-orbit{border-color:#dbe8d366}
.detail-copy{padding:15px 0}.case-detail-dialog h2{font-size:clamp(28px,4vw,60px);font-weight:400;line-height:1.25;margin:20px 0}.case-detail-dialog h3{color:#3c5849}.case-detail-dialog #detail-description{color:#546654;font-size:14px;line-height:1.9;max-width:400px}.case-detail-dialog .detail-note{color:#62745f;border-color:#233c3025;line-height:1.8}
.detail-controls{position:relative;z-index:3;flex:0 0 72px;margin:0;padding:15px 0 0;border-color:#263f3525;gap:15px;background:#e1e6d8}.detail-controls>span{color:#304637}.detail-controls>button:hover{background:#c1ceba}#detail-dots button:after{background:#8d9e87}#detail-dots button[aria-current=true]:after{background:#294d3f}#detail-dots button{width:24px}#detail-hint{font-size:10px;letter-spacing:2px;margin-right:25px;color:#5a715d}
.case-detail-dialog:not(.is-open) .detail-letter{animation:none;opacity:0}
@media(max-width:700px){.case-detail-dialog{padding:15px 6vw}.detail-top{height:40px;margin-bottom:15px}.detail-top .detail-eyebrow{font-size:9px;letter-spacing:1px}#detail-carousel{height:calc(100% - 55px)}.detail-project{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:10px 0 15px}.detail-placeholder{flex:1;min-height:100px;max-height:38svh}.detail-placeholder strong{font-size:85px}.detail-copy{flex:none;padding:0}.case-detail-dialog h2{font-size:26px;margin:8px 0}.case-detail-dialog h3{font-size:17px;margin:8px 0}.case-detail-dialog #detail-description{font-size:12px;line-height:1.6;margin:8px 0}.case-detail-dialog .detail-note{font-size:10px;padding-top:8px;margin:8px 0}.case-detail-dialog .detail-eyebrow{margin-bottom:8px}.detail-controls{gap:8px;flex-basis:60px}#detail-hint{display:none}#detail-dots{gap:0}#detail-dots button{width:16px}#detail-dots button:after{left:3px;right:3px}.detail-controls>button{width:32px;height:32px}.detail-controls>span{font-size:9px;min-width:48px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.case-detail-dialog,.case-detail-dialog:before{transition:none}}

/* Grid identity and 3D ring */
.case-detail-dialog:is(.art-detail,.aso-detail){background-color:#dce1e1;background-image:linear-gradient(#52636c0c 1px,transparent 1px),linear-gradient(90deg,#52636c0c 1px,transparent 1px);background-size:72px 72px;color:#141c20;border-radius:18px;box-shadow:inset 0 0 110px #060d1480}
.case-detail-dialog:is(.art-detail,.aso-detail):after{content:'';position:absolute;inset:0;pointer-events:none;z-index:8;background:radial-gradient(ellipse at 50% 46%,transparent 40%,#050c1433 80%,#050a126e 100%);border-radius:inherit}
.case-detail-dialog:is(.art-detail,.aso-detail):before{background:#9daeb6}
:is(.art-detail,.aso-detail) .detail-top{position:relative;z-index:10}
:is(.art-detail,.aso-detail) .detail-top .detail-eyebrow{color:#17242b}
:is(.art-detail,.aso-detail) .detail-logo-outline{position:absolute;left:12%;right:4%;bottom:-4%;color:#f8ffff;opacity:.65;pointer-events:none;z-index:0}
:is(.art-detail,.aso-detail) .detail-logo-outline svg{display:block;width:100%}
:is(.art-detail,.aso-detail) #detail-carousel{overflow:visible;z-index:2}
:is(.art-detail,.aso-detail) .detail-project{display:grid;grid-template-columns:34% 66%;gap:0;overflow:visible;align-items:center;padding:0 0 5vh}
:is(.art-detail,.aso-detail) .detail-copy{grid-column:1;grid-row:1;position:relative;z-index:5;padding-right:20px;pointer-events:none}
.case-detail-dialog:is(.art-detail,.aso-detail) h2{font-size:clamp(30px,3.7vw,60px);letter-spacing:-2px;line-height:1.35;max-width:440px}
.case-detail-dialog:is(.art-detail,.aso-detail) h3{color:#161e23;font-size:clamp(20px,2.1vw,32px);line-height:1.6}
.case-detail-dialog:is(.art-detail,.aso-detail) h3 .detail-letter{background:#142027;color:#edf4f4}
.case-detail-dialog:is(.art-detail,.aso-detail) #detail-description{font-size:15px;color:#394850;line-height:2;max-width:350px}
.case-detail-dialog:is(.art-detail,.aso-detail) .detail-note{color:#607078;border-color:#27394024;max-width:350px}
.case-detail-dialog:is(.art-detail,.aso-detail) .detail-eyebrow{color:#485b64}
:is(.art-detail,.aso-detail) .detail-ring-stage{grid-column:2;grid-row:1;position:relative;width:100%;height:100%;min-height:380px;perspective:1300px;perspective-origin:50% 43%;--ring-radius:clamp(270px,28vw,450px);--card-width:clamp(150px,16vw,235px);--card-height:clamp(210px,23vw,325px)}
:is(.art-detail,.aso-detail) .detail-ring-camera{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--ring-radius) * -1)) rotateX(-9deg)}
:is(.art-detail,.aso-detail) .detail-ring{position:absolute;left:50%;top:49%;width:0;height:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.25,1);will-change:transform}
:is(.art-detail,.aso-detail) .ring-card{position:absolute;width:var(--card-width);height:var(--card-height);left:calc(var(--card-width) * -.5);top:calc(var(--card-height) * -.5);transform:rotateY(var(--card-angle)) translateZ(var(--ring-radius));background:#c4d0d2;border:1px solid #f3ffffb3;box-shadow:0 12px 26px #10243130;backface-visibility:visible;display:flex;flex-direction:column;padding:14px;color:#293b45;transition:filter .5s;filter:saturate(.35) brightness(.82)}
:is(.art-detail,.aso-detail) .ring-card.is-selected{filter:saturate(1) brightness(1.08)}
:is(.art-detail,.aso-detail) .ring-card-label{font-size:8px;letter-spacing:1.5px}
:is(.art-detail,.aso-detail) .ring-card-art{position:relative;flex:1;margin:14px 0;overflow:hidden;background:radial-gradient(ellipse at 60% 40%,hsl(var(--card-hue) 25% 67%),#344d58);display:grid;place-items:center}
:is(.art-detail,.aso-detail) .ring-card-art:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#15283233)}
:is(.art-detail,.aso-detail) .ring-card-art i{position:absolute;width:70%;aspect-ratio:1;border:1px solid #dffbff88;border-radius:50%;transform:rotate(-30deg) scaleY(.6);box-shadow:0 0 40px #d6efff18}
:is(.art-detail,.aso-detail) .ring-card-art b{font-weight:200;font-size:85px;color:#edf7f7;z-index:1}
:is(.art-detail,.aso-detail) .ring-card-caption{font-size:9px;line-height:1.5;letter-spacing:.5px}
:is(.art-detail,.aso-detail) .ring-ground{position:absolute;bottom:13%;left:10%;width:80%;height:15%;border-radius:50%;background:#13273220;filter:blur(22px);z-index:-1;pointer-events:none}
:is(.art-detail,.aso-detail) .detail-controls{background:transparent;border-color:#27394022;z-index:10}
:is(.art-detail,.aso-detail) .detail-controls>span,:is(.art-detail,.aso-detail) #detail-hint{color:#334952}
:is(.art-detail,.aso-detail) #detail-dots button[aria-current=true]:after{background:#223f50}
:is(.art-detail,.aso-detail) .detail-controls>button:hover{background:#c4d0d6}
@media(max-width:700px){
.case-detail-dialog:is(.art-detail,.aso-detail){border-radius:10px;background-size:48px 48px;box-shadow:inset 0 0 65px #060d1450}
:is(.art-detail,.aso-detail) .detail-project{display:flex;flex-direction:column;gap:0;align-items:stretch;justify-content:center;padding-bottom:5px}
:is(.art-detail,.aso-detail) .detail-copy{order:0;padding:0;flex:0 0 auto}
.case-detail-dialog:is(.art-detail,.aso-detail) h2{font-size:27px;letter-spacing:-1px;margin:6px 0}
.case-detail-dialog:is(.art-detail,.aso-detail) h3{font-size:17px;margin:5px 0}
.case-detail-dialog:is(.art-detail,.aso-detail) #detail-description{font-size:11px;line-height:1.6;max-width:95%;margin:8px 0}
.case-detail-dialog:is(.art-detail,.aso-detail) .detail-note{font-size:9px;margin:5px 0;padding:5px 0}
:is(.art-detail,.aso-detail) .detail-ring-stage{order:1;flex:1;min-height:190px;max-height:42svh;--ring-radius:240px;--card-width:125px;--card-height:165px;perspective:850px}
:is(.art-detail,.aso-detail) .ring-card{padding:9px}
:is(.art-detail,.aso-detail) .ring-card-label{font-size:6px}
:is(.art-detail,.aso-detail) .ring-card-art{margin:7px 0}
:is(.art-detail,.aso-detail) .ring-card-art b{font-size:48px}
:is(.art-detail,.aso-detail) .ring-card-caption{font-size:7px}
:is(.art-detail,.aso-detail) .detail-logo-outline{left:2%;right:2%;bottom:5%}
:is(.art-detail,.aso-detail) .detail-controls{flex-basis:50px;padding-top:8px}}
@media(prefers-reduced-motion:reduce){
:is(.art-detail,.aso-detail) .detail-ring,:is(.art-detail,.aso-detail) .ring-card{transition:none}}
.motion-off :is(.art-detail,.aso-detail) .detail-ring{transition:none}

/* Shared secondary-page identity */
.case-detail-dialog{background-color:#dce1e1;background-image:linear-gradient(#52636c0c 1px,transparent 1px),linear-gradient(90deg,#52636c0c 1px,transparent 1px);background-size:72px 72px;border-radius:18px;box-shadow:inset 0 0 110px #060d1480}
.detail-logo-outline{position:absolute;left:12%;right:4%;bottom:-4%;color:#f8ffff;opacity:.65;pointer-events:none;z-index:0}.detail-logo-outline svg{display:block;width:100%}.case-detail-dialog .detail-top,.case-detail-dialog #detail-carousel{position:relative;z-index:2}.case-detail-dialog .detail-controls{background:transparent}
/* ASO: wide central panels and illustrative analytics */
.aso-detail .detail-project{grid-template-columns:30% 70%;gap:0}.aso-detail .detail-copy{pointer-events:auto;padding:20px 24px 20px 0;color:#f0f5f4}
.aso-detail .detail-copy:before{content:'';position:absolute;inset:-8vh -8vw -8vh -5vw;background:#050c12;filter:blur(42px);z-index:-1;opacity:.94;pointer-events:none}
.aso-detail .detail-ring-stage:before{content:'';position:absolute;inset:0 -5vw -4vh -5vw;background:radial-gradient(ellipse,#02090ff0 25%,#071018b0 55%,transparent 75%);filter:blur(30px);pointer-events:none}
.case-detail-dialog.aso-detail h2{font-size:clamp(26px,2.8vw,43px);color:#f4f6f5;letter-spacing:-1px}.case-detail-dialog.aso-detail h3{font-size:18px}.case-detail-dialog.aso-detail h3 .detail-letter{background:none;color:#d0e4e1}.case-detail-dialog.aso-detail #detail-description{font-size:12px;line-height:1.7;color:#aebdbf}.case-detail-dialog.aso-detail .detail-note{color:#9fafb1;font-size:10px;border-color:#ffffff20}.aso-detail .detail-copy .detail-eyebrow{color:#9fb7bc}
.aso-detail .detail-ring-stage{--ring-radius:clamp(480px,49vw,730px);--card-width:clamp(270px,29vw,445px);--card-height:clamp(185px,20vw,300px);perspective:1600px}
.aso-detail .detail-ring-camera{transform:translateZ(calc(var(--ring-radius) * -1)) rotateX(-2deg)}
.aso-detail .ring-card{padding:0;background:#17212b;color:white;filter:brightness(.6);border-color:#c8e2ed55}.aso-detail .ring-card.is-selected{filter:brightness(1.12);box-shadow:0 15px 50px #0008}.aso-detail .ring-card-label{padding:12px 15px;position:absolute;z-index:3;background:#03101a80;left:0;top:0}.aso-detail .ring-card-art{margin:0;background:linear-gradient(140deg,#20354844,#081523bb),url('assets/blue-world.png') center/cover}.aso-detail .ring-card:nth-child(even) .ring-card-art{background:linear-gradient(140deg,#25465133,#0a1029aa),url('assets/explorer.png') center 30%/cover}.aso-detail .ring-card-art b{font-size:70px;text-shadow:0 3px 20px #0008}.aso-detail .ring-card-caption{padding:12px 15px;background:#07131dd9;font-size:10px}
.aso-dashboard{margin-top:22px;border-top:1px solid #ffffff25;padding-top:16px}.aso-data-label{font-size:9px;letter-spacing:1px;color:#a8c1c4}.aso-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.aso-metrics small{display:block;color:#a2b3b9;font-size:9px}.aso-metrics strong{display:block;font-size:26px;font-weight:400;margin-top:7px;animation:detail-letter-in .6s both}.aso-metrics em{font-size:10px;font-style:normal;margin-left:3px;color:#92a7af}.aso-chart{margin-top:18px}.aso-chart-title{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#a8bcc1}.aso-chart-title b{font-size:17px;font-weight:400;color:#dbf4e7}.aso-chart svg{width:100%;display:block;max-height:130px}.aso-chart-line{stroke-dasharray:1;stroke-dashoffset:0;animation:aso-draw 1.1s ease both}@keyframes aso-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:700px){.aso-detail .detail-project{display:flex}.aso-detail .detail-copy{padding:0}.case-detail-dialog.aso-detail h2{font-size:23px}.case-detail-dialog.aso-detail h3,.case-detail-dialog.aso-detail #detail-description,.case-detail-dialog.aso-detail .detail-note{display:none}.aso-dashboard{margin-top:8px;padding-top:8px}.aso-metrics{margin-top:8px}.aso-metrics strong{font-size:20px}.aso-chart{margin-top:6px}.aso-chart svg{max-height:72px}.aso-detail .detail-ring-stage{--ring-radius:340px;--card-width:220px;--card-height:155px;min-height:180px;perspective:1000px}.aso-detail .ring-card-art b{font-size:48px}.aso-detail .ring-card-caption{padding:6px;font-size:8px}.aso-detail .detail-copy:before{inset:-15px -25px;filter:blur(25px)}.aso-detail .detail-ring-stage:before{inset:-20px -30px}.aso-detail .detail-controls{color:#14232c}}
@media(prefers-reduced-motion:reduce){.aso-chart-line,.aso-metrics strong{animation:none}}.motion-off .aso-chart-line,.motion-off .aso-metrics strong{animation:none}

/* Pointer interaction and centered artwork */
.case-detail-dialog .ring-card{cursor:pointer;transform:rotateY(var(--card-angle)) translateZ(var(--ring-radius)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s ease,filter .35s,box-shadow .35s}
.case-detail-dialog .ring-card:hover,.case-detail-dialog .ring-card:focus-visible{transform:rotateY(var(--card-angle)) translateZ(var(--ring-radius)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.065);filter:brightness(1.15);outline:2px solid #c9edfa;outline-offset:4px}
.case-detail-dialog .detail-placeholder[role=button]{cursor:pointer;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s}.case-detail-dialog .detail-placeholder[role=button]:hover{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.025)}
.case-zoom{position:fixed;inset:0;margin:auto;width:min(1100px,94vw);height:min(780px,92svh);max-height:92svh;padding:50px 35px 20px;border:0;background:#0c141bf2;color:#e1edf2;overflow:auto;touch-action:pan-y}
.case-zoom::backdrop{background:#02070cd9;backdrop-filter:blur(14px)}.case-zoom[open]{display:flex;flex-direction:column;align-items:center;animation:case-enlarge .45s cubic-bezier(.2,.8,.2,1)}
.case-zoom .case-zoom-close{position:absolute;right:14px;top:12px;border:1px solid #d6e8f555;color:white;background:#101e28;width:32px;height:32px;border-radius:50%;font-size:21px;z-index:3}
.case-zoom-content{flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center}.case-detail-dialog .case-zoom .zoom-art{position:relative;inset:auto;left:auto;top:auto;transform:none!important;filter:none;cursor:default;width:min(620px,100%);height:100%;max-height:62svh;min-height:180px;aspect-ratio:1.5;outline:0;animation:none;pointer-events:none;--placeholder-hue:200}.case-detail-dialog .case-zoom .ring-card.zoom-art{width:min(500px,100%);height:min(570px,62svh)}.case-detail-dialog.aso-detail .case-zoom .ring-card.zoom-art{width:100%;height:min(540px,62svh);aspect-ratio:1.6}.case-zoom #case-zoom-title{margin:18px 0 0;font-size:12px;color:#c0d1db;letter-spacing:1px;text-align:center}
@keyframes case-enlarge{from{opacity:0;transform:translateY(25px) scale(.92)}to{opacity:1;transform:none}}
@media(max-width:700px){.case-zoom{padding:50px 15px 20px}.detail-controls{gap:5px}#detail-auto{width:28px;height:28px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.case-zoom[open]{animation:none}.case-detail-dialog .ring-card,.case-detail-dialog .detail-placeholder[role=button]{transition:none}}

/* Whole-ring pointer perspective, separate from rotateY carousel angle. */
.case-detail-dialog .detail-ring-camera{transform:translateZ(calc(var(--ring-radius) * -1)) rotateX(calc(-9deg + var(--orbit-pitch,0deg))) rotateY(var(--orbit-yaw,0deg));transition:transform .45s cubic-bezier(.2,.7,.25,1);will-change:transform}
.case-detail-dialog.aso-detail .detail-ring-camera{transform:translateZ(calc(var(--ring-radius) * -1)) rotateX(calc(-2deg + var(--orbit-pitch,0deg))) rotateY(var(--orbit-yaw,0deg))}
@media(prefers-reduced-motion:reduce){.case-detail-dialog .detail-ring-camera{transition:none}}