/* Self-contained CiNotes teaching simulator. */
#calculator-demo { margin: 3rem 0 4rem; scroll-margin-top: 2rem; }
.cdemo { --demo-ink:#18233c; border:1px solid #dce2f2; border-radius:24px; background:linear-gradient(120deg,#f8f9ff 0%,#eef1fa 100%); overflow:hidden; color:var(--demo-ink); }
.cdemo-heading { padding:32px 36px 0; }
.cdemo-heading h2 { font-size:clamp(25px,3vw,34px); letter-spacing:-.035em; margin-bottom:8px; }
.cdemo-heading p { color:#5b647b; font-size:14px; max-width:600px; }
.cdemo-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,370px); gap:42px; align-items:center; padding:30px 36px 34px; }
.cdemo-lessons { display:grid; gap:10px; }
.cdemo-lesson { display:grid; grid-template-columns:30px 1fr 16px; align-items:start; gap:12px; border:1px solid transparent; border-radius:12px; padding:16px; text-align:left; width:100%; transition:background .15s,border-color .15s; }
.cdemo-lesson:hover { background:#ffffff90; border-color:#d7dcf0; }
.cdemo-lesson[aria-pressed="true"] { background:#fff; border-color:#d7dcf0; box-shadow:0 3px 12px #29335006; }
.cdemo-step { width:28px; height:28px; display:grid; place-items:center; border:1px solid #d8dcee; border-radius:50%; font-size:11px; font-weight:700; color:#6a7390; }
.cdemo-lesson[aria-pressed="true"] .cdemo-step { color:#fff; background:#5a4ec2; border-color:#5a4ec2; }
.cdemo-lesson strong { display:block; font-size:14px; margin-bottom:4px; color:#24304c; }
.cdemo-lesson small { display:block; font-size:12px; line-height:1.6; color:#657088; }
.cdemo-arrow { color:#8178b0; padding-top:3px; }
.cdemo-help { padding:18px 16px 0; font-size:12px; line-height:1.7; color:#68728a; }
.cdemo-help a { font-weight:600; }
.cdemo-device-wrap { width:100%; max-width:370px; margin:auto; }
.cdemo-device { padding:20px 22px 22px; border:1px solid #404958; border-radius:25px 25px 36px 36px; background:linear-gradient(150deg,#343c4a,#252c39 58%,#1d2330); box-shadow:0 22px 30px -20px #202a4a90,inset 0 1px 0 #ffffff20; }
.cdemo-brand { display:flex; justify-content:space-between; align-items:center; padding:0 1px 14px; color:#e3e7f0; font-size:12px; font-weight:600; letter-spacing:.025em; }
.cdemo-brand small { color:#aab2c2; font-size:9px; font-weight:500; letter-spacing:.03em; }
.cdemo-screen-frame { container-type:inline-size; background:#111724; border-radius:8px; padding:8px; box-shadow:inset 0 1px 4px #0008; }
.cdemo-screen { position:relative; background:#fcfff8; color:#182322; aspect-ratio:4/3; overflow:hidden; font-family:'Courier New',monospace; font-weight:700; font-size:clamp(9px,calc(6cqi - 2px),16px); line-height:1.25; letter-spacing:-.045em; padding:0 4px 3px; }
.cdemo-os { display:flex; justify-content:space-between; align-items:center; background:#515951; color:#fff; margin:0 -4px 5px; padding:2px 4px; font-size:8px; letter-spacing:0; height:16px; }
.cdemo-battery { width:7px; height:10px; border:1px solid #eff4e8; background:#b7d28b; box-shadow:inset 0 0 0 1px #515951; }
.cdemo-display { height:calc(100% - 21px); display:flex; flex-direction:column; }
.cdemo-screen-line { white-space:pre; min-height:1.25em; }
.cdemo-screen-body { display:flex; flex:1; min-height:0; }
.cdemo-lines { flex:1; }
.cdemo-scrollbar { width:1ch; white-space:pre; }
.cdemo-display mark { background:#fff080; color:inherit; padding:0; }
.cdemo-screen-bottom { margin-top:auto; white-space:pre; font-size:.9em; }
.cdemo-search-label { margin-top:8px; display:block; }
.cdemo-search-input { width:100%; background:transparent; border:0; border-bottom:1px solid #899581; border-radius:0; font:inherit; color:inherit; letter-spacing:inherit; margin:5px 0 8px; padding:2px 0; outline-offset:2px; }
.cdemo-screen-note { font-size:.85em; font-weight:400; letter-spacing:-.03em; }
.cdemo-key { min-height:44px; border:1px solid #606b7f; border-bottom:3px solid #111826; border-radius:7px 7px 10px 10px; color:#f3f5fa; background:linear-gradient(#515c6f,#424d61); box-shadow:0 2px 2px #0003; font-family:var(--font, sans-serif); font-size:12px; font-weight:650; transition:filter .1s,transform .1s; touch-action:manipulation; }
.cdemo-key:hover { filter:brightness(1.16); }
.cdemo-key:active { transform:translateY(2px); border-bottom-width:1px; }
.cdemo-key:disabled { opacity:.4; cursor:default; }
.cdemo-key small { font-size:8px; display:block; font-weight:400; color:#d1d9ea; }
.cdemo-key-accent { background:linear-gradient(#8172df,#6352be); border-color:#9485e2; border-bottom-color:#30276a; }
.cdemo-status { min-height:45px; padding:12px 2px 0; font-size:11px; text-align:center; color:#657088; line-height:1.5; }
.cdemo-footer { display:flex; justify-content:space-between; gap:16px; padding:14px 36px; border-top:1px solid #dce2f2; color:#737d91; font-size:11px; background:#ffffff55; }
.cdemo-reset { color:#5148a0; font-size:11px; font-weight:600; text-decoration:underline; text-underline-offset:3px; flex-shrink:0; }
.cdemo :focus-visible { outline:3px solid #8a77f2; outline-offset:4px; }
.cdemo-device:focus-visible { outline-offset:5px; }
@media(max-width:720px) { .cdemo-heading { padding:25px 22px 0; } .cdemo-layout { grid-template-columns:1fr; gap:20px; padding:20px 22px 24px; } .cdemo-lessons { grid-template-columns:repeat(3,1fr); gap:6px; } .cdemo-lesson { display:flex; flex-direction:column; gap:8px; padding:10px; } .cdemo-lesson strong { font-size:12px; margin:0; } .cdemo-lesson small,.cdemo-arrow { display:none; } .cdemo-help { padding:12px 2px 0; } .cdemo-footer { padding:14px 22px; } }
@media(max-width:380px) { .cdemo-layout { padding:18px 12px; } .cdemo-device { padding:17px; } .cdemo-heading { padding:22px 18px 0; } .cdemo-footer { padding:12px 18px; } }
@media(prefers-reduced-motion:reduce) { .cdemo * { transition:none; } }

/* TI-84 Plus CE: five graph keys, editing block and arrow pad, then seven five-key rows. */
.cdemo-topkeys { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:14px 0 12px; }
.cdemo-topkeys .cdemo-key { min-height:30px; font-size:10px; border-radius:5px; }
.cdemo-control-row { display:grid; grid-template-columns:3fr 2fr; gap:10px; margin-bottom:8px; align-items:center; }
.cdemo-editkeys { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 6px; }
.cdemo-editkeys .cdemo-key { min-height:42px; font-size:10px; }
.cdemo-keypad { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px 6px; }
.cdemo-keypad .cdemo-key { min-width:0; min-height:44px; position:relative; padding:10px 1px 2px; font-size:13px; }
.cdemo-keypad .cdemo-key-number { background:linear-gradient(#edf0f5,#ccd3df); color:#18233c; border-color:#bac3d3; border-bottom-color:#111826; font-size:19px; }
.cdemo-key .cdemo-alpha-label { position:absolute; top:1px; right:5px; color:#83d9a0; font-size:8px; line-height:10px; }
.cdemo-key-number .cdemo-alpha-label { color:#247844; }
.cdemo-key-second { background:#438cc6; }
.cdemo-key-alpha { background:#44895e; }
.cdemo-pad { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,32px); gap:0; width:100%; border-radius:50%; background:#151c27; }
.cdemo-pad .cdemo-key { min-height:0; padding:0; border-radius:8px; font-size:15px; }
.cdemo-pad [data-key="up"] { grid-area:1 / 2; }
.cdemo-pad [data-key="left"] { grid-area:2 / 1; }
.cdemo-pad [data-key="right"] { grid-area:2 / 3; }
.cdemo-pad [data-key="down"] { grid-area:3 / 2; }
.cdemo-footer { justify-content:flex-end; }
.cdemo-search-label { margin:0; }
.cdemo-search-input { margin:0; padding:0; min-height:0; line-height:1.25; }
/* Ten native text rows, with the viewer's status on row nine. */
.cdemo-screen { font-size:clamp(9px,calc(5.8cqi - 2px),15px); }
@media(max-width:380px) { .cdemo-device { padding:14px 10px; } .cdemo-keypad,.cdemo-editkeys,.cdemo-topkeys { column-gap:4px; } .cdemo-control-row { gap:6px; } .cdemo-brand small { font-size:8px; } }
.cdemo-input-row { display:flex; align-items:baseline; gap:1ch; }
.cdemo-input-row .cdemo-search-label { flex-shrink:0; }
.cdemo-input-row .cdemo-search-input { min-width:0; flex:1; }