html,body,#root{width:100%;height:100%;margin:0}body{overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.left-6{left:1.5rem}.right-6{right:1.5rem}.bottom-0{bottom:0}.bottom-6{bottom:1.5rem}.top-6{top:1.5rem}.left-1\/2{left:50%}.top-1\/2{top:50%}.-translate-x-1\/2{transform:translate(-50%)}.-translate-y-1\/2{transform:translateY(-50%)}.h-screen{height:100vh}.h-\[172px\]{height:172px}.h-3{height:.75rem}.h-\[2px\]{height:2px}.w-full{width:100%}.w-\[300px\]{width:300px}.w-\[172px\]{width:172px}.w-3{width:.75rem}.w-8{width:2rem}.max-w-sm{max-width:24rem}.overflow-hidden{overflow:hidden}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;user-select:none}.pointer-events-none{pointer-events:none}.inline-block{display:inline-block}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-3{gap:.75rem}.rounded-full{border-radius:9999px}.rounded-2xl{border-radius:1rem}.border{border-width:1px;border-style:solid}.border-white\/10{border-color:#ffffff1a}.bg-slate-950{background-color:#020617}.bg-black\/35{background-color:#00000059}.bg-black\/40{background-color:#0006}.bg-cyan-300{background-color:#67e8f9}.bg-blue-950{background-color:#172554}.bg-white{background-color:#fff}.bg-amber-300{background-color:#fcd34d}.p-3{padding:.75rem}.p-4{padding:1rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.ml-2{margin-left:.5rem}.text-center{text-align:center}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-\[0\.25em\]{letter-spacing:.25em}.leading-6{line-height:1.5rem}.text-white{color:#fff}.text-cyan-200\/80{color:#a5f3fccc}.text-cyan-200{color:#a5f3fc}.text-slate-200{color:#e2e8f0}.text-slate-200\/85{color:#e2e8f0d9}.text-slate-200\/90{color:#e2e8f0e6}.text-slate-400{color:#94a3b8}.text-amber-200{color:#fde68a}.shadow-2xl{box-shadow:0 25px 50px -12px #0000008c}.backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.ring-1{box-shadow:0 0 0 1px var(--ring-color, rgba(255, 255, 255, .2))}.ring-blue-400\/60{--ring-color: rgba(96, 165, 250, .6)}.control-panel{max-height:calc(100vh - 3rem);overflow-y:auto}.dial-control svg{display:block}.eclipse-toggle{position:relative;width:3rem;height:1.5rem;border:1px solid rgba(255,255,255,.16);border-radius:9999px;background:#00000052;cursor:pointer;padding:0;box-shadow:inset 0 1px #ffffff0a;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}.eclipse-toggle:hover{background:#0f172a85}.eclipse-toggle.is-active{border-color:#67e8f975;background:#0891b242;box-shadow:inset 0 1px #ffffff0f,0 0 0 1px #22d3ee14}.eclipse-toggle__thumb{position:absolute;top:50%;left:.18rem;width:1rem;height:1rem;border-radius:9999px;background:#f8fafc;box-shadow:0 1px 4px #0f172a73;transform:translateY(-50%);transition:left .16s ease,background .16s ease}.eclipse-toggle.is-active .eclipse-toggle__thumb{left:calc(100% - 1.18rem);background:#ecfeff}.observer-back-button{position:absolute;left:1.5rem;top:1.5rem;z-index:20;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.16);border-radius:9999px;background:#0000007a;cursor:pointer;padding:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.observer-back-button:before{content:"";position:absolute;left:50%;top:50%;width:.72rem;height:.72rem;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-38%,-50%) rotate(45deg)}.observer-back-button:hover{background:#0f172ab8}.playback-button{position:absolute;right:1.5rem;top:1.5rem;z-index:20;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.16);border-radius:9999px;background:#0000007a;cursor:pointer;padding:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.playback-button:hover{background:#0f172ab8}.playback-button.is-playing:before,.playback-button.is-playing:after{content:"";position:absolute;top:50%;width:.22rem;height:.95rem;border-radius:9999px;background:#fff;transform:translateY(-50%)}.playback-button.is-playing:before{left:.9rem}.playback-button.is-playing:after{right:.9rem}.playback-button.is-paused:before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-bottom:.5rem solid transparent;border-left:.78rem solid #fff;border-top:.5rem solid transparent;transform:translate(-38%,-50%)}.control-toggle-button{display:none}.info-panel--with-back{top:4.75rem}@media(max-width:700px){html,body,#root{height:100dvh}.left-6{left:.75rem}.right-6{right:.75rem}.bottom-6{bottom:.75rem}.top-6{top:.75rem}.h-screen{height:100dvh}.p-3{padding:.625rem}.p-4{padding:.75rem}.text-sm{font-size:.8125rem;line-height:1.125rem}.text-xs{font-size:.6875rem;line-height:.875rem}.text-lg{font-size:1rem;line-height:1.25rem}.text-2xl{font-size:1.125rem;line-height:1.375rem}.tracking-\[0\.25em\]{letter-spacing:.16em}.leading-6{line-height:1.25rem}.max-w-sm{max-width:calc(100vw - 5.25rem)}.w-\[300px\]{width:min(300px,calc(100vw - 1.5rem))}.info-panel p{display:none}.observer-back-button{left:.75rem;top:.75rem;width:2.75rem;height:2.75rem}.playback-button{right:.75rem;top:.75rem;width:2.75rem;height:2.75rem}.control-toggle-button{display:block;position:absolute;z-index:24;width:2.25rem;height:2.25rem;border:1px solid rgba(255,255,255,.16);border-radius:9999px;background:#0000007a;cursor:pointer;padding:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:bottom .18s ease,opacity .18s ease,background .16s ease,transform .18s ease}.control-toggle-button:hover{background:#0f172ab8}.control-toggle-button:before{content:"";position:absolute;left:50%;top:52%;width:.62rem;height:.62rem;border-left:2px solid #fff;border-top:2px solid #fff;transform:translate(-50%,-62%) rotate(225deg)}.control-toggle-button--inside{right:.55rem;top:.2rem;border-color:transparent;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.control-toggle-button--inside:hover{background:transparent}.control-toggle-button--floating{right:.75rem;bottom:.75rem;width:2.75rem;height:2.75rem}.control-toggle-button--floating.is-hidden:before{width:.78rem;height:.78rem;transform:translate(-50%,-38%) rotate(45deg)}}@media(max-width:700px)and (orientation:portrait){.control-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem .625rem;width:calc(100vw - 1.5rem);max-height:min(44dvh,330px);padding:.625rem;border-radius:.875rem;transition:opacity .18s ease,transform .18s ease;will-change:transform,opacity}.control-panel--hidden{opacity:0;pointer-events:none;transform:translateY(calc(100% + 1rem))}.control-panel>.dial-row{margin-top:0;min-width:0}.control-panel>.text-sm,.control-panel>.text-xs{grid-column:1 / -1;margin-top:0}.dial-control{width:min(39vw,148px);height:min(39vw,148px)}.dial-control svg{width:100%;height:100%}.dial-control .text-lg{max-width:86%;overflow-wrap:anywhere}.info-panel--with-back{top:4rem}}@media(max-width:420px)and (orientation:portrait){.control-panel{max-height:40dvh}.dial-control{width:min(38vw,132px);height:min(38vw,132px)}}@media(max-width:700px)and (max-height:620px)and (orientation:portrait){.info-panel{display:none}.control-panel{max-height:46dvh}.dial-control{width:min(34vw,122px);height:min(34vw,122px)}}@media(max-height:560px)and (orientation:landscape){.info-panel{display:none}.observer-back-button,.playback-button{top:.5rem;width:2.5rem;height:2.5rem}.observer-back-button{left:.5rem}.playback-button{right:.5rem}.control-panel{display:flex;flex-direction:column;align-items:stretch;left:.5rem;top:.5rem;bottom:.5rem;width:min(clamp(156px,24vw,208px),calc(100vw - 4.5rem));max-height:none;grid-template-columns:minmax(0,1fr);gap:.35rem;padding:.5rem;border-radius:.75rem;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.control-panel--hidden{transform:translate(calc(-100% - 1rem))}.control-panel>*{min-width:0}.control-panel>.dial-row{width:100%;justify-content:center;flex:0 0 auto}.control-panel>.dial-row:last-of-type{margin-bottom:auto}.control-panel>.text-sm,.control-panel>.text-xs{font-size:.6875rem;line-height:.9rem;flex:0 0 auto}.dial-control{width:100%;height:auto;aspect-ratio:1 / 1;min-width:0;touch-action:pan-y}.dial-control .text-lg{font-size:.84rem;line-height:1rem}.dial-control .text-xs{font-size:.625rem;line-height:.8rem}.control-toggle-button--inside{top:.05rem;right:.2rem;z-index:1;opacity:.84}.control-toggle-button--floating{left:.5rem;right:auto;bottom:.5rem}}