/* Useful little examples, with one clear invitation per object. */
.desk-object.object-photo { width:134px!important;height:116px!important; }
.object-photo .schedule-print { width:134px;padding:7px;rotate:-4deg;border-radius:2px; }
.mini-schedule { width:100%;table-layout:fixed;border-collapse:collapse;color:#274753;font:500 7px/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
.mini-schedule caption { padding:0 0 6px;text-align:left;font-size:10px;font-weight:650; }
.mini-schedule th,.mini-schedule td { padding:0;text-align:center;border:1px solid #dae1dc; }
.mini-schedule thead th { height:15px;font-size:7px;font-weight:600;border-top:0;background:#eef2e9; }
.mini-schedule thead td { width:25px;border:0; }
.mini-schedule tbody th { border-left:0;border-right:0;color:#597079;font:500 7px/1.2 ui-monospace,SFMono-Regular,monospace; }
.mini-schedule tbody td { height:23px;background:#f9faf4; }
.mini-schedule tbody .class-design { background:#dcd4ed;color:#51446c; }
.mini-schedule tbody .class-coding { background:#c8dfd5;color:#355d51; }
.mini-schedule tbody .class-lab { background:#eddbb7;color:#6d5530; }
.detail-schedule-margin { top:-29px;left:11px;color:#765575;white-space:nowrap;font:italic 15px/1.2 "Bradley Hand","Segoe Print",cursive;transform:rotate(-5deg);text-shadow:0 1px #fff,0 0 5px #fff; }
.detail-schedule-margin svg { position:absolute;left:81px;top:5px;width:43px;height:24px; }

/* A quiet ocean-focus cover in the existing music player. */
.mixtape-album > img { object-position:34% 55%; }
.mixtape-screen small { color:#bcd0c2;letter-spacing:.8px; }
.detail-music-margin { color:#376c65;transform:rotate(3deg); }

/* Four independently articulated legs share a planted-paw walking cycle.
   The route matches its stride; existing pause and visibility rules still apply. */
.desktop-walkway .object-cat { width:92px;height:68px;animation-name:cat-right-route;animation-duration:var(--cat-route-duration,54s);animation-delay:var(--cat-route-delay,-17s); }
.ink-cat { width:92px;height:68px; }
.cat-rig.cat-sprite { inset:auto;left:0;top:-11px;width:92px;height:92px;overflow:hidden;animation:none; }
.cat-walk,.cat-turn { position:absolute;inset:0; }
.cat-sprite img { display:block;width:400%;height:200%;max-width:none;pointer-events:none;user-select:none; }
.cat-walk { transform:translateY(-3px);animation:cat-walk-visible var(--cat-route-duration,54s) steps(1,end) var(--cat-route-delay,-17s) infinite; }
.cat-gait { display:block;width:100%;height:100%;overflow:visible; }
.cat-gait-far-fore,.cat-gait-far-hind { filter:brightness(.78); }
.cat-turn { opacity:0;clip-path:inset(0 0 0 3%);transform:translateY(-3px) scale(.96);transform-origin:50% 85%;animation:cat-turn-visible var(--cat-route-duration,54s) steps(1,end) var(--cat-route-delay,-17s) infinite; }
.cat-turn > img { animation:cat-photographic-turn var(--cat-route-duration,54s) steps(1,end) var(--cat-route-delay,-17s) infinite; }
/* Change facing only when the turning atlas has reached its final pose.
   Discrete steps prevent the old scaleX interpolation through a flat cat. */
.cat-facing { animation:cat-sprite-facing var(--cat-route-duration,54s) steps(1,end) var(--cat-route-delay,-17s) infinite; }
.ink-cat .cat-shadow { left:10px;bottom:-1px;width:70px;height:4px;opacity:.45; }
@keyframes cat-sprite-facing {
 0% { transform:scaleX(1); }
 54% { transform:scaleX(-1); }
 100% { transform:scaleX(1); }
}
@keyframes cat-walk-visible {
 0%,44%,94%,100% { opacity:0; }
 4%,54% { opacity:1; }
}
@keyframes cat-turn-visible {
 0%,44%,94%,100% { opacity:1; }
 4%,54% { opacity:0; }
}
/* Park, glance toward the visitor, step around, then resume the route.
   The second turn is the same physical sequence facing the other way. */
@keyframes cat-photographic-turn {
 0%,46%,54%,96%,100% { transform:translate(0,0); }
 46.25%,96.25% { transform:translate(-25%,0); }
 46.5%,96.5% { transform:translate(-50%,0); }
 46.75%,96.75% { transform:translate(-75%,0); }
 47%,97% { transform:translate(0,-50%); }
 47.25%,97.25% { transform:translate(-25%,-50%); }
 47.5%,97.5% { transform:translate(-50%,-50%); }
 47.75%,97.75% { transform:translate(-75%,-50%); }
}

/* Equal travel windows give both directions the same walking speed. */
@keyframes cat-right-route {
 0%,4% { transform:translateX(0); }
 44%,54% { transform:translateX(calc(-1 * min(480px,max(160px,(100vw - 510px)/2)))); }
 94%,100% { transform:translateX(0); }
}

/* Keep the header attached to the clip while its outer node owns dragging. */
.desk-object.object-glance { width:96px;height:73px; }
.desk-object:is(.object-glance,.object-celebrate)::after { content:none; }
.object-glance .comedy-clip { padding-top:17px; }
.object-glance .comedy-clip::before { content:none; }
.object-glance .comedy-clip > img,
.object-glance .comedy-clip > video { top:17px;height:calc(100% - 20px); }
.clip-titlebar { position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:5px;height:17px;padding:0 6px;border-bottom:1px solid #90a3a63b;color:#36515d;font:600 8px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;white-space:nowrap; }
.clip-titlebar i { width:4px;height:4px;border-radius:50%;background:#d79f82;box-shadow:inset 0 1px #fff8; }
.clip-drag-cue { position:absolute;bottom:calc(100% + 13px);right:2px;display:flex;flex-direction:row-reverse;align-items:center;gap:3px;white-space:nowrap;color:#965b40;font:italic 15px/1.2 "Bradley Hand","Segoe Print",cursive;transform:rotate(5deg);text-shadow:0 1px #fff,0 0 5px #fff;pointer-events:none; }
.clip-drag-cue svg { width:18px;height:17px;margin-bottom:-17px;transform:rotate(160deg);fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round; }

/* Ink in the margin, using the same handwriting as "keep that thought". */
.game-create-cue { position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%) rotate(-4deg);width:max-content;min-height:32px;padding:4px 8px;border:0;border-radius:3px;background:transparent;color:#27485a;box-shadow:none;font:italic 16px/1.2 "Bradley Hand","Segoe Print",cursive;text-shadow:0 1px #fff,0 0 5px #fff;white-space:nowrap;cursor:pointer; }
.game-create-cue svg { position:absolute;right:-27px;top:-7px;width:47px;height:24px;transform:scaleY(-1);fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:translate 160ms ease-out; }
.game-create-cue:focus-visible { outline:2px solid #357ca0;outline-offset:4px; }
.game-create-cue:active { translate:0 1px; }
@media(hover:hover) and (pointer:fine) {
 .game-create-cue:hover { color:#126181; }
 .game-create-cue:hover svg { translate:1px -1px; }
}
@media(max-width:899px) {
 .clip-drag-cue { display:none; }
 #playground #space > .overlay[data-type="game"][data-size] { margin-bottom:44px; }
 .game-create-cue { min-height:36px; }
}
@media(min-width:900px) and (max-width:1150px) {
 .clip-drag-cue { bottom:calc(100% + 2px); }
}
@media(max-width:599px) {
 #playground > .object-space > .object-glance { width:76px;height:58px; }
 .clip-titlebar { font-size:7px;height:14px;padding-inline:5px;gap:4px; }
 .object-glance .comedy-clip > img,
 .object-glance .comedy-clip > video { top:14px;height:calc(100% - 17px); }
 .game-create-cue { min-height:44px; }
 #playground #space > .overlay.selected[data-type="game"][data-size] { margin-bottom:54px; }
}
@media(prefers-reduced-motion:reduce) { .game-create-cue svg { transition:none; } }
html[data-motion="paused"] .game-create-cue svg { transition:none; }