.fly-lab { max-width: 1060px; margin: 0 auto; padding: 28px 24px 65px; color: #d8e0d0; }
.fly-lab h1 { color: #f0e7d2; font: 400 clamp(38px,5vw,58px)/1.1 Georgia,serif; text-align: left; letter-spacing: -.04em; margin: 8px 0 10px; }
.lab-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lab-title p:not(.eyebrow) { font-size: 17px; color: #acbca7; margin: 0; }
.fly-lab .eyebrow { color: #cfb582; font-size: 12px; letter-spacing: .13em; }
.recorded-badge { flex: 0 0 auto; border: 1px solid #45503b; padding: 8px 13px; border-radius: 30px; color: #d7c69e; font-size: 12px; background: #182117; }
.plain-intro { font-size: 16px; line-height: 1.75; max-width: 860px; color: #c0c9b8; margin: 24px 0; }
.fly-lab strong { color: #eee2c4; }
.experiment { border: 1px solid #3e4c36; border-radius: 14px; background: #0d1712; overflow: hidden; padding: 18px; scroll-margin-top: 20px; }
.fly-lab button,.fly-lab select { font-family: inherit; font-size: 14px; color: #d6ddcd; background: #18251b; border: 1px solid #526044; border-radius: 7px; padding: 10px 15px; cursor: pointer; }
.fly-lab button:hover,.fly-lab select:hover { border-color: #bec893; background: #243321; }
.fly-lab button:focus-visible,.fly-lab select:focus-visible,.fly-lab input:focus-visible,.fly-lab summary:focus-visible,.fly-lab a:focus-visible { outline: 2px solid #e8c585; outline-offset: 4px; }
.condition-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.condition-buttons button { flex: 1 1 auto; min-height: 42px; }
.condition-buttons button[aria-pressed="true"] { color: #191e13; background: #d6c294; border-color: #d6c294; font-weight: 600; }
.observation { display: grid; grid-template-columns: minmax(0,2.05fr) minmax(225px,1fr); gap: 18px; margin: 18px 0; }
.fly-stage { position: relative; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(ellipse at 50% 60%,#172b21,#0b1510); border: 1px solid #2d402e; border-radius: 8px; min-width: 0; }
.stage-caption { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px 0; font-size: 13px; color: #e1d7b6; }
.stage-caption span:last-child { color: #a3b39a; font-size: 12px; text-align: right; }
.fly-stage svg { width: 100%; height: auto; min-height: 240px; display: block; }
.body-note { text-align: center; color: #91a488; font-size: 12px; margin: 0 12px 14px; line-height: 1.5; }
.signal-panel { padding: 8px 8px 0; }
.signal-panel > .eyebrow { font-size: 10px; letter-spacing: .08em; }
.motor-number { display: flex; align-items: center; gap: 16px; margin: 10px 0 16px; }
.motor-number strong { font: 48px/1 Georgia,serif; color: #e7c181; }
.motor-number span { font-size: 12px; color: #acbca2; line-height: 1.6; }
#condition-explanation { min-height: 72px; font-size: 14px; line-height: 1.6; color: #d0d8c7; }
.signal-path { margin-top: 14px; }
.signal-path > div { display: grid; grid-template-columns: 12px 1fr auto; gap: 9px; align-items: center; font-size: 13px; }
.activity-dot { --activity: 0; width: 8px; height: 8px; border-radius: 50%; background: #e0c58b; opacity: calc(.18 + var(--activity)*.82); box-shadow: 0 0 calc(var(--activity)*12px) #dabc7f; }
.signal-path output { font-variant-numeric: tabular-nums; color: #e1cba0; }
.path-arrow { display: block; font-size: 13px; line-height: 1.2; color: #688163; padding-left: 1px; }
.signal-note { color: #8ca183; font-size: 11px; line-height: 1.6; margin: 13px 0 0; }
.playback { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; border-top: 1px solid #2f422e; padding-top: 14px; margin-top: 16px; }
.fly-lab .primary-button { background: #d6c294; color: #192013; border-color: #d6c294; min-width: 98px; font-weight: 600; }
.fly-lab .primary-button:hover { background: #e4d3a8; color: #192013; }
.playback label { margin-left: 8px; font-size: 13px; color: #b4c4a9; }
.playback select { padding: 9px 8px; margin-left: 4px; }
.slowed-label { margin-left: auto; font-size: 12px; color: #b4c4a9; }
.timeline-label { display: flex; justify-content: space-between; font-size: 12px; margin: 20px 0 6px; color: #b4c4a9; }
#time-label { font-variant-numeric: tabular-nums; }
#scrub { display: block; width: 100%; accent-color: #d6c294; cursor: pointer; margin: 5px 0 18px; min-height: 22px; }
.raster-label { display: flex; justify-content: space-between; gap: 14px; color: #9eaf93; font-size: 11px; }
#raster { width: 100%; height: 110px; display: block; background: #0a130d; margin-top: 9px; border-radius: 6px; }
.replay-disclosure { font-size: 12px; color: #b2bea6; margin: 15px 0 0; line-height: 1.7; }
.comparison { padding: 33px 0 25px; }
.fly-lab h2 { color: #e9dfc7; font: 28px/1.3 Georgia,serif; margin: 5px 0 12px; }
.comparison > p { font-size: 15px; line-height: 1.75; color: #bdc8b4; max-width: 780px; }
.fly-lab .comparison-row { display: grid; grid-template-columns: 125px minmax(40px,1fr) 150px; gap: 20px; align-items: center; text-align: left; width: 100%; border: 0; border-radius: 3px; background: transparent; padding: 12px 6px; }
.fly-lab .comparison-row:hover { background: #142017; }
.bar-track { position: relative; display: block; background: #18271c; height: 30px; border-radius: 3px; }
.bar-fill { display: block; height: 100%; background: #7c8855; border-radius: 3px; }
.bar-track i { position: absolute; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #eadab2; }
.bar-value { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: #c9c7a8; }
.control-result { border-left: 2px solid #adb778; padding-left: 16px; margin-top: 22px; }
.explanation { border-top: 1px solid #344430; padding: 22px 0; }
.explanation summary { color: #ddd6bd; cursor: pointer; font-size: 16px; }
.explanation > div { padding: 12px 0 0; }
.explanation p { font-size: 15px; line-height: 1.8; color: #bdc8b4; max-width: 850px; }
.fly-lab a { color: #d6c294; text-underline-offset: 4px; }
.download-links { display: flex; flex-wrap: wrap; gap: 13px 24px; font-size: 13px; line-height: 1.7; }
.lab-footer { padding-top: 20px; border-top: 1px solid #344430; color: #8a9f80; font-size: 12px; }
.lab-error { padding: 16px; color: #f2d6a6; background: #3b271a; border: 1px solid #8e6741; border-radius: 6px; }
@media(max-width: 750px) { .fly-lab { padding: 24px 16px 45px; }.lab-title { gap: 10px; align-items: flex-start; }.recorded-badge { font-size: 10px; padding: 7px 9px; margin-top: 6px; }.lab-title p:not(.eyebrow) { font-size: 15px; }.plain-intro { font-size: 15px; }.experiment { padding: 12px; }.observation { grid-template-columns: 1fr; gap: 10px; }.fly-stage svg { min-height: 190px; }.signal-panel { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0 20px; padding: 6px; }.signal-panel>.eyebrow { grid-column: 1/-1; }.motor-number { grid-column: 1; margin-bottom: 8px; }.motor-number strong { font-size: 43px; }.signal-path { grid-column: 2; grid-row: 2/4; margin-top: 12px; }#condition-explanation { grid-column: 1; min-height: 0; font-size: 12px; margin: 7px 0; }.signal-note { grid-column: 2; margin: 6px 0; font-size: 10px; }.signal-path>div { font-size: 11px; gap: 7px; }.condition-buttons { gap: 6px; }.condition-buttons button { font-size: 12px; padding: 10px 11px; }.slowed-label { width: 100%; margin: 4px 0 0; }.raster-label { font-size: 10px; }.fly-lab .comparison-row { grid-template-columns: 95px minmax(35px,1fr) 108px; gap: 11px; font-size: 12px; }.bar-value { font-size: 11px; }.bar-track { height: 28px; }.body-note { font-size: 10px; }.stage-caption { font-size: 12px; }.stage-caption span:last-child { font-size: 10px; } }
@media(prefers-reduced-motion: reduce) { .fly-lab * { scroll-behavior: auto !important; } }
@media(max-width: 750px) { .motor-number { display: block; }.motor-number span { display: block; margin-top: 7px; } }