:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;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}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{box-sizing:border-box}html,body,#root{height:100vh;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:#fff;color:#0b1220}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 .4em rgba(100,108,255,.2))}.logo.react:hover{filter:drop-shadow(0 0 .4em rgba(97,218,255,.12))}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.container{display:flex;flex-direction:column;gap:8px;height:100%;padding:10px}.controls{display:flex;gap:14px;align-items:center;justify-content:center;padding:10px 0}.flip-container{perspective:1000px;width:44px;height:44px;transition:transform .15s ease}.flip-container.rotate{transform:scale(1.06)}.flip-container .flipper{position:relative;width:100%;height:100%;transition:.6s;transform-style:preserve-3d}.flip-container.rotate .flipper{transform:rotateY(180deg)}.flip-container .front,.flip-container .back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.flip-container .front{display:flex;align-items:center;justify-content:center;background:#1976d2;color:#fff;border:1px solid rgba(16,24,40,.06);box-shadow:0 6px 18px #1018280f}.flip-container svg{width:28px;height:28px}.flip-container .back{transform:rotateY(180deg);background:#1976d2;border:1px solid rgba(16,24,40,.06);display:flex;align-items:center;justify-content:center}.spinner .spinner-wrapper{width:40px;height:40px;position:relative}.spinner .rotator{width:100%;height:100%;animation:rotate 1.2s linear infinite}.spinner .inner-spin{box-sizing:border-box;position:absolute;width:100%;height:100%;border:2px solid transparent;border-top-color:#fff;border-radius:50%}@keyframes rotate{to{transform:rotate(360deg)}}.play-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.06);background:#ffffff05;color:#eaeaea;position:relative;padding:4px}.play-btn svg path{fill:currentColor}.play-btn svg{width:30px;height:30px}.play-btn:not(:disabled):hover{border-color:#646cff}.play-btn.playing:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #646cff;opacity:.7;animation:pulse .9s ease-out infinite}@keyframes pulse{0%{transform:scale(.95);opacity:.7}70%{transform:scale(1.05);opacity:.2}to{transform:scale(.95);opacity:0}}.file-input{position:relative;overflow:hidden;display:inline-block}.file-input input{position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer}.editor{width:100%;height:300px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;line-height:1.4;padding:12px;border-radius:8px;border:1px solid rgba(16,24,40,.04);background:#fff;color:#0b1220}.workspace{display:grid;grid-template-columns:3fr 8px 1fr;gap:12px;align-items:start}.divider{width:8px;cursor:col-resize;background:#10182805;border:1px solid rgba(16,24,40,.03);border-radius:8px;height:auto}.divider:hover{background:#ffffff08}.pane{height:calc(100% + -0px);border:1px solid rgba(16,24,40,.04);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 18px #1018280a;color:#0b1220}.pane-right{display:flex;flex-direction:column;gap:12px;background:transparent;border:none;overflow:hidden}.right-actions{display:flex;flex-direction:column;align-items:center;gap:8px;flex:2 1 0%;min-height:84px}.output{flex:8 1 0%;border:1px solid rgba(16,24,40,.06);border-radius:8px;padding:12px;background:linear-gradient(180deg,#071018,#081226);color:#fff;overflow:auto}.output pre{color:#fff}.output pre.error{color:#ff6b6b}.output-title{font-weight:600;margin-bottom:6px}.filename-input input{width:220px;padding:6px 10px;border-radius:6px;border:1px solid rgba(16,24,40,.06);background:#fff;color:#0b1220}.filename-input{display:flex;justify-content:center;width:100%}.filename-input input{display:inline-block;width:auto;min-width:80px;max-width:420px;box-sizing:border-box;padding:8px 12px;font-size:1rem;text-align:center}.filename-input input::placeholder{color:#8b95a6;text-align:center}.filename-help{font-size:12px;color:#5f6b7a;margin-top:6px;text-align:center}.read-the-docs{color:#9aa6bf}.button-group{display:flex;gap:8px;align-items:center}input[type=range]{-webkit-appearance:none;appearance:none;height:5px;background:#e1e1e1;border-radius:3px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#3678e5;cursor:pointer;transition:background .15s ease}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#3678e5;cursor:pointer;transition:background .15s ease}input[type=range]:hover::-webkit-slider-thumb{background:#2161c9}input[type=range]:hover::-moz-range-thumb{background:#2161c9}.controls{display:flex;justify-content:space-between;flex-wrap:wrap;background-color:transparent;border-radius:6px;padding:6px 8px}.file-input-wrapper{position:relative;display:inline-block}.file-input-wrapper input[type=file]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}.playback-counter{color:#666;font-size:.85rem;padding:4px 8px;border-radius:4px;background:transparent}.time-display{display:flex;flex-direction:column;gap:4px}.timestamp,.elapsed-time{font-size:.85rem;color:#555}.time-label{font-weight:500;margin-right:4px}.time-value{font-family:monospace}.controls-top{display:flex;align-items:center;justify-content:space-between;width:100%}.controls-left{display:flex;align-items:center;gap:12px;flex:0 0 auto}.info-group{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}.container{display:flex;flex-direction:column;height:100vh;padding:12px}.workspace{display:grid;grid-template-columns:3fr 1fr;gap:8px;flex:1 1 auto;min-height:0}.workspace .divider{width:8px;cursor:col-resize;background:#1018280d;border:1px solid rgba(16,24,40,.08);border-radius:4px;transition:background .15s ease;height:100%}.workspace .divider:hover{background:#1018281f}.pane{min-height:0;height:100%;border-radius:6px}.pane-right{display:flex;flex-direction:column;min-height:0}.output{flex:1 1 auto;min-height:0;overflow:auto;padding:6px}.timeline-slider{-webkit-appearance:none;appearance:none;height:8px;background:#e6e6e6;border-radius:6px;outline:none}.timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#3678e5;cursor:pointer;box-shadow:0 1px 3px #0003}.timeline-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#3678e5;cursor:pointer}.timeline-slider:disabled{opacity:.6;cursor:default}.flip-container.disabled{opacity:.45;pointer-events:none}.pane-right .output{height:320px;max-height:320px;overflow:auto;box-sizing:border-box}.output pre{white-space:pre;word-break:normal}