:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#f8fafc;background-color:#0f172a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-height:100vh;background-color:#0f172a;color:#f8fafc}#app{max-width:1440px;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}header{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.header-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.header-title h1{margin:0;font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,#38bdf8,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header-title p{margin:.25rem 0 0;color:#94a3b8;font-size:.875rem}.metrics-row{display:flex;gap:1.5rem}.metric-card{background:#0f172a;border:1px solid #334155;border-radius:8px;padding:.5rem 1rem;display:flex;flex-direction:column;align-items:center;min-width:100px}.metric-label{font-size:.75rem;text-transform:uppercase;color:#64748b;font-weight:700;letter-spacing:.05em}.metric-value{font-size:1.5rem;font-weight:800;font-family:monospace}.metric-value.fps-good{color:#10b981}.metric-value.fps-warning{color:#f59e0b}.metric-value.fps-bad{color:#ef4444}.metric-value.mps{color:#ec4899}.controls-board{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid #334155}.control-item{display:flex;align-items:center;gap:.75rem}.control-item label{font-size:.875rem;font-weight:600;color:#cbd5e1}.panels-container{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media (max-width: 1024px){.panels-container{grid-template-columns:1fr}}.panel{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;box-shadow:0 4px 6px -1px #0000001a}.panel-react{border-top:4px solid #6366f1}.panel-lit{border-top:4px solid #06b6d4}.panel-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.75rem;border-bottom:1px solid #334155}.panel-title{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700}.panel-badge{font-size:.75rem;font-weight:700;padding:.25rem .5rem;border-radius:9999px;text-transform:uppercase}.panel-react .panel-badge{background:#6366f126;color:#818cf8}.panel-lit .panel-badge{background:#06b6d426;color:#22d3ee}.matrix-grid{display:grid;grid-template-columns:repeat(15,1fr);gap:4px;background:#0f172a;padding:8px;border-radius:8px;border:1px solid #334155;aspect-ratio:1 / 1}.cell-wrapper{position:relative;aspect-ratio:1 / 1;background:#1e293b;border-radius:4px;border:1px solid #334155;display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:.75rem;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s}.cell-wrapper:hover{background:#475569!important;border-color:#e2e8f0}.cell-render-badge{position:absolute;top:1px;right:1px;font-size:.55rem;padding:.05rem .15rem;background:#00000080;color:#94a3b8;border-radius:2px;line-height:1}.cell-value{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}.cell-flash{animation:flash-animation .4s cubic-bezier(.25,1,.5,1)}@keyframes flash-animation{0%{outline:2px solid #38bdf8;box-shadow:0 0 12px #38bdf8;z-index:10}to{outline:0px solid transparent;box-shadow:0 0 0 transparent;z-index:1}}.widgets-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.widget-box{background:#0f172a;border:1px solid #334155;border-radius:8px;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.widget-label{font-size:.75rem;color:#64748b;font-weight:600;text-transform:uppercase}.widget-content{font-size:1.15rem;font-weight:700}button{background-color:#3b82f6;color:#fff;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:background-color .15s,transform .05s}button:hover{background-color:#2563eb}button:active{transform:scale(.97)}button.btn-secondary{background-color:#334155;border:1px solid #475569}button.btn-secondary:hover{background-color:#475569}input[type=range]{accent-color:#3b82f6;cursor:pointer}.switch-toggle{position:relative;display:inline-block;width:44px;height:22px}.switch-toggle input{opacity:0;width:0;height:0}.switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#334155;transition:.2s;border-radius:22px;border:1px solid #475569}.switch-slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;transition:.2s;border-radius:50%}input:checked+.switch-slider{background-color:#10b981;border-color:#059669}input:checked+.switch-slider:before{transform:translate(22px)}