:root{--bg:#98beba;--fg:#152923;--case-h:58vh;--case-w:calc(var(--case-h)*.708);--origin-top:35vh;--case-ratio:.708}*{box-sizing:border-box}html{background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;scrollbar-width:none}html::-webkit-scrollbar{display:none}body{margin:0;transition:background-color .5s,color .5s;background:var(--bg);overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:34px 5.5vw;font-size:13px}.name{font-size:16px;letter-spacing:-.5px}.header nav{display:flex;gap:25px}.view-switch{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:5px;font-size:13px}.view-switch button{opacity:.4}.view-switch button[aria-pressed=true]{opacity:1}.view-switch button,.header a{padding:7px 0}main{min-height:100svh}.stage{position:fixed;inset:0;perspective:800px;perspective-origin:center 60%;touch-action:none;cursor:grab;user-select:none}.stage.dragging{cursor:grabbing}.cases{position:absolute;inset:0;transform-style:preserve-3d}.dvd{position:absolute;top:var(--origin-top);left:50%;width:var(--case-w);height:var(--case-h);text-align:left;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 12px 12px #18272342);border-radius:3%;background:none;user-select:none}.dvd:focus-visible{outline-offset:7px}.case-cover{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}.case-shell,.case-gloss{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.printed-cover{position:absolute;inset:4.4% 7% 4.5% 6%;overflow:hidden;background:#111614;display:flex;flex-direction:column;color:#f7f3e8}.cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cover-shade{position:absolute;inset:0;background:linear-gradient(#0b19132e,transparent 26%,#08130d0a 48%,#060b08e8)}.cover-top{position:relative;z-index:1;padding:8% 8% 0;font-size:clamp(7px,.6vw,11px);line-height:1.5;letter-spacing:.11em;max-width:85%;font-weight:700}.cover-type{position:relative;z-index:1;padding:10% 8% 9%;margin-top:auto}.cover-type b{display:block;font-size:clamp(22px,3.1vw,48px);font-weight:700;line-height:.9;letter-spacing:-.07em;text-transform:uppercase;margin-bottom:10%}.cover-type small{font-size:clamp(6px,.6vw,10px);line-height:1.4;display:block;max-width:85%}.cover-foot{position:relative;z-index:1;font-size:5px;padding:3% 8%;background:#e4e0d0;color:#151915;letter-spacing:.04em;display:flex;justify-content:space-between;line-height:1.4}.case-gloss{mix-blend-mode:screen;opacity:.3}.plastic-light{position:absolute;inset:3.5% 4.8% 3.7% 4.8%;background:linear-gradient(112deg,#ffffff30 0,#fff0 15%,#ffffff02 60%,#ffffff17 73%,#fff0 85%);box-shadow:inset 1px 0 2px #fff8,inset -1px 0 1px #fff2;border-radius:1%;pointer-events:none}.collection-caption{position:fixed;left:5.5vw;bottom:15vh;max-width:25vw;z-index:20;pointer-events:none}.collection-caption>div:first-child{transition:opacity .15s,transform .2s}.collection-caption.moving>div:first-child{opacity:.15;transform:translateY(5px)}.collection-caption span{font-size:10px;font-variant-numeric:tabular-nums}.collection-caption h1{font-size:clamp(25px,2.7vw,42px);line-height:1.03;letter-spacing:-1.4px;font-weight:400;margin:14px 0 10px}.collection-caption p{font-size:11px;line-height:1.6;margin:0;max-width:250px}.arrows{display:flex;gap:20px;margin-top:28px;pointer-events:auto}.arrows button{font-size:24px;min-width:30px;min-height:34px}footer{position:fixed;left:5.5vw;right:5.5vw;bottom:26px;display:flex;justify-content:space-between;align-items:end;z-index:20;font-size:10px;line-height:1.6;pointer-events:none}footer p{margin:0}footer a{pointer-events:auto;padding:8px 0}.demo-credit{font-size:8px;opacity:.6}.gesture-hint{font-size:10px}#loadStatus:not(:empty){position:fixed;left:5vw;bottom:10vh;z-index:55}dialog{position:fixed;inset:0;border:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;background:#e7e5df;color:#171b17;overflow:hidden}dialog::backdrop{background:#e7e5df}.detail-header{position:absolute;z-index:8;top:28px;left:5.5vw;right:5.5vw;display:flex;justify-content:space-between;align-items:center;gap:20px}.detail-header span{font-size:11px}.detail-header h2{font-size:25px;font-weight:400;letter-spacing:-.9px;margin:7px 0 0}.detail-header>button{display:flex;align-items:center;gap:26px;font-size:12px;padding:10px 0 10px 10px}.detail-header>button span{font-size:30px}.detail-stage{position:absolute;inset:110px 0 90px;perspective:1800px;display:flex;align-items:center;justify-content:center}.case-detail{width:min(78vw,calc((100dvh - 215px)*1.43),1100px);aspect-ratio:1.43;position:relative;transform:translateX(-24%);transition:transform 1s cubic-bezier(.2,.7,.15,1);filter:drop-shadow(0 16px 18px #0003);transform-style:preserve-3d}.interior{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;clip-path:inset(0 0 0 50%)}.detail-lid{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.26,.65,.18,1);z-index:3}.lid-front,.lid-inside{position:absolute;inset:0;backface-visibility:hidden;transform-style:preserve-3d}.lid-front{transform:translateZ(2px)}.lid-inside{transform:rotateY(180deg);background:url('https://r2.waltschmer-digital.de/df/7d3cb858090ec4d9-dvd-interior.webp') left center/200% 100% no-repeat}.booklet{position:absolute;left:13%;top:16%;right:10%;bottom:14%;background:#e5dfcc;box-shadow:1px 3px 4px #0007;color:#1b211b;padding:5.5%;font-size:9px;display:flex;flex-direction:column;transform:rotate(-.6deg)}.booklet>img{width:100%;height:43%;object-fit:cover;margin-bottom:12%}.booklet>span{font-size:clamp(5px,.55vw,9px);letter-spacing:.12em}.booklet h3{font-size:clamp(18px,2vw,33px);line-height:.95;letter-spacing:-.06em;margin:8% 0 5%}.booklet p{font-size:clamp(6px,.7vw,11px);line-height:1.5;margin:0}.booklet small{font-size:clamp(5px,.55vw,8px);margin-top:auto;line-height:1.6}.disc-target{position:absolute;z-index:2;left:56%;top:22%;width:38%;height:62%;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s .7s;pointer-events:none}.disc-target span{background:#eee9daa8;padding:12px 17px;border-radius:2px;font-size:12px;color:#171c18;box-shadow:0 2px 7px #0002;backdrop-filter:blur(3px)}.disc-target:hover span{background:#fffdf2}.case-open .detail-lid{transform:rotateY(-175deg)}.case-open .case-detail{transform:translateX(0)}.case-open .disc-target{opacity:1;pointer-events:auto}.detail-bottom{position:absolute;bottom:28px;left:5.5vw;right:5.5vw;display:flex;justify-content:space-between;gap:20px;font-size:10px;line-height:1.6;color:#555d50}.detail-bottom p{margin:0}.film-viewer{position:absolute;inset:0;z-index:20;background:#0a0b09;color:#eee;padding:26px 5.5vw;display:flex;flex-direction:column;gap:20px}.film-viewer[hidden]{display:none}.film-viewer>header{display:flex;justify-content:space-between;align-items:center;gap:30px;font-size:12px}.film-viewer>header button{padding:10px 0}.film-viewer>header span{font-size:11px;color:#b4b7ae}#fullFilm{width:100%;min-height:0;flex:1;object-fit:contain}.film-viewer>p{font-size:11px;min-height:16px;margin:0;color:#b4b7ae}.modal-open{overflow:hidden}.closing .detail-lid{transition-duration:.5s}.closing .case-detail{transition-duration:.5s}.closing .disc-target{opacity:0;transition:none;pointer-events:none}
body[data-view=grid]{overflow:auto}body[data-view=grid] .header{background:var(--bg)}body[data-view=grid] .stage{position:relative;perspective:none;height:auto;min-height:100svh;touch-action:pan-y;cursor:auto}body[data-view=grid] .cases{position:relative;inset:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:50px 38px;padding:130px 9vw 110px;transform-style:flat}body[data-view=grid] .dvd{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:.708;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;will-change:auto}body[data-view=grid] .collection-caption{display:none}body[data-view=grid] footer{position:relative;padding-bottom:26px;margin-top:-65px}body[data-view=grid] .gesture-hint{visibility:hidden}body[data-view=grid] .cover-type b{font-size:2.2vw}body[data-view=grid] .cover-top{font-size:.55vw}
@media(max-width:700px){:root{--case-h:48svh;--case-w:calc(var(--case-h)*.708);--origin-top:31svh}.header{padding:23px 6vw;font-size:11px}.name{font-size:14px}.header nav{gap:15px}.view-switch{top:66px;font-size:11px}.cover-top{font-size:7px}.cover-type b{font-size:30px}.cover-type small{font-size:7px}.cover-foot{font-size:4px}.collection-caption{left:6vw;right:6vw;bottom:87px;max-width:none;display:flex;justify-content:space-between;gap:15px;align-items:end}.collection-caption>div:first-child{max-width:68%}.collection-caption h1{font-size:22px;letter-spacing:-.7px;margin:8px 0 5px}.collection-caption p{font-size:9px}.collection-caption span{font-size:8px}.arrows{margin:0;gap:12px}.arrows button{font-size:22px}footer{left:6vw;right:6vw;bottom:17px;font-size:9px;gap:20px}.gesture-hint{font-size:8px}.demo-credit{position:absolute;left:0;bottom:-10px;font-size:6px}.detail-header{left:6vw;right:6vw;top:24px}.detail-header h2{font-size:21px}.detail-header span{font-size:9px}.detail-header>button{gap:15px}.detail-stage{inset:120px 0 100px}.case-detail{width:96vw}.detail-bottom{left:6vw;right:6vw;bottom:24px;font-size:8px;display:block}.detail-bottom p+p{margin-top:9px}.booklet h3{font-size:17px}.booklet p{font-size:6px}.booklet>span{font-size:4px}.booklet small{font-size:4px}.disc-target span{font-size:9px;padding:9px 10px}.film-viewer{padding:20px 5vw}.film-viewer>header{font-size:11px}.film-viewer>header span{max-width:50%;text-align:right;font-size:10px}body[data-view=grid] .cases{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;padding:117px 7vw 100px}body[data-view=grid] .cover-type b{font-size:22px}body[data-view=grid] .cover-top{font-size:5px}body[data-view=grid] .cover-type small{font-size:5px}body[data-view=grid] .cover-foot{font-size:3px}body[data-view=grid] .demo-credit{bottom:15px}}
@media(max-height:700px) and (min-width:701px){:root{--case-h:58vh;--origin-top:32vh}.header{padding-top:20px}.collection-caption{bottom:17vh}.detail-stage{inset:95px 0 70px}.case-detail{width:min(75vw,calc((100dvh - 175px)*1.43))}}
@media(max-width:700px) and (max-height:700px){:root{--case-h:44svh;--origin-top:29svh}.collection-caption{bottom:79px}.collection-caption h1{font-size:19px}.collection-caption p{font-size:8px}.cover-type b{font-size:25px}.detail-stage{inset:105px 0 100px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

body[data-view=grid] footer{width:89vw;right:auto}.model-canvas{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;touch-action:none}.has-model .model-canvas{visibility:visible}.has-model .case-detail{visibility:hidden}.has-model>.disc-target{transform:translate(-50%,-50%);z-index:5}.has-model>.disc-target span{background:#eae5d0cf}.has-model .model-loading{display:none}@media(max-width:700px){body[data-view=grid] footer{width:88vw}}

body[data-view=grid] .stage{isolation:isolate;z-index:0}body[data-view=grid] .dvd{z-index:auto!important}

/* A case leaves its actual shelf position before the hinge opens. */
.dvd{filter:none;will-change:transform,opacity}.collection-caption.moving>div:first-child{opacity:.5;transform:none}
#caseDialog{background:rgba(231,229,223,0);transition:background-color .7s cubic-bezier(.22,.7,.2,1)}
#caseDialog::backdrop{background:transparent}
#caseDialog.backdrop-in{background:rgba(231,229,223,1)}
.case-flight{position:fixed;left:0;top:0;z-index:12;transform-origin:0 0;pointer-events:none;will-change:transform,opacity;filter:none}
.detail-header,.detail-bottom{transition:opacity .35s,transform .5s}
.flying-in .detail-header,.flying-in .detail-bottom,.flying-out .detail-header,.flying-out .detail-bottom{opacity:0;pointer-events:none;transform:translateY(8px)}
.flying-in .case-detail,.flying-out .case-detail{visibility:hidden}
.flying-out .model-canvas,.flying-out .disc-target{visibility:hidden}

.case-loading{position:absolute;left:0;right:0;bottom:35px;text-align:center;font-size:11px;color:#363b30;z-index:14}.case-loading:empty{display:none}

/* Covers keep their own typography when shelf, grid and flight sizes differ. */
.case-cover{container-type:inline-size}
body[data-view=grid] .cover-type b{font-size:var(--cover-title-size,12.5cqw);overflow-wrap:anywhere}
@media(max-width:1000px){
.cover-type b,body[data-view=grid] .cover-type b{font-size:var(--cover-title-size,12.5cqw);overflow-wrap:anywhere;letter-spacing:-.055em;line-height:.94}
.cover-top,body[data-view=grid] .cover-top{font-size:2.5cqw;overflow-wrap:anywhere}
.cover-type small,body[data-view=grid] .cover-type small{font-size:2.5cqw}
.cover-foot,body[data-view=grid] .cover-foot{font-size:1.55cqw;gap:8px}
}
.hint-mobile{display:none}

@media(max-width:1000px){
 body[data-view=shelf]{height:100svh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;overflow:hidden}
 .header{position:relative;display:grid;grid-template-columns:1fr auto;gap:0 16px;padding:max(8px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-left)) 0;font-size:12px;background:var(--bg)}
 .name{font-size:16px;grid-column:1;grid-row:1}
 .header nav{grid-column:2;grid-row:1;gap:18px}
 .header a{min-height:44px;display:flex;align-items:center}
 .view-switch{position:static;grid-column:1/-1;grid-row:2;justify-self:center;transform:none;align-items:center;gap:8px;font-size:12px}
 .view-switch button{min-width:44px;min-height:40px}
 main{position:relative;min-height:0;container-type:size}
 .stage{position:absolute;inset:0;overflow:clip;perspective-origin:center 60%}
 .dvd{--case-h:min(calc(100cqh - 64px),calc((100vw - 56px)/.708));--case-w:calc(var(--case-h)*.708);--origin-top:calc(100% - var(--case-h) - 12px)}
 .collection-caption{height:112px;position:relative;left:auto;right:auto;bottom:auto;max-width:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 8px;background:var(--bg)}
 .collection-caption>div:first-child{min-width:0;max-width:calc(100% - 108px)}
 .collection-caption span{font-size:10px}
 .collection-caption h1{font-size:25px;line-height:1.05;letter-spacing:-.8px;margin:6px 0 5px;overflow-wrap:anywhere}
 .collection-caption p{font-size:11px;line-height:1.3}
 .arrows{margin:0;gap:8px;flex-shrink:0}
 .arrows button{width:44px;height:44px;font-size:26px}
 footer{position:relative;left:auto;right:auto;bottom:auto;display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:0 20px max(12px,env(safe-area-inset-bottom));align-items:center;background:var(--bg);font-size:11px}
 .gesture-hint{font-size:10px;line-height:1.4}
 .hint-desktop{display:none}.hint-mobile{display:inline}
 footer>a{min-height:44px;display:flex;align-items:center;justify-self:end;grid-column:2;grid-row:1}
 .demo-credit{position:static;grid-column:1/-1;grid-row:2;font-size:9px;line-height:1.35;opacity:.65}
 body[data-view=grid]{display:block;height:auto;min-height:100svh;overflow:auto}
 body[data-view=grid] .header{position:sticky;top:0;padding-bottom:4px}
 body[data-view=grid] main{container-type:normal}
 body[data-view=grid] .stage{position:relative;inset:auto;overflow:visible;min-height:0}
 body[data-view=grid] .cases{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;padding:22px 20px 32px}
 body[data-view=grid] footer{width:auto;margin:0;padding:0 20px max(12px,env(safe-area-inset-bottom))}
 body[data-view=grid] .gesture-hint{display:none}
 body[data-view=grid] .demo-credit{position:static;grid-row:2}
 #caseDialog{display:none}
 #caseDialog[open]{display:flex;flex-direction:column;justify-content:center;padding:max(24px,env(safe-area-inset-top)) 0 max(24px,env(safe-area-inset-bottom))}
 .detail-header{position:relative;top:auto;left:auto;right:auto;margin:0 20px 18px;gap:16px;align-items:flex-start}
 .detail-header>div{min-width:0}
 .detail-header h2{font-size:26px;line-height:1.06;letter-spacing:-.8px;overflow-wrap:anywhere}
 .detail-header span{font-size:11px}
 .detail-header>button{gap:12px;min-width:72px;min-height:44px;flex-shrink:0;padding:0;justify-content:flex-end}
 .detail-stage{position:relative;inset:auto;flex:none;width:100%;height:min(100vw,calc(100dvh - 220px));min-height:180px}
 .case-detail{width:94vw}
 .disc-target span{font-size:12px;padding:12px 14px}
 .detail-bottom{position:relative;bottom:auto;left:auto;right:auto;margin:20px 20px 0;display:block;font-size:11px;line-height:1.4}
 .detail-bottom p+p{margin-top:6px;font-size:10px}
 .film-viewer{padding:max(12px,env(safe-area-inset-top)) 20px max(12px,env(safe-area-inset-bottom));gap:12px}
 .film-viewer>header{gap:20px;flex-shrink:0}
 .film-viewer>header button{min-height:44px;font-size:12px}
 .film-viewer>header span{font-size:11px;max-width:50%;text-align:right}
 .case-loading{bottom:max(24px,env(safe-area-inset-bottom));font-size:12px}
}
@media(max-width:380px){
 .detail-header h2{font-size:24px}
 .header{gap:0 10px}.header nav{gap:12px}.name{font-size:15px}
 .collection-caption h1{font-size:22px}
 .collection-caption{padding-top:10px}
 .demo-credit{font-size:8px}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 body[data-view=shelf]{grid-template-rows:60px minmax(0,1fr) 44px}
 .header{display:flex;justify-content:space-between;gap:16px;padding:0 max(24px,env(safe-area-inset-left))}
 .view-switch{position:absolute;left:50%;top:10px;transform:translateX(-50%)}
 main{grid-row:2}
 body[data-view=shelf] .stage{left:32%;right:10%}
 .dvd{--case-h:calc(100cqh - 40px);--origin-top:28px}
 .collection-caption{height:auto;position:absolute;left:max(24px,env(safe-area-inset-left));top:50%;bottom:auto;right:auto;transform:translateY(-45%);padding:0;display:block;width:26vw}
 .collection-caption>div:first-child{max-width:100%}
 .collection-caption h1{font-size:22px}.arrows{margin-top:8px}
 footer{grid-row:3;display:flex;justify-content:space-between;padding:0 max(24px,env(safe-area-inset-left));min-height:44px}
 .demo-credit{font-size:8px;max-width:40%;text-align:center}
 #caseDialog[open]{display:block;padding:0}
 .detail-header{position:absolute;top:10px;left:24px;right:24px;margin:0;align-items:center}
 .detail-header h2{font-size:20px;margin-top:3px}
 .detail-stage{position:absolute;inset:68px 0 48px;width:auto;height:auto;min-height:0}
 .detail-bottom{position:absolute;bottom:12px;left:24px;right:24px;margin:0;display:flex;align-items:center}
 .detail-bottom p+p{margin:0;font-size:9px}
 body[data-view=grid] .header{min-height:60px}
 body[data-view=grid] .cases{grid-template-columns:repeat(3,minmax(0,1fr));padding:20px 7vw 32px}
}