:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#e4e6eb;background-color:#1a1d29;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;background-color:#1a1d29}h1{font-size:clamp(2em,5vw,3.2em);line-height:1.1}button{border-radius:4px;border:none;padding:6px 16px;font-size:13px;font-weight:400;font-family:inherit;cursor:pointer;transition:box-shadow .2s ease,transform .2s ease;box-sizing:border-box;min-height:32px;line-height:1.2;white-space:nowrap}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #0000004d}button:focus,button:focus-visible{outline:2px solid #5b8def;outline-offset:-2px}@keyframes pulse-red{0%,to{background-color:#5b8def}50%{background-color:#e74c3c}}.flash-loop-end{animation:pulse-red 1.5s ease-in-out infinite}@media(min-width:769px){.timeline-container .loop-boundary-controls,.timeline-container .loop-nudge-controls,.timeline-container .loop-time-display,.timeline-container .loop-playback-options,.timeline-container .loop-additional-controls,.timeline-controls .mobile-only-save-loop,.timeline-controls .mobile-only-loop-enable{display:none!important}.timeline-container .loop-controls-section{display:flex!important;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}}@media(max-width:768px){.loop-boundary-controls,.loop-nudge-controls,.loop-time-display,.loop-playback-options,.loop-additional-controls,.mobile-only-save-loop,.mobile-only-loop-enable{display:flex!important}.mobile .app-container main{padding:60px 0 0!important;gap:0!important}body{padding-bottom:0!important}.video-input-bar{width:100%;padding:12px 16px;margin:0!important;background:#1a1d29;border-bottom:1px solid #2d3142}.video-input-bar>div{gap:8px}.video-input-bar input{font-size:16px;flex:1}.video-input-bar button{font-size:14px;font-weight:600;white-space:nowrap}.timeline-container{margin:0!important;max-width:100%!important;width:100%!important;padding:0!important}.loop-overview-section{width:100%!important;padding:12px 16px!important;margin:0!important;background:#1a1d29;border-bottom:1px solid #2d3142;box-sizing:border-box!important}.loop-overview-section>div:first-child{padding:0!important;margin:0!important}.loop-overview-section>div:last-child{margin:0!important;width:100%!important}.player-container{width:100%!important;margin:0!important;padding:0 16px!important;background:#000;box-sizing:border-box!important}.main-timeline{margin:0!important;padding:12px 16px!important;background:#1a1d29;border-bottom:1px solid #2d3142;border-radius:0!important;width:100%!important;box-sizing:border-box!important}.timeline-controls{display:flex!important;flex-wrap:wrap;gap:6px!important;padding:10px 16px;margin:0!important;background:#1a1d29;border-bottom:1px solid #2d3142;width:100%;box-sizing:border-box}.timeline-controls button{min-height:44px;padding:10px 14px!important;font-size:13px!important;flex:0 0 auto}.timeline-controls button:nth-child(1),.timeline-controls button:nth-child(2){font-size:16px!important;padding:10px 12px!important;min-width:44px}.timeline-controls span{display:none!important}.loop-boundary-controls{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding:10px 16px;margin:0!important;width:100%;box-sizing:border-box;background:#1a1d29;border-bottom:1px solid #2d3142}.loop-boundary-controls button{min-height:44px;font-size:14px;font-weight:600}.loop-nudge-controls{display:grid!important;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-areas:"start-left start-right end-left end-right";gap:8px;padding:10px 16px;margin:0!important;width:100%;box-sizing:border-box;background:#1a1d29;border-bottom:1px solid #2d3142}.loop-nudge-controls button{min-height:44px;font-size:18px}.loop-nudge-controls button:nth-child(1){grid-area:start-left}.loop-nudge-controls button:nth-child(2){grid-area:start-right}.loop-nudge-controls button:nth-child(3){grid-area:end-left}.loop-nudge-controls button:nth-child(4){grid-area:end-right}.loop-time-display{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding:10px 16px;margin:0!important;width:100%;box-sizing:border-box;background:#1a1d29;border-bottom:1px solid #2d3142}.loop-time-display>div{display:flex;align-items:center;justify-content:center;gap:6px}.loop-time-display input[type=number]{font-size:16px!important;min-height:44px!important;width:100px!important;text-align:center;padding:8px 10px!important}.loop-time-display label{font-size:14px;font-weight:600}.loop-playback-options{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding:10px 16px;margin:0!important;width:100%;box-sizing:border-box;background:#1a1d29;border-bottom:1px solid #2d3142}.loop-playback-options button{min-height:44px;font-size:14px;font-weight:600}.loop-additional-controls{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding:10px 16px;margin:0!important;width:100%;box-sizing:border-box;background:#1a1d29;border-bottom:1px solid #2d3142}.loop-additional-controls button{min-height:44px;font-size:13px;font-weight:600}.loop-controls-section{display:none!important}.playlist-sidebar{position:static!important;width:100%!important;height:auto!important;max-height:none!important;border-left:none!important;border-top:2px solid #2d3142;border-radius:0;overflow-y:visible}.playlist-logo-container,.instructions-section{display:none!important}button{min-height:44px;min-width:44px}button:active{transform:scale(.97);opacity:.9}.saved-loops-list{padding:12px 16px}.saved-loop-item{padding:12px;margin-bottom:10px}.saved-loop-item button{min-height:40px;font-size:12px}}@media(max-width:480px){.video-input-bar,.loop-overview-section,.timeline-controls,.loop-boundary-controls,.loop-nudge-controls,.loop-time-display,.loop-playback-options,.loop-additional-controls{padding:8px 12px}.timeline-controls button,.loop-boundary-controls button,.loop-nudge-controls button,.loop-playback-options button,.loop-additional-controls button{font-size:12px!important;min-height:40px}.loop-time-display input[type=number]{width:90px!important;font-size:14px!important}}#root{max-width:100%;margin:0;padding:0;background:#1a1d29;min-height:100vh}.app-container{display:flex;min-height:100vh;background:#1a1d29;justify-content:center}.app-container main{flex:1;padding:1rem;max-width:1200px;display:flex;flex-direction:column;align-items:center;width:100%}@media(max-width:768px){.app-container{flex-direction:column}.app-container main{padding:.75rem;padding-bottom:40vh;gap:1rem}#root{overflow-x:hidden}.player-container{width:100%;margin-bottom:1rem}.loop-controls{flex-wrap:wrap;gap:.75rem;justify-content:center}.timeline-container{margin:1rem 0;padding:.75rem}}@media(max-width:480px){.app-container main{padding:.5rem;padding-bottom:45vh;gap:.75rem}.loop-controls{gap:.5rem}.timeline-container{padding:.5rem}}@media(max-width:360px){.app-container main{padding:.5rem;padding-bottom:50vh;gap:.5rem}}@media(hover:none)and (pointer:coarse){button{min-height:44px;min-width:44px}}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.instructions-section{width:100%;max-width:800px;margin-top:2rem;display:flex;flex-direction:column;align-items:flex-end}.instructions-toggle{background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#888;font-size:1rem;font-weight:700;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.instructions-toggle:hover{background:#ffffff1a;color:#aaa;border-color:#ffffff4d}.instructions-content{margin-top:1rem;padding:1.5rem;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ccc;animation:slideDown .3s ease-out;width:100%;align-self:stretch}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.instructions-content h3{margin:0 0 1.5rem;color:#fff;font-size:1.25rem;font-weight:600}.instructions-content h4{margin:1.5rem 0 .75rem;color:#ddd;font-size:1rem;font-weight:500}.instructions-content section:first-of-type h4{margin-top:0}.instructions-content ul{margin:0;padding-left:1.5rem;list-style-type:disc}.instructions-content li{margin:.5rem 0;line-height:1.6}.instructions-content kbd{display:inline-block;padding:.2rem .5rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;font-family:monospace;font-size:.875rem;color:#fff;box-shadow:0 2px 4px #0003}@media(max-width:768px){.instructions-section{margin-top:1.5rem}.instructions-content{padding:1rem;font-size:.9rem}.instructions-content h3{font-size:1.1rem}.instructions-content h4{font-size:.95rem}}