/* 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-listen{display:flex;align-items:center;gap:6px;margin:0 0 7px;padding:3px 8px 3px 4px;border-radius:12px;background:var(--n-fff3d3,#fff3d3)}
.activity-demo .guide-sb-say{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--n-7a5230,#7a5230);color:var(--n-ffffff,#fff);transition:box-shadow .2s,transform .15s}
.activity-demo .guide-screen .guide-sb-say svg{width:16px;height:16px}
.activity-demo .guide-sb-say.is-on{box-shadow:0 0 0 4px var(--n-e9c98a,#e9c98a)}
.activity-demo .guide-sb-say.is-pressed{transform:scale(.9)}
.activity-demo .guide-sb-slow{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;height:24px;padding:0 8px 0 6px;border:1px solid var(--n-ecd9a8,#ecd9a8);border-radius:999px;background:var(--n-ffffff,#fff);color:var(--n-79562d,#79562d);font-size:10px;font-weight:750}
.activity-demo .guide-sb-meaning{flex:1;min-width:0;color:var(--n-6a5a43,#6a5a43);font-size:11px;font-weight:750;text-align:right;white-space:nowrap}
.activity-demo .guide-sb-cells{display:flex;justify-content:center;gap:5px;margin:0 0 8px}
.activity-demo .guide-sb-cells b{display:grid;place-items:center;width:26px;height:30px;box-sizing:border-box;border:1.5px solid var(--n-e2d3b8,#e2d3b8);border-radius:7px;background:var(--n-fffaf2,#fffaf2);color:var(--n-2f3b63,#2f3b63);font-size:17px;font-weight:700;line-height:1;transition:background-color .2s,border-color .2s,color .2s}
.activity-demo .guide-sb-cells span{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.activity-demo .guide-sb-cells span.is-in{opacity:1;transform:none}
.activity-demo .guide-sb-cells b.is-good{border-color:var(--i-7fbf98,#7fbf98);background:var(--i-dff1e7,#dff1e7);color:var(--i-2a8058,#2a8058)}
.activity-demo .guide-sb-cells b.is-wrong{border-color:var(--i-d4382c,#d4382c);background:var(--i-fbe1e0,#fbe1e0);color:var(--i-d4382c,#d4382c)}
.activity-demo .guide-sb-cells.is-right b{border-color:var(--i-2a8058,#2a8058);background:var(--i-dff1e7,#dff1e7);color:var(--i-2a8058,#2a8058)}
.activity-demo .guide-sb-pad{display:flex;justify-content:center;align-items:center;gap:6px}
.activity-demo .guide-sb-check{display:grid;place-items:center;height:27px;padding:0 13px;border-radius:9px;background:var(--i-a94c31,#a94c31);color:var(--i-ffffff,#fff);font-size:11px;font-weight:800;box-shadow:0 2px 0 var(--i-7c3622,#7c3622);transition:transform .15s,box-shadow .15s}
.activity-demo .guide-sb-check.is-pressed{transform:translateY(2px);box-shadow:none}

/* 메모리 카드: 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-wood{fill:var(--n-c79b5f,#c79b5f);stroke:var(--n-8d5d31,#8d5d31);stroke-width:.8}
.activity-demo .guide-pt-leg{stroke:var(--n-8d5d31,#8d5d31);stroke-width:2.4}
.activity-demo .guide-pt-cat{fill:var(--n-e3dccf,#e3dccf);stroke:var(--n-6a5f50,#6a5f50);stroke-width:1}
.activity-demo .guide-pt-tail{stroke:var(--n-6a5f50,#6a5f50);stroke-width:1.6}
.activity-demo .guide-pt-eye{stroke:var(--n-3d3a35,#3d3a35);stroke-width:.9}
.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}}