*{margin:0;padding:0;box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background:linear-gradient(to bottom,#000,#323232);overflow:hidden}#root{width:100%;height:100%;background:linear-gradient(to bottom,#000,#323232)}.app{min-height:100vh;width:100vw;background:linear-gradient(to bottom,#000,#323232);color:#fff;font-family:Arial,monospace;overflow-x:hidden;overflow-y:auto;position:relative}.chart-home{padding:2rem;padding-top:140px;max-width:1400px;margin:0 auto;max-height:100vh;overflow-y:auto;position:relative}.chart-home .dresearch-logo{position:fixed;top:30px;left:30px;z-index:1000;width:200px;height:80px;transition:all .3s ease}.chart-home .dresearch-logo:hover{transform:scale(1.1)}.chart-home .dresearch-logo img{width:100%;height:100%;object-fit:scale-down}.chart-home-heading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem}.chart-home h1{color:#ccc;margin:0;text-align:center;font-size:2.5rem}.chart-home .beta-tag{height:2.5rem;width:auto;object-fit:contain}.chart-home h2{color:#aaa;margin-bottom:1rem;text-align:center;font-size:1rem;font-weight:lighter}.chart-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding:2rem 0}.chart-grid-item{display:flex;flex-direction:column;background:#111;border:1px solid #333;border-radius:8px;overflow:hidden;transition:all .3s ease;text-decoration:none;color:inherit;cursor:pointer}.chart-grid-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px #00000080;border-color:#555;background:#1a1a1a}.chart-thumbnail{width:100%;height:150px;background:#000;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #333}.chart-thumbnail img{width:100%;height:100%;object-fit:cover}.chart-thumbnail svg{width:100%;height:100%;display:block}.chart-info{padding:1rem;flex-grow:1;display:flex;flex-direction:column}.chart-grid-item .chart-title{font-size:1.2rem;margin-bottom:.5rem;color:#fff;font-weight:700;display:block!important;position:relative;order:1}.chart-grid-item .chart-description{font-size:.9rem;color:#ccc;line-height:1.4;flex-grow:1;order:2}.chart-grid-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh;color:#ccc}.loading-spinner{width:40px;height:40px;border:4px solid #333;border-top:4px solid #666;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1200px){.chart-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.chart-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.chart-grid{grid-template-columns:1fr}.chart-home{padding:1rem;padding-top:120px}.chart-home .dresearch-logo{width:120px;height:60px;top:20px;left:20px}}.chart-list{padding:2rem;max-width:800px;margin:0 auto}.chart-list h1{color:#ccc;margin-bottom:2rem;text-align:center}.chart-list ul{list-style:none;padding:0}.chart-list li{margin:1rem 0;padding:1rem;background:#111;border:1px solid #333;border-radius:4px}.chart-list a{color:#ccc;text-decoration:none;font-size:1.2rem}.chart-list a:hover{color:#fff}.chart-container{width:100vw;height:100vh;background:#000;position:relative;overflow:hidden}.chart-container.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000;z-index:9999}.chart-container .chart-title{position:absolute;top:10px;left:50%;transform:translate(-50%);margin:0;color:#ccc;font-size:1.2rem;z-index:100;pointer-events:none;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.chart-wrapper{width:100%;height:100%;position:relative}.chart-content{width:100%;height:100%}.chart-canvas{width:100%;height:100%;display:block;cursor:crosshair;background:#000}.chart-controls{position:absolute;top:50px;left:20px;background:#000c;border:1px solid #333;border-radius:8px;padding:1rem;min-width:280px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .3s ease;z-index:200}.chart-controls.hidden{opacity:0;pointer-events:none}.chart-controls.visible{opacity:1;pointer-events:all}.common-controls{display:flex;gap:.5rem;margin-bottom:1rem}.control-button{padding:.5rem 1rem;border:1px solid #555;background:#222;color:#fff;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s ease;font-weight:500;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 4px #0003}.control-button:hover{background:#333;border-color:#777;box-shadow:0 4px 8px #0000004d;transform:translateY(-1px)}.control-button:active{transform:translateY(0);box-shadow:0 1px 2px #0003}.control-button:focus{outline:none;box-shadow:0 0 0 2px #fff3}.control-button:focus:not(:focus-visible){box-shadow:0 2px 4px #0003}.control-button.primary{background:#444;border-color:#ccc;color:#ccc;box-shadow:0 2px 4px #0000004d}.control-button.primary:hover{background:#666;border-color:#fff;color:#fff;box-shadow:0 4px 8px #0006}.control-button.secondary{background:#004;border-color:#08f;color:#08f;box-shadow:0 2px 4px #08f3}.control-button.secondary:hover{background:#006;border-color:#0af;color:#0af;box-shadow:0 4px 8px #00aaff4d}.chart-specific-controls{margin-top:1rem;padding-top:1rem;border-top:1px solid #333}.control-group{margin-bottom:1rem}.control-group label{display:block;margin-bottom:.5rem;color:#ccc;font-size:.9rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.control-group input[type=range]{width:100%;margin:.5rem 0;accent-color:#ccc;background:#333;outline:none;border-radius:4px;height:8px;cursor:pointer;transition:all .2s ease}.control-group input[type=range]::-webkit-slider-track{background:#333;height:8px;border-radius:4px;border:1px solid #555;transition:all .2s ease}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#ccc;border-radius:50%;cursor:pointer;border:2px solid #555;transition:all .2s ease;box-shadow:0 0 4px #0000004d}.control-group input[type=range]::-webkit-slider-thumb:hover{background:#fff;border-color:#777;box-shadow:0 0 8px #fff3}.control-group input[type=range]::-webkit-slider-thumb:active{background:#fff;border-color:#999;box-shadow:0 0 12px #ffffff4d}.control-group input[type=range]:focus{outline:none}.control-group input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px #fff3}.control-group input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 2px #fff3}.control-group select{width:100%;padding:.5rem;background:#333;color:#ccc;border:1px solid #555;border-radius:4px;font-size:.9rem;cursor:pointer;transition:all .2s ease}.control-group select:hover{background:#444;border-color:#777;color:#fff}.control-group select:focus{outline:none;border-color:#999;box-shadow:0 0 0 2px #fff3}.control-group select option{background:#333;color:#ccc;padding:.5rem}.control-group input[type=range]::-moz-range-track{background:#333;height:8px;border-radius:4px;border:1px solid #555;transition:all .2s ease}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#ccc;border-radius:50%;cursor:pointer;border:2px solid #555;transition:all .2s ease;box-shadow:0 0 4px #0000004d}.control-group input[type=range]::-moz-range-thumb:hover{background:#fff;border-color:#777;box-shadow:0 0 8px #fff3}.info{margin-top:1rem;padding-top:1rem;border-top:1px solid #333;font-size:.8rem;color:#999}.info p{margin:.25rem 0}.shortcuts-info{margin-top:1rem;padding-top:1rem;border-top:1px solid #333;color:#666}.shortcuts-info small{font-size:.75rem}.chart-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);color:#fff;font-size:.8rem;z-index:100;pointer-events:none;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.chart-action-buttons{display:flex;gap:.5rem;margin-bottom:1rem;padding:.5rem;background:#282828cc;border-radius:6px;border:1px solid #555}.chart-action-buttons .control-button{flex:1;text-align:center;min-width:100px;font-weight:600;padding:.75rem 1rem}.chart-action-buttons .control-button:first-child{background:#333;border-color:#666;color:#ccc}.chart-action-buttons .control-button:first-child:hover{background:#444;border-color:#888;color:#fff}.smpte-controls .control-group,.geometry-controls .control-group,.motion-controls .control-group{background:#14141480;padding:.75rem;border-radius:4px;margin-bottom:.75rem}.toggle-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-text{font-size:inherit;font-weight:inherit;color:inherit;margin-right:12px}.toggle-switch{position:relative;display:inline-block;width:50px;height:26px}.toggle-input{opacity:0;width:0;height:0;position:absolute}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:26px;transition:all .3s ease;box-shadow:inset 0 1px 3px #0000001a}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 4px #0003}.toggle-input:checked+.toggle-slider{background-color:#666}.toggle-input:focus+.toggle-slider{box-shadow:inset 0 1px 3px #0000001a,0 0 0 2px #6666664d}.toggle-input:checked+.toggle-slider:before{transform:translate(24px)}.toggle-label:hover .toggle-slider{background-color:#bbb}.toggle-label:hover .toggle-input:checked+.toggle-slider{background-color:#555}.toggle-label:active .toggle-slider:before{width:22px}@media (prefers-color-scheme: dark){.toggle-slider{background-color:#444}.toggle-input:checked+.toggle-slider{background-color:#888}.toggle-label:hover .toggle-slider{background-color:#555}.toggle-label:hover .toggle-input:checked+.toggle-slider{background-color:#999}}