@import"https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow-x:hidden;background:#000;color:#f4f4f4;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif}.page-preview{width:100%;height:100dvh}.page-content{width:100%;height:100%;display:flex;align-items:stretch}.casestudy-app{flex:1;min-width:0;position:relative;overflow:hidden}.scene-canvas{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.design-panel{flex:0 0 350px;width:350px;padding:24px;background:#e5e5e5;color:#000;font-family:DM Sans,Helvetica Neue,Arial,sans-serif;overflow-y:auto}.dp-root{display:flex;flex-direction:column;gap:64px;align-items:flex-start;justify-content:center;width:100%}.dp-title{font-family:DM Sans,sans-serif;font-size:12px;line-height:1.2;letter-spacing:-.02em;color:#000;white-space:nowrap}.dp-title-strong{font-weight:600}.dp-title-regular{font-weight:400}.dp-randomise{appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:18px;width:302px;height:80px;padding:8.75px 32px;background:transparent;color:#000;border:.5px solid #000;border-radius:52.5px;font-family:DM Sans,sans-serif;font-size:24px;font-weight:400;letter-spacing:-.02em;line-height:1.2;cursor:pointer}.dp-randomise:hover,.dp-randomise:active{background:#000;color:#fff}.dp-randomise:focus-visible{outline:2px solid #000;outline-offset:2px}.dp-randomise-label{text-align:left;white-space:nowrap}.dp-randomise-icon{width:24px;height:24px;flex-shrink:0;padding-top:1px}.dp-granular{display:flex;flex-direction:column;gap:24px;width:100%}.dp-group{display:flex;flex-direction:column;gap:18px;width:302px}.dp-group label{font-family:DM Mono,monospace;font-size:10px;font-weight:400;line-height:1.2;color:#000;text-transform:uppercase}.dp-group select{appearance:none;-webkit-appearance:none;background:#f4f4f4;color:#161616;border:1px solid #c6c6c6;border-radius:0;padding:.5rem 2rem .5rem .75rem;font-family:DM Sans,sans-serif;font-size:.875rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.dp-group select:hover{background-color:#e8e8e8}.dp-slider-row{position:relative;width:100%;height:14px;display:flex;align-items:center}.dp-slider{-webkit-appearance:none;appearance:none;width:100%;height:14px;margin:0;background:transparent;border:none;outline:none;cursor:pointer;position:relative;z-index:2}.dp-slider-track{position:absolute;inset:0;border:.5px solid #000;border-radius:52.5px;pointer-events:none}.dp-slider-fill{position:absolute;left:0;top:0;bottom:0;width:var(--pct, 50%);background:#000;border-radius:52.5px;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;min-width:14px}.dp-slider-thumb{width:14px;height:14px;display:flex;align-items:center;justify-content:center;padding:4px}.dp-slider-thumb:after{content:"";display:block;width:6px;height:6px;background:#fff;border-radius:50%;opacity:0;transition:opacity .15s ease}.dp-slider-row:hover .dp-slider-thumb:after,.dp-slider-row:has(.dp-slider:active) .dp-slider-thumb:after{opacity:1}.dp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:transparent;cursor:pointer;border:none}.dp-slider::-moz-range-thumb{width:14px;height:14px;background:transparent;border:none;cursor:pointer}.dp-slider::-webkit-slider-runnable-track{height:14px;background:transparent;border:none}.dp-slider::-moz-range-track{height:14px;background:transparent;border:none}.dp-palette-group{gap:18px}.dp-swatches{display:flex;align-items:flex-start;justify-content:space-between;width:100%}.dp-swatch{position:relative;width:38px;height:38px;border-radius:50%;cursor:pointer;background-size:cover;background-position:center;border:none;transition:transform .15s ease;flex-shrink:0;overflow:hidden}.dp-swatch:after{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);border-radius:50%;background:#ffffff03;backdrop-filter:blur(4.5px);-webkit-backdrop-filter:blur(4.5px);filter:blur(1.85px);pointer-events:none}.dp-swatch:hover{transform:scale(1.05)}.dp-swatch.is-active{border:.5px solid #000}.dp-divider{width:100%;height:0;border-top:.5px solid #000}.dp-section{display:flex;flex-direction:column;gap:24px;align-items:center;justify-content:center;width:100%}.dp-section .dp-title{width:100%}.dp-shape{display:flex;flex-direction:column;gap:18px;align-items:flex-start;width:100%;margin-top:40px}.dp-shape-label{font-family:DM Mono,monospace;font-size:10px;font-weight:400;line-height:1.2;color:#000;text-transform:uppercase}.dp-wheel{position:relative;width:150px;height:150px;align-self:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.dp-wheel.is-dragging{cursor:grabbing}.dp-wheel-ring{position:absolute;inset:0;border:.5px solid #000;border-radius:50%;pointer-events:none}.dp-wheel-dot{position:absolute;width:5px;height:5px;padding:0;border:none;border-radius:50%;background:#8d8d8d;transform:translate(-50%,-50%);pointer-events:none;transition:width .15s ease,height .15s ease,background-color .15s ease}.dp-wheel-dot.is-active{width:10px;height:10px;background:#000}.dp-wheel-center{position:absolute;left:50%;top:50%;width:122px;height:122px;transform:translate(-50%,-50%);background:transparent;border:.5px solid black;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;padding:0}.dp-wheel-center:hover,.dp-wheel-center:active{background:#000;color:#fff}.dp-wheel-center:focus-visible{outline:2px solid #000;outline-offset:2px}.dp-wheel-center svg{width:24px;height:24px}.dp-shape-slider{display:none;position:relative;width:100%;height:14px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}.dp-shape-slider-track{position:absolute;inset:0;border:.5px solid #000;border-radius:90px;pointer-events:none}.dp-shape-slider-dots{position:absolute;inset:0 7px;pointer-events:none}.dp-shape-slider-dot{position:absolute;top:50%;width:5px;height:5px;border-radius:50%;background:#0000004d;transform:translate(-50%,-50%);transition:width .15s ease,height .15s ease,background-color .15s ease}.dp-shape-slider-dot.is-active{width:10px;height:10px;background:#000}@media(max-height:959px){.dp-root{gap:24px}.dp-shape{margin-top:0}}@media(max-height:799px){.dp-wheel{display:none}.dp-shape-slider{display:block}}