.io-simulation-layout{grid-template-columns:1fr;align-items:center;gap:4rem;display:grid}@media (min-width:768px){.io-simulation-layout{grid-template-columns:1.2fr 1fr}}.io-editor-pane{border-radius:var(--radius-md);border:1px solid var(--border-color);aspect-ratio:4/3;box-shadow:var(--shadow-sm);background-color:#f8fafc;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}@media (prefers-color-scheme:dark){.io-editor-pane{background-color:#0f172a}}.io-upload-state{border:2px dashed var(--border-color);border-radius:var(--radius-lg);width:80%;height:80%;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;font-weight:500;display:flex}.io-diagram-state{width:100%;height:100%;position:relative}.cell-body{background-color:#6366f11a;border:3px solid #6366f180;border-radius:40% 60% 70% 30%/40% 50% 60%;width:180px;height:220px;position:absolute;top:50%;left:35%;transform:translate(-50%,-50%)}.cell-nucleus{background-color:#8b5cf64d;border:2px solid #8b5cf699;border-radius:50%;width:60px;height:60px;position:absolute;top:40%;left:35%}.cell-mitochondria{background-color:#ef44444d;border:2px solid #ef444499;border-radius:10px;width:40px;height:20px;position:absolute;top:65%;left:30%;transform:rotate(-20deg)}.cell-label{color:var(--text-primary);background:var(--bg-primary);border:1px solid var(--border-color);white-space:nowrap;border-radius:4px;padding:.25rem .5rem;font-size:.875rem;font-weight:600;position:absolute}.label-1{top:20%;left:65%}.label-2{top:50%;left:70%}.label-3{top:75%;left:60%}.cell-line{background-color:var(--text-tertiary);transform-origin:0;height:2px;position:absolute}.cl-1{width:120px;top:23%;left:40%;transform:rotate(-10deg)}.cl-2{width:160px;top:53%;left:35%;transform:rotate(5deg)}.cl-3{width:120px;top:78%;left:35%;transform:rotate(-5deg)}.io-mask{opacity:.85;color:#fff;background-color:#ef4444;border-radius:4px;justify-content:center;align-items:center;font-size:.875rem;font-weight:700;display:flex;position:absolute}.sim-m1{width:80px;height:32px;top:18%;left:63%}.sim-m2{width:110px;height:32px;top:48%;left:68%}.sim-m3{width:95px;height:32px;top:73%;left:58%}.mask-hidden{background-color:#ef4444}.mask-active{background-color:#3b82f6;border:2px solid #60a5fa;box-shadow:0 0 0 4px #3b82f64d}.io-mode-selector{border-radius:var(--radius-md);border:1px solid #3b82f633;margin-top:1rem;overflow:hidden}.mode-option{border-bottom:1px solid var(--border-color);cursor:pointer;flex-direction:column;gap:.25rem;padding:1rem;font-size:.875rem;display:flex}.mode-option:last-child{border-bottom:none}.mode-option.selected{background-color:#3b82f61a}.mode-option strong{color:var(--text-primary)}.mode-option span{color:var(--text-secondary)}