/* The full-viewport layer is position:fixed so it also covers the screen where the Fullscreen API is missing (iPhone Safari). */
.dpt [hidden]{display:none!important}
.dpt-legend{margin:8px 0;padding-left:20px}
.dpt-warning{margin:16px 0;padding:12px 16px;background:#fff3cd;border:2px solid #b45309;border-radius:12px}
.dpt-warning p{margin:0 0 8px}
.dpt-preview{display:block;max-width:100%;height:auto;margin:16px 0;background:#000;border-radius:8px}
.dpt-results{max-width:480px}
.dpt-results th,.dpt-results td{padding:4px 12px 4px 0}
.dpt-layer{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;margin:0;z-index:2147483000;background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
.dpt-layer.is-idle{cursor:none}
.dpt-layer[data-step=black]{background:#000}
.dpt-layer[data-step=white]{background:#fff}
.dpt-layer[data-step=red]{background:#f00}
.dpt-layer[data-step=green]{background:#0f0}
.dpt-layer[data-step=blue]{background:#00f}
.dpt-layer[data-step=grey]{background:#808080}
.dpt-layer[data-step=checkerboard]{background:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0 0/2px 2px}
.dpt-layer[data-mode=flasher]{background:#000}
.dpt-bar{position:absolute;top:0;left:0;right:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 12px;background:rgba(0,0,0,.75);color:#fff;font-size:.9rem;touch-action:auto}
.dpt-bar.is-idle{display:none}
.dpt-bar label{display:flex;flex-direction:row;align-items:center;gap:8px}
.dpt-bar button{min-height:44px;padding:8px 16px;margin-left:auto}
.dpt-flasher{position:absolute;left:calc(50% - 24px);top:calc(50% - 24px);width:48px;height:48px;background:#f00;touch-action:none;cursor:grab}
@media(max-width:600px){.dpt-results{max-width:none}}