/* 官网「在线试玩」：照软件主界面（SHOW0-CPP/modules/ui/qml/main）的尺寸、颜色、字体做的网页仿制品，只有外观和点击反馈，不接真功能。
   舞台按软件默认窗口 928×644 摆，坐标都是窗口坐标；外层按可用宽度整体缩放（sim.js 设 --k）。 */
.s0sim { position: relative; width: 100%; max-width: 928px; margin: 0 auto; height: calc(644px * var(--k, 1)); }
.s0sim .s0-scale { position: absolute; left: 0; top: 0; width: 928px; height: 644px; transform: scale(var(--k, 1)); transform-origin: 0 0; }
.s0-win {
  position: absolute; inset: 0; overflow: hidden; border-radius: 8px;
  background: #f6eedb radial-gradient(#e1dcd0 1px, transparent 1.4px) 0 0 / 24px 24px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 18px 48px rgba(30,30,36,.28), 0 4px 12px rgba(30,30,36,.16);
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif; color: #212121;
  user-select: none; -webkit-user-select: none; cursor: default; line-height: 1.3;
}
.s0-win * { box-sizing: border-box; }
.s0-abs { position: absolute; }
.s0-btn { cursor: pointer; }

/* 顶栏 */
.s0-logo { left: 56.4px; top: 16px; width: 97.3px; height: 34px; opacity: .86; cursor: pointer; }
.s0-ver { left: 159px; top: 28px; font-size: 12px; color: #9a9a9a; opacity: .85; }
.s0-kind { left: 206px; top: 34px; width: 64px; height: 26px; transform: rotate(-1.5deg); cursor: pointer; }
.s0-kind span {
  position: absolute; left: 2px; right: 0; top: 0; text-align: center; font-weight: 600; font-size: 20px; letter-spacing: 2px; line-height: 26px;
  color: #e6ffff; -webkit-text-stroke: 1px rgba(11,11,11,.75); paint-order: stroke fill;
  text-shadow: 0 0 1px #97f3ff, 0 0 2px #97f3ff, 0 0 5px #97f3ff, 0 0 10px #97f3ff;
}
.s0-win.music .s0-kind span { color: #ff8000; -webkit-text-stroke: 1px #0b0b0b; text-shadow: 0 0 2px rgba(255,128,0,.72), 0 0 6px rgba(255,128,0,.72), 0 0 10px rgba(255,128,0,.72); }
.s0-kind.bounce span { animation: s0-kind .56s linear; }
@keyframes s0-kind {
  0% { font-size: 20px; animation-timing-function: cubic-bezier(.4,0,1,1); }
  25% { font-size: 6px; animation-timing-function: cubic-bezier(.2,0,.2,1); }
  50.5% { font-size: 26px; animation-timing-function: cubic-bezier(.2,0,.2,1); }
  76% { font-size: 14px; animation-timing-function: cubic-bezier(.2,0,.2,1); }
  100% { font-size: 20px; }
}
.s0-ink {
  font-weight: 700; font-size: 18px; letter-spacing: 2px; color: #949494; white-space: nowrap;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35));
}
.s0-top { top: 21px; width: 28px; height: 24px; cursor: pointer; }
.s0-top .s0-ink { position: absolute; left: -6px; right: -6px; top: -2px; text-align: center; padding-left: 2px; transition: transform 80ms ease; }
.s0-top:active .s0-ink, .s0-quick:active .s0-qtext { transform: translateY(1px); }
.s0-wc { top: 23px; height: 20px; display: flex; align-items: center; justify-content: center; color: #909090; }
.s0-wc svg { display: block; }
.s0-wc.close { color: #ff8000; }

/* 左侧入口 */
.s0-side { z-index: 3; left: 8px; width: 96px; height: 38px; transform: rotate(-2deg); display: flex; align-items: center; gap: 4px; padding-left: 4px;
  font-weight: 600; font-size: 16px; color: #4d4c4a; cursor: pointer; transition: color 120ms, opacity 200ms; }
.s0-side:hover { color: #6f6d6b; }
.s0-side svg { flex: none; }
.s0-win.card-open .s0-side { opacity: 0; pointer-events: none; }

/* 歌名 / 歌手 */
.s0-meta { pointer-events: none; top: 88px; left: 0; right: 0; height: 73px; transition: left 300ms cubic-bezier(0,0,.2,1), right 300ms cubic-bezier(0,0,.2,1); }
.s0-meta-in { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.s0-title { pointer-events: auto; position: relative; display: inline-block; margin-top: -4.9px; transform: rotate(-2deg); background: #ff3344; padding: 2px 12px 3px;
  font-weight: 700; font-size: 24px; line-height: 32px; white-space: nowrap; color: #212121; z-index: 2; }
.s0-corner { position: absolute; width: 28px; height: 24px; border: 0 solid #77736d; pointer-events: none; }
.s0-corner.tl { left: -8px; top: -7px; border-top-width: 2px; border-left-width: 2px; transform: rotate(-2deg); transform-origin: 0 0; }
.s0-corner.br { right: -8px; bottom: -7px; border-right-width: 2px; border-bottom-width: 2px; transform: rotate(2deg); transform-origin: 100% 100%; }
.s0-singer { pointer-events: auto; position: absolute; top: 47px; left: calc(50% + 10px); background: #ffdc12; padding: 3px 8px; display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 15px; line-height: 20px; white-space: nowrap; z-index: 1; }
.s0-heart { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transform: rotate(-1deg); }
.s0-heart .h-off { fill: #8a8a8a; }
.s0-heart .h-on { fill: #ff3232; display: none; }
.s0-heart.on .h-on { display: block; animation: s0-pop .5s ease-out; }
.s0-heart.on .h-off { display: none; }
@keyframes s0-pop { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* 歌词 */
.s0-lyrics { pointer-events: none; top: 54px; height: 503px; left: 0; right: 0; overflow: hidden; transition: left 300ms cubic-bezier(0,0,.2,1), right 300ms cubic-bezier(0,0,.2,1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 112px, rgba(0,0,0,.18) 132px, rgba(0,0,0,.48) 182px, rgba(0,0,0,.76) 232px, #000 calc(50% - 58px), #000 calc(50% + 76px), #000 calc(100% - 108px), rgba(0,0,0,.44) calc(100% - 52px), transparent calc(100% - 10px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, transparent 112px, rgba(0,0,0,.18) 132px, rgba(0,0,0,.48) 182px, rgba(0,0,0,.76) 232px, #000 calc(50% - 58px), #000 calc(50% + 76px), #000 calc(100% - 108px), rgba(0,0,0,.44) calc(100% - 52px), transparent calc(100% - 10px), transparent 100%); }
.s0-lrow { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; font-weight: 600; }
.s0-lrow .base, .s0-lrow .fill { display: inline-block; color: #f9f9f5; -webkit-text-stroke: 2px rgba(0,0,0,.85); paint-order: stroke fill; }
.s0-lrow.center .base { -webkit-text-stroke-color: rgba(0,0,0,.58); }
.s0-lrow.current .base { -webkit-text-stroke-color: rgba(0,0,0,.85); }
.s0-lrow .wrapper { position: relative; display: inline-block; }
.s0-lrow .fill { position: absolute; left: 0; top: 0; color: #facc15; clip-path: inset(0 100% 0 0); }
.s0-lrow.hide { visibility: hidden; }
.s0-ci { left: 864px; top: 480px; width: 32px; height: 28px; transform: rotate(2deg); cursor: pointer; transition: transform 90ms ease; }
.s0-ci:active { transform: rotate(2deg) scale(.95); }
.s0-chroma { font-weight: 500; color: #facc15; -webkit-text-stroke: 1px #000; paint-order: stroke fill; text-shadow: -1px 0 #ff001b, 1px 0 #004cff; }
.s0-ci .s0-chroma { font-size: 28px; line-height: 28px; display: block; text-align: center; }

/* 波形条 */
.s0-wave { left: 1px; top: 517px; width: 926px; height: 50px; border-radius: 7px; background: rgba(0,0,0,.45); border: 1px solid rgba(94,164,174,.26);
  box-shadow: inset 0 1px 0 rgba(218,250,252,.07), inset 0 -1px 0 rgba(1,28,43,.22); overflow: hidden; cursor: pointer; transition: opacity 0s; }
.s0-wave::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(203,249,252,.05), rgba(44,175,190,.015) 42%, rgba(0,35,58,.06)); pointer-events: none; }
.s0-wave canvas { position: absolute; left: 0; top: 0; width: 924px; height: 48px; }
.s0-wave .head { position: absolute; left: 255.25px; top: 3px; bottom: 3px; width: 1.5px; background: rgba(128,239,248,.78); box-shadow: 0 0 10px rgba(70,223,238,.95); }
.s0-wave .head::after { content: ""; position: absolute; left: .25px; top: 0; bottom: 0; width: 1px; background: rgba(232,254,255,.98); }
.s0-win.wave-off .s0-wave { opacity: 0; }

/* 进度条和时间 */
.s0-prog { left: 0; top: 565px; width: 928px; height: 15px; cursor: pointer; }
.s0-prog .track { position: absolute; left: 0; right: 0; top: 5px; height: 5px; border-radius: 3px; background: #42515e; }
.s0-prog .done { position: absolute; left: 0; right: 0; top: 1px; height: 3px; border-radius: 2px; background: #facc15; transform-origin: 0 50%; transform: scaleX(0); }
.s0-prog .knob { position: absolute; top: 4px; width: 9px; height: 7px; margin-left: -4.5px; border-radius: 4px; background: linear-gradient(#d2d2d1, #80807f); }
.s0-time { top: 573px; font-weight: 700; font-size: 14px; line-height: 21px; color: #686868; font-variant-numeric: tabular-nums; }

/* 模式球 */
.s0-ball { top: 588px; width: 38px; height: 38px; cursor: pointer; }
.s0-ball .body { position: absolute; inset: 0; border: 4px solid #1e1e24; background: var(--c); box-shadow: 3px 4px 0 #1e1e24; border-radius: var(--r);
  transition: border-radius 180ms ease, background-color 180ms ease; filter: url(#s0-pencil); }
.s0-ball:not(.on) .body { background: var(--dim); }
.s0-ball.on .body { box-shadow: 0 0 0 2px #fdfbf7, 5px 6px 0 2px #1e1e24; }
.s0-ball.on { transform: translateY(-2px); }
.s0-ball .lab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #1e1e24; transform: rotate(-5deg); transition: transform 180ms ease; }
.s0-ball:hover { transform: translateY(-4px) scale(1.18); }
.s0-ball:hover .s0-ballin { animation: s0-sway .6s ease-in-out infinite; }
.s0-ball .s0-ballin { position: absolute; inset: 0; }
.s0-ball:hover .body { background: var(--hc); border-radius: var(--hr); box-shadow: 4px 6px 0 #1e1e24; }
.s0-ball:hover .lab { color: #fff; text-shadow: 2px 2px 0 #1e1e24; transform: rotate(15deg) scale(1.08); }
@keyframes s0-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.s0-ball.off { opacity: .45; cursor: default; }
.s0-ball.off:hover { transform: none; }
.s0-ball.off:hover .s0-ballin { animation: none; }
.s0-ball.off:hover .body { background: var(--dim); border-radius: var(--r); box-shadow: 3px 4px 0 #1e1e24; }
.s0-ball.off:hover .lab { color: #1e1e24; text-shadow: none; transform: rotate(-5deg); }
.s0-doodle { position: absolute; left: 50%; bottom: calc(100% + 20px); transform: translateX(-50%) rotate(3deg); white-space: nowrap; pointer-events: none;
  border: 3px solid #1e1e24; padding: 6px 12px; border-radius: 255px 25px 225px 25px / 25px 225px 25px 255px; box-shadow: 4px 6px 0 #1e1e24;
  font-weight: 800; font-size: 14px; line-height: 1; background: var(--hc); color: #1e1e24; opacity: 0; transition: opacity 0s; }
.s0-doodle::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; background: inherit;
  border-right: 3px solid #1e1e24; border-bottom: 3px solid #1e1e24; transform: rotate(45deg); }
.s0-ball:not(.off):hover .s0-doodle { opacity: 1; transition: opacity 120ms cubic-bezier(0,0,.58,1); }
.s0-ball[data-i="1"] .s0-doodle { color: #fff; text-shadow: 2px 2px 0 #1e1e24; }

/* 喇叭和音量 */
.s0-spk { left: 300px; top: 593.25px; width: 48px; height: 28px; cursor: pointer; }
.s0-spk .ic { position: absolute; left: 9px; top: -1px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.s0-spk:hover .ic { animation: s0-wiggle .5s ease; }
@keyframes s0-wiggle { 50% { transform: rotate(-10deg) scale(1.15); } }
.s0-vol { position: absolute; left: 37px; top: -120px; width: 34px; height: 156px; opacity: 0; transform: translateY(3px) scale(.96); transform-origin: 50% 100%;
  transition: opacity 130ms ease, transform 130ms ease; pointer-events: none; }
.s0-spk:hover .s0-vol { opacity: 1; transform: none; pointer-events: auto; }
.s0-vol .tr { position: absolute; left: 14px; top: 8px; width: 7px; height: 120px; border-radius: 4px; background: #000; border: 2px solid #000; overflow: hidden; cursor: pointer; }
.s0-vol .tr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; width: 3px; background: #696968; }
.s0-vol .lv { position: absolute; left: 0; right: 0; bottom: 0; background: #facc15; transition: height 120ms ease-out; }
.s0-vol .pc { position: absolute; left: 0; right: 0; top: 136px; text-align: center; font-size: 12px; font-weight: 600; color: #000; font-variant-numeric: tabular-nums; }

/* 播放三键 */
.s0-tr { top: 581.25px; left: 385px; width: 158px; height: 40px; display: flex; align-items: flex-end; gap: 12px; }
.s0-tb { position: relative; flex: none; border: 3px solid #4d4c4a; box-shadow: 0 3px 0 var(--side), 0 7px 0 #4d4c4a; background: var(--face);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 100ms ease, box-shadow 100ms ease; }
.s0-tb:active, .s0-tb.press { transform: translateY(3px); box-shadow: 0 0 0 transparent, 0 3px 0 #4d4c4a; }
.s0-tb.prev:active { box-shadow: 0 0 0 var(--side), 0 3px 0 #4d4c4a; }
.s0-tb.prev, .s0-tb.next { width: 42px; height: 32px; border-radius: 14px; margin-bottom: 0; }
.s0-tb.play { width: 50px; height: 40px; border-radius: 10px; }
.s0-tb svg { display: block; }

/* 右侧一排 */
.s0-pm { left: 632px; top: 591.25px; width: 36px; height: 28px; display: flex; align-items: center; justify-content: center; }
.s0-win:not(.music) .s0-pm { opacity: .45; }
.s0-win.music .s0-pm { cursor: pointer; }
.s0-win.music .s0-pm:active svg { transform: scale(.9025); }
.s0-vp { left: 692.6px; top: 591.25px; width: 28px; height: 28px; cursor: pointer; }
.s0-quick { top: 591.25px; width: 48px; height: 28px; cursor: pointer; }
.s0-qtext { position: absolute; left: 4px; top: 3px; width: 40px; height: 22px; text-align: center; line-height: 22px; }
.s0-quick.on .s0-qtext { filter: none; color: var(--on);
  text-shadow: -1px -1px 0 #ff001b, -1px 0 0 #ff001b, -1px 1px 0 #ff001b, 1px -1px 0 #004cff, 1px 0 0 #004cff, 1px 1px 0 #004cff; }

/* K歌列表卡 */
.s0-card { left: 12px; top: 126px; width: 280px; height: 398px; transform: translateX(-356px) rotate(-1deg); opacity: 0; pointer-events: none;
  transition: transform 320ms cubic-bezier(.4,0,.2,1), opacity 320ms cubic-bezier(.4,0,.2,1); z-index: 5; }
.s0-card.open { transform: rotate(-1deg); opacity: 1; pointer-events: auto; }
.s0-card .frame { position: absolute; inset: 0; border: 3px solid #4d4c4a; border-radius: 24px; background: #fbf7f0; box-shadow: 9px 9px 0 #4d4c4a; overflow: hidden; }
.s0-card .frame::before { content: ""; position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; background: url(subtle-dark-vertical.png); transform: rotate(90deg); opacity: .85; }
.s0-card .inner { position: absolute; inset: 0; transform: rotate(1deg); }
.s0-card.rw { left: 12px; top: 62px; width: 320px; height: 449px; transform: translateX(-356px) rotate(.5deg); }
.s0-card.rw.open { transform: rotate(.5deg); }
.s0-card.rw .frame { box-shadow: 9px 4px 0 #4d4c4a; }
.s0-card.rw .inner { transform: rotate(-.5deg); }
.s0-cover { position: absolute; left: 21px; top: 18px; width: 48px; height: 48px; border: 3px solid #4d4c4a; background: #eafbff; box-shadow: 5px 5px 0 #455a80;
  border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%; overflow: hidden; cursor: pointer; transition: transform 100ms; }
.s0-cover:active { transform: scale(.95); box-shadow: 2px 2px 0 #4d4c4a; }
.s0-cover img { position: absolute; }
.s0-card.open .s0-cover .sun { animation: s0-spin .56s cubic-bezier(.22,.61,.36,1); }
.s0-card.open .s0-cover .cloud { animation: s0-cloud 1.6s cubic-bezier(.22,.72,.24,1) .36s both; }
@keyframes s0-spin { from { transform: rotate(-360deg); } }
@keyframes s0-cloud { from { transform: translateX(50px); opacity: .45; } }
.s0-strip { position: absolute; left: 81px; top: 26.5px; height: 31px; background: #ffdc12; display: flex; align-items: center; padding: 0 44px 0 10px; overflow: hidden;
  font-weight: 800; font-size: 16px; color: #212121; white-space: nowrap; cursor: pointer; }
.s0-strip::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 32px; background: #ff8000; transition: width 180ms ease-out; z-index: 0; }
.s0-strip:hover::after { width: 100%; }
.s0-strip:active { transform: translateY(1px); }
.s0-strip > * { position: relative; z-index: 1; }
.s0-strip img { margin-left: 6px; width: 20px; height: 20px; }
.s0-strip.spin img { animation: s0-spin2 .42s ease-in-out; }
@keyframes s0-spin2 { to { transform: rotate(360deg); } }
.s0-count { position: absolute; right: 46px; top: 59px; font-size: 14px; font-weight: 700; color: #4d4c4a; line-height: 1; }
.s0-collapse { position: absolute; left: 215px; top: 3px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #4d4c4a; cursor: pointer; transition: color 120ms; }
.s0-collapse:hover { color: #6f6d6b; }
.s0-list { position: absolute; left: 17px; top: 77px; width: 246px; height: 258px; border: 3px solid #4d4c4a; border-radius: 17px; background: #d8d2c6;
  box-shadow: inset 2.8px 2.8px 0 #b3ac9f; transform: rotate(-1deg); overflow: hidden; }
.s0-card.rw .s0-list { left: 13px; width: 290px; height: 309px; }
.s0-rows { position: absolute; left: 0; top: 0; width: 100%; transition: transform 360ms cubic-bezier(.33,1,.68,1); }
.s0-row { position: relative; height: 42px; width: 240px; cursor: pointer; transition: background-color 120ms; }
.s0-card.rw .s0-row { width: 284px; }
.s0-row:not(:last-child)::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(77,76,74,.82) 0 2px, transparent 2px 4px); }
.s0-row:hover { background: rgba(255,220,18,.24); }
.s0-row.sel { background: rgba(255,220,18,.32); }
.s0-row .no { position: absolute; left: 2px; width: 21px; top: 0; line-height: 42px; text-align: center; font-size: 13px; font-weight: 600; }
.s0-row .tt { position: absolute; left: 38px; top: 4px; width: 118px; }
.s0-card.rw .s0-row .tt { width: 180px; }
.s0-row .tt b { display: block; font-size: 15px; font-weight: 700; color: #222; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s0-row .tt i { display: block; font-style: normal; font-size: 13px; color: #8a8a8a; line-height: 16px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s0-row .hrt { position: absolute; left: 169px; top: 11px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.s0-row .du { position: absolute; left: 193px; width: 35px; top: 0; line-height: 42px; text-align: center; font-size: 13px; font-weight: 700; color: rgba(33,33,33,.7); }
.s0-card.rw .s0-row .du { left: 230px; width: 48px; }
.s0-row.playing b, .s0-row.playing i, .s0-row.playing .no, .s0-row.playing .du { color: #e6ffff; -webkit-text-stroke: 1px rgba(11,11,11,.75); paint-order: stroke fill;
  text-shadow: 0 0 2px #97f3ff, 0 0 5px #97f3ff; }
.s0-pgb { position: absolute; top: 347px; width: 42px; height: 32px; border-radius: 12px; border: 3px solid #4d4c4a; background: var(--face);
  box-shadow: 0 3px 0 var(--side), 0 5px 0 #4d4c4a; display: flex; align-items: center; justify-content: center; color: #4d4c4a; cursor: pointer; transition: transform 100ms, box-shadow 100ms; }
.s0-pgb:active { transform: translateY(3px); box-shadow: 0 3px 0 #4d4c4a; }
.s0-card.rw .s0-pgb { top: 398px; }
.s0-page { position: absolute; left: 110px; width: 60px; top: 355px; text-align: center; font-size: 13px; font-weight: 700; color: #4d4c4a; }
.s0-card.rw .s0-page { top: 406px; left: 130px; }

/* 搜索栏 */
.s0-search { left: 36px; top: 66px; width: 232px; height: 42px; transform: translateX(-356px) rotate(-1.5deg); opacity: 0; pointer-events: none;
  background: #f5f1e8; border: 3px solid #000; box-shadow: 4px 4px 0 #000; transition: transform 320ms cubic-bezier(.4,0,.2,1), opacity 320ms; z-index: 5; }
.s0-win.kcard .s0-search { transform: rotate(-1.5deg); opacity: 1; pointer-events: auto; }
.s0-search .q { position: absolute; left: 4px; top: 1px; width: 30px; height: 34px; background: #e9b50b; border: 3px solid #000; font-family: "Arial Black", Arial, sans-serif;
  font-size: 20px; line-height: 27px; text-align: center; cursor: pointer; }
.s0-search .q:hover { background: #ffd21c; }
.s0-search input { position: absolute; left: 38px; top: 4px; width: 184px; height: 28px; background: #d8d2c6; border: 3px solid #000; border-radius: 0; padding: 0 0 0 7px;
  font: 14px "Microsoft YaHei", sans-serif; color: #000; outline: none; caret-color: #ffdc12; }
.s0-search input::placeholder { color: #777; }

/* 气泡 / 提示 */
.s0-tip { position: absolute; z-index: 50; pointer-events: none; background: #ffe11a; border: 2px solid #0b0b0b; border-radius: 2px; box-shadow: 4px 5px 0 #1e1e24;
  padding: 5px 11px 6px; font-weight: 700; font-size: 14px; line-height: 18px; letter-spacing: 1px; color: #0b0b0b; white-space: nowrap; opacity: 0; transition: opacity 120ms cubic-bezier(0,0,.58,1); }
.s0-tip.show { opacity: 1; }
.s0-tip::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 11px; height: 11px; margin-left: -6px; background: #ffe11a;
  border-right: 2px solid #0b0b0b; border-bottom: 2px solid #0b0b0b; transform: rotate(45deg); }
.s0-tip { box-sizing: border-box; }
.s0-tip.ext { height: 36px; padding: 0 11px; display: flex; align-items: center; transition: none; }
.s0-tip.param::after { margin-left: 18px; transform: rotate(25deg); }   /* 喇叭的参数气泡：左移 48、尖角右偏 24、转 25°（软件 HoverTipHost parameter 变体） */
.s0-tip.ext::after { width: 11px; height: 11px; }
.s0-tip.below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.s0-toast { position: absolute; left: 50%; top: 250px; z-index: 60; transform: translateX(-50%) rotate(-1deg); background: #ff8000; color: #fff; border: 2px solid #0b0b0b;
  border-radius: 2px; box-shadow: 4px 5px 0 #1e1e24; padding: 8px 16px; font-weight: 700; font-size: 15px; letter-spacing: 1px; white-space: nowrap; opacity: 0;
  pointer-events: none; transition: opacity 160ms; text-shadow: 1px 1px 0 #0b0b0b; }
.s0-toast.show { opacity: 1; }

/* 手机：太窄就放真截图 */
.s0sim-fallback { display: none; }
@media (max-width: 700px) {
  .s0sim { display: none; }
  .s0sim-fallback { display: block; }
}