: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;display:flex;place-items:center;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}}.hardware-notice{position:fixed;top:20px;right:20px;z-index:1000;animation:slideInFromRight .6s ease-out forwards,fadeOut 1s ease-in 7s forwards}.hardware-notice-content{background:#1a1a1a;color:#aeabab;border-radius:8px;padding:14px 18px;box-shadow:0 4px 20px #0006,0 1px 3px #0003;display:flex;align-items:center;gap:10px;max-width:280px;position:relative;border:1px solid #333;font-family:Segoe UI,sans-serif}.hardware-notice-icon{font-size:18px;flex-shrink:0;color:#666;animation:subtlePulse 3s ease-in-out infinite}.hardware-notice-text{font-size:13px;line-height:1.3;flex:1;color:#aeabab}.hardware-notice-text strong{font-weight:500;color:#c4c4c4}.hardware-notice-close{position:absolute;top:-6px;right:-6px;background:#333;color:#aeabab;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;transition:all .2s ease;border:1px solid #444}.hardware-notice-close:hover{background:#444;color:#ccc;transform:scale(1.05)}@keyframes slideInFromRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes subtlePulse{0%,to{opacity:.6}50%{opacity:1}}@media (max-width: 768px){.hardware-notice{top:10px;left:10px;right:10px}.hardware-notice-content{max-width:none;padding:14px 16px}.hardware-notice-text{font-size:13px}.hardware-notice-icon{font-size:20px}}body,html{margin:0;padding:0;overflow:hidden;height:100%}.app-container{font-family:Segoe UI,sans-serif;background-color:#111;color:#aeabab;height:100vh;width:100vw;overflow:hidden}.popup{display:flex;flex-direction:column;position:absolute;top:0;right:0;width:40vw;height:100vh;padding:1.5rem;background-color:#282424;border-radius:10px;z-index:2;box-sizing:border-box}.popup h2{margin-bottom:.5rem;font-size:2rem;text-align:center}.popup p{text-align:center;color:#a39b9b;font-size:1rem;margin-bottom:1.5rem}.scrollable-content{overflow-y:auto;flex-grow:1;padding-right:1rem}.video-card{margin-bottom:1.5rem;border-radius:10px;background-color:#a5a0a0;box-shadow:0 4px 12px #00000012;padding:1rem}.video-header{display:flex;justify-content:space-between;align-items:center;font-weight:600;cursor:pointer;font-size:1.1rem;color:#222}.toggle-icon{font-size:1.2rem;transform:rotate(0);transition:transform .3s ease}.toggle-icon.open{transform:rotate(90deg)}.video-content{margin-top:1rem;display:none;animation:fadeIn .3s ease-in-out}.video-content.active{display:block}.video-frame{width:100%;height:200px;border:none;border-radius:8px}.video-description{margin-top:.5rem;color:#1f1f1f}button{padding:.6rem 1.2rem;background:#333;color:#fff;border:none;cursor:pointer;border-radius:5px;transition:background .2s}button:hover{background:#555}.learn-button{position:absolute;top:20px;left:20px;z-index:10;background-color:#444;color:#fff;border:none;border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:700;animation:pulse 1.5s infinite;box-shadow:0 0 10px #0003}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.help-popup{position:fixed;top:80px;left:20px;background:#1c1c1c;padding:1rem;border-radius:10px;box-shadow:0 2px 12px #0003;z-index:15;width:260px;max-height:70vh;overflow-y:auto;font-size:.9rem}.splash-screen{font-family:Poppins,sans-serif;position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom right,#111,#1a1a1a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:600;z-index:9999;opacity:1;animation:splashFadeOut 1s ease forwards;animation-delay:.5s;transform:scale(1)}.tech-list{padding-left:1rem;margin-top:.5rem;font-size:.95rem;list-style-type:disc}.tech-list li{margin-bottom:.4rem;padding:.25rem 0;transition:background-color .3s ease,transform .3s ease;cursor:pointer;border-radius:6px}.tech-list li:hover{background-color:#1a1a1a;transform:scale(1.01)}.about-section{margin-top:1rem;font-size:.9rem;color:#bdbdbd;text-align:center;transition:color .3s ease}.about-section p{transition:color .3s ease,transform .3s ease}.about-section p:hover{background-color:#1a1a1a;border-radius:6px;padding:.25rem;transform:scale(1.01);color:#e0e0e0}.popup h3{margin-bottom:.5rem;font-size:1.1rem;color:#eee;transition:color .3s ease}.popup h3:hover{color:#534141}@keyframes splashFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02);pointer-events:none}}.canvas-wrapper{animation:fadeInCanvas .8s ease 1.2s forwards;opacity:0}@keyframes fadeInCanvas{to{opacity:1}}@media (max-width: 768px){.popup{top:auto;bottom:0;left:0;right:0;width:100vw;height:60vh;border-radius:20px 20px 0 0;transform:translateY(100%);animation:slideUp .4s forwards;margin-top:auto;margin-bottom:2rem}}@media (max-width: 768px){.help-popup{height:85vh;border-radius:20px 20px 0 0;padding:1.25rem}}@keyframes slideUp{to{transform:translateY(0)}}@media (max-width: 768px){.popup h2{font-size:1.25rem}.popup p{font-size:.9rem}}.creators-strict{all:unset;display:block;font-size:.9rem;color:#bdbdbd;font-family:inherit;line-height:1.4;text-align:center;width:100%}.creators-section h3{text-align:center;margin-bottom:.5rem}.creators-strict a{all:unset;color:#d0d0d0;font-weight:700;cursor:pointer;transform:none!important;scale:1!important;animation:none!important;transition:color .3s ease}.creators-strict a:hover{color:#fff;border-bottom:1px solid #ffffff;transform:none!important;scale:1!important}.star{margin-left:8px;color:gold;font-size:1.1em}.video-title{display:inline-flex;align-items:center;gap:6px}.recommended-star{cursor:pointer;color:gold;font-size:1.2rem;transition:transform .3s ease,filter .3s ease;-webkit-user-select:none;user-select:none}.recommended-star:hover{transform:scale(1.3);filter:brightness(1.5)}