/* Shared chrome for the 4-D interactive labs. Widget-specific CSS stays inline per lab. */
:root { --ink:#1c2230; --muted:#5b6577; --line:#e2e7f0; --green:#2f9e6f; --orange:#e08a3c; --blue:#3b6fd4; --accent:#c4622d; --bg:#f7f5f1; --card:#fff; }
* { box-sizing:border-box }
body { margin:0; font-family:'Funnel Sans',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink); line-height:1.65 }
.wrap { max-width:880px; margin:0 auto; padding:0 22px 64px }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 0; font-size:.85rem }
.topbar a { color:var(--accent); text-decoration:none; font-weight:700 }
.badge-chip { display:none; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); border-radius:99px; padding:5px 12px; font-weight:700; font-size:.8rem }
.badge-chip.on { display:inline-flex }
.hero { background:linear-gradient(135deg,#c4622d,#e08a3c); color:#fff; border-radius:22px; padding:30px 28px; margin:6px 0 26px; box-shadow:0 18px 40px rgba(196,98,45,.28) }
.hero .kicker { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.9 }
.hero h1 { font-size:2rem; margin:6px 0 8px; letter-spacing:-.01em }
.hero p { margin:0; opacity:.95; max-width:54ch }
.phase { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:800; margin:34px 0 4px }
h2 { font-size:1.25rem; margin:0 0 8px }
.lede { color:var(--muted); margin:0 0 18px }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; margin:14px 0; box-shadow:0 6px 18px rgba(28,34,48,.05) }
input[type=range] { width:100%; accent-color:var(--accent); height:6px }
.ctl label { font-weight:700; display:block; margin-bottom:6px }
.ctl .val { color:var(--accent); font-weight:800 }
table { border-collapse:collapse; width:100%; font-size:.95rem; margin-top:8px }
th,td { border:1px solid var(--line); padding:9px 12px; text-align:center }
th { background:#f0eee9 }
tr.live td { background:#fdf3ec; font-weight:700 }
/* Boss panel */
.boss { background:#12161f; color:#eef1f6; border-radius:20px; padding:26px }
.boss h2 { color:#fff }
.boss .lede { color:#aeb6c6 }
.step { display:grid; grid-template-columns:1fr 150px; gap:12px; align-items:center; margin:12px 0; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08) }
.step .ask { font-size:.95rem }
.step .ask small { display:block; color:#8b94a6; font-size:.8rem; margin-top:2px }
.step input { width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:#1c2230; color:#fff; font-size:1rem; text-align:right }
.step input.ok { border-color:#3ddc84; background:#16291e }
.step input.bad { border-color:#ff6b6b; background:#2a1a1a }
.check { margin-top:10px; display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.check button { background:var(--accent); color:#fff; border:0; border-radius:12px; padding:12px 22px; font-size:1rem; font-weight:800; cursor:pointer }
.check button:disabled { opacity:.5; cursor:default }
.result { font-weight:700 }
.result.win { color:#3ddc84 }
.win-banner { display:none; margin-top:16px; background:linear-gradient(135deg,#1f7a4d,#3ddc84); color:#04210f; border-radius:14px; padding:16px 18px; font-weight:800 }
.win-banner.on { display:block }
.foot { color:var(--muted); font-size:.85rem; margin-top:30px; border-top:1px solid var(--line); padding-top:14px }