#tiles3d-dialog{padding:0;border:0;background:transparent;color:#fff8e9;width:min(1300px,calc(100vw - 16px));height:96dvh;max-width:none;max-height:96dvh;overflow:hidden;font:14px system-ui,sans-serif}
#tiles3d-dialog[open]{display:flex;flex-direction:column}#tiles3d-dialog::backdrop{background:#100b08bf;backdrop-filter:blur(12px)}
#tiles3d-dialog header{padding:18px 55px 0 20px}#tiles3d-title{font-size:22px;font-weight:700;margin:0}#tiles3d-close{position:absolute;top:8px;right:12px;padding:5px 10px;font-size:30px;border:0;background:none;color:inherit;cursor:pointer}
#tiles3d-stage{flex:1;min-height:0;display:grid;place-items:center;perspective:1400px;overflow:hidden;touch-action:none;cursor:grab}#tiles3d-stage.is-dragging{cursor:grabbing}
#tiles3d-model{position:relative;width:var(--tile-size,300px);height:var(--tile-size,300px);transform-style:preserve-3d;pointer-events:none;user-select:none}
#tiles3d-model img{position:absolute;inset:0;width:100%;height:100%;max-width:none;backface-visibility:hidden;object-fit:fill}
.tiles3d-front{transform:translateZ(calc(var(--tile-thickness)/2));filter:brightness(var(--tile-front-light,.98))}
.tiles3d-back{transform:rotateY(180deg) translateZ(calc(var(--tile-thickness)/2));filter:brightness(var(--tile-back-light,.8))}
.tiles3d-edge{position:absolute;background:linear-gradient(#c3b79d,#8d7c60,#c3b79d);backface-visibility:hidden}
.tiles3d-top,.tiles3d-bottom{left:0;top:50%;width:100%;height:var(--tile-thickness)}
.tiles3d-top{transform:translateY(-50%) translateY(calc(var(--tile-size)/ -2)) rotateX(90deg)}
.tiles3d-bottom{transform:translateY(-50%) translateY(calc(var(--tile-size)/2)) rotateX(-90deg)}
.tiles3d-left,.tiles3d-right{left:50%;top:0;width:var(--tile-thickness);height:100%}
.tiles3d-left{transform:translateX(-50%) translateX(calc(var(--tile-size)/ -2)) rotateY(-90deg)}
.tiles3d-right{transform:translateX(-50%) translateX(calc(var(--tile-size)/2)) rotateY(90deg)}
.tiles3d-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:0 12px 10px;flex-shrink:0}
.tiles3d-controls button{background:#0004;border:1px solid #fff5;color:inherit;border-radius:9px;padding:10px 14px;font:600 13px system-ui;cursor:pointer}.tiles3d-controls button:hover,.tiles3d-controls button[aria-pressed=true]{background:#e9b52c;color:#302416}
#tiles3d-counter{min-width:90px;text-align:center}#tiles3d-status{font-size:12px;text-align:center;color:#fff8e9b3;margin:0;padding:0 12px 12px}#tiles3d-dialog :focus-visible{outline:3px solid #bc861e;outline-offset:3px}
.tiles3d-preview{height:270px;display:grid;place-items:center;perspective:900px;position:relative}
.tiles3d-preview::before{content:"";position:absolute;bottom:24px;left:15%;width:70%;height:35px;border-radius:50%;background:#0005;filter:blur(12px)}
.tiles3d-pile-preview{position:relative;width:155px;height:155px;transform-style:preserve-3d;transform:rotateX(-35deg) rotateY(-25deg)}
.tiles3d-pile-preview img{position:absolute;inset:0;width:100%;height:100%;max-width:none;box-shadow:0 1px 0 #dac9a8,0 3px 0 #938268;filter:brightness(.9)}
.tiles3d-piece{position:absolute;inset:0;transform-style:preserve-3d;transform:translateX(calc(var(--tile-size)*var(--pile-x))) translateY(calc(var(--tile-thickness)*var(--pile-level))) rotateX(90deg) rotateZ(var(--pile-angle))}
@media(max-width:480px){#tiles3d-title{font-size:18px}.tiles3d-controls{gap:5px}.tiles3d-controls button{padding:8px 10px}}
#tiles3d-model.is-single .tiles3d-piece{transform:none}
.tiles3d-coverflow{position:relative;height:330px;perspective:1100px;overflow:hidden;touch-action:pan-y}
.tiles3d-cover{position:absolute;left:50%;top:50%;width:220px;height:220px;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);transition:transform .7s cubic-bezier(.22,.65,.3,1),opacity .7s;cursor:grab;will-change:transform;backface-visibility:hidden}
.tiles3d-cover img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;border-radius:3px;box-shadow:0 1px 0 #bcac8e,0 8px 18px #0005}
.tiles3d-cover:focus-visible{outline:3px solid #e9b52c;outline-offset:7px}
.tiles3d-cover-controls{display:flex;align-items:center;justify-content:center;gap:16px;color:#fff8e9}
.tiles3d-cover-controls button{border:1px solid #fff5;background:#0004;border-radius:8px;padding:8px 14px;cursor:pointer}
.tiles3d-cover-controls button[aria-pressed=true]{background:#e9b52c;color:#302416}
@media(max-width:600px){.tiles3d-coverflow{height:270px}.tiles3d-cover{width:170px;height:170px}.tiles3d-cover-controls{gap:10px}}
@media(prefers-reduced-motion:reduce){.tiles3d-cover{transition:none}}