AI 개요

<div class="scene"><div class="label">QUESTION → SOURCES → ANSWER</div><div class="sources"><span>CARE GUIDE</span><span>SIZE CHART</span><span>MAKER FAQ</span></div><div class="merge">↓　↓　↓</div><div class="panel answer"><b>Which lamp fits a small desk?</b><p>Choose a compact base, then check the beam and measurements.</p><div class="refs"><i>1</i><i>2</i><i>3</i> Source links</div></div></div>

.scene{width:min(92%,680px);max-height:94%;font:700 clamp(10px,max(1.7vmin,1vw),15px)/1.3 sans-serif;color:var(--fg)}.label{font:900 clamp(10px,max(1.3vmin,1vw),12px)/1 sans-serif;letter-spacing:.12em;color:var(--accent)}.panel{background:var(--surface);border:1px solid var(--line);padding:clamp(8px,2vmin,18px)}.muted{color:var(--muted)}.accent{color:var(--accent)}.row{display:flex;align-items:center;gap:clamp(5px,1.2vmin,10px)}.pill{display:inline-block;padding:.35em .6em;border:1px solid var(--line);border-radius:30px}button{cursor:pointer;font:inherit}@media(min-width:700px){.scene{transform:scale(1.5)}}.sources{display:flex;gap:clamp(4px,1vmin,10px);margin-top:clamp(8px,2vmin,20px)}.sources span{flex:1;min-width:0;text-align:center;border:1px solid var(--line);padding:clamp(8px,2vmin,17px);background:var(--surface);font-size:clamp(10px,max(1.4vmin,1vw),12px);animation:sourceIn 4s infinite}.sources span:nth-child(2){animation-delay:.3s}.sources span:nth-child(3){animation-delay:.6s}.merge{text-align:center;color:var(--accent);line-height:1.5}.answer{border-color:var(--accent);animation:answerIn 4s infinite}.answer b{font-size:clamp(11px,max(2.4vmin,1vw),20px)}.answer p{margin:.4em 0}.refs{color:var(--muted);font-size:clamp(10px,max(1.3vmin,1vw),12px)}.refs i{display:inline-grid;place-items:center;width:1.5em;height:1.5em;margin-right:2px;background:var(--accent);color:white;font-style:normal}@keyframes sourceIn{0%,10%{opacity:.35;transform:translateY(4px)}25%,90%{opacity:1;transform:none}100%{opacity:.35}}@keyframes answerIn{0%,20%{opacity:.35}35%,90%{opacity:1}100%{opacity:.35}}