/* Ideas on the go: a fleeting spark becomes one readable task. */
.sc-term-pain { display: grid; place-items: end center; }
.sc-term-laptop { width: 116px; height: 66px; border: 3px solid var(--ink-muted); border-bottom-width: 8px; border-radius: 8px; background: var(--surface-elev); }
.sc-term-laptop::after { content: ''; position: absolute; left: calc(50% - 72px); bottom: 13px; width: 144px; height: 7px; border-radius: 0 0 8px 8px; background: var(--ink-muted); }
.sc-term-idea { position: absolute; right: 19%; top: 4%; color: var(--accent); font-size: 30px; opacity: 0; }
.sc-term-fade { position: absolute; right: 8%; top: 25%; width: 52px; height: 8px; border-radius: 4px; background: var(--line); opacity: 0; }
.sc-term[data-phase="0"] .sc-term-idea { animation: sc-term-vanish 1.8s var(--ease) infinite; }
.sc-term[data-phase="0"] .sc-term-fade { animation: sc-term-vanish 1.8s var(--ease) .25s infinite; }
.sc-term-result { display: flex; align-items: center; justify-content: center; gap: 16px; }
.sc-term-wave { display: flex; height: 44px; align-items: center; gap: 3px; }
.sc-term-wave i { width: 4px; height: 19px; border-radius: 3px; background: var(--accent); }
.sc-term-task { display: grid; width: 118px; gap: 8px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-elev); opacity: 0; transform: translateX(-18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.sc-term-task b { width: 72%; height: 8px; border-radius: 4px; background: var(--ink); opacity: .75; }
.sc-term-task i { height: 6px; border-radius: 3px; background: var(--line); }
.sc-term-task i:last-child { width: 60%; }
.sc-term[data-phase="2"] .sc-term-task { opacity: 1; transform: none; }
.sc-term[data-phase="2"] .sc-term-wave i { animation: sc-term-speak .65s var(--ease) 2; }
.sc-term[data-phase="2"] .sc-term-wave i:nth-child(2) { animation-delay: .1s; }
.sc-term[data-phase="2"] .sc-term-wave i:nth-child(3) { animation-delay: .2s; }
@keyframes sc-term-vanish { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px) scale(1.1); } }
@keyframes sc-term-speak { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1.55); } }
@media (prefers-reduced-motion: reduce) { .sc-term-idea,.sc-term-fade { opacity: .35; } .sc-term-task { opacity: 1; transform: none; } .sc-term * { animation: none !important; transition: none !important; } }