.dv{--dial:460px;--core:250px}.dv__grid{grid-template-columns:var(--dial) minmax(0, 1fr);align-items:center;gap:clamp(32px,4.5vw,64px);display:grid}.dv__dial{width:var(--dial);height:var(--dial);position:relative}.dv__spoke{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.dv__track{fill:none;stroke:var(--line);stroke-width:1px}.dv__hand{transform:rotate(var(--a,0deg));transition:transform .7s var(--ease)}.dv__hand line{stroke:var(--signal);stroke-width:1.5px;stroke-linecap:round}.dv__dot{fill:var(--signal);opacity:0}.dv__dot.is-run{animation:dv-dot .62s var(--ease-io) both}@keyframes dv-dot{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}to{opacity:0;transform:translateY(58px)}}html:not(.js) .dv__hand{display:none}html:not(.js) .dv__grid{align-items:start}html:not(.js) .dv__hub{position:sticky;top:96px}html:not(.js) .dv__panel{scroll-margin-top:96px}.dv__core{width:var(--core);height:var(--core);margin:calc(var(--core) / -2) 0 0 calc(var(--core) / -2);background:var(--slate);color:var(--on-dark);box-shadow:0 0 0 10px var(--white), 0 0 0 11px var(--line);border-radius:50%;place-content:center;justify-items:center;gap:12px;display:grid;position:absolute;top:50%;left:50%}.dv__core b{letter-spacing:-.01em;font-size:17px;font-weight:600;font-stretch:102%}.dv__mods{gap:3px;display:grid}.dv__mods li{color:var(--on-dark-2);transition:color .35s var(--ease);align-items:center;gap:9px;font-size:13.5px;line-height:1.35;display:flex}.dv__mods i{width:8px;height:8px;box-shadow:inset 0 0 0 1px var(--slate-line);transition:background-color .35s, box-shadow .35s, transform .45s var(--ease);border-radius:2px;flex:none}.js .dv__mods li.is-on{color:var(--on-dark)}.js .dv__mods li.is-on i{background:var(--signal);box-shadow:none}.js .dv__mods li.is-hot{color:var(--signal)}.js .dv__mods li.is-hot i{background:var(--signal);transform:scale(1.25);box-shadow:0 0 0 3px #ff4e0147}.dv .dv__tab{z-index:1;--fill:var(--white);white-space:nowrap;color:var(--ink);cursor:pointer;transform:translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(-196px) rotate(calc(var(--i) * -60deg));border-radius:999px;padding:9px 16px;font-size:15px;font-weight:560;line-height:1.3;position:absolute;top:50%;left:50%}.dv .dv__tab:first-child{--i:0}.dv .dv__tab:nth-child(2){--i:1}.dv .dv__tab:nth-child(3){--i:2}.dv .dv__tab:nth-child(4){--i:3}.dv .dv__tab:nth-child(5){--i:4}.dv .dv__tab:nth-child(6){--i:5}.dv .dv__tab[aria-selected=true]{color:var(--on-dark)}.dv .dv__tab{transition:--btn-x 0s .3s,color .3s,background-color .3s,border-color .3s}.dv .dv__tab:hover{transition:--btn-x .45s var(--ease-io), color .3s, background-color .3s, border-color .3s}.dv__ctrl{justify-content:center;align-items:center;gap:16px;min-height:40px;margin-top:12px;display:flex}.dv__hint{color:var(--ink-3);font-size:14px}.dv__play{min-height:36px;color:var(--ink);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:0 14px 0 12px;font-size:14px;font-weight:540;display:inline-flex}.dv__play[hidden]{display:none}.dv__play svg{fill:none;width:14px;height:14px;stroke:var(--signal-ink);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.dv__play .dv__ico-play{fill:var(--signal-ink);stroke:none;display:none}.dv__play[data-state=stopped] .dv__ico-pause{display:none}.dv__play[data-state=stopped] .dv__ico-play{display:block}.dv__panels{gap:clamp(56px,7vw,88px);display:grid}.js .dv__panels{gap:0}.js .dv__panel{transition:opacity .2s var(--ease), visibility 0s .2s;grid-area:1/1}.js .dv__panel:not(.is-active){visibility:hidden;opacity:0}.js .dv__panel.is-active{transition:opacity .45s var(--ease) 80ms}.dv__panel h2{letter-spacing:-.025em;margin-bottom:18px;font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:600;font-stretch:102%;line-height:1.1}.dd .device__bar{height:42px}.dd .device__url{display:inline}.dd__state{align-items:center;display:inline-flex}.dd__count{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12.5px}.dd svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round}.dd .status svg{width:14px;height:14px}.dd__body{grid-template-columns:minmax(0,1fr) 16px minmax(0,1.2fr) 16px minmax(0,1fr);gap:10px;min-height:268px;padding:18px 18px 14px;display:grid}.dd__h{color:var(--ink-3);margin-bottom:10px;font-size:12px;font-weight:560}.dd__to{width:16px;height:16px;color:var(--signal-ink);transition:transform .4s var(--ease), color .3s;margin-top:52px}.dd__to.is-pass{color:var(--signal);transform:translate(3px)}.dd__in,.dd__res{background:var(--paper);border-radius:8px;padding:12px 13px;transition:background-color .3s;position:relative;overflow:hidden}.dd__kind{color:var(--ink-3);font-size:12px}.dd__title{font-variant-numeric:tabular-nums;margin-top:2px;font-size:15px;font-weight:600;font-stretch:101%;line-height:1.25}.dd__fields{gap:7px;margin-top:11px;display:grid}.dd__fields dt{color:var(--ink-3);font-size:12px}.dd__fields dd{font-variant-numeric:tabular-nums;background:linear-gradient(var(--signal-tint-line), var(--signal-tint-line)) no-repeat 0 100% / 100% 2px;transition:background-size .5s var(--ease);justify-self:start;font-size:13px;font-weight:500;line-height:1.35}.dd__in:after{content:"";background:var(--signal);opacity:0;height:1px;position:absolute;top:0;left:0;right:0}.dd__in.is-scan:after{animation:dd-scan .9s var(--ease-io) both}@keyframes dd-scan{0%{opacity:0;transform:translateY(0)}12%,88%{opacity:1}to{opacity:0;transform:translateY(150px)}}.dd__steps{gap:6px;display:grid}.dd__step{background:var(--paper);border-radius:6px;grid-template-columns:18px minmax(0,1fr);column-gap:9px;padding:8px 10px;transition:background-color .35s,box-shadow .35s;display:grid;box-shadow:inset 0 0 0 1px #0000}.dd__mark{background:var(--ok);width:18px;height:18px;color:var(--white);border-radius:50%;grid-row:span 2;place-items:center;margin-top:1px;transition:background-color .3s,box-shadow .3s;display:grid}.dd__mark svg{stroke-width:2px;width:12px;height:12px;transition:opacity .25s, transform .35s var(--ease)}.dd__name{color:var(--ink);overflow-wrap:anywhere;font-size:13.5px;font-weight:560;line-height:1.3;transition:color .3s}.dd__out{color:var(--ink-2);transition:opacity .35s var(--ease), transform .45s var(--ease);font-size:12px;line-height:1.35}.dd__res{background:var(--paper)}.dd__meta{color:var(--ink-2);margin-top:4px;font-size:12.5px;line-height:1.4}.dd__res .status{margin-top:12px}.dd__done{gap:6px}.dd.is-play .dd__in:not(.is-in),.dd.is-play .dd__res:not(.is-in){outline:1px dashed var(--line);outline-offset:-1px;background:0 0}.dd__in>*,.dd__res>*{transition:opacity .4s var(--ease), transform .55s var(--ease)}.dd.is-play .dd__in:not(.is-in)>*,.dd.is-play .dd__res:not(.is-in)>*{opacity:0;transform:translate(-10px)}.dd.is-play .dd__in:not(.is-read) dd{background-size:0 2px}.dd.is-play .dd__in.is-read dd:first-child{transition-delay:0s}.dd.is-play .dd__in.is-read div:nth-child(2) dd{transition-delay:.15s}.dd.is-play .dd__in.is-read div:nth-child(3) dd{transition-delay:.3s}.dd.is-play .dd__step:not(.is-done),.dd.is-play .dd__step:not(.is-done) .dd__mark{background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}.dd.is-play .dd__step:not(.is-done) .dd__mark svg{opacity:0;transform:scale(.5)}.dd.is-play .dd__step:not(.is-done):not(.is-act) .dd__name{color:var(--ink-3)}.dd.is-play .dd__step:not(.is-done) .dd__out{opacity:0;transform:translateY(-3px)}.dd.is-play .dd__step.is-act{box-shadow:inset 0 0 0 1px var(--signal)}.dd.is-play .dd__step.is-act .dd__mark{box-shadow:inset 0 0 0 1px var(--signal), inset 0 0 0 5px var(--white), inset 0 0 0 9px var(--signal);animation:dd-act 1s var(--ease-io) infinite}@keyframes dd-act{50%{box-shadow:inset 0 0 0 1px var(--signal), inset 0 0 0 4px var(--white), inset 0 0 0 9px var(--signal-glow)}}.dd.is-play .dd__res.is-in{animation:dd-arrive 1.4s var(--ease) both}@keyframes dd-arrive{0%{background-color:var(--signal-flash)}to{background-color:var(--paper)}}.dd.is-play:not(.is-end) .dd__done,.dd:not(.is-play) .dd__count,.dd.is-end .dd__count{display:none}.dv__sre{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}.dv__sre div{display:block}.dv__sre dt{margin-bottom:6px;padding-top:0}@media (width<=1139px){.dv__grid{grid-template-columns:1fr}html:not(.js) .dv__hub{position:static}.dv__hub{justify-self:center}}@media (width<=920px){.dv__hub{justify-self:stretch;gap:12px;display:grid}.dv__dial{gap:12px;width:auto;height:auto;display:grid}.dv__spoke{display:none}.dv__ring{margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter);scrollbar-width:none;scroll-padding-inline:var(--gutter);order:-1;gap:8px;display:flex;overflow-x:auto}.dv__ring::-webkit-scrollbar{display:none}.dv .dv__tab{flex:none;position:relative;top:auto;left:auto;transform:none}.dv__core{border-radius:var(--r-lg);width:auto;height:auto;box-shadow:none;place-content:stretch;justify-items:start;gap:10px;margin:0;padding:16px 18px;position:static}.dv__core b{font-size:15px}.dv__mods{flex-wrap:wrap;gap:6px 16px;display:flex}.dv__mods li{font-size:13px}.dv__ctrl{justify-content:space-between;margin-top:0}html:not(.js) .dv__ring{flex-wrap:wrap;overflow:visible}.dv__sre{grid-template-columns:1fr;gap:12px}.dv__sre div{grid-template-columns:96px 1fr;gap:12px;display:grid}.dv__sre dt{margin-bottom:0;padding-top:2px}}@media (width<=600px){.dd__body{grid-template-columns:minmax(0,1fr);gap:8px;min-height:0;padding:16px 14px 12px}.dd__to{margin:0 auto;transform:rotate(90deg)}.dd__to.is-pass{transform:rotate(90deg)translate(3px)}.dd__fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.dd__in:after{display:none}}@media (prefers-reduced-motion:reduce){.dv__hand,.js .dv__panel,.js .dv__panel.is-active,.dv__mods li,.dv__mods i{transition:none}.dv__dot{display:none}}
