/* Long-form loop explainer. No build step; no external assets. */
#lv-player{position:relative;margin:18px 0 8px;border:1px solid #1a2342;border-radius:16px;background:#05080d;overflow:hidden;box-shadow:0 30px 80px -50px #22d3ee}
#lv-player *{box-sizing:border-box}
.lv-screen{position:relative;aspect-ratio:16/9;background:radial-gradient(circle at 50% 40%,#0b1730 0%,#05080d 70%);overflow:hidden}
.lv-stage{position:absolute;inset:0;padding:clamp(14px,2.4vw,30px) clamp(14px,2.4vw,30px) 18%;display:flex;flex-direction:column;justify-content:center;color:#eef1f8}
.lv-kicker{font:700 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;text-transform:uppercase;color:#22d3ee;margin:0 0 8px}
.lv-title{font-size:clamp(20px,3.2vw,40px);line-height:1.08;letter-spacing:-.02em;font-weight:800;margin:0 0 10px;max-width:22ch}
.lv-sub{font-size:clamp(12px,1.35vw,17px);line-height:1.5;color:#a3adc8;max-width:62ch;margin:0}
.lv-big{font:800 clamp(34px,7vw,86px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.04em;color:#fff;margin:0 0 6px}
.lv-red{color:#ff6b78}
.lv-green{color:#5ee0a8}
.lv-cyan{color:#22d3ee}
.lv-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.lv-code > span{display:block}
@keyframes lvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lv-code{border:1px solid #1a2342;border-radius:10px;background:#080d16;padding:12px 14px;font:clamp(10px,1.05vw,13px)/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#c6cfe2;white-space:pre;overflow:auto;max-height:46vh}
.lv-code .ln{color:#4b5878;user-select:none;display:inline-block;width:2.2em}
.lv-code .hit{background:#3a1119;border-left:3px solid #ff5a67;display:block;margin-left:-14px;padding-left:11px}
.lv-code .ok{background:#0c2b1d;border-left:3px solid #3fb68b;display:block;margin-left:-14px;padding-left:11px}
.lv-code .dim{color:#6b7694}

.lv-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lv-col{border:1px solid #1a2342;border-radius:10px;padding:12px 14px;background:#0a101c}
.lv-col h4{margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7c86a6}
.lv-col.bad{border-left:4px solid #ff5a67}
.lv-col.good{border-left:4px solid #3fb68b}
.lv-col ul{margin:0;padding-left:16px;font-size:clamp(10px,1.05vw,13px);line-height:1.5;color:#cfd6ea}
.lv-col li{margin:4px 0}
.lv-col .lv-note{color:#7c86a6;font-size:11px;margin-top:8px}

.lv-loop{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:6px}
.lv-node{border:1px solid #223052;border-radius:10px;padding:10px 8px;text-align:center;background:#0a101c;transition:all .45s ease;opacity:.55}
.lv-node b{display:block;font:800 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:#eef1f8}
.lv-node span{display:block;margin-top:4px;font-size:10px;color:#8b96b4;line-height:1.3}
.lv-node.on{opacity:1;border-color:#22d3ee;background:#0b2230;box-shadow:0 0 0 1px #22d3ee,0 0 30px -8px #22d3ee;transform:translateY(-3px)}
.lv-node.done{border-color:#2f6e55;background:#0a1a14;opacity:.9}
.lv-node.done b{color:#5ee0a8}

.lv-arrow{position:relative;height:26px;margin:10px 0 0;display:flex;align-items:center;gap:6px;color:#2b3760;font:700 11px/1 ui-monospace,monospace}
.lv-arrow i{display:block;height:1px;flex:1;background:linear-gradient(90deg,transparent,#22d3ee,transparent);background-size:200% 100%;animation:lv-flow 2.4s linear infinite}
@keyframes lv-flow{to{background-position:-200% 0}}

.lv-findings{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.lv-findings li{border:1px solid #2a1a22;border-left:3px solid #ff5a67;background:#160c10;padding:7px 10px;border-radius:6px;font:11px/1.4 ui-monospace,monospace;color:#e9c7cd}
.lv-findings li b{color:#ff8b95}

.lv-chain{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.lv-block{border:1px solid #2b3760;border-radius:8px;background:#0a101c;padding:8px 10px;font:10px/1.4 ui-monospace,monospace;color:#8b96b4;transition:all .4s}
.lv-block.on{border-color:#22d3ee;color:#fff;background:#0b2230}
.lv-block b{display:block;color:#22d3ee;font-size:10px;letter-spacing:.1em}
.lv-link{color:#2b3760;font-size:18px}
.lv-link.on{color:#3fb68b}

.lv-anchor{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.lv-rep{border:1px solid #223052;border-radius:10px;padding:10px;background:#0a101c;text-align:center;transition:all .4s}
.lv-rep b{display:block;font:800 10px/1.2 ui-monospace,monospace;color:#8b96b4;letter-spacing:.06em}
.lv-rep span{display:block;margin-top:6px;font:800 18px/1 ui-monospace,monospace;color:#3a4566}
.lv-rep.signed{border-color:#3fb68b;background:#0a1a14}
.lv-rep.signed span{color:#5ee0a8}
.lv-quorum{margin-top:12px;font:800 clamp(16px,2vw,24px)/1 ui-monospace,monospace;color:#3fb68b;letter-spacing:.04em}

.lv-terminal{border:1px solid #1a2342;border-radius:10px;background:#05080d;padding:12px 14px;font:clamp(10px,1.05vw,13px)/1.7 ui-monospace,monospace;color:#9fe7c7;white-space:pre-wrap;min-height:30vh;max-height:46vh;overflow:auto}
.lv-terminal .p{color:#22d3ee}
.lv-terminal .bad{color:#ff6b78}
.lv-terminal .good{color:#5ee0a8}

.lv-table{width:100%;border-collapse:collapse;font-size:clamp(10px,1.05vw,13px);margin-top:6px}
.lv-table th,.lv-table td{border:1px solid #1a2342;padding:7px 9px;text-align:left;vertical-align:top}
.lv-table th{color:#8b96b4;font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:#0a101c}
.lv-table td{color:#cfd6ea}

.lv-price{display:flex;align-items:baseline;gap:14px;margin:4px 0 10px}
.lv-price b{font:800 clamp(34px,6vw,68px)/1 ui-monospace,monospace;color:#fff;letter-spacing:-.04em}
.lv-price span{color:#a3adc8;font-size:clamp(11px,1.2vw,15px)}

/* presenter */
.lv-presenter{position:absolute;right:16px;bottom:70px;width:clamp(76px,10vw,124px);z-index:4;pointer-events:none;filter:drop-shadow(0 10px 20px #000a)}
.lv-presenter svg{display:block;width:100%;height:auto}
.lv-presenter .lv-blink{animation:lv-blink 5.2s infinite}
@keyframes lv-blink{0%,96%,100%{transform:scaleY(1)}98%{transform:scaleY(.08)}}
.lv-presenter .lv-mouth{transform-origin:center;animation:lv-idle 3.6s ease-in-out infinite}
.lv-presenter.speaking .lv-mouth{animation:lv-talk .28s ease-in-out infinite alternate}
@keyframes lv-idle{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(.5)}}
@keyframes lv-talk{from{transform:scaleY(.25)}to{transform:scaleY(1.15)}}
.lv-presenter .lv-tag{position:absolute;left:50%;transform:translateX(-50%);bottom:-15px;white-space:nowrap;font:700 8px/1 ui-monospace,monospace;letter-spacing:.08em;color:#6b7694;text-transform:uppercase}

/* captions + chrome */
.lv-caption{position:absolute;left:0;right:0;bottom:0;padding:10px clamp(14px,3vw,40px) 12px;background:linear-gradient(0deg,#000d 0%,#0009 55%,transparent 100%);z-index:5;min-height:14%}
.lv-caption p{margin:0 0 0 0;font-size:clamp(11px,1.35vw,16px);line-height:1.45;color:#fff;text-shadow:0 1px 3px #000;max-width:96ch}
.lv-caption p span.hl{color:#22d3ee}
.lv-controls{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#070b12;border-top:1px solid #141d33;flex-wrap:wrap}
.lv-controls button{appearance:none;border:1px solid #24304f;background:#0d1524;color:#eef1f8;border-radius:7px;padding:6px 10px;font:700 11px/1.2 inherit;cursor:pointer}
.lv-controls button:hover{border-color:#22d3ee;color:#fff}
.lv-controls button.on{background:#22d3ee;color:#04121a;border-color:#22d3ee}
.lv-time{font:11px/1 ui-monospace,monospace;color:#8b96b4;min-width:92px}
.lv-bar{flex:1;min-width:120px;height:6px;border-radius:999px;background:#16203a;overflow:hidden;cursor:pointer}
.lv-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#5ee0a8);transition:width .18s linear}
.lv-chapters{display:flex;gap:6px;padding:0 12px 11px;background:#070b12;overflow-x:auto}
.lv-chapters button{flex:0 0 auto;border:1px solid #1a2342;background:transparent;color:#8b96b4;border-radius:999px;padding:5px 9px;font:10px/1.2 ui-monospace,monospace;cursor:pointer;white-space:nowrap}
.lv-chapters button.on{color:#04121a;background:#22d3ee;border-color:#22d3ee}
.lv-start{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#000b;z-index:8;cursor:pointer;text-align:center;padding:20px}
.lv-start b{font-size:clamp(16px,2vw,24px);color:#fff}
.lv-start span{font-size:clamp(11px,1.2vw,14px);color:#a3adc8;max-width:52ch;line-height:1.5}
.lv-start .lv-play{width:64px;height:64px;border-radius:50%;border:2px solid #22d3ee;display:flex;align-items:center;justify-content:center;color:#22d3ee;font-size:24px;background:#0b2230}
.lv-start.hide{display:none}
.lv-badge{position:absolute;right:12px;top:12px;z-index:6;font:700 9px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#8b96b4;background:#000a;border:1px solid #24304f;border-radius:999px;padding:5px 8px}
@media(max-width:760px){
  .lv-screen{aspect-ratio:4/5}
  .lv-loop{grid-template-columns:repeat(2,1fr)}
  .lv-anchor{grid-template-columns:repeat(2,1fr)}
  .lv-cols{grid-template-columns:1fr}
  .lv-presenter{width:66px;bottom:74px;right:10px}
  .lv-chapters{display:none}
}
@media(prefers-reduced-motion:reduce){
  #lv-player *{animation:none!important;transition:none!important}
}