/* Shared styling for rbseguide interactive math widgets (self-contained iframes) */
:root{
  --bg:#FFFBF3; --surface:#FFFFFF; --surface-2:#FFF7EA;
  --ink:#2A2118; --ink-soft:#7C6B53; --line:#EEDFC6;
  --accent:#E8930C; --accent-deep:#B96E00; --accent-soft:#FCE6B8;
  --carry:#2563EB; --carry-soft:#DBEAFE;
  --borrow:#DB4E2B; --borrow-soft:#FBE0D7;
  --result:#2E9E63; --focus:#FBE4AE;
  --shadow:0 10px 30px rgba(120,80,10,.10), 0 2px 6px rgba(120,80,10,.06);
  --font-round:"Segoe UI Rounded",ui-rounded,"SF Pro Rounded","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#191410; --surface:#241D14; --surface-2:#2E251A; --ink:#F6ECD9; --ink-soft:#B8A788; --line:#463A28;
  --accent:#F5B23E; --accent-deep:#F5B23E; --accent-soft:#523F1C; --carry:#7CA9FF; --carry-soft:#22345A;
  --borrow:#FF7C57; --borrow-soft:#4A2A1C; --result:#59CB8C; --focus:#4A3A1B; --shadow:0 12px 34px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --bg:#191410; --surface:#241D14; --surface-2:#2E251A; --ink:#F6ECD9; --ink-soft:#B8A788; --line:#463A28;
  --accent:#F5B23E; --accent-deep:#F5B23E; --accent-soft:#523F1C; --carry:#7CA9FF; --carry-soft:#22345A;
  --borrow:#FF7C57; --borrow-soft:#4A2A1C; --result:#59CB8C; --focus:#4A3A1B; --shadow:0 12px 34px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --bg:#FFFBF3; --surface:#FFFFFF; --surface-2:#FFF7EA; --ink:#2A2118; --ink-soft:#7C6B53; --line:#EEDFC6;
  --accent:#E8930C; --accent-deep:#B96E00; --accent-soft:#FCE6B8; --carry:#2563EB; --carry-soft:#DBEAFE;
  --borrow:#DB4E2B; --borrow-soft:#FBE0D7; --result:#2E9E63; --focus:#FBE4AE;
  --shadow:0 10px 30px rgba(120,80,10,.10), 0 2px 6px rgba(120,80,10,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
.page{background:var(--bg); color:var(--ink); font-family:var(--font-round); padding:20px 16px 40px; -webkit-font-smoothing:antialiased;}
.wrap{max-width:960px; margin:0 auto}
header.top{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.bee{width:56px; height:56px; flex:0 0 auto; border-radius:50%; background:var(--accent-soft); display:grid; place-items:center; font-size:30px; border:2px solid var(--accent);}
.titles h1{margin:0; font-size:24px; font-weight:700; letter-spacing:-.3px; text-wrap:balance;}
.titles p{margin:2px 0 0; color:var(--ink-soft); font-size:14px}
.theme-btn{margin-left:auto; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:8px 14px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;}
.theme-btn:hover{border-color:var(--accent)}
.stage{margin-top:22px; background:var(--surface); border:1.5px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:22px 22px 18px;}
.stage-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.qbadge{background:var(--accent); color:#fff; font-weight:700; font-size:13px; border-radius:999px; padding:4px 12px;}
.qexpr{font-size:20px; font-weight:700; letter-spacing:.5px; font-variant-numeric:tabular-nums}
.step-count{margin-left:auto; color:var(--ink-soft); font-size:13px; font-weight:600}
.calc-scroll{overflow-x:auto; padding:14px 0 6px}
.calc{width:max-content; margin:0 auto; padding:18px 26px 14px; background:var(--surface-2); border-radius:16px; border:1px dashed var(--line);}
.row{display:flex; justify-content:flex-end}
.cell{width:60px; height:60px; position:relative; display:grid; place-items:center; font-size:44px; font-weight:700; font-variant-numeric:tabular-nums; border-radius:12px; transition:background .25s ease;}
.cell.op{width:44px; color:var(--accent-deep); font-size:38px}
.ann{height:34px}
.ann .cell{height:34px; font-size:22px; font-weight:800}
.cell.focus{background:var(--focus)}
.rule{height:6px; margin:8px 4px 6px; border-radius:4px; background:var(--ink)}
.res{color:var(--result)}
.struck{position:relative; color:var(--ink-soft)}
.struck::after{content:""; position:absolute; left:6%; right:6%; top:50%; height:4px; background:var(--borrow); transform:rotate(-18deg); border-radius:3px;}
.pop{animation:pop .4s cubic-bezier(.2,1.3,.5,1)}
@keyframes pop{from{transform:scale(.2); opacity:0} to{transform:scale(1); opacity:1}}
.reveal{animation:drop .45s ease}
@keyframes drop{from{transform:translateY(-14px); opacity:0} to{transform:translateY(0); opacity:1}}
.pulse{animation:pulse .5s ease}
@keyframes pulse{0%{background:transparent} 40%{background:var(--focus)} 100%{background:var(--focus)}}
.narrate{margin-top:16px; min-height:52px; background:var(--accent-soft); border-radius:14px; padding:12px 16px; font-size:15.5px; line-height:1.45; color:var(--ink); display:flex; align-items:center; gap:10px;}
.narrate .tag{flex:0 0 auto; background:var(--accent); color:#fff; border-radius:8px; font-size:12px; font-weight:700; padding:3px 8px; text-transform:uppercase; letter-spacing:.4px;}
.narrate.final{background:color-mix(in srgb, var(--result) 20%, var(--surface))}
.narrate.final .tag{background:var(--result)}
.controls{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap}
.ctrl{border:1.5px solid var(--line); background:var(--surface); color:var(--ink); border-radius:12px; padding:10px 16px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:transform .08s ease, border-color .15s ease;}
.ctrl:hover{border-color:var(--accent)}
.ctrl:active{transform:scale(.96)}
.ctrl.primary{background:var(--accent); border-color:var(--accent); color:#fff; min-width:132px; justify-content:center}
.ctrl:disabled{opacity:.4; cursor:not-allowed}
.picker-title{margin:34px 0 12px; font-size:15px; font-weight:700; color:var(--ink-soft); letter-spacing:.3px}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px}
.pcard{border:1.5px solid var(--line); background:var(--surface); border-radius:14px; padding:12px 12px; cursor:pointer; text-align:left; font-family:inherit; color:var(--ink); display:flex; align-items:center; gap:10px; transition:border-color .15s, background .15s, transform .08s;}
.pcard:hover{border-color:var(--accent); transform:translateY(-2px)}
.pcard.active{border-color:var(--accent); background:var(--accent-soft)}
.pnum{flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--surface-2); color:var(--accent-deep); font-weight:800; font-size:13px; display:grid; place-items:center;}
.pcard.active .pnum{background:var(--accent); color:#fff}
.pexpr{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.5px}
.hint{text-align:center; color:var(--ink-soft); font-size:12.5px; margin-top:26px}
.hint kbd{background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-family:inherit}
@media (max-width:520px){.cell{width:48px; height:48px; font-size:34px} .cell.op{width:32px; font-size:28px} .ann .cell{height:30px; font-size:18px} .titles h1{font-size:20px}}
@media (prefers-reduced-motion:reduce){.pop,.reveal,.pulse{animation:none} .cell{transition:none}}