body{margin:0;background:#121212;color:#f0f0f0;font-family:sans-serif}.app{display:flex;flex-direction:column;height:100vh}.header{text-align:center;padding:1rem;font-size:1.5rem;font-weight:700}.main{display:flex;flex:1;overflow:hidden}.left{flex:2;display:flex;flex-direction:column;padding:1rem;min-width:0}.img-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}.img-wrap img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}.progress-bar{width:100%;height:4px;background:#333;border-radius:2px;overflow:hidden;margin-top:.5rem;flex-shrink:0}.progress-fill{height:100%;background:#4dabf7;animation:fill 10s linear}@keyframes fill{0%{width:0%}to{width:100%}}.right{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;padding:1rem;overflow-y:auto;border-left:1px solid #333;min-width:0}.thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:border-color .15s}.thumb:hover{border-color:#888}.thumb.active{border-color:#4dabf7}@media(max-width:768px){.main{flex-direction:column}.right{grid-template-columns:repeat(3,1fr);border-left:none;border-top:1px solid #333}}