/* Small illustrations used on project cards and project headers. Pure CSS, theme aware. */
.viz { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem; background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 14%, transparent), color-mix(in srgb, var(--fg) 4%, transparent)); border: 1px solid var(--edge2); }
.viz i, .viz b, .viz em { display: block; font-style: normal; }
.viz:before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -15%; top: -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 40%, transparent), transparent 70%); pointer-events: none; }
.viz > * { position: relative; }

/* quiz: the real play screen, a progress bar over one question card with four stacked answers */
.v-quiz { gap: .6rem; padding: .9rem; }
.v-quiz .top { display: flex; align-items: center; gap: .6rem; }
.v-quiz .x { width: .7rem; height: .7rem; flex: none; background: linear-gradient(45deg, transparent 44%, var(--mut) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--mut) 44% 56%, transparent 56%); }
.v-quiz .bar { flex: 1; height: .5rem; border-radius: 99px; background: var(--edge2); overflow: hidden; }
.v-quiz .bar i { height: 100%; width: 100%; background: var(--acc); transform-origin: left; animation: tick 5s linear infinite; }
.v-quiz .cnt { font: 700 .65rem var(--f-m); color: var(--mut); }
.v-quiz .card { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; padding: .8rem; border-radius: 14px; background: var(--glass2); border: 1px solid var(--edge2); }
.v-quiz .chip { width: 34%; height: .9rem; border-radius: 99px; background: color-mix(in srgb, var(--acc) 28%, transparent); }
.v-quiz .ql { display: flex; flex-direction: column; gap: .3rem; }
.v-quiz .ql i { height: .5rem; width: 90%; border-radius: 99px; background: color-mix(in srgb, var(--fg) 55%, transparent); }
.v-quiz .ql i.s { width: 55%; background: color-mix(in srgb, var(--fg) 28%, transparent); }
.v-quiz .rows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .35rem; }
.v-quiz .rows b { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; gap: .6rem; padding: 0 .6rem; border-radius: 10px; background: var(--bg); border: 1.5px solid var(--edge2); border-bottom-width: 3px; animation: dim 5s ease-in-out infinite; }
.v-quiz .rows em { flex: none; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 6px; background: var(--glass2); font: 700 .6rem var(--f-m); color: var(--mut); }
.v-quiz .rows s { flex: 1; height: .4rem; max-width: 55%; border-radius: 99px; background: color-mix(in srgb, var(--fg) 45%, transparent); text-decoration: none; }
.v-quiz .rows b:nth-child(2) s { max-width: 70%; } .v-quiz .rows b:nth-child(3) s { max-width: 38%; } .v-quiz .rows b:nth-child(4) s { max-width: 48%; }
.v-quiz .rows b.ok { animation-name: win; }
.v-quiz .rows b.ok:after { content: "\2713"; position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); font: 800 .9rem var(--f-d); color: var(--acc); opacity: 0; animation: check 5s ease-in-out infinite; }
@keyframes dim { 0%, 45% { opacity: 1; } 55%, 85% { opacity: .35; } 100% { opacity: 1; } }
@keyframes win { 0%, 45% { border-color: var(--edge2); background: var(--bg); } 55%, 85% { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--bg)); } 100% { border-color: var(--edge2); background: var(--bg); } }
@keyframes check { 0%, 45% { opacity: 0; } 55%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tick { from { transform: scaleX(1); } to { transform: scaleX(.12); } }

/* calendar */
.v-cal .hd { display: flex; gap: .5rem; } .v-cal .hd span { height: .55rem; border-radius: 99px; background: color-mix(in srgb, var(--fg) 45%, transparent); width: 28%; } .v-cal .hd span + span { width: 12%; background: color-mix(in srgb, var(--fg) 20%, transparent); }
.v-cal .g { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(5, 1fr); gap: .3rem; }
.v-cal .g i { border-radius: 6px; background: var(--glass2); border: 1px solid var(--edge2); }
.v-cal .g i.e { background: var(--acc); border-color: var(--acc); }
.v-cal .g i.h { background: color-mix(in srgb, var(--acc) 22%, transparent); border-color: color-mix(in srgb, var(--acc) 55%, transparent); }

/* chat */
.v-chat { justify-content: center; gap: .45rem; }
.v-chat .bot:not(.dots) i:nth-child(2) { display: none; }
.v-chat .b:not(.dots) { width: 68%; }
.v-chat .b { max-width: 72%; padding: .5rem .7rem; border-radius: 14px; display: flex; flex-direction: column; gap: .3rem; }
.v-chat .b i { height: .45rem; border-radius: 99px; width: 100%; background: color-mix(in srgb, var(--fg) 50%, transparent); }
.v-chat .b i.s { width: 55%; }
.v-chat .me { align-self: flex-end; background: var(--acc); border-bottom-right-radius: 4px; } .v-chat .me i { background: rgba(255, 255, 255, .85); }
.v-chat .bot { align-self: flex-start; background: var(--glass2); border: 1px solid var(--edge2); border-bottom-left-radius: 4px; }
.v-chat .dots { flex-direction: row; gap: .3rem; padding: .55rem .8rem; }
.v-chat .dots em { width: .4rem; height: .4rem; border-radius: 50%; background: var(--mut); animation: dot 1.2s ease-in-out infinite; } .v-chat .dots em:nth-child(2) { animation-delay: .15s; } .v-chat .dots em:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-.25rem); opacity: .5; } }

/* bars */
.v-bars .top { display: flex; justify-content: space-between; align-items: center; } .v-bars .t { height: .55rem; width: 30%; border-radius: 99px; background: color-mix(in srgb, var(--fg) 45%, transparent); } .v-bars .amt { font: 700 .8rem var(--f-m); color: var(--acc); }
.v-bars .cols { flex: 1; display: flex; align-items: flex-end; gap: .3rem; }
.v-bars .cols i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(var(--acc), color-mix(in srgb, var(--acc) 35%, transparent)); transform-origin: bottom; animation: grow 1.2s var(--ease) both; animation-delay: var(--d); }
.v-bars .cols i:nth-child(odd) { opacity: .65; }
@keyframes grow { from { transform: scaleY(.05); } }

/* bits */
.v-bits .g { flex: 1; display: grid; grid-template-columns: repeat(9, 1fr); gap: .15rem; font: 500 .72rem var(--f-m); align-content: space-around; text-align: center; color: var(--mut); }
.v-bits .g i.l { color: var(--acc); font-weight: 700; }
.v-bits .msg { display: flex; align-items: center; gap: .6rem; font: 500 .7rem var(--f-m); color: var(--mut); }
.v-bits .msg .k { flex: 1; height: .4rem; border-radius: 99px; background: repeating-linear-gradient(90deg, var(--acc) 0 6px, transparent 6px 10px); opacity: .8; }

/* equalizer */
.v-eq { justify-content: flex-end; }
.v-eq .e { flex: 1; display: flex; align-items: flex-end; gap: 3px; }
.v-eq .e i { flex: 1; height: var(--m); border-radius: 3px 3px 0 0; background: linear-gradient(var(--acc), color-mix(in srgb, var(--acc) 30%, transparent)); transform-origin: bottom; animation: bounce var(--s) ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes bounce { from { transform: scaleY(.18); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) { .viz *, .viz i { animation: none !important; } }

/* keep the quiz rows readable on narrow screens */
.v-quiz { min-height: 15rem; }
.v-quiz .rows b { min-height: 1.7rem; }
@media (max-width: 860px) {
    .v-quiz { min-height: 20rem; padding: 1rem; gap: .7rem; }
    .v-quiz .card { padding: .9rem; gap: .6rem; }
    .v-quiz .rows { gap: .45rem; }
    .v-quiz .rows b { min-height: 2.3rem; padding: 0 .8rem; gap: .8rem; }
    .v-quiz .rows em { width: 1.45rem; height: 1.45rem; font-size: .7rem; }
    .v-quiz .rows s { height: .5rem; }
    .v-quiz .ql i { height: .55rem; }
}