/* 化学站 · 学霸星球家族 · 深邃黑主色版
   骨架基因照抄《学霸星球学科站-统一设计规范》，色系整体换成深空黑 + 紫/青辉光 */
:root {
  --brand: #7c6cff;          /* 深紫（原品牌蓝换色） */
  --brand-dark: #5b4bdb;
  --brand-soft: rgba(124, 108, 255, .14);
  --cyan: #22d3ee;           /* 化学站新增的青辉光 */
  --violet: #a78bfa;
  --grad: linear-gradient(135deg, #22d3ee, #7c6cff);
  --grad-btn: linear-gradient(135deg, #5b4bdb, #7c6cff);
  --bg: #05060a;
  --card: rgba(18, 22, 34, .72);
  --card-solid: #10141f;
  --text: #e9edf5;
  --muted: #8a92a6;
  --sub: #b7bfd2;
  --line: rgba(255, 255, 255, .09);
  --danger: #f43f5e;
  --warn: #fbbf24;
  --radius: 14px;
  --shadow: 0 4px 28px rgba(0, 0, 0, .45), 0 1px 4px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 15px/1.6 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;
  color: var(--text);
  background: linear-gradient(165deg, #07080f 0%, #0a0a14 48%, #060911 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 360px at 12% -4%, rgba(124, 108, 255, .16), transparent 62%),
    radial-gradient(640px 420px at 96% 30%, rgba(34, 211, 238, .10), transparent 65%),
    radial-gradient(520px 380px at 50% 108%, rgba(139, 92, 246, .12), transparent 60%);
}
b { font-weight: 700; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 15px; color: var(--text); }
a { color: var(--cyan); text-decoration: none; }

/* 质感签名 1：毛玻璃深卡 */
.glass {
  background: var(--card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#app { max-width: 640px; margin: 0 auto; padding: 0 12px 8px; position: relative; }

/* ============ topbar ============ */
header.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 8px 0 12px;
  background: rgba(10, 12, 20, .78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: 0 2px 12px rgba(124, 108, 255, .45);
}
.topbar .tt { flex: 1; }
.topbar .tt b { font-size: 16px; }
.topbar .tt span { display: block; font-size: 11px; color: var(--muted); }
.iconbtn {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04); color: var(--sub);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.iconbtn:active { background: var(--brand-soft); }

/* ============ HERO（深邃版：全屏 3D 原子剧场打底） ============ */
.hero2 {
  position: relative; overflow: hidden;
  border-radius: 20px; text-align: center;
  min-height: 82vh;
  display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, #0b0e1d 0%, #0a0a18 45%, #070810 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.hero2b { min-height: 0; margin-top: 12px; }
.hero2::before {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  top: -120px; left: -110px; pointer-events: none;
  background: radial-gradient(circle, rgba(34, 211, 238, .16), transparent 70%);
}
.hero2::after {
  content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  top: 8%; right: -140px; pointer-events: none;
  background: radial-gradient(circle, rgba(124, 108, 255, .18), transparent 70%);
}
#atomCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hero-in { position: relative; z-index: 1; padding: 30px 16px 26px; pointer-events: none; }
.hero-in > * { pointer-events: auto; }

.hbadge {
  display: inline-block; font-size: 12px; letter-spacing: .3px;
  padding: 5px 14px; border-radius: 999px;
  color: #c9d6ff;
  background: rgba(124, 108, 255, .14);
  border: 1px solid rgba(124, 108, 255, .38);
  box-shadow: 0 0 18px rgba(124, 108, 255, .22) inset;
}
.hero2 h2 { margin: 16px 0 8px; font-size: 26px; line-height: 1.35; letter-spacing: .5px; }
.hero2 h2 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hsub { color: var(--sub); font-size: 14px; line-height: 1.7; max-width: 480px; margin: 0 auto 14px; }

.hstat {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  max-width: 520px; margin: 0 auto 14px;
}
.hstat .st {
  padding: 10px 4px 8px; border-radius: 12px;
  background: rgba(16, 20, 32, .72);
  border: 1px solid var(--line);
}
.hstat .st b { display: block; font-size: 17px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hstat .st span { font-size: 11px; color: var(--muted); }

.hloop { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 auto 16px; max-width: 520px; }
.hloop .lp {
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(34, 211, 238, .09); border: 1px solid rgba(34, 211, 238, .30); color: #bfeaf5;
}
.hloop .ar { align-self: center; color: var(--muted); font-size: 11px; }

.hpts { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 520px; margin: 0 auto 16px; text-align: left; }
@media (min-width: 560px) { .hpts { grid-template-columns: repeat(3, 1fr); } }
.hpts .pt {
  padding: 12px; border-radius: 12px;
  background: rgba(16, 20, 32, .72); border: 1px solid var(--line);
}
.hpts .hi {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 7px;
  box-shadow: 0 0 12px rgba(124, 108, 255, .5);
}
.hpts .pt h4 { font-size: 14px; margin-bottom: 3px; }
.hpts .pt p { font-size: 12px; color: var(--muted); line-height: 1.6; }

.cred {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-width: 520px; margin: 0 auto 16px; font-size: 11.5px;
}
.cred .cr { padding: 9px 6px; border-radius: 11px; background: rgba(16, 20, 32, .6); border: 1px dashed var(--line); color: var(--sub); }
.cred .cr b { display: block; font-size: 12.5px; color: var(--text); }

/* hbig 扎心大字（红/警示底 · 深色适配） */
.hbig {
  max-width: 520px; margin: 0 auto 16px; padding: 16px 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(244, 63, 94, .16), rgba(244, 63, 94, .07));
  border: 1px solid rgba(244, 63, 94, .42);
  font-size: 17px; line-height: 1.75; font-weight: 700;
  box-shadow: 0 0 30px rgba(244, 63, 94, .12);
}
.hbig b {
  color: #ffd27a; padding: 0 3px; border-radius: 4px;
  background: rgba(251, 191, 36, .16);
  animation: pulseY 1.6s ease-in-out infinite;
}
.hbig em {
  font-style: normal; font-size: 19px;
  background: linear-gradient(90deg, #f43f5e, #fbbf24, #22d3ee, #f43f5e);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: flow 3.2s linear infinite;
}
@keyframes pulseY { 0%, 100% { background-color: rgba(251, 191, 36, .16); } 50% { background-color: rgba(251, 191, 36, .42); } }
@keyframes flow { to { background-position: 300% 0; } }

/* 价格卡 */
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; margin: 0 auto 14px; }
.price .pc {
  position: relative; padding: 14px 12px; border-radius: 14px; text-align: center;
  background: rgba(16, 20, 32, .78); border: 1px solid var(--line);
  transition: transform .15s ease;
}
.price .pc:active { transform: translateY(1px); }
.price .pc.cyan { border-color: rgba(34, 211, 238, .4); box-shadow: 0 0 24px rgba(34, 211, 238, .10); }
.price .pc.vio { border-color: rgba(124, 108, 255, .45); box-shadow: 0 0 24px rgba(124, 108, 255, .14); }
.price .pc h4 { font-size: 13px; color: var(--sub); margin-bottom: 6px; }
.price .pc .pv { font-size: 26px; font-weight: 800; }
.price .pc.cyan .pv { color: var(--cyan); }
.price .pc.vio .pv { color: var(--violet); }
.price .pc .pv small { font-size: 12px; font-weight: 500; color: var(--muted); }
.price .pc .tag {
  position: absolute; top: -9px; right: 10px; font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: var(--grad-btn); color: #fff;
}
.price .pc ul { list-style: none; font-size: 11.5px; color: var(--muted); text-align: left; margin-top: 8px; }
.price .pc ul li { padding-left: 14px; position: relative; line-height: 1.7; }
.price .pc ul li::before { content: '◆'; position: absolute; left: 0; font-size: 8px; top: 5px; color: var(--cyan); }

/* 购买黄条（id=hbuyRow 白标整行替换） */
.hbuy {
  max-width: 520px; margin: 0 auto 10px; padding: 11px 12px; border-radius: 12px;
  background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .4);
  font-size: 13px; color: #ffe4a3; text-align: left;
}
/* 免费试用条 */
.hcta {
  max-width: 520px; margin: 0 auto 4px; padding: 11px 12px; border-radius: 12px;
  background: rgba(34, 211, 238, .10); border: 1px solid rgba(34, 211, 238, .35);
  font-size: 13px; color: #bfeaf5;
}

/* 声音开关 */
.sndbtn {
  position: absolute; z-index: 2; top: 12px; right: 12px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px;
  background: rgba(16, 20, 32, .8); color: var(--sub); border: 1px solid var(--line);
}
.sndbtn.on { color: var(--cyan); border-color: rgba(34, 211, 238, .45); box-shadow: 0 0 14px rgba(34, 211, 238, .2); }

/* ============ 功能入口：单元网格 ============ */
.sec { margin: 18px 0; }
.sec > h3 {
  display: flex; align-items: center; gap: 7px;
  font-size: 16px; margin-bottom: 10px;
}
.sec > h3::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--grad); }
.unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (min-width: 560px) { .unit-grid { grid-template-columns: repeat(3, 1fr); } }
.ucard {
  position: relative; padding: 12px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.ucard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px; background: var(--grad); }
.ucard:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0, 0, 0, .5); }
.ucard h4 { font-size: 14px; margin: 4px 0 3px; }
.ucard p { font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.ucard .uicon {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); font-size: 16px;
}
.ucard.lock { opacity: .55; }
.ucard.lock::before { background: #4a5164; }
.ucard.lock .uicon { background: rgba(255, 255, 255, .06); filter: grayscale(1); }
.ucard .ltag {
  position: absolute; top: 10px; right: 10px; font-size: 10px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: var(--muted); border: 1px solid var(--line);
}

/* ============ 单元内容页 ============ */
.uvback {
  display: inline-block; margin: 0 0 12px; padding: 7px 14px;
  border-radius: 10px; font-size: 13px; color: var(--sub);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.uvhead { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 14px; }
.uvhead .uicon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); font-size: 22px;
  box-shadow: 0 0 18px rgba(124, 108, 255, .25);
}
.uvhead h3 { font-size: 16px; }
.uvhead p { font-size: 12px; color: var(--muted); }
.uvhead > div:nth-child(2) { flex: 1; }
.uvprog { font-size: 11.5px; color: var(--cyan); text-align: right; white-space: nowrap; }
.uvprog b { color: var(--cyan); }

.know { display: flex; flex-direction: column; gap: 8px; }
.kcard {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
}
.kcard .kn {
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--grad-btn);
}

/* 题卡 */
.qc { padding: 14px; margin-bottom: 12px; }
.qmeta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qtag {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  background: rgba(34, 211, 238, .12); color: var(--cyan); border: 1px solid rgba(34, 211, 238, .25);
}
.qno { font-size: 11px; color: var(--muted); margin-left: auto; }
.qtext { font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
.qtext img { max-width: 100%; border-radius: 8px; margin: 6px 0; background: #fff; }
.qopts { display: flex; flex-direction: column; gap: 7px; }
.qopt {
  text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.55;
  color: var(--sub); background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  transition: background .15s, border-color .15s;
}
.qopt b { color: var(--violet); margin-right: 4px; }
.qopt:active { background: var(--brand-soft); }
.qopt.ok { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .5); color: #d7ffe4; }
.qopt.ok b { color: #4ade80; }
.qopt.no { background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .45); color: #ffdbe1; }
.qopt:disabled { cursor: default; opacity: .95; }
.qexp { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.7; background: rgba(255, 255, 255, .03); border: 1px dashed var(--line); }
.qexp .expok { color: #4ade80; }
.qexp .expno { color: #fb7185; }
.qexp p { color: var(--muted); margin-top: 6px; white-space: pre-wrap; }

.pv-cta { margin: 18px 0 8px; padding: 16px; text-align: center; border: 1px solid rgba(124, 108, 255, .35); }
.pv-cta b { color: var(--violet); font-size: 14px; }
.pv-cta p { font-size: 12px; color: var(--muted); margin: 6px 0 12px; }
.pv-note {
  margin: 14px 0 4px; padding: 11px 14px; border-radius: 12px; font-size: 13px;
  background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .3); color: #ffe9b8;
  text-align: center;
}

/* 锁定弹盒 */
.lock-box {
  max-width: 520px; margin: 20px auto; padding: 24px 18px; text-align: center;
}
.lock-box .biglock { font-size: 40px; margin-bottom: 8px; }
.lock-box p { color: var(--sub); font-size: 13.5px; margin: 8px 0 16px; }
.btnrow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 按钮 */
.gbtn {
  padding: 10px 18px; border-radius: 11px; border: none; font-weight: 600; font-size: 14px; color: #fff;
  background: var(--grad-btn); box-shadow: 0 3px 10px rgba(91, 75, 219, .35);
}
.ghost {
  padding: 10px 18px; border-radius: 11px; font-weight: 600; font-size: 14px;
  background: transparent; color: var(--sub); border: 1px solid var(--line);
}
.mini {
  padding: 4px 10px; border-radius: 8px; font-size: 12px;
  background: rgba(124, 108, 255, .16); color: var(--violet); border: none;
}
.chip.on { background: var(--grad-btn); color: #fff; }

/* ============ footer ============ */
footer.foot {
  margin: 20px 0 90px; padding: 14px; text-align: center;
  background: rgba(10, 12, 20, .6); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 11.5px; color: var(--muted);
  backdrop-filter: blur(8px);
}
footer.foot a { color: var(--muted); text-decoration: underline; }

/* ============ 双浮窗 ============ */
.cs-fab, .dist-fab {
  position: fixed; right: max(14px, calc(50vw - 306px)); z-index: 150;
  padding: 10px 15px; border-radius: 999px; border: none;
  color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
}
.cs-fab { bottom: 74px; background: #07c160; }
.dist-fab { bottom: calc(74px + 52px); background: var(--grad-btn); }

/* ============ 弹层 ============ */
.ov {
  position: fixed; inset: 0; background: rgba(4, 6, 12, .68);
  backdrop-filter: blur(3px); z-index: 200; display: none;
}
.ov.on { display: flex; }
.ovbox {
  background: var(--card-solid); color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px; max-width: 420px; width: 100%; padding: 20px 18px; margin: auto;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .6);
  max-height: 86vh; overflow-y: auto;
}
.ovbox h3 { font-size: 17px; margin-bottom: 4px; }
.ovbox .desc { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.ovbox .row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 11px; margin-bottom: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  font-size: 14px;
}
.ovbox label { display: block; font-size: 12.5px; color: var(--sub); margin: 10px 0 5px; }
.ovbox input[type=text], .ovbox input[type=tel], .ovbox textarea, .ovbox select {
  width: 100%; padding: 9px 11px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  color: var(--text); outline: none;
}
.ovbox input:focus, .ovbox textarea:focus { border-color: var(--brand); }
.ovbox .agree { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--sub); margin: 12px 0; }
.ovbox .agree input { margin-top: 3px; }
.ovbox .wide { width: 100%; padding: 11px; border-radius: 11px; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%);
  background: rgba(15, 20, 28, .94); color: #fff; font-size: 13px;
  padding: 9px 16px; border-radius: 999px; z-index: 300;
  border: 1px solid var(--line);
  opacity: 0; pointer-events: none; transition: opacity .25s;
  max-width: 86vw;
}
#toast.on { opacity: 1; }

/* 3D 反应剧场（单元页，atomlab.js） */
.u3d {
  margin: 14px 0; padding: 0; overflow: hidden;
  border: 1px solid var(--line);
}
.u3d-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(124, 108, 255, .08);
}
.u3d-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #7c6cff, #22d3ee);
  color: #05060a; font-weight: 700; white-space: nowrap;
}
.u3d-hd b { font-size: 13px; color: var(--cyan); letter-spacing: .5px; }
.u3d-stage { position: relative; }
#u3dCanvas {
  display: block; width: 100%; height: 250px;
  background: radial-gradient(ellipse at 50% 40%, #0b0e1a 0%, #05060a 75%);
  cursor: crosshair;
}
.u3d-eq {
  position: absolute; top: 10px; left: 0; right: 0; text-align: center;
  font-weight: 800; font-size: 16px; color: #eaf6ff; letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(124, 108, 255, .95), 0 2px 8px rgba(0, 0, 0, .85);
  pointer-events: none;
}
.u3d-cond {
  position: absolute; right: 12px; top: 34px;
  padding: 4px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #ffd7a8;
  background: rgba(255, 157, 92, .16); border: 1px solid rgba(255, 157, 92, .6);
  text-shadow: 0 0 10px rgba(255, 157, 92, .85);
  box-shadow: 0 0 18px rgba(255, 157, 92, .35);
  opacity: 0; transform: scale(.5) rotate(-4deg);
  transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.u3d-cond.show { opacity: 1; transform: scale(1) rotate(0deg); }
.u3d-cap {
  padding: 9px 14px; font-size: 12.5px; color: #bfeaf5;
  border-top: 1px solid var(--line);
  background: rgba(34, 211, 238, .05);
  min-height: 34px; line-height: 1.5;
}
.u3d-voice {
  margin-left: auto; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(124, 108, 255, .12);
  color: #cfd6ff; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.u3d-voice.on { background: linear-gradient(135deg, rgba(124,108,255,.35), rgba(34,211,238,.3)); color: #eaf6ff; }
.u3d-ctl {
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(34, 211, 238, .1);
  color: #bfeaf5; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.u3d-ctl.on { background: linear-gradient(135deg, rgba(255,157,92,.4), rgba(255,179,71,.3)); color: #fff1de; }
.u3d-hd-tag {
  font-size: 11px; color: var(--sub); white-space: nowrap;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px;
}
.u3d-hd-tag b { color: #ffd7a8; font-size: 11px; letter-spacing: .5px; }

/* ================= 元素周期表实验室 ================= */
.ptab { padding: 14px; }
.ptab-top { display: flex; gap: 14px; align-items: stretch; }
.pt-grid-wrap { flex: 1 1 auto; overflow-x: auto; padding-bottom: 4px; }
.pt-grid {
  display: grid; grid-template-columns: repeat(18, minmax(34px, 1fr));
  gap: 3px; min-width: 660px;
}
.pt-cell {
  position: relative; aspect-ratio: 1; border-radius: 6px;
  background: color-mix(in srgb, var(--cc) 16%, rgba(255,255,255,.03));
  border: 1px solid color-mix(in srgb, var(--cc) 55%, transparent);
  color: #eef2ff; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pt-cell i {
  position: absolute; top: 1px; left: 3px; font-style: normal;
  font-size: 8px; color: color-mix(in srgb, var(--cc) 85%, white); opacity: .85;
}
.pt-cell b { font-size: 13px; font-weight: 800; line-height: 1.1; }
.pt-cell span { font-size: 8.5px; color: #b9c4e8; line-height: 1.2; }
.pt-cell:hover { transform: translateY(-2px) scale(1.06); z-index: 2;
  box-shadow: 0 0 14px color-mix(in srgb, var(--cc) 60%, transparent); background: color-mix(in srgb, var(--cc) 30%, rgba(255,255,255,.05)); }
.pt-cell.sel {
  background: color-mix(in srgb, var(--cc) 42%, rgba(255,255,255,.06));
  box-shadow: 0 0 16px color-mix(in srgb, var(--cc) 75%, transparent);
  border-color: var(--cc);
}
.pt-ph {
  aspect-ratio: 1; border-radius: 6px; cursor: pointer;
  background: color-mix(in srgb, var(--cc) 10%, rgba(255,255,255,.02));
  border: 1px dashed color-mix(in srgb, var(--cc) 50%, transparent);
  color: color-mix(in srgb, var(--cc) 80%, white);
  font-size: 8px; line-height: 1.25; text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.pt-ph:hover { background: color-mix(in srgb, var(--cc) 22%, rgba(255,255,255,.04)); }
.pt-side { flex: 0 0 240px; display: flex; flex-direction: column; gap: 8px; }
#ptCanvas {
  width: 100%; height: 190px; display: block; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 40%, #0b0e1a 0%, #05060a 75%);
}
.pt-info {
  flex: 1; background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; font-size: 12px; overflow-y: auto;
}
.pt-wait { color: var(--sub); font-size: 12px; }

/* 温度滑块（WeduLab 参数滑块范式） */
.pt-temp {
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px 7px;
}
.pt-temp label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: #c3cdeb; margin-bottom: 5px;
}
.pt-temp label b { color: #ffd7a8; font-variant-numeric: tabular-nums; }
.pt-temp input[type="range"] {
  width: 100%; height: 18px; -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer;
}
.pt-temp input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #3b82f6, #22d3ee 35%, #facc15 70%, #ff4d5e);
}
.pt-temp input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%; margin-top: -5px;
  background: #fff; border: 2px solid #ff9d5c;
  box-shadow: 0 0 10px rgba(255, 157, 92, .7);
}
.pt-temp input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #3b82f6, #22d3ee 35%, #facc15 70%, #ff4d5e);
}
.pt-temp input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2px solid #ff9d5c;
  box-shadow: 0 0 10px rgba(255, 157, 92, .7);
}
.pt-temp p { font-size: 11px; color: var(--sub); margin-top: 4px; line-height: 1.5; }
.pt-info-hd {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  border-left: 3px solid var(--cyan); padding-left: 8px; margin-bottom: 8px;
}
.pt-info-num { font-size: 12px; color: var(--sub); }
.pt-info-sym { font-size: 26px; font-weight: 900; line-height: 1; }
.pt-info-zh { font-size: 15px; font-weight: 700; color: #eaf6ff; }
.pt-info-cat { font-size: 10px; padding: 1px 8px; border-radius: 999px; border: 1px solid; }
.pt-info-rows div {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.08);
}
.pt-info-rows span { color: var(--sub); font-size: 11px; white-space: nowrap; }
.pt-info-rows b { color: #d7e4ff; font-size: 11.5px; text-align: right; }
.pt-note {
  margin-top: 8px; font-size: 11.5px; color: #ffe9c2;
  background: rgba(255,157,92,.1); border: 1px solid rgba(255,157,92,.35);
  border-radius: 8px; padding: 6px 8px; line-height: 1.5;
}
.pt-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.pt-lg { font-size: 11px; color: #c3cdeb; display: inline-flex; align-items: center; gap: 5px; }
.pt-lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
@media (max-width: 760px) {
  .ptab-top { flex-direction: column; }
  .pt-side { flex: 1 1 auto; }
  #ptCanvas { height: 170px; }
}
.u3d-eb {
  height: 4px; background: rgba(255, 255, 255, .07);
  position: relative; overflow: hidden;
}
.u3d-eb-bar {
  height: 100%; width: 8%;
  background: linear-gradient(90deg, #22d3ee 0%, #facc15 45%, #ff4d5e 100%);
  transition: width .7s ease;
  box-shadow: 0 0 8px rgba(250, 204, 21, .5);
}

/* ================= 分子构型实验室 ================= */
.mol-wrap { padding: 14px; }
.mol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mol-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  color: #eef2ff; transition: all .12s ease;
}
.mol-chip b { font-size: 15px; font-weight: 800; }
.mol-chip span { font-size: 10px; color: var(--sub); }
.mol-chip:hover { background: rgba(124, 108, 255, .16); border-color: rgba(124, 108, 255, .6); }
.mol-chip.sel {
  background: linear-gradient(135deg, rgba(124, 108, 255, .35), rgba(34, 211, 238, .25));
  border-color: #7c6cff; box-shadow: 0 0 14px rgba(124, 108, 255, .4);
}
.mol-top { display: flex; gap: 14px; align-items: stretch; }
.mol-stage { flex: 1 1 auto; }
#molCanvas {
  width: 100%; height: 340px; display: block; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 42%, #0b0e1a 0%, #05060a 78%);
  cursor: grab; touch-action: none;
}
#molCanvas:active { cursor: grabbing; }
.mol-side { flex: 0 0 250px; display: flex; flex-direction: column; }
.mol-info { flex: 1; }
.mol-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.mol-mode { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-right: 8px; }
.mol-mode .mol-tg { border-radius: 0; border: none; }
.mol-tg {
  padding: 5px 12px; border-radius: 999px; font-size: 11.5px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: #b9c4e8;
  transition: all .12s ease; white-space: nowrap;
}
.mol-tg:hover { background: rgba(34, 211, 238, .12); color: #eaf6ff; }
.mol-tg.on {
  background: linear-gradient(135deg, rgba(124, 108, 255, .4), rgba(34, 211, 238, .3));
  color: #f4f6ff; border-color: rgba(124, 108, 255, .7);
}
@media (max-width: 760px) {
  .mol-top { flex-direction: column; }
  .mol-side { flex: 1 1 auto; }
  #molCanvas { height: 260px; }
}

/* ================= 气体制备实验台 ================= */
.gas-wrap { padding: 14px; }
.gas-top { display: flex; gap: 14px; align-items: stretch; }
.gas-stage { flex: 1 1 auto; position: relative; }
#gasCanvas {
  width: 100%; height: 400px; display: block; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 45%, #0b0e1a 0%, #05060a 78%);
}
.gas-eq {
  position: absolute; left: 12px; top: 12px;
  padding: 5px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: #ffd7a8;
  background: rgba(10, 8, 20, .75); border: 1px solid rgba(255, 157, 92, .55);
  text-shadow: 0 0 10px rgba(255, 157, 92, .7);
}
.gas-eq i { font-style: normal; color: #ff8c42; font-size: 11px; }
.gas-side { flex: 0 0 280px; display: flex; flex-direction: column; gap: 10px; }
.gas-panel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 10px; padding: 10px;
}
.gas-dat { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; }
.gas-dat span { font-size: 10.5px; color: var(--sub); white-space: nowrap; }
.gas-dat b { font-size: 14px; color: #eaf6ff; font-variant-numeric: tabular-nums; }
.gas-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.gas-step {
  flex: 1 0 auto; min-width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 8px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  color: #eef2ff; transition: all .12s ease;
}
.gas-step b { font-size: 14px; font-weight: 800; color: #cfd6ff; }
.gas-step span { font-size: 9px; color: var(--sub); text-align: center; }
.gas-step:hover { background: rgba(34, 211, 238, .1); border-color: rgba(34, 211, 238, .5); }
.gas-step.done b { color: #3ddc84; }
.gas-step.done { border-color: rgba(61, 220, 132, .45); background: rgba(61, 220, 132, .08); }
.gas-step.cur {
  background: linear-gradient(135deg, rgba(255, 157, 92, .35), rgba(250, 204, 21, .2));
  border-color: #ff9d5c; box-shadow: 0 0 12px rgba(255, 157, 92, .4);
}
.gas-step.cur b { color: #ffd7a8; }
.gas-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mini-btn {
  padding: 6px 14px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: linear-gradient(135deg, rgba(124, 108, 255, .3), rgba(34, 211, 238, .25));
  border: 1px solid rgba(124, 108, 255, .6); color: #f4f6ff;
  transition: all .12s ease;
}
.mini-btn:hover { box-shadow: 0 0 12px rgba(124, 108, 255, .45); }
.mini-btn.on { background: linear-gradient(135deg, rgba(255, 157, 92, .4), rgba(250, 204, 21, .3)); border-color: rgba(255, 157, 92, .7); }
.gas-cap {
  font-size: 12.5px; line-height: 1.65; color: #bfeaf5;
  background: rgba(34, 211, 238, .05); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; min-height: 64px; flex: 1;
}
.gas-cap b { color: #ffd7a8; }
@media (max-width: 760px) {
  .gas-top { flex-direction: column; }
  .gas-side { flex: 1 1 auto; }
  #gasCanvas { height: 300px; }
}

/* ================= v0.8 六步学习链 · 版面主轴 ================= */
section[id] { scroll-margin-top: 74px; }

/* 步骤徽章（section 标题左侧） */
.step-badge {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #7c6cff);
  color: #fff; white-space: nowrap;
  box-shadow: 0 2px 12px rgba(34, 211, 238, .35);
}

/* hero 六步链条 stepper */
.chain {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
  max-width: 520px; margin: 0 auto 16px;
}
.chain a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  background: rgba(34, 211, 238, .09); border: 1px solid rgba(34, 211, 238, .30);
  color: #bfeaf5; transition: background .12s ease;
}
.chain a i { font-style: normal; color: var(--cyan); font-weight: 800; }
.chain a:active { background: rgba(34, 211, 238, .22); }
.chain .ar { color: var(--muted); font-size: 11px; }
.hero-cta {
  display: inline-block; padding: 12px 36px; border-radius: 999px;
  background: var(--grad-btn); color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 24px rgba(91, 75, 219, .5);
}
.hero-cta:active { transform: scale(.97); }

/* 六步进度看板 */
.dash { padding: 14px; }
.dash-sum {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px;
}
.dash-sum .ds {
  text-align: center; padding: 10px 4px 8px; border-radius: 12px;
  background: rgba(16, 20, 32, .72); border: 1px solid var(--line);
}
.dash-sum .ds b {
  display: block; font-size: 18px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dash-sum .ds span { font-size: 11px; color: var(--muted); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 560px) { .dash-grid { grid-template-columns: repeat(3, 1fr); } }
.dash-u {
  padding: 10px; border-radius: 12px;
  background: rgba(16, 20, 32, .72); border: 1px solid var(--line);
}
.dash-u.done { border-color: rgba(34, 211, 238, .4); }
.dash-u .du-t {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.dash-u .du-t em {
  font-style: normal; margin-left: auto; padding-left: 4px;
  font-size: 10.5px; color: var(--muted); font-weight: 400; white-space: nowrap;
}
.dash-u.done .du-t em { color: var(--cyan); }
.dash-u .du-bar {
  height: 5px; border-radius: 3px; margin-top: 8px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.dash-u .du-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--grad); transition: width .4s ease;
}
.dash-note {
  font-size: 12px; color: var(--muted); margin-top: 10px; text-align: center; line-height: 1.6;
}

/* 底部快捷锚点导航条（家族底部 Tab 范式） */
.bottomnav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px; z-index: 140;
  display: flex;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(8, 10, 18, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .45);
}
.bottomnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 10.5px; color: var(--muted); padding: 4px 0; border-radius: 10px;
}
.bottomnav a i { font-style: normal; font-size: 17px; line-height: 1.2; }
.bottomnav a:active { color: var(--cyan); background: rgba(34, 211, 238, .08); }
body.in-unit .bottomnav { display: none; }

/* ================= v0.10.0 PhET 动手交互四件套 ================= */
/* 拼分子工坊 */
.mb-stage { display: flex; flex-direction: column; gap: 8px; }
.mb-stage canvas { height: 190px; }
.mb-zone {
  min-height: 108px; border: 1.5px dashed rgba(124, 231, 255, .35); border-radius: 14px;
  background: rgba(34, 211, 238, .04); display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center; padding: 10px;
}
.mb-atom {
  --ec: #9aa7c9;
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ec);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 55%), var(--ec);
  color: #0b0e17; font-weight: 800; font-size: 15px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .15s;
}
.mb-atom i { font-style: normal; font-size: 9.5px; font-weight: 600; opacity: .75; }
.mb-atom:active { transform: scale(.92); }
.mb-atom-sm { width: 46px; height: 46px; font-size: 13.5px; }
.mb-tray { margin-bottom: 10px; }
.mb-tray-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-col {
  --ec: #7ce7ff;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border: 1px solid rgba(124, 231, 255, .4); border-radius: 999px;
  font-weight: 700; color: var(--cyan); background: rgba(34, 211, 238, .06); font-size: 13px;
}
.mb-col i { font-style: normal; color: var(--sub); font-weight: 500; font-size: 11.5px; }

/* pH 试纸台 */
.ph-paper-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ph-paper {
  width: 96px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: #f3f4ef; color: #333; font-size: 11.5px; font-weight: 700;
  border: 1px solid rgba(0, 0, 0, .15); box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  transition: background .8s ease;
}
.ph-paper.wet { box-shadow: 0 2px 14px rgba(124, 231, 255, .35); }
.ph-scale {
  position: relative; height: 14px; border-radius: 999px; margin: 4px 0 10px;
  background: linear-gradient(to right, #c81d25, #f07030, #f59e0b, #eab308, #a3b318, #5cb338, #22a884, #1f7fc4, #3b5bdb, #8b5cf6, #86198f);
}
.ph-marker {
  position: absolute; top: -15px; left: -9px; font-size: 12px; color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6); transition: left .6s ease; opacity: 0;
}

/* 配平对账台 */
.bl-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0 4px; }
.bl-spec {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  background: rgba(255, 255, 255, .04);
}
.bl-spec.ok { border-color: rgba(61, 220, 132, .55); background: rgba(61, 220, 132, .08); }
.bl-stp {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06); color: var(--cyan); font-weight: 800; cursor: pointer; line-height: 1;
}
.bl-stp:active { background: rgba(34, 211, 238, .18); }
.bl-coef { min-width: 18px; text-align: center; font-size: 15px; color: var(--cyan); }
.bl-f { font-weight: 700; font-size: 14.5px; }
.bl-plus { color: var(--sub); font-size: 13px; }
.bl-arrow { color: #ffd7a8; font-weight: 800; font-size: 17px; margin: 0 6px; }
.bl-status {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--sub); font-weight: 700; font-size: 13px;
}
.bl-status.ok { border-color: rgba(61, 220, 132, .6); color: #3ddc84; background: rgba(61, 220, 132, .1); }
.bl-bars { display: flex; flex-direction: column; gap: 7px; padding: 10px 0 2px; }
.bl-row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: 8px; }
.bl-row.ok .bl-bar { box-shadow: 0 0 10px rgba(61, 220, 132, .5); }
.bl-row.ok .bl-el { color: #3ddc84; }
.bl-el { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: var(--sub); font-weight: 600; }
.bl-el i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,.25); }
.bl-side { display: flex; align-items: center; gap: 6px; }
.bl-side.r { flex-direction: row-reverse; justify-content: flex-start; }
.bl-side span { font-size: 12px; color: var(--sub); min-width: 22px; font-weight: 700; }
.bl-bar {
  height: 13px; border-radius: 999px; min-width: 4px;
  background: var(--ec, #9aa7c9); box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: width .35s ease;
}
.bl-bar.r { background: var(--ec, #9aa7c9); }
.bl-row.ok .bl-side span { color: #3ddc84; }

/* ================= v0.11.0 PhET 动手交互三件套 ================= */
/* 同位素丰度台 */
.it-tray { margin-top: 4px; }
.it-sample {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px;
  min-height: 44px; border: 1.5px dashed rgba(124, 231, 255, .3); border-radius: 12px;
  background: rgba(34, 211, 238, .04); padding: 8px 10px;
}
.it-dot {
  --ec: #7ce7ff;
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ec);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 55%), var(--ec);
  color: #0b0e17; font-weight: 800; font-size: 11.5px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .12s;
}
.it-dot:active { transform: scale(.9); }
.it-avg { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0 2px; }
.it-avg span { color: var(--sub); font-size: 13px; }
.it-avg b { font-size: 30px; font-weight: 900; letter-spacing: .5px; }

/* 三态粒子台 */
.sl-lab { display: flex; justify-content: space-between; color: var(--sub); font-size: 13px; font-weight: 600; margin: 6px 0 2px; }
.sl-lab b { color: var(--cyan); }
.sl-range { width: 100%; margin: 0 0 4px; accent-color: #22d3ee; }

/* 浓度-颜色联动台 */
.cc-stage { display: flex; align-items: center; justify-content: center; }
.cc-glass {
  position: relative; width: 150px; height: 220px; border: 2.5px solid rgba(255,255,255,.22);
  border-top: none; border-radius: 10px 10px 26px 26px; overflow: hidden;
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 24px rgba(124,231,255,.08);
}
.cc-liquid { position: absolute; left: 0; right: 0; bottom: 0; transition: height .5s, opacity .5s, background .5s; }
.cc-spoon { position: absolute; top: 8px; right: 8px; font-size: 14px; opacity: .9; }
.cc-scale {
  position: absolute; top: 0; bottom: 0; right: 6px; display: flex; flex-direction: column;
  justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.4);
}
.cc-precip { margin-top: 8px; font-size: 13px; color: #ffd166; font-weight: 700; text-align: center; }