/* C extends B without altering its archived styles. */
.motion{--ease:cubic-bezier(.22,.75,.22,1)}
.motion #assembly{filter:drop-shadow(12px 26px 15px #0004);transform:none;max-height:360px;overflow:visible}
.motion .assembly-wrap{min-height:300px}
.plate-motion{transform-box:view-box;transition:transform 720ms var(--ease)}
.motion .specimen{overflow:hidden}
.motion-controls{position:relative;padding:0 25px 20px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px}
.motion-controls label{display:flex;align-items:center;gap:12px;font-size:11px;color:#d1dcd9}
.motion-controls input{width:100px;accent-color:#c4d2b0;cursor:pointer}
.motion-controls output{font:10px Consolas,monospace;min-width:35px}
.motion-controls button{background:transparent;border:1px solid #617581;padding:9px 12px;font-size:11px;min-height:36px}
.motion-controls button[aria-pressed="true"]{background:#c4d2b0;color:#1a2930;border-color:#c4d2b0}
.motion-status{flex-basis:100%;font-size:10px;color:#a9becb;min-height:15px}
.motion .axis{top:42%;pointer-events:none}
.motion .project-select{transition:background-color 200ms var(--ease),color 200ms var(--ease),box-shadow 200ms var(--ease)}
.motion .project-select b{display:inline-block;transition:transform 180ms var(--ease)}
.motion .project-select:hover b,.motion .project-select:focus-visible b{transform:translate(3px,-3px)}
.motion .project-select:not(.active):hover{background:#29394a;box-shadow:inset 3px 0 #b6c99d}
.motion .display-copy{min-height:200px}
.motion .display-copy p{min-height:76px}
.motion .display-copy button,.motion .explore,.motion nav a{transition:color 180ms var(--ease)}
.motion .display-copy button:hover,.motion .explore:hover,.motion nav a:hover{color:#c9deaa}
.motion .explore span,.motion #assemble span{display:inline-block;transition:transform 220ms var(--ease)}
.motion .explore:hover span{transform:translateY(4px)}
.motion #assemble:hover span{transform:translate(2px,-2px)}
.motion #assemble{min-width:124px;min-height:42px}
.motion dialog{background:#202d3b;color:#e6e9e2;border:1px solid #637984;padding:36px;max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 32px 100px #0007}
.motion dialog::backdrop{background:#0b121dc2;backdrop-filter:blur(7px)}
.motion dialog h2{font-family:"Segoe UI","Microsoft YaHei",sans-serif;font-weight:400;font-size:36px;letter-spacing:-.045em}
.motion dialog .close{color:#d8e2da;border-color:#738894;min-height:42px;margin-left:18px}
.motion dialog .close:hover{background:#3a4b58}
.motion dialog>.eyebrow{color:#b8cda2;display:block;padding-top:12px}
.detail-rule{height:1px;background:#738894;margin-top:36px;clear:both}
.motion dialog a{color:#c8d9ae}
.motion dialog .note{opacity:1;color:#b9c6ce}
.motion button:active{filter:brightness(.94)}
@media(max-width:800px){.motion .assembly-wrap{min-height:280px}.motion #assembly{height:310px}.motion .motion-controls{padding:0 20px 18px;gap:12px}.motion .motion-controls label{flex:1}.motion .motion-controls input{width:85px}.motion .display-copy{min-height:240px}.motion .display-copy p{min-height:110px}}
@media(max-width:420px){.motion dialog{padding:24px}.motion dialog h2{font-size:30px}.motion-controls button{font-size:10px}.motion .motion-controls label{font-size:10px;gap:8px}}
@media(prefers-reduced-motion:reduce){.plate-motion{transition:none!important}.motion #assembly{transition:none!important}}
.motion .binary-art{height:210px;overflow:hidden;display:block}
.preview-cache,.preview-encoding{position:absolute;inset:20px 8px 30px}
.preview-cache{display:grid;grid-template-columns:70px 1fr 100px;align-items:center;gap:12px}
.address-chip{border:1px solid #a8baa3;padding:14px 8px;font:16px Consolas;text-align:center;background:#2d404b}
.route{height:1px;background:#6f8792;position:relative}
.packet{position:absolute;width:12px;height:6px;top:-3px;background:#c4d5a5;animation:packet-flow 8s ease-in-out infinite}
.cache-bank{display:grid;gap:6px}.cache-bank i{height:20px;border:1px solid #718994;background:#304758}.cache-bank i:nth-child(3){animation:cache-fill 8s ease-in-out infinite}
.cache-steps{grid-column:1/-1;display:flex;justify-content:space-between;font:9px Consolas;color:#b7c9cb;letter-spacing:.12em}
.preview-encoding{display:none;padding-top:20px}
.binary-art[data-kind="encoding"] .preview-cache{display:none}
.binary-art[data-kind="encoding"] .preview-encoding{display:block}
.instruction-word{height:45px;display:grid;grid-template-columns:repeat(4,1fr);position:relative;gap:3px}
.instruction-word i{font:14px Consolas;border:1px solid #82969d;background:#304758;display:grid;place-items:center;font-style:normal}
.opcode-scan{position:absolute;inset:0;border:1px solid #ccdeb1;background:#b5cda52a;transform-origin:left;animation:opcode-expand 9s ease-in-out infinite}
.encoding-tree{display:flex;justify-content:space-around;margin:22px 0 12px;border-top:1px solid #718994;padding-top:12px}
.encoding-tree i{height:9px;width:9px;background:#aec29b;animation:prefix-light 9s ease-in-out infinite}
.encoding-tree i:nth-child(2){animation-delay:.4s}.encoding-tree i:nth-child(3){animation-delay:.8s}.encoding-tree i:nth-child(4){animation-delay:1.2s}
.encoding-caption{font:9px Consolas;color:#b7c9cb;letter-spacing:.1em}
.binary-art *{animation-play-state:paused!important}
.binary-art.is-running[data-kind="cache"] .preview-cache *,.binary-art.is-running[data-kind="encoding"] .preview-encoding *{animation-play-state:running!important}
.exhibit-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#a6b9c5;font-size:10px;padding-bottom:20px}
.exhibit-toolbar button{background:none;border:1px solid #637984;padding:7px 9px;color:#d2dfd2;font-size:10px;min-height:32px}
@keyframes packet-flow{0%,8%{left:0;opacity:0}15%{opacity:1}40%,52%{left:calc(100% - 12px);opacity:1}60%{opacity:0}70%{left:0;opacity:0}80%{opacity:1}94%,100%{left:calc(100% - 12px);opacity:0}}
@keyframes cache-fill{0%,30%{background:#304758}45%,65%{background:#bfd2a6}80%{background:#728c71}95%,100%{background:#304758}}
@keyframes opcode-expand{0%,12%{transform:scaleX(.25)}38%,48%{transform:scaleX(.5)}67%,77%{transform:scaleX(.75)}95%,100%{transform:scaleX(.25)}}
@keyframes prefix-light{0%,18%,100%{opacity:.25;transform:scale(.8)}45%,65%{opacity:1;transform:scale(1.15)}}
@media(max-width:420px){.preview-cache{grid-template-columns:56px 1fr 80px;gap:8px}.address-chip{font-size:13px}.exhibit-toolbar{font-size:9px}}

/* Original drawn wordmark: consistent strokes, a full curved U, optical spacing. */
.motion .logo{display:flex;align-items:center;letter-spacing:normal;flex-shrink:0}
.yun-mark{width:100px;height:38px;display:block}
.motion .plate-motion{transform-origin:353px -31px}
@media(max-width:540px){.yun-mark{width:80px;height:32px}}

/* Extra breathing room for the wider disassembly travel. */
.motion .assembly-wrap{min-height:390px}
@media(max-width:800px){.motion .assembly-wrap{min-height:340px}}