.student-preview[hidden],.demo-room[hidden]{display:none!important}
.student-preview{margin:22px auto 0;max-width:1040px}
.ipad-shell{padding:16px 18px 16px 28px;border-radius:30px;background:#252725;box-shadow:0 20px 50px #30271824;position:relative}
.ipad-shell::before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;border-radius:50%;background:#101716;box-shadow:inset 0 0 0 2px #414749}
.ipad-workspace{border-radius:13px;overflow:hidden;background:#fbf9f2;color:#2b2a28}
.ipad-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid #2b2a2822;background:#fdfbf4}
.ipad-assignment{display:flex;align-items:center;gap:12px;min-width:0}.ipad-assignment .back-mark{font-size:28px;color:#625d55}.ipad-assignment strong{display:block;font-size:clamp(.75rem,1.4vw,1.15rem);line-height:1.25}.ipad-assignment small{display:block;font-size:.72rem;color:#625d55;margin-top:4px}
.ipad-top button,.ipad-room-peek{border:1px solid #2b2a2826;border-radius:10px;background:#fffefa;color:#2b2a28;min-height:44px;padding:8px 14px;cursor:pointer;font:600 .85rem var(--font-sans)}
.ipad-top .ipad-submit{background:#2563c9;color:white;border-color:#2563c9}.ipad-top .ipad-submit:disabled{background:#e1ecfd;color:#173f86;border-color:#b9ccec;cursor:default}
.ipad-header-actions{display:flex;gap:8px;flex-shrink:0}.ipad-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 20px;background:#fdfbf4;border-bottom:1px solid #9fb7ce}
.ipad-questions{display:flex;gap:7px;align-items:center}.ipad-questions span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #b7b2a4;border-radius:8px;font:600 .85rem var(--font-sans)}.ipad-questions .done{background:#dcefe2;color:#2e7d4f;border-color:#b4d3be}.ipad-questions .current{background:#f7e36b;border:2px solid #2563c9;color:#173f86;box-shadow:0 0 0 3px #2563c918}.ipad-questions .question-label{width:auto;border:0;font-size:.72rem;color:#625d55;margin-left:6px}
.ipad-room-peek{display:flex;align-items:center;gap:12px;padding:0 12px;max-width:48%;background:repeating-linear-gradient(0deg,transparent 0 7px,#468ab00d 7px 8px),#f9f6e9}.ipad-room-peek span{font-size:.7rem;white-space:nowrap}.ipad-classmates{display:flex;align-items:flex-end;gap:4px;height:44px}.ipad-classmates svg{width:28px;height:31px;border-bottom:3px solid #d8bd8e}
.ipad-question{padding:18px 24px 12px;border-bottom:1px solid #2b2a2812;font-size:clamp(.8rem,1.35vw,1.05rem);line-height:1.6}.ipad-question b{margin-right:12px;color:#2563c9}.ipad-question .radius-note{border-radius:4px;padding:2px 3px}.student-preview[data-mode="3"] .radius-note{outline:2px solid #c4452f;outline-offset:3px}
.ipad-paper{position:relative;background:linear-gradient(90deg,transparent 7.4%,#d65c542c 7.4%,#d65c542c 7.5%,transparent 7.5%),#fffefa;aspect-ratio:1024/606}
.ipad-paper img,.ipad-paper canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.ipad-paper canvas{opacity:0}.ipad-paper.has-replay canvas{opacity:1}.ipad-paper.has-replay img{visibility:hidden}
.ipad-pen-tools{position:absolute;right:18px;top:20px;display:flex;gap:13px;padding:10px 13px;border:1px solid #ded8c9;border-radius:12px;background:#fdfbf4e8;color:#625d55;font-size:19px;box-shadow:0 4px 15px #30271810}.ipad-pen-tools .selected{color:#2563c9;border-bottom:2px solid #2563c9}.ipad-pen-tools i{height:16px;width:16px;border-radius:50%;background:#2b2a28;align-self:center}
.ipad-uni{position:absolute;bottom:14px;right:18px;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;gap:8px;padding:5px;min-height:44px;color:#173f86;font:600 .8rem var(--font-sans)}.ipad-uni svg{width:78px;height:65px}.ipad-uni span:not([data-student-mascot]){padding:7px 10px;background:#e1ecfd;border-radius:12px}
.ipad-hint{display:flex;align-items:flex-start;gap:18px;background:#e1ecfd;border-top:1px solid #bdcce3;padding:18px 24px;font-size:.95rem;line-height:1.6}.ipad-hint[hidden]{display:none}.ipad-hint b{white-space:nowrap;color:#173f86}.student-preview[data-mode="3"] .ipad-hint{background:#fff3e9;border-color:#dfbba3}.student-preview[data-mode="3"] .ipad-hint b{color:#9c3e2b}
.student-playback{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}.student-playback button{min-height:44px;padding:9px 15px;border:1px solid #d9d7cf;border-radius:24px;background:white;color:#252725;cursor:pointer;font:600 .8rem var(--font-sans)}.student-playback [data-student-status]{font-size:.85rem;color:#625d55;flex:1 1 180px;margin:0}
.student-provenance{font-size:.78rem;color:#6b6a63;line-height:1.6;margin:12px 0 0}.student-provenance a{color:inherit;text-decoration:underline}
@media(max-width:760px){.ipad-shell{padding:7px 7px 7px 14px;border-radius:17px}.ipad-shell::before{left:4px;width:5px;height:5px}.ipad-workspace{border-radius:8px}.ipad-top{padding:9px 8px;gap:7px;align-items:flex-start;flex-wrap:wrap}.ipad-assignment{flex:1 1 130px;gap:6px}.ipad-assignment small{font-size:.6rem}.ipad-header-actions{gap:4px}.ipad-top button{padding:6px 8px;font-size:.68rem}.ipad-row{padding:6px 8px;gap:5px}.ipad-questions{gap:4px}.ipad-questions span{width:23px;height:26px;font-size:.65rem}.ipad-questions .question-label{display:none}.ipad-room-peek{padding:0 5px;max-width:45%;gap:3px;min-height:44px}.ipad-room-peek span{display:none}.ipad-classmates{gap:1px;height:29px}.ipad-classmates svg{width:19px;height:24px}.ipad-question{padding:10px 12px;font-size:.73rem}.ipad-question b{margin-right:5px}.ipad-pen-tools{right:7px;top:8px;font-size:13px;padding:4px 6px;gap:8px;border-radius:6px}.ipad-pen-tools i{height:10px;width:10px}.ipad-uni{bottom:4px;right:5px;gap:3px;font-size:.62rem}.ipad-uni svg{width:40px;height:34px}.ipad-uni span:not([data-student-mascot]){padding:5px}.ipad-hint{padding:12px;gap:8px;flex-direction:column;font-size:.8rem}.student-playback{gap:7px}.student-playback [data-student-status]{flex-basis:100%}}

.ipad-tutor-ink{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.student-preview[data-mode="3"] .ipad-tutor-ink{display:block}.student-transcript{font-size:.8rem;line-height:1.6;margin-top:8px;color:#625d55}.student-transcript summary{cursor:pointer}.student-transcript p{max-width:85ch}.demo-room{scroll-margin-top:90px}
/* Presentation layer: quiet materials, crisp vector controls, composited motion. */
.student-preview{max-width:1060px;margin-top:34px}
.student-stage-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 5px 22px}
.student-eyebrow{font:500 .62rem/1.5 var(--font-mono);letter-spacing:.13em;color:#837b69}
.student-stage-heading h3{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:550;letter-spacing:-.035em;line-height:1.2;margin:7px 0 0;color:#34362f}
.student-replay-badge{position:relative;padding-left:16px;font-size:.75rem;line-height:1.5;color:#4e594d;white-space:nowrap}.student-replay-badge>span{display:block;font-size:.65rem;color:#8a8b81}.student-replay-badge i{position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:#82a68c;box-shadow:0 0 0 4px #82a68c14}
.ipad-shell{padding:14px 15px 14px 26px;border-radius:31px;background:linear-gradient(135deg,#3e423f,#171c1c 35%,#272e2b 75%,#424844);border:1px solid #858a80;box-shadow:0 2px 0 #fcfffabd inset,0 -2px 0 #0007 inset,0 3px 5px #2c31231c,0 18px 28px -18px #27322180,0 40px 70px -36px #323c3259;isolation:isolate}
.ipad-shell::after{content:"";pointer-events:none;position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px #ffffff0c,inset 0 0 0 5px #00000035}
.ipad-shell::before{left:9px;width:6px;height:6px;background:#0a1217;box-shadow:inset 0 0 0 1px #637177,0 0 0 3px #101817}
.ipad-workspace{border:1px solid #a4a89c;box-shadow:0 0 0 1px #0b100c;position:relative;border-radius:15px}
.ipad-top{padding:16px 22px;background:linear-gradient(#fffef9,#f9f7ee);border-bottom:1px solid #bcb9a82b}.ipad-assignment strong{font-weight:650;letter-spacing:-.025em}.ipad-assignment small{color:#918c7e;letter-spacing:.015em;font-size:.68rem}.back-mark{display:grid;place-items:center;width:26px}.back-mark svg{width:19px;height:19px;stroke:#85867b;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ipad-top button,.ipad-room-peek,.student-playback button{transition:background .18s,box-shadow .18s,transform .18s,border-color .18s}
.ipad-top button:hover,.ipad-room-peek:hover,.student-playback button:hover{background:#f2f5ed;transform:translateY(-1px);box-shadow:0 4px 10px #28321f12;border-color:#8b9a81}
.ipad-top .ipad-submit{background:linear-gradient(#3778dc,#2563c9);box-shadow:0 1px 0 #ffffff55 inset,0 3px 7px #2563c922;border-color:#2460bc}.ipad-top .ipad-submit:hover{background:#1e5abb;border-color:#1e5abb;box-shadow:0 5px 12px #2563c92e}
.ipad-top button:active,.ipad-room-peek:active,.student-playback button:active{transform:translateY(1px)}
.ipad-row{padding:8px 22px;background:#fbf9f2;border-bottom:1px solid #b3c1cb80}.ipad-questions span{border-color:#d1cfc2;color:#858578;background:#f9f8f0;border-radius:9px;box-shadow:0 1px 2px #30271808}.ipad-questions .done{background:#e8f2e7;color:#578264;border-color:#d6e5d4}.ipad-questions .current{background:#f6e594;border-color:#8cacae;color:#303d35;box-shadow:0 0 0 3px #8cacae19}
.ipad-room-peek{border:1px solid #d7d4bd99;border-radius:11px;box-shadow:0 1px 2px #30271808}.ipad-room-peek span{font-weight:500;color:#7a7e68}.ipad-classmates svg{transform-origin:center bottom}
.ipad-question{padding:17px 25px;background:#fffdf7;border-bottom:1px solid #cbc8b750;color:#42463d;font-size:clamp(.8rem,1.3vw,1.1rem)}.ipad-question b{font-weight:600;color:#6a8995}
.ipad-paper{aspect-ratio:1024/470;overflow:hidden;background:linear-gradient(90deg,transparent 7.4%,#d65c5426 7.4%,#d65c5426 7.5%,transparent 7.5%),radial-gradient(#9b987b0b .6px,transparent .7px) 0 0/6px 6px,#fffefa}
.ipad-paper img,.ipad-paper canvas,.ipad-tutor-ink{width:100%;height:auto;aspect-ratio:1024/606;object-fit:initial}
.ipad-pen-tools{padding:8px;gap:3px;background:#fffef9e8;box-shadow:0 3px 12px #4d503a0d,0 1px 1px #fff inset;border:1px solid #dfdfd1;border-radius:12px;backdrop-filter:blur(8px)}.ipad-pen-tools>span{display:grid;place-items:center;width:30px;height:30px;border-radius:7px}.ipad-pen-tools .selected{background:#e5edf8;border:0}.ipad-pen-tools svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.ipad-pen-tools i{margin:0 7px;background:#45473e;width:14px;height:14px;box-shadow:0 0 0 3px #f0eee4,0 0 0 4px #d3d2c5}
.ipad-uni{right:20px;bottom:12px;transition:transform .2s}.ipad-uni:hover{transform:translateY(-3px)}.ipad-uni span:not([data-student-mascot]){background:#edf3fa;color:#5f7e9b;border:1px solid #dce6ef;box-shadow:0 2px 5px #304a6810;font-weight:500}
.ink-progress{height:2px;background:#ecefe6;overflow:hidden}.ink-progress i{display:block;height:100%;background:linear-gradient(90deg,#8eaf97,#b8ccb1);transform:scaleX(0);transform-origin:left;will-change:transform}
.ink-tip{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#91b1bc;box-shadow:0 0 0 4px #91b1bc1f;pointer-events:none;opacity:0;will-change:transform}
.student-preview.is-playing .student-replay-badge i{animation:student-breathe 2.4s ease-in-out infinite}.student-preview.is-playing .ipad-classmates svg{animation:student-nod 2.7s ease-in-out infinite}.ipad-classmates svg:nth-child(2){animation-delay:-.7s!important}.ipad-classmates svg:nth-child(3){animation-delay:-1.2s!important}.ipad-classmates svg:nth-child(4){animation-delay:-1.8s!important}.ipad-classmates svg:nth-child(5){animation-delay:-2.3s!important}
.ipad-hint{padding:18px 24px;background:#edf3f8;border-top:0;gap:22px;color:#4a5a65;animation:student-help-in .35s ease-out both}.ipad-hint b{font-size:.78rem;font-weight:650;letter-spacing:-.015em}.student-preview[data-mode="3"] .ipad-hint{background:#faf0e7;color:#65534a}.student-preview[data-mode="3"] .ipad-hint b{color:#a0644e}.student-preview[data-mode="3"] .ipad-tutor-ink{animation:student-help-in .45s ease-out both}
.student-playback{padding:0 3px;margin-top:23px}.student-playback button{background:#fbfcf9;border-color:#e0e4da;font-weight:500;color:#5b6656;box-shadow:0 1px 2px #263b1410}.student-playback [data-student-status]{font-size:.77rem;color:#86907e}.student-provenance,.student-transcript{color:#93958a;font-size:.72rem}.student-provenance{margin-top:15px}
@keyframes student-breathe{50%{opacity:.5;transform:scale(.8)}}@keyframes student-nod{50%{transform:translateY(1.1px) rotate(1.4deg)}}@keyframes student-help-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.student-preview{margin-top:26px}.student-stage-heading{margin:0 1px 16px;gap:10px;align-items:flex-start}.student-eyebrow{font-size:.5rem;letter-spacing:.08em}.student-stage-heading h3{font-size:1.2rem;margin-top:6px}.student-replay-badge{font-size:.6rem;white-space:normal;max-width:90px;padding-left:12px;flex-shrink:0}.student-replay-badge>span{font-size:.55rem}.student-replay-badge i{top:4px;width:5px;height:5px}.ipad-shell{padding:7px 7px 7px 13px;border-radius:18px}.ipad-shell::before{left:4px;width:4px;height:4px;box-shadow:inset 0 0 0 1px #637177}.ipad-workspace{border-radius:9px}.ipad-top{padding:10px 8px;gap:8px}.ipad-assignment{gap:3px}.back-mark{width:13px}.back-mark svg{width:14px;height:14px}.ipad-assignment small{font-size:.53rem}.ipad-top button{font-size:.65rem;padding:6px 7px}.ipad-row{padding:5px 8px}.ipad-question{font-size:.72rem;padding:10px 11px}.ipad-paper{aspect-ratio:1024/530}.ipad-pen-tools{padding:4px;gap:1px;top:7px;right:7px;border-radius:8px}.ipad-pen-tools>span{width:19px;height:21px}.ipad-pen-tools svg{width:12px;height:12px}.ipad-pen-tools i{width:9px;height:9px;margin:0 5px;box-shadow:0 0 0 2px #f0eee4,0 0 0 3px #d3d2c5}.ipad-uni{right:6px;bottom:5px}.ipad-uni svg{width:38px;height:32px}.ipad-hint{padding:13px;gap:5px;font-size:.77rem}.ipad-hint b{font-size:.72rem}.student-playback{gap:7px;margin-top:17px}.student-playback button{padding:8px 11px;font-size:.72rem}.ink-tip{width:4px;height:4px;left:-2px;top:-2px;box-shadow:0 0 0 3px #91b1bc1f}}
@media(prefers-reduced-motion:reduce){.student-preview *, .student-preview *::before,.student-preview *::after{animation:none!important;transition:none!important}.ink-tip{display:none}}
/* Small labels keep sufficient contrast on the light paper. */
.student-eyebrow{color:#726c60}.student-replay-badge>span{color:#6d7567}.ipad-assignment small{color:#757163}.ipad-room-peek span{color:#606b57}.student-playback [data-student-status]{color:#65745f}.student-provenance,.student-transcript{color:#6e7567}
/* The supplied Uni whiteboard choreography, redrawn at display resolution. */
@font-face{font-family:StudioKalam;src:url('/home/student/Kalam-Regular.ttf') format('truetype');font-display:swap}
.uni-board{position:absolute;inset:0;z-index:1}.uni-board[hidden]{display:none}.uni-board>svg{width:100%;height:100%;display:block}.uni-hand{font:42px StudioKalam,cursive}.uni-board-label{font:500 12px var(--font-sans);letter-spacing:1.6px;fill:#7b7c70}.uni-cursor-label{font:600 13px var(--font-sans)}
.student-preview.has-uni-demo[data-mode="2"] .ipad-paper>img,.student-preview.has-uni-demo[data-mode="2"] .ipad-paper>canvas,.student-preview.has-uni-demo[data-mode="2"] .ink-tip{display:none}
.student-preview.has-uni-demo[data-mode="2"] .ipad-pen-tools{z-index:2;top:auto;bottom:20px;left:24px;right:auto}
.student-preview.has-uni-demo[data-mode="2"] .ipad-uni{z-index:2}.student-preview.has-uni-demo[data-mode="2"] .ipad-hint{box-sizing:border-box;min-height:67px;align-items:center}.student-preview.has-uni-demo[data-mode="2"] .ink-progress i{background:linear-gradient(90deg,#9ab7e7,#347ce4)}
@media(max-width:600px){.student-preview.has-uni-demo[data-mode="2"] .ipad-paper{aspect-ratio:570/700}.student-preview.has-uni-demo[data-mode="2"] .ipad-pen-tools{bottom:10px;left:12px}.student-preview.has-uni-demo[data-mode="2"] .ipad-hint{align-items:flex-start;min-height:76px}.uni-board-label{font-size:13px;letter-spacing:1px}}
/* A small window onto the room; every person has their own activity. */
.ipad-room-peek{max-width:none;gap:12px;min-height:77px;padding:0 13px;background:linear-gradient(#faf8ef,#f5f2e5);overflow:hidden}.ipad-classmates{height:73px;gap:8px;isolation:isolate}.ipad-classmates .peer{position:relative;display:block;width:47px;height:69px;flex:none;--peer-delay:0s}.ipad-classmates .peer svg{border:0;animation:none!important;width:100%;height:100%}.peer-person,.peer-reaction{position:absolute;left:3px;bottom:6px;width:40px;height:46px;transform-origin:center bottom;z-index:2}.peer-reaction{opacity:0}.peer-desk{position:absolute;bottom:5px;left:0;right:0;height:5px;background:#d4bb8c;border:1px solid #bda176;border-radius:4px;z-index:3}.peer-page{position:absolute;bottom:8px;left:14px;width:17px;height:9px;background:repeating-linear-gradient(0deg,#fffdf5 0 3px,#98b0be 3px 4px);border:1px solid #938a76;border-radius:2px;transform:skewX(-15deg);z-index:3}.peer-pencil{position:absolute;bottom:14px;left:29px;width:4px;height:19px;background:#edc65e;border:1px solid #756950;border-radius:2px;transform:rotate(35deg);transform-origin:bottom;z-index:4}.peer-thought{position:absolute;top:0;right:0;background:#f0e5fc;border:1px solid #c0abd1;border-radius:10px 10px 10px 2px;width:19px;height:20px;line-height:19px;font:600 15px/19px StudioKalam,cursive;color:#82619a;z-index:5}.peer-fire{position:absolute;left:-4px;bottom:10px;width:55px;height:65px;transform-origin:bottom;z-index:0;opacity:0}.peer-fire.gold{opacity:.75}.peer-pop{position:absolute;right:-3px;top:0;color:#dcac2a;font-size:18px;z-index:4;opacity:0}.peer-tutor{position:absolute;right:-7px;bottom:7px;width:24px;height:31px;z-index:4}.peer-chat{position:absolute;right:-6px;top:0;display:flex;gap:2px;padding:6px 5px;border:1px solid #96b9c1;border-radius:8px 8px 2px 8px;background:#e8f5f5;z-index:5}.peer-chat i{width:3px;height:3px;background:#568794;border-radius:50%}
.peer-writing .peer-person{animation:peer-write 1.8s ease-in-out infinite}.peer-pencil{animation:peer-scribble .5s ease-in-out infinite}.peer-thinking .peer-person{animation:peer-think 5s ease-in-out infinite}.peer-thought{animation:peer-question 5s ease-in-out infinite}.peer-talking .peer-person,.peer-tutor{animation:peer-talk 2s ease-in-out infinite}.peer-chat i{animation:peer-dot 1.4s ease-in-out infinite}.peer-chat i:nth-child(2){animation-delay:.2s}.peer-chat i:nth-child(3){animation-delay:.4s}.peer-fire.gold{animation:peer-gold 16s ease-in-out infinite}.peer-fire.blue{animation:peer-blue 16s ease-in-out infinite}.peer-pop{animation:peer-spark 16s ease-out infinite}.peer-reaction{animation:peer-wow 16s ease-in-out infinite}.peer-person{animation-delay:var(--peer-delay)}
.ipad-classmates:not(.peers-playing) *{animation-play-state:paused!important}
@keyframes peer-write{50%{transform:translateY(1px) rotate(4deg)}}@keyframes peer-scribble{50%{transform:translate(2px,1px) rotate(52deg)}}@keyframes peer-think{25%,60%{transform:rotate(-9deg) translateY(-1px)}}@keyframes peer-question{0%,85%,100%{transform:scale(.9)}40%{transform:scale(1.15) rotate(8deg)}}@keyframes peer-talk{50%{transform:rotate(5deg) translateY(-2px)}}@keyframes peer-dot{50%{opacity:.25;transform:translateY(-2px)}}
@keyframes peer-gold{0%,12%{opacity:0;transform:scale(.3)}18%,45%{opacity:1;transform:scale(1)}48%{transform:scale(.65)}52%,90%{opacity:0}100%{opacity:0;transform:scale(.3)}}@keyframes peer-blue{0%,48%{opacity:0;transform:scale(.4)}54%{opacity:1;transform:scale(1.12)}60%,80%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.5)}}@keyframes peer-spark{0%,15%,25%,49%,60%,100%{opacity:0;transform:scale(.4)}19%,54%{opacity:1;transform:scale(1.2)}}@keyframes peer-wow{0%,17%,30%,51%,65%,100%{opacity:0}19%,27%,54%,62%{opacity:1}}
.tutor-card{position:absolute;right:20px;top:18px;width:17%;z-index:4;border:1px solid #d5d9d2;border-radius:13px;overflow:hidden;box-shadow:0 6px 18px #25382820;background:#fffef8;pointer-events:none}.tutor-card[hidden]{display:none}.ipad-paper .tutor-card img{position:static;width:100%;height:112px;aspect-ratio:auto;object-fit:cover;object-position:center 22%;display:block;visibility:visible}.tutor-card>div{padding:9px 10px}.tutor-card strong{display:block;font-size:.82rem;line-height:1.7;color:#3f473b}.tutor-card strong span{font-weight:400;color:#7c8275}.tutor-presence{font:500 .46rem var(--font-mono);letter-spacing:.06em;color:#6e7e65;white-space:nowrap}.tutor-presence i{display:inline-block;width:4px;height:4px;background:#8ba782;border-radius:50%;margin-right:5px}.tutor-action{display:block;font-size:.58rem;color:#737d6b;line-height:1.4}.student-preview[data-mode="3"] .ipad-uni{display:none}.student-preview[data-mode="3"] .ipad-pen-tools{top:auto;bottom:18px;left:24px;right:auto}.student-preview[data-mode="3"] .ipad-tutor-ink{animation:none}.student-preview[data-mode="3"] .radius-note{outline-color:#bd5d43;transition:outline-color .3s}.student-preview[data-mode="3"] .ink-progress i{background:linear-gradient(90deg,#d7b398,#bd5d43)}
@media(max-width:760px){.ipad-row{flex-wrap:wrap}.ipad-room-peek{width:100%;justify-content:center;min-height:76px;padding:0 9px;gap:14px}.ipad-room-peek>span{display:block;font-size:.64rem}.ipad-classmates{height:71px;gap:6px}.ipad-classmates .peer{width:42px}.ipad-classmates .peer svg{width:100%;height:100%}.peer-tutor{right:-4px}.tutor-card{right:9px;top:8px;width:calc(100% - 18px);display:flex;align-items:center;border-radius:9px;height:64px}.ipad-paper .tutor-card img{width:62px;height:64px;flex:none}.tutor-card>div{padding:5px 12px;display:grid;grid-template-columns:auto auto;column-gap:14px;align-items:center}.tutor-card strong{grid-column:1;font-size:.85rem}.tutor-presence{grid-column:1 / -1;font-size:.5rem}.tutor-action{grid-column:2;grid-row:2;font-size:.65rem}.student-preview[data-mode="3"] .ipad-paper{padding-top:82px}.student-preview[data-mode="3"] .ipad-paper>canvas,.student-preview[data-mode="3"] .ipad-paper>img,.student-preview[data-mode="3"] .ipad-tutor-ink{top:82px}.student-preview[data-mode="3"] .ipad-pen-tools{bottom:6px;left:10px}}
@media(max-width:360px){.ipad-classmates{gap:3px}.ipad-classmates .peer{width:38px}.ipad-room-peek{gap:7px}.ipad-room-peek>span{font-size:.58rem}.tutor-card>div{column-gap:8px}}
.ipad-room-peek .ipad-classmates span{display:block}.ipad-room-peek .peer-chat{display:flex}.student-activity-note{font-size:.7rem;color:#6e7567;margin:12px 3px 0}
.ipad-room-peek .ipad-classmates .peer-chat{display:flex}.peer-rank{position:absolute;left:3px;bottom:6px;width:40px;height:46px;transform-origin:center bottom;z-index:2;opacity:0}.peer-rank.gold{animation:peer-gold 16s ease-in-out infinite}.peer-rank.blue{animation:peer-blue 16s ease-in-out infinite}
.tutor-portrait{display:block;height:112px;overflow:hidden}.ipad-paper .tutor-portrait img{transform:scale(1.6);transform-origin:50% 30%}
@media(max-width:760px){.tutor-portrait{width:62px;height:64px;flex:none}.ipad-paper .tutor-portrait img{width:62px;height:64px}}
/* One story to watch, rather than a panel of demo controls. */
.session-tour[hidden]{display:none}.session-tour{margin:30px 0 22px}.tour-intro{display:flex;justify-content:space-between;gap:16px;color:#757d6d;font:500 .66rem/1.6 var(--font-mono);letter-spacing:.08em}.tour-intro>span+span{font-family:var(--font-sans);letter-spacing:0;font-size:.76rem}.tour-navigation{display:flex;align-items:center;gap:28px;margin-top:14px}.tour-navigation ol{display:flex;gap:15px;flex:1;margin:0;padding:0;list-style:none}.tour-navigation li{position:relative;flex:1;padding:15px 0 0;color:#8a8e83;font-size:.8rem;line-height:1.4;--chapter-progress:0%}.tour-navigation li::before,.tour-navigation li::after{content:"";position:absolute;left:0;top:0;height:2px;border-radius:2px;background:#e7e9df;width:100%}.tour-navigation li::after{width:var(--chapter-progress);background:#78917c}.tour-navigation li[aria-current]{color:#334b38;font-weight:650}.tour-navigation button{min-height:42px;min-width:112px;border:1px solid #dce1d5;border-radius:24px;background:#fbfcf8;color:#50624c;padding:8px 16px;font:500 .8rem var(--font-sans);cursor:pointer}.tour-navigation button:hover{background:#edf3e8}.session-tour [data-tour-status]{margin:12px 0 0;font-size:.75rem;color:#687660}.tour-context{display:none;color:#6e7567;font-size:.75rem;line-height:1.7;max-width:88ch;margin:12px 0}.tour-context summary{cursor:pointer}.tour-context p{margin-top:8px}
.guided-session .demo-steps,.guided-session .student-playback,.guided-session .demo-controls,.guided-session .student-provenance,.guided-session .student-transcript,.guided-session .student-activity-note,.guided-session .demo-caption,.guided-session .student-replay-badge{display:none!important}.guided-session .tour-context{display:block}.guided-session .student-preview{margin-top:0}.guided-session .student-stage-heading{margin-bottom:22px}.guided-session .student-stage-heading h3{font-size:clamp(1.25rem,2vw,1.75rem)}.guided-session .student-eyebrow{display:none}.guided-session .tour-stage{min-height:940px}.guided-session .demo-room{margin-top:0}.guided-session .ipad-workspace button{cursor:default;pointer-events:none}.guided-session .ipad-workspace button:hover{transform:none;box-shadow:none}.guided-session .ipad-hint{min-height:84px;box-sizing:border-box}.guided-session .demo-label{margin-top:18px}.guided-session .ipad-assignment small{font-size:.62rem}
@media(max-width:1100px){.guided-session .tour-stage{min-height:850px}}
@media(max-width:760px){.tour-intro{align-items:flex-start;flex-direction:column;gap:3px}.tour-navigation{gap:13px;align-items:flex-start}.tour-navigation ol{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.tour-navigation li{font-size:.61rem;min-width:0;padding-top:10px}.tour-navigation button{font-size:.68rem;min-width:83px;padding:7px 10px}.guided-session .tour-stage{min-height:830px}.guided-session .student-stage-heading{margin-bottom:14px}.guided-session .ipad-hint{min-height:100px}.tour-context{font-size:.71rem}.tour-intro>span+span{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.tour-intro>span+span{display:none}}
@media(min-width:761px){.guided-session .student-preview,.guided-session .demo-room{max-width:min(1060px,calc((100svh - 220px)*1.25));margin-left:auto;margin-right:auto}.guided-session .tour-stage{min-height:clamp(650px,calc(100svh - 180px),940px)}}
.guided-session .session-tour{position:sticky;top:68px;z-index:8;background:#fffefbf2;backdrop-filter:blur(12px);padding:13px 0 10px;border-bottom:1px solid #e9ede3}.guided-session .session-tour [data-tour-status]{margin-bottom:0}
@media(max-width:760px){.guided-session .session-tour{top:60px;padding-top:10px}}

/* The complete stage stays in view; ordinary page scrolling scrubs its story. */
.guided-session .tour-scroll{height:520svh;position:relative;margin-top:24px}
.guided-session .tour-pin{--tour-top:max(calc(var(--header-h) + 12px),calc(var(--playback-top) - var(--tour-chrome,114px)));position:sticky;top:var(--tour-top);height:calc(100svh - var(--tour-top) - 16px);display:flex;flex-direction:column}
.guided-session .session-tour{position:relative;top:auto;margin:0 0 16px;flex:none;padding:10px 0 12px}
.guided-session .tour-stage{position:relative;min-height:0;flex:1}
.guided-session .tour-content{position:absolute;top:0;left:0;right:0;transform-origin:center top}
.guided-session .student-preview,.guided-session .demo-room{max-width:1060px;margin:0 auto}
.guided-session .ipad-hint,.guided-session .ipad-tutor-ink{animation:none;transition:none}
.guided-session .session-tour [data-tour-status]{font-size:.7rem}
@media(max-width:760px){.guided-session .session-tour{margin-bottom:12px;padding-top:6px}.guided-session .tour-navigation{margin-top:10px}.guided-session .tour-scroll{height:480svh}.guided-session .student-stage-heading{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.guided-session .tour-scroll{height:340svh}}

/* The camera enters Ruby’s actual sheet before the iPad workspace resolves. */
.guided-session .tour-room-layer{position:absolute;inset:0 0 auto;transform-origin:center top;pointer-events:none;z-index:2}
.guided-session .tour-room-layer[hidden]{display:none}
.guided-session .tour-room-layer .demo-room{overflow:hidden}
.guided-session .tour-stage{isolation:isolate}
.guided-session .tour-content .student-preview{transform-origin:center center;will-change:transform,opacity}

.guided-session .tour-content{z-index:3;pointer-events:none}

/* An illustrative speaking presence beside the tutor's moving pen. */
.tutor-card{width:19%;right:24px;top:28px;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center}
.tutor-portrait{position:relative;display:block;width:82%;height:auto;aspect-ratio:1;margin:10px auto 0;overflow:visible;isolation:isolate}
.tutor-photo{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:hidden;border-radius:50%;border:3px solid #6b9f81;background:#dceffc;box-shadow:0 3px 12px #324a3b20;box-sizing:border-box}
.ipad-paper .tutor-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transform:scale(1.6);transform-origin:50% 30%}
.speech-ring{position:absolute;inset:-3px;border:2.5px solid #4c9972;border-radius:50%;opacity:0;pointer-events:none;box-sizing:border-box}
.tutor-card>div{padding:9px 0 0}.tutor-card strong{font-size:.9rem;line-height:1.5}.tutor-presence{font-size:.48rem;letter-spacing:.025em}.tutor-action{font-size:.67rem;margin-top:2px;color:#3f7151;font-weight:600}
.tutor-card[data-speaking="true"] .tutor-photo{border-color:#5f9275;box-shadow:0 0 0 5px #75b68c2e,0 0 20px #66a78030,0 4px 12px #324a3b18}
.tutor-card.speech-active[data-speaking="true"] .speech-ring{animation:tutor-speech-ring 1.8s ease-out infinite}
.tutor-card.speech-active[data-speaking="true"] .ring-two{animation-delay:-.9s}
@keyframes tutor-speech-ring{0%{opacity:.85;transform:scale(1)}65%{opacity:.2}100%{opacity:0;transform:scale(1.5)}}
@media(max-width:760px){.tutor-card{right:12px;top:8px;width:calc(100% - 24px);height:92px;text-align:left;gap:22px;justify-content:flex-start;padding-left:12px;box-sizing:border-box}.tutor-portrait{width:68px;height:68px;margin:0;flex:none}.ipad-paper .tutor-portrait img{width:100%;height:100%}.tutor-card>div{padding:0;display:block}.tutor-card>div .tutor-presence{display:block;margin-bottom:3px}.tutor-card strong{font-size:.88rem}.tutor-presence{font-size:.46rem}.tutor-action{font-size:.65rem;margin:0}.student-preview[data-mode="3"] .ipad-paper{padding-top:112px}.student-preview[data-mode="3"] .ipad-paper>canvas,.student-preview[data-mode="3"] .ipad-paper>img,.student-preview[data-mode="3"] .ipad-tutor-ink{top:112px}}
@media(prefers-reduced-motion:reduce){.tutor-card .speech-ring{animation:none!important;opacity:0}.tutor-card[data-speaking="true"] .ring-one{opacity:.35;transform:scale(1.13)}}

/* Keep the phone story chrome compact so the demonstration has room to breathe. */
@media(max-width:760px){.guided-session .tour-intro{flex-direction:row;align-items:center;gap:12px}.guided-session .tour-intro>span+span{max-width:130px;text-align:right;font-size:.6rem}.guided-session .session-tour [data-tour-status]{margin-top:8px}.guided-session .tour-navigation li{padding-top:8px}.guided-session .session-tour{margin-bottom:10px;padding-bottom:8px}}

/* First mobile scene: frame the recorded work, not the unused desktop paper. */
@media(max-width:760px){
 .guided-session .student-preview[data-mode="1"] .ipad-top{flex-wrap:nowrap;padding-block:8px}
 .guided-session .student-preview[data-mode="1"] .ipad-assignment small{display:none}
 .guided-session .student-preview[data-mode="1"] [data-student-hand]{display:none}
 .guided-session .student-preview[data-mode="1"] .ipad-top button{min-height:32px}
 .guided-session .student-preview[data-mode="1"] .ipad-paper{aspect-ratio:1024/800}
 .guided-session .student-preview[data-mode="1"] .ipad-paper>canvas,
 .guided-session .student-preview[data-mode="1"] .ipad-paper>img{width:180%;max-width:none;left:-12%;top:-18px}
 .guided-session .student-preview[data-mode="1"] .ipad-pen-tools{top:auto;bottom:10px;left:10px;right:auto}
}

/* A non-interactive outgoing frame bridges the two scroll chapters. */
.guided-session .tour-transition{z-index:4;pointer-events:none;will-change:transform,opacity}
.guided-session .tour-transition *{animation:none!important}