/* ==========================================================================
   Stem Studio · Liquid Glass
   设计语言照 iOS 26 的 Liquid Glass 来：分层半透明材质 + 同心圆角 +
   镜面高光 + 弹簧回弹。四条硬规则：

   1) 玻璃的正脸是**空的**。苹果 HIG 的实物图（materials-ios-liquid-glass-over-dark）
      量出来：内部是背景的重度模糊 + 一点蓝，均匀一片，**没有任何横向渐变、没有任何反光带**。
      光全部在**边缘那一圈**。所以：面板填充只留极薄一层，凡是在正脸上刷白/刷斜带的
      做法一律不做 —— 那是"半透明矩形"，不是玻璃（上一版那条 150° 斜反光带就是这么翻车的）。
   2) 描边环的分量分布是量过的：**顶 .51 > 底 .40 > 两侧 .21**（苹果那张图里
      顶 143 / 底 117 / 侧 73~98）。所以环用 180deg 的竖直渐变，不是斜向的。
      这一圈是"玻璃"和"半透明矩形"唯一的分界线，比正脸重要得多。
   3) 只有**顶层卡片**做真 backdrop-blur。卡片里的行/按钮已经是"玻璃上的玻璃"，
      再加一层模糊只会糊成一团，也拖慢滚动 —— 那些用薄材质（纯色 + 发丝线）。
   4) 苹果特意写："Only use clear Liquid Glass for components that appear over
      **visually rich backgrounds**"。玻璃透不透，一半取决于背后有没有东西可透 ——
      背景必须够丰富（见 .ambient），否则再准的材质也只是块灰板。
   ========================================================================== */

:root{
  /* ---- 色 ---- */
  --accent:#0a84ff;  --accent-2:#5ac8fa;
  --green:#30d158;   --yellow:#ff9f0a;  --pink:#ff375f;  --purple:#bf5af2;
  /* 底色别用纯黑：纯黑折出来永远是黑，玻璃再薄也亮不起来 */
  --bg:#0a0d14;
  --ink:#f5f7fb;  --ink2:rgba(238,242,250,.68);  --ink3:rgba(238,242,250,.44);

  /* ---- 材质 ----
     填充只剩**一层竖直的极薄渐变**。原来每种材质都带一个"左上角光斑"
     （radial at 6% -24%），那是在正脸上刷光 —— 苹果的实物玻璃正脸是均匀的，
     光斑只会让玻璃变浑。正脸越空，越透。 */
  --g-1:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.012) 58%,rgba(255,255,255,.024));
  --g-2:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.013));
  --g-3:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.032));
  /* 玻璃自带的冷色底。苹果深色玻璃内部实测 [26,30,45] —— 明显偏蓝的一层。
     这层是"玻璃"而不是"灰板"的关键：它给折进来的背景色定了个冷调，
     而且它比纯白填充**透**得多 —— 深色底上加白会变浑，加冷色只会变干净。 */
  --tint:rgba(20,26,46,.26);
  --stroke:rgba(255,255,255,.12);
  --stroke-hi:rgba(255,255,255,.26);
  --well:rgba(8,10,16,.42);          /* 玻璃上的凹槽（波形底、输入框） */
  --hair:rgba(255,255,255,.075);
  --playhead:#fff;                   /* 波形的播放头：深色底白线，浅色底必须反过来 */
  --playhead-glow:rgba(255,255,255,.8);
  /* 20px：苹果实物那张图里，玻璃盘后面的星星是**被抹掉的**，说明模糊分量很重。
     但也不能再往上加 —— 背后的色雾得留一点形状，"透"的前提是看得出后面有东西。 */
  --blur:20px;

  /* ---- 同心圆角：外层 30，往里每层减一档 ---- */
  --r-xl:30px; --r-lg:22px; --r-md:16px; --r-sm:11px; --r-xs:9px;
  --r-pill:999px;

  --sh-card:0 22px 48px -26px rgba(0,0,0,.86), 0 3px 12px -6px rgba(0,0,0,.6);
  --sh-pop:0 30px 70px -28px rgba(0,0,0,.9), 0 6px 20px -10px rgba(0,0,0,.65);
  --ease:cubic-bezier(.32,.72,0,1);
}
html[data-theme=light]{
  --bg:#eef1f7;
  --ink:#0b0d13;  --ink2:rgba(16,20,30,.66);  --ink3:rgba(16,20,30,.44);
  /* 浅色底的玻璃不能靠"加白"分层 —— 白卡片压在浅底上还是白，整页会糊成一张纸。
     浅色下的分层靠三件事：更薄的填充（让背景色雾透上来，玻璃才有东西可折）、
     一圈**深色**发丝（勾出轮廓）、更重的落影（把卡片从底上抬起来）。 */
  --g-1:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.075));
  --g-2:linear-gradient(180deg,rgba(255,255,255,.155),rgba(255,255,255,.065));
  --g-3:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.19));
  /* 浅色下玻璃是**发白**的（苹果那张海滩图：玻璃盘内部 [205,197,184] 奶油白，
     比它压着的沙子还亮一点）。所以浅色的"玻璃底"是白，深色是冷蓝。 */
  --tint:rgba(255,255,255,.34);
  --stroke:rgba(16,20,30,.07);
  --stroke-hi:rgba(16,20,30,.14);
  /* 凹槽必须比卡片**暗**：白压白等于没有凹槽，浅色下波形槽会整块消失 */
  --well:rgba(16,20,30,.05);
  --hair:rgba(16,20,30,.075);
  --playhead:#0b0d13;
  --playhead-glow:rgba(11,13,19,.35);
  --sh-card:0 20px 42px -24px rgba(24,34,64,.34), 0 3px 10px -6px rgba(24,34,64,.18);
  --sh-pop:0 30px 62px -26px rgba(24,34,64,.38), 0 6px 18px -10px rgba(24,34,64,.22);
}

*{box-sizing:border-box}
/* 页面上有一堆"按条件才出现"的块（player / job / nresult …）靠 hidden 属性收起来。
   它们的容器是 display:grid/flex，会把 UA 的 [hidden]{display:none} 压掉 —— 必须 !important。 */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",
       "Microsoft YaHei",system-ui,sans-serif;
  letter-spacing:-.16px; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 78% at 50% -12%,rgba(255,255,255,.09),transparent 62%),
    radial-gradient(90% 60% at 50% 108%,rgba(120,170,255,.06),transparent 68%),
    var(--bg);
  overflow-x:hidden;
}
html[data-theme=light] body{
  background:
    radial-gradient(110% 70% at 50% -8%,#ffffff,transparent 60%),
    linear-gradient(180deg,#eef1f7,#e6ebf4 60%,#e9e6f2);
}
h1,h2,h3{margin:0;letter-spacing:-.4px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,button{font-family:inherit}

/* ---------------------------------------------------------------- 背景结构 */
/* 五团色雾：玻璃后面必须有东西可折射，且要**铺满整屏** —— 否则 blur 出来就是一片死黑。
   四个角各一团是常见的写法，但在宽屏上正中间会留出一条空带，而卡片恰好压在那条空带上，
   于是玻璃退化成深灰矩形（这就是"不纯"的来源）。所以第五团必须落在正中，
   而且要按百分比定位、不能用 vmax 偏移 —— 百分比跟着视口走，宽屏窄屏都不会留缝。 */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none}
/* 色相往灰里收一档（饱和原色直接铺会叠成霓虹彩虹），**但浓度要够**。
   之前为了压住彩虹把 opacity 一路砍到 .2，结果是背景几乎变成一块纯色板 ——
   玻璃压在上面折不出任何东西，于是"透明"变成了"看不见"，这才是"玻璃感没出来"的真因。
   苹果的 HIG 原话就是玻璃要放在 visually rich 的背景上。浓度回来了，
   但玻璃那层冷色底和收敛的 saturate 会把整体统一住，不会再变彩虹。 */
.ambient i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.5;
  will-change:transform}
.ambient i:nth-child(1){width:66vmax;height:66vmax;left:-16%;top:-26%;
  background:radial-gradient(circle,#1a7fe8,transparent 68%);animation:drift1 38s var(--ease) infinite}
.ambient i:nth-child(2){width:56vmax;height:56vmax;right:-18%;top:-12%;
  background:radial-gradient(circle,#8a63e0,transparent 68%);opacity:.44;animation:drift2 46s var(--ease) infinite}
.ambient i:nth-child(3){width:62vmax;height:62vmax;left:16%;top:14%;
  background:radial-gradient(circle,#3fa8d8,transparent 72%);opacity:.4;animation:drift3 52s var(--ease) infinite}
.ambient i:nth-child(4){width:54vmax;height:54vmax;left:-14%;bottom:-20%;
  background:radial-gradient(circle,#d4517a,transparent 70%);opacity:.34;animation:drift4 44s var(--ease) infinite}
.ambient i:nth-child(5){width:50vmax;height:50vmax;right:-10%;bottom:-16%;
  background:radial-gradient(circle,#38b184,transparent 70%);opacity:.3;animation:drift5 58s var(--ease) infinite}
@keyframes drift1{50%{transform:translate3d(9vmax,6vmax,0) scale(1.14)}}
@keyframes drift2{50%{transform:translate3d(-8vmax,10vmax,0) scale(1.08)}}
@keyframes drift3{50%{transform:translate3d(-7vmax,9vmax,0) scale(1.16)}}
@keyframes drift4{50%{transform:translate3d(9vmax,-6vmax,0) scale(1.12)}}
@keyframes drift5{50%{transform:translate3d(-9vmax,-5vmax,0) scale(1.1)}}
/* 浅色底本来就近白，色雾要**收着来**：给多了整页会变成一片蓝，玻璃也跟着染蓝。
   浅色的"亮"是底色自带的，色雾在这里只负责给一点冷暖差。 */
html[data-theme=light] .ambient i{opacity:.46;filter:blur(72px)}
html[data-theme=light] .ambient i:nth-child(2){opacity:.34}
html[data-theme=light] .ambient i:nth-child(3){opacity:.3}
html[data-theme=light] .ambient i:nth-child(4){opacity:.26}
html[data-theme=light] .ambient i:nth-child(5){opacity:.22}

/* 这里原来有三束斜向光带（.rays）。**已删**：用户看过实机后判定"太假"。
   复盘是站得住的 —— 苹果的实物图里玻璃正脸是均匀的，光只在边缘那一圈；
   在背景里拉几条亮带，等于把"光"画在了内容层，读起来是贴纸不是玻璃。
   要"透"，靠的是背后色雾够浓（上面那段），不是靠加线条。 */

@media (prefers-reduced-motion:reduce){.ambient i{animation:none}}

/* 颗粒 + 暗角：玻璃"霜面"的质感来自极细的噪点，没有它，模糊会显得像纯色块。 */
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme=light] .grain{opacity:.035;mix-blend-mode:multiply}
/* 暗角别太狠：它压的是最外圈，而色雾正好也在外圈 —— 收太紧就只剩中间一团死黑。
   收紧范围（60% 起）同时把浓度降到 .34：原来 .44 那一档会把边缘玻璃也拉灰。 */
.vig{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(140% 100% at 50% 40%,transparent 60%,rgba(0,0,0,.34))}
html[data-theme=light] .vig{background:radial-gradient(140% 100% at 50% 32%,transparent 58%,rgba(30,40,70,.1))}

/* ---------------------------------------------------------------- 玻璃材质 */
/* 玻璃 = 一层**几乎空的正脸** + 一圈**有分量的边**。这是这一版最大的改动：
   正脸上什么都没有（没有斜向反光带、没有角部光斑）。苹果实物图里那块玻璃盘
   内部是均匀一片，全部的"玻璃感"都来自边缘那圈亮描边 —— 详见文件头注释。 */
.glass{
  position:relative; isolation:isolate;
  /* 冷色底 + 极薄的一层竖直渐变（颜色必须写在最后一层，否则 shorthand 不合法） */
  background:var(--g-1),var(--tint);
  /* saturate 收到 130%：饱和度是"颜料"，玻璃要的是"光"，稍加一点色彩分离就够。
     brightness 则是 1.55 → 1.14 → **1.04**，一路收到几乎不抬亮度，照苹果那张图量的：
     深色图里玻璃盘**正对面**的背景 L≈31、盘内 L≈30 —— 玻璃对亮度基本是**中性**的，
     它做的只是"模糊 + 偏蓝 + 描边"，并不把背后提亮。之前每版都在抬，越抬越像磨砂牛奶。
     玻璃要亮，亮的是**边**，不是脸。 */
  -webkit-backdrop-filter:blur(var(--blur)) saturate(130%) brightness(1.04);
  backdrop-filter:blur(var(--blur)) saturate(130%) brightness(1.04);
  border:.5px solid var(--stroke);
  /* 外圈落影把玻璃从底上"抬起来"；两道 inset 是**玻璃的厚度** ——
     光从顶边进来、在片材内部衰减几像素才消失。有这两道才有"片材"感，没有就还是矩形。 */
  box-shadow:var(--sh-card),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 2px 14px -8px rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(255,255,255,.07);
}
html[data-theme=light] .glass{
  /* 浅色这边量过一条硬约束：background 本来就近 216，余量很小。
     saturate 一推，蓝通道就先顶到 255（实测到过 [232,246,255]，蓝被削平 =
     玻璃把背后的冷色信息丢了，看起来就是一片漂白）。所以浅色下 saturate 只给 118%、
     brightness 干脆不加 —— "比背景亮"这件事交给上面那层白填充去做（苹果那张图里
     浅色玻璃确实比背景亮，那是它的白材质带来的，不是把背后的亮度乘上去）。 */
  -webkit-backdrop-filter:blur(var(--blur)) saturate(118%) brightness(1.0);
  backdrop-filter:blur(var(--blur)) saturate(118%) brightness(1.0);
  box-shadow:var(--sh-card),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 2px 14px -8px rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(16,20,30,.05);
}
/* 描边环 —— 整块玻璃最要紧的一笔。分量是照苹果实物量的：
   **顶 .51 > 底 .40 > 两侧 .21**（那张图里顶 143 / 底 117 / 侧 73~98）。
   所以这是 **180deg 竖直渐变**，不是斜向的：顶最亮、两侧在中段自然压暗、底再回一点。
   上一版用 148deg 斜环，等于假设光只从左上来 —— 实物是顶和底都受光，两侧才最暗。 */
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:.5px; z-index:3;
  /* 微微偏蓝的白：实物描边是 [143,144,150]、两侧 [73,73,91]，蓝通道高一截 */
  background:linear-gradient(180deg,
    rgba(232,240,255,.66) 0%, rgba(226,234,252,.34) 14%,
    rgba(220,230,250,.19) 42%, rgba(220,230,250,.21) 62%,
    rgba(226,236,252,.30) 84%, rgba(234,242,255,.46) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude; pointer-events:none;
}
/* 浅色下玻璃是**发白**的，环只能靠"比面上更白"来读，所以整体推满 */
html[data-theme=light] .glass::before{
  background:linear-gradient(180deg,
    rgba(255,255,255,1) 0%, rgba(255,255,255,.74) 14%,
    rgba(255,255,255,.52) 42%, rgba(255,255,255,.54) 62%,
    rgba(255,255,255,.68) 84%, rgba(255,255,255,.88) 100%);
}
/* ⚠️ 这里**故意没有** .glass::after / .card::after /.drop::after /.job::after。
   上一版在每张大卡片正面斜刷一条 150° 反光带 + 1px 硬顶边，用户实机一看："太假了，去掉"。
   复盘：在**内容层**画光，等于把光当图案贴上去 —— 而苹果的玻璃正脸是空的，光在边上。
   以后想加"反光"之前先回文件头那条规则。 */
.glass > *{position:relative;z-index:4}
/* 老浏览器没有 backdrop-filter：退回不透明底，至少别糊成看不见字 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(20,23,32,.94)}
  html[data-theme=light] .glass{background:rgba(252,253,255,.96)}
}

.card{border-radius:var(--r-xl);padding:20px}
.tracks,.player,.view{min-width:0}
.player{display:grid;gap:16px}
.player > *,.view > *{min-width:0}

/* ---------------------------------------------------------------- 排版阶梯 */
.lg-title{font-size:34px;line-height:1.12;font-weight:700;letter-spacing:-.9px}
.title2{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.5px}
.head{font-size:17px;font-weight:600;letter-spacing:-.35px}
.sub{font-size:15px;color:var(--ink2);letter-spacing:-.2px;margin:8px 0 0}
.foot{font-size:13px;color:var(--ink3);letter-spacing:-.08px}
.muted{color:var(--ink3)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.spacer{flex:1 1 auto;min-width:0}
.view-head{padding:22px 2px 18px}
.view{position:relative;z-index:1}

/* ---------------------------------------------------------------- 外壳 */
.scroll{position:relative;z-index:1;max-width:940px;margin:0 auto;
  padding:0 max(18px,env(safe-area-inset-left)) 132px}
.top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:11px max(18px,calc(50vw - 470px));
  border-radius:0;border:0;border-bottom:.5px solid var(--hair);
  background:var(--g-2); box-shadow:0 10px 30px -22px rgba(0,0,0,.9);
}
html[data-theme=light] .top{box-shadow:0 10px 26px -22px rgba(24,34,64,.35)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.brand h1{font-size:19px;font-weight:650;letter-spacing:-.5px;white-space:nowrap}
.brand .sub{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin:0;padding-left:12px;border-left:1px solid var(--hair)}
.dot{width:26px;height:26px;border-radius:9px;flex:none;
  background:linear-gradient(150deg,var(--accent-2),var(--accent) 46%,var(--purple));
  box-shadow:0 2px 10px -2px rgba(10,132,255,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.meta{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icobtn{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:var(--ink2);background:var(--g-3);border:.5px solid var(--stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);transition:transform .18s var(--ease),color .18s}
.icobtn:hover{color:var(--ink)}
.icobtn:active{transform:scale(.9)}
.i-sun{display:none}
html[data-theme=light] .i-sun{display:block}
html[data-theme=light] .i-moon{display:none}

/* ---------------------------------------------------------------- 悬浮标签栏 */
.tabs{
  position:fixed;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));margin:0 auto;
  width:min(360px,calc(100vw - 32px));z-index:40;
  display:flex;align-items:center;padding:5px;border-radius:26px;
  background:var(--g-3);box-shadow:var(--sh-pop);
}
.tabs .thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);
  border-radius:21px;background:var(--g-3);border:.5px solid var(--stroke-hi);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .42s var(--ease);z-index:0}
#tabs:has(.tab[data-view=stems].on) .thumb{transform:translateX(0)}
#tabs:has(.tab[data-view=proc].on) .thumb{transform:translateX(100%)}
#tabs:has(.tab[data-view=hist].on) .thumb{transform:translateX(200%)}
.tab{position:relative;z-index:1;flex:1 1 0;min-width:0;padding:11px 6px;border-radius:21px;
  font-size:13.5px;font-weight:550;color:var(--ink3);white-space:nowrap;
  transition:color .3s var(--ease),transform .2s var(--ease)}
.tab.on{color:var(--ink)}
.tab:active{transform:scale(.94)}
.tab[disabled]{opacity:.34;cursor:not-allowed}
@supports not (selector(:has(*))){
  .tabs .thumb{display:none}
  .tab.on{background:var(--g-3);border:.5px solid var(--stroke-hi)}
}

/* ---------------------------------------------------------------- 上传区 */
/* 两种交互，两个区域，刻意分开：
   · 拖放 = 整张 .drop 卡片（拖哪儿都算，这是用户对"拖进来"的直觉）
   · 点选 = 只有 .drop-well 虚线框那一块
   以前 onclick 挂在整张卡片上，点参数行之间的空白也会弹文件对话框 —— 弹得毫无预兆。
   区域要有边界，而且边界得**看得见**：虚线框 + 常驻文案 + 图标呼吸，三重提醒。 */
.drop{border-radius:var(--r-xl);padding:0;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s}
.drop-well{position:relative;display:block;padding:26px 24px 20px;text-align:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .25s var(--ease)}
/* 虚线框和卡片同心：卡片圆角 30 (--r-xl) 减去 inset 8px = 22，正好是 --r-lg。
   差 1px 都看得出来框是歪的。 */
.drop-well::before{content:'';position:absolute;inset:8px;border-radius:var(--r-lg);
  border:1.5px dashed rgba(10,132,255,.3);pointer-events:none;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.drop-icon{position:relative;width:60px;height:60px;margin:0 auto 14px;border-radius:19px;display:grid;place-items:center;
  font-size:26px;color:#fff;
  background:linear-gradient(150deg,var(--accent-2),var(--accent) 52%,var(--purple));
  box-shadow:0 10px 26px -10px rgba(10,132,255,.8),inset 0 1px 0 rgba(255,255,255,.55);
  animation:wellFloat 4.4s var(--ease) infinite;
  transition:transform .3s var(--ease),box-shadow .3s}
/* ⚠️ wellFloat 动的是 **translate**，不是 transform。
   动画一旦占住 transform，:hover{transform:…} 就被覆盖了 —— 这是两个独立属性，各归各的。 */
@keyframes wellFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
/* 两圈错开 2.2s 的扩散环：像在轻轻招手。周期 4.4s 够长，所以不吵 */
.drop-halo{position:absolute;inset:0;border-radius:19px;pointer-events:none}
.drop-halo i{position:absolute;inset:0;border-radius:inherit;opacity:0;
  border:1.5px solid var(--accent-2);animation:wellPing 4.4s var(--ease) infinite}
.drop-halo i:last-child{animation-delay:2.2s}
@keyframes wellPing{0%{transform:scale(1);opacity:.5}55%,100%{transform:scale(1.55);opacity:0}}
/* 标题压到 35%：虚线框和图标当主角，这行字退成"背景音"。
   ⚠️ 用 color 的 alpha，**不能用 opacity** —— opacity 会把子节点一起压，
   「选择文件」这个唯一的动作标签会跟着糊掉。字号/字重还在，层级不会乱。 */
.drop-title{margin:0;font-size:19px;font-weight:600;letter-spacing:-.4px;
  color:rgba(238,242,250,.35)}
html[data-theme=light] .drop-title{color:rgba(16,20,30,.35)}
.drop-hint{margin:8px 0 0;font-size:12.5px;color:var(--ink3)}
/* 常驻提醒：不悬停也能一眼看出"这里能点" */
.drop-cta{margin:12px 0 0;font-size:12.5px;font-weight:550;letter-spacing:-.1px;
  color:var(--accent);opacity:.72;transition:opacity .25s var(--ease)}
/* 悬停 / 键盘聚焦：虚线收成实线、框里点亮、图标抬起来 */
.drop-well:hover::before,.drop-well:focus-visible::before{
  border-style:solid;border-color:rgba(10,132,255,.55);background:rgba(10,132,255,.07)}
.drop-well:focus-visible{outline:none}
.drop-well:hover .drop-icon,.drop-well:focus-visible .drop-icon{transform:translateY(-4px) scale(1.06)}
.drop-well:hover .drop-cta,.drop-well:focus-visible .drop-cta{opacity:1}
.drop-well:hover .link{text-decoration-color:var(--accent)}
.drop-well:active::before{background:rgba(10,132,255,.12)}
.drop-well:active .drop-icon{transform:translateY(-1px) scale(.98)}
.link{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2.5px;
  text-decoration-thickness:1.5px;text-decoration-color:rgba(10,132,255,.45);
  transition:text-decoration-color .25s var(--ease)}
/* 参数区：从 well 里挪出来，只留左右下三边的内边距 */
.drop-inner{padding:0 22px 20px;text-align:left}
/* 拖拽悬停：整张卡片一起响应（拖放的目标本来就是整张卡） */
.drop.over{transform:scale(1.012);box-shadow:0 0 0 2px var(--accent),var(--sh-card)}
.drop.over .drop-well::before{border-style:solid;border-color:var(--accent);background:rgba(10,132,255,.1)}
.drop.over .drop-icon{transform:translateY(-4px) scale(1.06)}
.drop.over .drop-cta{opacity:1}

/* 进度条 */
.bar{height:5px;border-radius:var(--r-pill);background:var(--well);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent),var(--purple));
  box-shadow:0 0 12px -2px rgba(10,132,255,.9);transition:width .35s var(--ease)}
.upbar,.drop > .bar{margin:0 22px 18px}
.bar.big{height:7px}

/* ---------------------------------------------------------------- 参数面板 */
.setup{margin:22px 0 0;text-align:left}
.setup-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--hair)}
.setup-row:first-child{border-top:0;padding-top:4px}
.setup-key{flex:0 0 96px;font-size:13px;font-weight:600;color:var(--ink2);line-height:1.35;padding-top:5px}
.setup-key small{display:block;font-size:11px;font-weight:400;color:var(--ink3);margin-top:2px}
.setup-note{font-size:12.5px;color:var(--ink3);line-height:1.62;margin:12px 0 0}
.setup-note b{color:var(--ink2);font-weight:600}
.setup-note.warn{color:var(--yellow)}
.setup-note.gloss{margin-top:14px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--well);border:.5px solid var(--hair);color:var(--ink2)}
.setup-note.gloss b{color:var(--accent)}

/* 分段控件：iOS 的 segmented control。多选项会自动换行（6 轨 + 极致 + 男女声分离 + 鼓组细分，
   全摆一行在手机上必然溢出）。 */
.seg{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto;min-width:0;
  padding:3px;border-radius:14px;background:var(--well);border:.5px solid var(--hair)}
.seg button{flex:1 1 auto;min-width:0;padding:8px 11px;border-radius:11px;
  font-size:13px;font-weight:550;color:var(--ink2);white-space:nowrap;
  transition:background .22s var(--ease),color .22s,transform .16s var(--ease),box-shadow .22s}
.seg button small{display:block;font-size:11px;font-weight:400;color:var(--ink3);margin-top:2px;
  white-space:normal;line-height:1.35}
.seg button:hover:not(:disabled){color:var(--ink)}
.seg button:active:not(:disabled){transform:scale(.96)}
.seg button[aria-checked="true"]{color:var(--ink);background:var(--g-3);
  border:.5px solid var(--stroke-hi);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.28)}
.seg button[aria-checked="true"] small{color:var(--ink2)}
.seg.multi button[aria-checked="true"]{color:var(--accent);
  background:linear-gradient(180deg,rgba(10,132,255,.22),rgba(10,132,255,.12))}
.seg button:disabled{opacity:.36;cursor:not-allowed}

/* ---------------------------------------------------------------- 任务进度 */
.job{border-radius:var(--r-lg);padding:18px 20px}
.job-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.job-title{font-size:16px;font-weight:600;letter-spacing:-.35px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.job-stage{margin-left:auto;flex:none;font-size:12.5px;color:var(--ink2)}
.job-foot{display:flex;align-items:baseline;gap:12px;margin-top:9px;font-size:12.5px;color:var(--ink2)}
.job-foot .muted{margin-left:auto;text-align:right}
.job.err .job-stage{color:var(--pink)}
.job.err .bar i{background:linear-gradient(90deg,var(--pink),var(--yellow))}

/* ---------------------------------------------------------------- 播放器 */
.overview-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--well);
  border:.5px solid var(--hair);cursor:pointer}
canvas.wave{display:block;width:100%}
.overview{height:92px}
.transport{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:16px}
.time{font-size:14.5px;color:var(--ink2);letter-spacing:.1px}
.time em{font-style:normal;color:var(--ink3);margin:0 3px}
.chip{padding:6px 12px;border-radius:var(--r-pill);font-size:12.5px;color:var(--ink2);
  background:var(--g-2);border:.5px solid var(--stroke);white-space:nowrap}
.chip b{color:var(--ink);font-weight:600}
.tbtn{min-width:40px;height:40px;padding:0 13px;border-radius:var(--r-pill);display:inline-flex;
  align-items:center;justify-content:center;gap:7px;font-size:13.5px;font-weight:550;color:var(--ink);
  background:var(--g-3);border:.5px solid var(--stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px -8px rgba(0,0,0,.7);
  transition:transform .18s var(--ease),background .2s,opacity .2s}
.tbtn:hover{background:var(--g-1)}
.tbtn:active{transform:scale(.94)}
.tbtn:disabled{opacity:.36;cursor:not-allowed}
.tbtn.small{height:34px;padding:0 12px;font-size:12.5px;color:var(--ink2)}
.tbtn.play{width:52px;height:52px;font-size:19px;color:#fff;border-color:transparent;
  background:linear-gradient(160deg,var(--accent-2),var(--accent) 58%,#0a63c9);
  box-shadow:0 12px 30px -12px rgba(10,132,255,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.tbtn.danger{color:var(--pink);border-color:rgba(255,55,95,.3);background:rgba(255,55,95,.12)}
.tbtn.danger b{font-weight:650}
.tbtn.danger:not(:disabled):hover{background:rgba(255,55,95,.2)}

/* ---------------------------------------------------------------- 分轨 */
.tracks{display:grid;gap:10px;margin-top:16px}
.track{position:relative;border-radius:var(--r-lg);padding:13px 14px;
  background:var(--g-2);border:.5px solid var(--stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:opacity .3s var(--ease),border-color .25s,background .25s,transform .25s var(--ease)}
.track::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:var(--c,#888);opacity:.9;transition:opacity .3s}
.track:hover{border-color:var(--stroke-hi);transform:translateY(-1px)}
.track.dim{opacity:.4}
.track.mute{opacity:.34}
.track.solo{border-color:color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.12)}
.tk-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.3px;
  cursor:pointer;width:fit-content}
.tk-name .bulb{width:9px;height:9px;border-radius:50%;flex:none;background:var(--c,#888);
  box-shadow:0 0 12px color-mix(in srgb,var(--c) 70%,transparent)}
.tk-name .zh{font-size:12.5px;font-weight:400;color:var(--ink3)}
.track.solo .tk-name .bulb{box-shadow:0 0 16px var(--c)}
.tk-wave{position:relative;margin-top:10px;border-radius:var(--r-md);overflow:hidden;
  background:var(--well);border:.5px solid var(--hair);cursor:pointer}
.tk-wave canvas.wave{height:62px}
.tk-hint{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:linear-gradient(180deg,rgba(6,8,14,.28),rgba(6,8,14,.5));transition:opacity .25s var(--ease)}
.track:hover .tk-hint{opacity:1}
.tk-solo{padding:7px 15px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:#fff;
  background:rgba(10,132,255,.9);border:.5px solid rgba(255,255,255,.34);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.9);transition:transform .16s var(--ease)}
.tk-solo:active{transform:scale(.94)}
.track.solo .tk-hint{opacity:1;background:linear-gradient(180deg,rgba(6,8,14,.14),rgba(6,8,14,.34))}
.track.solo .tk-solo{background:rgba(255,255,255,.94);color:#0a0c12}
/* 推子行会换行：手机上"两个 M/S + 推子 + dB + WAV/MP3"挤不进一行，
   硬挤的结果是下载按钮被切掉半边 —— 让它整块掉到第二行、右对齐。 */
.tk-ctl{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:11px}
.ms{width:30px;height:28px;flex:none;border-radius:var(--r-xs);font-size:11px;font-weight:700;
  color:var(--ink3);background:var(--g-2);border:.5px solid var(--stroke);
  transition:transform .16s var(--ease),background .2s,color .2s}
.ms:active{transform:scale(.9)}
.ms.on{color:#0a0c12;border-color:transparent}
.ms[data-act=mute].on{background:var(--yellow)}
.ms[data-act=solo].on{background:var(--green)}
.val{flex:0 0 56px;text-align:right;font-size:12px;color:var(--ink2)}
.tk-dl{display:flex;gap:5px;flex:none;margin-left:auto}
.tk-ctl .tk-dl{flex:0 0 auto}
.tk-dl a{padding:6px 11px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;color:var(--accent);
  background:rgba(10,132,255,.16);border:.5px solid rgba(10,132,255,.32);text-decoration:none;
  transition:transform .16s var(--ease),background .2s}
.tk-dl a:hover{background:rgba(10,132,255,.26)}
.tk-dl a:active{transform:scale(.93)}
.tk-dl a[aria-disabled="true"]{opacity:.34;cursor:not-allowed;color:var(--ink3);
  background:var(--g-2);border-color:var(--stroke)}
input[type=range]{-webkit-appearance:none;appearance:none;background:none;outline:none;height:22px;margin:0}
.tk-ctl input[type=range]{flex:1 1 90px;min-width:0}
.tk-ctl input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-pill);
  background:var(--well);border:.5px solid var(--hair)}
.tk-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;
  border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.55),0 0 0 .5px rgba(0,0,0,.1);
  transition:transform .15s var(--ease)}
.tk-ctl input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14)}
.tk-ctl input[type=range]::-moz-range-track{height:4px;border-radius:var(--r-pill);background:var(--well)}
.tk-ctl input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff}

/* 总线 */
.bus{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px;padding:13px 15px;
  border-radius:var(--r-lg);background:var(--well);border:.5px solid var(--hair)}
.bus-label{flex:none;font-size:13px;font-weight:600;color:var(--ink2)}
.bus input[type=range]{flex:1 1 90px;min-width:0}
.bus input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-pill);background:rgba(120,130,150,.28)}
.bus input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;
  border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.bus input[type=range]::-moz-range-track{height:4px;border-radius:var(--r-pill);background:rgba(120,130,150,.28)}
.bus input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff}
.bus .val{flex:0 0 auto;font-size:12.5px}
.meter{width:6px;height:34px;border-radius:var(--r-pill);background:rgba(120,130,150,.22);overflow:hidden;flex:none}
.meter i{display:block;width:100%;height:0;border-radius:var(--r-pill);transition:height .08s linear;
  background:linear-gradient(180deg,var(--pink),var(--yellow) 34%,var(--green))}

/* ---------------------------------------------------------------- 导出 */
.export-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.exp{display:block;padding:13px 15px;border-radius:var(--r-md);text-decoration:none;color:var(--ink);
  background:var(--g-2);border:.5px solid var(--stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .22s var(--ease),background .22s,border-color .22s}
.exp:hover{background:var(--g-3);border-color:var(--stroke-hi);transform:translateY(-2px)}
.exp:active{transform:scale(.98)}
.exp b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp span{display:block;margin-top:2px;font-size:11.5px;color:var(--ink3)}
.exp.dis{opacity:.4;pointer-events:none}
.exp.with-ic{display:flex;align-items:center;gap:11px}
.exp .ic{width:34px;height:34px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
  font-size:15px;font-style:normal;
  background:linear-gradient(180deg,rgba(10,132,255,.24),rgba(10,132,255,.1));
  border:.5px solid rgba(10,132,255,.26)}
.exp .tx{min-width:0;flex:1 1 auto}

/* ---------------------------------------------------------------- 音频处理 · A/B */
.n-head{margin-bottom:16px}
.n-title{font-size:22px;font-weight:700;letter-spacing:-.5px}
.n-recipe{font-size:12.5px;color:var(--ink3);margin-top:6px;line-height:1.6}
.ab-wrap{display:grid;gap:9px;cursor:pointer}
.ab-row{position:relative;display:flex;align-items:center;gap:11px;padding:11px 13px;
  border-radius:var(--r-md);background:var(--well);border:.5px solid var(--hair);
  transition:border-color .25s,background .25s}
.ab-row.cur{border-color:var(--stroke-hi);background:var(--g-2)}
.ab-tag{flex:0 0 72px;font-size:12px;color:var(--ink3);cursor:pointer;transition:color .2s}
.ab-row.cur .ab-tag{color:var(--ink);font-weight:550}
.ab-canvas{flex:1 1 auto;min-width:0;height:56px;border-radius:var(--r-sm)}
.ab-ph{position:absolute;top:6px;bottom:6px;width:1.5px;border-radius:2px;background:var(--playhead);
  box-shadow:0 0 8px var(--playhead-glow);pointer-events:none;left:0}
.ab-switch{flex:0 0 auto}
.nstat{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px;margin-top:18px}
.n-card{padding:13px 14px;border-radius:var(--r-md);background:var(--g-2);border:.5px solid var(--stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.n-card .k{font-size:11.5px;color:var(--ink3);margin-bottom:5px}
.n-card .v{font-size:19px;font-weight:650;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.n-card .d{font-size:11.5px;margin-top:3px;color:var(--ink3)}
.n-card.good .v{color:var(--green)}
.n-card.warn .v{color:var(--yellow)}
.n-note{grid-column:1/-1;padding:12px 14px;border-radius:var(--r-md);font-size:12.5px;line-height:1.62;
  background:var(--well);border:.5px solid var(--hair);color:var(--ink2)}
.n-note b{color:var(--ink)}
.n-note.warn{border-color:rgba(255,159,10,.32);background:rgba(255,159,10,.1);color:var(--yellow)}
.n-note.warn b{color:var(--yellow)}

/* ---------------------------------------------------------------- 历史（iOS 分组列表） */
.h-bar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.h-search{flex:1 1 190px;min-width:0;height:38px;padding:0 14px;border-radius:var(--r-pill);
  font-size:14px;color:var(--ink);background:var(--well);border:.5px solid var(--hair);outline:none;
  transition:border-color .2s,background .2s}
.h-search::placeholder{color:var(--ink3)}
.h-search:focus{border-color:rgba(10,132,255,.5);background:var(--g-2)}
#recent{list-style:none;margin:0;padding:0;border-radius:var(--r-lg);overflow:hidden}
#recent li{display:flex;align-items:center;gap:11px;padding:13px 15px;
  border-bottom:1px solid var(--hair);cursor:pointer;transition:background .2s}
#recent li:last-child{border-bottom:0}
#recent li:hover{background:var(--g-2)}
#recent li.on{background:rgba(10,132,255,.13)}
#recent li.h-empty{cursor:default;color:var(--ink3);font-size:13.5px;justify-content:center;padding:26px 15px}
#recent li.h-empty:hover{background:none}
.h-cb{flex:none;display:grid;place-items:center;width:20px;height:20px}
.h-cb input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.h-k{flex:none;padding:3px 9px;border-radius:var(--r-pill);font-size:11px;color:var(--accent);
  background:rgba(10,132,255,.15);border:.5px solid rgba(10,132,255,.28);white-space:nowrap}
.h-k.proc{color:var(--purple);background:rgba(191,90,242,.15);border-color:rgba(191,90,242,.3)}
.h-t{flex:1 1 auto;min-width:0;font-size:15px;font-weight:550;letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-r{flex:0 1 auto;max-width:34%;font-size:12px;color:var(--ink3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.h-s{flex:none;font-size:12px;color:var(--ink3);white-space:nowrap}
.h-s.done{color:var(--green)}
.h-s.failed{color:var(--pink)}
.h-dl{flex:none;padding:6px 12px;border-radius:var(--r-pill);font-size:12px;font-weight:550;
  color:var(--accent);background:rgba(10,132,255,.15);border:.5px solid rgba(10,132,255,.3);
  text-decoration:none;transition:transform .16s var(--ease),background .2s}
.h-dl:hover{background:rgba(10,132,255,.26)}
.h-dl:active{transform:scale(.93)}
.h-dl.off{color:var(--ink3);background:var(--g-2);border-color:var(--stroke)}
#recent li[data-id]::after{content:'›';flex:none;color:var(--ink3);font-size:18px;line-height:1;margin-left:2px}

/* ---------------------------------------------------------------- 页脚 */
.foot{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:26px 18px 120px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:11.5px;color:var(--ink3);line-height:1.6}

/* ---------------------------------------------------------------- 浅色补丁 */
/* 深色下那组"黑阴影"是对的（光从上方来，卡片压出深影）；同一组搬到浅底上会脏成灰边，
   要换成偏冷的淡影。但控件内部那一道白色高光必须留着 —— 那就是玻璃的边。 */
html[data-theme=light] .tbtn,
html[data-theme=light] .chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 5px 16px -10px rgba(24,34,64,.42)}
html[data-theme=light] .tbtn.play{box-shadow:0 12px 28px -14px rgba(10,132,255,.85),inset 0 1px 0 rgba(255,255,255,.6)}
html[data-theme=light] .icobtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
html[data-theme=light] .seg button[aria-checked="true"]{box-shadow:0 5px 14px -8px rgba(24,34,64,.42),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme=light] .track,
html[data-theme=light] .exp,
html[data-theme=light] .n-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme=light] .track:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px -14px rgba(24,34,64,.5)}
/* 悬停提示是压在波形上的深色蒙版：浅底上要更实一点才压得住，白字才读得出来 */
html[data-theme=light] .tk-hint{background:linear-gradient(180deg,rgba(20,28,48,.44),rgba(20,28,48,.62))}
html[data-theme=light] .track.solo .tk-hint{background:linear-gradient(180deg,rgba(20,28,48,.3),rgba(20,28,48,.48))}
html[data-theme=light] .tk-solo{border-color:rgba(255,255,255,.6)}
html[data-theme=light] .track.solo .tk-solo{border-color:rgba(16,20,30,.12)}
html[data-theme=light] .tk-dl a[aria-disabled="true"],
html[data-theme=light] .h-dl.off{color:var(--ink3)}
html[data-theme=light] #recent li.on{background:rgba(10,132,255,.11)}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:760px){
  .setup-row{flex-direction:column;gap:8px}
  .setup-key{flex:none;padding-top:0}
  .setup-key small{display:inline;margin-left:6px}
  .seg{width:100%}
  .brand .sub{display:none}
  .meta{max-width:36vw}
  .hide-pill{display:none}
}
@media (min-width:900px){
  .player{grid-template-columns:1.18fr .82fr;align-items:start}
  .player > .card:nth-child(1){grid-column:1/-1}
  #nresult.player{grid-template-columns:1.18fr .82fr}
  #nresult .card:nth-child(1){grid-column:1/-1}
}
@media (max-width:430px){
  .lg-title{font-size:30px}
  .card{padding:17px}
  .tabs{width:calc(100vw - 24px)}
  .h-r{display:none}
  .h-s:not(.done):not(.failed){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}