/* Activities tab demos (dist/activity-demo.js): a mock student screen plays like a short muted clip.
   The stage keeps one height for every kind, so the panel never jumps while a demo loops. Every scripted
   scene (the five built-in activities and the ten games) is styled here on its own (the older .guide-* rules
   in teacher-home.css are not needed), and the scenes' own CSS keyframes are switched off so only the step
   script moves them. */
.activity-demo{position:relative;display:grid;gap:5px;box-sizing:border-box;width:100%;max-width:380px;margin:0 auto;padding:0;color:var(--n-3d3a35,#3d3a35);text-align:center}
.activity-demo [lang="en"]{font-family:var(--font-en),'Noto Sans KR',sans-serif}
.activity-demo-stage{position:relative;display:grid;place-items:center;box-sizing:border-box;height:200px;padding:8px 10px 16px;border-radius:16px;background:linear-gradient(160deg,var(--n-f3ece0,#f3ece0),var(--n-ede2d0,#ede2d0));overflow:hidden;isolation:isolate}
.activity-demo .guide-preview{display:grid;place-items:center;width:100%;min-height:0;padding:0;border-radius:0;background:none;overflow:visible}
/* A new loop starts in one cut back to the first frame (no fade to blank, no part gliding back): see activity-demo.js rewind. */
.activity-demo.is-rewinding .activity-demo-stage *,.activity-demo.is-rewinding .activity-demo-stage :before,.activity-demo.is-rewinding .activity-demo-stage :after{transition:none!important;animation:none!important}
.activity-demo .guide-screen{position:relative;box-sizing:border-box;width:min(100%,256px);padding:9px 12px 11px;border:1px solid var(--n-e6d9c6,#e6d9c6);border-radius:16px;background:var(--n-fffefb,#fffefb);box-shadow:0 8px 18px #4b341f17;color:var(--n-3d3a35,#3d3a35);text-align:center}
.activity-demo.is-scripted .guide-screen,.activity-demo.is-scripted .guide-screen *{animation:none}
.activity-demo .guide-screen p{margin:0}
.activity-demo .guide-screen svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.activity-demo .guide-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 8px;font-size:10px;font-weight:700;line-height:1.5;color:var(--n-8a8172,#8a8172)}
.activity-demo .guide-pill{padding:2px 8px;border-radius:999px;background:var(--n-e8f1e3,#e8f1e3);color:var(--n-46733b,#46733b)}
.activity-demo .guide-pill.is-ranking{background:var(--i-fff0d0,#fff0d0);color:var(--i-9a5f1c,#9a5f1c)}
.activity-demo .guide-meta{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums;transition:color .2s}
.activity-demo .guide-meta.is-urgent{color:var(--i-c4573a,#c4573a)}
.activity-demo .guide-plus{position:absolute;top:50%;left:50%;z-index:2;display:grid;place-items:center;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--i-5fae74,#5fae74);color:var(--i-ffffff,#fff);font-size:13px;font-weight:800;opacity:0;transform:scale(.5);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);pointer-events:none;box-shadow:0 4px 10px #2f6b4033}
.activity-demo .guide-plus.is-on{opacity:1;transform:none}

/* 단어 읽기: letters light up one by one, then the word and its meaning; the student says it twice. */
.activity-demo .guide-letters{display:flex;justify-content:center;gap:5px;margin:0 0 6px}
.activity-demo .guide-letters b{display:grid;place-items:center;width:26px;height:28px;border:1px solid var(--n-e3dccf,#e3dccf);border-radius:8px;background:var(--n-faf7f1,#faf7f1);color:var(--n-5a5245,#5a5245);font-size:17px;font-weight:700;transition:background-color .2s,border-color .2s,transform .2s}
.activity-demo .guide-letters b.is-done{border-color:var(--i-ecd3a3,#ecd3a3);background:var(--i-fff4dc,#fff4dc)}
.activity-demo .guide-letters b.is-lit{border-color:var(--n-e2a948,#e2a948);background:var(--n-ffe2a8,#ffe2a8);transform:translateY(-3px) scale(1.08)}
.activity-demo .guide-word{display:inline-block;padding:0 8px;border-radius:9px;font-size:24px;font-weight:700;line-height:1.25;color:var(--n-2f3b63,#2f3b63);transition:background-color .2s,transform .2s,color .2s}
.activity-demo .guide-word.is-lit{background:var(--n-ffe2a8,#ffe2a8);transform:scale(1.06)}
.activity-demo .guide-word.is-said{color:var(--i-3d7a3a,#3d7a3a);transform:scale(1.1)}
/* teacher-home.css pins these margins with !important; the demo sets its own. */
.activity-demo .guide-meaning{width:max-content;margin:2px auto 0!important;padding:1px 10px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.5;color:var(--n-6a5a43,#6a5a43);transition:background-color .2s}
.activity-demo .guide-meaning.is-lit{background:var(--n-ffe2a8,#ffe2a8)}
.activity-demo .guide-word,.activity-demo .guide-letters,.activity-demo .guide-meaning{transition:background-color .2s,transform .3s,opacity .3s,color .2s}
.activity-demo .guide-screen.is-next .guide-letters,.activity-demo .guide-screen.is-next .guide-word,.activity-demo .guide-screen.is-next .guide-meaning{opacity:0;transform:translateX(-26px)}
.activity-demo .guide-actions{display:flex;justify-content:space-between;gap:8px;margin-top:9px;transition:opacity .2s}
.activity-demo .guide-actions b{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:26px;box-sizing:border-box;padding:0 10px;border-radius:9px;font-size:11px;font-weight:750;transition:transform .15s,background-color .2s,border-color .2s}
.activity-demo .guide-listen{border:1px solid var(--n-d9cbb5,#d9cbb5);background:var(--n-ffffff,#fff);color:var(--n-6a5a43,#6a5a43)}
.activity-demo .guide-listen.is-on{border-color:var(--n-e2b04f,#e2b04f);background:var(--n-fff1d9,#fff1d9);color:var(--n-8d5d31,#8d5d31)}
.activity-demo .guide-next{border:1px solid var(--n-5d8b50,#5d8b50);background:var(--n-6b9a5d,#6b9a5d);color:var(--n-ffffff,#fff)}
.activity-demo .guide-actions b.is-pressed{transform:scale(.92)}
.activity-demo .guide-say{position:absolute;right:12px;bottom:11px;left:12px;display:flex;align-items:center;justify-content:center;gap:5px;min-height:26px;box-sizing:border-box;margin:0!important;padding:0 8px;border-radius:9px;background:var(--n-eef5ea,#eef5ea);color:var(--n-46733b,#46733b);font-size:11px;font-weight:800;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.activity-demo .guide-say.is-on{opacity:1;transform:none}
.activity-demo .guide-say.is-on~.guide-actions{opacity:0}
.activity-demo .guide-say i{width:9px;height:9px;box-sizing:border-box;border:1.5px solid var(--n-8fbf7f,#8fbf7f);border-radius:50%;background:var(--n-ffffff,#fff);transition:background-color .2s,transform .2s}
.activity-demo .guide-say i:first-of-type{margin-left:2px}
.activity-demo .guide-say i.is-on{border-color:var(--n-5d8b50,#5d8b50);background:var(--n-6b9a5d,#6b9a5d);transform:scale(1.15)}

/* 문장 읽기: practice reads along with the English (no microphone); 랭킹 도전 shows only the Korean, records, and 7+ passes. */
.activity-demo .guide-rounds{display:inline-flex;gap:3px}
.activity-demo .guide-rounds i{width:8px;height:8px;box-sizing:border-box;border-radius:50%;background:var(--n-6b9a5d,#6b9a5d);transition:background-color .2s,transform .2s}
.activity-demo .guide-rounds .guide-r3{background:var(--n-e3b866,#e3b866)}
.activity-demo .guide-rounds .guide-r3.is-done{background:var(--i-6b9a5d,#6b9a5d);transform:scale(1.3)}
.activity-demo .guide-rounds i.is-korean{border:1.5px solid var(--n-d6c8b0,#d6c8b0);background:transparent}
.activity-demo .guide-sentence{margin-top:6px;font-size:18px;font-weight:700;line-height:1.45;color:var(--n-2f3b63,#2f3b63)}
.activity-demo .guide-sentence span{display:inline-block;padding:0 2px;border-radius:5px;transition:background-color .15s,transform .15s}
.activity-demo .guide-sentence span.is-lit{background:var(--n-ffe2a8,#ffe2a8);transform:translateY(-2px)}
.activity-demo .guide-translation{margin:3px 0 0!important;font-size:12px;line-height:1.5;color:var(--n-7a6f5f,#7a6f5f)}
.activity-demo .guide-record{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:42px;margin-top:12px}
.activity-demo .guide-hear,.activity-demo .guide-mic{display:grid;place-items:center;border-radius:50%;transition:background-color .2s,color .2s,transform .15s,box-shadow .2s}
.activity-demo .guide-hear{justify-self:end;width:30px;height:30px;background:var(--n-eef1f6,#eef1f6);color:var(--n-7d879b,#7d879b)}
.activity-demo .guide-hear.is-on{background:var(--n-e3e9ff,#e3e9ff);color:var(--n-3457ed,#3457ed);box-shadow:0 0 0 4px var(--n-e3e9ff99,#e3e9ff99)}
.activity-demo .guide-mic{width:38px;height:38px;background:var(--i-df6f50,#df6f50);color:var(--i-ffffff,#fff)}
.activity-demo .guide-screen .guide-mic svg{width:17px;height:17px}
.activity-demo .guide-mic.is-rec{background:var(--i-d9483b,#d9483b);animation:demo-rec 1s ease-in-out infinite}
.activity-demo .guide-mic.is-sent{background:var(--i-cdbfa8,#cdbfa8)}
.activity-demo .guide-mic.is-pressed{transform:scale(.9)}
.activity-demo .guide-score{justify-self:start;font-size:16px;font-weight:800;color:var(--n-46733b,#46733b);opacity:0;transform:translateY(6px) scale(.8);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.activity-demo .guide-score small{font-size:10px;font-weight:700;color:var(--n-7a8a6f,#7a8a6f)}
.activity-demo .guide-score.is-on{opacity:1;transform:none}
.activity-demo .guide-sentence,.activity-demo .guide-translation{transition:opacity .25s,font-size .25s,color .25s}
.activity-demo.is-scripted .guide-screen:not(.is-ranking) .guide-mic,.activity-demo.is-scripted .guide-screen:not(.is-ranking) .guide-score{visibility:hidden}
/* The speaker (practice) and the microphone (랭킹 도전) share the middle cell; only one shows at a time. */
.activity-demo.is-scripted .guide-hear,.activity-demo.is-scripted .guide-mic{grid-area:1/2;justify-self:center}
.activity-demo.is-scripted .guide-score{grid-area:1/3}
.activity-demo .guide-screen.is-ranking .guide-sentence{display:none}
.activity-demo .guide-screen.is-ranking .guide-hear{visibility:hidden}
.activity-demo .guide-screen.is-ranking .guide-translation{margin:14px 0 4px!important;font-size:16px;font-weight:700;color:var(--i-2f3b63,#2f3b63)}

/* 단어 짝 맞추기: tap a word, tap its meaning, the pair goes; find every pair before time runs out. */
.activity-demo .guide-board{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:12px;background:var(--i-e4f3ee,#e4f3ee);transition:background-color .3s}
.activity-demo .guide-board>div{display:grid;gap:4px}
.activity-demo .guide-board b{display:grid;place-items:center;min-height:25px;box-sizing:border-box;padding:1px 4px;border:1px solid var(--i-cfe5dc,#cfe5dc);border-radius:8px;background:var(--n-ffffff,#fff);color:var(--n-35524a,#35524a);font-size:12px;font-weight:700;line-height:1.3;transition:background-color .15s,border-color .15s,opacity .3s,transform .3s}
.activity-demo .guide-board b.is-picked{border-color:var(--n-e2b04f,#e2b04f);background:var(--n-fff1c7,#fff1c7);transform:translateY(-1px)}
.activity-demo .guide-board b.is-match{border-color:var(--i-7fbf98,#7fbf98);background:var(--i-c9ebd6,#c9ebd6);transform:none}
.activity-demo .guide-board b.is-gone{opacity:0;transform:scale(.8)}
.activity-demo .guide-board b.is-pressed{transform:scale(.94)}
.activity-demo .guide-board.is-clear{background:var(--n-d3efdc,#d3efdc)}
.activity-demo .guide-board:after{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--n-5fae74,#5fae74);color:var(--n-ffffff,#fff);font-size:20px;font-weight:800;content:'✓';opacity:0;transform:scale(.5);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.activity-demo .guide-board.is-clear:after{opacity:1;transform:none}

/* 단어·문장 조합 퀴즈: pieces leave the tray in order and fill the answer, which turns green. */
.activity-demo .guide-prompt{display:flex;align-items:center;justify-content:center;gap:5px;width:max-content;max-width:100%;margin:0 auto 8px!important;padding:1px 8px;border-radius:8px;font-size:14px;font-weight:750;line-height:1.5;color:var(--n-5d4a2f,#5d4a2f);transition:background-color .2s}
.activity-demo .guide-prompt.is-lit{background:var(--n-ffe2a8,#ffe2a8)}
.activity-demo .guide-prompt.is-lit svg{color:var(--n-3457ed,#3457ed);animation:demo-beat .5s ease-in-out infinite alternate}
.activity-demo .guide-answer{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;min-height:32px;margin-bottom:10px}
.activity-demo .guide-slot{display:grid;place-items:center;min-width:26px;height:30px;box-sizing:border-box;padding:0 5px;border-bottom:2px solid var(--n-c9b79b,#c9b79b);color:var(--n-2f3b63,#2f3b63);font-size:19px;font-weight:700;transition:border-color .2s,color .2s}
.activity-demo .guide-slot span{opacity:0;transform:translateY(10px) scale(.85);transition:opacity .2s,transform .25s}
.activity-demo .guide-slot span.is-in{opacity:1;transform:none}
.activity-demo .guide-answer.is-right .guide-slot{border-color:var(--i-5fae74,#5fae74);color:var(--i-2f7a45,#2f7a45)}
.activity-demo .guide-tray{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.activity-demo .guide-tile{display:grid;place-items:center;min-width:30px;height:30px;box-sizing:border-box;padding:0 8px;border:1px solid var(--n-d9cbb5,#d9cbb5);border-radius:9px;background:var(--n-fff7e6,#fff7e6);color:var(--n-5a4630,#5a4630);font-size:16px;font-weight:700;box-shadow:0 2px 0 var(--n-e6d6bd,#e6d6bd);opacity:1;transition:opacity .25s,transform .2s,box-shadow .2s}
.activity-demo .guide-tile.is-pressed{transform:translateY(2px);box-shadow:none}
.activity-demo .guide-tile.is-used{opacity:.22;transform:scale(.9);box-shadow:none}
.activity-demo .guide-answer.is-chunks{gap:4px}
.activity-demo .guide-answer.is-chunks .guide-slot{min-width:34px;padding:0 4px;font-size:14px}
.activity-demo .guide-tray.is-chunks .guide-tile{padding:0 7px;font-size:13px}
/* 철자 퍼즐's letter keys are 행맨's keys (2026-10-31, as in the app): the demo's tray uses the 행맨 demo's key size. */
.activity-demo .guide-tray:not(.is-chunks){gap:4px}
.activity-demo .guide-tray:not(.is-chunks) .guide-tile{width:24px;min-width:0;height:27px;padding:0;border-radius:7px;font-size:13px}
/* +5 pops over the emptied tray. */
.activity-demo .guide-answer~.guide-plus{top:auto;bottom:9px}

/* Game plug-ins (practice only): a small 점수 pill, and matching's +5 / -2 circles for right and wrong answers. */
.activity-demo .guide-points-pill{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--n-f4efe6,#f4efe6);color:var(--n-6a5f50,#6a5f50)}
.activity-demo .guide-points{min-width:1.4ch;color:var(--n-3d3a35,#3d3a35);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.activity-demo .guide-minus{position:absolute;top:50%;left:50%;z-index:2;display:grid;place-items:center;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--i-d0644f,#d0644f);color:var(--i-ffffff,#fff);font-size:13px;font-weight:800;opacity:0;transform:scale(.5);pointer-events:none;box-shadow:0 0 0 3px var(--i-ffffff,#fff);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.activity-demo .guide-minus.is-on{opacity:1;transform:none}

/* 워드 레인: words fall a step at a time; the right one turns green, a wrong one red; a missed word lands on
   the ground (pink, like the game's sign) with 다시 나와요: no hearts, the score stays. */
.activity-demo .guide-sky{position:relative;height:92px;border-radius:12px;background:linear-gradient(var(--i-e6f2f6,#e6f2f6),var(--i-fdf7ec,#fdf7ec));box-shadow:inset 0 -12px 0 var(--i-e2cfa9,#e2cfa9);overflow:hidden}
.activity-demo .guide-drop{position:absolute;top:3px;padding:2px 9px;border:1.5px solid var(--n-e2d3b8,#e2d3b8);border-radius:999px;background:var(--n-ffffff,#fff);color:var(--n-403b35,#403b35);font-size:13px;font-weight:700;line-height:1.35;box-shadow:0 2px 0 var(--n-e7d9c3,#e7d9c3);transform:none;transition:transform .9s linear,opacity .25s,background-color .15s,border-color .15s,color .15s,scale .15s}
.activity-demo .guide-d1{left:6%}.activity-demo .guide-d2{left:38%}.activity-demo .guide-d3{left:66%}
.activity-demo .guide-drop.is-y1{transform:translateY(20px)}
.activity-demo .guide-drop.is-y2{transform:translateY(40px)}
.activity-demo .guide-drop.is-ground{transform:translateY(58px)}
.activity-demo .guide-drop.is-hit{border-color:var(--i-7fbf98,#7fbf98);background:var(--i-c9ebd6,#c9ebd6);color:var(--i-2f7a45,#2f7a45)}
.activity-demo .guide-drop.is-wrong{border-color:var(--i-eba596,#eba596);background:var(--i-fde9e4,#fde9e4);color:var(--i-b0402f,#b0402f)}
.activity-demo .guide-drop.is-gone{opacity:0}
.activity-demo .guide-drop.is-pressed{scale:.9}
.activity-demo .guide-drop.is-missed{border-color:var(--i-eba596,#eba596);background:var(--i-fde9e4,#fde9e4);color:var(--i-b0402f,#b0402f)}
/* 워드 레인's chances: three small drops before the score; a missed word empties one. */
.activity-demo .guide-rain-lives{display:inline-flex;align-items:center;gap:2px}
.activity-demo .guide-rain-lives i{width:8px;height:10px;border:1.5px solid var(--n-3f86c4,#3f86c4);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--n-3f86c4,#3f86c4);transition:background-color .25s,border-color .25s}
.activity-demo .guide-rain-lives i.is-lost{border-color:var(--i-c9bca8,#c9bca8);background:transparent}
.activity-demo .guide-rain-miss{transition:opacity .25s}
.activity-demo .guide-rain-miss.is-on{opacity:1}
.activity-demo .guide-rain-prompt{width:max-content;margin:7px auto 0!important;padding:3px 14px;border-radius:999px;background:var(--n-fff3d3,#fff3d3);color:var(--n-79562d,#79562d);font-size:13px;font-weight:800;line-height:1.5;transition:background-color .2s,box-shadow .2s}
.activity-demo .guide-rain-prompt.is-lit{background:var(--n-ffe2a8,#ffe2a8);box-shadow:0 0 0 3px var(--n-ffe2a866,#ffe2a866)}

/* 행맨: keys fill the word; a wrong key turns red and one balloon floats away. */
.activity-demo .guide-balloons{display:flex;justify-content:center;gap:6px;margin:0 0 9px}
.activity-demo .guide-balloons i{position:relative;width:14px;height:17px;border-radius:50% 50% 46% 46%;background:#e6806a;transition:transform .6s ease-in,opacity .6s}
.activity-demo .guide-balloons i:nth-child(2n){background:#e9b949}.activity-demo .guide-balloons i:nth-child(3n){background:#7fb3a0}
.activity-demo .guide-balloons i:after{position:absolute;top:100%;left:50%;width:1px;height:6px;background:#b9a98f;content:''}
.activity-demo .guide-balloons i.is-away{opacity:0;transform:translate(8px,-28px)}
/* Like the screen: three balloons in a small sky, 듣기 / 천천히 in its top-right corner, the meaning alone below. */
.activity-demo .guide-hm-sky{position:relative;margin:0 0 9px;padding:6px 0 8px;border:1px solid var(--i-dfe9ea,#dfe9ea);border-radius:10px;background:linear-gradient(var(--i-e6f2f6,#e6f2f6),var(--i-fdf7ec,#fdf7ec) 85%)}
.activity-demo .guide-hm-sky .guide-balloons{margin:0}
.activity-demo .guide-hm-sounds{position:absolute;top:4px;right:4px;display:flex;gap:3px}
.activity-demo .guide-hm-sounds b{display:grid;place-items:center;width:20px;height:20px;box-sizing:border-box;border:1px solid var(--n-e0d4c1,#e0d4c1);border-radius:50%;background:var(--n-ffffff,#fff);color:var(--n-6a5a43,#6a5a43)}
.activity-demo .guide-screen .guide-hm-sounds svg{width:12px;height:12px;vertical-align:0}
.activity-demo .guide-prompt+.guide-answer{margin-bottom:8px}
.activity-demo .guide-keys{display:flex;justify-content:center;gap:4px;margin:0}
.activity-demo .guide-keys b{display:grid;place-items:center;width:24px;height:27px;box-sizing:border-box;border:1px solid var(--n-e0d4c1,#e0d4c1);border-radius:7px;background:var(--n-fffaf2,#fffaf2);color:var(--n-5a4630,#5a4630);font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 2px 0 var(--n-e7d9c3,#e7d9c3);transition:opacity .2s,transform .15s,background-color .2s,border-color .2s,color .2s}
.activity-demo .guide-keys b.is-pressed{transform:translateY(2px);box-shadow:none}
.activity-demo .guide-keys b.is-used{border-color:var(--i-9fd2ad,#9fd2ad);background:var(--i-e5f4e8,#e5f4e8);color:var(--i-2f7a45,#2f7a45);opacity:.6;text-decoration:none}
.activity-demo .guide-keys b.is-wrong{border-color:var(--i-eba596,#eba596);background:var(--i-fde9e4,#fde9e4);color:var(--i-b0402f,#b0402f);opacity:1;text-decoration:line-through}

/* 문법 탐정: the red (wavy) part lights up, a right choice turns it green with ✓ (+5) and the sentence is heard;
   on the next sentence a wrong choice is crossed out (-2) and the hint line turns red. */
.activity-demo .guide-gd-case{display:grid;gap:2px;padding:5px 8px 6px;border:1px solid var(--n-eee3d5,#eee3d5);border-radius:11px;background:var(--n-fbf3e6,#fbf3e6);text-align:left}
.activity-demo .guide-gd-head{display:flex;align-items:center;gap:6px;min-width:0;margin:0!important;font-size:10px;line-height:1.5}
.activity-demo .guide-gd-chip{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;padding:0 7px 0 5px;border-radius:999px;background:var(--n-fff3d3,#fff3d3);color:var(--n-79562d,#79562d);font-weight:800}
.activity-demo .guide-screen .guide-gd-chip svg{width:10px;height:10px;stroke-width:2.8;vertical-align:0}
.activity-demo .guide-gd-ko{min-width:0;overflow:hidden;color:var(--n-6f685d,#6f685d);font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.activity-demo .guide-gd-sent{margin:1px 0 0!important;color:var(--n-2f3b63,#2f3b63);font-size:17px;line-height:1.5;white-space:nowrap}
.activity-demo .guide-gd-spot{position:relative;display:inline-block;padding:0 3px;border-radius:5px;background:var(--i-fbe1e0,#fbe1e0);color:var(--i-d4382c,#d4382c);font-weight:700;line-height:1.3;text-decoration:underline wavy var(--i-d4382c,#d4382c);text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-skip-ink:none;transition:background-color .2s,color .2s,box-shadow .2s}
.activity-demo .guide-gd-spot.is-lit{box-shadow:0 0 0 3px var(--i-ffe2a8,#ffe2a8)}
.activity-demo .guide-gd-spot.is-fixed{background:var(--i-dff1e7,#dff1e7);color:var(--i-2a8058,#2a8058);text-decoration:underline solid var(--i-2a8058,#2a8058)}
.activity-demo .guide-gd-badge{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:13px;height:13px;border-radius:50%;background:var(--i-d4382c,#d4382c);color:var(--n-ffffff,#fff);font-family:var(--font-en),'Noto Sans KR',sans-serif;font-size:8px;font-style:normal;font-weight:800;line-height:1;text-decoration:none;transition:background-color .2s}
.activity-demo .guide-gd-spot.is-fixed .guide-gd-badge{background:var(--i-2a8058,#2a8058)}
.activity-demo .guide-gd-hear{display:inline-grid;place-items:center;margin-left:5px;color:var(--n-79562d,#79562d);opacity:0;vertical-align:1px;transition:opacity .2s}
.activity-demo .guide-gd-hear.is-on{opacity:1}
.activity-demo .guide-gd-hear.is-on svg{animation:demo-beat .5s ease-in-out infinite alternate}
.activity-demo .guide-gd-hint{margin:3px 0 0!important;padding:2px 6px;border-radius:7px;color:var(--n-6f685d,#6f685d);font-size:10px;font-weight:700;line-height:1.5;text-align:left;transition:background-color .2s,color .2s}
.activity-demo .guide-gd-hint.is-bad{background:var(--i-fbe1e0,#fbe1e0);color:var(--i-9d3a2c,#9d3a2c)}
.activity-demo .guide-gd-hint.is-good{background:var(--i-dff1e7,#dff1e7);color:var(--i-2a6b49,#2a6b49)}
/* 2 × 2 like the screen's choices (.gd-choices). */
.activity-demo .guide-gd-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 5px;margin-top:4px}
.activity-demo .guide-gd-choices b{display:grid;place-items:center;height:20px;box-sizing:border-box;border:1.5px solid var(--n-d9cbb5,#d9cbb5);border-radius:8px;background:var(--n-ffffff,#fff);color:var(--n-2f3b63,#2f3b63);font-size:12px;font-weight:700;box-shadow:0 2px 0 var(--n-e7d9c3,#e7d9c3);transition:background-color .2s,border-color .2s,color .2s,opacity .2s,transform .15s}
.activity-demo .guide-gd-choices b.is-pressed{transform:translateY(2px);box-shadow:none}
.activity-demo .guide-gd-choices b.is-right{border-color:var(--i-2a8058,#2a8058);background:var(--i-dff1e7,#dff1e7);color:var(--i-2a8058,#2a8058)}
.activity-demo .guide-gd-choices b.is-wrong{border-color:var(--i-c2413a,#c2413a);background:var(--i-fbe1e0,#fbe1e0);color:var(--i-c2413a,#c2413a);text-decoration:line-through}
.activity-demo .guide-gd-choices b.is-off{opacity:.45}
.activity-demo .guide-gd-choices~:is(.guide-plus,.guide-minus){top:auto;bottom:4px}

/* 파닉스: the red groups light up twice each, then the whole word; the child reads along and taps 읽었어요. */
.activity-demo .guide-phonics{display:inline-block;margin:0!important;padding:0 8px;border-radius:12px;color:var(--n-2f3b63,#2f3b63);font-size:31px;font-weight:700;line-height:1.15;letter-spacing:1px;transition:background-color .2s,color .2s,transform .25s}
.activity-demo .guide-phonics .guide-red{display:inline-block;border-radius:6px;color:var(--i-d4382c,#d4382c);transition:background-color .15s,transform .2s}
.activity-demo .guide-phonics .guide-red.is-lit{background:var(--n-ffe2a8,#ffe2a8);transform:translateY(-3px) scale(1.12)}
.activity-demo .guide-phonics.is-lit{background:var(--n-ffe2a8,#ffe2a8);transform:scale(1.05)}
.activity-demo .guide-phonics.is-said{color:var(--i-3d7a3a,#3d7a3a);transform:scale(1.08)}
.activity-demo .guide-steps{display:flex;justify-content:center;gap:5px;margin:5px 0 0;padding:0;list-style:none}
.activity-demo .guide-steps+.guide-actions{margin-top:7px}
.activity-demo .guide-steps li{padding:1px 7px;border:1px solid var(--n-e3dccf,#e3dccf);border-radius:999px;background:var(--n-faf7f1,#faf7f1);color:var(--n-8a8172,#8a8172);font-size:10px;font-weight:750;line-height:1.5;transition:background-color .2s,border-color .2s,color .2s}
.activity-demo .guide-steps li.is-on{border-color:var(--n-e2a948,#e2a948);background:var(--n-ffe2a8,#ffe2a8);color:var(--n-8d5d31,#8d5d31)}
.activity-demo .guide-steps li.is-done{border-color:var(--i-9fd2ad,#9fd2ad);background:var(--i-e5f4e8,#e5f4e8);color:var(--i-2f7a45,#2f7a45)}
.activity-demo .guide-read{border:1px solid var(--n-5d8b50,#5d8b50);background:var(--n-6b9a5d,#6b9a5d);color:var(--n-ffffff,#fff)}
.activity-demo .guide-read.is-done{border-color:var(--i-2f6b3f,#2f6b3f);background:var(--i-2f7a45,#2f7a45)}

/* 스펠링 비: the speaker (or 천천히) plays the word; keys fill the letter boxes; 확인 marks the right letters green and
   the wrong one red (-2), which alone is typed again; the whole word turns green (+5). */
.activity-demo .guide-sb-say{transition:box-shadow .2s,transform .15s}
.activity-demo .guide-sb-say.is-on{box-shadow:0 0 0 3px var(--n-e9c98a,#e9c98a)}
.activity-demo .guide-sb-say.is-pressed{transform:scale(.9)}
/* The bee waits left of the balloons and flies to the one it pops (스펠링 비, 2026-11-11). */
.activity-demo .guide-sb-bee{position:absolute;left:22%;top:14px;width:13px;height:9px;border-radius:50%;background:repeating-linear-gradient(90deg,var(--n-e3b23c,#e3b23c) 0 3px,var(--n-4a3b2a,#4a3b2a) 3px 5px);box-shadow:-3px -5px 0 -2px var(--n-ffffff,#ffffff),2px -5px 0 -2px var(--n-ffffff,#ffffff);transition:left .35s ease-in-out,top .35s ease-in-out}
.activity-demo .guide-sb-bee.is-sting{left:calc(50% + 1px);top:10px}
.activity-demo .guide-hm-sky .guide-balloons i.is-away{transform:scale(1.5);transition:transform .2s ease-out .3s,opacity .2s ease-out .3s}

/* 메모리 카드: all six cards face up for the 15-second look (the eye pill counts down), then face down (a striped back
   with ?); a wrong pair shows red for a moment (-2) and turns back by itself; a right pair stays green (+5). */
.activity-demo .guide-look{display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 5px;border-radius:999px;background:var(--n-fff3d3,#fff3d3);color:var(--n-79562d,#79562d);transition:opacity .25s}
.activity-demo .guide-look.is-done{opacity:0}
.activity-demo .guide-look-n{min-width:2ch;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.activity-demo .guide-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.activity-demo .guide-cards b{position:relative;display:grid;place-items:center;height:46px;box-sizing:border-box;border:1.5px solid var(--n-c9a46e,#c9a46e);border-radius:9px;background:repeating-linear-gradient(45deg,var(--n-ead6b3,#ead6b3) 0 6px,var(--n-e0c89c,#e0c89c) 6px 12px);color:var(--n-403b35,#403b35);font-size:12px;font-weight:700;box-shadow:0 2px 0 var(--n-d9c4a0,#d9c4a0);transition:background .25s,border-color .2s,color .2s,transform .2s}
.activity-demo .guide-cards b[lang="en"]{font-size:14px}
.activity-demo .guide-cards b span{opacity:0;transition:opacity .2s}
.activity-demo .guide-cards b:after{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--n-fffaf0,#fffaf0);color:var(--n-8d5d31,#8d5d31);font-size:11px;font-weight:800;content:'?';transition:opacity .2s}
.activity-demo .guide-cards.is-look b,.activity-demo .guide-cards b.is-open{border-color:var(--n-e2d3b8,#e2d3b8);background:var(--n-ffffff,#fff)}
.activity-demo .guide-cards.is-look b span,.activity-demo .guide-cards b.is-open span{opacity:1}
.activity-demo .guide-cards.is-look b:after,.activity-demo .guide-cards b.is-open:after{opacity:0}
.activity-demo .guide-cards b.is-miss{border-color:var(--i-d4382c,#d4382c);background:var(--i-fbe1e0,#fbe1e0);color:var(--i-b0402f,#b0402f)}
.activity-demo .guide-cards b.is-match{border-color:var(--i-2a8058,#2a8058);background:var(--i-dff1e7,#dff1e7);color:var(--i-2a8058,#2a8058)}
.activity-demo .guide-cards b.is-pressed{transform:scale(.94)}

/* 크로스워드: a 4 × 4 board of three words, the clue line and a few letter keys; the picked word is yellow (is-word), a
   typed letter shows (is-in), a full right word turns green (is-good, +5), a wrong letter red (is-wrong, -2); the summary
   pill counts the words. */
.activity-demo .guide-cw-board{position:relative;display:grid;grid-template-columns:repeat(4,22px);grid-auto-rows:22px;gap:3px;justify-content:center;margin:0 0 7px}
.activity-demo .guide-cw-cell{position:relative;display:grid;place-items:center;box-sizing:border-box;border:1.5px solid var(--n-cdbda5,#cdbda5);border-radius:5px;background:var(--n-ffffff,#fff);color:var(--n-2f3b63,#2f3b63);font-size:12px;font-weight:700;line-height:1;transition:background-color .2s,border-color .2s}
.activity-demo .guide-cw-cell i{position:absolute;top:1px;left:2px;color:var(--n-6f685d,#6f685d);font-size:7px;font-style:normal;font-weight:800;line-height:1}
.activity-demo .guide-cw-l{padding-top:3px;opacity:0;transition:opacity .15s}
.activity-demo .guide-cw-cell.is-in .guide-cw-l{opacity:1}
.activity-demo .guide-cw-cell.is-word{border-color:var(--i-e2a948,#e2a948);background:var(--i-fff1c9,#fff1c9)}
.activity-demo .guide-cw-cell.is-good{border-color:var(--i-9fd2ad,#9fd2ad);background:var(--i-e5f4e8,#e5f4e8);color:var(--i-2f7a45,#2f7a45)}
.activity-demo .guide-cw-cell.is-wrong{border-color:var(--i-eba596,#eba596);background:var(--i-fde9e4,#fde9e4);color:var(--i-b0402f,#b0402f)}
.activity-demo .guide-cw-clue{display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:0 auto 7px!important;padding:2px 12px;border-radius:999px;background:var(--n-fff3d3,#fff3d3);color:var(--n-79562d,#79562d);font-size:12px;font-weight:800;line-height:1.5;transition:background-color .2s,box-shadow .2s}
.activity-demo .guide-cw-clue.is-lit{background:var(--n-ffe2a8,#ffe2a8);box-shadow:0 0 0 3px var(--n-ffe2a866,#ffe2a866)}
.activity-demo .guide-cw-tag{color:var(--n-8a7458,#8a7458);font-size:10px}
.activity-demo .guide-cw-sum{position:absolute;top:50%;left:50%;z-index:1;padding:3px 10px;border-radius:999px;background:var(--n-2f7a45,#2f7a45);color:var(--n-ffffff,#fff);font-size:11px;font-weight:800;line-height:1.5;white-space:nowrap;opacity:0;transform:translate(-50%,-35%);transition:opacity .25s,transform .25s;pointer-events:none}
.activity-demo .guide-cw-sum.is-on{opacity:1;transform:translate(-50%,-50%)}

/* O/X 스피드: one word and one meaning; O fits, X does not; the next card comes at once and the line under the card
   shows the last card's real pair (green after a right answer, red after a wrong one); the clock runs 60 s. */
.activity-demo .guide-ox-card{padding:6px 8px 7px;border:1.5px solid var(--n-eadcc6,#eadcc6);border-radius:12px;background:var(--n-f8f0e3,#f8f0e3);transition:box-shadow .2s}
.activity-demo .guide-ox-card.is-lit{box-shadow:0 0 0 3px var(--n-ffe2a8,#ffe2a8)}
.activity-demo .guide-ox-word{color:var(--n-3d3a35,#3d3a35);font-size:21px;font-weight:700;line-height:1.2}
.activity-demo .guide-ox-meaning{display:inline-block;margin:3px 0 0!important;padding:0 10px;border:1px solid var(--n-e6d9c6,#e6d9c6);border-radius:999px;background:var(--n-ffffff,#fff);color:var(--n-5a4630,#5a4630);font-size:12px;font-weight:750;line-height:1.5}
.activity-demo .guide-ox-last{min-height:20px;margin:5px 0 0!important;padding:1px 8px;border-radius:8px;font-size:11px;font-weight:750;line-height:18px;opacity:0;transition:opacity .2s,background-color .2s,color .2s}
.activity-demo .guide-ox-last.is-on{opacity:1}
.activity-demo .guide-ox-last.is-good{background:var(--i-dff1e7,#dff1e7);color:var(--i-2a6b49,#2a6b49)}
.activity-demo .guide-ox-last.is-bad{background:var(--i-fbe1e0,#fbe1e0);color:var(--i-9d3a2c,#9d3a2c)}
.activity-demo .guide-ox{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.activity-demo .guide-ox b{display:grid;place-items:center;height:32px;border-radius:11px;color:var(--n-ffffff,#fff);font-size:19px;font-weight:900;transition:transform .15s,box-shadow .15s}
.activity-demo .guide-o{background:var(--i-2a8058,#2a8058);box-shadow:0 3px 0 var(--i-1f6044,#1f6044)}
.activity-demo .guide-x{background:var(--i-c2413a,#c2413a);box-shadow:0 3px 0 var(--i-973128,#973128)}
.activity-demo .guide-ox b.is-pressed{transform:translateY(3px);box-shadow:none}
.activity-demo .guide-ox~.guide-plus,.activity-demo .guide-ox~.guide-minus{top:auto;bottom:6px}

/* 섀도잉: the sentence's words light up as it plays (no recording yet), a quick 3·2·1 pops over the bar, then the knob
   moves along the bar while the child speaks; 따라 했어요 moves on. */
.activity-demo .guide-sh-track{position:relative;display:flex;align-items:center;gap:7px;margin:10px 2px 0}
.activity-demo .guide-sh-mic{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--n-d9cfbf,#d9cfbf);color:var(--n-ffffff,#fff);transition:background-color .2s}
.activity-demo .guide-sh-mic.is-on{background:var(--n-2a8058,#2a8058)}
.activity-demo .guide-screen .guide-sh-mic svg{width:13px;height:13px}
.activity-demo .guide-bar{position:relative;flex:1;height:8px;border-radius:999px;background:var(--n-efe6d8,#efe6d8)}
.activity-demo .guide-bar:before{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:inherit;background:var(--n-9fd2ad,#9fd2ad);content:''}
.activity-demo .guide-knob{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--i-2a8058,#2a8058);box-shadow:0 0 0 3px var(--i-ffffff,#fff)}
.activity-demo .guide-sh-track.is-speak .guide-bar:before{width:100%;transition:width 1.5s linear}
.activity-demo .guide-sh-track.is-speak .guide-knob{left:100%;transition:left 1.5s linear}
.activity-demo .guide-count{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:34px;height:34px;margin:-17px 0 0 -6px;border-radius:50%;background:var(--i-2a8058,#2a8058);color:var(--i-ffffff,#fff);font-family:var(--font-en),'Noto Sans KR',sans-serif;font-size:20px;font-weight:700;line-height:1;box-shadow:0 0 0 3px var(--i-fffaf0,#fffaf0);opacity:0;transform:scale(.6);transition:opacity .15s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.activity-demo .guide-count.is-on{opacity:1;transform:none}
.activity-demo .guide-count.is-on.is-pop{transform:scale(1.08)}
.activity-demo .guide-sh-actions{display:grid;grid-template-columns:1fr .8fr 1.15fr;gap:5px;margin-top:10px}
.activity-demo .guide-sh-actions b{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:25px;box-sizing:border-box;border:1px solid var(--n-e0d4c1,#e0d4c1);border-radius:8px;background:var(--n-ffffff,#fff);color:var(--n-6a5a43,#6a5a43);font-size:10px;font-weight:800;white-space:nowrap;transition:transform .15s,background-color .2s,border-color .2s}
.activity-demo .guide-sh-actions .guide-sh-again.is-on{border-color:var(--n-e2b04f,#e2b04f);background:var(--n-fff1d9,#fff1d9);color:var(--n-8d5d31,#8d5d31)}
.activity-demo .guide-sh-actions .guide-sh-pass{border-color:var(--i-2a8058,#2a8058);background:var(--i-2a8058,#2a8058);color:var(--i-ffffff,#fff)}
.activity-demo .guide-sh-actions .guide-sh-pass.is-done{border-color:var(--i-1f6044,#1f6044);background:var(--i-1f6044,#1f6044)}
.activity-demo .guide-sh-actions b.is-pressed{transform:scale(.94)}

/* 소리 바구니 (owner, 2026-10-29): the baskets show their letters and each basket's speaker plays its first sound; the
   word card is hidden (a speaker: tap to hear) and goes into the basket of its first sound (+5, the word shows as it
   flies in); 힌트 shows the hidden word (-2 on every press). Both card faces share one box, so the card never resizes. */
.activity-demo .guide-sort-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 15px}
.activity-demo .guide-sort-card{position:relative;display:grid;place-items:center;min-width:112px;box-sizing:border-box;padding:3px 12px 4px;border:1.5px solid var(--n-e2d3b8,#e2d3b8);border-radius:11px;background:var(--n-f6f3ee,#f6f3ee);box-shadow:0 2px 0 var(--n-e2d6c4,#e2d6c4);transition:transform .45s cubic-bezier(.4,.1,.3,1),opacity .35s,box-shadow .2s}
.activity-demo .guide-sort-card>span{grid-area:1/1}
.activity-demo .guide-sort-back{display:flex;align-items:center;gap:5px}
.activity-demo .guide-sort-disc{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--n-7a5230,#7a5230);color:var(--n-ffffff,#fff);box-shadow:0 0 0 3px var(--n-f3e3c4,#f3e3c4);transition:background-color .2s}
.activity-demo .guide-screen .guide-sort-disc svg{width:13px;height:13px}
.activity-demo .guide-sort-note{color:var(--n-8a7f70,#8a7f70);font-size:9px;font-weight:800;white-space:nowrap}
.activity-demo .guide-sort-face{display:grid;justify-items:center;padding-left:16px;visibility:hidden}
.activity-demo .guide-sort-card.is-shown .guide-sort-face{visibility:visible}
.activity-demo .guide-sort-card.is-shown .guide-sort-back{visibility:hidden}
.activity-demo .guide-sort-say{position:absolute;top:50%;left:6px;display:grid;place-items:center;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--n-7a5230,#7a5230);color:var(--n-ffffff,#fff)}
.activity-demo .guide-screen .guide-sort-say svg{width:11px;height:11px}
.activity-demo .guide-sort-word{color:var(--n-3d3a35,#3d3a35);font-size:19px;font-weight:700;line-height:1.2}
.activity-demo .guide-sort-ko{color:var(--n-6f685d,#6f685d);font-size:10px;font-weight:700;line-height:1.4}
.activity-demo .guide-sort-card.is-on{box-shadow:0 0 0 3px var(--n-ffe2a8,#ffe2a8)}
.activity-demo .guide-sort-card.is-on .guide-sort-disc{background:var(--n-2a8058,#2a8058)}
.activity-demo .guide-sort-card.is-pressed{transform:scale(.95)}
.activity-demo .guide-sort-card.is-in{opacity:0;transform:translate(-26px,62px) scale(.35)}
.activity-demo .guide-sort-card.is-in2{opacity:0;transform:translate(87px,62px) scale(.35)}
.activity-demo .guide-sort-card.is-next{transition:opacity .3s}
.activity-demo .guide-ss-hint{display:inline-flex;align-items:center;gap:2px;height:26px;box-sizing:border-box;padding:0 8px;border:1px solid var(--n-e2c27f,#e2c27f);border-radius:9px;background:var(--n-fff3d3,#fff3d3);color:var(--n-79562d,#79562d);font-size:10px;font-weight:800;transition:opacity .2s,transform .15s}
.activity-demo .guide-ss-hint.is-used{opacity:.5}
.activity-demo .guide-ss-hint.is-pressed{transform:scale(.93)}
.activity-demo .guide-baskets{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 10px}
.activity-demo .guide-basket{position:relative;display:grid;justify-items:center;align-content:start;height:54px;box-sizing:border-box;padding-top:14px;border:2px solid var(--n-b8893f,#b8893f);border-top-width:4px;border-radius:4px 4px 14px 14px;background:repeating-linear-gradient(90deg,var(--n-fdf1d6,#fdf1d6) 0 9px,var(--n-ecd7ad,#ecd7ad) 9px 10px);transition:box-shadow .2s,transform .15s}
.activity-demo .guide-basket.is-got{box-shadow:0 0 0 3px var(--i-9fd2ad,#9fd2ad)}
.activity-demo .guide-basket.is-pressed{transform:scale(.96)}
.activity-demo .guide-basket>b{position:absolute;top:-14px;left:50%;display:grid;place-items:center;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--n-7a5230,#7a5230);color:var(--n-ffffff,#fff);box-shadow:0 0 0 2px var(--n-fffefb,#fffefb);transition:box-shadow .2s,transform .15s}
.activity-demo .guide-screen .guide-basket>b svg{width:12px;height:12px}
.activity-demo .guide-basket>b.is-on{box-shadow:0 0 0 2px var(--n-fffefb,#fffefb),0 0 0 5px var(--n-e9c98a,#e9c98a)}
.activity-demo .guide-basket>b.is-pressed{transform:scale(.88)}
.activity-demo .guide-basket-plate{display:grid;place-items:center;width:28px;height:22px;box-sizing:border-box;border:1.5px solid var(--n-c99a4a,#c99a4a);border-radius:6px;background:var(--n-ffffff,#fff);font-size:13px;font-weight:800}
.activity-demo .guide-basket-letter{color:var(--i-d4382c,#d4382c)}

/* Any other kind: its own scene, or the registry icon card, under cycling guide captions. */
.activity-demo .guide-generic{display:grid;justify-items:center;gap:8px;padding:4px 2px}
.activity-demo .guide-generic-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--n-fff1d9,#fff1d9);color:var(--n-8d5d31,#8d5d31)}
.activity-demo .guide-screen .guide-generic-icon svg{width:30px;height:30px;stroke-width:1.6}
.activity-demo .guide-generic p{display:-webkit-box;overflow:hidden;font-size:12px;line-height:1.6;color:var(--n-6a5f50,#6a5f50);word-break:keep-all;-webkit-box-orient:vertical;-webkit-line-clamp:3}

/* The fingertip (a screen-recording touch dot) glides to a control and presses it. */
.activity-demo-finger{position:absolute;top:0;left:0;z-index:3;width:0;height:0;opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.3,.7,.4,1),opacity .2s;will-change:transform}
.activity-demo-finger.is-on{opacity:1}
.activity-demo-finger.is-jump{transition:none}
.activity-demo-finger:before,.activity-demo-finger:after{position:absolute;top:-15px;left:-15px;box-sizing:border-box;width:30px;height:30px;border-radius:50%;content:''}
.activity-demo-finger:before{border:2px solid var(--n-fffffff2,#fffffff2);background:var(--n-4b382638,#4b382638);box-shadow:0 2px 8px #3b2a1647,inset 0 0 0 1px var(--n-4b38261f,#4b38261f)}
.activity-demo-finger:after{border:2px solid var(--n-ffffff,#fff);opacity:0}
.activity-demo-finger.is-press:before{animation:demo-press .34s ease-out}
.activity-demo-finger.is-press:after{animation:demo-ripple .5s ease-out}

/* Video-style progress line along the stage's bottom edge. */
.activity-demo-progress{position:absolute;right:14px;bottom:7px;left:14px;height:3px;border-radius:3px;background:var(--n-8d5d311f,#8d5d311f);overflow:hidden}
.activity-demo-progress span{display:block;height:100%;border-radius:inherit;background:var(--n-c79b5f,#c79b5f);transform:scaleX(0);transform-origin:left}
.activity-demo.is-playing .activity-demo-progress span{animation:demo-progress var(--demo-loop,7s) linear both}

/* Caption row: the current step, and a tiny pause button with a 44px touch area. A new step's words rise 3px into place
   without any fade, so the caption never blinks (owner, 2026-10-30: "엑티비티 미리보기 탭 켤때 깜빡깜빡 하는 효과 없애줘"). */
.activity-demo-caption{position:relative;display:flex;align-items:center;justify-content:center;min-height:26px;margin:0;padding:0 34px}
.activity-demo-now{font-size:13.5px;font-weight:800;line-height:1.4;letter-spacing:-.3px;color:var(--n-5d4a2f,#5d4a2f);word-break:keep-all;overflow-wrap:anywhere}
.activity-demo-now.is-new{animation:demo-caption .3s ease-out}
.activity-demo.is-generic .activity-demo-now{display:-webkit-box;min-height:2.8em;overflow:hidden;font-size:12.5px;font-weight:700;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.activity-demo-toggle{position:absolute;top:50%;right:2px;display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0;padding:0;border:1px solid var(--n-e2d3bb,#e2d3bb);border-radius:50%;background:var(--n-fffaf0,#fffaf0);color:var(--n-8d5d31,#8d5d31)}
.activity-demo-toggle:before{position:absolute;inset:-10px;content:''}
.activity-demo-toggle:after{width:8px;height:9px;background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 5px,currentColor 5px);content:''}
.activity-demo.is-paused .activity-demo-toggle:after{width:8px;height:10px;margin-left:2px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.activity-demo:not(.is-running) .activity-demo-toggle{visibility:hidden}
.activity-demo-script{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@keyframes demo-progress{to{transform:scaleX(1)}}
@keyframes demo-caption{from{transform:translateY(3px)}}
@keyframes demo-press{45%{transform:scale(.78)}}
@keyframes demo-ripple{from{opacity:.9;transform:scale(.8)}to{opacity:0;transform:scale(1.9)}}
@keyframes demo-beat{to{transform:scale(1.25)}}
@keyframes demo-rec{50%{box-shadow:0 0 0 7px var(--i-d9483b33,#d9483b33)}}
.activity-demo.is-paused .activity-demo-stage *,.activity-demo.is-paused .activity-demo-stage :before,.activity-demo.is-paused .activity-demo-stage :after,.activity-demo.is-paused .activity-demo-now,.activity-demo.is-held .activity-demo-stage *,.activity-demo.is-held .activity-demo-stage :before,.activity-demo.is-held .activity-demo-stage :after,.activity-demo.is-held .activity-demo-now{animation-play-state:paused!important}
/* 그림 스무고개 (스피킹 게임 'guess-who'): eight monsters of the trial set in one strip, the covered 내 그림, and the
   game's panel in small (review 2026-10-30: the student screen's layout): a title row (its line, and 지울 그림 n개 in
   the cross step), three question rows each with 힌트 at its right end (the first tap slides the English word in
   under the Korean), one full-width foot button (이걸로 할래요 · 대답 완료 · 대답 듣기); pictures that are not it go
   down grey with a soft ✕. Rows are 18px with the Korean set 1px low so a row showing its word keeps both inside its
   border (the 2px came from the gaps above; the screen keeps its height in the 200px stage). */
.activity-demo .guide-gw-top{margin-bottom:4px}
.activity-demo .guide-gw-mine{padding:2px 8px;border:1px dashed var(--n-c9b28d,#c9b28d);border-radius:999px;background:var(--n-fbf3e6,#fbf3e6);color:var(--n-8a7a64,#8a7a64);transition:background-color .2s,border-color .2s,color .2s}
.activity-demo .guide-gw-mine.is-set{border-style:solid;border-color:var(--n-c79b5f,#c79b5f);background:var(--n-fff1d9,#fff1d9);color:var(--n-8d5d31,#8d5d31)}
.activity-demo .guide-gw-board{display:grid;grid-template-columns:repeat(8,minmax(0,26px));justify-content:center;gap:3px;margin:0 0 3px}
.activity-demo .guide-gw-t{position:relative;display:block;height:24px;border:1px solid var(--p-e3d6c2,#e3d6c2);border-radius:7px;background:var(--p-ecdfcc,#ecdfcc);perspective:120px;transition:transform .15s,border-color .2s,box-shadow .2s}
/* A monster is a card in its box: crossed out (is-down) it turns over quickly (a whip with a small settle) and stays
   closed on a plain back like the game's tiles (owner 2026-10-30: "휙 180도 돌아서 칸이 닫히는 방식"); only the card turns. */
.activity-demo .guide-gw-card{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .44s cubic-bezier(.35,.6,.45,1.25)}
.activity-demo .guide-gw-front,.activity-demo .guide-gw-back{position:absolute;inset:0;display:grid;place-items:center;border-radius:6px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.activity-demo .guide-gw-front{background:var(--n-fbf7f0,#fbf7f0)}
.activity-demo .guide-gw-back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,var(--p-d9b98a,#d9b98a) 0 3px,var(--p-e8cfa8,#e8cfa8) 3px 6px);box-shadow:inset 0 0 0 2px var(--p-fff8ec,#fff8ec)}
.activity-demo .guide-screen .guide-gw-t svg{width:21px;height:21px;fill:none;stroke:var(--p-3b3127,#3b3127);stroke-width:1;vertical-align:0}
.activity-demo .guide-gw-body.is-blue{fill:#8fbfe8}
.activity-demo .guide-gw-body.is-red{fill:#ef9a8c}
.activity-demo .guide-gw-body.is-yellow{fill:#f5d36b}
.activity-demo .guide-gw-horn{fill:var(--n-f3ead9,#f3ead9)}
.activity-demo .guide-gw-wing{fill:var(--n-d9e9f2,#d9e9f2)}
.activity-demo .guide-gw-eye{fill:var(--n-ffffff,#fff);stroke-width:.8}
.activity-demo .guide-gw-pupil{fill:var(--n-3b3127,#3b3127);stroke:none}
.activity-demo .guide-gw-spot{fill:var(--n-ffffffb3,#ffffffb3);stroke:none}
.activity-demo .guide-gw-star{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;width:12px;height:12px;border-radius:50%;background:var(--i-e2a948,#e2a948);color:var(--i-ffffff,#fff);font-size:8px;font-style:normal;line-height:1;opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s}
.activity-demo .guide-gw-t.is-mine{border-color:var(--p-e2a948,#e2a948);box-shadow:0 0 0 2px var(--p-ffe2a8,#ffe2a8)}
.activity-demo .guide-gw-t.is-mine .guide-gw-star{opacity:1;transform:none}
.activity-demo .guide-gw-t.is-pressed{transform:scale(.92)}
.activity-demo .guide-gw-t.is-down{border-color:var(--n-d2ad78,#d2ad78)}
.activity-demo .guide-gw-t.is-down .guide-gw-card{transform:rotateY(180deg)}
.activity-demo .guide-gw-panel{display:grid;grid-template-rows:13px auto 18px;gap:3px;padding:3px 6px;border:1px solid var(--n-e6d9c6,#e6d9c6);border-radius:10px;background:var(--n-fffefb,#fffefb);text-align:left}
.activity-demo .guide-gw-title{position:relative;display:flex;align-items:center;justify-content:flex-end;min-width:0}
.activity-demo .guide-gw-line{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;color:var(--n-3d3a35,#3d3a35);font-size:9.5px;font-weight:750;line-height:1;white-space:nowrap;opacity:0;transition:opacity .2s}
.activity-demo .guide-gw-panel:not(.is-ask):not(.is-answer) .guide-gw-l1,.activity-demo .guide-gw-panel.is-ask .guide-gw-l2,.activity-demo .guide-gw-panel.is-answer .guide-gw-l3{opacity:1}
.activity-demo .guide-gw-count{padding:1px 6px;border-radius:999px;background:var(--n-fbeee2,#fbeee2);color:var(--n-8d533c,#8d533c);font-size:8.5px;font-weight:750;line-height:1.4;opacity:0;transition:opacity .2s}
.activity-demo .guide-gw-panel.is-answer:not(.is-done) .guide-gw-count{opacity:1}
.activity-demo .guide-gw-rows{display:grid;grid-auto-rows:18px;gap:1px;opacity:0;transition:opacity .2s}
.activity-demo .guide-gw-panel:is(.is-ask,.is-answer) .guide-gw-rows{opacity:1}
.activity-demo .guide-gw-r{display:flex;gap:3px;min-width:0;transition:transform .15s}
.activity-demo .guide-gw-q{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:1px 6px 0;border-radius:6px;background:var(--n-ffffff,#fff);box-shadow:inset 0 0 0 1px var(--n-e3cdb6,#e3cdb6);transition:background-color .2s,box-shadow .2s,opacity .2s}
.activity-demo .guide-gw-ko{color:var(--n-3d3a35,#3d3a35);font-size:8.5px;font-weight:750;line-height:1.05;white-space:nowrap}
.activity-demo .guide-gw-word{display:block;max-height:0;overflow:hidden;color:var(--n-a4532f,#a4532f);font-size:7px;font-style:normal;font-weight:750;line-height:1;opacity:0;transition:max-height .25s,opacity .25s}
.activity-demo .guide-gw-r.is-hinted .guide-gw-word{max-height:8px;opacity:1}
.activity-demo .guide-gw-r.is-on .guide-gw-q{background:var(--n-fff3e8,#fff3e8);box-shadow:inset 0 0 0 1px var(--n-c9643f,#c9643f),inset 3px 0 0 var(--n-c9643f,#c9643f)}
.activity-demo .guide-gw-panel.is-answer .guide-gw-r:not(.is-on) .guide-gw-q{opacity:.5}
.activity-demo .guide-gw-hint{display:grid;place-items:center;flex:0 0 28px;border-radius:6px;background:var(--n-fff8ec,#fff8ec);box-shadow:inset 0 0 0 1px var(--n-e3cdb6,#e3cdb6);color:var(--n-8d533c,#8d533c);font-size:8px;font-weight:750;line-height:1;transition:transform .15s,opacity .2s}
.activity-demo .guide-gw-panel.is-answer .guide-gw-hint{opacity:.4}
.activity-demo .guide-gw-foot{position:relative}
.activity-demo .guide-gw-foot b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:7px;background:var(--n-a84a2a,#a84a2a);color:var(--n-ffffff,#fff);font-size:9.5px;font-weight:750;line-height:1;opacity:0;transition:opacity .2s,transform .15s,background-color .2s}
.activity-demo .guide-gw-panel:not(.is-ask):not(.is-answer) .guide-gw-ok,.activity-demo .guide-gw-panel.is-ask .guide-gw-done,.activity-demo .guide-gw-panel.is-answer .guide-gw-hear{opacity:1}
.activity-demo .guide-gw-done.is-on{background:var(--i-86391f,#86391f)}
.activity-demo .guide-gw-speaker{width:10px;height:10px;fill:currentColor}
.activity-demo .guide-gw-panel b.is-pressed,.activity-demo .guide-gw-r.is-pressed{transform:scale(.94)}
/* 단어 설명 (스피킹 게임 'word-explain'): the secret card, the ring, the dashed 힌트 보기 that opens to one soft hint band
   (a tapped chunk turns English in place with the game's marker), the starters and 패스 · 맞혔어요. */
.activity-demo .guide-we-dots{display:inline-flex;gap:3px;margin-left:auto}
.activity-demo .guide-we-dots i{width:7px;height:7px;border:1.5px solid var(--n-e3cdb6,#e3cdb6);border-radius:50%;background:var(--n-ffffff,#fff);transition:background-color .2s,border-color .2s}
.activity-demo .guide-we-dots .guide-we-d1{border-color:var(--n-a94c31,#a94c31)}
.activity-demo .guide-we-dots i.is-hit{border-color:var(--i-2a8058,#2a8058);background:var(--i-2a8058,#2a8058)}
.activity-demo .guide-we-ring{display:grid;place-items:center;width:24px;height:24px;margin-left:6px;border:3px solid var(--n-b08a39,#b08a39);border-radius:50%;background:var(--n-fffdf8,#fffdf8)}
.activity-demo .guide-we-sec{font-size:9px;font-weight:800;line-height:1}
.activity-demo .guide-we-card{display:grid;justify-items:center;gap:1px;margin:0 0 5px;padding:4px 6px;border:1px solid var(--n-ece2d3,#ece2d3);border-radius:12px;background:var(--n-fffdf8,#fffdf8);transition:box-shadow .2s}
.activity-demo .guide-we-card.is-on{box-shadow:0 0 0 2px var(--n-fff3d3,#fff3d3)}
.activity-demo .guide-we-cue{padding:0 7px;border-radius:999px;background:var(--n-fff3d3,#fff3d3);color:var(--n-79562d,#79562d);font-size:8.5px;font-weight:750;line-height:1.6;transition:background-color .2s,color .2s}
.activity-demo .guide-we-cue.is-guessed{background:var(--i-dff1e7,#dff1e7);color:var(--i-1f6b47,#1f6b47)}
.activity-demo .guide-we-word{color:var(--n-3d3a35,#3d3a35);font-size:17px;font-weight:800;line-height:1.15}
.activity-demo .guide-we-mean{color:var(--n-7a7268,#7a7268);font-size:9.5px;font-weight:700}
.activity-demo .guide-we-zone{position:relative;height:28px;margin:0 0 4px}
.activity-demo .guide-we-open,.activity-demo .guide-we-band{position:absolute;inset:0;display:flex;align-items:center;margin:0;transition:opacity .2s}
.activity-demo .guide-we-open{justify-content:center;gap:4px;border:1.5px dashed var(--n-e6cdb0,#e6cdb0);border-radius:10px;color:var(--n-79562d,#79562d);font-size:10px;font-weight:800}
.activity-demo .guide-screen .guide-we-open svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;vertical-align:0}
.activity-demo .guide-we-band{gap:6px;padding:0 8px;border-radius:10px;background:var(--n-f8efe3,#f8efe3);opacity:0}
.activity-demo .guide-we-zone.is-open .guide-we-open{opacity:0}
.activity-demo .guide-we-zone.is-open .guide-we-band{opacity:1}
.activity-demo .guide-we-n{color:var(--n-866720,#866720);font-size:9px;font-weight:800}
.activity-demo .guide-we-say{color:var(--n-403b35,#403b35);font-size:10px;font-weight:700;white-space:nowrap}
.activity-demo .guide-we-k,.activity-demo .guide-we-ck .guide-we-ko{text-decoration:underline dotted var(--n-cbb391,#cbb391);text-underline-offset:3px}
.activity-demo .guide-we-sl{margin:0 3px;color:var(--n-c9b498,#c9b498);font-style:normal;font-weight:400}
.activity-demo .guide-we-ck{font-weight:700}
.activity-demo .guide-we-ck .guide-we-en{display:none;padding:0 1px;background:linear-gradient(transparent 50%,var(--n-f6dd9f,#f6dd9f) 50%,var(--n-f6dd9f,#f6dd9f) 92%,transparent 92%);color:var(--n-97401f,#97401f)}
.activity-demo .guide-we-ck.is-en .guide-we-ko{display:none}
.activity-demo .guide-we-ck.is-en .guide-we-en{display:inline}
.activity-demo .guide-we-starters{margin:0 0 4px;color:var(--n-5d554c,#5d554c);font-size:8.5px;font-weight:750;text-align:center;transition:color .2s}
.activity-demo .guide-we-starters.is-lit{color:var(--n-97401f,#97401f)}
.activity-demo .guide-we-actions{display:grid;grid-template-columns:38fr 62fr;gap:5px}
.activity-demo .guide-we-actions b{display:grid;place-items:center;min-height:20px;border-radius:7px;font-size:10px;font-weight:800;transition:transform .15s}
.activity-demo .guide-we-actions b.is-pressed{transform:scale(.92)}
.activity-demo .guide-we-pass{border:1px solid var(--n-ece2d3,#ece2d3);background:var(--n-fbf4e9,#fbf4e9);color:var(--n-403b35,#403b35)}
.activity-demo .guide-we-hit{background:var(--n-2a8058,#2a8058);color:var(--n-ffffff,#fff)}
/* 그림 설명 (스피킹 게임 'picture-talk'): the picture (an inline drawing, never the JPEG) beside the pad, the numbered
   guide bands (a chunk turns English in place and back), the ink drawing itself while the picture is covered, then
   both side by side. */
.activity-demo .guide-pt-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 4px}
.activity-demo .guide-pt-box{display:grid;justify-items:center;gap:2px}
.activity-demo .guide-pt-pic,.activity-demo .guide-pt-pad{position:relative;display:block;width:58px;height:58px;box-sizing:border-box;border:1.5px solid var(--n-e2d3b8,#e2d3b8);border-radius:10px;background:var(--n-ffffff,#fff);overflow:hidden;transition:box-shadow .2s}
.activity-demo .guide-screen .guide-pt-art{display:block;width:100%;height:100%;vertical-align:0}
.activity-demo .guide-pt-leg{stroke:#8d5d31;stroke-width:2.4}
.activity-demo .guide-pt-sofa{fill:#3f86c4;stroke:#3b69b1;stroke-width:.8}
.activity-demo .guide-pt-car{fill:#e04a3a;stroke:#a33a2c;stroke-width:.8}
.activity-demo .guide-pt-glass{fill:#d9e9f2;stroke:none}
.activity-demo .guide-pt-wheel{fill:#3d3a35}
.activity-demo .guide-pt-ink{stroke:var(--n-2f3b63,#2f3b63);stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s ease-in-out}
.activity-demo .guide-pt-ink.is-drawn{stroke-dashoffset:0}
.activity-demo .guide-pt-cover{position:absolute;inset:0;display:grid;place-items:center;background:var(--n-f3e9dd,#f3e9dd);color:var(--n-8d533c,#8d533c);font-size:22px;font-style:normal;font-weight:800;opacity:0;transition:opacity .25s}
.activity-demo .guide-pt-pic.is-on,.activity-demo .guide-pt-pair.is-draw .guide-pt-pad{box-shadow:0 0 0 3px var(--n-ffe2a8,#ffe2a8)}
.activity-demo .guide-pt-pair.is-draw .guide-pt-cover{opacity:1}
.activity-demo .guide-pt-pair.is-compare .guide-pt-pic,.activity-demo .guide-pt-pair.is-compare .guide-pt-pad{box-shadow:0 0 0 3px var(--n-dff1e7,#dff1e7)}
.activity-demo .guide-pt-cap{color:var(--n-6a5a43,#6a5a43);font-size:8px;font-style:normal;font-weight:750;line-height:1.15}
.activity-demo .guide-pt-bands{display:grid;gap:2px;transition:opacity .2s}
.activity-demo .guide-pt-pair.is-draw+.guide-pt-bands{opacity:.3}
.activity-demo .guide-pt-band{display:flex;align-items:center;gap:5px;min-height:16px;margin:0;padding:0 7px;border-radius:8px;background:var(--n-f8efe3,#f8efe3);text-align:left;transition:box-shadow .2s}
.activity-demo .guide-pt-bands.is-on .guide-pt-band{box-shadow:inset 0 0 0 1px var(--n-e9c98a,#e9c98a)}
.activity-demo .guide-pt-n{color:var(--n-866720,#866720);font-size:8.5px;font-weight:800}
.activity-demo .guide-pt-say{color:var(--n-403b35,#403b35);font-size:9px;font-weight:700;line-height:1.3;white-space:nowrap}
.activity-demo .guide-pt-k,.activity-demo .guide-pt-ck .guide-pt-ko{text-decoration:underline dotted var(--n-cbb391,#cbb391);text-underline-offset:3px}
.activity-demo .guide-pt-sl{margin:0 3px;color:var(--n-c9b498,#c9b498);font-style:normal;font-weight:400}
.activity-demo .guide-pt-ck{font-weight:700;transition:transform .15s}
.activity-demo .guide-pt-ck .guide-pt-en{display:none;padding:0 1px;background:linear-gradient(transparent 50%,var(--n-f6dd9f,#f6dd9f) 50%,var(--n-f6dd9f,#f6dd9f) 92%,transparent 92%);color:var(--n-97401f,#97401f)}
.activity-demo .guide-pt-ck.is-en .guide-pt-ko{display:none}
.activity-demo .guide-pt-ck.is-en .guide-pt-en{display:inline}
.activity-demo .guide-pt-foot{position:relative;width:66px;height:18px}
.activity-demo .guide-pt-foot b{position:absolute;inset:0;display:grid;place-items:center;border-radius:6px;font-size:9px;font-weight:800;line-height:1;transition:opacity .2s,transform .15s}
.activity-demo .guide-pt-done{background:var(--i-2a8058,#2a8058);color:var(--i-ffffff,#fff);opacity:0}
.activity-demo .guide-pt-check{background:var(--i-fff3d3,#fff3d3);color:var(--i-79562d,#79562d);opacity:0}
/* 2026-11-05: a describer's 말했어요 first, then the drawer's 다 그렸어요, then 맞춰 봐요!; a line said is dimmed with a green number. */
.activity-demo .guide-pt-said{background:var(--n-b0402f,#b0402f);color:var(--n-ffffff,#fff)}
.activity-demo .guide-pt-foot:is(.is-draw,.is-compare) .guide-pt-said{opacity:0}
.activity-demo .guide-pt-foot.is-draw .guide-pt-done{opacity:1}
.activity-demo .guide-pt-foot.is-compare .guide-pt-check{opacity:1}
.activity-demo .guide-pt-band.is-said{opacity:.6}
.activity-demo .guide-pt-band.is-said .guide-pt-n{color:var(--i-2a8058,#2a8058)}
.activity-demo .guide-pt-foot b.is-pressed,.activity-demo .guide-pt-ck.is-pressed{transform:scale(.94)}
/* 토론 (스피킹 게임 'debate'): the topic and my side's chip, the computer's heard card (it keeps its room), my card in one
   fixed box (생각, then 이유 under it; later the 반박 card in the 생각 row) with 고르기, and 말했어요. */
.activity-demo .guide-db-side{margin-left:auto;padding:1px 8px;border-radius:999px;background:var(--n-e6f2f6,#e6f2f6);color:var(--n-3b69b1,#3b69b1);font-size:9px;font-weight:800;line-height:1.5;transition:box-shadow .2s}
.activity-demo .guide-db-side.is-on{box-shadow:0 0 0 2px var(--n-3b69b1,#3b69b1)}
.activity-demo .guide-db-slot{position:relative;height:32px;margin:0 0 4px}
.activity-demo .guide-screen .guide-db-topic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 6px;border-radius:8px;color:var(--n-3d3a35,#3d3a35);font-size:10.5px;font-weight:800;line-height:1.35;transition:background-color .2s,opacity .25s}
.activity-demo .guide-db-topic.is-on{background:var(--n-fff3d3,#fff3d3)}
.activity-demo .guide-db-heard{position:absolute;inset:0;display:grid;align-content:center;gap:1px;box-sizing:border-box;margin:0;padding:2px 7px;border:1px solid var(--n-e6d9c6,#e6d9c6);border-left:3px solid var(--n-c2622d,#c2622d);border-radius:9px;background:var(--n-fffdf8,#fffdf8);text-align:left;opacity:0;transition:opacity .25s}
.activity-demo .guide-db-slot.is-heard .guide-db-heard{opacity:1}
.activity-demo .guide-db-slot.is-heard .guide-db-topic{opacity:0}
.activity-demo .guide-db-who{color:var(--n-a84a2a,#a84a2a);font-size:8px;font-weight:800;line-height:1.2}
.activity-demo .guide-db-said{color:var(--n-403b35,#403b35);font-size:9px;font-weight:700;white-space:nowrap}
.activity-demo .guide-db-card{position:relative;display:grid;grid-template-rows:12px 17px 17px;gap:2px;box-sizing:border-box;margin:0 0 4px;padding:3px 5px;border:1px solid var(--n-e6d9c6,#e6d9c6);border-radius:10px;background:var(--n-fffefb,#fffefb);text-align:left;transition:box-shadow .2s}
.activity-demo .guide-db-card.is-choose{box-shadow:0 0 0 2px var(--n-ffe2a8,#ffe2a8)}
.activity-demo .guide-db-head{position:relative}
.activity-demo .guide-db-h1,.activity-demo .guide-db-h2{position:absolute;left:1px;top:0;color:var(--n-8d533c,#8d533c);font-size:8.5px;font-weight:800;line-height:12px;transition:opacity .2s}
.activity-demo .guide-db-h2{color:var(--n-a84a2a,#a84a2a);opacity:0}
.activity-demo .guide-db-card.is-rebut .guide-db-h1{opacity:0}
.activity-demo .guide-db-card.is-rebut .guide-db-h2{opacity:1}
.activity-demo .guide-db-band{display:flex;align-items:center;gap:4px;min-width:0;margin:0;padding:0 5px;border-radius:7px;background:var(--n-f8efe3,#f8efe3);overflow:hidden;transition:opacity .2s}
.activity-demo .guide-db-band.is-idea,.activity-demo .guide-db-band.is-rebut{grid-area:2/1}
.activity-demo .guide-db-band.is-reason{grid-area:3/1;opacity:0}
.activity-demo .guide-db-band.is-rebut{opacity:0}
.activity-demo .guide-db-card.is-say .guide-db-band.is-reason,.activity-demo .guide-db-card.is-rebut .guide-db-band.is-rebut{opacity:1}
.activity-demo .guide-db-card.is-rebut .guide-db-band.is-idea{opacity:0}
.activity-demo .guide-db-lab{flex:none;padding:0 3px;border-radius:4px;background:var(--n-ffffff,#fff);color:var(--n-8d533c,#8d533c);font-size:7.5px;font-weight:800;line-height:1.5}
.activity-demo .guide-db-say{min-width:0;color:var(--n-403b35,#403b35);font-size:8.5px;font-weight:700;white-space:nowrap}
.activity-demo .guide-db-k,.activity-demo .guide-db-ck .guide-db-ko{text-decoration:underline dotted var(--n-cbb391,#cbb391);text-underline-offset:3px}
.activity-demo .guide-db-sl{margin:0 2px;color:var(--n-c9b498,#c9b498);font-style:normal;font-weight:400}
.activity-demo .guide-db-ck{font-weight:700;transition:transform .15s}
.activity-demo .guide-db-ck .guide-db-en{display:none;padding:0 1px;background:linear-gradient(transparent 50%,var(--n-f6dd9f,#f6dd9f) 50%,var(--n-f6dd9f,#f6dd9f) 92%,transparent 92%);color:var(--n-97401f,#97401f)}
.activity-demo .guide-db-ck.is-en .guide-db-ko{display:none}
.activity-demo .guide-db-ck.is-en .guide-db-en{display:inline}
.activity-demo .guide-db-pick{position:absolute;top:3px;right:5px;height:14px;padding:0 7px;border-radius:6px;background:var(--n-a84a2a,#a84a2a);color:var(--n-ffffff,#fff);font-size:8px;font-weight:800;line-height:14px;transition:opacity .2s,transform .15s}
.activity-demo .guide-db-card.is-say .guide-db-pick{opacity:0}
.activity-demo .guide-db-done{display:grid;place-items:center;height:20px;border-radius:7px;background:var(--i-a84a2a,#a84a2a);color:var(--i-ffffff,#fff);font-size:10px;font-weight:800;line-height:1;opacity:.45;transition:opacity .2s,transform .15s,background-color .2s}
.activity-demo .guide-db-card.is-say~.guide-db-foot .guide-db-done{opacity:1}
.activity-demo .guide-db-done.is-on{background:var(--i-86391f,#86391f);opacity:1}
.activity-demo .guide-db-card b.is-pressed,.activity-demo .guide-db-foot b.is-pressed{transform:scale(.94)}
/* Reduced motion: the steps still change, without glides or pulses (the bar fills per step). */
.activity-demo.is-still *,.activity-demo.is-still :before,.activity-demo.is-still :after{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.activity-demo *,.activity-demo :before,.activity-demo :after{transition:none!important;animation:none!important}}