diy-roller-examples{display:block;max-width:1200px;margin:16px auto 24px;padding:0 20px;font-family:inherit}diy-roller-examples *{box-sizing:border-box}.dre-heading{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}.dre-heading h2{font-size:18px;margin:0}.dre-heading span{font-size:13px;color:#626262}.dre-strip{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 9px;scrollbar-width:thin}.dre-thumb{position:relative;flex:0 0 64px;width:64px;height:84px;border:1px solid #c9c9c9;border-radius:8px;padding:0;overflow:hidden;background:#eee;cursor:pointer}.dre-thumb:hover,.dre-thumb:focus-visible{outline:2px solid #bf4a24;outline-offset:2px}.dre-thumb img{width:100%;height:100%;object-fit:cover}.dre-play{position:absolute;bottom:4px;right:4px;color:white;background:#191919d9;border-radius:20px;width:24px;height:24px;display:grid;place-items:center;font-size:13px}.dre-dialog{border:0;border-radius:12px;padding:12px;background:#fafafa;max-width:calc(100vw - 20px);width:min(860px,96vw);max-height:96dvh;color:#191919}.dre-dialog::backdrop{background:#000b}.dre-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 8px}.dre-title{margin:0;font-size:16px;line-height:1.3}.dre-close,.dre-nav button{border:1px solid #ccc;background:white;border-radius:6px;min-width:44px;min-height:44px;cursor:pointer;color:#191919;font-size:16px}.dre-stage{display:flex;justify-content:center;align-items:center;background:#111;border-radius:6px;min-height:180px}.dre-figure{position:relative;margin:0;max-width:100%;line-height:0}.dre-photo,.dre-video{display:block;max-width:100%;max-height:calc(96dvh - 156px);width:auto;height:auto;margin:auto}.dre-label{position:absolute;top:3%;left:0;width:100%;height:auto;pointer-events:none}.dre-label:nth-of-type(3){top:auto;bottom:4%}.dre-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}.dre-count{font-size:14px}.dre-nav button{padding:8px 16px}.dre-dialog button:focus-visible{outline:3px solid #bf4a24;outline-offset:2px}@media(max-width:600px){diy-roller-examples{padding:0 16px;margin:12px auto 16px}.dre-heading{display:block}.dre-heading h2{font-size:16px}.dre-thumb{flex-basis:52px;width:52px;height:68px}.dre-heading span{font-size:12px}.dre-dialog{padding:8px}.dre-photo,.dre-video{max-height:calc(96dvh - 150px)}}