:root{
  --p-acc:#4f6bff;      --p-acc-rgb:79,107,255;
  --p-cyan:#22b8cf;     --p-cyan-rgb:34,184,207;
  --p-grad:linear-gradient(120deg,#4f6bff,#22b8cf);
  --p-bar:var(--p-grad); --p-bar-rgb:79,107,255;
  --p-ctrl-rgb:6,9,22;
  --p-active:#7ecbff;   --p-active-rgb:126,203,255;
  --p-glass:rgba(255,255,255,.75);
}
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;-webkit-user-select:none;user-select:none}
button:focus{outline:none}
button:focus-visible{outline:2px solid rgba(126,203,255,.7);outline-offset:2px}
.demo-item,.st-chip,.ad-logo{-webkit-user-select:none;user-select:none}
.p-wrap{max-width:1180px;margin:0 auto;padding:22px 18px 60px}
.p-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.p-title .logo-badge{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--p-grad);box-shadow:0 8px 18px rgba(79,107,255,.3)}
.p-title h1{font-size:19px;margin:0;background:var(--p-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-title .url-path{font-size:11.5px;color:#a3abc9;word-break:break-all;flex-basis:100%;order:3}
.stage{position:relative;width:100%;aspect-ratio:16/9;max-height:76vh;margin:0 auto;border-radius:20px;overflow:hidden;
  background:#0b0f1e;box-shadow:0 30px 70px rgba(30,45,120,.35);border:1px solid rgba(255,255,255,.28);isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 30% -20%,rgba(var(--p-acc-rgb),.22),transparent 60%),radial-gradient(700px 400px at 105% 115%,rgba(var(--p-cyan-rgb),.18),transparent 55%);opacity:.5;z-index:0;pointer-events:none}
.stage.dark-theme{}
.stage-layer{position:absolute;inset:0}
#vwrap{background:#000}
#vwrap video{width:100%;height:100%;object-fit:contain;background:#000}
.stage.ratio-16-9{aspect-ratio:16/9}
.stage.ratio-4-3{aspect-ratio:4/3;max-height:88vh}
.stage.ratio-fill #vwrap video{object-fit:cover}
.stage.mirror-h #vwrap{transform:scaleX(-1)}
.stage.mirror-v #vwrap{transform:scaleY(-1)}
.stage.mirror-h.mirror-v #vwrap{transform:scale(-1,-1)}
.dm-canvas{position:absolute;inset:0;pointer-events:none;z-index:6}
.sub-layer{position:absolute;left:0;right:0;bottom:9%;display:none;justify-content:center;padding:0 6%;z-index:5;pointer-events:none}
.sub-layer.show{display:flex}
.sub-line{max-width:100%;text-align:center;font-size:20px;line-height:1.45;color:#fff;white-space:pre-line;
  text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.85)}
.sub-layer.bg .sub-line{background:rgba(0,0,0,.45);padding:3px 12px;border-radius:8px;text-shadow:none}
.dm-input-layer{z-index:16}
.st-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:12px 16px;z-index:20;
  background:linear-gradient(180deg,rgba(8,12,28,.55),transparent);opacity:0;transition:.3s;pointer-events:none}
.stage.hovered .st-top,.stage.showing .st-top{opacity:1}
.stage.hovered .st-top .cbtn,.stage.showing .st-top .cbtn{pointer-events:auto}
.st-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:20px;font-size:11.5px;color:#eef2ff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.st-title{color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.5);
  max-width:58%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-spacer{flex:1}
.center-zone{position:absolute;inset:0;display:grid;place-items:center;z-index:9;pointer-events:none}
.big-btn{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;font-size:34px;pointer-events:auto;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:.25s;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.big-btn:hover{transform:scale(1.1);background:rgba(255,255,255,.14)}
.big-btn.hide{opacity:0;pointer-events:none;transform:scale(.8)}
@keyframes btnOut { 0%{transform:scale(1);opacity:1} 45%{transform:scale(1.5);opacity:.85} 100%{transform:scale(.5);opacity:0} }
@keyframes btnIn  { 0%{transform:scale(.5);opacity:0} 55%{transform:scale(1.18);opacity:.9} 100%{transform:scale(1);opacity:1} }
.big-btn.big-btn-out{ animation: btnOut .25s ease-out forwards; }
.big-btn.big-btn-in { animation: btnIn  .25s cubic-bezier(.2,.8,.2,1) forwards; }
.pulse{animation:ppulse 1.6s infinite}
@keyframes ppulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--p-acc-rgb),.5)}55%{box-shadow:0 0 0 24px rgba(var(--p-acc-rgb),0)}}
.loader{position:absolute;inset:0;display:none;place-items:center;z-index:8;background:rgba(5,8,20,.25);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.loader.show{display:grid}
.ring{width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--p-active);animation:spin 1s linear infinite}
.ring2{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.16);border-top-color:var(--p-cyan);position:absolute;margin:9px;animation:spin .8s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.p-state{position:absolute;left:50%;top:calc(50% + 54px);transform:translateX(-50%);color:#dfe7ff;font-size:12.5px;letter-spacing:.5px;white-space:nowrap}
body.has-bg .stage{background-image:var(--p-bg-img,none);background-size:var(--p-bg-fit,cover);background-position:center;background-repeat:no-repeat}
body.has-bg .stage:not(.has-frame){background-image:none}
body.has-bg #vwrap,body.has-bg #vwrap video{background:transparent}
body.ldbg-follow .loader{background-image:linear-gradient(rgba(5,8,20,.5),rgba(5,8,20,.5)),var(--p-bg-img,none);background-size:var(--p-bg-fit,cover);background-position:center;background-repeat:no-repeat;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body.ldbg-img .loader{background-image:linear-gradient(rgba(5,8,20,.48),rgba(5,8,20,.48)),var(--p-ld-img,none);background-size:cover;background-position:center;background-repeat:no-repeat;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body.ldbg-blur .loader{background:rgba(5,8,20,.28);-webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15)}
body.ldbg-none .loader{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body.fbg-img .oops{background-image:linear-gradient(rgba(6,9,24,.62),rgba(6,9,24,.62)),var(--p-fail-img,none);
  background-size:cover;background-position:center;background-repeat:no-repeat}
body.fbg-blur .oops{overflow:hidden}
body.fbg-blur .oops::before{content:"";position:absolute;inset:-4%;z-index:0;
  background-image:linear-gradient(rgba(6,9,24,.58),rgba(6,9,24,.58)),var(--p-fail-img,none);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:blur(18px) saturate(1.1)}
body.fbg-blur .oops .oops-in{position:relative;z-index:1}
body.fbg-none .oops{background:rgba(6,9,24,.78);-webkit-backdrop-filter:none;backdrop-filter:none}
.loader.ld-ring .ring{position:relative;width:56px;height:56px;border:2px solid rgba(255,255,255,.13);border-radius:50%;
  background:none;animation:none;box-shadow:0 0 22px rgba(var(--p-acc-rgb),.18)}
.loader.ld-ring .ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(var(--p-acc-rgb),0) 0deg,rgba(var(--p-acc-rgb),.25) 55deg,
    var(--p-active) 125deg,var(--p-cyan) 190deg,rgba(var(--p-cyan-rgb),0) 255deg,rgba(var(--p-cyan-rgb),0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  animation:spin 1.5s linear infinite}
.loader.ld-ring .ring2{display:none}
.loader.ld-ring .p-state{top:calc(50% + 48px)}
.loader.ld-dots .ring,.loader.ld-dots .ring::before,.loader.ld-dots .ring::after{
  width:11px;height:11px;border:0;border-radius:50%;background:var(--p-grad);animation:ldBounce .92s ease-in-out infinite}
.loader.ld-dots .ring{position:relative}
.loader.ld-dots .ring::before,.loader.ld-dots .ring::after{content:"";position:absolute;top:0}
.loader.ld-dots .ring::before{left:-19px;animation-delay:-.16s}
.loader.ld-dots .ring::after{left:19px;animation-delay:.16s}
.loader.ld-dots .ring2{display:none}
.loader.ld-dots .p-state{top:calc(50% + 32px)}
@keyframes ldBounce{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-9px);opacity:1}}
.loader.ld-pulse .ring{position:relative;width:42px;height:42px;border:2px solid rgba(var(--p-acc-rgb),.6);
  border-radius:50%;background:none;
  animation:ldBreathOut 1.8s ease-in-out infinite}
.loader.ld-pulse .ring2{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border:0;border-radius:50%;background:var(--p-grad);animation:ldBreathIn 1.8s ease-in-out infinite}
.loader.ld-pulse .p-state{top:calc(50% + 36px)}
@keyframes ldBreathOut{
  0%,100%{transform:scale(.82);opacity:.55;box-shadow:0 0 8px rgba(var(--p-acc-rgb),.18)}
  50%{transform:scale(1.14);opacity:1;box-shadow:0 0 24px rgba(var(--p-acc-rgb),.5)}}
@keyframes ldBreathIn{
  0%,100%{transform:scale(1.18);opacity:.75}
  50%{transform:scale(.72);opacity:1}}
.loader.ld-bar .ring{position:relative;width:134px;height:4px;border:0;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden;animation:none}
.loader.ld-bar .ring2{position:absolute;left:0;top:0;width:42%;height:100%;margin:0;border:0;border-radius:4px;background:var(--p-grad);
  box-shadow:0 0 12px rgba(var(--p-bar-rgb),.6);animation:ldBar 1.15s cubic-bezier(.45,.05,.55,.95) infinite}
.loader.ld-bar .p-state{top:calc(50% + 30px)}
@keyframes ldBar{0%{transform:translateX(-105%)}100%{transform:translateX(340%)}}
.loader.ld-none .ring{display:none}
.loader.ld-none .p-state{top:50%;transform:translate(-50%,-50%)}
.loader.ld-ripple .ring{position:relative;width:48px;height:48px;border:0;border-radius:50%;background:none;
  animation:spin 1.1s linear infinite}
.loader.ld-ripple .ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(var(--p-acc-rgb),0) 0deg,rgba(var(--p-acc-rgb),0) 220deg,
    rgba(var(--p-acc-rgb),.18) 275deg,rgba(var(--p-acc-rgb),.55) 325deg,var(--p-active) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.loader.ld-ripple .ring::after{content:"";position:absolute;left:50%;top:-2px;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--p-active);box-shadow:0 0 10px 2px rgba(var(--p-acc-rgb),.85)}
.loader.ld-ripple .ring2{display:none}
.loader.ld-ripple .p-state{top:calc(50% + 44px)}
.loader.ld-wave .ring{position:relative;width:52px;height:26px;border:0;background:none;animation:none}
.loader.ld-wave .ring::before,.loader.ld-wave .ring::after,
.loader.ld-wave .ring2,.loader.ld-wave .ring2::before,.loader.ld-wave .ring2::after{
  content:"";position:absolute;bottom:0;width:4px;height:8px;border:0;border-radius:2px;background:var(--p-grad);
  margin:0;animation:ldWave 1.05s ease-in-out infinite}
.loader.ld-wave .ring::before{left:0;animation-delay:-.5s}
.loader.ld-wave .ring::after{left:12px;animation-delay:-.38s}
.loader.ld-wave .ring2{left:24px;top:auto;animation-delay:-.26s}
.loader.ld-wave .ring2::before{left:12px;animation-delay:-.14s}
.loader.ld-wave .ring2::after{left:24px;animation-delay:0s}
.loader.ld-wave .p-state{top:calc(50% + 34px)}
@keyframes ldWave{0%,100%{height:8px;opacity:.5}50%{height:24px;opacity:1}}
.loader.ld-orbit .ring{width:50px;height:50px;aspect-ratio:1;display:grid;border:0;border-radius:0;
  -webkit-mask:conic-gradient(from 15deg,#0000,#000);
  mask:conic-gradient(from 15deg,#0000,#000);
  animation:ldOrbit 1s steps(12) infinite}
.loader.ld-orbit .ring,.loader.ld-orbit .ring::before,.loader.ld-orbit .ring::after{
  background:
    radial-gradient(closest-side at 50% 12.5%,var(--p-active) 96%,#0000) 50% 0/20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%,var(--p-active) 96%,#0000) 0 50%/80% 20% repeat-x}
.loader.ld-orbit .ring::before,.loader.ld-orbit .ring::after{content:"";grid-area:1/1;transform:rotate(30deg)}
.loader.ld-orbit .ring::after{transform:rotate(60deg)}
.loader.ld-orbit .ring2{display:none}
.loader.ld-orbit .p-state{top:calc(50% + 42px)}
@keyframes ldOrbit{100%{transform:rotate(1turn)}}
.loader.ld-square .ring{position:relative;width:30px;height:36px;border:2px solid rgba(255,255,255,.28);
  border-radius:8px;overflow:hidden;background:rgba(255,255,255,.05);animation:none}
.loader.ld-square .ring2{position:absolute;left:0;bottom:0;width:100%;height:10%;margin:0;border:0;border-radius:0;
  background:var(--p-grad);animation:ldFill 1.8s ease-in-out infinite}
.loader.ld-square .p-state{top:calc(50% + 40px)}
@keyframes ldFill{0%,100%{height:8%}50%{height:92%}}
.ctrl{position:absolute;left:0;right:0;bottom:0;z-index:21;padding:34px 18px 12px;color:#eef2ff;
  background:linear-gradient(0deg,rgba(var(--p-ctrl-rgb),.72),rgba(var(--p-ctrl-rgb),0));opacity:0;transform:translateY(8px);transition:.3s;pointer-events:none}
.stage.hovered .ctrl,.stage.showing .ctrl{opacity:1;transform:none;pointer-events:auto}
.timeline{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:5px;-webkit-user-select:none;user-select:none}
.stage.tl-mobile .timeline{padding:0 36px}
.stage.tl-mobile .timeline #btnPlay{position:absolute;left:0;top:50%;transform:translateY(-50%);display:grid}
.stage.tl-mobile .timeline #btnFs{position:absolute;right:0;top:50%;transform:translateY(-50%);display:grid}
.stage.m-next-off #btnNext{display:none}
.stage.m-next-off:fullscreen #btnNext{display:grid}
.stage.m-next-off:-webkit-full-screen #btnNext{display:grid}
.stage.m-next-off.fullscreen #btnNext{display:grid}
.stage.m-next-off.webfs #btnNext{display:grid}
.stage.m-next-off #btnDm,.stage.m-next-off #btnSend{display:none}
.stage.m-next-off:fullscreen #btnDm,.stage.m-next-off:fullscreen #btnSend{display:grid}
.stage.m-next-off:-webkit-full-screen #btnDm,.stage.m-next-off:-webkit-full-screen #btnSend{display:grid}
.stage.m-next-off.fullscreen #btnDm,.stage.m-next-off.fullscreen #btnSend{display:grid}
.stage.m-next-off.webfs #btnDm,.stage.m-next-off.webfs #btnSend{display:grid}
.stage.m-next-off #dm2Mini{display:none}
.stage.m-next-off:fullscreen #dm2Mini,
.stage.m-next-off:-webkit-full-screen #dm2Mini,
.stage.m-next-off.fullscreen #dm2Mini,
.stage.m-next-off.webfs #dm2Mini{display:grid}
.t-range{position:relative;flex:1;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none;pointer-events:auto}
.t-bg{position:absolute;left:0;right:0;height:4px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden;transition:height .18s ease,box-shadow .18s ease}
.t-range:hover .t-bg,.t-range.drag .t-bg{height:5px;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.t-buff{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.28)}
.t-play{position:absolute;left:0;top:0;bottom:0;background:var(--p-bar);box-shadow:0 0 12px rgba(var(--p-bar-rgb),.6)}
.t-now{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:50%;transform:translate(-50%,-50%) scale(0);
  box-shadow:0 0 0 5px rgba(var(--p-acc-rgb),.3);transition:transform .15s}
.t-range:hover .t-now,.t-range.drag .t-now{transform:translate(-50%,-50%) scale(1)}
.t-time{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#c6cef0;white-space:nowrap}
.seek-preview{position:absolute;left:0;bottom:100%;transform:translateX(-50%);display:none;pointer-events:none;z-index:25;margin-bottom:8px;padding:0;background:transparent;border:0;box-shadow:none}
.seek-preview.show{display:block}
.seek-preview canvas{display:block;width:160px;height:90px;border-radius:7px;box-shadow:0 8px 20px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.25);box-sizing:border-box}
.seek-time{display:block;text-align:center;color:#fff;font-size:12px;padding:6px 0 0;font-family:ui-monospace,Consolas,monospace;font-weight:600;letter-spacing:.3px;text-shadow:0 1px 4px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}
@media (hover:none),(max-width:600px){
  .seek-preview canvas{width:120px;height:68px;border-radius:6px;border-width:1px}
  .seek-time{font-size:11px;padding-top:4px}
}
.btn-row{display:flex;align-items:center;gap:4px}
.btn-right{display:flex;align-items:center;gap:4px;margin-left:auto}
#stage.no-next #btnNext{display:none!important}
.cbtn{width:38px;height:38px;border:0;border-radius:11px;background:transparent;color:#dfe7ff;font-size:19px;cursor:pointer;transition:.15s;display:grid;place-items:center}
.cbtn.active{color:var(--p-active)}
.cbtn i{font-size:inherit;pointer-events:none}
@media (hover:hover){
  .cbtn:hover{background:rgba(255,255,255,.08);color:#fff}
  .ctrl .cbtn:hover{
    color:#fff;
    transform:scale(1.16);
    z-index:3;
  }
}
.cbtn:active,
.ctrl .cbtn:active,
.dm2-bar .cbtn:active{
  background:rgba(255,255,255,.18);
  color:#fff;
  transform:scale(.9);
  transition-duration:.06s;
}
.dm2-bar:active{background:rgba(255,255,255,.14)}
.dm2-bar:focus-within{background:rgba(255,255,255,.12)}
.dm2-send:active{color:#fff;background:rgba(var(--p-acc-rgb),.3);transform:scale(.9)}
@media (hover:hover){
  #btnSet svg{transform-origin:50% 50%;transition:transform 0.5s ease-in-out}
  #btnSet:hover svg{transform:rotate(90deg)}
}
.dm2-bar{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 14px;margin:0 4px;border-radius:20px;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);box-shadow:0 8px 20px rgba(0,0,0,.25);transition:.18s}
@media (hover:hover){ .dm2-bar:hover{background:rgba(255,255,255,.12)} }
.dm2-input-wrap{flex:1;min-width:160px;max-width:240px;display:flex;align-items:center;position:relative}
.dm2-input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#f1f5ff;font-size:13px;padding:6px 4px}
.dm2-input::placeholder{color:rgba(255,255,255,.5)}
.dm2-send{display:none;background:transparent;border:0;cursor:pointer;padding:4px 6px;color:#dfe7ff;line-height:1;border-radius:8px;transition:.15s;flex:none}
@media (hover:hover){ .dm2-send:hover{color:#fff;background:rgba(var(--p-acc-rgb),.18)} }
.dm2-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dm2-send.show{display:inline-flex;align-items:center}
.dm2-bar .cbtn{width:30px;height:30px;font-size:16px;border-radius:8px}
.dm2-bar .cbtn.active{color:var(--p-active)}
.vol-wrap{position:relative;display:flex;align-items:center}
.slider-v{position:absolute;left:50%;bottom:calc(100% + 30px);transform:translateX(-50%) scale(.95);transform-origin:bottom center;width:34px;height:96px;display:none;flex-direction:column;justify-content:flex-end;align-items:center;cursor:pointer;padding:8px 0;border-radius:16px;z-index:5;
  background:rgb(20,26,52,.25);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.18s;touch-action:none}
.stage.vol-open .slider-v{display:flex;opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
.vol-wrap:hover .slider-v{display:flex;opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
.vol-wrap:hover::after{content:"";position:absolute;left:-8px;right:-8px;bottom:100%;height:34px}
.slider-v .bg{position:relative;width:4px;height:80px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden}
.slider-v .fg{position:absolute;bottom:0;left:0;right:0;background:var(--p-bar);box-shadow:0 0 10px rgba(var(--p-bar-rgb),.55);border-radius:4px}
.slider-v .knob{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;left:50%;transform:translate(-50%,50%);box-shadow:0 0 0 4px rgba(var(--p-acc-rgb),.3)}
.spacer{flex:1}
.txt-dm{width:150px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:20px;color:#fff;padding:0 14px;height:30px;font-size:12.5px;outline:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.txt-dm::placeholder{color:rgba(255,255,255,.5)}
.dm-send{background:var(--p-grad);border:0;color:#fff;border-radius:20px;padding:0 15px;height:30px;font-size:12px;cursor:pointer;font-weight:600}
.rmenu{position:absolute;z-index:60;left:0;top:0;min-width:272px;max-width:calc(100% - 12px);max-height:calc(100% - 12px);overflow-y:auto;padding:5px;border-radius:12px;
  background:rgb(20,26,52,.25);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.5);color:#dfe7ff;font-size:12.5px;
  opacity:0;transform:scale(.97);transform-origin:top left;transition:opacity .14s ease,transform .14s ease;pointer-events:none}
.rmenu.show{opacity:1;transform:none;pointer-events:auto}
.rm-row{display:flex;align-items:flex-start;gap:10px;padding:7px 9px;border-radius:8px}
.rm-lb{color:#94a3d0;flex:none;line-height:22px;letter-spacing:.5px}
.rm-t{color:#e2e9ff;line-height:22px}
.rm-opts{display:flex;align-items:center;gap:2px;flex-wrap:wrap;flex:1}
.rm-opts i{font-style:normal;cursor:pointer;padding:0 8px;height:22px;line-height:22px;border-radius:7px;color:#c9d4f6;transition:.12s}
.rm-opts i:hover{background:rgba(255,255,255,.1);color:#fff}
.rm-row:hover{background:rgba(255,255,255,.1)}
.rm-opts i.on{color:var(--p-active);background:rgba(var(--p-active-rgb),.12);font-weight:600}
.rm-item{cursor:pointer}
.rm-item:hover{background:rgba(255,255,255,.1)}
.rm-sep{height:1px;margin:4px 9px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.rm-item.on .rm-t{color:var(--p-active);font-weight:600}
.rmsp{position:absolute;left:10px;top:10px;z-index:58;min-width:198px;max-width:calc(100% - 20px);padding:7px 10px 8px;border-radius:12px;
  background:rgb(20,26,52,.25);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.5);color:#dfe7ff;font-size:12px;
  opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;pointer-events:none}
.rmsp.show{opacity:1;transform:none;pointer-events:auto}
.rmsp-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:5px;margin-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.rmsp-hd span{font-size:11px;letter-spacing:1px;color:#8fa0d8}
.rmsp-x{font-style:normal;cursor:pointer;width:20px;height:20px;line-height:18px;text-align:center;border-radius:6px;
  color:#9fb0dd;font-size:15px;transition:.12s}
.rmsp-x:hover{background:rgba(255,255,255,.1);color:#fff}
.rmsp-r{display:flex;align-items:center;justify-content:space-between;gap:18px;line-height:20px;color:#94a3d0}
.rmsp-r b{color:#dbe4ff;font-weight:600;font-family:ui-monospace,Consolas,monospace}
.pop{position:absolute;z-index:40;min-width:170px;max-width:calc(100% - 16px);max-height:calc(100% - 16px);overflow-y:auto;overflow-x:hidden;padding:9px;border-radius:14px;display:none;
  background:rgb(20,26,52,.25);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);color:#dfe7ff;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.pop.show{display:block}
.pop .pop-title{font-size:11px;color:#8fa0d8;padding:4px 10px;letter-spacing:1px}
.pop .item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:13px;transition:.12s}
.pop .item:hover{background:rgba(255,255,255,.1)}
.pop .item.on{color:#8fd4ff}
.pop .sep{height:1px;margin:6px 4px;background:rgba(255,255,255,.1)}
.pop .row{display:flex;align-items:center;gap:10px;padding:6px 10px;font-size:12.5px}
.pop input[type=range]{flex:1}
.dmColorRow{display:flex;gap:6px;padding:6px 10px;flex-wrap:wrap}
.dmColorRow i{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.dmColorRow i.on{border-color:#fff}
.toast-stage{position:absolute;left:50%;top:26%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.p-toast{padding:6px 18px;border-radius:20px;font-size:13px;color:#dfe7ff;
  background:rgb(20,26,52,.25);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  opacity:0;transition:.3s;white-space:nowrap}
.p-toast.show{opacity:1}
.p-toast.err{color:#ffb3c0}
.stage.touch-gesture #vwrap,.stage.touch-gesture #dmLayer{touch-action:none}
.stage.touch-gesture:not(:fullscreen):not(.webfs):not(.fullscreen) #vwrap,
.stage.touch-gesture:not(:fullscreen):not(.webfs):not(.fullscreen) #dmLayer{touch-action:pan-y}
.g-hud{position:absolute;left:50%;top:50%;z-index:62;min-width:118px;padding:15px 20px 14px;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;gap:7px;color:#dfe7ff;pointer-events:none;
  background:rgb(20,26,52,.25);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.g-hud.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.g-hud .g-ic{width:30px;height:30px;display:grid;place-items:center;color:#cfdcff}
.g-hud .g-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g-hud .g-ic svg.fi{fill:currentColor;stroke:none}
.g-hud.flip .g-ic{transform:scaleX(-1)}
.g-hud .g-txt{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.g-hud .g-bar{display:none;width:112px;height:4px;border-radius:4px;background:rgba(255,255,255,.24);overflow:hidden}
.g-hud.meter .g-bar{display:block}
.g-hud .g-bar span{display:block;height:100%;width:0;border-radius:4px;background:var(--p-grad)}
.g-hud .g-sub{display:none;font-size:11.5px;font-weight:600;color:#9db0e2;white-space:nowrap}
.g-hud.seek .g-sub{display:block}
.g-hud.seek .g-txt{font-size:19px;font-weight:800;background:var(--p-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.url-card{max-width:760px;margin:30px auto 0;padding:30px 28px;border-radius:22px;text-align:center;
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.85);
  box-shadow:0 24px 60px rgba(70,96,205,.14)}
.url-card .big{font-size:20px;font-weight:800;background:var(--p-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.url-card p{color:#8a95bb;font-size:12.5px;margin:10px 0 18px}
.url-row{display:flex;gap:10px;flex-wrap:wrap}
.url-row input{flex:1;min-width:240px}
.demo-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.demo-item{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:12px;padding:7px 8px;border-radius:18px;cursor:pointer;background:rgba(79,107,255,.08);color:var(--c-primary);border:1px dashed rgba(79,107,255,.4);transition:.15s}
.demo-item svg{flex:none;width:13px;height:13px}
.demo-item small{flex:none;opacity:.55;margin-left:2px}
.demo-item:hover{background:rgba(79,107,255,.16);transform:translateY(-1px)}
.ext-bar{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:24;display:flex;gap:8px;align-items:center;
  padding:5px 12px;border-radius:20px;font-size:11.5px;color:#dce6ff;white-space:nowrap;
  background:rgb(20,26,52,.25);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.5);
  pointer-events:none;opacity:0}
.ext-bar svg{flex:none;display:block;width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ext-bar span{line-height:1.25}
.stage.ext .ext-bar{opacity:1}
.ext-media{position:absolute;inset:0;width:100%;height:100%;background:#000}
.ext-media video,.ext-media iframe{width:100%;height:100%;object-fit:contain}
.wt-panel{padding:16px}
.wt-role{display:flex;gap:8px;align-items:center;font-size:12.5px;color:#8a95bb}
.member{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.1);font-size:13px}
.member .m-dot{width:8px;height:8px;border-radius:50%;background:#7ef2b2;box-shadow:0 0 8px #7ef2b2}
.corner-zone{position:absolute;inset:0;z-index:22;pointer-events:none}
.corner-zone .fl-pos{position:absolute;pointer-events:auto;display:flex;flex-direction:column;gap:8px}
.ad-float{position:absolute;z-index:18;overflow:hidden;pointer-events:auto;display:none}
.ad-float.show{display:block}
.ad-frame{position:absolute;inset:0;background:rgba(8,10,22,.9);z-index:19;display:none;pointer-events:auto}
.ad-frame.show{display:block}
.ad-frame video,.ad-float video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.ad-float img{width:100%;display:block}
.ad-close{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(10,15,40,.6);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:13px;z-index:2}
.ad-skip{position:absolute;right:16px;bottom:16px;padding:6px 16px;border-radius:18px;border:0;cursor:pointer;font-size:13px;color:#fff;background:var(--p-grad)}
.ad-count{position:absolute;left:16px;bottom:14px;color:#dfe7ff;font-size:12px;text-shadow:0 1px 4px #000}
.ad-logo{display:flex;align-items:center;gap:4px;cursor:pointer;z-index:12}
.ad-logo img{max-height:42px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.ad-logo span{color:#fff;font-size:13px;font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.7);padding:2px 8px;border-radius:8px}
.ad-marquee{position:absolute;left:0;right:0;height:26px;display:flex;align-items:center;overflow:hidden;z-index:13;pointer-events:none}
.ad-marquee .mq{white-space:nowrap;font-size:13px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5);will-change:transform;animation:mqRun linear infinite}
@keyframes mqRun{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.ad-float-banner{display:block;cursor:pointer;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.45);overflow:hidden;background:#000}
.ad-text{display:inline-flex;padding:7px 13px;border-radius:10px;cursor:pointer;font-size:13px;box-shadow:0 8px 22px rgba(0,0,0,.4);align-items:center;gap:6px}
.ad-video-mini{border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.p-dlg .layui-layer-title{background:linear-gradient(90deg,rgba(20,26,52,.5),rgba(20,26,52,.2)) !important}
.p-body{margin:0;min-height:100vh;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(1100px 560px at 8% -10%,rgba(79,107,255,.12),transparent 58%),radial-gradient(860px 500px at 108% 12%,rgba(34,184,207,.14),transparent 55%),linear-gradient(180deg,#f7f9ff,#eef3ff)}
.p-body *{box-sizing:border-box}
.p-topbar{max-width:1180px;margin:0 auto;padding:20px 20px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.p-topbar .lg{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(120deg,#4f6bff,#22b8cf);box-shadow:0 10px 22px rgba(79,107,255,.35)}
.p-topbar .lg svg{width:22px;height:22px}
.p-topbar h1{margin:0;font-size:18px;letter-spacing:.4px;background:linear-gradient(120deg,#4f6bff,#22b8cf);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-topbar .sub{font-size:11.5px;color:#8a95bb}
.p-topbar .back{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:20px;cursor:pointer;font-size:12.5px;color:#5b6688;
  background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(70,96,205,.08);text-decoration:none;transition:.2s}
.p-topbar .back:hover{color:#fff;background:linear-gradient(120deg,#4f6bff,#22b8cf);border-color:transparent}
.p-topbar .back.hidden{display:none}
.p-topbar > div:nth-child(2){flex:1;min-width:0}
.p-topbar h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-topbar .back{flex:none;white-space:nowrap;line-height:1}
.p-topbar .back svg{flex:none;display:block;width:14px;height:14px}
.cbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cbtn.xs{width:30px;height:30px;border-radius:9px;font-size:14px}
.cbtn.label-mode{width:auto;padding:0 14px;gap:6px;font-size:13px;font-weight:700;letter-spacing:.5px;display:inline-flex;align-items:center}
.cbtn.label-mode svg{width:17px;height:17px}
.cbtn.label-mode .lbl{line-height:1}
@media (hover:hover){ .cbtn.label-mode:hover{background:rgba(var(--p-acc-rgb),.18)} }
.cbtn.xs svg{width:15px;height:15px;stroke-width:2.1}
.cbtn.xs .txt{font-size:11px;font-weight:700}
.big-btn svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-left:4px}
.cbtn.active svg{stroke:var(--p-active);fill:rgba(var(--p-active-rgb),.14)}
.tip{position:absolute;left:0;top:0;z-index:60;pointer-events:none;white-space:nowrap;
  padding:5px 10px;border-radius:9px;font-size:12px;line-height:1.4;color:#dfe7ff;
  background:rgb(20,26,52,.25);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.3,1)}
.tip.show{opacity:1;transform:translateY(0)}
.pop.set-pop{width:min(300px,calc(100% - 16px));min-width:0;padding:12px 12px 10px;border-radius:16px;
  background:rgb(20,26,52,.25);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.pop.set-pop .pop-title{display:flex;align-items:center;gap:8px;padding:2px 4px 9px;font-size:12.5px;font-weight:700;color:#c9d6ff;letter-spacing:.6px}
.pop.set-pop .pop-title::before{content:"";width:3px;height:13px;border-radius:2px;background:linear-gradient(180deg,var(--p-active),var(--p-cyan))}
.pop.set-pop .sep{margin:8px 2px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.pop.set-pop .set-row,.pop.set-pop .row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:13px;color:#e3e9ff;cursor:pointer;transition:background .15s}
.pop.set-pop .set-row:hover,.pop.set-pop .row:hover{background:rgba(255,255,255,.06)}
.pop.set-pop .set-row.open{background:rgba(var(--p-acc-rgb),.16)}
.pop.set-pop .set-label{flex:1;min-width:0}
.pop.set-pop .set-val{margin-left:auto;font-family:var(--font-num);font-size:12px;color:#8fb6ff;white-space:nowrap}
.pop.set-pop .set-arrow{margin-left:2px;color:#7f8dbb;font-size:14px;line-height:1;transition:transform .2s,color .2s}
.pop.set-pop .set-row.open .set-arrow{transform:rotate(90deg);color:#8fb6ff}
.pop.set-pop .set-opts{padding:2px 4px 6px;animation:setOptsIn .18s ease}
@keyframes setOptsIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pop.set-pop .chips{padding:2px 6px 8px}
.pop.set-pop .chip2{padding:5px 13px;font-size:12px}
.pop.set-pop .set-note{padding:0 10px 8px;font-size:11.5px;line-height:1.6;color:#8a95bb}
.pop.set-pop .inrow{padding:7px 10px;font-size:12.5px}
.pop.set-pop .inrow input[type=number]{width:64px;padding:4px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#eef2ff;font-family:var(--font-num);font-size:12.5px;outline:none}
.pop.set-pop input[type=range]{accent-color:var(--p-active)}
.pop.set-pop .inrow output{min-width:40px;text-align:right;font-family:var(--font-num);font-size:12px;color:#8fb6ff}
.pop.set-pop .set-foot{padding:8px 4px 2px;font-size:11px;color:#5c6fae;letter-spacing:.5px}
.pop.set-pop .set-slider{position:relative;overflow:hidden;transition:height .26s cubic-bezier(.2,.8,.3,1)}
.pop.set-pop .set-pane{transition:transform .26s cubic-bezier(.2,.8,.3,1)}
.pop.set-pop .set-pane-sub{position:absolute;left:100%;top:0;width:100%}
.pop.set-pop .set-slider.sub .set-pane-main{transform:translateX(-100%)}
.pop.set-pop .set-slider.sub .set-pane-sub{transform:translateX(-100%)}
.pop.set-pop .set-sub-head{display:flex;align-items:center;gap:9px;padding:2px 4px 10px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.pop.set-pop .set-back{cursor:pointer;white-space:nowrap;font-size:12px;color:#8fb6ff;padding:3px 9px;border-radius:8px;background:rgba(var(--p-acc-rgb),.14);transition:background .15s}
.pop.set-pop .set-back:hover{background:rgba(var(--p-acc-rgb),.26)}
.pop.set-pop .set-sub-title{font-size:12.5px;font-weight:700;color:#c9d6ff}
.st-top{padding:10px 12px;align-items:center}
.st-top .go-back{color:#eaf1ff;opacity:.85}
.st-title{max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-chip .dot-live{width:7px;height:7px;border-radius:50%;background:#7ef2b2;box-shadow:0 0 8px #7ef2b2;animation:mxlive 1.4s infinite}
@keyframes mxlive{0%,100%{opacity:1}50%{opacity:.35}}
.dm-layer .dm{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;white-space:nowrap;line-height:1.28;font-weight:500;
  letter-spacing:.3px;transform:translate3d(0,0,0);user-select:none;-webkit-user-select:none;
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 3px rgba(0,0,0,.3)}
.dm-layer .dm.fix{animation:dmFade .3s ease}
@keyframes dmFade{from{opacity:0}to{opacity:1}}
.dm-layer .dm.dm-self{padding:0 8px;border-radius:8px;
  background:rgb(20,26,52,.25);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 16px rgba(0,0,0,.35)}
.dm-dock{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(14px);z-index:30;display:flex;align-items:center;gap:6px;
  padding:8px 10px;border-radius:18px;opacity:0;pointer-events:none;transition:.22s;
  background:rgb(16 22 48 / 0%);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 44px rgba(0,0,0,.45)}
.stage.dm-open .dm-dock{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.dm-mob{position:absolute;left:50%;bottom:96px;transform:translate(-50%,10px);z-index:31;
  display:none;align-items:center;gap:6px;height:38px;padding:0 8px 0 14px;border-radius:8px;
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  max-width:calc(100% - 24px);opacity:0;pointer-events:none;transition:.18s}
.dm-mob.show{display:flex;opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.dm-mob:focus-within{background:rgba(255,255,255,.12)}
.dm-mob-input{flex:1;min-width:0;width:190px;background:transparent;border:0;outline:0;
  color:#f1f5ff;font-size:13px;padding:6px 4px}
.dm-mob-input::placeholder{color:rgba(255,255,255,.5)}
.dm-mob-send{position:relative;width:30px;height:30px;flex:none;border:0;cursor:pointer;padding:4px;
  color:#dfe7ff;line-height:1;border-radius:8px;transition:.15s;display:none;place-items:center;
  background:transparent}
.dm-mob-send::before{content:"";position:absolute;left:-4px;top:50%;width:1px;height:16px;
  transform:translateY(-50%);background:rgba(255,255,255,.24)}
.dm-mob-send:active{color:#fff;background:rgba(var(--p-acc-rgb),.3);transform:scale(.9)}
.dm-mob-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dm-mob-send.show{display:grid}
.dm-mob-entry{position:absolute;right:10px;bottom:calc(101px + env(safe-area-inset-bottom,0px));z-index:22;display:none;
  width:28px;height:28px;padding:0;border:0;border-radius:8px;cursor:pointer;color:#e6ecff;place-items:center;
  background:rgba(20,26,52,.32);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 8px 20px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s,background .15s,transform .15s}
.stage.hovered .dm-mob-entry,.stage.showing .dm-mob-entry{opacity:1;pointer-events:auto}
.dm-mob-entry:active{background:rgba(255,255,255,.2);transform:scale(.92)}
.dm-mob-entry svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.txt-dm{width:200px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:20px;color:#fff;padding:0 14px;height:32px;font-size:12.5px;outline:none}
.txt-dm::placeholder{color:rgba(255,255,255,.45)}
.dm-send{background:var(--p-grad);border:0;color:#fff;border-radius:18px;padding:0 16px;height:32px;font-size:12.5px;cursor:pointer;font-weight:600;transition:.2s;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  flex:none;flex-shrink:0;white-space:nowrap;line-height:1;text-align:center;box-sizing:border-box}
.dm-send:hover{filter:brightness(1.12)}
.dm-close{width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.15s;padding:0;margin-left:2px}
.dm-close:hover{background:rgba(255,255,255,.26)}
.dm-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dm-mode-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;cursor:pointer;transition:.15s;background:rgba(255,255,255,.14);border:0}
.dm-mode-ic:hover{background:rgba(255,255,255,.26)}
.dm-mode-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dm-layer .dm .dm-ops{position:absolute;left:50%;top:100%;transform:translate(-50%,7px);display:none;align-items:center;gap:1px;
  padding:3px 5px;border-radius:999px;background:rgb(20,26,52,.25);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:3;white-space:nowrap}
.dm-layer .dm .dm-ops::before{content:"";position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid rgba(20,26,52,.5)}
.dm-ops::after{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.dm-layer .dm .dm-ops.up{top:auto;bottom:100%;transform:translate(-50%,-7px)}
.dm-ops.up::after{top:auto;bottom:-9px}
.dm-layer .dm .dm-ops.up::before{top:auto;bottom:-6px;border:0;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(20,26,52,.5)}
.dm-layer .dm:hover{z-index:30}
.dm-layer .dm:hover .dm-ops,.dm-layer .dm .dm-ops:hover{display:flex}
.dm-ops button{appearance:none;-webkit-appearance:none;border:0;background:none;padding:4px 6px;border-radius:8px;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;gap:2px;opacity:.82;transition:.12s;line-height:1}
.dm-ops button:hover{background:rgba(255,255,255,.14);opacity:1}
.dm-ops button.on{color:#ff7f9c;opacity:1}
.dm-ops button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.dm-ops .dm-like-n{font-size:11px;font-weight:700;line-height:1}
.dm-rp-mask{position:absolute;inset:0;z-index:56;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(6,8,16,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
.dm-rp{position:relative;width:min(330px,100%);max-height:100%;overflow:auto;text-align:left;
  padding:13px 13px 12px;border-radius:14px;
  background:rgb(20,26,52,.25);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);color:#dfe7ff;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.dm-rp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dm-rp-x{width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;
  font-size:16px;line-height:1;color:rgba(255,255,255,.6);cursor:pointer;transition:.12s}
.dm-rp-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.dm-rp-h{font-size:14px;font-weight:700;letter-spacing:.3px}
.dm-rp-txt{margin:9px 0 11px;padding:7px 9px;border-radius:8px;border-left:2px solid rgba(79,140,255,.9);
  background:rgba(255,255,255,.055);color:rgba(255,255,255,.78);font-size:12.5px;line-height:1.5;word-break:break-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-rp-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dm-rp-opt{display:flex;align-items:center;justify-content:center;height:29px;padding:0 4px;border-radius:7px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  font-size:12px;color:rgba(255,255,255,.78);cursor:pointer;user-select:none;transition:.12s;white-space:nowrap}
.dm-rp-opt i{display:none}
.dm-rp-opt:hover{border-color:rgba(255,255,255,.32);color:#fff}
.dm-rp-opt.on{color:#fff;font-weight:600;border-color:rgba(79,140,255,.9);background:rgba(79,140,255,.2)}
.dm-rp-ok{display:block;width:auto;min-width:110px;max-width:100%;height:34px;margin:12px auto 0;padding:0 24px;
  border-radius:9px;cursor:pointer;border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#f3f7ff;font-size:13px;font-weight:600;letter-spacing:.5px;transition:.15s}
.dm-rp-ok:hover{border-color:rgba(255,255,255,.2);
  background:linear-gradient(160deg,rgba(255,255,255,.25),rgba(255,255,255,.1))}
.dm-rp-ok:active{transform:translateY(1px);
  box-shadow:0 3px 10px rgba(0,0,0,.24),inset 0 2px 6px rgba(0,0,0,.2)}
@media (max-width:520px){.dm-rp{width:100%;padding:12px}.dm-rp-opts{gap:5px}.dm-rp-opt{font-size:11.5px;height:28px}}
.dmColorRow i{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;display:inline-block;transition:.15s}
.dmColorRow i.on{border-color:#fff;transform:scale(1.12)}
.dmColorRow .dmColorPick{position:relative;width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;
  display:inline-block;transition:.15s;overflow:hidden;
  background:conic-gradient(#ff5f74,#ffd43b,#2bb673,#22b8cf,#7b6bff,#ff7eb3,#ff5f74)}
.dmColorRow .dmColorPick.on{border-color:#fff;transform:scale(1.12)}
.dmColorRow .dmColorPick input{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);padding:0;border:0;opacity:0;cursor:pointer}
.pop .chips{display:flex;gap:6px;padding:4px 10px 8px;flex-wrap:wrap}
.pop .chip2{padding:4px 12px;border-radius:16px;font-size:12px;cursor:pointer;color:#c6cef0;border:1px solid rgba(255,255,255,.18);transition:.15s}
.pop .chip2.on{color:#fff;background:var(--p-grad);border-color:transparent}
.pop.pop-dm{min-width:238px}
.pop .dm-mode-tip{padding:0 10px 7px;font-size:11px;line-height:1.6;color:#7f8dbb}
.pop .dmEmojiRow{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:2px 6px 8px;max-height:122px;overflow-y:auto;overscroll-behavior:contain}
.pop .dmEmojiRow::-webkit-scrollbar{width:4px}
.pop .dmEmojiRow::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.pop .dmEmojiRow span{height:28px;display:grid;place-items:center;border-radius:8px;cursor:pointer;font-size:17px;line-height:1;transition:.12s}
.pop .dmEmojiRow span:hover{background:rgba(255,255,255,.14)}
.pop .set-lb{min-width:64px}
.pop .chip2.dm-block.on{background:linear-gradient(120deg,#ff6b83,#ff9a6b)}
.pop .inrow{display:flex;align-items:center;gap:10px;padding:7px 10px;font-size:12.5px;color:#dfe7ff}
.pop .inrow input[type=range]{flex:1;accent-color:var(--p-acc)}
.pop .inrow output{width:34px;text-align:right;color:#8fd4ff;font-family:ui-monospace,Consolas,monospace;font-size:11px}
.dm-list-note{font-size:11px;color:#8fa0d8;padding:2px 0 10px;line-height:1.6}
.dm-row{display:flex;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px dashed rgba(255,255,255,.08);cursor:pointer;transition:background .12s}
.dm-row:hover{background:rgba(255,255,255,.06)}
.dm-time{flex:none;font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#8fd4ff;background:rgba(143,212,255,.08);padding:2px 7px;border-radius:7px}
.dm-txt{flex:1;min-width:0;font-size:13px;color:#eef2ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-color{flex:none;width:10px;height:10px;border-radius:3px;box-shadow:0 0 6px rgba(0,0,0,.3)}
.side-panel{position:absolute;top:10px;right:10px;bottom:10px;width:280px;max-width:calc(86% - 10px);z-index:44;padding:0;overflow:hidden;
  background:rgb(16 22 48 / 0%);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  color:#e7ecff;transform:translateX(calc(100% + 24px));transition:transform .28s;box-shadow:0 18px 50px rgba(0,0,0,.42)}
.side-panel.show{transform:none}
.side-panel #panelBody{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:46px 16px 18px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.26) transparent}
.side-panel #panelBody,.side-panel .sp-list{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.26) transparent}
.side-panel #panelBody::-webkit-scrollbar,.side-panel .sp-list::-webkit-scrollbar{width:8px;height:8px}
.side-panel #panelBody::-webkit-scrollbar-track,.side-panel .sp-list::-webkit-scrollbar-track{background:transparent}
.side-panel #panelBody::-webkit-scrollbar-thumb,.side-panel .sp-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:8px;border:2px solid transparent;background-clip:content-box}
.side-panel #panelBody::-webkit-scrollbar-thumb:hover,.side-panel .sp-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4);background-clip:content-box}
.side-panel #panelBody::-webkit-scrollbar-button,.side-panel .sp-list::-webkit-scrollbar-button{display:none;width:0;height:0}
.side-panel #panelBody::-webkit-scrollbar-corner,.side-panel .sp-list::-webkit-scrollbar-corner{background:transparent}
.side-panel .sp-title{font-size:13px;font-weight:800;letter-spacing:1px;color:#93a7e8;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.side-panel .sp-title svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-panel #panelBody.has-head{display:flex;flex-direction:column;padding:0;overflow:hidden}
.side-panel .sp-head{flex:none;padding:46px 16px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.side-panel .sp-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 16px 18px}
.side-panel .sp-head .sp-title{margin-bottom:6px}
.side-panel .wt-room{font-size:11px;color:#7d8fc2;word-break:break-all}
.side-panel .sp-close{position:absolute;top:12px;right:12px;z-index:6;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#c6cef0;background:rgba(255,255,255,.1);border:0;padding:0}
.side-panel .sp-close:hover{background:rgba(255,255,255,.2);color:#fff}
.side-panel .sp-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.side-panel .pbtn{display:block;width:100%;border:0;cursor:pointer;color:#fff;background:var(--p-grad);
  border-radius:10px;padding:9px 0;font-size:12.5px;font-weight:700;transition:.2s;margin-top:10px}
.side-panel .pbtn:hover{filter:brightness(1.12)}
.side-panel .pbtn.ghost{background:rgba(255,255,255,.12);color:#c6d2ff}
.side-panel .wt-note{font-size:11.5px;line-height:1.9;color:#8fa0d8;padding:2px 0}
.side-panel .wt-note.warn{color:#ffb3c0}
.member{display:flex;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px dashed rgba(255,255,255,.1);font-size:13px}
.member .m-dot{width:8px;height:8px;border-radius:50%;background:#7ef2b2;box-shadow:0 0 8px #7ef2b2;flex:none}
.member .m-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member .m-role{margin-left:auto;font-size:10.5px;padding:1px 8px;border-radius:10px;background:rgba(255,255,255,.12);color:#b9c6f5}
.member .wt-req{margin-left:auto;display:flex;gap:6px}
.member .wt-req b{cursor:pointer;font-weight:600;font-size:11px;padding:2px 9px;border-radius:9px;transition:.15s}
.member .wt-ok{background:rgba(74,222,128,.16);color:#8bf0ab;border:1px solid rgba(74,222,128,.35)}
.member .wt-ok:hover{background:rgba(74,222,128,.3)}
.member .wt-no{background:rgba(255,255,255,.1);color:#b9c6f5;border:1px solid transparent}
.member .wt-no:hover{background:rgba(255,90,120,.22);color:#ffc3ce}
.member .m-role.cap{background:var(--p-grad);color:#fff}
.sw-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12.5px;color:#c6cef0;border-bottom:1px dashed rgba(255,255,255,.08)}
.sw{position:relative;width:40px;height:22px;border-radius:20px;background:rgba(255,255,255,.18);cursor:pointer;transition:.2s;flex:none}
.sw::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.sw.on{background:var(--p-grad)}
.sw.on::after{left:21px}
.oops{position:absolute;inset:0;z-index:23;display:none;place-items:center;text-align:center;color:#dbe4ff;
  background:rgba(6,9,24,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.oops.show{display:grid}
.oops .oops-in{max-width:560px;padding:0 22px}
.oops .oops-ic{width:66px;height:66px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;font-size:30px;color:#fff;
  background:rgba(255,95,116,.22);border:1px solid rgba(255,95,116,.5)}
.oops .oops-ic svg{width:30px;height:30px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.oops .loader.oops-ld{position:relative;inset:auto;z-index:auto;display:none;width:66px;height:66px;margin:0 auto 14px;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.oops .loader.oops-ld.show{display:grid}
.oops h3{font-size:17px;margin:0 0 8px}
.oops p{font-size:12.5px;color:#9db0e2;margin:0 0 18px;word-break:break-all;line-height:1.8}
.oops .retry{display:inline-flex;align-items:center;gap:7px;padding:9px 22px;border-radius:22px;cursor:pointer;font-size:13px;color:#fff;
  background:var(--p-grad);border:0;font-weight:600;white-space:nowrap;flex-shrink:0}
.stage.fullscreen{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;z-index:9999}
.stage.webfs{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-height:none;margin:0;border-radius:0;z-index:9998}
body.p-webfs{overflow:hidden}
body.p-wide .p-wrap{max-width:none;padding:16px 12px 40px}
body.p-wide .stage{max-height:88vh;border-radius:14px}
body.p-embed{margin:0;overflow:hidden;background:#000;height:100vh;height:100dvh}
body.p-embed .p-topbar,
body.p-embed .p-title,
body.p-embed .p-meta,
body.p-embed .land-tip,
body.p-embed .url-card{display:none!important}
body.p-embed .p-wrap{max-width:none;margin:0;padding:0;height:100%}
body.p-embed .stage{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-height:none;aspect-ratio:auto;margin:0;border-radius:0;border:0;box-shadow:none}
.stage.fullscreen .ctrl,.stage.webfs .ctrl,body.p-embed .stage .ctrl{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.stage:fullscreen{width:100%;height:100%;max-height:none;aspect-ratio:auto;margin:0;border-radius:0}
.stage:-webkit-full-screen{width:100%;height:100%;max-height:none;aspect-ratio:auto}
.stage.rot90{position:fixed;top:50%;left:50%;right:auto;bottom:auto;margin:0;border-radius:0;
  width:100vh;height:100vw;width:100dvh;height:100dvw;max-width:none;max-height:none;z-index:9999;
  transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center}
.stage.ext .dm-dock{display:none}
.stage.ext .dm-layer .dm{font-size:15px}
.snap-flash{position:absolute;inset:0;z-index:70;background:#fff;opacity:0;pointer-events:none;transition:opacity .3s}
.snap-flash.on{opacity:.92}
.p-meta{max-width:1180px;margin:0 auto;padding:14px 20px 34px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.p-meta .foot{font-size:11.5px;color:#9aa6c8}
.p-meta .tag{font-size:11px;padding:3px 11px;border-radius:16px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);color:#6b7696}
.p-meta .tag b{color:#3d54e8}
@media (max-width:760px){
  .p-topbar .back{font-size:0}
  .p-topbar .back svg{width:16px;height:16px;margin:0}
  .dm-dock{left:50%;right:auto;bottom:92px;max-width:calc(100% - 24px)}
  .txt-dm{width:130px}
  .dm-dock .dm-send{flex:none;height:32px;padding:0 13px;font-size:12px;border-radius:16px}
  .dm-mob{bottom:calc(84px + env(safe-area-inset-bottom,0px));height:32px;padding:0 6px 0 12px;gap:6px;max-width:calc(100% - 16px)}
  .dm-mob-input{width:120px;font-size:12.5px;padding:4px}
  .dm-mob-entry{right:8px;bottom:calc(87px + env(safe-area-inset-bottom,0px));width:26px;height:26px}
  .dm-mob-entry svg{width:16px;height:16px}
  .dm-mob-send{width:26px;height:26px}
  .dm-mob-send svg{width:14px;height:14px}
  .dm-mob-send::before{left:-4px;height:13px}
}
@media (max-width: 900px){
  .p-topbar .sub{display:none}
}
@media (max-width: 760px){
  .p-wrap{padding:12px 12px 2px}
  .p-topbar{padding:14px 12px 0}
  .p-title h1{font-size:16px}
  .p-title{margin-bottom:10px}
  .ctrl{padding:26px 8px 6px}
  .btn-row{gap:2px}
  .vol-wrap{margin-left:8px}
  .btn-right{gap:2px}
  .btn-right .cbtn{flex:none}
  .cbtn{width:34px;height:34px;border-radius:9px;font-size:17px}
  .cbtn svg{width:17px;height:17px}
  .cbtn.xs{width:28px;height:28px}
  .cbtn.xs svg{width:14px;height:14px}
  #rateLabel{display:none}
  .timeline{gap:6px}
  .t-time{font-size:11px}
  .t-range{height:26px}
  .big-btn{width:56px;height:56px;font-size:26px}
  .big-btn svg{width:24px;height:24px;margin-left:3px}
  .loader .ring{width:44px;height:44px;border-width:2.5px}
  .loader .ring2{width:28px;height:28px;margin:8px;border-width:2.5px}
  .loader .p-state{font-size:11.5px}
  .oops .oops-in{max-width:94%;padding:0 14px}
  .oops .oops-ic{width:52px;height:52px;margin:0 auto 10px;border-radius:16px;font-size:24px}
  .oops .oops-ic svg{width:24px;height:24px}
  .oops h3{font-size:15px;margin:0 0 6px}
  .oops p{font-size:11.5px;margin:0 0 14px;line-height:1.7}
  .oops .retry{padding:7px 16px;font-size:12px;border-radius:18px;gap:5px}
  .st-top{padding:8px 10px;gap:8px}
  .st-title{max-width:60%}
  .p-meta{padding:10px 12px 24px}
  .stage{border-radius:14px}
  .txt-dm{width:150px}
  .btn-row .spacer{display:none}
  .dm2-bar{flex:1 1 auto;min-width:0;max-width:380px;margin:0 2px;padding:0 12px 0 14px;gap:6px}
  .dm2-bar .cbtn{flex:none}
  .dm2-input-wrap{min-width:0;max-width:none}
  #btnRate,#btnSnap,#btnLoop,#btnWatch,#btnPip,#btnDmList,#btnWfs,#btnFx,.vol-wrap{display:none}
  #btnSet{display:none}
  .stage:-webkit-full-screen #btnSet{display:grid}
  .stage:fullscreen #btnSet{display:grid}
  .stage.fullscreen #btnSet{display:grid}
  .stage.webfs #btnSet{display:grid}
}
@media (max-width: 480px){
  .cbtn{width:32px;height:32px}
  .cbtn svg{width:16px;height:16px}
  .dm2-bar{height:32px;padding:0 10px 0 12px}
  .dm2-bar .cbtn{width:26px;height:26px;font-size:14px}
  .dm2-bar .cbtn svg{width:14px;height:14px}
  .st-title{max-width:56%}
  .p-topbar h1{font-size:16px}
  .demo-list{gap:6px}
  .demo-item{font-size:10.5px;padding:6px 3px}
  .demo-item svg{width:11px;height:11px}
  .demo-item small{display:none}
}
.pop.pop-sheet{border-radius:16px;animation:sheetIn .22s cubic-bezier(.2,.8,.3,1)}
@keyframes sheetIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .pop{padding:10px;border-radius:14px}
  .pop .pop-title{padding:3px 8px;font-size:11.5px}
  .pop .item{padding:10px;font-size:13.5px}
  .pop .row{padding:8px 10px;font-size:13px}
  .pop .chips{gap:7px;padding:4px 8px 9px}
  .pop .chip2{padding:6px 14px;font-size:12.5px}
  .pop .inrow{padding:9px 10px;font-size:13px}
  .pop.set-pop{width:calc(100% - 16px)}
  .pop.set-pop .set-row,.pop.set-pop .row{padding:11px 10px}
  .pop.set-pop .set-opts{padding:2px 2px 6px}
}