body>.gr-drum .gr-foot{padding-top:12px!important;padding-bottom:12px!important;position:relative}
body>.gr-drum .gr-scale{height:26px!important;cursor:grab;touch-action:none;outline:none}
body>.gr-drum .gr-scale>i{top:10px!important}
body>.gr-drum .gr-scale>i.on{top:6px!important;height:14px!important}
body>.gr-drum .gr-scale::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;border-radius:2px;background:rgba(255,255,255,.06)}
body>.gr-drum .gr-scale:hover>i{background:rgba(232,236,245,.55)}
body>.gr-drum .w497-knob{position:absolute;top:50%;left:var(--w497-p,0%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff3cf,#e6c982 55%,#b8924a);box-shadow:0 0 0 3px rgba(230,201,130,.18),0 2px 8px rgba(0,0,0,.45);
  pointer-events:none;transition:left .18s cubic-bezier(.32,.72,0,1),transform .15s}
body>.gr-drum .gr-scale.w497-drag{cursor:grabbing}
body>.gr-drum .gr-scale.w497-drag .w497-knob{transition:none;transform:scale(1.25)}
body>.gr-drum .w497-bub{position:absolute;bottom:calc(100% + 8px);left:var(--w497-p,0%);transform:translateX(-50%);max-width:220px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:5px 10px;border-radius:9px;background:rgba(9,18,44,.96);
  border:1px solid rgba(230,201,130,.35);color:#f3e6c6;font:600 12px/1.3 -apple-system,"PingFang SC",sans-serif;letter-spacing:.02em;
  opacity:0;pointer-events:none;transition:opacity .15s}
body>.gr-drum .gr-scale.w497-drag .w497-bub,body>.gr-drum .gr-scale:focus-visible .w497-bub{opacity:1}
body>.gr-drum .gr-scale:focus-visible{box-shadow:0 0 0 2px rgba(230,201,130,.7);border-radius:6px}
body>.gr-drum .w497-hint{display:block;text-align:center;padding:0 15px 10px;margin-top:-4px;font:500 11px/1.4 -apple-system,"PingFang SC",sans-serif;
  letter-spacing:.08em;color:rgba(230,201,130,.92);opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s}
body>.gr-drum .w497-hint.on{opacity:1;transform:none}
@media (pointer:coarse){body>.gr-drum .gr-scale{height:44px!important}body>.gr-drum .gr-scale>i{top:19px!important}body>.gr-drum .gr-scale>i.on{top:15px!important}body>.gr-drum .gr-scale::before{top:21px}body>.gr-drum .w497-knob{width:18px;height:18px;margin:-9px 0 0 -9px}}
@media (prefers-reduced-motion:reduce){body>.gr-drum .w497-knob,body>.gr-drum .w497-hint{transition:none}}

#gi-alert,#w446-msg{touch-action:manipulation}
#gi-alert.w486-drag,#w446-msg.w486-drag{transform:none!important;opacity:1!important}
#gi-alert .w521-line{position:absolute;left:18px;right:18px;bottom:7px;height:1.5px;border-radius:2px;pointer-events:none;overflow:hidden;
  background:rgba(255,255,255,.08)}
#gi-alert .w521-line>i{position:absolute;inset:0;transform-origin:left center;background:linear-gradient(90deg,#c9a86a,#f0d49a);opacity:.75}
#gx-island[data-state=alert] #gi-alert .w521-line>i{animation:w521run var(--w521-ttl,5000ms) linear forwards}
#gi-alert:hover .w521-line>i,#gi-alert:focus-within .w521-line>i{animation-play-state:paused}
@keyframes w521run{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){#gi-alert .w521-line{display:none}}

/* ══ A · 声音行 ══════════════════════════════════════════════ */
/* 岛在没有声音可选时给 #gi-voice-row 挂 hidden 属性（UA 样式 display:none）。
   我们填了内容才顶回来；只顶 display，不碰 visibility，
   否则面板收起时这一行会漏出来。 */
#gi-voice-row.w443-live{display:block!important}
/* 岛的 .gi-seg 写的是 display:flex!important / margin:0!important，
   行内 style 压不过它 —— 隐藏和间距都必须走带 !important 的类。 */
#gi-voice-row .w443-seg.w443-hide{display:none!important}
#gi-voice-row .w443-seg.w443-lang{margin-top:6px!important}
/* 中文页现在是三把声音并排（云健/云扬/晓晓），英文两把。
   按钮吃岛自己的 .gi-seg button 皮，这里只补三联排挤得下所需的收敛。 */
#gi-voice button.w443-v{position:relative;min-width:0;padding-left:2px;padding-right:2px}
#gi-voice button.w443-v>b{display:block;font-weight:600;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gi-voice button.w443-v>small{display:block;font:500 9.5px/1.25 -apple-system,"PingFang SC",sans-serif;
 opacity:.62;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gi-voice button.w443-v:focus-visible{outline:2px solid #c9a86a;outline-offset:-2px}
#w443-msg{margin:6px 0 0;font:500 11px/1.5 -apple-system,"PingFang SC",sans-serif;
 color:#9aa8c2}
#w443-msg:empty{margin:0}
#w443-msg.warn{color:#d8b872}
body>#w443-fallback{position:fixed;right:14px;bottom:120px;z-index:93;
 display:flex;gap:3px;padding:3px;border-radius:999px;
 border:1px solid rgba(201,168,106,.28);background:rgba(9,15,31,.88);
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
 opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
body>#w443-fallback.on{opacity:1;transform:none}
body>#w443-fallback button{padding:6px 11px;border:0;border-radius:999px;
 background:transparent;color:#cdd8ec;cursor:pointer;
 font:600 11.5px/1 -apple-system,"PingFang SC",sans-serif}
body>#w443-fallback button[aria-checked=true]{background:rgba(201,168,106,.9);color:#0a1428}
body>#w443-fallback button:focus-visible{outline:2px solid #c9a86a;outline-offset:2px}
body>#w443-fallback.w443-hide{display:none}

/* ══ B · 庚辛岛 iOS 式交互 ═══════════════════════════════════ */
/* 1. 统一 spring：岛所有位移/缩放共用这一条（轻微过冲，收得住） */
#gx-island-root.w443-isl{--gi-ease:cubic-bezier(.32,.86,.28,1.06)}

/* 2. 真形变层：和胶囊、面板同在 #gx-island 这个居中 fixed 容器里，
      所以只插值宽/高/圆角就够，位置自动对齐 */
#gx-island .w443-morph{position:absolute;left:50%;bottom:0;
 transform:translateX(-50%);pointer-events:none;z-index:0;opacity:0;
 background:var(--gi-glass,rgba(9,15,31,.8));
 -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
 box-shadow:inset 0 0 0 .5px var(--gi-hair,rgba(255,255,255,.1)),
 0 12px 32px -10px rgba(2,8,24,.5);
 will-change:width,height,border-radius,opacity}
/* 形变进行中把胶囊和面板的底压掉，免得三层底叠在一起发灰 */
#gx-island.w443-morphing .gi-cap{box-shadow:none;background:transparent}
#gx-island.w443-morphing .gi-sheet{box-shadow:none;background:transparent}

/* 3/4. 跟手：拖动中关掉过渡，松手再交还给 spring */
#gx-island.w443-drag .gi-cap{transition:none!important}

/* 5. 长按托住：一圈很淡的持握环，不是边框，是呼吸 */
#gx-island.w443-hold .gi-cap{box-shadow:inset 0 0 0 .5px var(--gi-hair,rgba(255,255,255,.1)),
 0 0 0 6px rgba(201,168,106,.10),0 12px 32px -10px rgba(2,8,24,.5)}

/* 6. 播放中的活条：接管岛那三根条，改由 rAF 给高度 */
#gx-island.w443-eq .gi-eq i{animation:none!important;
 transition:height .09s linear}

/* 7. 落定反馈：微弹 + 一道极短的高光掠过（代替 haptic） */
@keyframes w443-settle{0%{transform:scale(1)}38%{transform:scale(1.018)}100%{transform:scale(1)}}
#gx-island.w443-settle .gi-cap{animation:w443-settle .34s cubic-bezier(.32,.86,.28,1.06)}
#gx-island .w443-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 overflow:hidden;opacity:0;z-index:2}
#gx-island .w443-sheen::after{content:"";position:absolute;top:0;bottom:0;width:38%;
 left:-45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent)}
@keyframes w443-sheen{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes w443-sheen-x{0%{left:-45%}100%{left:112%}}
#gx-island .w443-sheen.on{animation:w443-sheen .5s linear}
#gx-island .w443-sheen.on::after{animation:w443-sheen-x .5s cubic-bezier(.4,0,.3,1)}

/* 收敛：动效全部让位给 reduced-motion（岛自己也有一条全局 none） */
@media (prefers-reduced-motion:reduce){
 body>#w443-fallback{transition:none;opacity:1;transform:none}
 #gx-island .w443-morph{display:none!important}
 #gx-island .w443-sheen{display:none!important}
 #gx-island.w443-settle .gi-cap{animation:none!important}
 #gx-island.w443-eq .gi-eq i{transition:none!important}}
@media print{body>#w443-fallback{display:none}}