.parasite-shell {
  min-height: calc(100svh - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
  background:
    radial-gradient(circle at 30% 35%, rgba(255,42,168,.17), transparent 32rem),
    radial-gradient(circle at 82% 86%, rgba(131,243,157,.12), transparent 27rem),
    #050507;
}
.parasite-stage {
  min-height: 780px;
  padding: clamp(26px, 4vw, 58px);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(430px, 1fr);
  gap: 28px;
  border-right: 2px solid var(--cream);
  overflow: hidden;
  background:
    linear-gradient(rgba(85,222,244,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85,222,244,.035) 1px, transparent 1px);
  background-size: 32px 32px;
}
.parasite-heading { position: relative; z-index: 3; }
.parasite-heading .lab-return { margin-bottom: 22px; }
.parasite-heading p { margin: 0 0 12px; color: var(--cyan); font-size: .68rem; font-weight: 800; }
.parasite-heading h1 { margin: 0; font-size: clamp(4.4rem, 9vw, 9rem); font-weight: 950; letter-spacing: -.1em; line-height: .67; text-shadow: 7px 4px 0 var(--pink), -4px -2px 0 var(--cyan); }
.canvas-frame { min-height: 430px; position: relative; z-index: 2; overflow: hidden; border: 2px solid rgba(255,251,220,.75); background: #020203; box-shadow: 12px 12px 0 rgba(255,42,168,.42); }
#parasiteCanvas { width: 100%; height: 100%; display: block; object-fit: contain; cursor: crosshair; touch-action: none; image-rendering: auto; }
.drag-note { position: absolute; z-index: 9; left: 12px; bottom: 12px; padding: 8px 10px; background: rgba(0,0,0,.72); color: var(--toxic); font: 800 .62rem/1 ui-monospace, monospace; letter-spacing: .11em; }

.parasite-console { padding: 26px 23px; display: flex; flex-direction: column; gap: 20px; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.018) 5px), linear-gradient(160deg, #17111b, #08080c 54%, #06120a); }
.parasite-status { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.parasite-status span { display: block; margin-bottom: 12px; color: var(--muted); font-size: .62rem; }
.parasite-status b { display: block; color: var(--pink); font: 950 2.2rem/.9 ui-monospace, monospace; letter-spacing: -.06em; }
.parasite-status small { display: block; margin-top: 12px; overflow: hidden; color: var(--toxic); font: 750 .62rem/1.3 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.upload-control { min-height: 74px; padding: 14px; display: flex; flex-direction: column; justify-content: center; border: 1px dashed var(--cyan); background: rgba(85,222,244,.055); color: var(--cream); cursor: pointer; }
.upload-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-control span { font: 900 .78rem/1 ui-monospace, monospace; letter-spacing: .11em; }
.upload-control small { margin-top: 8px; color: var(--cyan); font: 700 .56rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.upload-control:hover, .upload-control:focus-within { background: var(--cyan); color: var(--black); }
.upload-control:hover small, .upload-control:focus-within small { color: var(--black); }

.mutation-controls { display: grid; gap: 17px; }
.mutation-controls label { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: #9b99a5; font: 800 .62rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.mutation-controls output { color: var(--toxic); }
.mutation-controls input { grid-column: 1 / -1; width: 100%; height: 5px; appearance: none; border: 0; background: linear-gradient(90deg, var(--pink), var(--cyan)); cursor: ew-resize; }
.mutation-controls input::-webkit-slider-thumb { appearance: none; width: 15px; height: 20px; border: 1px solid var(--cream); border-radius: 0; background: #09090c; box-shadow: 2px 2px 0 var(--pink); }
.parasite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.parasite-actions .download { grid-column: 1 / -1; border-color: var(--pink); color: var(--pink); }

.experiment-switcher { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.experiment-switcher > p { margin: 0 0 10px; color: var(--muted); font-size: .62rem; }
.experiment-switcher > a, .experiment-switcher > div { padding: 11px 0; display: grid; grid-template-columns: 42px 1fr; gap: 10px; border-top: 1px solid #2c2b33; color: inherit; text-decoration: none; }
.experiment-switcher b { color: var(--pink); font: 900 1rem/1 ui-monospace, monospace; }
.experiment-switcher span { font-size: .78rem; font-weight: 850; letter-spacing: .08em; }
.experiment-switcher small { display: block; margin-top: 5px; color: var(--cyan); font: 700 .56rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.experiment-switcher .current { background: linear-gradient(90deg, rgba(255,42,168,.14), transparent); }
.experiment-switcher .current b { color: var(--yellow); text-shadow: 0 0 11px var(--pink); }
.experiment-switcher .future { opacity: .38; }
body.infected .canvas-frame { animation: frame-spasm .19s steps(2) 5; }
body.infected .parasite-heading h1 { animation: parasite-title .24s steps(2) 4; }
@keyframes frame-spasm { 50% { transform: translate(4px, -2px); filter: saturate(1.8) hue-rotate(15deg); } }
@keyframes parasite-title { 50% { transform: translateX(-5px); text-shadow: 15px 3px 0 var(--pink), -12px -2px 0 var(--cyan); } }

@media (max-width: 920px) {
  .parasite-shell { grid-template-columns: 1fr; }
  .parasite-stage { min-height: 750px; border-right: 0; border-bottom: 2px solid var(--cream); }
  .parasite-console { min-height: 650px; }
}
@media (max-width: 560px) {
  .parasite-stage { min-height: 670px; padding: 28px 16px; grid-template-rows: auto minmax(360px,1fr); }
  .parasite-heading h1 { font-size: clamp(4.1rem, 23vw, 6rem); }
  .canvas-frame { min-height: 360px; box-shadow: 6px 6px 0 rgba(255,42,168,.42); }
  .drag-note { right: 10px; text-align: center; }
  .parasite-console { padding: 24px 16px; }
}