/* Work figures: moving parts that show each mechanism. */
.fx-packets{filter:drop-shadow(0 0 3px #dce8e1cc);pointer-events:none}
.system-map .map-wire{stroke-width:1.5}
.system-map .map-node rect{filter:drop-shadow(0 0 7px #7ca68e26);transition:fill .25s,stroke .25s,filter .25s}
.system-map .map-node.fx-hit rect{fill:#3b4d42;stroke:#fff;filter:drop-shadow(0 0 14px #c4d7cc)}
.iris-map-stage{transition:filter .3s}
.iris-map-stage.fx-core .sculpture-object{filter:drop-shadow(0 0 22px #c4d7ccaa)}
.iris-map-stage .sculpture-object{transition:filter .3s}

/* Device data */
.event-field circle{transition:fill .25s,r .25s}
.event-field circle.fx-fire{fill:#fff}
.fx-bar{fill:#a1bbac;transform-box:fill-box;transform-origin:50% 0;animation:fx-rise 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.31s)}
.fx-bar-1{animation-name:fx-flat;fill:#819288}
.fx-bar-2{animation-name:fx-ab;animation-duration:3.2s}
.fx-bar-2:nth-child(odd){fill:#dce8e1}
.fx-meters.fx-alert .fx-bar-1{fill:#ff6b6b;animation-name:fx-spike;animation-duration:.7s}
@keyframes fx-rise{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes fx-flat{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(.4)}}
@keyframes fx-spike{0%{transform:scaleY(.3)}40%{transform:scaleY(1)}100%{transform:scaleY(.3)}}
@keyframes fx-ab{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(.85)}}
.fx-odometer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid #3f504666;font:10px/1.5 CourierPrime,monospace;letter-spacing:.07em;color:#a5b1aa}
.fx-odometer strong{font:400 clamp(20px,2.4vw,30px)/1 CourierPrime,monospace;letter-spacing:-.03em;color:#ebf1ed;font-variant-numeric:tabular-nums;text-shadow:0 0 18px #8cb09b55}

/* JDK upgrades */
.fx-gate circle{fill:#1a0f14;stroke:#ff6b6b;stroke-width:1.5}
.fx-gate path{stroke:#ff6b6b;stroke-width:2;fill:none}
.fx-gate{transition:opacity .5s;filter:drop-shadow(0 0 6px #ff6b6b66)}
.fx-gate.fx-hit circle{fill:#5a1a20}
.fx-gate-label{fill:#ff9a9a;font:11px CourierPrime,monospace;letter-spacing:.08em}
.upgrade-ready .fx-gate{opacity:0}
.upgrade-figure [data-upgrade-demo]:not(.upgrade-ready) .map-wire{stroke-dasharray:none}
.fx-flip{animation:fx-flip .6s cubic-bezier(.2,.8,.2,1)}
@keyframes fx-flip{0%{opacity:0;transform:translateY(-9px)}100%{opacity:1;transform:none}}
svg .fx-flip{transform-box:fill-box}
.upgrade-figure .upgrade-mobile .map-stream{background:#7a3b46}
.upgrade-figure .upgrade-mobile .map-stream:after{background:#ff6b6b;box-shadow:0 0 8px #ff6b6b}
.upgrade-figure .upgrade-ready .upgrade-mobile .map-stream{background:#56685d}
.upgrade-figure .upgrade-ready .upgrade-mobile .map-stream:after{background:#dce7e1;box-shadow:0 0 8px #bcd2c5}
.map-stream{width:2px}
.map-stream:after{width:2px;height:18px}

/* Bazel output */
.output-stage pre .log-line{display:block;min-height:1.9em}
.output-stage pre .log-ansi{font-style:normal;color:#e0626c;background:#e0626c1c;padding:0 2px;margin-right:1px;border-radius:1px}
.output-stage pre .log-line:first-child:has(.log-ansi){color:#9fd6a8}
.output-dropping pre [data-noise]{animation:fx-drop .7s cubic-bezier(.4,0,.2,1) both;animation-delay:var(--d,0ms);overflow:hidden}
.output-dropping pre .log-ansi{animation:fx-zap .5s ease-in both;animation-delay:var(--d,0ms)}
@keyframes fx-drop{0%{max-height:2em;opacity:1}35%{max-height:2em;opacity:1;color:#e0626c;text-decoration:line-through;transform:none}100%{max-height:0;min-height:0;opacity:0;color:#e0626c;text-decoration:line-through;transform:translateX(26px)}}
@keyframes fx-zap{0%{opacity:1}50%{opacity:1;background:#e0626c;color:#12080c}100%{opacity:0;font-size:0;padding:0;margin:0}}
.log-arriving .log-line{animation:fx-arrive .35s ease-out both;animation-delay:calc(var(--i)*40ms)}
@keyframes fx-arrive{from{opacity:0;transform:translateX(-10px)}}
.output-filtered .output-stage pre .log-diagnostic{text-shadow:0 0 14px #cfded555}
.output-meter{display:grid;grid-template-columns:auto 1fr 44px;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid #405047;font:10px/1 CourierPrime,monospace;letter-spacing:.08em;color:#a5b1aa}
.output-meter b{display:block;height:8px;background:#232b26;border:1px solid #405047;font-weight:400}
.output-meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#a1bbac,#e4ede8);box-shadow:0 0 12px #a8c3b388;transition:width .75s cubic-bezier(.3,0,.2,1)}
.output-meter em{font-style:normal;font-size:13px;color:#ebf1ed;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:0}

/* Metals */
.editor-caret{display:inline-block;width:8px;height:1.1em;margin-left:3px;vertical-align:-3px;background:#d3e1d9;animation:fx-caret 1.1s steps(2,end) infinite}
@keyframes fx-caret{50%{opacity:0}}
.symbol-pending .symbol-target{border-bottom-color:transparent;text-decoration:underline wavy #e0626c;text-decoration-thickness:1px;text-underline-offset:5px}
.symbol-pending .symbol-definition{border-left-color:#e0626c;background:#e0626c12}
.symbol-pending .symbol-definition .definition-label{color:#ff9a9a}
.symbol-pending .symbol-definition code{color:#d3bfc8}
.symbol-resolved .symbol-target{border-bottom-style:solid;border-bottom-color:#dce8e1}
.resolution-path span{padding:5px 9px;border:1px solid transparent;transition:border-color .3s,background .3s,color .3s,box-shadow .3s}
.resolution-path span.fx-on{border-color:#cdddd4;background:#2e3c34;color:#fff;box-shadow:0 0 16px #a8c3b355}
.resolution-path{position:relative;overflow:hidden}
.symbol-tracing .resolution-path:after{content:'';position:absolute;top:0;bottom:0;width:60px;left:-60px;background:linear-gradient(90deg,transparent,#e4ede855,transparent);animation:fx-sweep 1.4s linear both}
@keyframes fx-sweep{to{left:100%}}
.symbol-tracing .symbol-definition{opacity:.45}
.symbol-definition{transition:background .65s,box-shadow .65s,opacity .3s,border-color .4s}
.symbol-definition code{min-height:1.6em}

@media(max-width:650px){.output-meter{padding:11px 13px;gap:9px}.fx-odometer strong{font-size:22px}.output-stage pre .log-line{min-height:1.9em}}
.motion-paused .editor-caret{animation:none}