
#opD{position:fixed;inset:0;z-index:20;font-family:"Chiron GoRound TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
html:not(.opD-live) #opD{display:none}
#opD svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
html.opD-live #skip .pn-fig,html.opD-live #skip .pn-play{opacity:0;pointer-events:none}
.opD-dot{position:absolute;width:88px;height:88px;margin:-44px 0 0 -44px;border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0;z-index:2}
.opD-dot:focus-visible{outline:3px solid #FDBF2B;outline-offset:6px}
.opD-hint{position:absolute;left:0;right:0;text-align:center;color:#FEFEFA;font-size:15px;font-weight:700;letter-spacing:.2em;opacity:.55;pointer-events:none}
.opD-skip{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:3;min-height:44px;padding:0 18px;border-radius:999px;
  border:2px solid rgba(254,254,250,.5);background:transparent;color:#FEFEFA;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.opD-snd{position:absolute;bottom:calc(8px + env(safe-area-inset-bottom));right:8px;z-index:3;width:76px;height:56px;border:0;border-radius:12px;
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#opD .opD-snd svg{position:static;width:64px;height:40px}   
.opD-skip:focus-visible,.opD-snd:focus-visible{outline:3px solid #FDBF2B;outline-offset:4px}
