/* The CiNotes calculator: a TI-84 Plus CE drawn in CSS. */
#calculator-demo { scroll-margin-top: calc(var(--nav-h, 66px) + 16px); }
.cdemo { --body-1:#3B4250; --body-2:#262B36; --body-3:#1C2029; color:#F4F6FA; display:grid; gap:22px; }

/* Body --------------------------------------------------------------- */
.cdemo-device {
    position:relative;
    padding:18px 18px 28px;
    border-radius:32px 32px 46px 46px;
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(90deg, rgba(255,255,255,.06), transparent 8%, transparent 92%, rgba(255,255,255,.05)),
        linear-gradient(170deg, var(--body-1), var(--body-2) 45%, var(--body-3));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -3px 0 rgba(0,0,0,.35),
        0 2px 0 #11141A,
        0 40px 60px -30px rgba(20,27,52,.65),
        0 18px 24px -18px rgba(20,27,52,.5);
    outline-offset:6px;
}
.cdemo-device:focus-visible { outline:3px solid var(--pen, #2B45D4); }
.cdemo-brand { display:flex; justify-content:space-between; align-items:baseline; padding:0 4px 12px; }
.cdemo-brand span { font-weight:800; font-size:15px; letter-spacing:-.03em; color:#fff; }
.cdemo-brand small { color:#A4ACBC; font-size:10.5px; font-weight:600; font-style:italic; letter-spacing:.01em; }

/* Screen ------------------------------------------------------------- */
.cdemo-screen-frame {
    container-type:inline-size;
    background:linear-gradient(#0B0E13, #151A22);
    border-radius:12px;
    padding:10px;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08);
}
.cdemo-screen {
    position:relative; overflow:hidden;
    aspect-ratio:4/3;
    background:var(--lcd, #FBFCF7); color:var(--lcd-ink, #101418);
    font-family:var(--font-pixel, 'VT323', monospace);
    font-size:calc(100cqi / 16.2); /* 26 columns of 0.6em plus 0.3em padding each side */
    line-height:1.13;
    padding:0 .3em .2em;
    border-radius:3px;
}
.cdemo-os { display:flex; justify-content:space-between; align-items:center; background:var(--lcd-bar, #4D5550); color:#fff; margin:0 -.3em .25em; padding:0 .45em; height:calc(100cqi * .058); font-family:ui-monospace, Menlo, monospace; font-size:calc(100cqi * .03); letter-spacing:.02em; white-space:nowrap; }
.cdemo-battery { width:.9em; height:1.4em; border:1px solid #EEF3E8; background:#B7D28B; box-shadow:inset 0 0 0 1px var(--lcd-bar, #4D5550); flex:none; }
.cdemo-display { height:calc(100% - 100cqi * .058 - .25em); display:flex; flex-direction:column; }
.cdemo-screen-line { white-space:pre; min-height:1.13em; }
.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:#FFE53B; color:inherit; padding:0; margin:0; border-radius:0; box-shadow:0 0 0 .04em #FFE53B; }
.cdemo-screen-bottom { margin-top:auto; white-space:pre; }
.cdemo-input-row { display:flex; align-items:baseline; gap:1ch; }
.cdemo-search-label { flex-shrink:0; margin:0; }
.cdemo-search-input { min-width:0; flex:1; width:100%; background:transparent; border:0; border-bottom:2px solid #8B9385; border-radius:0; font:inherit; color:inherit; letter-spacing:inherit; margin:0; padding:0; min-height:0; line-height:1.13; box-shadow:none; caret-color:#101418; }
.cdemo-search-input:focus { box-shadow:none; border-bottom-color:#101418; outline:none; }
.cdemo-glare { position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 100%); mix-blend-mode:soft-light; }

/* Power: a page can hold the screen dark until its intro finishes. */
[data-intro="wait"]:not(.is-booted) .cdemo-screen { background:#1B211C; }
[data-intro="wait"]:not(.is-booted) .cdemo-screen > :not(.cdemo-glare) { opacity:0; }
.is-booted .cdemo-screen > .cdemo-os, .is-booted .cdemo-display { animation:cdemo-power .7s steps(1) both; }
.is-booted .cdemo-screen::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 0 45%, rgba(255,255,255,.95) 50%, transparent 55%); transform:translateY(-60%); animation:cdemo-scan .8s ease-out forwards; pointer-events:none; }
@keyframes cdemo-power { 0% { opacity:0 } 20% { opacity:1 } 30% { opacity:.2 } 45%, 100% { opacity:1 } }
@keyframes cdemo-scan { to { transform:translateY(60%); opacity:0; } }

/* Keys --------------------------------------------------------------- */
.cdemo-key {
    position:relative;
    min-width:0; min-height:38px;
    padding:0 1px;
    border-radius:8px 8px 11px 11px;
    background:linear-gradient(#4B5465, #363D4B);
    border:1px solid #2B313D; border-bottom:3px solid #0F1218;
    color:#F1F3F7;
    font-family:var(--font, system-ui); font-size:12px; font-weight:650; line-height:1;
    box-shadow:0 2px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
    transition:transform .08s, border-bottom-width .08s, filter .15s, box-shadow .2s;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}
.cdemo-key span { display:block; }
.cdemo-key:hover { filter:brightness(1.15); }
.cdemo-key:active, .cdemo-key.is-pressed { transform:translateY(2px); border-bottom-width:1px; }
.cdemo-key.is-pressed { box-shadow:0 0 0 3px rgba(255,229,59,.9), 0 0 22px 4px rgba(255,229,59,.55); filter:brightness(1.25); }
.cdemo-key:focus-visible { outline:3px solid #FFE53B; outline-offset:2px; border-radius:9px; }
.cdemo-key-top { min-height:26px; font-size:10px; border-radius:6px 6px 8px 8px; background:linear-gradient(#434B5B, #31384A); }
.cdemo-key-number { background:linear-gradient(#FBFCFE, #D6DCE6); border-color:#B6BFCD; border-bottom-color:#5A6273; color:#1A2030; font-size:18px; font-weight:700; }
.cdemo-key-second { background:linear-gradient(#5AA5F0, #3985D1); border-color:#2A6BAE; border-bottom-color:#16416E; }
.cdemo-key-alpha { background:linear-gradient(#48BA77, #2B9555); border-color:#20794A; border-bottom-color:#11492A; }
.cdemo-key-enter { font-size:11px; }
/* Green letters printed on the body above each key, like the real thing. */
.cdemo-alpha-label { position:absolute; top:-12px; right:2px; font-family:var(--font, system-ui); font-size:9px; font-weight:700; line-height:1; color:#6BD493; letter-spacing:0; pointer-events:none; }

.cdemo-topkeys { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin:16px 2px 14px; }
.cdemo-control-row { display:grid; grid-template-columns:3fr 2fr; gap:12px; margin-bottom:18px; align-items:center; }
.cdemo-editkeys { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 7px; }
.cdemo-editkeys .cdemo-key { min-height:34px; font-size:10.5px; }
.cdemo-pad {
    position:relative;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
    aspect-ratio:1; width:100%; max-width:118px; justify-self:center;
    border-radius:50%;
    background:radial-gradient(circle at 50% 40%, #2C323E, #161A21);
    box-shadow:inset 0 2px 5px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08);
    padding:6px;
}
.cdemo-pad .cdemo-key { min-height:0; padding:0; font-size:11px; border-radius:9px; }
.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-keypad { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:15px 8px; padding-top:4px; }
.cdemo-keypad .cdemo-key { min-height:38px; font-size:12.5px; }

/* Deck: tour controls, chapters, live status ------------------------- */
.cdemo-deck { color:var(--ink-2, #3B4260); display:grid; gap:14px; }
.cdemo-tour { display:flex; align-items:center; gap:14px; min-height:48px; }
.cdemo-play {
    display:inline-flex; align-items:center; gap:10px;
    padding:6px 14px 6px 6px; border-radius:999px;
    background:var(--card, #fff); border:1.5px solid var(--ink, #141B34);
    color:var(--ink, #141B34); font-weight:650; font-size:14px;
    box-shadow:0 3px 0 var(--ink, #141B34);
    transition:transform .08s, box-shadow .08s;
    flex:none;
}
.cdemo-play:active { transform:translateY(2px); box-shadow:0 1px 0 var(--ink, #141B34); }
.cdemo-play-icon { width:30px; height:30px; border-radius:50%; background:var(--hi, #FFE53B); position:relative; flex:none; }
.cdemo-play-icon::before { content:""; position:absolute; left:11px; top:9px; border-left:10px solid var(--ink, #141B34); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.cdemo-play[aria-pressed="true"] .cdemo-play-icon::before { left:10px; top:10px; width:3px; height:10px; border:0; background:var(--ink, #141B34); box-shadow:6px 0 0 var(--ink, #141B34); }
.cdemo-caption { font-family:var(--font-hand, cursive); color:var(--pen, #2B45D4); font-size:19px; line-height:1.25; min-height:1.25em; }
.cdemo-caption.is-new { animation:cdemo-caption .35s ease; }
@keyframes cdemo-caption { from { opacity:0; transform:translateY(4px); } }

.cdemo-lessons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cdemo-lesson { text-align:left; padding:0 0 4px; border-radius:6px; color:var(--ink-3, #646B85); transition:color .2s; }
.cdemo-lesson:hover { color:var(--ink, #141B34); }
.cdemo-lesson strong { display:block; font-size:15px; color:inherit; margin-top:10px; }
.cdemo-lesson small { display:block; font-size:13px; line-height:1.4; margin-top:2px; }
.cdemo-lesson[aria-pressed="true"] { color:var(--ink, #141B34); }
.cdemo-lesson-bar { display:block; height:4px; border-radius:4px; background:var(--rule, #DDE3EE); overflow:hidden; }
.cdemo-lesson-bar i { display:block; height:100%; width:0; background:var(--ink, #141B34); border-radius:4px; transition:width .5s linear; }
[data-mode="manual"] .cdemo-lesson[aria-pressed="true"] .cdemo-lesson-bar i { width:100% !important; background:var(--hi-edge, #D4B200); }
[data-mode="tour"] .cdemo-status { visibility:hidden; }
.cdemo-status { font-size:14px; line-height:1.5; color:var(--ink-3, #646B85); min-height:1.5em; }
.cdemo-help { font-size:13px; line-height:1.6; color:var(--ink-4, #9CA2B8); }
.cdemo-help strong { color:var(--ink-3, #646B85); font-weight:650; }
.cdemo-reset { font-size:13px; font-weight:650; color:var(--pen, #2B45D4); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:420px) {
    .cdemo-device { padding:14px 12px 22px; border-radius:26px 26px 38px 38px; }
    .cdemo-keypad { gap:14px 6px; }
    .cdemo-key { font-size:11px; }
    .cdemo-keypad .cdemo-key { min-height:34px; font-size:11px; }
    .cdemo-key-number, .cdemo-keypad .cdemo-key-number { font-size:16px; }
    .cdemo-editkeys .cdemo-key { font-size:9.5px; }
    .cdemo-alpha-label { font-size:8px; top:-11px; }
    .cdemo-lessons small { display:none; }
}
@media (prefers-reduced-motion:reduce) { .cdemo * { transition:none !important; animation:none !important; } }