.experiment-layout{gap:var(--space-lg);padding:calc(70px + var(--space-lg)) var(--space-lg) var(--space-lg);grid-template-columns:1fr 380px;align-items:start;max-width:1600px;margin:0 auto;display:grid}.sim-area{gap:var(--space-md);flex-direction:column;display:flex}.sim-header{align-items:center;gap:var(--space-md);grid-column:1/-1;display:flex}.sim-title{font-size:1.5rem;font-weight:700}.sim-badge{color:var(--accent-primary);background:#6366f11f;border:1px solid #6366f140;border-radius:999px;padding:2px 12px;font-size:.75rem;font-weight:500}.controls-dashboard{gap:var(--space-md);display:flex}.dashboard-params{flex:3}.dashboard-actions{flex-direction:column;flex:1;justify-content:center;display:flex}.controls-grid{gap:var(--space-md) var(--space-lg);grid-template-columns:1fr 1fr;display:grid}.controls-grid .control-group{margin-bottom:0}.rgb-workspace{background-color:#050505;background-image:linear-gradient(#ffffff08 1px,#0000 1px),linear-gradient(90deg,#ffffff08 1px,#0000 1px);background-size:40px 40px;border-radius:12px;width:100%;height:100%;min-height:400px;position:relative;overflow:hidden;box-shadow:inset 0 0 50px #000c}.light-source{mix-blend-mode:screen;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:none;will-change:left, top, background-color;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:250px;height:250px;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:inset 0 0 20px #0000001a}.light-source:active{cursor:grabbing}#light-r{background-color:red;top:calc(50% - 50px);left:50%}#light-g{background-color:#0f0;top:calc(50% + 30px);left:calc(50% - 45px)}#light-b{background-color:#00f;top:calc(50% + 30px);left:calc(50% + 45px)}.light-knob{color:#ffffffe6;width:32px;height:32px;font-family:var(--font-mono);pointer-events:none;mix-blend-mode:normal;background:#ffffff26;border:2px solid #fff9;border-radius:50%;justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}@media (width<=1024px){.experiment-layout{grid-template-columns:1fr}}@media (width<=768px){.light-source{width:180px;height:180px}}.control-panel{gap:var(--space-md);max-height:calc(100vh - 90px);padding-right:var(--space-xs);flex-direction:column;display:flex;overflow-y:auto}.panel-section{padding:var(--space-lg);border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--bg-glass-border)}.panel-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:var(--space-lg);font-size:.85rem;font-weight:600}.info-item{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);background:var(--bg-secondary);border:1px solid var(--bg-glass-border);flex-direction:column;align-items:center;gap:2px;display:flex}.info-label{color:var(--text-muted);text-transform:uppercase;font-size:.7rem;font-weight:600}.info-value{font-size:.85rem;font-weight:600;font-family:var(--font-mono);color:var(--accent-secondary)}.control-label-row{margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.control-label{color:var(--text-primary);font-size:.85rem;font-weight:500}.control-display{font-family:var(--font-mono);color:var(--accent-secondary);font-size:.85rem}.control-slider{appearance:none;background:var(--bg-secondary);cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px}.control-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-gradient);cursor:pointer;border-radius:50%;width:18px;height:18px}.action-row{gap:var(--space-sm);margin-bottom:var(--space-sm);display:flex}.btn{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-family:var(--font-main);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-xs);transition:all var(--transition-fast);border:none;flex:1;font-size:.9rem;font-weight:600;display:flex}.btn--primary{background:var(--accent-gradient);color:#fff;box-shadow:0 2px 12px #6366f14d}.btn--secondary{background:var(--bg-glass);border:1px solid var(--bg-glass-border);color:var(--text-secondary)}.btn--secondary:hover{color:var(--text-primary);background:#ffffff0f}.theory-box-mini{background:var(--bg-card);border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);flex-direction:column;padding:16px;display:flex}.theory-title{color:var(--accent-secondary);border-bottom:1px dashed #ffffff1a;margin-bottom:12px;padding-bottom:8px;font-size:.95rem;font-weight:700}.theory-text{color:var(--text-secondary);font-size:.85rem;line-height:1.6}.theory-text strong{color:var(--text-primary)}.page-view{opacity:0;transition:opacity .3s;display:none}.page-view.active{opacity:1;animation:.4s forwards fadeIn;display:grid}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.canvas-upload-overlay{-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:50;background:#0a0f1ebf;border:2px dashed #4facfe66;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;margin:10px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;inset:0}.canvas-upload-overlay.drag-over{background:#4facfe26;border-color:#4facfe;transform:scale(.98)}.canvas-upload-overlay .upload-content{text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:15px;display:flex}.canvas-upload-overlay .upload-icon{filter:drop-shadow(0 0 10px #4facfe66);font-size:3.5rem;transition:transform .3s}.canvas-upload-overlay:hover .upload-icon{transform:translateY(-5px)}.canvas-upload-overlay .upload-title{color:#fff;font-size:1.4rem;font-weight:700}.canvas-upload-overlay .upload-desc{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.floating-action-btn{color:#fff;font-family:var(--font-main);cursor:pointer;-webkit-backdrop-filter:blur(5px);z-index:50;background:#0f1423d9;border:1px solid #ffffff26;border-radius:30px;padding:10px 18px;font-size:.9rem;font-weight:600;transition:all .2s;position:absolute;bottom:20px;right:20px;box-shadow:0 4px 12px #00000080}.floating-action-btn:hover{color:#fff;background:#4facfe40;border-color:#4facfe;transform:translateY(-2px)}.mode-tabs{background:#ffffff08;border:1px solid #ffffff0d;border-radius:12px;padding:5px;display:flex}.mode-btn{color:var(--text-secondary);cursor:pointer;font-family:var(--font-main);background:0 0;border:none;border-radius:8px;flex:1;padding:12px;font-size:1rem;font-weight:600;transition:all .2s}.mode-btn:hover{color:#fff}.mode-btn.active{color:#fff;background:#ffffff1a;box-shadow:0 2px 8px #0003}.instruction-text{color:var(--text-secondary);margin-top:5px;font-size:.85rem;line-height:1.4}.image-resolution-warning{color:var(--text-muted);text-align:center;margin-top:10px;font-size:.75rem}.microscope-workspace{background-color:#000;border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;min-height:480px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 60px #000}.pixel-grid-container{aspect-ratio:1;transform-origin:50%;will-change:transform;width:90%;max-width:600px;transition:transform .1s linear;position:relative}#microscope-canvas{filter:blur(.5px)drop-shadow(0 0 15px #ffffff26);border-radius:4px;width:100%;height:100%}.microscope-overlay{pointer-events:none;z-index:10;background:radial-gradient(circle,#0000 40%,#000000d9 100%);position:absolute;inset:0;box-shadow:inset 0 0 100px 30px #000}.macro-color-overlay{opacity:0;z-index:5;pointer-events:none;mix-blend-mode:normal;background-color:#0000;transition:opacity .1s linear;position:absolute;inset:-1px;box-shadow:0 0 20px}.zoom-instruction{color:#fff9;font-family:var(--font-main);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;z-index:20;background:#00000080;border-radius:20px;padding:8px 16px;font-size:.9rem;transition:opacity .3s;animation:2s ease-in-out infinite pulse-op;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}@keyframes pulse-op{0%,to{opacity:.6}50%{opacity:.2}}.preset-colors-grid{gap:var(--space-sm);grid-template-columns:repeat(4,1fr);display:grid}.preset-btn{aspect-ratio:1;cursor:pointer;border:2px solid #ffffff1a;border-radius:8px;width:100%;transition:transform .2s,border-color .2s}.preset-btn:hover{z-index:2;border-color:#fff;transform:scale(1.15);box-shadow:0 0 15px #ffffff4d}