/* Feeding comparison: anatomical detail, attached labels, one common timeline. */
:root{font-family:"Segoe UI",Arial,sans-serif;font-synthesis:none;color-scheme:light;color:#25303b;background:#fff;--muted:#63717e;--line:#d9dfe5;--stage:#edf0f3;--intact:#2866a5;--disconnected:#9a4c76}
*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:auto;padding:0 16px}a{color:inherit;text-underline-offset:4px}button,select,input{font:inherit}button,select{min-height:38px;padding:0 12px;color:inherit;background:#fff;border:1px solid var(--line);border-radius:5px}button,select,summary{cursor:pointer}button:hover,select:hover{background:#eef2f6}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--intact);outline-offset:3px}[hidden]{display:none!important}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0 10px}.masthead h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.8px}.masthead p{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}.about{flex:none;font-size:12px}.workspace,.viewer{min-width:0}.viewer{border-top:1px solid var(--line);display:flex;flex-direction:column}.toolbar{order:0}.trial-options{order:1}.transport{order:2}#scene-error{order:3}#scene{order:4}.result-note{order:5}.signal{order:6}
.toolbar{display:flex;align-items:center;gap:16px;min-height:44px}.mode-tabs{display:flex;gap:6px}.mode-tabs button{border:0;background:transparent;color:var(--muted);font-size:13px}.mode-tabs button[aria-pressed=true]{color:var(--intact);background:#eaf1f8;font-weight:600}.toolbar #body-view{margin-left:auto;font-size:12px}#condition-control select{font-size:12px;max-width:100%}
.trial-options{margin:0 0 4px}.trial-options summary{font-size:12px;padding:7px 0;color:var(--muted)}#trial-description{margin-left:14px;color:#25303b;font-weight:600}.trial-fields,.settings-grid{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:end;padding:12px 0}.trial-fields label:not(.loop-control),.settings-grid label:not(.block-control){display:flex;flex-direction:column;gap:6px;font-size:12px}.trial-fields select,.settings-grid select{min-width:170px;font-size:13px}.loop-control,.block-control{display:flex;align-items:center;gap:8px;min-height:38px;font-size:12px}.trial-options p,.configuration p{margin:0 0 12px;max-width:760px;font-size:12px;line-height:1.65;color:var(--muted)}
#scene{position:relative;height:clamp(560px,64vh,640px);overflow:hidden;touch-action:none;cursor:grab;background:var(--stage);border-radius:7px}#scene canvas{display:block;width:100%;height:100%}#scene:active{cursor:grabbing}#scene:focus-visible{outline:2px solid var(--intact);outline-offset:-3px}#scene[data-compare=true]::after{content:"";position:absolute;left:50%;top:16px;bottom:16px;border-left:1px solid #d1d9e1;pointer-events:none}
.condition-header{position:absolute;inset:0;pointer-events:none}#compare-labels,.paired-readouts{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:start}#compare-labels span{padding:13px 18px 0;font-size:13px;font-weight:600;line-height:1.4}#compare-labels span::before{content:"";display:inline-block;width:7px;height:7px;background:var(--intact);border-radius:50%;margin-right:7px}#compare-labels span+span::before{background:var(--disconnected);border-radius:0}.readout-row{padding:35px 18px 0 32px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.scene-top{display:flex;align-items:baseline;gap:15px;padding:13px 18px;font-size:13px}#condition-name{font-weight:600}#phase-badge{color:var(--muted);font-size:12px}.paired-readouts[data-compare=false]{grid-template-columns:1fr}.paired-readouts[data-compare=false] .readout-row{padding-left:18px}.scene-bottom{position:absolute;left:18px;right:18px;bottom:9px;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted);pointer-events:none}#scene-error{padding:20px;background:#763a3d;color:white}
.result-note{display:flex;gap:12px;align-items:baseline;padding:12px 0 0;min-height:38px}.result-label{font-size:11px;color:var(--muted);white-space:nowrap}#result{margin:0;font-size:13px;line-height:1.6;max-width:80ch}.transport{display:flex;align-items:center;gap:10px;padding:10px 0 12px}.transport .primary{min-width:140px;background:#2866a5;border-color:#2866a5;color:#fff;font-size:13px;font-weight:600}.transport .primary:hover{background:#1f548a}#reset{width:36px;padding:0;border-color:transparent;font-size:22px}#scrub{flex:1;min-width:60px;height:30px;margin:0 6px;cursor:pointer;accent-color:var(--intact)}#clip-time{min-width:55px;font-size:12px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}.speed-label select{padding:0 5px;border:0;font-size:12px}
.signal{border-top:1px solid var(--line);padding-top:8px}.signal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.signal h2{margin:0;font-size:13px;font-weight:600}.signal h2 span{margin-left:8px;color:var(--muted);font-size:12px;font-weight:400}#drive-toggle{min-height:30px;padding:0;border:0;font-size:12px;text-decoration:underline;text-underline-offset:3px}#raster{display:block;width:100%;height:112px}.signal-caption{display:flex;justify-content:space-between;gap:12px;font-size:11px;line-height:1.5;color:var(--muted);padding:0 0 12px}.signal-caption p{margin:0}#neural-time{flex:none;font-variant-numeric:tabular-nums}
.configuration{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:24px}.configuration summary{padding:13px 0;font-size:12px}.evidence-note{margin:12px 0 0;max-width:85ch;font-size:12px;line-height:1.65;color:var(--muted)}.notes{margin-top:30px;border-top:1px solid var(--line);scroll-margin-top:20px}.methods-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:20px}.methods-heading h2{margin:0;font-size:20px;font-weight:600}.methods-heading a{font-size:12px}.explanation{max-width:80ch;margin:16px 0;padding-left:20px;font-size:14px;line-height:1.75}.explanation li{padding:3px 0 3px 8px}.notes p{max-width:85ch;font-size:13px;line-height:1.8;color:var(--muted)}.notes details{border-bottom:1px solid var(--line);padding-bottom:12px}.notes summary{padding:18px 0 8px;font-size:14px}.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.method-grid h2{margin:18px 0 6px;font-size:14px}footer{padding:22px 0 30px;color:var(--muted);font-size:11px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:687px){.viewer{display:flex;flex-direction:column}.toolbar{order:0}.trial-options{order:1}.transport{order:2}#scene-error{order:3}#scene{order:4}.result-note{order:5}.signal{order:6}main{padding:0 16px}.masthead{align-items:flex-start;gap:14px;padding:18px 0 12px}.masthead h1{font-size:25px}.masthead p{font-size:12px}.about{font-size:11px}.toolbar{flex-wrap:wrap;gap:5px;padding:4px 0}.mode-tabs button{padding:0 8px;font-size:12px}.toolbar #body-view{font-size:11px;padding:0 8px}#condition-control{order:3;width:100%}#condition-control select{width:100%}#trial-description{display:block;margin:5px 0 0 16px}#scene{height:530px}#scene[data-compare=true]{height:1060px}#scene[data-compare=true]::after{left:14px;right:14px;top:50%;bottom:auto;border-left:0;border-top:1px solid #d1d9e1}#compare-labels,.paired-readouts{display:block}#compare-labels span{position:absolute;top:0;left:0;width:100%;font-size:12px}#compare-labels span+span{top:50%}.paired-readouts[data-compare=true] .readout-row{position:absolute;top:0;left:0}.paired-readouts[data-compare=true] .readout-row+.readout-row{top:50%}.scene-bottom .keyboard-hint{display:none}.result-note{display:block;padding-top:10px}.result-label{display:block;margin-bottom:3px}.transport{flex-wrap:wrap;gap:5px}#scrub{order:5;flex-basis:100%;margin:0}#clip-time{margin-left:auto}.signal h2 span{display:none}.signal-caption{flex-direction:column;gap:3px}.configuration,.method-grid{grid-template-columns:1fr;gap:0}.trial-fields label:not(.loop-control),.settings-grid label:not(.block-control){width:100%}}

/* A framed magnification belongs to the whole fly shown alongside it. */
#view-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
#view-links path{fill:none;stroke:#9aa8b4;stroke-width:1;stroke-dasharray:3 3}
#view-links circle{fill:none;stroke:#7c8d9a;stroke-width:1}
.mouth-inset{position:absolute;border:1px solid #b8c4ce;border-radius:2px;pointer-events:none}
.mouth-inset span{position:absolute;left:0;top:-18px;font-size:11px;white-space:nowrap;color:#526270}
.scene-bottom{font-size:10px}
@media(max-width:687px){.scene-bottom .orbit-hint{display:none}.scene-bottom{left:16px}.mouth-inset span{top:-18px}}
@media(min-width:688px) and (max-width:980px){
 .viewer{display:flex;flex-direction:column}.toolbar{order:0}.trial-options{order:1}.transport{order:2}#scene-error{order:3}#scene{order:4}.result-note{order:5}.signal{order:6}
 #scene[data-compare=true]{height:860px}
 #scene[data-compare=true]::after{left:14px;right:14px;top:50%;bottom:auto;border-left:0;border-top:1px solid #d1d9e1}
 #compare-labels,.paired-readouts{display:block}
 #compare-labels span{position:absolute;top:0;left:0;width:100%}#compare-labels span+span{top:50%}
 .paired-readouts[data-compare=true] .readout-row{position:absolute;top:0;left:0}.paired-readouts[data-compare=true] .readout-row+.readout-row{top:50%}
}

/* Make the replay outcome visible before the scene, with an explicit demonstration choice. */
.viewer .result-note{order:3;display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;padding:8px 0 12px}
.replay-result{flex:1 1 300px;display:flex;align-items:baseline;gap:12px}
.contact-example{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:330px}
#contact-example{min-height:32px;font-size:12px;border-color:#9fb4c8;color:#245c91}
.contact-example small{font-size:10px;line-height:1.4;color:var(--muted)}
.mouth-inset .drop-readout{position:absolute;left:8px;bottom:6px;padding:3px 5px;background:rgba(249,250,251,.92);font-size:11px;color:#344958;font-variant-numeric:tabular-nums}
@media(max-width:687px){.viewer .result-note{align-items:flex-start}.replay-result{display:block}.contact-example{max-width:100%}.mouth-inset .drop-readout{font-size:10px;left:5px;bottom:4px}}