/* Projects: scattered reminders gather inside one visible context. */
.sc-ctx-pain { overflow: hidden; }
.sc-ctx-note { position: absolute; width: 54px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-elev); box-shadow: 0 7px 16px rgba(var(--shadow),.08); }
.sc-ctx-note::after { content: ''; position: absolute; left: 9px; top: 10px; width: 30px; height: 5px; border-radius: 3px; background: var(--line); }
.sc-ctx-note:nth-child(1) { left: 6%; top: 12%; transform: rotate(-9deg); }
.sc-ctx-note:nth-child(2) { right: 8%; top: 4%; transform: rotate(8deg); }
.sc-ctx-note:nth-child(3) { left: 34%; bottom: 2%; transform: rotate(4deg); }
.sc-ctx-note:nth-child(4) { right: 22%; bottom: 14%; transform: rotate(-5deg); }
.sc-ctx[data-phase="0"] .sc-ctx-note { animation: sc-ctx-wander 1.8s var(--ease) infinite alternate; }
.sc-ctx[data-phase="0"] .sc-ctx-note:nth-child(2),.sc-ctx[data-phase="0"] .sc-ctx-note:nth-child(4) { animation-delay: .4s; }
.sc-ctx-result { display: grid; place-items: center; }
.sc-ctx-folder { position: relative; display: grid; width: 142px; gap: 8px; padding: 24px 15px 14px; border: 2px solid rgba(var(--green-rgb),.5); border-radius: 12px; background: var(--surface-elev); }
.sc-ctx-folder::before { content: ''; position: absolute; left: -2px; top: -12px; width: 62px; height: 18px; border: 2px solid rgba(var(--green-rgb),.5); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--surface-elev); }
.sc-ctx-folder b { width: 58%; height: 8px; border-radius: 4px; background: var(--ink); opacity: .7; }
.sc-ctx-folder i { height: 7px; border-radius: 4px; background: rgba(var(--green-rgb),.2); opacity: 0; transform: translateX(-10px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.sc-ctx-folder i:nth-of-type(2) { transition-delay: .12s; }
.sc-ctx-folder i:nth-of-type(3) { transition-delay: .24s; }
.sc-ctx[data-phase="2"] .sc-ctx-folder i { opacity: 1; transform: none; }
@keyframes sc-ctx-wander { from { transform: translateY(-4px) rotate(-4deg); } to { transform: translateY(5px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .sc-ctx-folder i { opacity: 1; transform: none; } .sc-ctx * { animation: none !important; transition: none !important; } }