.pmode-cta-group{ display:flex; align-items:center; gap:12px; }

.pmode-toggle{
  display:flex; align-items:center; justify-content:center;
  width:41px; height:41px; padding:0; flex:none;
  border:1px solid var(--line); border-radius:50%;
  background:rgba(255,255,255,.04); color:var(--ink);
  cursor:pointer;
  transition:background .2s, transform .2s, border-color .2s, box-shadow .2s;
}
.pmode-toggle:hover{
  background:rgba(24,255,0,.10); border-color:rgba(24,255,0,.4);
  transform:translateY(-1px); box-shadow:0 0 22px rgba(24,255,0,.25);
}
.pmode-toggle svg{ display:block; width:21px; height:21px; }
.pmode-toggle .pm-frame{ stroke:currentColor; }
.pmode-toggle .pm-play{ fill:var(--green); }

html.pmode-active .hdnav,
html.pmode-active .hd .hdbtn,
html.pmode-active #hdmenu-btn,
html.pmode-active .pmode-toggle{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .3s ease, visibility .3s ease;
}
html.pmode-active .hdblur span:nth-child(4){
  background:linear-gradient(180deg,rgba(3,6,3,.9),rgba(3,6,3,0));
}

.pmode-rail{
  position:fixed; left:24px; top:50%; transform:translateY(-50%) translateX(-14px);
  z-index:900;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:16px 12px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(3,6,3,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 12px 44px rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .45s cubic-bezier(.16,1.1,.3,1);
}
html.pmode-active .pmode-rail{
  opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0);
}

.pmode-ctrl{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; flex:none;
  border:1px solid var(--line); border-radius:50%;
  background:rgba(255,255,255,.03); color:var(--ink-dim);
  cursor:pointer;
  transition:color .2s, background .2s, border-color .2s, transform .2s, opacity .2s;
}
.pmode-ctrl:hover{ color:var(--ink); background:rgba(24,255,0,.10); border-color:rgba(24,255,0,.35); }
.pmode-ctrl:active{ transform:scale(.92); }
.pmode-ctrl:disabled{ opacity:.3; cursor:default; }
.pmode-ctrl svg{ display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pmode-exit svg{ width:15px; height:15px; }
.pmode-play .pm-pauseicon{ display:none; }
.pmode-play.is-playing .pm-playicon{ display:none; }
.pmode-play.is-playing .pm-pauseicon{ display:block; }
.pmode-play.is-playing{ color:var(--green); border-color:rgba(24,255,0,.45); }

.pmode-full span{ display:flex; }
.pmode-full .pm-fsout{ display:none; }
html.pmode-fs .pmode-full .pm-fsin{ display:none; }
html.pmode-fs .pmode-full .pm-fsout{ display:flex; }
html.pmode-fs .pmode-full{ color:var(--green); border-color:rgba(24,255,0,.45); }

.pmode-sep{ width:18px; height:1px; background:var(--line); flex:none; }

.pmode-dots{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.pmode-dots li{ display:flex; }
.pmode-dots li[hidden]{ display:none; }
.pmode-dot{
  position:relative; width:11px; height:11px; padding:0; flex:none;
  border:1px solid var(--ink-dim); border-radius:50%;
  background:transparent; cursor:pointer;
  transition:background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.pmode-dot:hover{ border-color:var(--green); transform:scale(1.15); }
.pmode-dot.is-visited{ border-color:rgba(24,255,0,.55); background:rgba(24,255,0,.18); }
.pmode-dot.is-active{
  border-color:var(--green); background:var(--green);
  transform:scale(1.35); box-shadow:0 0 12px rgba(24,255,0,.7);
}
.pmode-dot:disabled, .pmode-dot.is-disabled{ opacity:.26; cursor:default; box-shadow:none; }
.pmode-dot:disabled:hover, .pmode-dot.is-disabled:hover{ transform:none; border-color:var(--ink-dim); }
.pmode-dot:disabled::after, .pmode-dot.is-disabled::after{ display:none; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.pmode-dot::after{
  content:attr(data-label);
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  padding:5px 11px; border:1px solid var(--line); border-radius:8px;
  background:rgba(3,6,3,.92); color:var(--ink);
  font-size:12.5px; white-space:nowrap; letter-spacing:-.01em;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.pmode-dot:hover::after{ opacity:1; }

@media (max-width:1024px){
  .pmode-toggle, .pmode-rail{ display:none !important; }
  .pmode-cta-group{ display:contents; }
}

@media (prefers-reduced-motion: reduce){
  .pmode-rail, .pmode-toggle, .pmode-ctrl, .pmode-dot{ transition:none; }
}

.pmode-railzone{ display:none; }
@media (min-width:1025px) and (max-width:1500px){
  html.pmode-active .pmode-railzone{ display:block; position:fixed; left:0; top:0; bottom:0; width:64px; z-index:899; }

  html.pmode-active .pmode-rail{
    left:6px; padding:10px 5px; gap:12px; opacity:.5;
    background:transparent; border-color:transparent; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    transition:opacity .25s ease, left .32s cubic-bezier(.16,1.1,.3,1),
               background .3s ease, padding .3s ease, transform .45s cubic-bezier(.16,1.1,.3,1);
  }
  html.pmode-active .pmode-rail .pmode-ctrl,
  html.pmode-active .pmode-rail .pmode-sep{ display:none; }
  html.pmode-active .pmode-rail .pmode-dot{ width:8px; height:8px; }

  html.pmode-active .pmode-rail.pmode-rail-open{
    left:22px; padding:16px 12px; opacity:1;
    background:rgba(3,6,3,.72); border-color:var(--line);
    box-shadow:0 12px 44px rgba(0,0,0,.5);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  html.pmode-active .pmode-rail.pmode-rail-open .pmode-ctrl{ display:flex; }
  html.pmode-active .pmode-rail.pmode-rail-open .pmode-sep{ display:block; }
  html.pmode-active .pmode-rail.pmode-rail-open .pmode-dot{ width:11px; height:11px; }
}