.play-page{--play:#c6b5ff}.play-page .active,.eyebrow{color:var(--play)}.play-main{display:block;width:100%;max-width:1100px;margin:auto;padding:65px 32px}.play-hero{padding-bottom:85px}.eyebrow{font-size:12px;margin:0 0 25px}.play-hero h1{display:block;white-space:normal;font-size:clamp(44px,7.8vw,90px);font-weight:500;letter-spacing:-.06em;line-height:1.06;margin:0 0 35px}.play-hero h1 span{color:var(--play)}.play-hero>p:last-child{max-width:560px;font-size:18px;line-height:1.8;color:#b9b9c2}h2{font-size:32px;letter-spacing:-.04em;font-weight:500;margin:0 0 20px}h3{font-size:20px;font-weight:500;letter-spacing:-.03em;margin:18px 0 8px}.section-copy{max-width:650px;color:#b9b9c2;line-height:1.9;font-size:15px;margin-bottom:35px}.book-grid,.model-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 32px}.book-cover{display:block;border:0;padding:0;width:100%;background:#1b1b20;aspect-ratio:4/3;overflow:hidden;cursor:pointer}.book-cover img{height:100%;max-width:100%;object-fit:contain;transition:transform .3s}.book-cover:hover img{transform:scale(1.025)}.book-copy{color:#b9b9c2;font-size:14px;line-height:1.8;max-width:410px}.prototype{font-size:11px;color:var(--play);margin:10px 0}.text-button{border:0;border-bottom:1px solid #706287;background:none;color:var(--play);padding:7px 0;font-size:13px}.digital{display:flex;justify-content:space-between;gap:35px;align-items:center;border-block:1px solid #303138;padding:42px 0;margin:75px 0}.digital p:not(.eyebrow){color:#b9b9c2;font-size:15px;line-height:1.8;max-width:430px}.pill{display:inline-flex;text-decoration:none;padding:16px 22px;border-radius:5px;color:#16131c;background:var(--play);font-size:13px;white-space:nowrap}.fold-section{margin-top:60px}.model-view{height:340px;position:relative;overflow:hidden;perspective:900px;background:radial-gradient(ellipse at 50% 65%,#24232a,transparent 70%);touch-action:pan-y;cursor:grab}.model-view:active{cursor:grabbing}.model-view:focus-visible{outline:2px solid var(--play);outline-offset:4px}.orbit{position:absolute;left:50%;top:55%;transform-style:preserve-3d;transform:rotateX(-15deg) rotateY(var(--angle,-28deg))}.building{position:relative;transform-style:preserve-3d;--w:160px;--h:200px;--d:95px;--roof:80px}.building.rathaus{--w:270px;--h:102px;--d:65px;--roof:55px}.face{position:absolute;background-size:100% 100%;backface-visibility:hidden;width:var(--w);height:var(--h);left:calc(var(--w)/-2);top:calc(var(--h)/-2);transform:translateZ(calc(var(--d)/2));background-color:#acb096}.face.back{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}.face.side,.face.side2{width:var(--d);left:calc(var(--d)/-2);transform:rotateY(90deg) translateZ(calc(var(--w)/2))}.face.side2{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}.roof{position:absolute;width:var(--w);height:var(--roof);left:calc(var(--w)/-2);top:calc(var(--h)/-2 - var(--roof)/2);background:repeating-linear-gradient(90deg,#343c40 0 8px,#41494d 8px 9px);transform-origin:50% 100%;transform:translateZ(calc(var(--d)/2)) rotateX(53deg);backface-visibility:visible}.roof.other{transform:translateZ(calc(var(--d)/-2)) rotateX(-53deg)}details{margin-top:40px;border-top:1px solid #303138;padding-top:24px}summary{cursor:pointer;color:var(--play);font-size:14px}.downloads{display:grid;gap:14px;margin-top:25px}.downloads a,footer a{color:#b9b9c2;font-size:13px;text-underline-offset:5px}footer{margin-top:80px}dialog{background:#111214;color:var(--text);border:1px solid #383640;border-radius:10px;padding:0;width:min(1000px,96vw);max-width:96vw;height:95dvh;max-height:95dvh}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#000c}.reader-head{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;gap:20px}.reader-head h2{font-size:18px;margin:0}.reader-head button,.reader-controls button{background:#25232d;color:var(--text);border:1px solid #494251;border-radius:4px;padding:11px 14px;font-size:12px}.reader-controls{display:flex;justify-content:center;align-items:center;gap:15px;padding:12px;flex-wrap:wrap}.reader-controls button:disabled{opacity:.35}.reader-controls span{font-size:12px;min-width:45px;text-align:center}.page-viewport{flex:1;min-height:0;overflow:auto;text-align:center;background:#1b1b1e;touch-action:pan-y pinch-zoom}.page-viewport img{height:100%;max-width:100%;object-fit:contain;display:block;margin:auto}.page-viewport.zoomed img{height:auto;width:150%;max-width:none}.page-viewport img.turn{animation:turn .22s ease-out}@keyframes turn{from{opacity:.5;transform:translateX(8px)}to{opacity:1;transform:none}}@media(max-width:700px){.play-main{padding:35px 22px}.play-hero{padding-bottom:48px}.play-hero>p:last-child{font-size:16px}.book-grid,.model-grid{grid-template-columns:1fr;gap:36px}.digital{flex-direction:column;align-items:flex-start;margin:50px 0;padding:30px 0}h2{font-size:27px}.model-view{height:300px}.header{height:auto;min-height:76px;flex-wrap:wrap;gap:5px;padding-top:15px;padding-bottom:15px}.header nav{gap:14px}.header-link{font-size:10px}.reader-head{padding:13px}.reader-head h2{font-size:14px}.reader-controls{gap:8px}.reader-controls button{padding:11px}.section-copy{font-size:14px}}@media(prefers-reduced-motion:reduce){.book-cover img,.page-viewport img.turn{animation:none;transition:none}}
.roof{top:calc(var(--h)/-2 - var(--roof));transform:translateZ(calc(var(--d)/2)) rotateX(34deg)}.roof.other{transform:translateZ(calc(var(--d)/-2)) rotateX(-34deg)}.tor .face.front,.tor .face.back{clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,31% 100%,69% 100%,69% 84%,67% 76%,62% 69%,55% 63%,50% 60%,45% 63%,38% 69%,33% 76%,31% 84%,31% 100%)}

.gable{position:absolute;width:var(--d);height:calc(var(--roof)*.829);left:calc(var(--d)/-2);top:calc(var(--h)/-2 - var(--roof)*.829);background:#394145;clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotateY(90deg) translateZ(calc(var(--w)/2));backface-visibility:hidden}.gable.other{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}

.apps-section{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}.apps-section h2{font-size:25px}.apps-section .prototype{margin:0 0 23px}@media(max-width:700px){.apps-section{grid-template-columns:1fr;gap:35px}}

.face img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}.model-view,.orbit,.building,.face,.roof,.gable{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.orbit{transform:translate3d(0,0,0) rotateX(-15deg) rotateY(var(--angle,-28deg));will-change:transform}.apps-section p.prototype{font-size:11px;color:var(--play);line-height:1.4;margin:0 0 22px}