/* ======================================================================
   Flexbox 演练场 · 独立设计（彩色积木 / 糖果工作台主题）
   浅色 = 奶紫底 + 紫罗兰主控；深色 = 夜光积木盒
   ====================================================================== */
.fx{
  --ink:#2b2140; --sub:#6b5f85; --faint:#a99cc4;
  --bg:#f6f3fb; --card:#ffffff; --card2:#efe9f9; --line:#e0d7ef; --line2:#ece5f6;
  --pri:#7c3aed; --pri-2:#a78bfa; --pri-soft:#ede6fd; --pri-ink:#5b21b6;
  --c1:#f472b6; --c2:#fb923c; --c3:#facc15; --c4:#4ade80; --c5:#38bdf8; --c6:#a78bfa;
  --ok:#16a34a; --err:#dc2626;
  --r:16px;
  --shadow:0 2px 0 rgba(43,33,64,.05),0 14px 30px rgba(124,58,237,.10);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;line-height:1.75;
  background:
    radial-gradient(640px 300px at 92% -100px, rgba(244,114,182,.10), transparent 60%),
    radial-gradient(640px 300px at -6% -80px, rgba(56,189,248,.10), transparent 60%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .fx{
  --ink:#ece7f7; --sub:#a99cc4; --faint:#6f6390;
  --bg:#141021; --card:#1d1731; --card2:#251d3e; --line:#372c55; --line2:#2e2549;
  --pri:#a78bfa; --pri-2:#c4b5fd; --pri-soft:rgba(167,139,250,.14); --pri-ink:#ddd6fe;
  --ok:#4ade80; --err:#f87171;
  --shadow:0 2px 0 rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.45);
}
.fx *{box-sizing:border-box;}
.fx-wrap{max-width:1160px;margin:0 auto;}
.fx textarea{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}

.fx-hero{margin-top:22px;display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow);}
.fx-cubes{display:flex;gap:6px;flex:none;}
.fx-cubes i{width:16px;height:16px;border-radius:5px;display:block;}
.fx-hero h1{margin:0;font-size:clamp(21px,3vw,27px);font-weight:900;color:var(--pri-ink);}
.fx-hero p{margin:2px 0 0;color:var(--sub);font-size:14px;max-width:820px;}
.fx-hero p b{color:var(--pri-ink);}

.fx-desk{display:grid;grid-template-columns:360px 1fr;gap:16px;margin-top:16px;}
@media (max-width:960px){.fx-desk{grid-template-columns:1fr;}}
.fx-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);}
.fx-panel h2{margin:0 0 10px;font-size:13px;font-weight:900;letter-spacing:.08em;color:var(--pri);}
.fx-ctl{margin-bottom:14px;}
.fx-ctl>b{display:block;font-size:12.5px;color:var(--sub);margin-bottom:6px;font-weight:800;}
.fx-opts{display:flex;flex-wrap:wrap;gap:7px;}
.fx-opt{border:1.5px solid var(--line);background:var(--card2);color:var(--sub);border-radius:999px;padding:4px 13px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .12s;}
.fx-opt:hover{border-color:var(--pri-2);color:var(--pri-ink);}
.fx-opt.on{background:var(--pri);border-color:var(--pri);color:#fff;}
.fx-range{width:100%;accent-color:var(--pri);}
.fx-presets{display:flex;flex-wrap:wrap;gap:8px;}
.fx-pre{border:1.5px dashed var(--pri-2);background:var(--pri-soft);color:var(--pri-ink);border-radius:10px;padding:5px 12px;font-size:12.5px;font-weight:800;cursor:pointer;}
.fx-pre:hover{border-style:solid;background:var(--pri);color:#fff;}

.fx-stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;}
.fx-box{flex:1;min-height:340px;border:2px dashed var(--pri-2);border-radius:12px;padding:12px;background:var(--card2);}
.fx-item{border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:15px;min-width:64px;min-height:52px;padding:8px 14px;box-shadow:0 3px 0 rgba(0,0,0,.12);}
.fx-code{margin-top:14px;}
.fx-code textarea{width:100%;min-height:160px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card2);color:var(--ink);font-size:12.5px;line-height:1.7;resize:vertical;outline:none;}
.fx-msg{font-size:13px;font-weight:700;min-height:20px;margin-top:8px;}
.fx-msg.err{color:var(--err);}
.fx-msg.ok{color:var(--ok);}
.fx-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.fx-btn{border:none;background:var(--pri);color:#fff;border-radius:12px;padding:9px 18px;font-size:13.5px;font-weight:800;cursor:pointer;}
.fx-btn:hover{background:var(--pri-2);}
.fx-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1.5px solid var(--line);}
.fx-btn-ghost:hover{border-color:var(--pri-2);background:var(--pri-soft);}

/* ---------- 场景扩展 / flex-grow / 轴示意 ---------- */
.fx-extra{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
@media (max-width:900px){.fx-extra{grid-template-columns:1fr;}}
.fx-extra-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);min-width:0;}
.fx-extra-col h2{margin:0 0 8px;font-size:13px;font-weight:900;letter-spacing:.08em;color:var(--pri);}
.fx-hint{margin:0 0 12px;font-size:12.5px;color:var(--sub);line-height:1.7;}
.fx-grow-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.fx-sel{padding:7px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--card2);color:var(--ink);font-size:13px;font-weight:700;outline:none;}
.fx-sel:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.fx-grow-row .fx-range{flex:1 1 140px;min-width:120px;width:auto;}
.fx-grow-row>b{min-width:24px;text-align:center;color:var(--pri-ink);font-size:13px;}
.fx-axis{background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:8px 10px;overflow-x:auto;}
.fx-axis svg{display:block;width:100%;height:auto;min-width:540px;}
.fx-at{fill:var(--sub);font-size:12px;font-weight:700;font-family:inherit;}
.fx-aq{fill:#fff;font-size:12px;font-weight:900;font-family:inherit;}
:root[data-theme="dark"] .fx-extra .fx-btn-ghost{color:var(--pri-ink);}

.fx-faq{margin-top:32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow);}
.fx-faq h2{margin:0 0 10px;font-size:19px;font-weight:900;color:var(--pri-ink);}
.fx-faq h3{margin:16px 0 4px;font-size:15px;font-weight:800;}
.fx-faq p{margin:0;color:var(--sub);font-size:14px;}
.fx-faq p b{color:var(--ink);}