/* 全站共享样式：基础 + 导航 + 组件 + 实验台骨架 */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);color:var(--ink);line-height:1.7;background:var(--paper);
  background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);
  background-size:26px 26px;-webkit-font-smoothing:antialiased;}
h1,h2,h3{line-height:1.25;text-wrap:balance;margin:0;}
a{color:var(--brand);}
.num{font-variant-numeric:tabular-nums;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:30;background:rgba(245,248,253,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.topwrap{max-width:980px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.brandmark{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--brand-deep);
  letter-spacing:-.01em;text-decoration:none;}
.logo{width:34px;height:34px;border-radius:11px;background:var(--brand);display:grid;place-items:center;
  color:#fff;font-weight:800;box-shadow:0 4px 10px rgba(37,99,235,.35);transform:rotate(-4deg);}
.nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}
.nav a{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:7px 14px;
  border-radius:var(--r-full);transition:all var(--dur-base) var(--ease-out);}
.nav a:hover,.nav a[aria-current="page"]{background:var(--brand);color:#fff;}

main{max-width:980px;margin:0 auto;padding:26px 18px 80px;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:8px;}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--accent);}
.sec-h{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:10px 0 4px;}
.sec-d{color:var(--ink-2);margin:0 0 16px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);}
.note{font-size:13px;color:var(--muted);}
section{margin-top:34px;}

/* 面包屑（实验台页） */
.crumbs{font-size:13px;color:var(--muted);margin-bottom:6px;}
.crumbs a{color:var(--ink-2);text-decoration:none;}

/* 四步法进度标 */
.fsbar{display:flex;gap:8px;margin:14px 0;}
.fstep{flex:1;border-radius:12px;padding:12px 10px;text-align:center;border:2px solid var(--line);
  background:var(--surface);transition:all var(--dur-base) var(--ease-out);}
.fstep .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;
  color:#fff;font-weight:800;background:var(--c);}
.fstep .nm{font-weight:800;font-size:16px;color:var(--c);}
.fstep .ds{font-size:12px;color:var(--muted);}
.fstep[aria-current="step"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);border-color:var(--c);}
.fsbar[data-mode="progress"] .fstep:not([aria-current="step"]){opacity:.5;}
.fstep.clickable{cursor:pointer;}
.fstep.clickable:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.fstep.sel{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);border-color:var(--c);}

/* 实验台骨架 */
.lab{padding:22px;}
.qbar{background:var(--soft);border-radius:12px;padding:12px 16px;font-size:15px;}
.qbar b{color:var(--brand-deep);}
.lab-grid{display:grid;grid-template-columns:240px 1fr;gap:20px;margin-top:18px;}
@media(max-width:760px){.lab-grid{grid-template-columns:1fr;}}
.controls label{display:block;font-size:13px;color:var(--ink-2);font-weight:600;margin:14px 0 4px;}
.ctlrow{display:flex;align-items:center;gap:10px;}
input[type=range]{flex:1;accent-color:var(--accent);height:26px;min-height:26px;}
input[type=number]{width:70px;padding:5px 7px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:14px;font-family:inherit;}
.valbubble{min-width:34px;text-align:center;font-weight:800;color:var(--accent);background:var(--accent-soft);
  border-radius:var(--r-full);padding:2px 9px;font-size:14px;font-variant-numeric:tabular-nums;}

.btn{font-family:inherit;font-size:14px;font-weight:700;border-radius:var(--r-md);padding:9px 16px;cursor:pointer;
  border:2px solid var(--accent);background:#fff;color:var(--accent);transition:all var(--dur-fast) var(--ease-out);}
.btn:hover{background:var(--accent);color:#fff;}
.btn.solid{background:var(--accent);color:#fff;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;}

.canvas{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;
  display:grid;place-items:center;min-height:200px;}
.canvas svg{max-width:100%;height:auto;}

/* StepPlayer */
.stepper{margin-top:16px;}
.step-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dots{display:flex;gap:7px;margin-left:auto;}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line);transition:background var(--dur-base);}
.dots i[aria-current="true"]{background:var(--accent);}
.step-say{margin-top:10px;padding:12px 15px;border-radius:12px;background:var(--accent-soft);
  color:var(--brand-deep);font-size:14.5px;min-height:48px;}

/* ResultBar */
.result{margin-top:16px;background:var(--success-bg);border:1px dashed var(--success);border-radius:12px;
  padding:12px 16px;color:#166534;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;}
.result b{font-size:18px;}

/* 圈：在题面上圈画标注（圈步的"标准写法"——橙=单位1框 / 波浪线=已知 / 圆圈=所求） */
.qbar .anno-q{border:2.5px solid var(--step-quan);border-radius:50%;padding:1px 9px;font-weight:700;
  color:#9a3412;white-space:nowrap;display:inline-block;}
.qbar .anno-u1{border:2px solid var(--step-quan);border-radius:6px;padding:0 5px;font-weight:700;
  background:#fff7ed;color:#9a3412;}
.qbar .anno-data{text-decoration:underline wavy var(--step-quan);text-underline-offset:3px;font-weight:600;}

/* 标注图例：符号样例（与题面标注一致）+ 文字，放题面旁 */
.anno-legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:9px 4px 0;font-size:12.5px;color:var(--ink-2);}
.anno-legend .lg{display:inline-flex;align-items:center;gap:6px;}
.anno-legend .sw-u1{border:2px solid var(--step-quan);border-radius:5px;background:#fff7ed;color:#9a3412;font-weight:700;padding:0 6px;}
.anno-legend .sw-data{text-decoration:underline wavy var(--step-quan);text-underline-offset:3px;font-weight:600;padding:0 4px;}
.anno-legend .sw-q{border:2px solid var(--step-quan);border-radius:50%;color:#9a3412;font-weight:700;padding:0 7px;}

/* 步骤面板：每步一块独立显眼的面板，按四步色（圈橙·画蓝·列紫·验绿） */
.steppanel{margin-top:16px;border-radius:12px;padding:13px 16px;font-size:15px;font-weight:400;line-height:1.75;
  border:1px dashed var(--line);background:var(--soft);color:var(--ink);}
.steppanel .pl{font-size:12px;font-weight:800;letter-spacing:.04em;display:block;margin-bottom:5px;opacity:.95;}
.steppanel b{font-weight:700;}                                  /* 加粗不放大，避免行内大小跳动 */
.steppanel .ans{font-weight:800;font-size:17px;}               /* 只有最终答案单独放大 */
.steppanel.p0{background:#fff7ed;border-color:var(--step-quan);color:#9a3412;}
.steppanel.p1{background:var(--brand-50);border-color:var(--step-hua);color:#1e3a8a;}
.steppanel.p2{background:#f5f3ff;border-color:var(--step-lie);color:#5b21b6;}
.steppanel.p3{background:var(--success-bg);border-color:var(--step-yan);color:#166534;}

/* ===== 实验台版面 v2：题面 → 工作台(bench) → 帮助，三段清晰阅读流 ===== */
/* 四步条 → 紧凑进度条（连线 + 圆点 + 标签，当前步高亮） */
.fsbar[data-mode="progress"]{position:relative;display:flex;gap:0;margin:2px 0 18px;}
.fsbar[data-mode="progress"]::before{content:"";position:absolute;top:23px;left:13%;right:13%;height:2px;background:var(--line);z-index:0;}
.fsbar[data-mode="progress"] .fstep{flex:1;border:none!important;background:none!important;box-shadow:none!important;
  padding:6px 0 0;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.45;z-index:1;
  transition:opacity var(--dur-base) var(--ease-out);}
.fsbar[data-mode="progress"] .fstep .dot{width:34px;height:34px;margin:0;box-shadow:0 0 0 4px var(--surface);}
.fsbar[data-mode="progress"] .fstep .nm{font-size:15px;}
.fsbar[data-mode="progress"] .fstep .ds{font-size:11px;color:var(--muted);font-weight:600;line-height:1.2;}
.fsbar[data-mode="progress"] .fstep[aria-current="step"]{opacity:1;}
.fsbar[data-mode="progress"] .fstep[aria-current="step"] .dot{box-shadow:0 0 0 4px var(--surface),0 0 0 7px color-mix(in srgb,var(--c) 25%,transparent);}
.fsbar[data-mode="progress"] .fstep.clickable:hover{opacity:.85;transform:none;box-shadow:none;}

/* 工作台：控件/画布/步骤面板/导航 收进一张卡 */
.bench{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:20px 22px;margin-top:14px;}
.bench .canvas{border:none;background:transparent;box-shadow:none;min-height:auto;padding:8px 0;}
.bench .stepper{margin-top:14px;}
.toolbar{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);}
.toolbar .ctl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2);}
.toolbar input[type=range]{width:104px;flex:none;}
.toolbar input[type=number]{width:56px;}

/* 步骤面板 → 嵌入工作台：左侧色条 + 浅底，不再独立浮框 */
.steppanel{border:none;border-left:4px solid var(--line);border-radius:0 10px 10px 0;padding:11px 16px;}
.steppanel.p0{border-left-color:var(--step-quan);}
.steppanel.p1{border-left-color:var(--step-hua);}
.steppanel.p2{border-left-color:var(--step-lie);}
.steppanel.p3{border-left-color:var(--step-yan);}

/* 帮助区：揭示 + 家长，并排轻量 */
.helpers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
@media(max-width:680px){.helpers{grid-template-columns:1fr;}}
.helpers .reveal,.helpers .coach{margin-top:0;}
.helpers .reveal-btn{padding:11px 14px;font-size:14px;}

/* RevealBox */
.reveal{margin-top:14px;}
.reveal-btn{width:100%;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
  border:2px dashed var(--success);background:var(--success-bg);color:#166534;border-radius:12px;padding:13px;
  transition:all var(--dur-fast) var(--ease-out);}
.reveal-btn:hover{background:#dcfce7;}
.reveal-body{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-spring);}
.reveal-body.open{max-height:320px;}
.reveal-inner{padding:14px 16px;margin-top:10px;border-radius:12px;background:var(--success-bg);
  border:1px dashed var(--success);color:#166534;}

/* CoachCard */
.coach{margin-top:16px;border-radius:var(--r-lg);border:1px solid #fbcfe8;background:#fdf2f8;overflow:hidden;}
.coach summary{list-style:none;cursor:pointer;padding:13px 16px;font-weight:700;color:#9d174d;
  display:flex;align-items:center;gap:8px;}
.coach summary::-webkit-details-marker{display:none;}
.coach summary::before{content:"▸";transition:transform var(--dur-base);}
.coach[open] summary::before{transform:rotate(90deg);}
.coach .cbody{padding:0 16px 16px;color:#831843;font-size:14px;}
.coach .ask{background:#fff;border-radius:10px;padding:10px 14px;margin-top:8px;border:1px solid #fbcfe8;}

/* 割补 / 剪开 分离动画（RingEngine、SquareEngine 输出的元素带 .fly） */
@keyframes ringfly{ from{ transform:translateX(-26px); opacity:.15; } to{ transform:translateX(0); opacity:1; } }
@keyframes cutfade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sqfly{ from{ transform:scale(.9); opacity:.2; } to{ transform:scale(1); opacity:1; } }
.ring-cut.fly{ animation:ringfly .42s var(--ease-out); }
.ring-minus.fly{ animation:cutfade .42s var(--ease-out); }
.sq-tri.fly{ transform-box:fill-box; transform-origin:center; animation:sqfly .4s var(--ease-spring); }

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}