.dpt{--dpt-accent:#3d8bff;--dpt-accent-2:#22d3ee;--dpt-warn:#ff9f1c;--dpt-ink:#10162b;--dpt-muted:#5b6275;--dpt-line:#e4e7ef;margin:18px auto 24px;padding:0;max-width:1080px;border-radius:28px;background:#fff;border:1px solid var(--dpt-line);box-shadow:0 30px 60px -32px rgb(16 22 43 / 45%);overflow:hidden;text-align:left;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--dpt-ink)}.dpt *,.dpt ::after,.dpt ::before{box-sizing:border-box}.dpt button,.dpt input,.dpt select{font:inherit}.dpt svg{display:block}.dpt [hidden]{display:none!important}.dpt kbd{font:600 .7rem/1 system-ui,sans-serif;padding:3px 6px;border-radius:6px;background:rgb(255 255 255 / 14%);border:1px solid rgb(255 255 255 / 22%);color:inherit}.dpt-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.dpt-p--black{background:#000}.dpt-p--white{background:#fff}.dpt-p--red{background:red}.dpt-p--green{background:#0f0}.dpt-p--blue{background:#00f}.dpt-p--cyan{background:#0ff}.dpt-p--magenta{background:#f0f}.dpt-p--yellow{background:#ff0}.dpt-p--grey{background:grey}.dpt-p--gradient{background:linear-gradient(90deg,#000,#fff) top/100% 50% no-repeat,linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red) bottom/100% 50% no-repeat}.dpt-p--grid{background-color:#000;background-image:repeating-linear-gradient(90deg,rgb(255 255 255 / 85%) 0 1px,transparent 1px 8px),repeating-linear-gradient(0deg,rgb(255 255 255 / 85%) 0 1px,transparent 1px 8px)}.dpt-p--checker{background:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0 0/4px 4px}.dpt-topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 22px;background:linear-gradient(180deg,#151b33,#10162b);color:#cdd5ee}.dpt-detected{display:flex;align-items:center;gap:8px;margin:0;font-size:.9rem;font-weight:500}.dpt-detected svg{width:18px;height:18px;flex:none;color:var(--dpt-accent-2)}.dpt-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:rgb(255 255 255 / 8%);font-size:.78rem;font-weight:600;color:#dfe5f7}.dpt-chip i{width:8px;height:8px;border-radius:50%;background:#34f5a6;box-shadow:0 0 8px #34f5a6}.dpt-chip.is-fallback i{background:#ffb547;box-shadow:0 0 8px #ffb547}.dpt-stage{display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(28px,4vw,48px) clamp(14px,4vw,44px) clamp(24px,3vw,34px);background:radial-gradient(55% 70% at 50% 45%,rgb(61 139 255 / 24%),transparent 70%),linear-gradient(180deg,#10162b 0,#1a2142 100%)}.dpt-device{width:min(100%,640px)}.dpt-monitor{display:flex;flex-direction:column;align-items:center}.dpt-bezel{width:100%;padding:12px;border-radius:18px;background:linear-gradient(160deg,#2a3150,#0c0f1c);box-shadow:0 30px 50px -24px rgb(0 0 0 / 70%),inset 0 0 0 1px rgb(255 255 255 / 8%)}.dpt-preview{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:background .6s ease}.dpt-preview::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgb(255 255 255 / 7%) 0 18%,transparent 40%)}.dpt[data-device=phone] .dpt-start{padding:0 16px;font-size:.88rem;white-space:nowrap}.dpt[data-device=phone] .dpt-start svg{width:18px;height:18px}.dpt-neck{width:70px;height:46px;background:linear-gradient(90deg,#1b2038,#3a4163,#1b2038);clip-path:polygon(22% 0,78% 0,88% 100%,12% 100%)}.dpt-foot{width:210px;height:12px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#3a4163,#151b33);box-shadow:0 16px 22px -8px rgb(0 0 0 / 70%)}.dpt[data-device=phone] .dpt-device{width:min(62%,260px)}.dpt[data-device=phone] .dpt-bezel{border-radius:34px;padding:10px}.dpt[data-device=phone] .dpt-preview{aspect-ratio:9/17;border-radius:26px;padding:14px}.dpt[data-device=phone] .dpt-foot,.dpt[data-device=phone] .dpt-neck{display:none}.dpt[data-device=tablet] .dpt-device{width:min(100%,480px)}.dpt[data-device=tablet] .dpt-bezel{border-radius:28px;padding:16px}.dpt[data-device=tablet] .dpt-preview{aspect-ratio:4/3;border-radius:10px}.dpt[data-device=tablet] .dpt-foot,.dpt[data-device=tablet] .dpt-neck{display:none}.dpt-start{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 26px;border:0;border-radius:999px;cursor:pointer;color:#fff;font-weight:700;font-size:1.05rem;background:radial-gradient(circle at 30% 20%,#6aa9ff,var(--dpt-accent) 55%,#2254c9);box-shadow:0 16px 34px -10px rgb(61 139 255 / 75%),inset 0 -3px 8px rgb(0 0 0 / 22%),inset 0 2px 6px rgb(255 255 255 / 25%);transition:transform .15s ease}.dpt-start svg{width:22px;height:22px}.dpt-start:hover{transform:translateY(-2px) scale(1.03)}.dpt-start:active{transform:scale(.97)}.dpt-start:focus-visible{outline:3px solid #fff;outline-offset:4px}.dpt-start-ring{position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgb(106 169 255 / 60%);animation:dpt-pulse 2.2s ease-out infinite}@keyframes dpt-pulse{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.18)}}.dpt-preview-caption{position:relative;z-index:1;max-width:90%;padding:5px 12px;border-radius:999px;background:rgb(16 22 43 / 72%);color:#dfe5f7;font-size:.76rem;font-weight:600;text-align:center}.dpt-swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:700px}.dpt-swatch{position:relative;width:44px;height:44px;border-radius:12px;cursor:pointer;padding:0;border:2px solid rgb(255 255 255 / 22%);box-shadow:0 8px 16px -8px rgb(0 0 0 / 70%);transition:transform .12s ease,border-color .15s ease}.dpt-swatch:hover{transform:translateY(-3px) scale(1.06);border-color:rgb(255 255 255 / 70%)}.dpt-swatch:focus-visible{outline:3px solid var(--dpt-accent-2);outline-offset:3px}.dpt-swatch.is-current{border-color:var(--dpt-accent-2);box-shadow:0 0 0 3px rgb(34 211 238 / 35%)}.dpt-panel{padding:22px clamp(16px,4vw,36px) 26px}.dpt-options{display:flex;flex-wrap:wrap;gap:16px 36px}.dpt-group{display:flex;flex-direction:column;gap:8px}.dpt-group-label{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dpt-muted)}.dpt-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.dpt-row-note{font-size:.85rem;color:var(--dpt-muted)}.dpt-switch{position:relative;flex:none;width:52px;height:30px;padding:0;border:0;border-radius:999px;cursor:pointer;background:#d5dae6;transition:background-color .2s ease}.dpt-switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgb(16 22 43 / 30%);transition:transform .2s ease}.dpt-switch[aria-checked=true]{background:linear-gradient(90deg,var(--dpt-accent-2),var(--dpt-accent))}.dpt-switch[aria-checked=true] i{transform:translateX(22px)}.dpt-segmented{display:inline-flex;padding:4px;gap:4px;border-radius:14px;background:#f1f3f8;border:1px solid var(--dpt-line)}.dpt-segmented button{min-height:36px;padding:0 14px;border:0;border-radius:10px;cursor:pointer;background:0 0;color:var(--dpt-muted);font-weight:600}.dpt-segmented button[aria-checked=true]{background:#fff;color:var(--dpt-ink);box-shadow:0 1px 2px rgb(16 22 43 / 10%),0 6px 14px -8px rgb(16 22 43 / 35%)}.dpt-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}.dpt-tool{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:16px 18px;border-radius:18px;background:#f6f8fc;border:1px solid var(--dpt-line)}.dpt-tool h3{display:flex;align-items:center;gap:8px;margin:0;font-size:1rem;font-weight:700}.dpt-tool p{margin:0;font-size:.88rem;color:#454d63;line-height:1.5}.dpt-tool .dpt-fine{font-size:.78rem;color:#7c8397}.dpt-tool-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e6efff;color:var(--dpt-accent)}.dpt-tool-icon svg{width:22px;height:22px}.dpt-tool--warn .dpt-tool-icon{background:#fff1dc;color:#c46a00}.dpt-count{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:var(--dpt-ink);color:#fff;font-size:.72rem}.dpt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:12px;cursor:pointer;border:1px solid var(--dpt-line);background:#fff;color:var(--dpt-ink);font-weight:600;transition:transform .12s ease,background-color .15s ease,opacity .15s ease}.dpt-btn:hover{background:#f4f7ff}.dpt-btn:active{transform:scale(.96)}.dpt-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.dpt-btn--warn{border:0;color:#1d1200;background:linear-gradient(135deg,#ffc15e,var(--dpt-warn))}.dpt-btn--warn:hover{background:linear-gradient(135deg,#ffcb75,#ffab3a)}.dpt-btn--dark{background:rgb(255 255 255 / 10%);border-color:rgb(255 255 255 / 22%);color:#fff}.dpt-btn--dark:hover{background:rgb(255 255 255 / 18%)}.dpt button:focus-visible,.dpt input:focus-visible,.dpt select:focus-visible{outline:3px solid var(--dpt-accent);outline-offset:2px}.dpt-link{padding:0;border:0;background:0 0;color:#c23a4b;font-size:.82rem;font-weight:600;cursor:pointer;text-decoration:underline}.dpt-marks{width:100%;margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px;max-height:190px;overflow:auto}.dpt-marks:empty{display:none}.dpt-marks li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:#fff;border:1px solid var(--dpt-line);font-size:.8rem}.dpt-marks li b{font-variant-numeric:tabular-nums}.dpt-marks li span{flex:1;min-width:0;color:#5b6275}.dpt-marks li button{flex:none;min-height:28px;padding:0 8px;border-radius:8px;border:1px solid var(--dpt-line);background:#fff;cursor:pointer;font-size:.74rem;font-weight:600}.dpt-marks li button:hover{background:#f4f7ff}.dpt-status{margin:18px 0 0;padding:12px 16px;border-radius:14px;background:#f4f7ff;border:1px solid #dce6fb;font-weight:600;color:#1d3a7a}.dpt-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin-top:14px}.dpt-guide div{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:#454d63;line-height:1.45}.dpt-dot{flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;background:#fff;border:1px solid var(--dpt-line);position:relative}.dpt-dot::after{content:"";position:absolute;left:8px;top:8px;width:5px;height:5px}.dpt-dot--dead::after{background:#000}.dpt-dot--stuck{background:#000}.dpt-dot--stuck::after{background:#0f0;box-shadow:0 0 4px #0f0}.dpt-dot--dust::after{width:9px;height:7px;left:6px;top:7px;border-radius:50%;background:rgb(120 110 100 / 55%);filter:blur(1px)}.dpt-flash,.dpt-test{position:fixed;inset:0;z-index:2147483000;width:100vw;height:100vh;margin:0;background:#000;color:#fff;overflow:hidden;outline:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}.dpt-flash:fullscreen,.dpt-test:fullscreen{width:100%;height:100%}html.dpt-lock,html.dpt-lock body{overflow:hidden!important}.dpt-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}.dpt-test.is-idle{cursor:none}.dpt-test.is-mark{cursor:crosshair}.dpt-test.is-loupe{cursor:none}.dpt-hud,.dpt-toolbar{position:absolute;left:50%;transform:translateX(-50%);background:rgb(16 22 43 / 82%);border:1px solid rgb(255 255 255 / 16%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 30px -12px rgb(0 0 0 / 70%);transition:opacity .35s ease,transform .35s ease}.dpt-hud{top:14px;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:calc(100% - 28px);padding:10px 18px 12px;border-radius:18px;text-align:center;pointer-events:none}.dpt-hud-name{font-size:1rem;font-weight:700}.dpt-hud-name b{font-variant-numeric:tabular-nums;color:var(--dpt-accent-2);margin-right:6px}.dpt-hud-tip{font-size:.8rem;color:#cdd5ee}.dpt-hud-progress{display:block;width:100%;height:3px;margin-top:4px;border-radius:999px;background:rgb(255 255 255 / 12%);overflow:hidden}.dpt-hud-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--dpt-accent-2),var(--dpt-accent))}.dpt-test:not(.is-auto) .dpt-hud-progress{display:none}.dpt-toolbar{bottom:16px;display:flex;align-items:center;gap:4px;padding:6px;border-radius:16px;max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:center}.dpt-toolbar button{display:inline-flex;align-items:center;gap:6px;min-height:42px;min-width:42px;justify-content:center;padding:0 12px;border:0;border-radius:11px;cursor:pointer;background:0 0;color:#dfe5f7;font-weight:600;font-size:.86rem}.dpt-toolbar button svg{width:20px;height:20px}.dpt-toolbar button:hover{background:rgb(255 255 255 / 12%);color:#fff}.dpt-toolbar button[aria-pressed=true]{background:#fff;color:var(--dpt-ink)}.dpt-toolbar button:focus-visible{outline:3px solid var(--dpt-accent-2);outline-offset:1px}.dpt-toolbar .dpt-exit{background:rgb(255 95 109 / 20%);color:#ffd6da}.dpt-toolbar .dpt-exit:hover{background:rgb(255 95 109 / 35%)}.dpt-sep{width:1px;height:24px;margin:0 4px;background:rgb(255 255 255 / 16%)}.dpt-test.is-idle .dpt-hud{opacity:0;transform:translate(-50%,-10px)}.dpt-test.is-idle .dpt-toolbar{opacity:0;transform:translate(-50%,10px);pointer-events:none}.dpt-test.no-hints .dpt-hud{display:none}.dpt-mark-layer{position:absolute;inset:0;pointer-events:none;transition:opacity .35s ease}.dpt-test.is-idle:not(.is-mark) .dpt-mark-layer{opacity:0}.dpt-mark-ring{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #ff3df2;box-shadow:0 0 0 2px rgb(0 0 0 / 55%),inset 0 0 0 2px rgb(255 255 255 / 55%)}.dpt-mark-ring span{position:absolute;left:22px;top:-14px;padding:1px 6px;border-radius:999px;background:#ff3df2;color:#1a0019;font:700 .68rem/1.4 system-ui,sans-serif}.dpt-mark-ring.is-new{animation:dpt-mark .5s ease}@keyframes dpt-mark{0%{transform:scale(2.4);opacity:0}100%{transform:scale(1);opacity:1}}.dpt-loupe{position:absolute;left:0;top:0;width:170px;height:170px;pointer-events:none;border-radius:50%;overflow:visible}.dpt-loupe canvas{display:block;width:170px;height:170px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #000,0 14px 30px rgb(0 0 0 / 60%);background:#000}.dpt-loupe-info{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;padding:3px 10px;border-radius:999px;background:rgb(16 22 43 / 88%);border:1px solid rgb(255 255 255 / 20%);font:600 .74rem/1.4 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#fff}.dpt-flash-square{position:absolute;left:0;top:0;width:60px;height:60px;cursor:move;background:#555;outline:2px dashed rgb(255 255 255 / 75%);outline-offset:4px}.dpt-flash-square[data-flashing=true]{outline-color:rgb(255 255 255 / 25%)}.dpt-flash-square:focus-visible{outline:3px solid var(--dpt-accent-2)}.dpt-flash-bar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(880px,calc(100% - 20px));padding:12px 14px;border-radius:18px;background:rgb(16 22 43 / 90%);border:1px solid rgb(255 255 255 / 16%)}.dpt-flash-help{margin:0 0 8px;font-size:.86rem;color:#cdd5ee;text-align:center}.dpt-flash-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px}.dpt-flash-field{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:.84rem;font-weight:600;color:#dfe5f7}.dpt-flash-field input[type=range]{width:130px;accent-color:var(--dpt-accent-2)}.dpt-flash-field output{min-width:48px;font-variant-numeric:tabular-nums}.dpt-flash-field select{min-height:38px;padding:0 8px;border-radius:10px;border:1px solid rgb(255 255 255 / 25%);background:#1a2142;color:#fff}.dpt-flash-timer{min-width:56px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--dpt-accent-2);text-align:center}.dpt-flash-timer:empty{display:none}.dpt-confirm{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgb(0 0 0 / 70%)}.dpt-confirm-card{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px 22px 18px;border-radius:22px;background:#fff;color:var(--dpt-ink);box-shadow:0 30px 60px rgb(0 0 0 / 50%);border-top:6px solid var(--dpt-warn)}.dpt-confirm-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#fff1dc;color:#c46a00}.dpt-confirm-icon svg{width:26px;height:26px}.dpt-confirm-card h3{margin:12px 0 8px;font-size:1.2rem;font-weight:800}.dpt-confirm-card p{margin:0 0 10px;font-size:.9rem;line-height:1.55;color:#454d63}.dpt-confirm-honest{padding:10px 12px;border-radius:12px;background:#f4f7ff;border:1px solid #dce6fb}.dpt-confirm-motion{color:#9a4a00!important;font-weight:600}.dpt-confirm-check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 14px;font-size:.9rem;font-weight:600;cursor:pointer}.dpt-confirm-check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--dpt-warn)}.dpt-confirm-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}@media (max-width:900px){.dpt-swatches{gap:8px}.dpt-swatch{width:42px;height:42px}.dpt-tools{grid-template-columns:1fr 1fr}.dpt-tool--warn{grid-column:1/-1}.dpt-guide{grid-template-columns:1fr}}@media (max-width:575.98px){.dpt{border-radius:22px;margin-inline:-4px}.dpt-topbar{padding:12px 14px}.dpt-tools{grid-template-columns:1fr}.dpt-start{min-height:48px;padding:0 18px;font-size:.95rem}.dpt-preview-caption{font-size:.68rem}.dpt-swatch{width:40px;height:40px}.dpt-toolbar{flex-wrap:nowrap;gap:2px}.dpt-toolbar button{padding:0 8px}.dpt-sep{display:none}.dpt-toolbar button span{display:none}.dpt-toolbar button kbd{display:none}.dpt-toolbar .dpt-exit span{display:inline}.dpt-hud-tip{font-size:.74rem}}@media (max-width:575.98px) and (orientation:portrait){.dpt[data-device=computer] .dpt-start span{font-size:.9rem}}@media (pointer:coarse){.dpt-btn,.dpt-marks li button,.dpt-segmented button,.dpt-toolbar button{min-height:44px}.dpt-swatch{width:44px;height:44px}}@media (prefers-reduced-motion:reduce){.dpt *,.dpt ::after,.dpt ::before{animation:none!important;transition:none!important}}