/* The same paper and handwriting family used by the Prepbox app. */


.crv-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 24px; background: rgba(255,255,255,.95); border-bottom: 1px solid #DEE5E1; }
.crv-bar h1 { display: flex; align-items: center; gap: 20px; margin: 0; }
.crv-wordmark { font-family: 'Patrick Hand', cursive; font-size: 32px; font-weight: 400; letter-spacing: -.7px; color: #173F86; }
.crv-room-title { font-size: 15px; font-weight: 550; border-left: 1px solid #D9E0DB; padding-left: 20px; }
.crv-live { font-size: 12px; font-weight: 650; color: #647471; padding: 5px 9px; border-radius: 999px; background: #F1F4F2; }
.crv-live--on { color: #367260; background: #E8F4ED; }
.crv-sub { flex: 1 1 300px; color: #62716E; font-size: 12px; line-height: 1.5; }
.crv-as { display: flex; align-items: center; gap: 8px; font-weight: 550; font-size: 13px; color: #53645D; }
.crv-as select { font: inherit; color: #253C43; padding: 9px 28px 9px 12px; border: 1px solid #D5DFDA; border-radius: 10px; background: #F7F9F6; min-width: 160px; }
.crv-btn { font: inherit; font-size: 13px; font-weight: 650; padding: 9px 14px; border: 1px solid #D5DFDA; border-radius: 10px; color: #253C43; background: #FFFFFF; cursor: pointer; }
.crv-btn:hover { background: #EAF2FC; border-color: #A9C7E5; }
.crv-btn:focus-visible, .crv-as select:focus-visible { outline: 3px solid #4098F9; outline-offset: 3px; }
.crv-close { padding: 9px 12px; }
.crv-body { flex: 1; overflow: auto; padding: 20px 24px 24px; display: flex; justify-content: center; align-items: flex-start; }
.crv-room { font-family: 'Patrick Hand', cursive; display: block; width: 100%; max-width: calc((100vh - 120px) * 1180 / 820); height: auto; border-radius: 20px; background: #F1E7D7; box-shadow: 0 10px 30px rgba(62,53,39,.08); }
.crv-split { display: flex; flex-direction: column; gap: 24px; width: 100%; align-items: center; }
.crv-split figure { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.crv-split figure .crv-room { max-width: calc((100vh - 140px) * 1180 / 820); }
.crv-split figure .crv-room--crop { max-width: 700px; border: 1px solid #D2DCD2; }
.crv-split figcaption { font-size: 13px; font-weight: 600; margin: 4px 0 12px; color: #53635B; text-align: center; line-height: 1.5; }
.crv-msg { font-size: 18px; margin-top: 60px; max-width: 560px; text-align: center; line-height: 1.5; }
.crv-hand { font-family: Kalam, cursive; font-size: 16px; fill: #2B2A28; }
.crv-hand--bold { font-weight: 700; font-size: 18px; }
.crv-eyebrow { font-size: 13px; letter-spacing: 1.1px; font-weight: 400; fill: #625D55; }
.crv-display-title { font-size: 36px; letter-spacing: -.3px; font-weight: 400; fill: #2B2A28; }
.crv-display-detail { font-family: Kalam, cursive; font-size: 16px; font-weight: 400; fill: #625D55; }
.crv-note-title { font-family: Kalam, cursive; font-size: 15px; font-weight: 700; fill: #625D55; }
.crv-note-name { font-family: Kalam, cursive; font-size: 16px; font-weight: 400; fill: #2B2A28; }
.crv-cubby { font-size: 12px; font-weight: 400; fill: #514D45; }
.crv-section { font-family: Kalam, cursive; font-size: 16px; font-weight: 700; fill: #625D55; }
.crv-section--uni { fill: #776BA1; }
.crv-section-line { font-family: Kalam, cursive; font-size: 13px; font-weight: 400; fill: #8A80A8; }
.crv-table-title { font-size: 14px; fill: #65756C; }
.crv-empty { font-size: 24px; fill: #64786B; }
.crv-brand-caption { font-family: Kalam, cursive; font-size: 13px; fill: #736F63; }
.crv-run { font-family: 'Patrick Hand', cursive; font-weight: 400; fill: #AF491D; }
.crv-name > .crv-sketch-shape { fill: #FFFEFA; stroke: #625D55; stroke-width: 1.5; }
.crv-name > .crv-sketch-echo { stroke-opacity: .3; }
.crv-name text { font-family: Kalam, cursive; font-size: 13px; font-weight: 700; fill: #2B2A28; }
.crv-name--you > .crv-sketch-shape { fill: #E1ECFD; stroke: #7CAAD2; }
.crv-name--friend > .crv-sketch-shape { fill: #FCEEF1; stroke: #BD959F; }
.crv-name--tutor > .crv-sketch-shape { fill: #E1ECFD; stroke: #7799BC; }
.crv-clickable { cursor: pointer; }
.crv-clickable:hover, .crv-clickable:focus { outline: none; filter: drop-shadow(0 0 5px rgba(37,99,201,.65)); }
@media (max-width: 700px) { .crv-bar { padding: 12px; gap: 10px; } .crv-sub { order: 5; flex-basis: 100%; } .crv-as { margin-left: auto; } .crv-body { padding: 10px 8px 16px; } .crv-room { min-width: 660px; } .crv-body { justify-content: flex-start; } .crv-split { align-items: flex-start; } }

/* the room is alive (the iPad's hallLife): everyone bobs on their own beat; stickers move */
@keyframes crv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes crv-wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
@keyframes crv-spin { to { transform: rotate(360deg); } }
@keyframes crv-dots { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes crv-scribble { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(2px, 1px); } 50% { transform: translate(-1px, 2px); } 75% { transform: translate(1px, -1px); } }
@keyframes crv-ink { 0% { stroke-dashoffset: 10; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes crv-cheer { 0% { transform: translateY(8px) scale(0.4); opacity: 0; } 20% { transform: translateY(0) scale(1.15); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-14px) scale(1); opacity: 0; } }
@keyframes crv-flicker { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* Both loop boundaries are outside the window; the bird rests offscreen between passes. */
@keyframes crv-cloud-drift { from { transform: translate(-54px, 0); } to { transform: translate(338px, 0); } }
@keyframes crv-bird-flight {
  0% { transform: translate(-34px, 112px) rotate(-4deg); }
  10% { transform: translate(80px, 100px) rotate(-6deg); }
  20% { transform: translate(198px, 110px) rotate(5deg); }
  30%, 100% { transform: translate(328px, 87px) rotate(-4deg); }
}
@keyframes crv-bird-flap {
  0%, 100% { transform: rotate(-10deg) scaleY(1); }
  50% { transform: rotate(20deg) scaleY(.25); }
}
.crv-window-cloud { animation: crv-cloud-drift 72s linear infinite; }
.crv-window-bird { animation: crv-bird-flight 36s linear infinite; }
.crv-bird-wing { animation: crv-bird-flap .9s ease-in-out infinite; }
.crv-window-cloud, .crv-window-bird, .crv-bird-wing { transform-box: view-box; transform-origin: 0 0; }

.crv-person, .crv-bob { animation: crv-bob 2.6s ease-in-out infinite; }
.crv-person.crv-still { animation: none; }
.crv-wave { transform-box: fill-box; transform-origin: 50% 100%; animation: crv-wave 0.9s ease-in-out infinite; }
.crv-spin { transform-box: fill-box; transform-origin: center; animation: crv-spin 2.4s linear infinite; }
.crv-dots circle { animation: crv-dots 1.2s ease-in-out infinite; }
.crv-dots circle:nth-child(2) { animation-delay: 0.2s; }
.crv-dots circle:nth-child(3) { animation-delay: 0.4s; }
.crv-scribble { animation: crv-scribble 0.5s steps(4) infinite; }
.crv-ink { stroke-dasharray: 10; animation: crv-ink 1.8s linear infinite; }
.crv-cheer { transform-box: fill-box; transform-origin: center; animation: crv-cheer 1.8s ease-out forwards; }
.crv-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: crv-flicker 0.9s ease-in-out infinite; }

/* Wave at the table, walk to the doorway, then disappear. Timestamp-based delays survive live redraws. */
@keyframes crv-goodbye {
  0%, 29% { transform: translate(0, 0); opacity: 1; }
  90% { transform: translate(var(--leave-x), var(--leave-y)); opacity: 1; }
  100% { transform: translate(var(--leave-x), var(--leave-y)); opacity: 0; }
}
.crv-goodbye { animation: crv-goodbye 4.8s ease-in-out both; pointer-events: none; }
.crv-goodbye-hand { transform-box: fill-box; transform-origin: 10% 100%; animation: crv-wave 0.45s ease-in-out infinite; }

/* Coming in (Min 2026-10-10): walk in from the doorway, take the chair, say hi; a classmate says hi back. */
@keyframes crv-arrive {
  0% { transform: translate(var(--from-x), var(--from-y)); opacity: 0; }
  6% { opacity: 1; }
  40% { opacity: 1; }
  46%, 100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes crv-arrive-seat { 0%, 40% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes crv-hello { 0%, 48% { opacity: 0; transform: scale(.5); } 54% { opacity: 1; transform: scale(1.08); } 58%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes crv-hello-back { 0%, 60% { opacity: 0; transform: scale(.5); } 66% { opacity: 1; transform: scale(1.08); } 70%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes crv-byeback { 0%, 4% { opacity: 0; transform: scale(.5); } 9% { opacity: 1; transform: scale(1.08); } 12%, 40% { opacity: 1; transform: scale(1); } 48%, 100% { opacity: 0; } }
.crv-arrive { animation: crv-arrive 5.6s ease-in-out both; pointer-events: none; }
.crv-arrive-seat { animation: crv-arrive-seat 5.6s linear both; }
.crv-say { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; }
.crv-say-text { font-family: Kalam, cursive; font-weight: 700; fill: #2B2A28; }
.crv-hello { animation: crv-hello 5.6s ease-out both; }
.crv-hello--back { animation-name: crv-hello-back; }
.crv-byeback { animation: crv-byeback 4.8s ease-out both; }

/* The break corner: steam curls up, mugs lift for a sip, the coffee machine drips, two on the couch chat. */
@keyframes crv-steam { 0% { transform: translateY(2px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-7px); opacity: 0; } }
@keyframes crv-sip { 0%, 78%, 100% { transform: translate(0, 0) rotate(0deg); } 84%, 92% { transform: translate(-5px, -9px) rotate(-18deg); } }
@keyframes crv-drip { 0%, 40% { transform: translateY(0); opacity: 0; } 45% { opacity: 1; } 80% { transform: translateY(9px); opacity: 1; } 85%, 100% { transform: translateY(9px); opacity: 0; } }
@keyframes crv-lounge-chat { 0%, 100% { opacity: 0; } 15%, 55% { opacity: 1; } 65% { opacity: 0; } }
.crv-steam { animation: crv-steam 2.4s ease-out infinite; }
.crv-sip { transform-box: fill-box; transform-origin: 30% 100%; animation: crv-sip 5.2s ease-in-out infinite; }
.crv-drip { animation: crv-drip 1.6s ease-in infinite; }
.crv-lounge-chat { animation: crv-lounge-chat 6s ease-in-out infinite; }
.crv-person.crv-person--break { animation-duration: 3.4s; }
.crv-section--lounge { fill: #9A6447; }

/* Uni leans into the same notebook as the student; phases stay steady across socket redraws. */
@keyframes crv-uni-pop { 0% { transform: translateY(5px) scale(0.35); opacity: 0; } 65% { transform: translateY(-1px) scale(1.08); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes crv-uni-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.2px); } }
@keyframes crv-uni-pencil { 0%, 100% { transform: rotate(-5deg) translate(0, 0); } 50% { transform: rotate(4deg) translate(-1px, 0.5px); } }
@keyframes crv-uni-ink { 0%, 15% { stroke-dashoffset: 16; } 85%, 100% { stroke-dashoffset: 0; } }
.crv-uni-work { pointer-events: none; }
.crv-uni-pop { transform-box: fill-box; transform-origin: 35% 100%; animation: crv-uni-pop 400ms ease-out both; }
.crv-person.crv-person--uni-work, .crv-uni-nod { animation: crv-uni-nod 2.2s ease-in-out infinite; }
.crv-uni-pencil { transform-box: fill-box; transform-origin: 20% 80%; animation: crv-uni-pencil 1.1s ease-in-out infinite; }
.crv-uni-ink path { stroke-dasharray: 16; animation: crv-uni-ink 1.1s linear infinite; animation-delay: inherit; }

@media (prefers-reduced-motion: reduce) {
  .crv-person, .crv-person.crv-person--uni-work, .crv-bob, .crv-wave, .crv-spin, .crv-dots circle, .crv-scribble, .crv-ink, .crv-fire, .crv-cheer, .crv-goodbye, .crv-goodbye-hand, .crv-uni-pop, .crv-uni-nod, .crv-arrive, .crv-arrive-seat, .crv-steam, .crv-sip, .crv-drip, .crv-lounge-chat, .crv-uni-pencil, .crv-uni-ink path { animation: none; }
  .crv-window-cloud, .crv-window-bird, .crv-bird-wing { animation: none; }
  .crv-say { animation: none; opacity: 1; }
  .crv-window-bird { display: none; }
}

/* Ziggy, the teaching assistant (ziggy.js): bobs while walking, its speech is a little bigger than name tags. */
.ziggy-walking .ziggy-bob { animation: crv-bob 0.5s ease-in-out infinite; }
.ziggy-say { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .ziggy-walking .ziggy-bob { animation: none; } }