/* ── Casio fx-991ES PLUS simulator (js/tools/casio/) ─────────────────────────── */
.cas-win { position:fixed; left:0; top:0; transform-origin:0 0; will-change:transform; z-index:10050; display:none; align-items:stretch; gap:14px; opacity:0; transition:opacity .18s; font-family:Inter, system-ui, sans-serif; user-select:none; -webkit-user-select:none; }
.cas-win.show { display:flex; opacity:1; }
.cas-win.anim { transition:opacity .18s, transform .28s cubic-bezier(.2,.8,.2,1), left .28s cubic-bezier(.2,.8,.2,1), top .28s cubic-bezier(.2,.8,.2,1); }
.cas-win.dragging { transition:none; }
.cas-shell { position:relative; width:360px; border-radius:28px; padding:14px 14px 16px; background:linear-gradient(170deg,#2b2f36,#15171b 60%,#0e0f12); box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); color:#e5e7eb; display:flex; flex-direction:column; gap:10px; transform-origin:top left; }
.cas-head { display:flex; align-items:center; gap:8px; cursor:grab; touch-action:none; padding:2px 2px 0; }
.cas-head:active { cursor:grabbing; }
.cas-brand { font-weight:900; font-size:17px; letter-spacing:.02em; color:#f3f4f6; }
.cas-brand small { display:block; font-size:9px; font-weight:700; letter-spacing:.12em; color:#9ca3af; }
.cas-model { margin-left:auto; font-size:11px; font-weight:800; color:#cbd5e1; background:#111318; padding:4px 9px; border-radius:8px; letter-spacing:.06em; }
.cas-head button { width:30px; height:30px; border:0; border-radius:9px; background:rgba(255,255,255,.08); color:#e5e7eb; cursor:pointer; font-size:13px; }
.cas-head button:hover { background:rgba(255,255,255,.18); }
.cas-head .cas-x:hover { background:#991b1b; }

/* LCD */
.cas-lcd { position:relative; background:#c9d4b6; border:3px solid #1f2328; border-radius:8px; box-shadow:inset 0 2px 10px rgba(0,0,0,.35); padding:6px 10px 6px; min-height:112px; color:#111; font-family:"Inter","Segoe UI",system-ui,sans-serif; display:flex; flex-direction:column; }
.cas-ind { display:flex; gap:7px; font-size:9px; font-weight:800; letter-spacing:.04em; color:#2b3a24; height:12px; }
.cas-ind span { opacity:.18; } .cas-ind span.on { opacity:1; }
.cas-ind .right { margin-left:auto; }
.cas-in { flex:1; display:flex; align-items:center; min-height:48px; font-size:22px; line-height:1.1; overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:none; }
.cas-in::-webkit-scrollbar { display:none; }
.cas-out { display:flex; justify-content:flex-end; align-items:center; min-height:34px; font-size:24px; font-weight:600; white-space:nowrap; overflow:hidden; }
.cas-out.small { font-size:18px; }
.cas-menu { flex:1; font-size:14px; font-weight:700; line-height:1.55; display:grid; grid-template-columns:1fr 1fr; column-gap:14px; padding-top:2px; }
.cas-menu.one { grid-template-columns:1fr; }
.cas-menu .hl { background:#1f2a1a; color:#c9d4b6; border-radius:3px; padding:0 4px; }
.cas-err { flex:1; display:flex; flex-direction:column; justify-content:center; font-weight:800; font-size:16px; gap:4px; }
.cas-err small { font-size:11px; font-weight:700; color:#2b3a24; }
.cas-table { flex:1; font-size:13px; font-weight:700; line-height:1.4; display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:6px; }
.cas-table div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cas-table .hl { background:#1f2a1a; color:#c9d4b6; border-radius:3px; }

/* natural display pieces */
.cas-line { display:inline-flex; align-items:center; gap:1px; }
.cas-t { display:inline-block; }
.cas-t.op { padding:0 2px; }
.cas-cur { display:inline-block; width:2px; height:1.05em; background:#111; margin:0 1px; animation:casBlink 1s steps(1) infinite; vertical-align:middle; }
@keyframes casBlink { 50% { opacity:0; } }
.cas-box { display:inline-block; width:.55em; height:.9em; border:1.5px dotted #333; border-radius:2px; vertical-align:middle; }
.cas-frac { display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 2px; font-size:.86em; line-height:1.05; }
.cas-num { padding:0 3px 1px; border-bottom:1.5px solid #111; }
.cas-den { padding:1px 3px 0; }
.cas-mixed { display:inline-flex; align-items:center; gap:1px; }
.cas-sqrt { display:inline-flex; align-items:stretch; margin:0 1px; }
.cas-sqrt .cas-idx { font-size:.55em; align-self:flex-start; margin-right:-2px; margin-top:-2px; }
.cas-sqrt .cas-rad { font-size:1.15em; line-height:1; align-self:flex-end; }
.cas-sqrt .cas-radicand { border-top:1.5px solid #111; padding:1px 3px 0 2px; }
.cas-sup { font-size:.62em; line-height:1; margin-left:1px; align-self:flex-start; margin-top:-.25em; }
.cas-sub { font-size:.6em; line-height:1; align-self:flex-end; margin-bottom:-.2em; }
.cas-abs { border-left:1.5px solid #111; border-right:1.5px solid #111; padding:0 3px; }
.cas-big { display:inline-flex; flex-direction:column; align-items:center; font-size:.6em; line-height:1; margin:0 2px; }
.cas-big .cas-sym { font-size:1.9em; line-height:1; }

/* keypad */
.cas-pad { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px 7px; align-items:end; }
.cas-k { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; }
.cas-k .lab { display:flex; justify-content:space-between; width:100%; height:12px; font-size:8.5px; font-weight:800; letter-spacing:.01em; line-height:12px; padding:0 2px; white-space:nowrap; overflow:hidden; }
.cas-k .lab .s { color:#f5c84b; } .cas-k .lab .a { color:#ff6b6b; margin-left:auto; }
.cas-k button { white-space:nowrap; width:100%; height:34px; border:0; border-radius:9px; background:linear-gradient(#3b4048,#23272e); color:#f3f4f6; font:800 14px/1 Inter, system-ui, sans-serif; cursor:pointer; box-shadow:0 2px 0 #0b0c0f, inset 0 1px 0 rgba(255,255,255,.1); transition:transform .06s, filter .06s; touch-action:manipulation; }
.cas-k button:active, .cas-k button.down { transform:translateY(2px); box-shadow:0 0 0 #0b0c0f; filter:brightness(1.2); }
.cas-k.num button { background:linear-gradient(#f3f4f6,#d4d7dd); color:#0f1115; height:36px; font-size:16px; }
.cas-k.op button { background:linear-gradient(#3f4854,#2a3038); font-size:17px; }
.cas-k.shift button { background:linear-gradient(#f0c541,#c99a12); color:#111; font-size:11px; }
.cas-k.alpha button { background:linear-gradient(#ff7676,#d64545); color:#fff; font-size:11px; }
.cas-k.on button { background:linear-gradient(#4ade80,#16a34a); color:#052e12; font-size:11px; }
.cas-k.del button { background:linear-gradient(#9fd36c,#5f9e2f); color:#0b1a04; font-size:12px; }
.cas-k.mode button { font-size:11px; }
.cas-k.sd button { font-size:12px; }
.cas-k button sup, .cas-k button sub { font-size:.6em; line-height:0; position:relative; vertical-align:baseline; } .cas-k button sup { top:-.55em; } .cas-k button sub { top:.35em; }
.cas-k.span2 { grid-column:span 2; }
.cas-k.wide button { height:36px; }
/* the four-way key */
.cas-nav { grid-column:span 2; grid-row:span 2; display:grid; grid-template-columns:30px 30px 30px; grid-template-rows:26px 26px 26px; justify-content:center; align-content:center; gap:1px; }
.cas-nav button { border:0; background:linear-gradient(#3b4048,#1f2328); color:#e5e7eb; cursor:pointer; font-size:11px; box-shadow:0 2px 0 #0b0c0f; }
.cas-nav .u { grid-column:2; grid-row:1; border-radius:14px 14px 3px 3px; } .cas-nav .l { grid-column:1; grid-row:2; border-radius:14px 3px 3px 14px; } .cas-nav .r { grid-column:3; grid-row:2; border-radius:3px 14px 14px 3px; } .cas-nav .d { grid-column:2; grid-row:3; border-radius:3px 3px 14px 14px; }
.cas-nav button:active, .cas-nav button.down { transform:translateY(2px); box-shadow:none; filter:brightness(1.25); }
/* active SHIFT / ALPHA state */
.cas-shell.s-on .cas-k.shift button, .cas-shell.a-on .cas-k.alpha button { box-shadow:0 0 0 2px #fff, 0 2px 0 #0b0c0f; }
.cas-shell.s-on .cas-k .lab .s { text-shadow:0 0 6px #f5c84b; }
.cas-shell.a-on .cas-k .lab .a { text-shadow:0 0 6px #ff6b6b; }
/* key flash (teaching): the pressed key lights up */
.cas-k button.flash, .cas-nav button.flash { animation:casFlash .9s ease-out; }
@keyframes casFlash { 0% { box-shadow:0 0 0 0 rgba(96,165,250,.95), 0 0 0 8px rgba(96,165,250,.6); filter:brightness(1.6); } 100% { box-shadow:0 0 0 0 rgba(96,165,250,0), 0 2px 0 #0b0c0f; filter:brightness(1); } }

/* teaching trail panel */
.cas-side { width:300px; display:flex; flex-direction:column; gap:10px; }
.cas-card { background:#fff; border-radius:20px; box-shadow:0 20px 50px -20px rgba(15,23,42,.55); padding:14px 16px; color:#0f172a; display:flex; flex-direction:column; min-height:0; }
.cas-card h4 { margin:0 0 8px; font-size:13px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#475569; display:flex; align-items:center; gap:8px; }
.cas-card h4 .sp { margin-left:auto; display:flex; gap:6px; }
.cas-card h4 button { height:28px; padding:0 10px; border:0; border-radius:9px; background:#f1f5f9; color:#334155; font:700 12px Inter, system-ui, sans-serif; cursor:pointer; }
.cas-card h4 button:hover { background:#e2e8f0; }
.cas-trail { flex:1; min-height:120px; max-height:360px; overflow:auto; display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px; }
.cas-chip { display:inline-flex; align-items:center; gap:4px; padding:5px 9px; border-radius:10px; background:#1e293b; color:#fff; font:800 13px Inter, system-ui, sans-serif; box-shadow:0 2px 0 #0f172a; animation:casPop .18s ease-out; }
.cas-chip.s { background:#f5c84b; color:#111; } .cas-chip.a { background:#ef4444; } .cas-chip.n { background:#f8fafc; color:#0f172a; border:1.5px solid #cbd5e1; box-shadow:0 2px 0 #cbd5e1; }
.cas-chip.last { outline:3px solid #60a5fa; outline-offset:1px; }
.cas-chip .arrow { color:#94a3b8; font-weight:900; }
@keyframes casPop { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }
.cas-empty { color:#94a3b8; font-size:13px; font-weight:600; padding:10px 0; }
.cas-hist { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow:auto; }
.cas-hist button { text-align:left; border:1.5px solid #e2e8f0; background:#f8fafc; border-radius:10px; padding:6px 10px; font:600 12px Inter, system-ui, sans-serif; color:#0f172a; cursor:pointer; display:flex; justify-content:space-between; gap:8px; }
.cas-hist button b { color:#4f46e5; }
.cas-foot { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#475569; }
.cas-foot input[type=range] { flex:1; accent-color:#4f46e5; }
.cas-foot label { display:flex; align-items:center; gap:6px; cursor:pointer; }
@media (max-width: 760px) { .cas-win { flex-direction:column; } }

.cas-body { flex:1; display:flex; flex-direction:column; min-height:0; }
.cas-label { font-size:12px; font-weight:800; color:#2b3a24; line-height:1.2; }
.cas-k button .fr { display:inline-flex; flex-direction:column; font-size:8px; line-height:1; gap:1px; }
.cas-k button .fr::before { content:''; }
.cas-k button .hol { display:inline-block; font-size:9px; vertical-align:middle; }
.cas-k button sup, .cas-k button sub { font-size:.6em; line-height:0; position:relative; vertical-align:baseline; } .cas-k button sup { top:-.55em; } .cas-k button sub { top:.35em; }
.cas-lcd .cas-err { font-size:15px; }
.cas-shell.s-on .cas-k.shift button { filter:brightness(1.15); }
.cas-hist button .cas-line { font-size:13px; } .cas-hist button span { overflow:hidden; } .cas-hist button b .cas-line { font-size:14px; }
.cas-head .cas-steps.active { background:#4f46e5; color:#fff; }

/* ── CMPLX / STAT / BASE-N / MATRIX / VECTOR modes (CasioModes.js) ── */
.cas-ind .md { color:#1f2a1a; }
.cas-k .lab .a.g { color:#6ee7a0; }
.cas-grid { flex:1; font-size:12px; font-weight:700; line-height:1.3; min-height:50px; overflow:hidden; }
.cas-grid table { border-collapse:collapse; width:100%; table-layout:fixed; }
.cas-grid th, .cas-grid td { padding:0 4px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cas-grid th { text-align:center; color:#2b3a24; font-size:10px; font-weight:800; }
.cas-grid .rn { text-align:left; color:#2b3a24; width:16px; font-size:10px; }
.cas-grid td.hl { background:#1f2a1a; color:#c9d4b6; border-radius:3px; }
.cas-matout { display:flex; justify-content:center; align-items:center; gap:2px; min-height:34px; font-size:14px; font-weight:700; line-height:1.2; }
.cas-matout table { border-collapse:collapse; }
.cas-matout td { padding:0 6px; text-align:right; white-space:nowrap; max-width:96px; overflow:hidden; text-overflow:ellipsis; }
.cas-matout td.hl { background:#1f2a1a; color:#c9d4b6; border-radius:3px; }
.cas-matout .br { font-size:2.2em; font-weight:300; line-height:.8; }
.cas-out.base { font-size:20px; letter-spacing:.03em; }
.cas-out.base.long { font-size:16px; white-space:normal; text-align:right; line-height:1.1; }