/* Existing teaching demonstration, preserved from the original stylesheet. */
.jr-bars{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}
.jr-bars button{all:unset;cursor:pointer;padding:8px 0}
.jr-bars i{display:block;height:3px;border-radius:3px;background:rgba(238,243,240,.18);overflow:hidden;position:relative}
.jr-bars i::after{content:"";position:absolute;inset:0;background:var(--on-deep);transform-origin:left;transform:scaleX(var(--p,0))}
.jr-bars button:focus-visible i{outline:2px solid var(--mint-300);outline-offset:3px}

.jr-stage{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;cursor:pointer;
  background:radial-gradient(120% 80% at 50% 0%,#1B3530 0%,#0E1F1B 70%);user-select:none;-webkit-user-select:none}
.jr-stage *{transition:transform .9s var(--ease),opacity .7s var(--ease),filter .9s var(--ease)}

/* 份卷 */
.jr-paper{position:absolute;left:8%;top:10%;width:62%;padding:3.2% 3.6% 4%;border-radius:6px;
  background:#F6F5F0;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);transform:translateY(14%) rotate(-2deg);opacity:0}
.jr-paper-head{display:flex;justify-content:space-between;font-size:clamp(9px,1.1vw,12px);color:#6b6f6c;margin-bottom:4%;letter-spacing:.02em}
.jr-paper img{display:block;width:100%;height:auto;border-radius:3px;filter:grayscale(1) contrast(.95);opacity:.9}
.jr-lines{display:block;height:clamp(40px,7vw,90px);margin-top:4%;background:repeating-linear-gradient(transparent 0 calc(1.6em - 1px),rgba(22,25,23,.12) calc(1.6em - 1px) 1.6em);font-size:clamp(9px,1.1vw,12px)}
.jr-ink{position:absolute;left:1.2%;top:20%;width:3%;height:45%;overflow:visible}
.jr-ink path{fill:none;stroke:#C0392B;stroke-width:6;stroke-linecap:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .8s var(--ease) .3s;vector-effect:non-scaling-stroke}
.jr-minus{position:absolute;right:5%;top:22%;font:600 clamp(16px,2.6vw,30px)/1 "Bradley Hand","Segoe Print","Comic Sans MS",cursive;color:#C0392B;transform:rotate(-8deg) scale(.6);opacity:0;transition-delay:.5s}

/* 批註卡 */
.jr-note{position:absolute;right:6%;bottom:8%;width:48%;padding:3% 3.4%;border-radius:12px;background:#F0EEE6;color:var(--ink);
  font-size:clamp(10px,1.25vw,14px);line-height:1.6;box-shadow:0 30px 60px -24px rgba(0,0,0,.75);transform:translateY(30%);opacity:0}
.jr-note p+p{margin-top:.6em}
.jr-note-cap{font-size:.8em;color:var(--muted)}
.jr-key{border-top:1px solid #DEDBD0;padding-top:.6em}
.jr-key b{color:#B8475F;margin-right:.4em}

/* 返卷 email */
.jr-mail{position:absolute;right:7%;top:8%;width:46%;height:84%;border-radius:12px;overflow:hidden;background:#F6F5F0;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.8);transform:translateX(70%);opacity:0}
.jr-mail-bar{display:flex;gap:5px;padding:8px 10px;background:#E8E6DC}
.jr-mail-bar span{width:7px;height:7px;border-radius:50%;background:#C9C5B8}
.jr-mail-body{height:100%;overflow:hidden}
.jr-mail-body img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform 3.4s cubic-bezier(.45,0,.55,1) .5s}

/* Gmail 通知 */
.jr-notif{position:absolute;left:50%;top:5%;width:min(86%,460px);display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;
  background:rgba(240,238,230,.86);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);color:var(--ink);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.6);transform:translate(-50%,-140%);opacity:0;font-size:clamp(11px,1.3vw,14px);line-height:1.45}
.jr-notif img{flex:none;width:36px;height:36px;border-radius:9px}
.jr-notif p:first-child{display:flex;justify-content:space-between;gap:8px}
.jr-notif p:first-child span{color:var(--muted);font-size:.9em}

/* 各畫面狀態 */
.jr-stage[data-s] .jr-paper{transform:none;opacity:1}
.jr-stage:not([data-s="1"]) .jr-paper img{filter:none;opacity:1}
.jr-stage:not([data-s="1"]) .jr-ink path{stroke-dashoffset:0}
.jr-stage:not([data-s="1"]) .jr-minus{transform:rotate(-8deg) scale(1);opacity:1}
.jr-stage[data-s="3"] .jr-note,.jr-stage[data-s="4"] .jr-note,.jr-stage[data-s="5"] .jr-note{transform:none;opacity:1}
.jr-stage[data-s="4"] .jr-paper,.jr-stage[data-s="5"] .jr-paper{transform:translate(-14%,2%) scale(.84) rotate(-4deg);opacity:.45}
.jr-stage[data-s="4"] .jr-note,.jr-stage[data-s="5"] .jr-note{transform:translate(-62%,6%) scale(.82);opacity:.4}
.jr-stage[data-s="4"] .jr-mail,.jr-stage[data-s="5"] .jr-mail{transform:none;opacity:1}
.jr-stage[data-s="4"] .jr-mail-body img{transform:translateY(-38%)}
.jr-stage[data-s="5"] .jr-mail-body img{transform:translateY(-38%);transition:none}
.jr-stage[data-s="5"] .jr-mail{transform:scale(.94);opacity:.7}
.jr-stage[data-s="5"] .jr-notif{transform:translate(-50%,0);opacity:1}

/* 字幕 */
.jr-caption{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;margin-top:18px}
.jr-n{font-size:13px;color:var(--mint-300);padding-top:6px;font-variant-numeric:tabular-nums}
.jr-caption h3{font-size:clamp(20px,2.2vw,26px);font-weight:600;color:var(--on-deep);line-height:1.3}
.jr-caption p:not(.jr-n){color:var(--on-deep-muted);font-size:15px;margin-top:4px}
.jr-pause{all:unset;cursor:pointer;font-size:13px;color:var(--on-deep-muted);padding:6px 12px;border-radius:999px;border:1px solid var(--deep-line)}
.jr-pause:hover{color:var(--on-deep)}
.jr-more{margin-top:14px;font-size:14px}
.jr-more a{color:var(--mint-300)}

@media (max-width:640px){
  .jr-stage{aspect-ratio:4/5}
  .jr-paper{left:6%;top:7%;width:88%}
  .jr-note{right:5%;bottom:5%;width:84%}
  .jr-mail{right:6%;top:10%;width:88%;height:82%;transform:translateY(70%)}
  .jr-stage[data-s="4"] .jr-paper,.jr-stage[data-s="5"] .jr-paper{transform:translateY(-6%) scale(.9);opacity:.3}
  .jr-stage[data-s="4"] .jr-note,.jr-stage[data-s="5"] .jr-note{transform:translateY(10%) scale(.9);opacity:0}
  .jr-notif{top:4%}
  .jr-caption{grid-template-columns:auto 1fr}
  .jr-pause{grid-column:1/-1;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .jr-stage *{transition:opacity .2s!important}
  .jr-mail-body img{transform:none!important}
}
.jr-ink{display:none}
.jr-paper::before{content:"";position:absolute;left:1.6%;top:22%;width:3px;height:28%;border-radius:3px;background:#C0392B;transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease) .25s}
.jr-stage:not([data-s="1"]) .jr-paper::before{transform:scaleY(1)}
.jr-minus{right:auto;left:72%;top:auto;bottom:10%}
@media (max-width:640px){
  .jr-paper{top:9%}
  .jr-lines{height:150px}
}
.jr-stage[data-s="4"] .jr-mail-body img,.jr-stage[data-s="5"] .jr-mail-body img{transform:translateY(-12%)}
/* 動畫加快 */
.jr-stage *{transition-duration:.55s}
.jr-paper::before{transition:transform .45s var(--ease) .1s}
.jr-minus{transition-delay:.25s}
.jr-mail-body img{transition:transform 1.8s cubic-bezier(.45,0,.55,1) .25s}